/* Wijnvanjewelste, maatwerkthema. Stijl 1:1 uit de goedgekeurde conceptsite | SaffrieDesign */ :root{ /* exact uit live site: --wd-primary-color #9B182D, donkerrood #891628, goud #D6A32A (hover #E5AE2D), creme #F7F5F2, licht #F5F5F5, zachtroze #FEF2F3, titels #242424/#333, tekst #777 (Lexend 300), koppen Kumbh Sans 700, alternatief Lato, succes #459647, radius 8px, knoppen 35px */ --wine:#9B182D; --wine-dark:#891628; --wine-deep:#7a0e20; --wine-soft:#FEF2F3; --ink:#242424; --title:#242424; --entities:#333333; --text:#777777; --cream:#F7F5F2; --light:#F5F5F5; --sand:#e0ddd8; --gold:#D6A32A; --gold-hover:#E5AE2D; --green:#459647; --green-soft:#e8f3df; --grad:linear-gradient(150deg,#9B182D 0%,#57000c 100%); --font-head:"Kumbh Sans",Arial,Helvetica,sans-serif; --font-body:"Lexend",Arial,Helvetica,sans-serif; --font-alt:"Lato",Arial,sans-serif; --radius:10px; --btn-radius:35px; --shadow:0 10px 30px rgba(41,42,46,.08); } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} html,body{overflow-x:clip;max-width:100%} @supports not (overflow: clip){html,body{overflow-x:hidden}} body{font-family:var(--font-body);font-weight:300;color:var(--text);background:#fff;line-height:1.65;font-size:16px} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--font-head);font-weight:700;line-height:1.2;color:var(--title)} /* titels op donkere/gekleurde achtergronden altijd wit (override ná generieke regel) */ .hero h1,.hero h2,.pagehero h1,.pagehero h2,section.grad h1,section.grad h2,section.grad h3,section.grad h4,.moment h3,footer.site h4,.drawer .dhead h3{color:#fff} .wrap{max-width:1200px;margin:0 auto;padding:0 20px} .ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--wine);color:#fff;border:none;cursor:pointer;font-family:var(--font-body);font-weight:400;font-size:15px;padding:13px 30px;border-radius:var(--btn-radius);transition:.2s} /* Deze regels zijn er alleen om te voorkomen dat een linkkleur uit de omgeving (zoals ".article a") de knoptekst overneemt. Bewust ZONDER :hover: de hover-toestanden staan hieronder en die moeten kunnen winnen. Met :hover erbij bleef de tekst wit terwijl de achtergrond ook wit werd, en dan is de knop leeg. */ a.btn,button.btn{color:#fff;text-decoration:none} a.btn.ghost{color:var(--wine)} a.btn.ghost.white{color:#fff} a.btn:hover,a.btn:focus{text-decoration:none} .btn:hover{background:var(--wine-dark);transform:translateY(-1px)} .btn.gold{background:var(--gold);color:#fff}.btn.gold:hover{background:var(--gold-hover)} .btn.dark{background:#1d1d1e} .btot{font-weight:600}.btn.dark:hover{background:#000} .btn.ghost{background:transparent;color:var(--wine);border:1.5px solid var(--wine)} .btn.ghost:hover{background:var(--wine);color:#fff;transform:none} .btn.ghost.white{color:#fff;border-color:#fff}.btn.ghost.white:hover{background:#fff;color:var(--wine)} /* ── USP bar (helderrood met vinkjes, zoals live) ── */ .uspbar{background:var(--wine);color:#fff;font-size:13px;font-weight:400} .uspbar .wrap{display:flex;justify-content:center;gap:52px;padding:9px 20px;white-space:nowrap} .uspbar span{display:flex;gap:8px;align-items:center} .uspbar .ic{width:15px;height:15px;stroke-width:2.4} @media(max-width:760px){ /* overflow:hidden hoort erbij: de binnenkomende melding staat 36 pixels naar rechts geschoven en stak daarmee buiten het kader. */ .uspbar .wrap{position:relative;height:36px;padding:0 20px;overflow:hidden} .uspbar .uspitem{position:absolute;inset:0;display:flex;justify-content:center;align-items:center;opacity:0;transform:translateX(36px);transition:opacity .45s,transform .45s} .uspbar .uspitem.on{opacity:1;transform:none} .uspbar .uspitem.out{opacity:0;transform:translateX(-36px)} } /* ── header: donker, logo gecentreerd ── */ header.site{position:sticky;top:0;z-index:60;background:var(--ink);box-shadow:0 2px 14px rgba(0,0,0,.25)} .nav{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:center;padding:8px 20px;max-width:1280px;margin:0 auto;gap:12px} /* align-items:center hoort erbij. Zonder die regel gingen de items met een uitklappijltje (die zijn inline-flex) anders staan dan de items zonder, en stond "Home" een paar pixels hoger dan de rest. */ .nav .menu-l{display:flex;gap:24px;list-style:none;align-items:center;justify-content:flex-end;padding-right:34px} /* Let op: GEEN display hier. ".nav .side-r li.navlink" is specifieker (0,3,1) dan ".nav .side-r .navlink" (0,3,0) in de mediaquery hieronder, en zette daarmee de menu-items op de telefoon weer aan. Alleen uitlijnen, het tonen of verbergen blijft bij de mediaquery. */ .nav .menu-l li,.nav .side-r li.navlink{align-items:center} .nav .menu-l li{display:flex} .nav .menu-l a,.nav .side-r .navlink > a{display:inline-flex;align-items:center;gap:5px;line-height:1} .nav .side-r{display:flex;gap:24px;align-items:center;justify-content:flex-start;list-style:none;padding-left:34px} .nav .side-r .icons-start{margin-left:auto} .nav a{color:#fff;font-size:14.5px;padding:8px 0;border-bottom:2px solid transparent;font-weight:400} .nav a:hover{border-color:var(--gold)} .nav a.logo,.nav a.logo:hover{border-bottom:none;padding:0} .nav .logo img{height:58px;width:auto} /* align-items en justify-content horen hier en niet pas in de mediaquery: zodra de knop op de telefoon een vaste maat van 44 pixels krijgt, plakt het icoon zonder deze twee regels tegen de linkerbovenhoek. Het winkelwagentje stond daardoor zichtbaar hoger en verder naar links dan het vergrootglas ernaast. */ .nav .iconbtn{position:relative;background:none;border:none;cursor:pointer;color:#fff;padding:5px;display:flex;align-items:center;justify-content:center} .nav .iconbtn .ic{width:21px;height:21px} .nav .iconbtn .count{position:absolute;top:-4px;right:-7px;background:var(--gold);color:#fff;font-size:10.5px;font-weight:600;min-width:17px;height:17px;border-radius:9px;display:flex;align-items:center;justify-content:center;font-family:var(--font-body)} .burger{display:none;background:none;border:none;color:#fff;cursor:pointer;padding:6px;align-items:center;justify-content:center} .burger .ic{width:24px;height:24px} .nav .side-r li:has(.iconbtn):not(.icons-start){margin-left:-8px} @media(max-width:1180px) and (min-width:961px){ .nav .menu-l,.nav .side-r{gap:15px} .nav .menu-l{padding-right:22px}.nav .side-r{padding-left:22px} .nav a{font-size:13.5px} .nav .logo img{height:50px;width:auto} } .nav .side-r li{display:flex} @media(max-width:960px){ .nav{grid-template-columns:1fr auto 1fr} .burger{justify-self:start} .nav .logo{justify-self:center} .nav .side-r{padding-left:0;justify-content:flex-end;gap:0} .nav .side-r .icons-start{margin-left:0} .nav .side-r li:has(.iconbtn):not(.icons-start):not(.navzoek){display:none} .nav .menu-l{display:none} .nav .side-r .navlink{display:none} /* Zoeken blijft staan, naast de winkelwagen. */ .nav .side-r .navzoek{display:flex;margin-left:2px} .burger{display:flex;z-index:80} .nav .logo img{height:46px;width:auto} } /* ── categorie-iconenbalk (donker, echte svg-iconen) ── */ .cats{background:#1d1d1e;color:#fff} .cats .wrap{display:flex;justify-content:center;gap:8px;overflow-x:auto;padding:0 20px;scrollbar-width:none} .cats .wrap::-webkit-scrollbar{display:none} .cats a{display:flex;align-items:center;gap:10px;padding:14px 18px;font-size:13.5px;white-space:nowrap;border-bottom:2px solid transparent;font-weight:400} .cats a:hover{border-color:var(--gold);background:rgba(255,255,255,.04)} .cats{position:relative} .cats-hint{display:none} @media(max-width:960px){ .cats .wrap{justify-content:flex-start;scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch;padding-right:64px} .cats a{scroll-snap-align:start;padding:13px 14px} /* rechterrand-fade + pijltje: maakt duidelijk dat je kunt swipen */ .cats::after{content:"";position:absolute;top:0;right:0;bottom:0;width:64px;background:linear-gradient(90deg,rgba(29,29,30,0),#1d1d1e 78%);pointer-events:none;transition:opacity .3s} .cats-hint{display:flex;position:absolute;right:10px;top:50%;transform:translateY(-50%);color:var(--gold);pointer-events:none;animation:catnudge 1.6s ease-in-out infinite} .cats-hint .ic{width:17px;height:17px} .cats.scrolled::after,.cats.scrolled .cats-hint{opacity:0} } @keyframes catnudge{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(5px)}} .cats img{height:26px;width:26px;object-fit:contain} /* ── hero ── */ .hero{position:relative;min-height:480px;display:flex;align-items:center;justify-content:center;background:var(--ink);text-align:center} .hero .bg{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.6} .hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(20,10,10,.45),rgba(20,10,10,.2))} .hero .inner{position:relative;z-index:2;color:#fff;padding:90px 20px;max-width:760px;width:100%;margin:0 auto} .hero h1{font-size:clamp(32px,5vw,52px);margin-bottom:16px;text-shadow:0 2px 18px rgba(0,0,0,.4);text-wrap:balance} .hero p{font-size:17px;color:#f3efe9;margin:0 auto 28px;max-width:620px;text-shadow:0 1px 10px rgba(0,0,0,.5);text-wrap:balance} .pagehero{background:var(--grad);color:#fff;padding:60px 0 44px} .pagehero h1{font-size:clamp(28px,4vw,44px)} .pagehero p{max-width:640px;margin-top:10px;color:#f4d9dc} .crumbs{font-size:13px;color:#eab7bf;margin-bottom:14px} .crumbs a:hover{text-decoration:underline} /* ── secties ── */ section{padding:64px 0} section.cream{background:var(--cream)} section.grad{background:var(--grad);color:#fff} section.winesoft{background:var(--wine-soft)} .sec-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:34px;flex-wrap:wrap} .sec-head.center{justify-content:center;text-align:center;flex-direction:column;align-items:center;gap:8px} .sec-head h2{font-size:clamp(24px,3vw,34px)} .sec-head .kicker{color:var(--wine);letter-spacing:.16em;text-transform:uppercase;font-size:12.5px;font-weight:400;margin-bottom:6px;display:block} section.grad .sec-head .kicker{color:var(--gold)} .sec-head .sub{max-width:640px;color:#5b5c61;font-size:15px} section.grad .sec-head .sub{color:#f4d9dc} .sec-head .more{color:var(--wine);font-weight:400;font-size:14.5px;white-space:nowrap;display:flex;align-items:center;gap:6px} section.grad .sec-head .more{color:#fff} .sec-head .more:hover{text-decoration:underline} /* ── productcards: overal identiek, gecentreerd zoals live ── */ .grid{display:grid;gap:22px} .grid.p4{grid-template-columns:repeat(4,1fr)} .grid.p3{grid-template-columns:repeat(3,1fr)} @media(max-width:1020px){.grid.p4{grid-template-columns:repeat(3,1fr)}} @media(max-width:780px){.grid.p4,.grid.p3{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.grid.p4,.grid.p3{gap:12px}} /* Geen overflow:hidden meer op de kaart zelf: dat knipte de toelichting die onder een beeldmerk verschijnt gewoon weg. Het beeldvak knipt nu zelf, dus de ronde bovenhoeken blijven kloppen. */ .card{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);display:flex;flex-direction:column;transition:.22s;position:relative;text-align:center} .card:hover,.card:focus-within{z-index:5} .card:hover{box-shadow:var(--shadow);transform:translateY(-3px);border-color:transparent} .card .imgbox{position:relative;aspect-ratio:1/1;background:#fff;display:block;padding:0;border-radius:var(--radius) var(--radius) 0 0} /* De flesfoto vult het vierkante vlak en wordt daarbinnen passend geschaald. Eerder stond hier alleen max-height:100%; een percentage-maximum kan niet worden opgelost zolang de hoogte van het vlak zelf nog van de inhoud afhangt, dus dan viel de browser terug op de height-attributen in de HTML. Bij een foto van 600 pixels hoog werd het vlak dan 644 pixels hoog in plaats van 271. Daarna stond hier width:100%;height:100% op een foto die gewoon in de stroom stond. In Chrome ging dat goed, in Safari niet: daar telt zo'n percentage-hoogte binnen een vak met aspect-ratio mee bij het bepalen van de kleinst mogelijke breedte van datzelfde vak, en dat bijt zichzelf in de staart. De kolommen van de grid zijn minmax(auto,1fr), dus die minimumbreedte werd de kolombreedte: een kaart van tienduizenden pixels breed. Op de telefoon zag je daar precies één leeg wit vlak van. De foto staat nu absoluut in het vak, met de marge op de foto zelf. Absoluut gepositioneerde inhoud telt niet mee bij het meten van het vak, dus de lus is weg en het vak is in elke browser gewoon vierkant. Direct kind (>): de beeldmerken linksboven zitten in een .picon en houden hun eigen maat. */ .card .imgbox>img{position:absolute;inset:0;width:100%;height:100%;padding:22px;box-sizing:border-box;object-fit:contain} /* max-width plus ellipsis: een langer label (of een breder lettertype dan waarmee getest is) mag nooit meer buiten de kaart vallen. Op de telefoon laten we de pil helemaal weg, zie de mediaquery onderaan: daar is de kaart te smal voor tekst naast het beeldmerk, en het beeldmerk zegt hetzelfde. */ /* De toelichting bij een beeldmerk. Dit was een ::after met data-tip. Dat leest prettig in de HTML, maar je kunt een pseudo-element met JavaScript niet meten, en dus ook niet klemmen als het buiten het scherm valt. Op de telefoon liep hij daardoor het beeld uit. Nu is het een echt element, en zet assets/js/theme.js hem bij het openen op de juiste plek. */ .picon .ptip{position:absolute;top:calc(100% + 10px);left:0;width:max-content;max-width:min(230px,calc(100vw - 32px));background:#1d1d1e;color:#fff;font-size:12px;font-weight:300;line-height:1.5;padding:9px 13px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.22);opacity:0;visibility:hidden;transform:translateY(-4px);pointer-events:none;transition:opacity .18s,transform .18s;z-index:60;text-align:left;text-transform:none;letter-spacing:0;white-space:normal;font-family:var(--font-body)} .picon .ptip::before{content:"";position:absolute;bottom:100%;left:var(--pijl,14px);border:5px solid transparent;border-bottom-color:#1d1d1e} /* Het beeldmerk zelf omhoog in de stapel zodra de toelichting open staat. Zonder deze regel viel de toelichting achter het beeldmerk eronder: dat staat later in de HTML en wint dan, hoe hoog de z-index van de toelichting zelf ook is. Een z-index binnen een element helpt niet tegen een broer of zus erbuiten. */ .picon{position:relative} .picon:hover,.picon:focus,.picon:focus-within, .card .picon:hover,.card .picon:focus,.card .picon:focus-within, .pdetail .pimg .picon:hover,.pdetail .pimg .picon:focus,.pdetail .pimg .picon:focus-within{z-index:70} .picon:hover .ptip,.picon:focus .ptip,.picon:focus-within .ptip{opacity:1;visibility:visible;transform:none} @media(max-width:560px){.picon .ptip{font-size:12.5px;padding:10px 14px}} .card .plabel{position:absolute;top:12px;right:12px;z-index:3;max-width:calc(100% - 60px);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:var(--wine-dark);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.06em;padding:4px 12px;border-radius:999px;text-transform:uppercase} /* De beeldmerken op de flesfoto: biologisch, Michelin, onderscheiding. Een wijn kan er meerdere hebben (maximaal drie op een kaart), dus ze stapelen onder elkaar in plaats van over elkaar heen. */ .card .picon{position:absolute;top:12px;left:12px;width:32px;height:32px;border-radius:50%;display:flex;padding:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.14));z-index:2} .card .picon--1{top:50px} .card .picon--2{top:88px} @media(max-width:460px){ .card .picon{width:26px;height:26px} .card .picon--1{top:44px} .card .picon--2{top:76px} } .card .picon img{width:100%;height:100%;object-fit:cover;border-radius:50%} /* tooltip op attribuut-rondjes */ .picon{cursor:help} .card .body{padding:4px 18px 18px;display:flex;flex-direction:column;gap:5px;flex:1;align-items:center} .card h3{font-size:15px;font-weight:700;line-height:1.35;min-height:41px;color:var(--entities)} .card h3 a:hover{color:var(--wine)} .card .pcat{font-size:12px;color:var(--wine);font-weight:400} .card .pcat a:hover{text-decoration:underline} .card .price{color:var(--wine);font-weight:600;font-size:16.5px} .card .price small{color:#8a8b90;font-weight:300;font-size:11.5px;margin-left:3px} .card .add{margin-top:10px;background:transparent;border:1.5px solid var(--wine);color:var(--wine);border-radius:999px;padding:9px 22px;font-size:13px;font-family:var(--font-body);cursor:pointer;transition:.2s;display:inline-flex;gap:7px;align-items:center} .card .add:hover{background:var(--wine);color:#fff} .card .add .ic{width:15px;height:15px} @media(max-width:460px){.card .body{padding:2px 12px 14px}.card h3{font-size:13px;min-height:36px}.card .price{font-size:14.5px}.card .add{padding:8px 16px;font-size:12px}} /* ── moment-tegels (staand, foto met titel, zoals live) ── */ .moments{display:grid;grid-template-columns:repeat(5,1fr);gap:18px} @media(max-width:980px){.moments{grid-template-columns:repeat(3,1fr)}} @media(max-width:600px){.moments{grid-template-columns:repeat(2,1fr);gap:12px}} .moment{position:relative;border-radius:14px;overflow:hidden;aspect-ratio:3/4.2;display:flex;align-items:center;justify-content:center;text-align:center} .moment img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:.35s} .moment::after{content:"";position:absolute;inset:0;background:rgba(30,10,12,.28);transition:.25s} .moment:hover img{transform:scale(1.06)} .moment:hover::after{background:rgba(87,0,12,.45)} .moment h3{position:relative;z-index:2;color:#fff;font-size:19px;padding:0 14px;text-shadow:0 2px 12px rgba(0,0,0,.5)} /* ── info-tegels ── */ .tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:900px){.tiles{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.tiles{grid-template-columns:1fr}} .tile{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);padding:26px;transition:.22s;display:flex;flex-direction:column;gap:10px} .tile:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .tile .t-kick{font-size:12px;color:var(--wine);text-transform:uppercase;letter-spacing:.12em} .tile h3{font-size:19px} .tile p{font-size:14px;color:#5b5c61;flex:1} .tile .t-link{color:var(--wine);font-size:14px;font-weight:400} section.grad .tile{background:rgba(255,255,255,.07);border-color:rgba(255,255,255,.16);color:#fff;backdrop-filter:blur(4px)} section.grad,section.grad p{color:#f4dfe2} section.grad .tile p{color:#f0d5d9} section.grad .tile .t-link,section.grad .tile .t-kick{color:var(--gold)} .tile.img{padding:0;overflow:hidden} /* height:auto hoort er echt bij. Zonder die regel is de hoogte al bepaald door het height-attribuut in de HTML (560), en dan doet aspect-ratio helemaal niets: de tegelfoto's werden 560 pixels hoog en dus veel te staand. Dit is dezelfde fout als bij de flesfoto's op de kaarten. */ .tile.img .ph{aspect-ratio:4/3;height:auto;object-fit:cover;width:100%;display:block} .tile.img .tb{padding:20px 24px 24px;display:flex;flex-direction:column;gap:8px;flex:1} /* ── uitgelicht ── */ .featured{display:grid;grid-template-columns:1fr 1fr;gap:44px;align-items:center} @media(max-width:860px){.featured{grid-template-columns:1fr}} .featured .fimg{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);padding:40px;display:flex;justify-content:center} .featured .fimg img{max-height:420px;object-fit:contain} .featured .note{font-size:12px;color:#8a8b90;margin-top:14px} /* ── productdetail (1:1 naar live voorbeeldpagina) ── */ .backpill{display:inline-flex;align-items:center;gap:7px;background:var(--cream);border-radius:999px;padding:7px 16px;font-size:13px;margin-bottom:16px} .backpill:hover{background:var(--sand)} .pdetail{display:grid;grid-template-columns:1fr 1.05fr;gap:54px;align-items:start} @media(max-width:860px){.pdetail{grid-template-columns:1fr;gap:28px}} /* flex-direction:column, want dit vak bevat naast de flesfoto ook de strip met extra foto's. In een rij belandde die strip naast de fles en werd hij door align-items:stretch over de volle hoogte uitgerekt: een smal wit vak van ruim vierhonderd pixels hoog met het wijnhuislogo erin, half afgesneden. */ .pdetail .pimg{background:var(--cream);border-radius:20px;padding:44px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;position:relative} .pdetail .pimg > img{max-height:470px;width:auto;max-width:100%;object-fit:contain} .pdetail .pimg .plabel{position:absolute;top:16px;right:16px;background:var(--wine-dark);color:#fff;font-size:11px;font-weight:600;letter-spacing:.06em;padding:5px 14px;border-radius:999px;text-transform:uppercase} .pdetail .pimg .picon{position:absolute;top:52px;right:16px;width:36px;height:36px;border-radius:50%;display:flex;padding:0;filter:drop-shadow(0 2px 6px rgba(0,0,0,.14));z-index:2} /* Meerdere keurmerken onder elkaar, net als op de kaarten in de winkel. */ .pdetail .pimg .picon--1{top:96px} .pdetail .pimg .picon--2{top:140px} .pdetail .pimg .picon img{width:100%;height:100%;object-fit:cover;border-radius:50%} .pdetail .pcrumb{font-size:13px;color:#8a8b90;margin-bottom:8px} .pdetail .pcrumb a{color:var(--wine)} .pdetail h1{font-size:clamp(24px,3vw,34px);margin-bottom:10px} .pdetail .pdesc{color:#5b5c61;font-size:15px} .attr-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px 32px;margin:22px 0;max-width:480px} @media(max-width:460px){.attr-grid{grid-template-columns:1fr}} .attr{display:flex;gap:12px;align-items:center} .attr .aicon{width:40px;height:40px;color:var(--wine);flex-shrink:0} .attr .aicon .ic{width:100%;height:100%;stroke-width:1.4} .attr .aicon img{width:100%;height:100%;object-fit:contain} .attr small{display:block;font-size:11.5px;color:#8a8b90;text-transform:uppercase;letter-spacing:.06em} .attr b{font-family:var(--font-head);font-size:14px;line-height:1.45} .attr b a:hover{color:var(--wine);text-decoration:underline} /* Het smaakprofiel had in het beheer een limiet van 46 tekens; die is eraf omdat Joris er bij veel wijnen tegenaan liep. Langere tekst moet hier dus netjes omlopen in plaats van uit het vakje te steken. min-width:0 is daarvoor nodig: een flexitem wordt standaard niet smaller dan zijn langste woord. */ .attr>div{min-width:0;overflow-wrap:anywhere} .pdetail .bigprice{font-size:26px;color:var(--ink);font-weight:700;font-family:var(--font-head);margin-top:6px} .pdetail .bigprice small{font-size:13px;color:#8a8b90;font-weight:300;font-family:var(--font-body)} .qtypresets{display:flex;gap:8px;margin:16px 0 6px} .qtypresets button{width:42px;height:42px;border-radius:10px;border:1.5px solid var(--sand);background:var(--cream);font-family:var(--font-body);font-size:14px;cursor:pointer;transition:.15s} .qtypresets button:hover,.qtypresets button.on{border-color:var(--wine);background:var(--wine-soft);color:var(--wine)} .buyrow{display:flex;gap:12px;margin:14px 0 18px;align-items:stretch;flex-wrap:wrap} /* Het aantalvakje. inline-flex zodat het niet de hele regel opeist, en flex:0 0 auto op de onderdelen zodat het vakje nooit meegroeit met zijn omgeving. */ .qty{display:inline-flex;align-items:center;border:1.5px solid var(--sand);border-radius:999px;overflow:hidden;background:#fff;flex:0 0 auto;height:46px} .qty button{flex:0 0 auto;width:42px;height:100%;border:none;background:transparent;font-size:18px;line-height:1;cursor:pointer;color:var(--ink);display:flex;align-items:center;justify-content:center;transition:background .15s} .qty button:hover{background:var(--cream)} .qty button:disabled{opacity:.35;cursor:default} /* -webkit-appearance:none haalt de blauwe iOS-opmaak weg: op een iPhone kreeg dit vakje anders het systeemuiterlijk van Safari in plaats van dat van de site. */ .qty input{flex:0 0 auto;width:44px!important;min-width:0;max-width:44px;height:100%;border:none;border-radius:0;text-align:center;font-size:15px;font-family:var(--font-body);color:var(--ink);background:transparent;padding:0;margin:0;box-shadow:none;-webkit-appearance:none;appearance:none} .qty input:focus{outline:none;background:var(--cream)} .qty input::-webkit-outer-spin-button,.qty input::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* De voorraadmelding stond met nul ruimte op de chips eronder geplakt. */ .stockrow{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:18px 0 22px} .stockrow + .chips{margin-top:0} .stockpill{background:#e5f2e5;color:#2f7a31;font-size:13px;padding:8px 18px;border-radius:999px;display:inline-flex;gap:8px;align-items:center} .wish{background:none;border:none;cursor:pointer;color:#8a8b90;display:flex;padding:6px} .wish:hover{color:var(--wine)} .wish .ic{width:20px;height:20px} /* tabs */ .tabsec{background:#f6f5f1;padding:56px 0} .tabs{margin-top:0} .tabs h2{text-align:center;font-size:28px;margin-bottom:22px} .tabbtns{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-bottom:26px} .tabbtns button{border:1.5px solid #e3e0da;background:#fff;border-radius:999px;padding:10px 24px;font-family:var(--font-body);font-size:13.5px;cursor:pointer;transition:.2s} .tabbtns button.on{background:var(--wine-dark);border-color:var(--wine-dark);color:#fff} .tabpane{display:none;background:#fff;border-radius:20px;box-shadow:var(--shadow);padding:40px;max-width:980px;margin:0 auto;position:relative} .tabpane:has(.makerlogo) .spec{max-width:calc(100% - 200px)} @media(max-width:900px){.tabpane:has(.makerlogo) .spec{max-width:100%}} .tabpane.on{display:block} /* Twee keer zo groot als eerst: op 88 pixels was het merk niet te lezen. */ .tabpane .makerlogo{position:absolute;top:26px;right:26px;width:176px;height:auto;padding:16px;border:1px solid var(--sand);border-radius:12px;background:#fff} @media(max-width:900px){.tabpane .makerlogo{width:130px;padding:12px}} .spec{width:100%;border-collapse:collapse} .spec tr{border-bottom:1px solid var(--cream)} .spec tr:last-child{border:none} .spec th{text-align:left;padding:11px 14px 11px 0;font-family:var(--font-head);font-size:14px;white-space:nowrap;vertical-align:top;width:36%} .spec td{padding:11px 0;color:#5b5c61;font-size:14.5px} @media(max-width:560px){.tabpane{padding:24px}.spec th{width:46%;white-space:normal;font-size:13px}.spec td{font-size:13px}.tabpane .makerlogo{display:none}} @media(max-width:780px){ } @media(max-width:560px){ /* Op de telefoon is de kaart te smal voor een tekstpil naast het beeldmerk. Het beeldmerk zelf zegt hetzelfde, en met een tik erop komt de toelichting met de volledige naam tevoorschijn. */ .card .plabel{display:none} } /* ── schakelaar inclusief / exclusief btw ── Beide bedragen staan in de HTML; hier bepalen we welke er te zien is. De klasse op wordt gezet door het scriptje in de head, vóór het tekenen, dus de prijzen springen niet om na het laden. */ .prijs--excl{display:none} html.btw-excl .prijs--incl{display:none} html.btw-excl .prijs--excl{display:inline} .btwswitch{display:inline-flex;background:var(--cream);border:1px solid var(--sand);border-radius:999px;padding:3px;gap:2px} .btwswitch__knop{border:0;background:transparent;font-family:var(--font-body);font-size:13px;color:#6c6d72;padding:7px 16px;border-radius:999px;cursor:pointer;transition:.18s;white-space:nowrap} .btwswitch__knop:hover{color:var(--wine)} .btwswitch__knop.is-aan{background:#fff;color:var(--title);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.08)} .btwswitch--balk{margin-left:auto} @media(max-width:640px){ .btwswitch__knop{padding:7px 12px;font-size:12.5px} .btwswitch--balk{margin-left:0} } /* ── uitklapmenu's in de navigatie ── Achter Winkel, Wijnregio's en Wijnhuizen. De lijstjes komen uit WooCommerce en de ontdek-structuur, dus ze lopen vanzelf mee. */ .navlink--sub{position:relative} .navlink--sub > a{display:inline-flex;align-items:center;gap:5px} .navlink--sub > a .ic{width:13px;height:13px;transition:transform .18s} .navlink--sub:hover > a .ic,.navlink--sub:focus-within > a .ic{transform:rotate(180deg)} .subnav{position:absolute;top:100%;left:50%;transform:translateX(-50%) translateY(6px); min-width:238px;background:#fff;border:1px solid var(--sand);border-radius:14px; box-shadow:0 14px 40px rgba(0,0,0,.14);padding:8px;opacity:0;visibility:hidden; transition:opacity .16s,transform .16s;z-index:80} /* Een onzichtbare brug tussen het menu-item en de uitklapper, zodat hij niet dichtklapt terwijl de muis ernaartoe beweegt. */ .subnav::before{content:"";position:absolute;bottom:100%;left:0;right:0;height:14px} .navlink--sub:hover .subnav,.navlink--sub:focus-within .subnav{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .subnav ul{list-style:none;margin:0;padding:0} .subnav a{display:flex;align-items:center;justify-content:space-between;gap:14px; padding:10px 14px;border-radius:9px;font-size:14px;color:var(--entities);white-space:nowrap;transition:.14s} .subnav a:hover{background:var(--cream);color:var(--wine)} .subnav small{color:#a3a4a8;font-size:12px;font-variant-numeric:tabular-nums} .subnav__alles{border-top:1px solid var(--cream);margin-top:6px;padding-top:6px} .subnav__alles a{color:var(--wine);font-weight:600} /* Op de donkere header staat de uitklapper wél licht: dat leest beter dan een tweede donker vlak op donker. */ .nav .subnav{color:var(--entities)} @media(max-width:900px){.navlink--sub .subnav{display:none}} /* ── mobiel: tweede laag die van rechts inschuift ── */ /* Dezelfde donkere opmaak als de rest van het mobiele menu: het paneel schuift eroverheen, dus wit zou eruit springen als een ander onderdeel. */ .mlink--sub .mlink__knop{width:100%;display:flex;align-items:center;justify-content:space-between; gap:12px;background:none;border:0;padding:13px 14px;font-family:var(--font-body);font-size:16px; color:#fff;cursor:pointer;text-align:left;border-radius:10px} .mlink--sub .mlink__knop:hover,.mlink--sub .mlink__knop:active{background:rgba(255,255,255,.07)} .mlink--sub .mlink__knop .ic{width:15px;height:15px;color:var(--gold);flex:0 0 auto} .mpaneel{position:absolute;inset:0;background:var(--ink);z-index:5;display:flex;flex-direction:column; transform:translateX(100%);transition:transform .26s ease;overflow-y:auto} /* display:flex hierboven overschrijft de browserstandaard van [hidden] (display:none). Zonder deze regel blijft een gesloten paneel over het menu liggen en vangt het de kliks weg. */ .mpaneel[hidden]{display:none} .mpaneel.is-open{transform:none} .mpaneel__kop{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08);position:sticky;top:0;background:var(--ink);z-index:2} .mpaneel__kop span{font-family:var(--font-head);font-size:16px;color:#fff} .mpaneel__terug{display:inline-flex;align-items:center;gap:7px;background:rgba(255,255,255,.09);border:0; border-radius:999px;padding:8px 15px;font-family:var(--font-body);font-size:13.5px;color:#fff;cursor:pointer} .mpaneel__terug:hover{background:rgba(255,255,255,.16)} .mpaneel__terug .ic{width:15px;height:15px;color:var(--gold)} .mpaneel .mlinks strong{font-weight:700;color:var(--gold)} /* ── zoekvenster ── Opzet zoals Spotlight: één vak bovenin, de resultaten groeien eronder mee. Op de telefoon vult het venster het hele scherm, want daar is een zwevend paneel met een toetsenbord eronder onwerkbaar. */ .zoekov{position:fixed;inset:0;z-index:200;display:flex;align-items:flex-start;justify-content:center;padding:12vh 20px 20px} .zoekov[hidden]{display:none} .zoekov__achter{position:absolute;inset:0;background:rgba(24,24,25,.55);backdrop-filter:blur(3px);animation:wvjfade .18s ease} .zoekov__paneel{position:relative;width:min(680px,100%);background:#fff;border-radius:18px; box-shadow:0 30px 80px rgba(0,0,0,.35);overflow:hidden;display:flex;flex-direction:column; max-height:76vh;animation:wvjzoom .18s cubic-bezier(.2,.8,.3,1)} @keyframes wvjfade{from{opacity:0}to{opacity:1}} @keyframes wvjzoom{from{opacity:0;transform:translateY(-10px) scale(.985)}to{opacity:1;transform:none}} .zoekov__balk{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--cream);flex:0 0 auto} .zoekov__ic{width:20px;height:20px;color:#a3a4a8;flex:0 0 auto} .zoekov__balk input{flex:1;border:0;outline:0;background:transparent;font-family:var(--font-body); font-size:17px;color:var(--title);padding:4px 0;min-width:0} .zoekov__balk input::placeholder{color:#a3a4a8} .zoekov__balk input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none} .zoekov__sluit{display:flex;align-items:center;gap:8px;background:none;border:0;cursor:pointer;color:#8a8b90;padding:6px;flex:0 0 auto} .zoekov__sluit:hover{color:var(--wine)} .zoekov__sluit .ic{width:18px;height:18px} .zoekov__esc{font-size:11px;border:1px solid var(--sand);border-radius:5px;padding:2px 6px;line-height:1.3} .zoekov__uit{overflow-y:auto;padding:14px 12px 16px;flex:1;min-height:0;transition:opacity .15s} .zoekov__uit.is-bezig{opacity:.5} .zoekov__kop{font-size:11.5px;text-transform:uppercase;letter-spacing:.12em;color:#a3a4a8;margin:6px 8px 8px} .zoekov__uit mark{background:rgba(214,163,42,.28);color:inherit;border-radius:3px;padding:0 1px} .zoekov__ingangen{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:6px;padding:0 6px} .zoekov__ingang{display:flex;flex-direction:column;gap:2px;background:var(--cream);border-radius:10px;padding:10px 14px;transition:.15s} .zoekov__ingang:hover,.zoekov__ingang:focus{background:var(--wine);outline:0} .zoekov__ingang:hover *,.zoekov__ingang:focus *{color:#fff} .zoekov__ingang-titel{font-weight:600;font-size:14px;color:var(--title)} .zoekov__ingang small{font-size:12px;color:#8a8b90} .zoekov__wijn{display:flex;align-items:center;gap:14px;padding:9px 8px;border-radius:11px;transition:.14s} .zoekov__wijn:hover,.zoekov__wijn:focus{background:var(--cream);outline:0} .zoekov__foto{flex:0 0 44px;height:56px;display:flex;align-items:center;justify-content:center} .zoekov__foto img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .zoekov__info{flex:1;min-width:0} .zoekov__titel{display:block;font-size:14.5px;font-weight:600;color:var(--title);line-height:1.35} .zoekov__info small{font-size:12.5px;color:#8a8b90} .zoekov__prijs{flex:0 0 auto;text-align:right;color:var(--wine);font-weight:600;font-size:15px;white-space:nowrap} .zoekov__prijs small{display:block;font-weight:300;font-size:11px;color:#a3a4a8} .zoekov__alles{display:block;text-align:center;margin-top:10px;padding:12px;border-top:1px solid var(--cream); color:var(--wine);font-size:14px;font-weight:600} .zoekov__alles:hover{background:var(--cream)} .zoekov__leeg{padding:26px 14px;text-align:center} .zoekov__leeg p{color:var(--title);margin-bottom:8px} .zoekov__tip{font-size:13.5px;color:#8a8b90} .zoekov__start{padding:14px 8px 8px} .zoekov__start .chips{padding:0 6px} .zoekov__start .chip{cursor:pointer;font-family:var(--font-body)} body.wvj-zoek-open{overflow:hidden} @media(max-width:640px){ /* Op de telefoon het hele scherm: een zwevend paneel met het toetsenbord eronder laat te weinig over om resultaten te zien. */ .zoekov{padding:0;align-items:stretch} .zoekov__paneel{width:100%;max-height:none;height:100%;border-radius:0;animation:none} .zoekov__achter{display:none} .zoekov__esc{display:none} .zoekov__balk{padding:14px 14px;padding-top:calc(14px + env(safe-area-inset-top))} .zoekov__balk input{font-size:16px} /* 16px: minder zoomt iOS bij het focussen in */ .zoekov__ingangen{flex-direction:column} .zoekov__ingang{flex-direction:row;align-items:baseline;gap:8px} } /* ── wijnboeren-band (rode gradient met foto, zoals live) ── */ .split{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center} .split.rev direction{} @media(max-width:860px){.split{grid-template-columns:1fr}} .split .simg{border-radius:var(--radius);overflow:hidden;aspect-ratio:4/3} .split .simg img{display:block} .split .simg img{width:100%;height:100%;object-fit:cover} section.grad h2,section.grad h3{color:#fff} section.grad .split p{color:#f4dfe2} .statband{display:flex;justify-content:center;background:var(--wine-dark);color:#fff;border-radius:var(--radius);overflow:hidden;flex-wrap:wrap} .statband div{padding:26px 36px;text-align:center;flex:1;min-width:180px;border-right:1px solid rgba(255,255,255,.12)} .statband div:last-child{border:none} .statband strong{display:block;font-family:var(--font-head);font-size:17px;color:var(--gold)} /* kaart */ .mapband{line-height:0;font-size:0} .mapband iframe{display:block} .mapband iframe{width:100%;height:380px;border:0;filter:saturate(.9)} /* ────────────────────────────────────────────────────────────────────────── Ritme in de tekstblokken Overal waar een kop, een tekst en een knop onder elkaar staan, gelden dezelfde afstanden: lucht tussen de kop en de tekst, en minimaal 32 pixels tussen de tekst en de knop eronder. Zonder deze regels plakte de knop in de wijnboeren-band tegen de laatste regel tekst aan, en in andere blokken stond de kop weer strak op zijn alinea. ────────────────────────────────────────────────────────────────────────── */ .split h2,.split h3, .blok h2,.blok h3, section .wrap > h2,section .wrap > h3{margin-bottom:14px} .split p, .blok p{margin-bottom:16px} .split p:last-of-type, .blok p:last-of-type{margin-bottom:0} /* De knop onder een tekstblok: altijd minstens 32 pixels lucht. */ .split p + .btn,.split p + a.btn, .blok p + .btn,.blok p + a.btn, .split ul + .btn,.blok ul + .btn, p + .btn,p + a.btn{margin-top:32px} /* Staat er een knop direct na een kop (dus zonder tekst ertussen), dan mag het iets krapper: dan is er al lucht van de marge onder de kop. */ h2 + .btn,h3 + .btn,h2 + a.btn,h3 + a.btn{margin-top:24px} /* ── btw-uitsplitsing: winkelwagen, lade en afrekenen ── */ .btwblok{border-top:1px solid var(--sand);border-bottom:1px solid var(--sand);padding:10px 0;margin:12px 0} .btwblok__rij{display:flex;justify-content:space-between;gap:16px;font-size:13.5px;color:#6c6d72;padding:4px 0} .btwblok__rij--tot{color:var(--title);font-weight:600;font-size:14.5px;padding-top:8px;margin-top:4px;border-top:1px solid var(--cream)} .btwblok--drawer{margin:14px 0 8px} .btwblok--klein .btwblok__rij{font-size:13px} .btwblok .woocommerce-Price-amount{color:inherit} tr.wvj-btwrij th{font-weight:400;color:#6c6d72;font-size:13.5px;text-transform:none;letter-spacing:0} tr.wvj-btwrij td{text-align:right;color:#6c6d72;font-size:13.5px;white-space:nowrap} .btwblok--kop{border-top:0;margin-top:0;padding-top:0} /* ── SEO-tekstblok onderaan een pagina ── */ .seoblok{background:var(--cream);padding-block:44px} .seoblok__titel{font-size:20px;margin-bottom:14px;color:var(--title)} .article--stil p{color:#6c6d72;font-size:14.5px} .article--stil h2{font-size:18px;border-top:0;margin-top:22px;padding-top:0} .article--stil h3{font-size:16px} /* ── ritme op de wijnhuis-, regio- en druifpagina's ── De alinea's liepen in elkaar over en de chips plakten tegen de laatste regel. */ .split p,.split .story p{margin-bottom:16px;line-height:1.75} .split p:last-of-type{margin-bottom:0} .split .chips,.story .chips{margin-top:26px} .bigprice{display:flex;align-items:baseline;flex-wrap:wrap;gap:12px 16px} .btwswitch--prijs{align-self:center} /* ── reviews ── */ .reviews{display:grid;grid-template-columns:repeat(4,1fr);gap:20px} @media(max-width:980px){.reviews{grid-template-columns:repeat(2,1fr)}} @media(max-width:560px){.reviews{grid-template-columns:1fr}} .review{background:#fff;border-radius:var(--radius);padding:24px;border:1px solid var(--sand);font-size:14px;color:#5b5c61;display:flex;flex-direction:column;gap:10px} .review .rhead{display:flex;gap:12px;align-items:center} .review .avatar{width:44px;height:44px;border-radius:50%;background:var(--wine-soft);color:var(--wine);display:flex;align-items:center;justify-content:center;font-family:var(--font-head);font-weight:700;font-size:15px} .review .stars{color:var(--gold);letter-spacing:1px;font-size:13px} .review strong{color:var(--ink);font-family:var(--font-head);font-size:14px;display:block} /* ── blog ── */ .blogfeat{display:grid;grid-template-columns:1.2fr .8fr;gap:22px} @media(max-width:860px){.blogfeat{grid-template-columns:1fr}} .bcard{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);overflow:hidden;display:flex;flex-direction:column;transition:.22s} .bcard:hover{box-shadow:var(--shadow);transform:translateY(-3px)} .bcard .bimg{aspect-ratio:16/9;height:auto;object-fit:cover;width:100%;display:block} .bcard .bb{padding:22px;display:flex;flex-direction:column;gap:8px;flex:1} .bcard .bdate{font-size:12px;color:var(--wine);text-transform:uppercase;letter-spacing:.08em} .bcard h3{font-size:18px} .bcard p{font-size:14px;color:#5b5c61;flex:1} /* ── chips ── */ .chips{display:flex;gap:8px;flex-wrap:wrap} .chip{background:var(--cream);border:1px solid var(--sand);border-radius:999px;padding:6px 15px;font-size:13px;display:inline-flex;gap:7px;align-items:center} .chip:hover{border-color:var(--wine);color:var(--wine)} .chip .ic{width:14px;height:14px;color:var(--wine)} /* ── cart drawer ── */ .overlay{position:fixed;inset:0;background:rgba(20,20,22,.5);opacity:0;pointer-events:none;transition:.25s;z-index:90} .overlay.on{opacity:1;pointer-events:auto} .drawer{position:fixed;top:0;right:0;bottom:0;width:min(440px,100vw);background:#fff;z-index:95;transform:translateX(102%);transition:.28s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(0,0,0,.16)} .drawer.on{transform:none} .drawer .dhead{display:flex;align-items:center;justify-content:space-between;padding:18px 22px;border-bottom:1px solid var(--sand)} .drawer .dhead h3{font-size:19px} .drawer .dhead button{background:var(--cream);border:none;width:38px;height:38px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center} /* Rustig zand zolang de drempel niet gehaald is, zacht groen zodra het gratis is. Eerder was dit roze met groene tekst en een groene balk: drie kleuren die elkaar bijten. */ .freebar{padding:14px 22px;background:var(--cream);border-bottom:1px solid var(--sand);font-size:13.5px} .freebar .track{height:7px;background:var(--sand);border-radius:99px;margin-top:8px;overflow:hidden} .freebar .fill{height:100%;background:linear-gradient(90deg,var(--wine),var(--gold));border-radius:99px;transition:.4s;width:0} .freebar.done,.freebar--klaar{background:var(--green-soft);border-bottom-color:#cfe0c0;color:#2f6b31} .freebar.done .fill{background:#5a7d3a} .dlines{flex:1;overflow-y:auto;padding:6px 22px} .dline{display:grid;grid-template-columns:64px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--cream);align-items:center} /* Zelfde constructie als bij de productkaart, en om dezelfde reden absoluut: zie de toelichting bij .card .imgbox>img. */ .dline .li{background:var(--cream);border-radius:10px;aspect-ratio:1/1;position:relative;padding:0} .dline .li img{position:absolute;inset:0;width:100%;height:100%;padding:7px;box-sizing:border-box;object-fit:contain} .dline h4{font-size:13.5px;font-weight:700;line-height:1.35;margin-bottom:7px} .dline .lrow{display:flex;align-items:center;gap:12px} .dline .qty{transform:none} .dline .qty button{width:36px;height:36px;font-size:16px} .dline .qty input{width:34px;font-size:14px;height:36px} .dline .lprice{font-weight:600;color:var(--wine);font-size:14.5px;text-align:right} .dline .rm{background:none;border:none;color:#a0a1a6;font-size:12.5px;cursor:pointer;text-decoration:underline;padding:2px 0;margin-top:6px} .dline .rm:hover{color:var(--wine)} .dempty{text-align:center;padding:60px 20px;color:#8a8b90} .dempty img{width:54px;margin:0 auto 14px;opacity:.5} .dfoot{border-top:1px solid var(--sand);padding:18px 22px 22px;background:#fff} .dfoot .sub{display:flex;justify-content:space-between;font-size:15px;margin-bottom:4px} .dfoot .sub strong{font-family:var(--font-head);font-size:18px} .dfoot .note{font-size:12px;color:#8a8b90;margin-bottom:14px} .dfoot .btn{width:100%} .dfoot .viewcart{display:block;text-align:center;font-size:13.5px;color:#5b5c61;text-decoration:underline;margin-top:12px} .dsuggest{margin:6px 0 12px;background:var(--cream);border-radius:12px;padding:12px 14px;display:grid;grid-template-columns:44px 1fr auto;gap:12px;align-items:center} .dsuggest img{max-height:44px;object-fit:contain;margin:0 auto} .dsuggest .st{font-size:12.5px;line-height:1.3} .dsuggest .st b{display:block;font-size:12.5px} .dsuggest button{background:#1d1d1e;color:#fff;border:none;border-radius:999px;padding:8px 14px;font-size:12px;cursor:pointer;white-space:nowrap} @media(max-width:560px){ .drawer{width:100vw} .drawer .dhead{padding:14px 18px} .drawer .dhead h3{font-size:17px} .drawer .dhead button{width:44px;height:44px} .freebar{padding:12px 18px;font-size:13px} .dlines{padding:4px 18px} .dline{grid-template-columns:72px 1fr auto;gap:12px;padding:14px 0} .dline h4{font-size:14px} .dline .qty button{width:42px;height:42px;font-size:18px} .dline .qty input{width:36px;height:42px;font-size:15px} .dline .lprice{font-size:15px} .dline .rm{padding:8px 0 2px;font-size:13px} .dfoot{padding:12px 18px calc(14px + env(safe-area-inset-bottom))} .dfoot .btn{padding:16px 30px;font-size:16px} .dfoot .viewcart{padding:10px 0;margin-top:6px} .dsuggest{grid-template-columns:40px 1fr auto;padding:10px 12px;margin:4px 0 10px} .dsuggest button{padding:10px 14px} } /* ── cart & checkout ── */ .cartpage{display:grid;grid-template-columns:1.4fr .8fr;gap:36px;align-items:start} @media(max-width:900px){.cartpage{grid-template-columns:1fr}} .cline{display:grid;grid-template-columns:88px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--sand);align-items:center} @media(max-width:560px){.cline{grid-template-columns:64px 1fr}.cline .lprice{grid-column:2;text-align:left}} .cline .li{background:var(--cream);border-radius:12px;aspect-ratio:1/1;position:relative;padding:0} .cline .li img{position:absolute;inset:0;width:100%;height:100%;padding:10px;box-sizing:border-box;object-fit:contain} .summary{background:var(--cream);border-radius:var(--radius);padding:28px;position:sticky;top:96px} .summary h3{margin-bottom:16px;font-size:20px} .summary .row{display:flex;justify-content:space-between;font-size:14.5px;padding:7px 0;gap:12px} .summary .row.total{border-top:1px solid var(--sand);margin-top:8px;padding-top:14px;font-family:var(--font-head);font-weight:700;font-size:17px;align-items:baseline} .summary .row.total > span:first-child{white-space:nowrap} .summary .row.total > span:last-child{text-align:right} .summary .row.total small,.summary .row.total .includes_tax{display:block;font-family:var(--font-body);font-weight:300;font-size:12.5px;color:#8a8b90;margin-top:2px} .summary .btn{width:100%;margin-top:18px} .shipopt{background:#fff;border:1.5px solid var(--sand);border-radius:12px;padding:13px 16px;display:flex;justify-content:space-between;align-items:center;font-size:14px;margin:6px 0} .shipopt.free{border-color:#5a7d3a;background:var(--green-soft);color:var(--green);font-weight:400} /* Twee kolommen: gegevens links, overzicht rechts. Heet bewust NIET .checkout: het formulier van WooCommerce draagt zelf de klasse "checkout" (nodig voor hun JavaScript), en dan werd dat formulier ook een grid. Gevolg: de kolommen kropen in elkaar en de wijnnaam brak over zes regels. */ .tweekolom{display:grid;grid-template-columns:1.3fr .9fr;gap:36px;align-items:start} @media(max-width:900px){.tweekolom{grid-template-columns:1fr}} /* De drie stappen zijn een link en twee spans. Zonder gelijke opmaak stond de eerste stap als kale onderstreepte link naast twee pillen, en dus lager. */ .steps{display:flex;align-items:center;gap:8px;margin-bottom:26px;font-size:13px;flex-wrap:wrap} .steps a,.steps span{display:inline-flex;align-items:center;background:var(--cream);border-radius:999px;padding:8px 16px;color:#8a8b90;line-height:1;white-space:nowrap;text-decoration:none} .steps span.on{background:var(--wine);color:#fff} .fgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px} .fgrid .full{grid-column:1/-1} @media(max-width:560px){.fgrid{grid-template-columns:1fr}} .fld label{display:block;font-size:13px;margin-bottom:5px;font-weight:400} .fld input,.fld select{width:100%;border:1.5px solid var(--sand);border-radius:5px;padding:12px 14px;font-family:var(--font-body);font-size:14.5px;background:#fff} .fld input:focus{outline:none;border-color:var(--wine)} .payopt{border:1.5px solid var(--sand);border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:center;margin:8px 0;cursor:pointer;font-size:14.5px;background:#fff} .payopt .ic{color:var(--wine)} .payopt.on{border-color:var(--wine);background:var(--wine-soft)} .payopt .tag{margin-left:auto;font-size:12px;color:#8a8b90} fieldset{border:none;margin-bottom:26px} fieldset h3{margin-bottom:14px;font-size:19px} /* ── footer: rode gradient + NIX18, zoals live ── */ footer.site{background:linear-gradient(180deg,#8c1023 0%,#4a000b 100%);color:#f0d5d9} footer .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:36px;padding:56px 20px 40px;max-width:1200px;margin:0 auto} @media(max-width:860px){footer .cols{grid-template-columns:1fr 1fr}} @media(max-width:520px){footer .cols{grid-template-columns:1fr}} footer h4{color:#fff;font-size:13px;margin-bottom:14px;letter-spacing:.12em;text-transform:uppercase} footer ul{list-style:none;display:flex;flex-direction:column;gap:9px;font-size:14px} footer a:hover{color:var(--gold)} /* width:auto hoort hier echt bij. Zonder die regel houdt de browser de breedte uit het width-attribuut in de HTML aan terwijl de hoogte op 60 wordt gezet, en dan wordt een liggend logo van 1102x452 uitgerekt tot 280x60. */ footer .logo img{height:60px;width:auto;margin-bottom:14px} footer .contactline{display:flex;gap:9px;align-items:center;font-size:14px;margin-top:8px} footer .contactline .ic{width:15px;height:15px;color:var(--gold)} footer .socials{display:flex;gap:10px;margin-top:16px} footer .socials a{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);display:flex;align-items:center;justify-content:center;transition:.2s} footer .socials a:hover{background:var(--gold);color:#fff} footer .socials .ic{width:15px;height:15px} footer .legal{border-top:1px solid rgba(255,255,255,.15);padding:16px 20px;font-size:12.5px;color:#e2b7be} footer .legal .wrap{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap} footer .legal a{color:var(--gold)} footer .nix img{height:26px;width:auto} /* toast */ .toast{position:fixed;bottom:22px;left:50%;transform:translate(-50%,80px);background:#1d1d1e;color:#fff;padding:13px 24px;border-radius:999px;font-size:14px;z-index:120;transition:.3s;opacity:0} .toast.on{transform:translate(-50%,0);opacity:1} .notice{background:var(--gold);color:#fff;text-align:center;font-size:12.5px;padding:7px 14px} /* ── categoriepagina's: SEO-blokken + FAQ ── */ .seotext{max-width:760px;color:var(--text)} .seotext p{margin-bottom:14px} .cathead-icon{width:54px;height:54px;object-fit:contain;margin-bottom:12px;filter:brightness(0) invert(1)} .faq{max-width:760px;margin:0 auto} .faq details{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);margin-bottom:12px;overflow:hidden} .faq summary{cursor:pointer;padding:17px 22px;font-family:var(--font-head);font-weight:700;font-size:15px;color:var(--entities);list-style:none;display:flex;justify-content:space-between;align-items:center;gap:14px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";font-size:20px;color:var(--wine);font-weight:300;transition:.2s;line-height:1} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 22px 18px;color:var(--text);font-size:14.5px} .faq details[open]{border-color:var(--wine)} /* ── mobiel menupaneel ── */ .mnav{position:fixed;top:0;left:0;bottom:0;width:min(340px,88vw);background:var(--ink);z-index:115;transform:translateX(-103%);transition:.3s cubic-bezier(.3,.8,.3,1);display:flex;flex-direction:column;overflow-y:auto;box-shadow:16px 0 40px rgba(0,0,0,.25)} .mnav.open{transform:none} .mnav-ov{position:fixed;inset:0;background:rgba(15,15,16,.55);opacity:0;pointer-events:none;transition:.25s;z-index:110} .mnav-ov.on{opacity:1;pointer-events:auto} .mnav .mhead{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid rgba(255,255,255,.08)} .mnav .mhead img{height:44px;width:auto} .mclose{background:rgba(255,255,255,.1);border:none;color:#fff;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer} .mlinks{list-style:none;padding:10px 10px} .mlinks a{display:flex;justify-content:space-between;align-items:center;color:#fff;padding:13px 14px;font-size:16px;font-weight:400;border-radius:10px} .mlinks a:active,.mlinks a:hover{background:rgba(255,255,255,.07)} .mlinks .ic{width:15px;height:15px;color:var(--gold)} .mcats{padding:16px 18px;border-top:1px solid rgba(255,255,255,.08)} .mcats .mt{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#9a9ba0;margin-bottom:10px;display:block} .mcats .mgrid{display:grid;grid-template-columns:1fr 1fr;gap:8px} .mcats .mgrid a{display:flex;gap:10px;align-items:center;color:#fff;font-size:13px;background:rgba(255,255,255,.06);border-radius:10px;padding:10px 12px} .mcats .mgrid img{width:22px;height:22px;object-fit:contain} .mfoot{margin-top:auto;padding:18px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#9a9ba0} @media(min-width:961px){.mnav,.mnav-ov{display:none}} /* ── bedanktpagina ── */ .thanks-head{text-align:center;margin-bottom:38px} .thanks-head .bigcheck{width:72px;height:72px;border-radius:50%;background:#e5f2e5;color:#2f7a31;display:inline-flex;align-items:center;justify-content:center;margin-bottom:18px} .thanks-head .bigcheck .ic{width:34px;height:34px;stroke-width:2.4} .thanks-head h1{font-size:clamp(26px,4vw,38px);margin-bottom:12px} .thanks-head p{color:var(--text)} .osteps{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:34px} @media(max-width:640px){.osteps{grid-template-columns:1fr}} .ostep{background:var(--cream);border-radius:var(--radius);padding:20px;text-align:center;color:var(--text)} .ostep span{display:inline-flex;width:42px;height:42px;border-radius:50%;background:#fff;align-items:center;justify-content:center;color:var(--wine);margin-bottom:10px} .ostep.done{background:#e5f2e5} .ostep.done span{color:#2f7a31} .ostep b{display:block;font-family:var(--font-head);font-size:14.5px;color:var(--entities)} .ostep small{font-size:12.5px} .ordersum{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);padding:26px} .ordersum h3{margin-bottom:14px} .orow{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:10px 0;border-bottom:1px solid var(--cream);font-size:14.5px;color:var(--text)} .orow:last-child{border-bottom:none} .orow.oline .oimg{width:46px;height:46px;background:var(--cream);border-radius:8px;display:flex;align-items:center;justify-content:center;padding:4px;flex-shrink:0} .orow.oline .oimg img{width:100%;height:100%;max-height:100%;object-fit:contain} .orow.oline .otit{flex:1;font-weight:400;color:var(--entities)} .orow.ototal{font-family:var(--font-head);font-weight:700;font-size:16px;color:var(--title);border-top:1px solid var(--sand);margin-top:4px;padding-top:14px} /* ── blog single ── */ .bhero{width:100%;aspect-ratio:21/9;height:auto;object-fit:cover;border-radius:var(--radius);margin-top:-34px;box-shadow:var(--shadow);display:block} .article h2{font-size:22px;margin:26px 0 10px} .article p{margin-bottom:14px;color:var(--text)} /* Lopende tekst op de informatiepagina's: privacy, voorwaarden, bezorgen. Een privacyverklaring is geen blogbericht, dus die krijgt hier wat meer lucht, nette lijsten en een leesbare regelafstand. */ .article{line-height:1.75} .article > h2:first-child,.article > h3:first-child,.article > p:first-child{margin-top:0} .article h2{font-family:var(--font-head);color:var(--title);padding-top:8px;border-top:1px solid var(--sand);margin-top:38px} .article h3{font-family:var(--font-head);font-size:17px;color:var(--title);margin:24px 0 8px} .article p.lead{font-size:17px;color:var(--entities);margin-bottom:22px} .article ul,.article ol{margin:0 0 16px 22px;color:var(--text)} .article li{margin-bottom:8px;padding-left:4px} .article ol{counter-reset:none} /* :not(.btn) hoort er echt bij. De winkelwagen- en afrekenpagina staan in een .article (dat is de vrije inhoud van de pagina), en zonder die uitzondering kleurde deze regel ook de knop "Naar afrekenen" bordeaux: bordeaux op bordeaux, dus een knop zonder leesbare tekst. */ .article a:not(.btn):not(.button):not(.wvj-knop){color:var(--wine);text-decoration:underline;text-underline-offset:2px} .article a:not(.btn):not(.button):not(.wvj-knop):hover{text-decoration:none} .article strong{color:var(--title);font-weight:600} .article .btn{text-decoration:none;margin-top:6px} .article .btn:hover{text-decoration:none} /* Het feitenblokje: bezorger, levertijd, tarieven, bedrijfsgegevens. */ .infolijst{background:var(--cream);border:1px solid var(--sand);border-radius:var(--radius);padding:6px 20px;margin:0 0 26px} .infolijst__rij{display:flex;gap:16px;padding:11px 0;border-bottom:1px solid var(--sand);font-size:14.5px;line-height:1.5} .infolijst__rij:last-child{border-bottom:0} .infolijst__lab{flex:0 0 42%;font-weight:600;color:var(--title)} .infolijst__val{flex:1;color:var(--text)} @media(max-width:600px){ .infolijst__rij{flex-direction:column;gap:2px} .infolijst__lab{flex:none} } /* Keurmerken en onderscheidingen op de productpagina. */ .keurmerken{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px} .keurmerken li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--entities)} .keurmerken img{width:34px;height:34px;object-fit:contain;flex:0 0 auto} .keurmerken a{color:var(--entities)} .keurmerken a:hover{color:var(--wine);text-decoration:underline} /* ── presentatiepagina ── */ .ppunten{display:flex;flex-direction:column;gap:10px} .ppunt{display:flex;align-items:center;gap:14px;background:#fff;border:1px solid var(--sand);border-radius:var(--radius);padding:15px 20px;font-size:14.5px;color:var(--entities)} .ppunt .pchk{width:28px;height:28px;border-radius:50%;background:#e5f2e5;color:#2f7a31;display:flex;align-items:center;justify-content:center;flex-shrink:0} .ppunt .pchk .ic{width:15px;height:15px;stroke-width:2.4} .ppunt span:nth-child(2){flex:1} .ppunt a{color:var(--wine);font-size:13px;display:flex;align-items:center;gap:5px;white-space:nowrap} .ppunt a:hover{text-decoration:underline} .ppunt em{color:#8a8b90;font-size:12.5px;font-style:normal;white-space:nowrap} /* ========================================================================== Aanvullingen voor het WordPress-thema De regels hierboven komen 1:1 uit de goedgekeurde conceptsite. Hieronder staat wat er in WordPress bij komt: de echte winkelwagen, de formulieren, de 18+-poort, het team, de nieuwsbrief en de losse blokken. Let op: alle overrides voor donkere vlakken staan bewust ná de generieke regels, anders wint de generieke kleur en krijg je donker op donker. ========================================================================== */ /* --------------------------------------------------------------- Basis */ .skiplink{position:absolute;left:-9999px;top:0;z-index:200;background:var(--wine);color:#fff;padding:12px 20px;border-radius:0 0 8px 0} .skiplink:focus{left:0} .screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} body.wvj-vast{overflow:hidden} .wrap--smal{max-width:820px} .wrap--artikel{max-width:900px} .rt{color:#5b5c61} .rt p+p{margin-top:12px} .btn--mt{margin-top:22px} .btn--breed{width:100%} .geen{color:#8a8b90} h2+.rt,h2+p{margin-top:4px} /* Kickers met een eigen kleur: één klasse in plaats van losse inline-stijlen. */ .kicker--wine{color:var(--wine);letter-spacing:.16em;text-transform:uppercase;font-size:12.5px} .kicker--gold{color:var(--gold);letter-spacing:.16em;text-transform:uppercase;font-size:12.5px} .sec-sub{max-width:660px;color:#5b5c61;margin:-10px 0 22px} section.grad .sec-sub{color:rgba(255,255,255,.86)} /* Secties die smaller mogen: de chiprijen onderaan een pagina. */ .cream--smal{padding:34px 0} .statsec{padding:0 0 56px} .paginainhoud{padding:44px 0 64px} .pdetail-sec{padding:36px 0 48px} .artikelbeeld{padding:0} .artikelinhoud{padding:34px 0 48px} .winkel{padding:40px 0 56px} .pairnav{padding:26px 0 0} .pairtekst{max-width:660px;color:#5b5c61;margin:-14px 0 20px} .sfeerbeeld img{width:100%;height:clamp(220px,32vw,380px);object-fit:cover} /* ------------------------------------------------------------ Zoekbalk */ @media(max-width:600px){ .zoekbalk form{flex-wrap:wrap} .zoekbalk input[type=search]{width:100%;flex:1 1 100%;order:1} .zoekbalk .btn{order:2} .zoekbalk .ic{display:none} } /* ------------------------------------------------------ Logo als tekst */ .logo__tekst{color:#fff;font-family:var(--font-head);font-size:20px;letter-spacing:.02em;white-space:nowrap} footer .logo__tekst{font-size:19px} /* ------------------------------------------------- Rating op de kaart */ .prating{display:flex;align-items:center;gap:7px;margin:2px 0 4px} .prating .stars{color:var(--gold);font-size:14px;letter-spacing:.06em;line-height:1} .prating small{color:#8a8b90;font-size:12.5px} .prating--detail{margin:6px 0 14px} .prating--detail .stars{font-size:17px} /* --------------------------------------- Winkelbalk boven de wijnen */ .winkelbalk{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px;padding-bottom:16px;border-bottom:1px solid var(--sand)} .winkelbalk__aantal{color:#8a8b90;font-size:14px} .winkelbalk form.woocommerce-ordering{margin:0} .winkelbalk select{font-family:var(--font-body);font-size:14.5px;color:var(--ink);background:#fff;border:1px solid var(--sand);border-radius:35px;padding:9px 16px;cursor:pointer} .winkelbalk select:focus{outline:0;border-color:var(--wine)} @media(max-width:560px){ .winkelbalk{gap:10px} .winkelbalk__aantal{width:100%} .winkelbalk select{width:100%} } /* -------------------------------------------------------- Paginering */ .paging{display:flex;justify-content:center;align-items:center;gap:8px;flex-wrap:wrap;margin-top:40px} .paging .page-numbers{display:inline-flex;align-items:center;gap:6px;min-width:40px;height:40px;justify-content:center;padding:0 14px;border-radius:35px;border:1px solid var(--sand);color:var(--ink);font-size:14.5px;transition:.2s} .paging .page-numbers:hover{border-color:var(--wine);color:var(--wine)} .paging .page-numbers.current{background:var(--wine);border-color:var(--wine);color:#fff} .paging .page-numbers.dots{border:0} .paging .ic{width:16px;height:16px} /* -------------------------------------------------- Lege staat / 404 */ .leeg{text-align:center;max-width:560px;margin:0 auto;padding:40px 0} .leeg .leeg__ic{width:46px;height:46px;stroke-width:1.2;color:var(--sand);margin:0 auto 18px} .leeg h2{font-size:clamp(21px,2.6vw,27px);margin-bottom:10px} .leeg p{color:#5b5c61;margin-bottom:22px} .leeg__acties{display:flex;gap:12px;justify-content:center;flex-wrap:wrap} .zoek404{display:flex;gap:10px;margin:0 auto 26px;max-width:440px} .zoek404 input{flex:1;min-width:0;border:1px solid var(--sand);border-radius:35px;padding:12px 18px;font-family:var(--font-body);font-size:15px} .zoek404 input:focus{outline:0;border-color:var(--wine)} @media(max-width:460px){.zoek404{flex-direction:column}} /* ------------------------------------------------- Chips: uitbreiding */ .chips--center{justify-content:center;margin-top:30px} .chips__label{font-size:14px;color:#8a8b90;padding:6px 4px} /* ------------------------------------------------------- Zoekresultaten */ .zoeklijst{display:grid;gap:14px} .zoekitem{display:block;background:#fff;border:1px solid var(--sand);border-radius:var(--radius);padding:20px 22px;transition:.2s} .zoekitem:hover{border-color:var(--wine);box-shadow:var(--shadow)} .zoekitem__type{display:inline-block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wine);margin-bottom:6px} .zoekitem h3{font-size:18px;margin-bottom:6px} .zoekitem p{color:#5b5c61;font-size:14.5px} /* ---------------------------------------------------------- Productpagina */ .pgalerij{display:flex;gap:10px;margin-top:0;justify-content:center;flex-wrap:wrap;align-self:stretch} .pgalerij a{flex:0 0 72px;height:72px;border:1px solid var(--sand);border-radius:8px;overflow:hidden;background:#fff;display:flex;align-items:center;justify-content:center;padding:5px} .pgalerij img{width:100%;height:100%;object-fit:contain} .tabpane__actie{margin-top:16px} .tabpane h3{margin-bottom:14px} /* -------------------------------------------- Wijnhuis: logo in een vlak */ .simg--logo{display:flex;align-items:center;justify-content:center;background:#fff} .logo-in-vlak{max-width:74%;max-height:70%;width:auto;height:auto;object-fit:contain;padding:20px} /* Omgekeerde split: de foto links, tekst rechts (filosofie-sectie). */ .split--om{direction:rtl} .split--om>*{direction:ltr} @media(max-width:860px){.split--om{direction:ltr}} .split--fotos{margin-top:26px} /* ------------------------------------------------------------- Team */ .teamgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px} @media(max-width:900px){.teamgrid{grid-template-columns:repeat(2,1fr)}} @media(max-width:460px){.teamgrid{grid-template-columns:1fr}} .teamlid{background:#fff;border:1px solid var(--sand);border-radius:var(--radius);overflow:hidden;text-align:center;padding-bottom:22px} .teamlid__foto{width:100%;aspect-ratio:1/1;height:auto;object-fit:cover;display:block;margin-bottom:16px} .teamlid__foto--leeg{display:flex;align-items:center;justify-content:center;background:var(--cream);color:var(--sand)} .teamlid__foto--leeg .ic{width:44px;height:44px;stroke-width:1.2} .teamlid h3{font-size:17px;padding:0 16px} .teamlid__rol{display:block;font-size:14px;color:var(--wine);margin-top:4px;padding:0 16px} .teamlid__fles{font-size:13px;color:#8a8b90;margin-top:10px;padding:0 16px} /* -------------------------------------------------------- Nieuwsbrief */ .nieuwsbrief{padding:0 0 70px} .nieuwsbrief__blok{display:grid;grid-template-columns:1.1fr .9fr;gap:34px;align-items:center;background:var(--ink);border-radius:var(--radius);padding:clamp(26px,4vw,44px)} @media(max-width:860px){.nieuwsbrief__blok{grid-template-columns:1fr;gap:22px}} .nieuwsbrief__blok h2{color:#fff;font-size:clamp(22px,3vw,30px);margin:8px 0 10px} .nieuwsbrief__blok p{color:rgba(255,255,255,.82)} .nieuwsbrief__blok .kicker{display:inline-flex;align-items:center;gap:8px;color:var(--gold);letter-spacing:.16em;text-transform:uppercase;font-size:12px} .nieuwsbrief__blok .kicker .ic{width:16px;height:16px} .nieuwsbrief__form{display:flex;gap:10px} .nieuwsbrief__form input{flex:1;min-width:0;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;border-radius:35px;padding:13px 20px;font-family:var(--font-body);font-size:15px} .nieuwsbrief__form input::placeholder{color:rgba(255,255,255,.55)} .nieuwsbrief__form input:focus{outline:0;border-color:var(--gold);background:rgba(255,255,255,.12)} .nieuwsbrief__ok{display:flex;align-items:center;gap:10px;color:#fff;font-size:16px} .nieuwsbrief__ok .ic{color:var(--gold)} @media(max-width:520px){.nieuwsbrief__form{flex-direction:column}.nieuwsbrief__form .btn{width:100%}} /* --------------------------------------------- Uitgelichte wijn: details */ .featured__titel{font-size:clamp(24px,3vw,34px);margin:8px 0 14px} .featured__acties{display:flex;gap:12px;margin-top:22px;flex-wrap:wrap} /* ------------------------------------------------------- Cart drawer (WP) */ .drawer{display:flex;flex-direction:column} .drawer .dhead{flex:0 0 auto} .wvj-drawer-inhoud{flex:1;display:flex;flex-direction:column;min-height:0} .wvj-drawer-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch} .drawer--bezig{pointer-events:none} .drawer--bezig .wvj-drawer-inhoud{opacity:.55;transition:opacity .15s} .dcount{font-weight:400;opacity:.8} .dline{display:grid;grid-template-columns:74px 1fr;gap:14px;padding:16px 0;border-bottom:1px solid var(--sand)} .dline:last-child{border-bottom:0} .dline__img{border:1px solid var(--sand);border-radius:8px;overflow:hidden;background:#fff} .dline__img img{width:100%;height:74px;object-fit:contain} .dline__titel{display:block;font-family:var(--font-head);font-weight:700;font-size:14.5px;color:var(--title);line-height:1.3} .dline__titel:hover{color:var(--wine)} .dline__prijs{display:block;color:var(--wine);font-size:15px;margin:4px 0 10px} .dline__acties{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .dline__weg{background:none;border:0;padding:0;color:#8a8b90;font-family:var(--font-body);font-size:13px;cursor:pointer;text-decoration:underline} .dline__weg:hover{color:var(--wine)} .qty--klein{height:36px} .qty--klein button{width:34px;font-size:17px} .qty--klein input{width:38px!important;max-width:38px;font-size:14.5px} /* De lege winkelwagen. Geen doodlopende weg maar een startpunt: een kop, een knop en drie ingangen om meteen ergens naartoe te kunnen. */ .dleeg{text-align:center;padding:44px 24px} .dleeg__ring{display:flex;align-items:center;justify-content:center;width:82px;height:82px;margin:0 auto 20px;border-radius:50%;background:var(--cream);border:1px solid var(--sand)} .dleeg .dleeg__ic{width:36px;height:36px;stroke-width:1.2;color:var(--wine);margin:0} .dleeg h4{font-family:var(--font-head);font-size:19px;color:var(--title);margin-bottom:8px} .dleeg p{color:#5b5c61;font-size:14.5px;line-height:1.65;margin-bottom:22px} .dleeg .btn{width:100%;justify-content:center} .dleeg__chips{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:22px} .dleeg__chips .chip{font-size:13px;padding:8px 15px} .dleeg__chips .chip--tip{background:var(--wine);border-color:var(--wine);color:#fff} .dleeg__chips .chip--tip:hover{background:var(--wine-dark);border-color:var(--wine-dark);color:#fff} .dleeg__usp{display:flex;align-items:center;justify-content:center;gap:8px;margin:26px 0 0; padding-top:20px;border-top:1px solid var(--cream);font-size:13px;color:#8a8b90} .dleeg__usp .ic{width:16px;height:16px;color:var(--wine)} .dsuggest{display:block;background:var(--cream);border-radius:var(--radius);padding:14px;margin-bottom:16px} .dsuggest__kop{display:block;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--wine);margin-bottom:10px} .dsuggest__rij{display:grid;grid-template-columns:54px 1fr auto;gap:12px;align-items:center} .dsuggest__img{border-radius:6px;overflow:hidden;background:#fff} .dsuggest__img img{width:100%;height:54px;object-fit:contain} .dsuggest__titel{display:block;font-size:13.5px;font-weight:400;color:var(--title);line-height:1.35} .dsuggest__titel:hover{color:var(--wine)} .dsuggest__prijs{display:block;color:var(--wine);font-size:13.5px;margin-top:2px} .dsuggest__add{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--wine);background:#fff;color:var(--wine);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.2s} .dsuggest__add:hover{background:var(--wine);color:#fff} .freebar--klaar .fill{background:var(--green)} .freebar--klaar .ft{color:#2f6b31} .freebar .ft{display:flex;align-items:center;gap:8px} .freebar .ft .ic{width:15px;height:15px} /* ------------------------------------------------- Winkelwagenpagina (WP) */ .cartpage__lijst{min-width:0} .cartlines{border-top:1px solid var(--sand)} .cartline{display:grid;grid-template-columns:96px 1fr auto;gap:18px;padding:20px 0;border-bottom:1px solid var(--sand);align-items:start} .cartline__img{border:1px solid var(--sand);border-radius:8px;overflow:hidden;background:#fff} .cartline__img img{width:100%;height:96px;object-fit:contain} .cartline__body{min-width:0} .cartline__body h3{font-size:16px;line-height:1.35} .cartline__body h3 a:hover{color:var(--wine)} .cartline__stuk{display:block;color:#8a8b90;font-size:13.5px;margin:4px 0 12px} .cartline__los{font-size:13px;color:#8a8b90;margin-top:4px} .cartline__acties{display:flex;align-items:center;gap:16px;flex-wrap:wrap} .cartline__weg{background:none;border:0;padding:0;color:#8a8b90;font-family:var(--font-body);font-size:13.5px;cursor:pointer;text-decoration:underline} .cartline__weg:hover{color:var(--wine)} .cartline__totaal{font-family:var(--font-head);font-weight:700;color:var(--title);white-space:nowrap} @media(max-width:620px){ .cartline{grid-template-columns:74px 1fr;gap:14px} .cartline__img img{height:74px} .cartline__totaal{grid-column:2;font-size:15px} } .cartpage__onder{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:22px 0} .cartpage__verder{display:inline-flex;align-items:center;gap:8px;color:var(--wine);font-size:14.5px} .cartpage__verder:hover{text-decoration:underline} .cartpage__betaal{display:flex;align-items:center;gap:8px;justify-content:center;font-size:12.5px;color:#8a8b90;margin-top:12px} .coupon{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin-left:auto} .coupon label{font-size:14px;color:#5b5c61} .coupon input{border:1px solid var(--sand);border-radius:35px;padding:10px 16px;font-family:var(--font-body);font-size:14.5px;max-width:170px} .coupon input:focus{outline:0;border-color:var(--wine)} @media(max-width:620px){.coupon{margin-left:0;width:100%}.coupon input{flex:1;min-width:0;max-width:none}} .wvj-verzendtabel{width:100%;border-collapse:collapse} .wvj-verzendtabel th,.wvj-verzendtabel td{text-align:left;font-weight:400;font-size:14.5px;color:#5b5c61;padding:9px 0;border-bottom:1px dashed var(--sand);vertical-align:top} .wvj-verzendtabel th{width:38%;white-space:nowrap} /* text-align:right maakte van een lange verzendnaam een rechts uitgelijnd blok van twee regels. Links uitlijnen leest rustiger; alleen het bedrag staat rechts. */ .wvj-verzendtabel td{text-align:left;color:var(--title)} .wvj-verzendtabel .woocommerce-Price-amount{font-weight:600;white-space:nowrap} .wvj-verzendtabel .woocommerce-shipping-destination, .wvj-verzendtabel p{font-size:13px;color:#8a8b90;margin:6px 0 0} .wvj-verzendtabel ul{list-style:none;margin:0;padding:0} .wvj-verzendtabel li{margin-bottom:6px} .wvj-verzendtabel li:last-child{margin-bottom:0} .wvj-verzendtabel label{font-size:14.5px;cursor:pointer} .wvj-verzendtip td{font-size:13px;color:var(--wine);border-bottom:0;padding-top:0} .summary .row--korting span:last-child{color:var(--green)} .summary--tip{margin-top:18px} .summary--tip p{font-size:14.5px;color:#5b5c61;margin:8px 0 16px} /* ------------------------------------------------------------- Checkout */ .tweekolom__kolom{min-width:0} .tweekolom__gegevens fieldset{margin-bottom:22px} .tweekolom__nix{display:flex;align-items:center;gap:8px;font-size:12px;color:#8a8b90;margin:16px 0 0;padding-top:14px;border-top:1px solid var(--sand)} .tweekolom__nix img{width:auto;height:22px;flex:0 0 auto} .tweekolom .summary{position:sticky;top:96px} @media(max-width:900px){.tweekolom .summary{position:static}} .steps a{color:var(--entities)} .steps a:hover{background:var(--sand);color:var(--wine)} /* -------------------------------------------------------- Bedanktpagina */ .bedankt{padding:64px 0} .bedankt__acties{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:34px} .bedankt__hulp{text-align:center;font-size:13px;color:#8a8b90;margin-top:22px} .bedankt__hulp a{color:var(--wine);text-decoration:underline} .thanks-head--fout .bigcheck{background:var(--wine-soft);color:var(--wine)} .ordersum address{font-style:normal;color:#5b5c61;line-height:1.7} .orow--regel span:first-child{padding-right:14px} /* -------------------------------------------------------- Formulieren */ .wvj-form{margin-bottom:24px} .wvj-form__intro{color:#5b5c61;font-size:14.5px;margin:-6px 0 18px} .wvj-form textarea{width:100%;border:1px solid var(--sand);border-radius:var(--radius);padding:12px 14px;font-family:var(--font-body);font-size:15px;color:var(--ink);background:#fff;resize:vertical} .wvj-form textarea:focus{outline:0;border-color:var(--wine)} .wvj-form .btn{margin-top:18px} .wvj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .wvj-akkoord label{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#5b5c61;cursor:pointer} /* Het vinkje erfde width:100% van ".fld input" en werd daardoor een vak van een halve kolom breed, met de tekst er ver naast. Vandaar deze uitzondering. */ .wvj-akkoord input[type=checkbox]{width:auto;flex:0 0 auto;margin-top:3px;accent-color:var(--wine)} .wvj-akkoord a{color:var(--wine);text-decoration:underline} .wvj-form__ok{display:flex;gap:12px;align-items:flex-start;background:var(--green-soft);border-radius:var(--radius);padding:18px 20px} .wvj-form__ok .ic{color:var(--green);flex-shrink:0;margin-top:2px} .wvj-form__ok p{color:#2f5b30} .wvj-form__fout{background:var(--wine-soft);border-left:3px solid var(--wine);border-radius:8px;padding:14px 18px;margin-bottom:18px} .wvj-form__fout p{color:var(--wine-dark);font-size:14.5px} .lijst{list-style:none;padding:0;margin:0} .lijst li{display:flex;gap:10px;align-items:flex-start;padding:7px 0;color:#5b5c61;font-size:14.5px} .lijst li .ic{color:var(--wine);flex-shrink:0;margin-top:3px} /* ------------------------------------------------------- Smaakprofiel */ .smaak{display:grid;gap:26px} .smaak__vraag{border:1px solid var(--sand);border-radius:var(--radius);padding:22px 24px;background:#fff} .smaak__vraag legend{display:flex;align-items:center;gap:12px;font-family:var(--font-head);font-weight:700;font-size:17px;color:var(--title);padding:0 8px;margin-left:-8px} .smaak__nr{width:28px;height:28px;border-radius:50%;background:var(--wine);color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0} .smaak__opties{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .smaak__optie{position:relative} .smaak__optie input{position:absolute;opacity:0;width:1px;height:1px} .smaak__optie span{display:inline-block;border:1.5px solid var(--sand);border-radius:35px;padding:10px 20px;font-size:14.5px;color:var(--ink);cursor:pointer;transition:.2s} .smaak__optie:hover span{border-color:var(--wine);color:var(--wine)} .smaak__optie input:checked+span{background:var(--wine);border-color:var(--wine);color:#fff} .smaak__optie input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px} .smaak__ok{text-align:center;padding:20px 0 40px} .smaak__ok h2{margin:18px 0 10px} .smaak__ok p{color:#5b5c61;margin-bottom:24px} /* --------------------------------------------------------- 18+ en cookies */ .poort{position:fixed;inset:0;z-index:900;background:rgba(24,24,25,.86);backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;padding:20px} .poort--klaar{display:none} /* Gezet door het scriptje in de head, vóór het tekenen. Zo staat er geen cookiestatus in de HTML en kan de pagina gewoon gecachet worden. */ html.wvj-poort-klaar .poort{display:none} .poort__kaart{background:#fff;border-radius:var(--radius);max-width:520px;width:100%;padding:clamp(26px,4vw,40px);text-align:center;box-shadow:0 30px 80px -20px rgba(0,0,0,.6);max-height:90vh;overflow-y:auto} .poort__logo{max-width:200px;margin:0 auto 22px;height:auto} .poort__nix{width:56px;height:auto;margin:0 auto 16px} .poort__kaart h2{font-size:clamp(21px,3vw,26px);margin-bottom:12px} .poort__kaart p{color:#5b5c61;font-size:15px} .poort__knoppen{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:24px 0 16px} .poort__knoppen .btn{flex:1 1 auto;min-width:180px} .poort__klein{font-size:13px;color:#8a8b90} .poort__klein a{color:var(--wine);text-decoration:underline} .poort__terug{background:none;border:0;padding:0;color:var(--wine);text-decoration:underline;cursor:pointer;font-family:var(--font-body);font-size:13px} @media(max-width:480px){.poort__knoppen{flex-direction:column}.poort__knoppen .btn{width:100%;min-width:0}} .wvj-cookie-link{background:none;border:0;padding:0;color:rgba(255,255,255,.7);font-family:var(--font-body);font-size:13px;cursor:pointer;text-decoration:underline} .wvj-cookie-link:hover{color:#fff} footer .legal__acties{display:flex;align-items:center;gap:18px} @media(max-width:520px){footer .legal__acties{justify-content:center}} /* -------------------------------------------------------------- Toast */ .toast--fout{background:var(--wine)} /* ----------------------------------------------------------- Bestelknop */ .add--bezig{opacity:.6;pointer-events:none} .add--uit{background:transparent;color:var(--wine);border:1.5px solid var(--sand)} .card .add--uit:hover{background:var(--cream);color:var(--wine)} .count--leeg{display:none} .stockpill--uit{background:var(--wine-soft);color:var(--wine-dark)} /* --------------------------------------------------------- Blogkaarten */ .tiles--blog{align-items:start} /* Nog geen foto: een compact vlak, ook bij het uitgelichte artikel. Een leeg beeldvlak van 360 pixels hoog leest als een fout. */ .bimg--leeg{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:var(--cream);color:var(--sand);height:150px} .bimg--leeg .ic{width:32px;height:32px;stroke-width:1.2} .bimg--leeg small{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:#b9b3ab} .bcard--groot .bimg--leeg{height:190px} .t-link--wine{color:var(--wine);font-size:14px} .pagehero--artikel h1{max-width:760px} /* --------------------------------------------------------- Opleverpagina */ .opl-intro{font-size:17px;color:#5b5c61;margin-bottom:26px} .opl-video{position:relative;padding-bottom:56.25%;height:0;border-radius:var(--radius);overflow:hidden;background:var(--ink)} .opl-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0} .opl-todo{background:var(--cream);border-left:3px solid var(--gold);border-radius:8px;padding:22px 24px} .opl-todo h3{font-size:16px;margin-bottom:12px} .opl-todo ol{margin:0 0 12px 20px;color:#5b5c61;font-size:14.5px} .opl-todo li{margin-bottom:6px} .opl-todo p{font-size:13.5px;color:#8a8b90} /* Wachten de portretfoto's nog? Dan het lege vak lager houden, zodat de teamrij er niet uitziet alsof er iets kapot is. */ .teamlid__foto--leeg{aspect-ratio:4/3;background:linear-gradient(160deg,#f7f5f2,#efece7)} .paginasectie{padding:0 0 56px} /* ---------------------------------------------------------- Blogoverzicht */ /* De opzet uit het concept: het nieuwste artikel groot, het tweede ernaast, de rest als tegels. Ruimer opgezet dan in het concept, precies zoals in de meeting van 21 augustus is gezegd: "hier nog meer ruimte toevoegen". */ .blogsectie{padding:48px 0 72px} .blogfeat{margin-bottom:26px} .blogfeat__zij{display:flex;flex-direction:column;gap:22px;height:100%} .blogfeat__zij .bcard{flex:1} .bcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--sand);border-radius:var(--radius);overflow:hidden;transition:.2s} .bcard:hover{border-color:var(--wine);box-shadow:var(--shadow);transform:translateY(-2px)} .bcard .bimg{width:100%;height:200px;object-fit:cover;display:block} .bcard .bb{padding:22px 24px 26px;display:flex;flex-direction:column;gap:8px;flex:1} .bcard .bdate{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--wine)} .bcard h3{font-size:19px;line-height:1.3} .bcard p{color:#5b5c61;font-size:14.5px;flex:1} .bcard .t-link{display:inline-flex;align-items:center;gap:7px;margin-top:4px} .bcard .t-link .ic{width:15px;height:15px} .bcard--groot .bimg{height:clamp(240px,26vw,360px)} .bcard--groot .bb{padding:28px 32px 34px} .bcard--groot h3{font-size:clamp(22px,2.4vw,28px)} .bcard--groot p{font-size:16px} .tiles--blog{gap:22px} @media(max-width:860px){ .bcard--groot .bimg{height:220px} .bcard .bb,.bcard--groot .bb{padding:20px 22px 24px} } /* ------------------------------------------------- Afleidingsvrij afrekenen */ /* Bij het afrekenen verdwijnen het menu, de zoekbalk en de uitgebreide footer. Zo gedemonstreerd op 21 augustus 2026. Het logo en de USP-balk blijven staan. */ .nav--kaal{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:10px 20px;max-width:1280px;margin:0 auto} .nav--kaal .logo img{height:58px;width:auto} .nav__veilig{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.82);font-size:13.5px} .nav__veilig .ic{width:16px;height:16px;color:var(--gold)} .site--kaal{position:static} footer.site--kaal{background:var(--ink)} footer.site--kaal .legal{border-top:0} footer.site--kaal .legal a{text-decoration:underline} .wvj-afleidingsvrij .cats{display:none} @media(max-width:600px){ .nav--kaal .logo img{height:44px;width:auto} .nav__veilig{display:none} } /* Review met een echte foto in plaats van initialen. */ .review .avatar--foto{object-fit:cover;background:var(--cream);flex-shrink:0} /* ------------------------------------------------- Aroma's en smaken bij de wijn */ /* Deze twee staan al bij bijna elke wijn in de productgegevens. Als aanklikbare chips onder het kenmerkenblok: rustig, en meteen een ingang naar alle wijnen met hetzelfde kenmerk. */ .proefblok{border-top:1px solid var(--sand);border-bottom:1px solid var(--sand);padding:16px 0;margin:0 0 22px;display:grid;gap:12px} .proefblok__rij{display:grid;grid-template-columns:104px 1fr;gap:12px;align-items:start} .proefblok__label{display:inline-flex;align-items:center;gap:7px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:#8a8b90;padding-top:7px} .proefblok__label .ic{width:15px;height:15px;color:var(--wine)} .proefblok .chips{margin:0} .proefblok .chip{padding:5px 13px;font-size:13px} @media(max-width:520px){ .proefblok__rij{grid-template-columns:1fr;gap:6px} .proefblok__label{padding-top:0} } /* ────────────────────────────────────────────────────────────────────────── Mobiele maatvoering De afstanden waren op een telefoon overgenomen van de desktop. De paginakop was daardoor 262 pixels hoog op een scherm van 844: bijna een derde van het beeld ging op aan een kop met drie regels tekst. En tussen twee secties zat 128 pixels lucht, wat op die breedte leest als een gat. Hieronder staat één schaal voor alles: koppen, secties en de paginakop gaan samen omlaag, zodat de verhoudingen kloppen in plaats van dat er per pagina iets wordt bijgeschaafd. ────────────────────────────────────────────────────────────────────────── */ @media(max-width:640px){ section{padding:40px 0} section.cream--smal{padding:30px 0} .pagehero{padding:30px 0 32px} .pagehero h1{font-size:26px;line-height:1.18} .pagehero p{font-size:15.5px;line-height:1.6;margin-top:10px} .crumbs{font-size:12.5px;margin-bottom:12px} .sectitel{font-size:22px} .sec-head{margin-bottom:22px;gap:10px} .sec-head h2{font-size:23px} .sec-head .kicker{font-size:11px} .sec-head .sub{font-size:14.5px} /* De winkelbalk met het aantal, de btw-schakelaar en het sorteren. */ .winkelbalk{flex-direction:column;align-items:flex-start;gap:12px} .btwswitch__knop{padding:10px 18px} /* Tikdoelen: de richtlijn is 44 pixels. De icoonknoppen in de header waren 31. */ .nav .iconbtn{width:44px;height:44px} .nav .iconbtn .ic{width:21px;height:21px} .burger{width:44px;height:44px} /* De winkelwagen en het vergrootglas stonden tegen elkaar aan. Op desktop worden de icoonknoppen 8 pixels naar elkaar toe getrokken; op de telefoon moeten ze juist uit elkaar, anders tik je zo de verkeerde aan. */ .nav .side-r{gap:10px} .nav .side-r li:has(.iconbtn):not(.icons-start){margin-left:0} /* Het telnummertje op de winkelwagen stond op 10,5 pixels. Het hangt aan de hoek van het tikvlak, en dat vlak is nu groter dan het icoon: vandaar de marge, anders zweeft het bolletje los naast het wagentje. */ .nav .iconbtn .count{font-size:11px;min-width:18px;height:18px;top:5px;right:5px} /* De footerlinks stonden onder elkaar met 16 pixels tekst en 16 pixels lucht. Met wat verticale ruimte eromheen wordt het tikvlak 36 pixels en scheelt dat een hoop mispoezen op een telefoon. */ footer ul{gap:2px} footer ul a{display:inline-block;padding:9px 0} footer .socials a{width:40px;height:40px} /* De onderste regel met privacy, voorwaarden en cookievoorkeuren. */ footer .legal{gap:6px 16px;line-height:2} footer .legal a,footer .legal button{display:inline-block;padding:6px 0} /* "Bekijk alle wijnen" en dat soort links onder een kop. */ .sec-head .more{padding:6px 0} /* Losse links die op zichzelf staan en dus aangetikt worden: de categorie op een kaart, "Verwijderen" in de winkelwagenlade en de cookievoorkeuren. */ .card .pcat a{display:inline-block;padding:8px 5px;margin:-8px -5px} .dline__weg,.cartline__weg{padding:9px 0} .wvj-cookie-link{padding:9px 0} footer .legal a,footer .legal button{padding:9px 0} .pcrumb a{display:inline-block;padding:7px 0} /* De links in het kenmerkenblok (druif, regio, wijnmaker) en bij de keurmerken. */ .attr b a,.keurmerken a{display:inline-block;padding:7px 0} .chips .chip{padding:9px 15px} }