/* Theme Name: Licono Theme URI: https://licono.xyz Author: Licono Description: Een moderne webshop voor Licono — originele softwarelicenties voor bedrijven. Handgebouwd, geen pagebuilder. Version: 2.0.0 Requires at least: 6.0 Requires PHP: 7.4 License: GNU General Public License v2 or later Text Domain: licono */ /* ============================================================ Tokens ============================================================ */ :root{ --ink:#101218; --ink-soft:#2A2D36; --bg:#F4F5F7; /* lichte, frisse webshop-achtergrond */ --bg-2:#ECEEF2; --surface:#FFFFFF; --line:#E6E8EE; --line-2:#DDE0E8; --line-ink:rgba(255,255,255,.12); --muted:#5A5F6B; --muted-2:#878C99; --accent:#2F43FF; --accent-press:#2336d8; --accent-soft:#EBEDFF; --warm:#FF5C35; --warm-soft:#FFEBE4; --ok:#15875A; --ok-soft:#E2F5EC; --star:#FF9E2C; --maxw:1220px; --gutter:22px; --r:16px;--r-sm:11px;--r-lg:24px;--r-pill:999px; --sh-sm:0 1px 2px rgba(16,18,24,.05),0 3px 10px rgba(16,18,24,.05); --sh:0 12px 28px -14px rgba(16,18,24,.22),0 2px 8px rgba(16,18,24,.05); --sh-lg:0 36px 70px -26px rgba(16,18,24,.34); --f-display:"Space Grotesk",ui-sans-serif,system-ui,sans-serif; --f-body:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; --s-0:clamp(.95rem,.92rem + .12vw,1.02rem); --s-1:clamp(1.12rem,1.05rem + .3vw,1.28rem); --s-2:clamp(1.45rem,1.3rem + .7vw,1.9rem); --s-3:clamp(1.85rem,1.55rem + 1.3vw,2.7rem); --s-4:clamp(2.3rem,1.8rem + 2.4vw,3.7rem); } *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--f-body);font-size:var(--s-0);line-height:1.6;color:var(--ink);background:var(--bg);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;overflow-x:hidden} h1,h2,h3,h4{font-family:var(--f-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;margin:0} h1{font-size:var(--s-4)}h2{font-size:var(--s-3)}h3{font-size:var(--s-2)} p{margin:0 0 1em} a{color:inherit;text-decoration:none} img,svg{max-width:100%;display:block} ul{margin:0;padding:0;list-style:none} strong{font-weight:600} ::selection{background:var(--accent);color:#fff} :focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:6px} .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(48px,6vw,84px)} .section--tight{padding-block:clamp(34px,4vw,56px)} .eyebrow{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-display);font-weight:500;font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .eyebrow::before{content:"";width:20px;height:1px;background:currentColor;opacity:.6} .muted{color:var(--muted)} .center{text-align:center} /* ============================================================ Buttons ============================================================ */ .btn{--bg:var(--ink);--fg:#fff;--bd:var(--ink);display:inline-flex;align-items:center;justify-content:center;gap:.5em;font-family:var(--f-display);font-weight:500;font-size:.95rem;padding:.85em 1.3em;border-radius:var(--r-pill);background:var(--bg);color:var(--fg);border:1px solid var(--bd);cursor:pointer;line-height:1;transition:transform .22s cubic-bezier(.2,.8,.2,1),box-shadow .22s,background .18s,border-color .18s} .btn .ic{width:18px;height:18px;transition:transform .3s} .btn:hover{transform:translateY(-2px);box-shadow:var(--sh)} .btn:active{transform:translateY(0)} .btn--accent{--bg:var(--accent);--bd:var(--accent)} .btn--accent:hover{--bg:var(--accent-press)} .btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)} .btn--ghost:hover{--bd:var(--ink)} .btn--light{--bg:#fff;--fg:var(--ink);--bd:#fff} .btn--on-dark{--bg:transparent;--fg:#fff;--bd:rgba(255,255,255,.3)} .btn--on-dark:hover{--bd:#fff} .btn--lg{padding:1em 1.6em;font-size:1rem} .btn--block{width:100%} .link-arrow{display:inline-flex;align-items:center;gap:.45em;font-family:var(--f-display);font-weight:500;color:var(--ink)} .link-arrow .ic{width:18px;height:18px;transition:transform .3s} .link-arrow:hover .ic{transform:translateX(4px)} [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .6s cubic-bezier(.2,.7,.2,1),transform .6s cubic-bezier(.2,.7,.2,1)} [data-reveal].in{opacity:1;transform:none} [data-reveal][data-d="1"]{transition-delay:.06s}[data-reveal][data-d="2"]{transition-delay:.12s}[data-reveal][data-d="3"]{transition-delay:.18s} @media (prefers-reduced-motion:reduce){[data-reveal]{opacity:1;transform:none;transition:none}} /* ============================================================ USP top bar ============================================================ */ .usp-top{background:var(--ink);color:#cfd2da;font-size:.8rem} .usp-top .container{display:flex;align-items:center;justify-content:center;gap:30px;min-height:40px;flex-wrap:wrap} .usp-top span{display:inline-flex;align-items:center;gap:7px} .usp-top .ic{width:15px;height:15px;color:#7c8bff} @media (max-width:720px){.usp-top .u2,.usp-top .u3{display:none}} /* ============================================================ Header ============================================================ */ .site-header{position:sticky;top:0;z-index:60;background:var(--surface);box-shadow:var(--sh-sm)} .header-main{display:flex;align-items:center;gap:22px;height:76px} .brand{display:inline-flex;align-items:center;gap:11px;font-family:var(--f-display);font-weight:600;font-size:1.32rem;letter-spacing:-.03em;flex:0 0 auto} .brand__mark{width:36px;height:36px;border-radius:10px;background:var(--ink);color:#fff;display:grid;place-items:center;flex:0 0 auto} .brand__mark svg{width:21px;height:21px} .brand:hover .brand__mark{background:var(--accent)} .searchbar{flex:1;max-width:560px;display:flex;align-items:center;gap:8px;background:var(--bg);border:1.5px solid var(--line);border-radius:var(--r-pill);padding:6px 6px 6px 16px;transition:border-color .2s,box-shadow .2s} .searchbar:focus-within{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);background:#fff} .searchbar .ic{width:19px;height:19px;color:var(--muted-2);flex:0 0 auto} .searchbar input{flex:1;border:0;background:transparent;font-family:var(--f-body);font-size:.95rem;color:var(--ink);outline:none;min-width:0} .searchbar input::placeholder{color:var(--muted-2)} .searchbar button{flex:0 0 auto;border:0;cursor:pointer;width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent);color:#fff;display:grid;place-items:center;transition:background .2s} .searchbar button:hover{background:var(--accent-press)} .searchbar button .ic{color:#fff;width:18px;height:18px} .header-tools{display:flex;align-items:center;gap:8px;flex:0 0 auto} .tool{position:relative;display:inline-grid;place-items:center;width:46px;height:46px;border-radius:var(--r-pill);color:var(--ink);transition:background .2s} .tool:hover{background:var(--bg)} .tool .ic{width:22px;height:22px} .cart-count{position:absolute;top:2px;right:2px;min-width:19px;height:19px;padding:0 5px;border-radius:var(--r-pill);background:var(--accent);color:#fff;font-size:.66rem;font-weight:600;display:grid;place-items:center;font-family:var(--f-display)} .nav-toggle{display:none;border:0;background:transparent;cursor:pointer;width:46px;height:46px;border-radius:var(--r-pill);place-items:center;gap:5px} .nav-toggle span{width:18px;height:1.8px;background:var(--ink);display:block} /* category sub-nav */ .subnav{border-top:1px solid var(--line);background:var(--surface)} .subnav__row{display:flex;align-items:center;gap:4px;height:50px;overflow-x:auto;scrollbar-width:none} .subnav__row::-webkit-scrollbar{display:none} .subnav a{white-space:nowrap;font-size:.92rem;font-weight:450;color:var(--ink-soft);padding:.5em .8em;border-radius:var(--r-pill);transition:background .18s,color .18s;display:inline-flex;align-items:center;gap:7px} .subnav a:hover{background:var(--bg);color:var(--ink)} .subnav a.is-strong{font-weight:600} .subnav a .ic{width:16px;height:16px;color:var(--accent)} .subnav__sale{color:var(--warm)!important} @media (max-width:880px){.header-main{height:64px;gap:12px}.brand span:not(.brand__mark){display:none}.search-wrap-desktop{display:none}.nav-toggle{display:inline-grid}.account-tool{display:none}} /* mobile search row */ .msearch{display:none;padding:10px 0 12px} @media (max-width:880px){.msearch{display:block}} /* mobile drawer */ .mobile-nav{position:fixed;inset:0;z-index:80;visibility:hidden;pointer-events:none} .mobile-nav__scrim{position:absolute;inset:0;background:rgba(16,18,24,.45);opacity:0;transition:opacity .35s} .mobile-nav__panel{position:absolute;top:0;right:0;height:100%;width:min(88vw,380px);background:var(--surface);box-shadow:var(--sh-lg);transform:translateX(100%);transition:transform .4s cubic-bezier(.2,.8,.2,1);display:flex;flex-direction:column;padding:20px} .mobile-nav.open{visibility:visible;pointer-events:auto} .mobile-nav.open .mobile-nav__scrim{opacity:1} .mobile-nav.open .mobile-nav__panel{transform:none} .mobile-nav__head{display:flex;align-items:center;justify-content:space-between;margin-bottom:14px} .mobile-nav .nav-menu{display:flex;flex-direction:column;gap:2px;margin-top:6px} .mobile-nav .nav-menu a{font-family:var(--f-display);font-size:1.18rem;padding:.55em .2em;border-bottom:1px solid var(--line)} .mobile-nav .btn{margin-top:18px;justify-content:center} .x-btn{position:relative;width:44px;height:44px;border-radius:var(--r-pill);border:1px solid var(--line);background:transparent;display:grid;place-items:center;cursor:pointer} .x-btn::before,.x-btn::after{content:"";position:absolute;width:16px;height:1.7px;background:var(--ink)} .x-btn::before{transform:rotate(45deg)}.x-btn::after{transform:rotate(-45deg)} .nav-menu{display:flex;gap:2px} /* ============================================================ Hero ============================================================ */ .hero{padding-block:clamp(28px,3.5vw,52px) clamp(34px,4vw,60px)} .hero__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(24px,3vw,44px);align-items:stretch} .hero__panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,52px);position:relative;overflow:hidden;display:flex;flex-direction:column;justify-content:center} .hero__panel::after{content:"";position:absolute;right:-15%;top:-30%;width:55%;height:120%;background:radial-gradient(closest-side,rgba(47,67,255,.12),transparent 70%)} .hero__tag{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;background:var(--accent-soft);color:var(--accent);font-family:var(--f-display);font-weight:500;font-size:.8rem;padding:7px 13px;border-radius:var(--r-pill);position:relative} .hero__tag .ic{width:15px;height:15px} .hero h1{font-size:var(--s-4);margin-top:20px;position:relative} .hero h1 em{font-style:normal;color:var(--accent)} .hero__sub{margin-top:18px;color:var(--muted);font-size:var(--s-1);max-width:44ch;position:relative} .hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px;position:relative} .hero__chips{display:flex;flex-wrap:wrap;gap:18px;margin-top:26px;position:relative} .hero__chips span{display:inline-flex;align-items:center;gap:8px;font-size:.88rem;color:var(--ink-soft);font-weight:450} .hero__chips .ic{width:17px;height:17px;color:var(--ok)} /* featured product card in hero */ .feat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh)} .feat__art{aspect-ratio:16/11;position:relative;display:grid;place-items:center} .feat__art .ic{width:54px;height:54px;color:rgba(255,255,255,.95)} .feat__badge{position:absolute;top:16px;left:16px;background:var(--warm);color:#fff;font-family:var(--f-display);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;padding:6px 11px;border-radius:var(--r-pill)} .feat__glow{position:absolute;width:55%;height:55%;border:1px solid rgba(255,255,255,.28);border-radius:16px;transform:rotate(8deg)} .feat__body{padding:22px;display:flex;flex-direction:column;gap:6px;flex:1} .feat__cat{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-family:var(--f-display)} .feat__title{font-family:var(--f-display);font-weight:600;font-size:1.3rem;line-height:1.2} .feat__rating{display:flex;align-items:center;gap:7px;color:var(--muted);font-size:.85rem} .feat__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:auto;padding-top:14px} .feat__price{font-family:var(--f-display);font-weight:700;font-size:1.6rem} .feat__price small{display:block;font-size:.7rem;font-weight:400;color:var(--muted-2);letter-spacing:.04em;text-transform:uppercase} .stars{display:inline-flex;color:var(--star)} .stars .ic{width:15px;height:15px;fill:currentColor;stroke:currentColor} @media (max-width:880px){.hero__grid{grid-template-columns:1fr}.feat{max-width:440px}} /* ============================================================ USP strip ============================================================ */ .usp-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .usp{display:flex;align-items:center;gap:13px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px} .usp__ic{width:42px;height:42px;border-radius:11px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto} .usp__ic .ic{width:21px;height:21px} .usp b{font-family:var(--f-display);font-weight:600;font-size:.96rem;display:block;letter-spacing:-.01em} .usp small{color:var(--muted);font-size:.82rem} @media (max-width:880px){.usp-strip{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.usp-strip{grid-template-columns:1fr}} /* ============================================================ Section heading ============================================================ */ .sec-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px} .sec-head h2{margin-top:10px} .sec-head--center{justify-content:center;text-align:center;flex-direction:column;align-items:center} /* ============================================================ Category tiles ============================================================ */ .cats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .cat{position:relative;border-radius:var(--r);border:1px solid var(--line);background:var(--surface);padding:22px;overflow:hidden;transition:transform .3s,box-shadow .3s,border-color .3s;min-height:158px;display:flex;flex-direction:column;justify-content:space-between} .cat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)} .cat__ic{width:46px;height:46px;border-radius:12px;background:var(--bg);display:grid;place-items:center;color:var(--ink)} .cat__ic .ic{width:22px;height:22px} .cat h3{font-size:1.08rem;margin-bottom:3px} .cat p{font-size:.84rem;color:var(--muted);margin:0} .cat__arrow{position:absolute;top:22px;right:22px;color:var(--muted-2);transition:transform .3s,color .3s} .cat:hover .cat__arrow{transform:translate(3px,-3px);color:var(--accent)} @media (max-width:880px){.cats{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.cats{grid-template-columns:1fr}} /* ============================================================ Product grid (shop cards) ============================================================ */ .prod-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .shop-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s} .shop-card:hover{transform:translateY(-5px);box-shadow:var(--sh);border-color:var(--line-2)} .shop-card__art{aspect-ratio:16/10;position:relative;display:grid;place-items:center;overflow:hidden} .shop-card__art .ic{width:40px;height:40px;color:rgba(255,255,255,.95)} .shop-card__badge{position:absolute;top:13px;left:13px;background:rgba(255,255,255,.18);backdrop-filter:blur(6px);color:#fff;font-family:var(--f-display);font-weight:600;font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;padding:5px 10px;border-radius:var(--r-pill);border:1px solid rgba(255,255,255,.28)} .shop-card__glow{position:absolute;width:58%;height:58%;border:1px solid rgba(255,255,255,.26);border-radius:14px;transform:rotate(8deg)} .shop-card__body{padding:18px;display:flex;flex-direction:column;flex:1} .shop-card__cat{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted-2);font-family:var(--f-display)} .shop-card__title{font-family:var(--f-display);font-weight:600;font-size:1.06rem;line-height:1.28;margin:7px 0 8px;min-height:2.6em} .shop-card__title a:hover{color:var(--accent)} .shop-card__rating{display:flex;align-items:center;gap:6px;color:var(--muted-2);font-size:.8rem;margin-bottom:14px} .shop-card__foot{margin-top:auto;display:flex;flex-direction:column;gap:12px} .shop-card__price{font-family:var(--f-display);font-weight:700;font-size:1.4rem;color:var(--ink)} .shop-card__price .woocommerce-Price-amount{font-weight:700} .shop-card__price del{color:var(--muted-2);font-weight:400;font-size:.9rem;margin-right:6px} .shop-card__add{width:100%} .shop-card__add.added{display:none} .shop-card__add .ic{width:17px;height:17px} .added_to_cart{display:inline-flex;align-items:center;justify-content:center;gap:.4em;width:100%;margin-top:8px;font-family:var(--f-display);font-weight:500;font-size:.9rem;color:var(--ok);border:1px solid var(--ok-soft);background:var(--ok-soft);border-radius:var(--r-pill);padding:.7em 1em} @media (max-width:880px){.prod-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:520px){.prod-grid{grid-template-columns:1fr}} /* ============================================================ Promo banner ============================================================ */ .promo{position:relative;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(30px,4vw,52px);overflow:hidden;display:grid;grid-template-columns:1.4fr auto;align-items:center;gap:28px} .promo::before{content:"";position:absolute;right:-10%;top:-50%;width:60%;height:200%;background:radial-gradient(closest-side,rgba(47,67,255,.45),transparent 70%)} .promo__in{position:relative} .promo .eyebrow{color:#9aa6ff} .promo h2{font-size:var(--s-2);margin:10px 0 8px} .promo p{color:#b9bdc8;margin:0;max-width:52ch} .promo__btns{position:relative;display:flex;gap:12px;flex-wrap:wrap} @media (max-width:760px){.promo{grid-template-columns:1fr}} /* ============================================================ How it works ============================================================ */ .steps{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:step} .step{position:relative;padding:24px 20px;border-radius:var(--r);border:1px solid var(--line);background:var(--surface)} .step::before{counter-increment:step;content:counter(step,decimal-leading-zero);font-family:var(--f-display);font-size:.82rem;font-weight:600;color:var(--accent);letter-spacing:.08em} .step__ic{width:44px;height:44px;border-radius:12px;background:var(--bg);display:grid;place-items:center;margin:14px 0;color:var(--ink)} .step h3{font-size:1.05rem;margin-bottom:6px} .step p{color:var(--muted);font-size:.88rem;margin:0} @media (max-width:880px){.steps{grid-template-columns:repeat(2,1fr)}} @media (max-width:440px){.steps{grid-template-columns:1fr}} /* ============================================================ Reviews ============================================================ */ .reviews-head{display:flex;align-items:center;gap:16px;justify-content:center;margin-bottom:34px;flex-wrap:wrap;text-align:center} .reviews-head .big{font-family:var(--f-display);font-weight:700;font-size:2rem} .reviews-head .stars .ic{width:20px;height:20px} .quotes{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .quote{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:24px;display:flex;flex-direction:column;gap:14px} .quote .stars .ic{width:16px;height:16px} .quote p{font-size:1rem;line-height:1.55;margin:0;flex:1} .quote__who{display:flex;align-items:center;gap:11px} .quote__who .av{width:40px;height:40px;border-radius:var(--r-pill);background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--f-display);font-weight:600;flex:0 0 auto} .quote__who b{font-family:var(--f-display);font-weight:500;display:block;font-size:.92rem} .quote__who small{color:var(--muted);font-size:.8rem} @media (max-width:880px){.quotes{grid-template-columns:1fr}} /* ============================================================ FAQ ============================================================ */ .faq{max-width:800px;margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .faq__item{border-bottom:1px solid var(--line)} .faq__item:last-child{border-bottom:0} .faq__q{width:100%;text-align:left;background:none;border:0;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:22px 24px;font-family:var(--f-display);font-weight:500;font-size:1.05rem;color:var(--ink)} .faq__q .ic{width:22px;height:22px;flex:0 0 auto;transition:transform .35s;color:var(--accent)} .faq__item.open .faq__q{color:var(--accent)} .faq__item.open .faq__q .ic{transform:rotate(45deg)} .faq__a{overflow:hidden;height:0;transition:height .35s ease} .faq__a-inner{padding:0 24px 22px;color:var(--muted);max-width:68ch} /* ============================================================ CTA ============================================================ */ .cta{position:relative;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(40px,5vw,72px);text-align:center;overflow:hidden} .cta::before{content:"";position:absolute;left:50%;top:-40%;width:120%;height:120%;transform:translateX(-50%);background:radial-gradient(closest-side,rgba(47,67,255,.4),transparent 62%)} .cta__in{position:relative;max-width:600px;margin-inline:auto} .cta h2{font-size:var(--s-3)} .cta p{color:#b9bdc8;margin-top:14px;font-size:var(--s-1)} .cta__btns{display:flex;gap:12px;justify-content:center;margin-top:26px;flex-wrap:wrap} /* ============================================================ Footer ============================================================ */ .site-footer{background:var(--ink);color:#cfd2da;padding-top:clamp(48px,6vw,76px);margin-top:clamp(40px,5vw,72px)} .footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:36px;padding-bottom:40px;border-bottom:1px solid var(--line-ink)} .footer-brand .brand{color:#fff;margin-bottom:16px} .footer-brand .brand__mark{background:#fff;color:var(--ink)} .footer-brand p{color:#9aa0b4;max-width:34ch;font-size:.92rem} .footer-contact{margin-top:18px;font-size:.9rem;line-height:1.85} .footer-contact a{color:#cfd2da}.footer-contact a:hover{color:#fff} .footer-col h4{color:#fff;font-size:.76rem;letter-spacing:.12em;text-transform:uppercase;font-family:var(--f-display);font-weight:500;margin-bottom:14px} .footer-col a{display:block;color:#9aa0b4;padding:6px 0;font-size:.92rem;transition:color .2s} .footer-col a:hover{color:#fff} .footer-bottom{display:flex;align-items:center;justify-content:space-between;gap:18px;padding-block:24px;flex-wrap:wrap;font-size:.84rem;color:#8a8e99} .pay{display:flex;align-items:center;gap:8px} .pay span{font-family:var(--f-display);font-size:.72rem;font-weight:600;color:#cfd2da;border:1px solid var(--line-ink);border-radius:7px;padding:5px 9px;background:rgba(255,255,255,.03)} .pay span.ideal{color:#CC0066} @media (max-width:860px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:span 2}} @media (max-width:520px){.footer-grid{grid-template-columns:1fr}.footer-brand{grid-column:auto}} /* ============================================================ Generic page + WooCommerce ============================================================ */ .page-hero{padding-block:clamp(34px,4vw,60px) 0} .page-hero .eyebrow{margin-bottom:12px} .page-body{padding-block:clamp(28px,3vw,48px)} .prose{max-width:72ch;font-size:1.04rem;line-height:1.75} .prose h2{font-size:var(--s-2);margin:1.5em 0 .5em} .prose h3{font-size:var(--s-1);margin:1.3em 0 .4em} .prose ul{list-style:none;margin:0 0 1.4em;padding:0} .prose ul li{position:relative;padding-left:30px;margin-bottom:11px} .prose ul li::before{content:"";position:absolute;left:0;top:8px;width:16px;height:16px;border-radius:5px;background:var(--accent-soft);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%232F43FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:center} .prose a{color:var(--accent);text-decoration:underline;text-underline-offset:3px} .wc-shell{padding-block:6px} .woocommerce .woocommerce-result-count,.woocommerce .woocommerce-ordering{margin-bottom:1.4em} .woocommerce ul.products li.product .woocommerce-loop-product__title{font-family:var(--f-display);font-size:1.04rem;font-weight:600;padding:.6em 0 .3em} .woocommerce ul.products li.product .price,.woocommerce div.product p.price,.woocommerce span.price{color:var(--ink);font-family:var(--f-display);font-weight:700} .woocommerce #respond input#submit,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button, .woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.woocommerce #respond input#submit.alt{ background:var(--ink);color:#fff;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:500;padding:.8em 1.4em;transition:background .2s,transform .2s} .woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--accent);transform:translateY(-2px)} .woocommerce .woocommerce-message,.woocommerce-info{border-top-color:var(--accent)} .woocommerce .woocommerce-message::before,.woocommerce-info::before{color:var(--accent)} .woocommerce-breadcrumb{font-size:.85rem;color:var(--muted)} .woocommerce ul.products li.product .button{margin-top:.4em} /* ============================================================ v2.1 — echte shop: productfoto's op wit, legaal-blok, lichter ============================================================ */ /* Trustpilot-regel in hero */ .trust-inline{display:inline-flex;align-items:center;gap:9px;font-size:.9rem;color:var(--muted);margin-bottom:18px} .trust-inline .stars .ic{width:16px;height:16px} .trust-inline strong{color:var(--ink)} /* Hero lichter: geen paneel/gradient, tekst op de pagina */ .hero{padding-block:clamp(30px,3.5vw,56px) clamp(24px,3vw,44px)} .hero h1{margin-top:6px} /* Productkaart: echte afbeelding op witte vlak (contain) */ .shop-card__art{aspect-ratio:4/3;background:#fff;border-bottom:1px solid var(--line);padding:18px;display:grid;place-items:center} .shop-card__img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain} .shop-card__ph{position:absolute;inset:0;display:grid;place-items:center;border-radius:0} .shop-card__ph .ic{color:rgba(255,255,255,.95)} .shop-card__title{min-height:auto;margin-bottom:6px} .shop-card__price{display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .shop-card__price .vanaf{font-family:var(--f-body);font-size:.72rem;font-weight:500;color:var(--muted-2);text-transform:uppercase;letter-spacing:.04em} .shop-card__rating span{font-weight:500} /* Uitgelicht product (hero) — afbeelding op wit */ .feat__art{aspect-ratio:16/12;background:#fff;display:grid;place-items:center;padding:26px} .feat__img{max-width:100%;max-height:100%;width:auto;object-fit:contain} .feat__badge{background:var(--warm)} /* Waarom/legaal-sectie */ .legal{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,56px);align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(28px,4vw,52px)} .legal__copy h2{font-size:var(--s-2);margin-bottom:14px} .legal__copy .btn{margin-top:8px} .legal__list{display:grid;gap:16px} .legal__list li{display:flex;gap:13px;align-items:flex-start} .legal__list .ic{width:22px;height:22px;flex:0 0 auto;color:#fff;background:var(--ok);border-radius:var(--r-pill);padding:3px;margin-top:1px} .legal__list b{font-family:var(--f-display);font-weight:600;display:block;font-size:1rem;letter-spacing:-.01em} .legal__list small{color:var(--muted);font-size:.88rem} @media (max-width:820px){.legal{grid-template-columns:1fr;gap:28px}} /* Reviews-kop */ .reviews-head .big{color:var(--ok)} .reviews-head .stars .ic{width:20px;height:20px} /* WooCommerce shop: productfoto's netjes op wit */ .woocommerce ul.products li.product{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;padding:0!important;transition:transform .3s,box-shadow .3s} .woocommerce ul.products li.product:hover{transform:translateY(-4px);box-shadow:var(--sh)} .woocommerce ul.products li.product a img{margin:0;background:#fff;padding:16px;aspect-ratio:4/3;object-fit:contain} .woocommerce ul.products li.product .woocommerce-loop-product__title, .woocommerce ul.products li.product .price, .woocommerce ul.products li.product .button, .woocommerce ul.products li.product .star-rating{margin-left:16px;margin-right:16px} .woocommerce ul.products li.product .button{margin-bottom:16px} /* ============================================================ v2.2 — logo's, productpagina, categorie, checkout ============================================================ */ /* Trustpilot-sterren (groen vakje, witte ster via mask) */ .tp-stars{display:inline-flex;gap:3px;vertical-align:middle} .tp-star{width:21px;height:21px;background:#00B67A;border-radius:3px;position:relative;flex:0 0 auto} .tp-star::before{content:"";position:absolute;inset:3px;background:#fff;-webkit-mask:url(assets/img/trustpilot.svg) center/contain no-repeat;mask:url(assets/img/trustpilot.svg) center/contain no-repeat} .tp-inline{display:inline-flex;align-items:center;gap:9px;font-size:.92rem;color:var(--muted);flex-wrap:wrap} .tp-inline strong{color:var(--ink);font-weight:600} /* Betaallogo's */ .paylogos{display:inline-flex;flex-wrap:wrap;gap:7px;align-items:center} .paylogo{height:30px;min-width:46px;padding:0 8px;background:#fff;border:1px solid var(--line);border-radius:7px;display:inline-flex;align-items:center;justify-content:center} .paylogo img{height:18px;width:auto;display:block;max-width:46px;object-fit:contain} .paylogo--ideal{padding:0}.paylogo--ideal img{height:30px;max-width:48px} .paylogo--klarna{background:#FFB3C7;border-color:#FFB3C7}.paylogo--klarna img{height:12px;max-width:54px} /* ---------- Productpagina (single product) ---------- */ .single-product .wc-shell{padding-block:6px} .single-product .woocommerce-breadcrumb{margin-bottom:20px;font-size:.85rem;color:var(--muted-2)} .single-product .woocommerce-breadcrumb a{color:var(--muted)} .single-product div.product{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(24px,4vw,54px);align-items:start;position:relative} .single-product div.product>.pdp-section, .single-product div.product>.related, .single-product div.product>.up-sells{grid-column:1/-1} .single-product .woocommerce-product-gallery{width:auto!important;margin:0!important;float:none!important;position:sticky;top:118px} .single-product .woocommerce-product-gallery__wrapper{margin:0!important} .single-product .woocommerce-product-gallery .flex-viewport, .single-product .woocommerce-product-gallery__image{border:1px solid var(--line);border-radius:var(--r-lg);background:#fff;overflow:hidden} .single-product .woocommerce-product-gallery__image img{padding:clamp(20px,4vw,48px);aspect-ratio:1/1;object-fit:contain} .single-product .woocommerce-product-gallery__trigger{display:none} .single-product span.onsale{position:absolute;top:14px;left:14px;z-index:3;background:var(--warm);color:#fff;font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.02em;padding:7px 12px;border-radius:var(--r-pill);min-height:0;line-height:1;margin:0} .single-product .summary.entry-summary{width:auto!important;float:none!important;margin:0!important;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,3vw,34px)} .single-product .summary .product_title{font-size:clamp(1.6rem,1.2rem + 1.4vw,2.2rem);line-height:1.12} .single-product .summary .woocommerce-product-rating{margin:10px 0} .single-product .summary .price{font-family:var(--f-display);margin:16px 0 6px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;color:var(--ink)} .single-product .summary .price del{color:var(--muted-2);font-weight:400;font-size:1.15rem;opacity:1;text-decoration:line-through} .single-product .summary .price ins{text-decoration:none} .single-product .summary .price ins .amount,.single-product .summary .price>.amount{font-weight:700;font-size:2.1rem} .pdp-delivery{display:flex;align-items:center;gap:9px;margin:0 0 18px;font-size:.92rem;color:var(--ok)} .pdp-delivery .ic{color:var(--ok);flex:0 0 auto} .pdp-delivery strong{color:var(--ink)} .single-product .summary .woocommerce-product-details__short-description{color:var(--muted);font-size:.96rem;border-top:1px solid var(--line);padding-top:18px;margin-top:4px} .single-product .summary form.cart{margin:22px 0 0;display:flex;gap:12px;align-items:stretch} .single-product .summary form.cart .quantity input.qty{height:54px;width:74px;border:1px solid var(--line-2);border-radius:var(--r-pill);text-align:center;font-family:var(--f-display);font-weight:600;background:var(--surface)} .single-product .summary form.cart .single_add_to_cart_button{flex:1;height:54px;font-size:1.02rem;border-radius:var(--r-pill);background:var(--accent);border-color:var(--accent)} .single-product .summary form.cart .single_add_to_cart_button:hover{background:var(--accent-press)} .pdp-usp{margin:22px 0 0;display:grid;gap:12px;border-top:1px solid var(--line);padding-top:20px} .pdp-usp li{display:flex;align-items:center;gap:11px;font-size:.94rem} .pdp-usp .ic{flex:0 0 auto;color:#fff;background:var(--ok);border-radius:var(--r-pill);padding:3px;width:24px;height:24px} .pdp-pay{margin-top:20px;display:flex;align-items:center;gap:12px;flex-wrap:wrap;border-top:1px solid var(--line);padding-top:18px} .pdp-pay>span{font-size:.82rem;color:var(--muted-2)} /* PDP secties onder de vouw */ .pdp-section{margin-top:clamp(36px,5vw,64px)} .pdp-section__in h2{font-size:var(--s-2);margin-bottom:18px} .pdp-desc .prose{max-width:none} .pdp-desc .prose h2{font-size:1.4rem;margin:1.3em 0 .4em} .pdp-desc .prose h3{font-size:1.15rem} .pdp-desc .prose img{border-radius:var(--r);margin:1em 0} /* Autodesk cross-sell */ .pdp-crosssell{display:grid;grid-template-columns:1fr auto;gap:30px;align-items:center;background:var(--ink);color:#fff;border-radius:var(--r-lg);padding:clamp(26px,4vw,44px);overflow:hidden;position:relative} .pdp-crosssell::before{content:"";position:absolute;right:-8%;top:-60%;width:50%;height:220%;background:radial-gradient(closest-side,rgba(47,67,255,.4),transparent 70%)} .pdp-crosssell__copy{position:relative;max-width:60ch} .pdp-crosssell__copy h2{font-size:var(--s-2);margin-bottom:10px} .pdp-crosssell__copy p{color:#b9bdc8;margin-bottom:18px} .pdp-crosssell__art{position:relative;background:#fff;border-radius:var(--r);padding:18px;display:grid;place-items:center;text-align:center;min-width:170px} .pdp-crosssell__art img{max-width:130px;height:auto} .pdp-crosssell__price{display:block;margin-top:10px;font-family:var(--f-display);font-weight:700;color:var(--ink)} .pdp-crosssell__price del{color:var(--muted-2);font-weight:400;font-size:.85rem;margin-right:5px} @media (max-width:680px){.pdp-crosssell{grid-template-columns:1fr}} /* gerelateerde producten */ .single-product .related.products,.single-product .up-sells{margin-top:clamp(40px,5vw,68px)} .single-product .related.products>h2,.single-product .up-sells>h2{font-size:var(--s-2);margin-bottom:24px;font-family:var(--f-display)} @media (max-width:860px){ .single-product div.product{grid-template-columns:1fr} .single-product .woocommerce-product-gallery{position:static} } /* ---------- Categorie / shop ---------- */ .woocommerce-products-header{margin-bottom:26px} .woocommerce-products-header__title,.woocommerce .page-description+*,.term-description{} .post-type-archive-product .site-main,.tax-product_cat .site-main{padding-top:8px} .woocommerce-products-header__title.page-title{font-family:var(--f-display);font-size:var(--s-3);letter-spacing:-.02em} .tax-product_cat .term-description,.woocommerce-products-header .term-description{color:var(--muted);max-width:70ch;margin-top:10px} .woocommerce .woocommerce-result-count{color:var(--muted-2);font-size:.88rem;margin:0} .woocommerce .woocommerce-ordering select,.woocommerce select.orderby{border:1px solid var(--line-2);border-radius:var(--r-pill);padding:.6em 2.2em .6em 1em;font-family:var(--f-body);background:var(--surface);cursor:pointer} .woocommerce ul.products li.product .onsale{position:absolute;top:12px;left:12px;background:var(--warm);color:#fff;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:600;font-size:.72rem;padding:5px 10px;min-height:0;line-height:1;margin:0;z-index:2} .woocommerce ul.products li.product .price del{color:var(--muted-2);font-weight:400;font-size:.85rem} .woocommerce ul.products li.product .price ins{text-decoration:none} .woocommerce ul.products li.product{position:relative} .woocommerce ul.products li.product a.woocommerce-loop-product__link{display:block} .woocommerce-pagination{margin-top:30px} .woocommerce nav.woocommerce-pagination ul{border:0;gap:6px;display:flex} .woocommerce nav.woocommerce-pagination ul li{border:0} .woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{border:1px solid var(--line);border-radius:10px;min-width:42px;padding:.5em} .woocommerce nav.woocommerce-pagination ul li span.current{background:var(--ink);color:#fff;border-color:var(--ink)} /* ---------- Cart & Checkout ---------- */ .woocommerce-cart .wc-shell,.woocommerce-checkout .wc-shell,.woocommerce-account .wc-shell{padding-block:10px} .woocommerce-checkout h3,.woocommerce-cart h1,.woocommerce-checkout #order_review_heading{font-family:var(--f-display)} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,.woocommerce-checkout .input-text,.select2-container--default .select2-selection--single{border:1px solid var(--line-2)!important;border-radius:10px!important;padding:.8em 1em!important;min-height:48px;background:var(--surface)} .woocommerce form .form-row input.input-text:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)} .woocommerce-checkout #payment{background:var(--bg);border:1px solid var(--line);border-radius:var(--r)} .woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--line)} .woocommerce-checkout #payment div.payment_box{background:var(--surface);border-radius:var(--r-sm)} .woocommerce-checkout #payment div.payment_box::before{border-bottom-color:var(--surface)} .woocommerce #payment #place_order,.woocommerce-checkout button#place_order{background:var(--accent);border-color:var(--accent);border-radius:var(--r-pill);font-family:var(--f-display);font-weight:600;font-size:1.05rem;padding:1em 1.6em;width:100%} .woocommerce #payment #place_order:hover{background:var(--accent-press)} .woocommerce-checkout .woocommerce-checkout-review-order{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;position:sticky;top:110px} .woocommerce table.shop_table{border:1px solid var(--line);border-radius:var(--r)} .checkout-trust{margin-top:16px;display:flex;flex-direction:column;gap:12px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px} .checkout-trust ul{display:grid;gap:9px} .checkout-trust li{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--ink)} .checkout-trust .ic{color:var(--ok);flex:0 0 auto} @media (min-width:981px){ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:1.4fr .9fr;gap:36px;align-items:start} .woocommerce-checkout form.checkout #customer_details{grid-column:1} .woocommerce-checkout form.checkout #order_review,.woocommerce-checkout form.checkout #order_review_heading{grid-column:2} .woocommerce-checkout form.checkout #order_review_heading{margin-top:0} } /* ---------- Footer betaallogo's ---------- */ .footer-pay{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .site-footer .paylogo{background:#fff;border-color:rgba(255,255,255,.15)} .site-footer .trustpilot-badge{display:inline-flex;align-items:center;gap:8px;color:#cfd2da;font-size:.85rem} /* Collectietegels met foto's */ .cat{padding:0;min-height:0;overflow:hidden;display:flex;flex-direction:column} .cat__media{aspect-ratio:5/3;background:#fff;display:grid;place-items:center;padding:22px;border-bottom:1px solid var(--line)} .cat__media img{max-width:100%;max-height:100%;width:auto;object-fit:contain} .cat__media .cat__ic{width:auto;height:auto;background:none;color:var(--muted-2)} .cat__info{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px} .cat__info h3{font-size:1.04rem;margin-bottom:2px} .cat__info p{font-size:.8rem;color:var(--muted);margin:0} .cat__link{display:inline-flex;align-items:center;gap:5px;font-family:var(--f-display);font-weight:500;font-size:.84rem;color:var(--accent);white-space:nowrap} .cat__link .ic{width:16px;height:16px;transition:transform .3s} .cat:hover .cat__link .ic{transform:translateX(3px)} /* Autodesk-sectie */ .autodesk-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:28px} .autodesk-kicker{display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:600;font-size:.78rem;letter-spacing:.04em;color:var(--accent);background:var(--accent-soft);padding:6px 12px;border-radius:var(--r-pill);margin-bottom:12px} .autodesk-kicker .ic{width:16px;height:16px} .autodesk-head h2{font-size:var(--s-2)} .autodesk-head p{margin:8px 0 0} /* Trustpilot-regel in hero netjes uitlijnen */ .trust-inline{display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap} .trust-inline .tp-stars{flex:0 0 auto} /* ============================================================ v2.3 — grote makeover: merklogo's, autodesk, blog, contact, reviews, keuzehulp, SEO, cart/checkout ============================================================ */ .container--narrow{max-width:780px} /* Collecties op één rij met merklogo's */ .brandcats{display:grid;grid-template-columns:repeat(5,1fr);gap:14px} .brandcat{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 16px;display:flex;flex-direction:column;align-items:center;gap:16px;transition:transform .3s,box-shadow .3s,border-color .3s} .brandcat:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)} .brandcat__logo{height:44px;display:grid;place-items:center;width:100%} .brandcat__logo img{max-height:44px;max-width:128px;width:auto;object-fit:contain} .brandcat__name{font-family:var(--f-display);font-weight:600;font-size:.96rem;color:var(--ink)} @media (max-width:768px){.brandcats{grid-auto-flow:column;grid-template-columns:none;grid-auto-columns:42%;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;padding-bottom:6px;min-width:0;width:100%;max-width:100%;contain:layout paint}.brandcat{scroll-snap-align:start}} /* Autodesk showcase: promo + producten op nette rijen */ .ad-showcase{display:grid;grid-template-columns:repeat(4,1fr);gap:18px} .ad-promo{position:relative;overflow:hidden;background:linear-gradient(150deg,#0b0d12 0%,#1a1f2e 100%);color:#fff;border-radius:var(--r);padding:28px;display:flex;flex-direction:column;gap:8px;min-height:250px;text-align:left} .ad-promo::before{content:"";position:absolute;right:-20%;bottom:-30%;width:80%;height:130%;background:radial-gradient(closest-side,rgba(47,67,255,.5),transparent 70%)} .ad-promo::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:26px 26px;opacity:.6} .ad-promo>*{position:relative} .ad-promo__off{font-family:var(--f-display);font-weight:700;font-size:2.1rem;letter-spacing:-.02em} .ad-promo__txt{color:#c2c6d2;font-size:1.02rem;max-width:18ch} .ad-promo__btn{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-family:var(--f-display);font-weight:600;color:#fff;background:var(--accent);align-self:flex-start;padding:.7em 1.2em;border-radius:var(--r-pill);transition:background .2s} .ad-promo:hover .ad-promo__btn{background:var(--accent-press)} @media (max-width:980px){.ad-showcase{grid-template-columns:repeat(2,1fr)}.ad-promo{grid-column:1/-1;min-height:0;flex-direction:row;align-items:center;justify-content:space-between;flex-wrap:wrap}.ad-promo__txt{max-width:none}.ad-promo__btn{margin:0}} @media (max-width:520px){.ad-showcase{grid-template-columns:1fr}} /* Blog */ .blog-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px} .blog-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s,box-shadow .3s,border-color .3s} .blog-card:hover{transform:translateY(-4px);box-shadow:var(--sh);border-color:var(--line-2)} .blog-card__cover{aspect-ratio:16/9;display:grid;place-items:center;color:rgba(255,255,255,.92)} .blog-card__body{padding:20px;display:flex;flex-direction:column;gap:10px;flex:1} .blog-card__title{font-family:var(--f-display);font-weight:600;font-size:1.08rem;line-height:1.32;color:var(--ink)} .blog-card__ex{color:var(--muted);font-size:.9rem;flex:1;line-height:1.55} .blog-card__more{display:inline-flex;align-items:center;gap:6px;color:var(--accent);font-family:var(--f-display);font-weight:500;font-size:.88rem} .blog-card__more .ic{transition:transform .3s} .blog-card:hover .blog-card__more .ic{transform:translateX(3px)} @media (max-width:860px){.blog-grid{grid-template-columns:1fr}} /* Blogartikel */ .post{padding-block:clamp(30px,4vw,56px)} .post-back{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.9rem} .post-back:hover{color:var(--ink)} .post-title{font-size:var(--s-3);margin:14px 0 10px;line-height:1.12} .post-meta{color:var(--muted-2);font-size:.86rem} .post-cover{aspect-ratio:21/9;border-radius:var(--r-lg);display:grid;place-items:center;color:#fff;margin:26px 0 34px} .post-body.prose{font-size:1.06rem} .post-cta{margin-top:44px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:28px;display:flex;align-items:center;justify-content:space-between;gap:22px;flex-wrap:wrap} .post-cta h3{font-size:1.3rem} /* Contactformulier */ .contact-wrap{display:grid;grid-template-columns:.85fr 1.15fr;gap:28px;margin-top:14px} .contact-info{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:26px} .contact-info h3{font-size:1.2rem;margin-bottom:12px} .contact-info p{font-size:.95rem;color:var(--ink-soft);margin-bottom:14px;line-height:1.7} .contact-info a{color:var(--accent)} .contact-note{display:inline-flex;align-items:flex-start;gap:8px;color:var(--ok)!important;font-weight:500} .contact-note .ic{color:var(--ok);flex:0 0 auto;margin-top:2px} .contact-form-box{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px} .contact-form{display:grid;gap:15px} .contact-form label{display:flex;flex-direction:column;gap:7px;font-family:var(--f-display);font-weight:500;font-size:.9rem} .contact-form input,.contact-form textarea{border:1px solid var(--line-2);border-radius:10px;padding:.8em 1em;font-family:var(--f-body);font-size:.96rem;background:var(--surface)} .contact-form input:focus,.contact-form textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .contact-form .btn{justify-self:start;margin-top:4px} .contact-success{display:flex;align-items:center;gap:9px;background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:13px 16px;margin-bottom:16px;font-weight:500} @media (max-width:760px){.contact-wrap{grid-template-columns:1fr}} /* Productpagina Trustpilot-reviews */ .pdp-reviews__head{display:flex;align-items:center;gap:11px;margin-bottom:20px;font-size:1.02rem;color:var(--muted)} .pdp-reviews__head strong{color:var(--ink)} .pdp-reviews__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} .tp-review{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:20px;display:flex;flex-direction:column;gap:10px} .tp-verified{display:inline-flex;align-items:center;gap:5px;font-size:.78rem;color:var(--ok);font-weight:500} .tp-verified .ic{color:var(--ok)} .tp-review h4{font-family:var(--f-display);font-size:1rem;margin:0} .tp-review p{font-size:.92rem;color:var(--ink-soft);flex:1;margin:0;line-height:1.55} .tp-review figcaption{font-size:.82rem;color:var(--muted-2)} @media (max-width:860px){.pdp-reviews__grid{grid-template-columns:1fr}} /* Autodesk banner op productpagina */ .autodesk-banner{position:relative;overflow:hidden;background:linear-gradient(120deg,#0b0d12,#181c27);color:#fff;border-radius:var(--r-lg);padding:clamp(40px,6vw,76px);text-align:center} .autodesk-banner::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 72% 25%,rgba(47,67,255,.38),transparent 58%)} .autodesk-banner::after{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);background-size:30px 30px;opacity:.5} .autodesk-banner__in{position:relative;max-width:620px;margin:0 auto} .autodesk-banner__tag{display:inline-flex;background:var(--accent);color:#fff;font-family:var(--f-display);font-weight:600;font-size:.74rem;letter-spacing:.08em;text-transform:uppercase;padding:5px 12px;border-radius:var(--r-pill)} .autodesk-banner h2{font-size:var(--s-3);margin:14px 0 10px} .autodesk-banner p{color:#c2c6d2;margin-bottom:22px;font-size:var(--s-1)} /* Autodesk keuzehulp app-kaarten */ .apps-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:26px;align-items:start} .app-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden} .app-card__head{width:100%;border:0;background:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;font-family:var(--f-display);font-weight:600;font-size:1rem;color:var(--ink);text-align:left} .app-card__plus{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:var(--r-pill);background:var(--accent-soft);flex:0 0 auto} .app-card__plus .ic{color:var(--accent);transition:transform .35s} .app-card.open .app-card__plus .ic{transform:rotate(45deg)} .app-card.open{border-color:var(--accent)} .app-card__body{height:0;overflow:hidden;transition:height .35s ease} .app-card__inner{padding:4px 20px 20px;border-top:1px solid var(--line)} .app-card__inner p{font-size:.9rem;color:var(--muted);margin:.7em 0} .app-card__inner strong{color:var(--ink)} .app-card__link{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-family:var(--f-display);font-weight:500;font-size:.9rem;margin-top:6px} .app-card__link .ic{transition:transform .3s} .app-card__link:hover .ic{transform:translateX(3px)} @media (max-width:880px){.apps-grid{grid-template-columns:repeat(2,1fr)}} @media (max-width:480px){.apps-grid{grid-template-columns:1fr}} /* SEO-intro collectiepagina met lees meer/minder */ .seo-intro{margin:0 0 26px;max-width:84ch} .seo-intro__text{position:relative;overflow:hidden;max-height:70px;transition:max-height .4s ease} .seo-intro.open .seo-intro__text{max-height:600px} .seo-intro__text p{margin:0;color:var(--muted);line-height:1.7} .seo-intro:not(.open) .seo-intro__text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:34px;background:linear-gradient(transparent,var(--bg))} .seo-intro__toggle{margin-top:10px;border:0;background:none;color:var(--accent);font-family:var(--f-display);font-weight:600;cursor:pointer;padding:0;font-size:.92rem} .seo-intro__toggle:hover{text-decoration:underline} /* ---------- WooCommerce knoppen overal netjes (cart, checkout, account) ---------- */ .woocommerce .button,.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,.woocommerce #respond input#submit,.woocommerce input[type=submit].button{ background:var(--ink);color:#fff;border:1px solid var(--ink);border-radius:var(--r-pill);font-family:var(--f-display);font-weight:500;padding:.78em 1.4em;cursor:pointer;line-height:1.2;transition:background .2s,transform .2s,border-color .2s;text-shadow:none} .woocommerce .button:hover,.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover{background:var(--accent);border-color:var(--accent);transform:translateY(-2px)} .woocommerce .button.alt,.woocommerce button.button.alt,.woocommerce input.button.alt,.wc-proceed-to-checkout a.checkout-button,.woocommerce #place_order,.single_add_to_cart_button{background:var(--accent);border-color:var(--accent);color:#fff} .woocommerce .button.alt:hover,.wc-proceed-to-checkout a.checkout-button:hover,.woocommerce #place_order:hover{background:var(--accent-press);border-color:var(--accent-press)} .wc-proceed-to-checkout a.checkout-button{display:block;width:100%;text-align:center;font-size:1.05rem;padding:1em 1.4em} /* quantity */ .woocommerce .quantity input.qty,.quantity input.qty{border:1px solid var(--line-2);border-radius:10px;height:46px;width:74px;text-align:center;font-family:var(--f-display);font-weight:600;background:#fff;padding:0;-moz-appearance:textfield} .woocommerce .quantity{display:inline-flex} /* cart */ .woocommerce-cart table.cart{border:1px solid var(--line);border-radius:var(--r);border-collapse:separate;border-spacing:0;overflow:hidden;background:#fff} .woocommerce-cart table.cart thead th{background:var(--bg-2);font-family:var(--f-display);font-weight:600;border:0;padding:16px} .woocommerce-cart table.cart td{border-top:1px solid var(--line);vertical-align:middle} .woocommerce-cart table.cart img{width:60px;height:auto;border-radius:8px;border:1px solid var(--line);background:#fff} .woocommerce-cart td.actions{background:var(--bg-2)} .woocommerce-cart td.actions .coupon{display:inline-flex;gap:8px;align-items:center} .woocommerce-cart td.actions .input-text,.woocommerce form .form-row .input-text#coupon_code{border:1px solid var(--line-2);border-radius:10px;padding:.65em 1em;min-height:46px;width:170px} .woocommerce a.remove{display:inline-grid;place-items:center;width:24px;height:24px;color:var(--warm)!important;font-size:1.1rem;border-radius:var(--r-pill);background:var(--warm-soft)} .woocommerce a.remove:hover{background:var(--warm);color:#fff!important} .cart_totals{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px} .cart_totals h2{font-family:var(--f-display);margin-bottom:14px} .cart-collaterals .cart_totals table{border:0} .cart-empty,.return-to-shop{text-align:left} /* account */ .woocommerce-account .woocommerce-MyAccount-navigation ul{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 26px;border:0} .woocommerce-account .woocommerce-MyAccount-navigation li{border:0;margin:0} .woocommerce-account .woocommerce-MyAccount-navigation li a{border:1px solid var(--line);border-radius:var(--r-pill);padding:.55em 1.1em;display:block;font-family:var(--f-display);font-weight:500;font-size:.92rem} .woocommerce-account .woocommerce-MyAccount-navigation li.is-active a{background:var(--ink);color:#fff;border-color:var(--ink)} .woocommerce .col2-set .col-1,.woocommerce .col2-set .col-2,.woocommerce form.login,.woocommerce form.register{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;width:100%;float:none} .woocommerce .col2-set{display:grid;grid-template-columns:1fr 1fr;gap:20px} @media (max-width:760px){.woocommerce .col2-set{grid-template-columns:1fr}} /* notices */ .woocommerce-message,.woocommerce-info,.woocommerce-error,.woocommerce-noreviews{border-radius:10px;border-top:3px solid var(--accent);background:var(--surface);box-shadow:var(--sh-sm)} .woocommerce-error{border-top-color:var(--warm)} .woocommerce-message{border-top-color:var(--ok)} /* productrating in lussen verbergen om sterren-spam te beperken */ .woocommerce ul.products li.product .star-rating{display:none} /* ============================================================ v2.4 — fixes: video-banner, app-foto's, footer compact, inklapbare beschrijving, blogfoto's ============================================================ */ /* AutoCAD video-banner */ .autodesk-banner.has-video{padding:0;min-height:440px;display:grid;place-items:center;background:#0b0d12} .autodesk-banner__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .autodesk-banner.has-video::before{background:linear-gradient(180deg,rgba(11,13,18,.5),rgba(11,13,18,.72));z-index:1} .autodesk-banner.has-video::after{display:none} .autodesk-banner.has-video .autodesk-banner__in{position:relative;z-index:2;padding:clamp(40px,6vw,72px)} .autodesk-banner h2{text-shadow:0 2px 30px rgba(0,0,0,.4)} /* Keuzehulp app-kaart met productfoto */ .app-card__head{padding:14px 16px} .app-card__top{display:flex;align-items:center;gap:12px;min-width:0} .app-card__thumb{width:44px;height:44px;border-radius:10px;background:#fff;border:1px solid var(--line);display:grid;place-items:center;flex:0 0 auto;overflow:hidden} .app-card__thumb img{width:100%;height:100%;object-fit:contain;padding:5px} .app-card__thumb .ic{color:var(--muted-2)} .app-card__name{font-family:var(--f-display);font-weight:600;font-size:.98rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* Inklapbare productbeschrijving */ .pdp-collapse{position:relative} .pdp-collapse__text{position:relative;overflow:hidden;max-height:210px;transition:max-height .45s ease} .pdp-collapse.open .pdp-collapse__text{max-height:5000px} .pdp-collapse:not(.open) .pdp-collapse__text::after{content:"";position:absolute;left:0;right:0;bottom:0;height:64px;background:linear-gradient(transparent,var(--bg))} .pdp-collapse__toggle{margin-top:14px;border:0;background:none;color:var(--accent);font-family:var(--f-display);font-weight:600;cursor:pointer;padding:0;font-size:.95rem} .pdp-collapse__toggle:hover{text-decoration:underline} .pdp-desc .prose{max-width:none} /* Blogfoto's */ .blog-card__cover{overflow:hidden;position:relative} .blog-card__cover img,.blog-card__img{width:100%;height:100%;object-fit:cover;display:block;position:absolute;inset:0} .post-cover--img{padding:0;overflow:hidden} .post-cover--img img{width:100%;height:100%;object-fit:cover} /* Footer: bedrijfsinfo netjes */ .footer-contact{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:12px} .footer-contact li{display:flex;gap:11px;align-items:flex-start;font-size:.88rem;line-height:1.5;color:#9aa0b4} .footer-contact li strong{color:#fff;font-weight:600} .footer-contact a{color:#cfd2da} .footer-contact a:hover{color:#fff} .footer-contact__ic{flex:0 0 auto;width:30px;height:30px;border-radius:8px;background:rgba(255,255,255,.06);display:grid;place-items:center;color:#9aa6ff} .footer-contact__ic .ic{width:16px;height:16px} /* Footer: compacte deep-links + kolommen op één rij */ .footer-grid{grid-template-columns:1.5fr 1.35fr .8fr .8fr 1fr} .footer-deeplinks{display:grid;gap:0;margin-bottom:8px} .footer-col--wide .fdl{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:8px 0;border-bottom:1px solid var(--line-ink)} .footer-col--wide .fdl:last-child{border-bottom:0} .fdl__name{color:#9aa0b4;font-size:.88rem} .fdl:hover .fdl__name{color:#fff} .fdl__price{color:#fff;font-family:var(--f-display);font-weight:600;font-size:.9rem;white-space:nowrap} .fdl__price .woocommerce-Price-amount{color:#fff} .footer-note{margin-top:10px;color:#8a8e99;font-size:.82rem;line-height:1.5} @media (max-width:980px){.footer-grid{grid-template-columns:1fr 1fr 1fr}.footer-brand{grid-column:span 3}.footer-col--wide{grid-column:span 3}} @media (max-width:620px){.footer-grid{grid-template-columns:1fr 1fr}.footer-brand,.footer-col--wide{grid-column:span 2}} @media (max-width:460px){.footer-grid{grid-template-columns:1fr}.footer-brand,.footer-col--wide{grid-column:auto}} /* Schermlezertekst verbergen (anders verschijnt "Oorspronkelijke prijs was..." zichtbaar bij prijzen) */ .screen-reader-text,.screen-reader-text span,.wc-block-components-price__regular .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;clip-path:inset(50%)} /* ============================================================ v2.5 — logo, grotere keuzehulp, compacte reviews, promo-video, grotere collecties ============================================================ */ /* Eigen logo als merkmark */ .brand__mark--logo{background:none!important;box-shadow:none;overflow:visible;padding:0} .brand__mark--logo img{width:100%;height:100%;object-fit:contain;display:block} .brand:hover .brand__mark--logo{background:none!important} /* Homepage collecties iets groter */ .brandcat{padding:32px 18px;gap:18px} .brandcat__logo{height:56px} .brandcat__logo img{max-height:56px;max-width:150px} .brandcat__name{font-size:1.02rem} /* Keuzehulp: logo's veel groter (tegel-opzet) */ .app-card__head{flex-direction:column;align-items:stretch;text-align:center;gap:12px;padding:22px 16px 18px;position:relative} .app-card__top{flex-direction:column;align-items:center;gap:12px} .app-card__thumb{width:84px;height:84px;border-radius:16px} .app-card__thumb img{padding:9px} .app-card__thumb .ic{width:34px;height:34px} .app-card__name{white-space:normal;font-size:1.04rem;line-height:1.2} .app-card__plus{position:absolute;top:14px;right:14px} .app-card__inner{text-align:left} /* Compacte Trustpilot-reviews in de koopbox */ .pdp-reviews-compact{margin-top:18px;border-top:1px solid var(--line);padding-top:16px} .pdp-reviews-compact__head{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--muted);margin-bottom:12px} .pdp-reviews-compact__head strong{color:var(--ink)} .pdp-reviews-compact__head .tp-star{width:17px;height:17px} .pdp-reviews-compact ul{display:grid;gap:9px} .pdp-reviews-compact li{font-size:.85rem;line-height:1.45;color:var(--muted)} .pdp-reviews-compact .rc-text b{color:var(--ink);font-family:var(--f-display);font-weight:600} .pdp-reviews-compact .rc-text em{color:var(--muted-2);font-style:normal} /* Categorie-labels overal weg */ .feat__cat,.shop-card__cat,.pcard__cat{display:none} .woocommerce .product_meta .posted_in,.woocommerce .product_meta .tagged_as{display:none} /* Promo-tegel met achtergrondvideo */ .ad-promo.has-video{justify-content:flex-end;min-height:280px} .ad-promo__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} .ad-promo.has-video::before{z-index:1;background:linear-gradient(180deg,rgba(11,13,18,.4),rgba(11,13,18,.85))} .ad-promo.has-video::after{display:none} .ad-promo.has-video>*{position:relative;z-index:2} @media (max-width:980px){.ad-promo.has-video{min-height:220px}} /* Over ons-afbeeldingen */ .page-body .prose .about-img,.page-body .prose figure.wp-block-image{margin:1.6em 0} .page-body .prose .about-img img,.page-body .prose figure.wp-block-image img{width:100%;height:auto;border-radius:var(--r-lg);border:1px solid var(--line);display:block;aspect-ratio:16/8;object-fit:cover} /* ============================================================ v2.5.2 — fix promo-video filter + productkaart-afbeelding ============================================================ */ /* Promo-tegel: vol zwart filter over de hele video (zoals licono.nl) */ .ad-promo.has-video::before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;width:100%;height:100%;inset:0;z-index:1;background:rgba(0,0,0,.42)} .ad-promo.has-video .ad-promo__off,.ad-promo.has-video .ad-promo__txt{text-shadow:0 2px 18px rgba(0,0,0,.6)} /* Productkaart-afbeelding altijd volledig zichtbaar (vierkant vlak, contain) */ .shop-card__art{aspect-ratio:1/1!important;overflow:hidden;padding:20px} .shop-card__art .shop-card__img{width:100%!important;height:100%!important;max-width:100%;max-height:100%;object-fit:contain!important;display:block} /* ============================================================ v2.6 — merk-gerichte blogcovers ============================================================ */ .blog-cover{display:grid;place-items:center;position:relative;overflow:hidden} .blog-cover--office{background:linear-gradient(135deg,#16439e,#3b82f6)} .blog-cover--windows{background:linear-gradient(135deg,#0a4ea3,#22a7f0)} .blog-cover--autodesk{background:linear-gradient(135deg,#14171d,#2b313e)} .blog-cover--adobe{background:linear-gradient(135deg,#7d0f0f,#e0301e)} .blog-cover--legal{background:linear-gradient(135deg,#0f5a3c,#16a974)} .blog-cover__logo{background:#fff;border-radius:14px;padding:16px 26px;display:grid;place-items:center;box-shadow:0 14px 34px -14px rgba(0,0,0,.45);position:relative;z-index:2} .blog-cover__logo img{height:40px!important;width:auto!important;max-width:160px;object-fit:contain;display:block;position:static!important;inset:auto} .blog-cover__logo--icon{background:rgba(255,255,255,.16);color:#fff;box-shadow:none;gap:6px} .blog-cover__logo--icon span{font-family:var(--f-display);font-weight:600;font-size:.82rem;letter-spacing:.02em} .post-cover.blog-cover{aspect-ratio:21/9} .post-cover.blog-cover .blog-cover__logo img{height:52px!important} /* ============================================================ v2.7 — zoek-preview, korting-badge weg, bredere promo ============================================================ */ /* Live zoek-preview */ .searchbar{position:relative} .search-preview{position:absolute;top:calc(100% + 10px);left:0;right:0;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh);padding:8px;z-index:80;display:none;max-height:64vh;overflow:auto} .search-preview.open{display:block} .search-result{display:flex;align-items:center;gap:12px;padding:9px 10px;border-radius:10px;transition:background .15s} .search-result:hover{background:var(--bg)} .search-result__img{width:44px;height:44px;flex:0 0 auto;background:#fff;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;overflow:hidden} .search-result__img img{width:100%;height:100%;object-fit:contain;padding:4px} .search-result__t{flex:1;font-size:.92rem;color:var(--ink);font-weight:500;line-height:1.3} .search-result__p{font-family:var(--f-display);font-weight:700;color:var(--ink);white-space:nowrap} .search-preview__empty{padding:18px;color:var(--muted);font-size:.9rem;text-align:center} /* Korting niet meer als badge-balk, maar via doorgestreepte prijs */ .onsale{display:none!important} /* ============================================================ v2.7.2 — promo-video vult de hele tegel (canvas behoudt formaat) ============================================================ */ .ad-promo.has-video .ad-promo__video{position:absolute;inset:0;top:0;left:0;width:100%;height:100%;min-width:100%;min-height:100%;max-width:none;object-fit:cover;z-index:0} /* ============================================================ v2.7.3 — promo-video: bulletproof cover (vult altijd de hele tegel) ============================================================ */ .ad-promo.has-video{overflow:hidden} .ad-promo.has-video .ad-promo__video{ position:absolute;top:50%;left:50%; width:auto;height:auto;min-width:100%;min-height:100%;max-width:none; transform:translate(-50%,-50%); object-fit:cover;z-index:0; } /* ============================================================ v2.8 — promo-tegel met foto-achtergrond + gecentreerde tekst ============================================================ */ .ad-promo--photo{ background-image:url(assets/img/autocad-promo.jpg); background-size:cover;background-position:center;background-repeat:no-repeat; justify-content:center;align-items:center;text-align:center;padding:34px 24px; } .ad-promo--photo::before{content:"";position:absolute;inset:0;top:0;left:0;width:100%;height:100%;z-index:1;background:rgba(0,0,0,.5)} .ad-promo--photo::after{display:none} .ad-promo--photo>*{position:relative;z-index:2} .ad-promo__inner{display:flex;flex-direction:column;align-items:center;gap:10px;max-width:90%} .ad-promo--photo .ad-promo__off{text-shadow:0 2px 18px rgba(0,0,0,.6)} .ad-promo--photo .ad-promo__txt{max-width:none;text-shadow:0 2px 18px rgba(0,0,0,.6)} .ad-promo--photo .ad-promo__btn{margin-top:8px} /* ============================================================ v3.0 — CART & CHECKOUT radicale makeover ============================================================ */ /* Stappenbalk */ .co-steps{display:flex;align-items:center;justify-content:center;gap:10px;max-width:580px;margin:0 auto clamp(26px,4vw,42px)} .co-step{display:flex;align-items:center;gap:9px;color:var(--muted-2)} .co-step__n{width:32px;height:32px;border-radius:var(--r-pill);border:2px solid var(--line);display:grid;place-items:center;font-family:var(--f-display);font-weight:600;font-size:.86rem;background:#fff;flex:0 0 auto} .co-step__l{font-family:var(--f-display);font-weight:500;font-size:.94rem} .co-step.active{color:var(--ink)}.co-step.active .co-step__n{border-color:var(--accent);color:var(--accent)} .co-step.done{color:var(--ink)}.co-step.done .co-step__n{background:var(--accent);border-color:var(--accent);color:#fff} .co-step__line{flex:1;height:2px;background:var(--line);min-width:22px;max-width:70px;border-radius:2px} @media(max-width:600px){.co-step__l{display:none}.co-step__line{max-width:none}} /* ---------- WINKELWAGEN ---------- */ @media(min-width:981px){ .woocommerce-cart .woocommerce{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:32px;align-items:start} .woocommerce-cart .woocommerce>.co-steps,.woocommerce-cart .woocommerce>.woocommerce-notices-wrapper{grid-column:1/-1} .woocommerce-cart form.woocommerce-cart-form{grid-column:1;margin:0} .woocommerce-cart .cart-collaterals{grid-column:2;width:auto!important;float:none;position:sticky;top:108px} } .woocommerce-cart .cart-collaterals .cart_totals{width:100%!important;float:none} .woocommerce-cart table.cart{border:0;border-collapse:separate;background:transparent;margin:0} .woocommerce-cart table.cart thead{display:none} .woocommerce-cart table.cart tbody{display:flex;flex-direction:column;gap:12px} .woocommerce-cart table.cart tr.cart_item{display:grid;grid-template-columns:76px minmax(0,1fr) auto;grid-template-areas:"thumb name sub" "thumb qty sub";column-gap:16px;row-gap:10px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;position:relative} .woocommerce-cart table.cart tr.cart_item td{display:block;border:0!important;padding:0} .woocommerce-cart td.product-thumbnail{grid-area:thumb} .woocommerce-cart td.product-thumbnail img{width:76px!important;height:76px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:6px} .woocommerce-cart td.product-name{grid-area:name;font-family:var(--f-display);font-weight:600;font-size:1rem;line-height:1.3} .woocommerce-cart td.product-name a{color:var(--ink)}.woocommerce-cart td.product-name a:hover{color:var(--accent)} .woocommerce-cart td.product-price{display:none} .woocommerce-cart td.product-subtotal{grid-area:sub;justify-self:end;align-self:center;font-family:var(--f-display);font-weight:700;font-size:1.15rem;color:var(--ink)} .woocommerce-cart td.product-quantity{grid-area:qty} .woocommerce-cart td.product-remove{position:absolute;top:12px;right:14px;width:auto} .woocommerce-cart table.cart tr:not(.cart_item){display:block} .woocommerce-cart td.actions{display:flex!important;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:18px 0 0!important;background:transparent;border:0!important} .woocommerce-cart td.actions .coupon{display:flex;gap:8px;align-items:center;margin:0} .woocommerce-cart td.actions .coupon .input-text{min-width:190px} .woocommerce-cart td.actions button[name="update_cart"]{background:var(--surface);color:var(--ink);border:1px solid var(--line-2)} .woocommerce-cart td.actions button[name="update_cart"]:hover{background:var(--ink);color:#fff;border-color:var(--ink)} .woocommerce-cart .cart_totals{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm)} .woocommerce-cart .cart_totals h2{font-family:var(--f-display);font-size:1.2rem;margin-bottom:14px} .woocommerce-cart .cart_totals table{border:0;margin:0} .woocommerce-cart .cart_totals table th,.woocommerce-cart .cart_totals table td{border:0;padding:9px 0;font-size:.95rem} .woocommerce-cart .cart_totals tr.order-total th,.woocommerce-cart .cart_totals tr.order-total td{padding-top:14px;border-top:1px solid var(--line);font-family:var(--f-display);font-size:1.18rem} .woocommerce-cart .cart_totals tr.order-total .amount{font-weight:700} .cart-tp{display:flex;align-items:center;gap:9px;font-size:.88rem;color:var(--muted);margin-bottom:14px} .cart-tp strong{color:var(--ink)}.cart-tp .tp-star{width:17px;height:17px} .wc-proceed-to-checkout a.checkout-button{margin-top:6px} .cart-trust{display:grid;gap:11px;margin:18px 0 0;border-top:1px solid var(--line);padding-top:16px;list-style:none} .cart-trust li{display:flex;align-items:center;gap:10px;font-size:.9rem;color:var(--ink)} .cart-trust .ic{color:var(--ok);flex:0 0 auto} .cart-pay{margin-top:16px;display:flex;flex-direction:column;gap:9px} .cart-pay>span{font-size:.8rem;color:var(--muted-2)} /* qty stepper */ .woocommerce-cart .quantity{display:inline-flex;align-items:center;border:1px solid var(--line-2);border-radius:var(--r-pill);overflow:hidden;background:#fff} .woocommerce-cart .quantity .qty-btn{width:40px;height:46px;border:0;background:transparent;cursor:pointer;font-size:1.25rem;color:var(--ink);display:grid;place-items:center;line-height:1} .woocommerce-cart .quantity .qty-btn:hover{background:var(--bg);color:var(--accent)} .woocommerce-cart .quantity input.qty{border:0!important;width:46px!important;height:46px!important;min-height:46px;text-align:center;border-radius:0!important;background:transparent;font-family:var(--f-display);font-weight:600;-moz-appearance:textfield} .woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button{-webkit-appearance:none;margin:0} /* ---------- CHECKOUT ---------- */ @media(min-width:981px){ .woocommerce-checkout form.checkout{display:grid;grid-template-columns:minmax(0,1fr) 420px;gap:38px;align-items:start;grid-template-areas:"details rhead" "details review"} .woocommerce-checkout form.checkout #customer_details{grid-area:details} .woocommerce-checkout form.checkout #order_review_heading{grid-area:rhead;margin:0 0 14px} .woocommerce-checkout form.checkout #order_review{grid-area:review;position:sticky;top:108px} } .woocommerce-checkout #customer_details .col2-set{display:block;width:auto} .woocommerce-checkout #customer_details .col-1,.woocommerce-checkout #customer_details .col-2{width:auto;float:none;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin-bottom:18px} .woocommerce-checkout #customer_details h3{font-family:var(--f-display);font-size:1.15rem;margin-bottom:16px} .woocommerce-checkout .form-row{margin:0 0 14px;padding:0} .woocommerce-checkout form .form-row label{display:block;font-family:var(--f-display);font-weight:500;font-size:.86rem;margin-bottom:6px;color:var(--ink)} .woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea{width:100%;border:1px solid var(--line-2);border-radius:10px;padding:.8em 1em;min-height:50px;background:#fff;font-size:.96rem} .woocommerce form .form-row input.input-text:focus,.woocommerce form .form-row textarea:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:0} .select2-container--default .select2-selection--single{border:1px solid var(--line-2)!important;border-radius:10px!important;height:50px!important} .select2-container--default .select2-selection--single .select2-selection__rendered{line-height:48px;padding-left:14px} .select2-container--default .select2-selection--single .select2-selection__arrow{height:48px} .woocommerce-checkout #order_review{background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);padding:26px;box-shadow:var(--sh)} .woocommerce-checkout #order_review .shop_table{border:0;margin:0 0 4px;background:transparent} .woocommerce-checkout #order_review .shop_table th,.woocommerce-checkout #order_review .shop_table td{border:0;padding:10px 0;font-size:.94rem} .woocommerce-checkout #order_review .cart_item td{border-top:1px solid var(--line)} .woocommerce-checkout #order_review .product-name{font-weight:500;color:var(--ink)} .woocommerce-checkout #order_review tfoot .order-total th,.woocommerce-checkout #order_review tfoot .order-total td{padding-top:14px;border-top:1px solid var(--line);font-family:var(--f-display);font-size:1.2rem} .woocommerce-checkout #order_review tfoot .order-total .amount{font-weight:700} .woocommerce-checkout #payment{background:transparent!important;border:0;border-top:1px solid var(--line);border-radius:0;margin-top:8px;padding-top:16px} .woocommerce-checkout #payment ul.payment_methods{border:0!important;padding:0;margin:0 0 8px} .woocommerce-checkout #payment ul.payment_methods li{border:1px solid var(--line);border-radius:12px;padding:14px 16px;margin-bottom:10px;list-style:none;background:#fff} .woocommerce-checkout #payment ul.payment_methods li label{font-family:var(--f-display);font-weight:500} .woocommerce-checkout #payment div.payment_box{background:var(--bg);border-radius:10px;margin-top:10px;font-size:.88rem;padding:14px} .woocommerce-checkout #payment div.payment_box::before{display:none} .co-secure{display:flex;align-items:center;justify-content:center;gap:8px;font-size:.84rem;color:var(--muted);margin:14px 0} .co-secure .ic{color:var(--ok)} .woocommerce-checkout #place_order{width:100%;background:var(--accent);border-color:var(--accent);color:#fff;font-size:1.08rem;padding:1.05em 1.5em;border-radius:var(--r-pill);margin-top:4px} .woocommerce-checkout #place_order:hover{background:var(--accent-press)} .checkout-trust{margin-top:18px;border-top:1px solid var(--line);padding-top:16px} .checkout-trust ul{display:grid;gap:10px;margin:0 0 14px;list-style:none} .checkout-trust li{display:flex;align-items:center;gap:10px;font-size:.88rem;color:var(--ink)} .checkout-trust .ic{color:var(--ok);flex:0 0 auto} @media(max-width:980px){.woocommerce-checkout form.checkout{display:block}.woocommerce-checkout #order_review_heading{margin-top:26px}} /* ============================================================ v4.0 — TOTALE RESTYLE: Editorial Luxe (warm bone, diep teal, Fraunces serif) ============================================================ */ :root{ --ink:#18160F;--ink-soft:#322D23; --bg:#F4EFE6;--bg-2:#EAE2D4;--surface:#FCFAF5; --line:#E6DECE;--line-2:#D8CDB8; --muted:#6C6354;--muted-2:#988D77; --accent:#0E7C86;--accent-press:#0A6068;--accent-soft:#D9EEF0; --warm:#C2683B;--warm-soft:#F6E6DC; --ok:#1F7A52;--ok-soft:#DEEFE3;--star:#D99A2B; --f-display:"Fraunces",Georgia,"Times New Roman",serif; --sh-sm:0 1px 2px rgba(24,22,15,.04),0 6px 18px rgba(24,22,15,.05); --sh:0 14px 34px -16px rgba(24,22,15,.2),0 2px 8px rgba(24,22,15,.05); --sh-lg:0 40px 80px -28px rgba(24,22,15,.32); } h1,h2,h3,h4{line-height:1.12;letter-spacing:-.005em;font-weight:600} .display{letter-spacing:-.012em} /* logo-naam clean sans, koppen serif (editorial lockup) */ .brand{font-family:var(--f-body);font-weight:700} /* knoppen: sans + rechtere hoeken (nieuwe vibe i.p.v. pill) */ .btn{font-family:var(--f-body);font-weight:600;border-radius:12px} .btn--lg{border-radius:14px} .eyebrow{font-family:var(--f-body)} /* accent-glows op donkere secties naar teal (waren cobalt) */ .hero__bg::after{background:radial-gradient(closest-side,rgba(14,124,134,.18),transparent 70%)} .cta::before{background:radial-gradient(closest-side,rgba(14,124,134,.42),transparent 62%)} .autodesk-banner::before{background:radial-gradient(circle at 72% 25%,rgba(14,124,134,.42),transparent 58%)} .pdp-crosssell::before{background:radial-gradient(closest-side,rgba(14,124,134,.45),transparent 70%)} .promo::before{background:radial-gradient(closest-side,rgba(14,124,134,.45),transparent 70%)} /* warme donkere footer-tinten passend bij nieuwe ink */ .site-footer p,.footer-col a,.footer-contact li{color:#b6ac98} .footer-contact a,.footer-col a:hover,.footer-contact a:hover{color:#fff} /* ============================================================ v5.0 — BESPOKE: "Slim geprijsd" editorial commerce ============================================================ */ :root{ --ink:#0D0D10;--ink-soft:#26262C; --bg:#F1EEE6;--bg-2:#E8E3D8;--surface:#FBFAF6; --line:#E1DBCD;--line-2:#D2C9B9; --muted:#5C584E;--muted-2:#928B7B; --accent:#2B2BF5;--accent-press:#1E1ED6;--accent-soft:#E6E6FF; --warm:#CDFB45;--warm-soft:#EEFBC9; --ok:#1F7A52;--ok-soft:#DEEFE3;--star:#E0A21A; --f-display:"Bricolage Grotesque",system-ui,sans-serif; --f-mono:"Space Mono",ui-monospace,monospace; } h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.022em;line-height:1.06} .brand{font-family:var(--f-display);font-weight:700} .eyebrow{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.12em;color:var(--accent);font-weight:400} .eyebrow::before{display:none} /* knoppen: rechter, sans, ink ghost-rand */ .btn{font-family:var(--f-body);font-weight:600;border-radius:9px;letter-spacing:0} .btn--lg{border-radius:11px} .btn--ghost{--bd:var(--ink)} .btn--ghost:hover{--bg:var(--ink);--fg:var(--bg)} /* nav + topbar in mono */ .usp-top .container{font-family:var(--f-mono);font-size:.72rem;text-transform:uppercase;letter-spacing:.04em} .nav-menu a{font-family:var(--f-mono);font-size:.8rem;text-transform:uppercase;letter-spacing:.02em} .subnav a{font-family:var(--f-mono);font-size:.76rem;text-transform:uppercase;letter-spacing:.02em} .footer-col h4{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.1em} /* ---------- HERO ---------- */ .lx-hero{position:relative;overflow:hidden;padding-block:clamp(38px,6vw,82px) clamp(30px,4vw,56px)} .lx-hero__bg{position:absolute;inset:0;z-index:-1;pointer-events:none} .lx-hero__bg::before{content:"";position:absolute;inset:0;background-image:radial-gradient(var(--line) 1.1px,transparent 1.1px);background-size:26px 26px;opacity:.7;-webkit-mask-image:radial-gradient(120% 90% at 72% 0%,#000 30%,transparent 72%);mask-image:radial-gradient(120% 90% at 72% 0%,#000 30%,transparent 72%)} .lx-hero__bg::after{content:"";position:absolute;right:-8%;top:-22%;width:52vw;height:52vw;max-width:680px;max-height:680px;background:radial-gradient(closest-side,rgba(43,43,245,.12),transparent 70%)} .lx-hero__grid{display:grid;grid-template-columns:1.12fr .88fr;gap:clamp(28px,4vw,64px);align-items:center} .lx-kicker{font-family:var(--f-mono);font-size:.78rem;letter-spacing:.04em;color:var(--accent);text-transform:uppercase} .lx-hero__title{font-family:var(--f-display);font-weight:700;font-size:clamp(2.5rem,1.8rem+3.4vw,4.9rem);line-height:1.0;letter-spacing:-.035em;margin-top:16px} .lx-mark{position:relative;white-space:nowrap;z-index:0} .lx-mark::after{content:"";position:absolute;left:-1.5%;right:-1.5%;bottom:.08em;height:.4em;background:var(--warm);z-index:-1;transform:rotate(-1.4deg);border-radius:3px} .lx-hero__sub{font-size:var(--s-1);color:var(--muted);max-width:46ch;margin-top:22px} .lx-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px} .lx-tags{display:flex;flex-wrap:wrap;gap:10px 20px;margin-top:30px;font-family:var(--f-mono);font-size:.76rem;color:var(--ink-soft);list-style:none} .lx-tags li{display:inline-flex;align-items:center;gap:7px} .lx-tags .tp-star{width:13px;height:13px} .lx-dot{width:7px;height:7px;border-radius:999px;background:var(--accent)} /* signature deal card met offset-schaduw */ .lx-deal{position:relative;background:var(--surface);border:1.5px solid var(--ink);border-radius:18px;padding:22px;box-shadow:7px 7px 0 var(--ink)} .lx-deal__tag{position:absolute;top:-15px;right:-13px;background:var(--warm);color:var(--ink);font-family:var(--f-mono);font-weight:700;font-size:1.02rem;padding:7px 12px;border:1.5px solid var(--ink);border-radius:10px;transform:rotate(3deg);z-index:2} .lx-deal__art{display:grid;place-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;aspect-ratio:16/10;padding:18px;margin-bottom:18px} .lx-deal__art img{max-width:100%;max-height:100%;width:auto;object-fit:contain} .lx-deal__label{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted-2)} .lx-deal__name{font-family:var(--f-display);font-weight:700;font-size:1.5rem;margin:6px 0 14px;letter-spacing:-.02em} .lx-deal__price{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap} .lx-deal__was{font-family:var(--f-mono);color:var(--muted-2);text-decoration:line-through;font-size:1.05rem} .lx-deal__now{font-family:var(--f-display);font-weight:700;font-size:2.2rem;color:var(--ink);font-variant-numeric:tabular-nums} .lx-deal__save{font-family:var(--f-mono);font-size:.82rem;color:var(--ink);margin:10px 0 18px;background:var(--warm-soft);display:inline-block;padding:5px 11px;border-radius:7px} .lx-deal__save b{font-weight:700} @media(max-width:920px){.lx-hero__grid{grid-template-columns:1fr}.lx-hero__deal{max-width:430px;margin-top:8px}} /* ---------- TICKER ---------- */ .lx-ticker{background:var(--ink);color:var(--bg);overflow:hidden;padding-block:14px} .lx-ticker__track{display:flex;align-items:center;gap:18px;width:max-content;animation:lxmarq 48s linear infinite;font-family:var(--f-mono);font-size:.84rem;letter-spacing:.02em;text-transform:uppercase} .lx-ticker:hover .lx-ticker__track{animation-play-state:paused} .lx-ticker__item{white-space:nowrap} .lx-ticker__item b{color:var(--warm);font-weight:700} .lx-ticker__sep{color:var(--accent)} @keyframes lxmarq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.lx-ticker__track{animation:none}} /* ---------- SECTIES ---------- */ .lx-sec{padding-block:clamp(44px,6vw,80px)} .lx-sec--legal{background:var(--ink);color:var(--bg)} .lx-sec__head{display:flex;align-items:baseline;gap:18px;margin-bottom:32px;border-top:1.5px solid var(--ink);padding-top:20px} .lx-sec--legal .lx-sec__head{border-top-color:rgba(255,255,255,.22)} .lx-num{font-family:var(--f-mono);font-size:.84rem;color:var(--accent);flex:0 0 auto;font-weight:700} .lx-sec--legal .lx-num{color:var(--warm)} .lx-sec__head h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.7rem,1.3rem+1.5vw,2.6rem);letter-spacing:-.025em;flex:1;margin:0} .lx-sec__link{font-family:var(--f-mono);font-size:.78rem;color:var(--ink);display:inline-flex;align-items:center;gap:6px;text-transform:uppercase;white-space:nowrap} .lx-sec--legal .lx-sec__link{color:var(--bg)} .lx-sec__link:hover{color:var(--accent)} @media(max-width:600px){.lx-sec__head{flex-wrap:wrap;gap:6px 14px}.lx-sec__link{flex-basis:100%}} /* legal als donkere genummerde lijst */ .lx-sec--legal .legal{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,58px);align-items:start;background:transparent;border:0;padding:0} .legal__lead{font-family:var(--f-display);font-weight:600;font-size:clamp(1.3rem,1.1rem+1vw,1.95rem);line-height:1.22;color:var(--bg);letter-spacing:-.02em} .lx-sec--legal .legal__copy .muted{color:#b8b2a4;margin-top:14px} .lx-sec--legal .legal__copy .btn{margin-top:18px;--bd:rgba(255,255,255,.3);--fg:var(--bg)} .lx-sec--legal .legal__copy .btn:hover{--bg:var(--warm);--fg:var(--ink);--bd:var(--warm)} .lx-sec--legal .legal__list{display:grid;gap:0;border-top:1px solid rgba(255,255,255,.16);list-style:none;margin:0} .lx-sec--legal .legal__list li{display:flex;gap:16px;align-items:baseline;padding:16px 2px;border-bottom:1px solid rgba(255,255,255,.16)} .legal__n{font-family:var(--f-mono);font-size:.8rem;color:var(--warm);flex:0 0 auto} .lx-sec--legal .legal__list b{font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:var(--bg);display:block} .lx-sec--legal .legal__list small{color:#9c968a;font-size:.85rem} @media(max-width:820px){.lx-sec--legal .legal{grid-template-columns:1fr}} /* accent-glows op productpagina-secties naar ultramarijn */ .cta::before{background:radial-gradient(closest-side,rgba(43,43,245,.42),transparent 62%)} .autodesk-banner::before{background:radial-gradient(circle at 72% 25%,rgba(43,43,245,.42),transparent 58%)} .pdp-crosssell::before{background:radial-gradient(closest-side,rgba(43,43,245,.45),transparent 70%)} .promo::before{background:radial-gradient(closest-side,rgba(43,43,245,.45),transparent 70%)} /* prijzen in display-font met tabular nums */ .shop-card__price,.feat__price,.pcard__price{font-variant-numeric:tabular-nums} /* ============================================================ v6.0 — MODERN / WIT / TECHY (monochroom + 1 accent, Inter) ============================================================ */ :root{ --ink:#0B0B0D;--ink-soft:#3A3D44; --bg:#FFFFFF;--bg-2:#F6F7F9;--surface:#FFFFFF; --line:#ECEEF1;--line-2:#E0E3E8; --muted:#646973;--muted-2:#9AA0A9; --accent:#2D5BFF;--accent-press:#1E47E0;--accent-soft:#EBF0FF; --warm:#2D5BFF;--warm-soft:#EBF0FF; --ok:#16A06A;--ok-soft:#E5F6EE;--star:#F5A623; --f-display:"Inter Tight",system-ui,-apple-system,sans-serif; --f-mono:"Inter",ui-sans-serif,system-ui,sans-serif; } body{background:var(--bg)} h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.08} .brand{font-family:var(--f-display);font-weight:700;letter-spacing:-.02em} /* knoppen: zwart primair, accent op hover (techy/premium) */ .btn{font-family:var(--f-body);font-weight:600;border-radius:10px;letter-spacing:-.01em} .btn--lg{border-radius:12px} .btn--accent{--bg:var(--ink);--bd:var(--ink);--fg:#fff} .btn--accent:hover{--bg:var(--accent);--bd:var(--accent)} .btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)} .btn--ghost:hover{--bg:var(--bg-2);--fg:var(--ink);--bd:var(--line-2)} /* nav + labels weer clean (geen mono/uppercase) */ .nav-menu a{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:.93rem;font-weight:500} .subnav a{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:.89rem} .usp-top .container{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:.8rem} .eyebrow{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.1em;color:var(--accent);font-weight:600} .footer-col h4{font-family:var(--f-body);text-transform:uppercase;letter-spacing:.08em;font-size:.74rem} .site-header{background:#fff} /* ---------- HERO (wit, techy) ---------- */ .lx-hero{padding-block:clamp(44px,6vw,92px) clamp(34px,4vw,60px)} .lx-hero__bg::before{background-image:radial-gradient(#E7EAEE 1px,transparent 1px);background-size:24px 24px;opacity:.85} .lx-hero__bg::after{background:radial-gradient(closest-side,rgba(45,91,255,.07),transparent 70%)} .lx-kicker{display:inline-flex;align-items:center;gap:8px;font-family:var(--f-body);font-weight:600;font-size:.8rem;letter-spacing:.01em;text-transform:none;color:var(--accent);background:var(--accent-soft);padding:6px 13px;border-radius:999px} .lx-hero__title{font-family:var(--f-display);font-weight:700;font-size:clamp(2.5rem,1.85rem+3vw,4.6rem);line-height:1.03;letter-spacing:-.04em} .lx-mark{color:var(--accent);white-space:nowrap} .lx-mark::after{display:none} .lx-hero__sub{font-size:var(--s-1);color:var(--muted);max-width:46ch;margin-top:22px} .lx-tags{font-family:var(--f-body);font-size:.85rem;color:var(--muted);gap:10px 22px} .lx-tags .tp-star{width:13px;height:13px} .lx-dot{background:var(--accent)} /* deal-card clean */ .lx-deal{background:#fff;border:1px solid var(--line);border-radius:18px;padding:22px;box-shadow:var(--sh)} .lx-deal__tag{position:absolute;top:16px;right:16px;background:var(--ink);color:#fff;font-family:var(--f-body);font-weight:600;font-size:.8rem;padding:5px 11px;border:0;border-radius:999px;transform:none} .lx-deal__art{background:var(--bg-2);border:0;border-radius:12px} .lx-deal__label{font-family:var(--f-body);letter-spacing:.04em} .lx-deal__name{font-family:var(--f-display);letter-spacing:-.02em} .lx-deal__was{font-family:var(--f-body)} .lx-deal__now{font-family:var(--f-display);letter-spacing:-.02em} .lx-deal__save{font-family:var(--f-body);background:var(--accent-soft);color:var(--accent);font-weight:500} /* ---------- SECTIES (clean) ---------- */ .lx-sec__head{border-top:1px solid var(--line);padding-top:22px;margin-bottom:30px} .lx-num{font-family:var(--f-body);color:var(--muted-2);font-weight:600;font-size:.84rem} .lx-sec__head h2{font-family:var(--f-display);letter-spacing:-.03em} .lx-sec__link{font-family:var(--f-body);text-transform:none;color:var(--ink);font-size:.9rem;font-weight:500} .lx-sec__link:hover{color:var(--accent)} /* legal als lichte band i.p.v. donker */ .lx-sec--legal{background:var(--bg-2);color:var(--ink)} .lx-sec--legal .lx-sec__head{border-top-color:var(--line-2)} .lx-sec--legal .lx-num{color:var(--accent)} .lx-sec--legal .legal__lead{color:var(--ink)} .lx-sec--legal .legal__copy .muted{color:var(--muted)} .lx-sec--legal .legal__copy .btn{--bd:var(--line-2);--fg:var(--ink)} .lx-sec--legal .legal__copy .btn:hover{--bg:var(--ink);--fg:#fff;--bd:var(--ink)} .lx-sec--legal .legal__list{border-top-color:var(--line-2)} .lx-sec--legal .legal__list li{border-bottom-color:var(--line)} .legal__n{color:var(--accent)} .lx-sec--legal .legal__list b{color:var(--ink)} .lx-sec--legal .legal__list small{color:var(--muted)} /* product-/categorie-secties op productpagina: glows naar accent */ .cta::before{background:radial-gradient(closest-side,rgba(45,91,255,.4),transparent 62%)} .autodesk-banner::before{background:radial-gradient(circle at 72% 25%,rgba(45,91,255,.4),transparent 58%)} .pdp-crosssell::before{background:radial-gradient(closest-side,rgba(45,91,255,.42),transparent 70%)} /* ============================================================ v7.0 — LICONO-DNA, strak uitgevoerd (wit, #2C2D2E, #3F72E5, Inter) ============================================================ */ :root{ --ink:#2C2D2E;--ink-soft:#50535A; --bg:#FFFFFF;--bg-2:#F5F6F8;--surface:#FFFFFF; --line:#ECECEE;--line-2:#E2E3E6; --muted:#6B6F76;--muted-2:#9AA0A8; --accent:#3F72E5;--accent-press:#2F5ECF;--accent-soft:#EAF0FD; --warm:#3F72E5;--warm-soft:#EAF0FD; --ok:#1F9D57;--ok-soft:#E6F6EE;--star:#F5A623; --f-display:"Inter",system-ui,-apple-system,sans-serif; --f-mono:"Inter",system-ui,sans-serif; } body{background:#fff;color:var(--ink)} h1,h2,h3,h4{font-family:var(--f-display);font-weight:700;letter-spacing:-.03em;line-height:1.1} .btn--accent{--bg:var(--accent);--bd:var(--accent);--fg:#fff} .btn--accent:hover{--bg:var(--accent-press);--bd:var(--accent-press)} .btn--ghost{--bg:transparent;--fg:var(--ink);--bd:var(--line-2)} .btn--ghost:hover{--bg:var(--bg-2);--fg:var(--ink);--bd:var(--line-2)} /* HERO */ .hero7{padding-block:clamp(34px,5vw,72px) clamp(28px,4vw,52px);overflow:hidden} .hero7__grid{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(26px,4vw,54px);align-items:center} .hero7__rating{display:inline-flex;align-items:center;gap:9px;font-size:.86rem;color:var(--muted);background:var(--bg-2);padding:7px 14px;border-radius:999px;border:1px solid var(--line)} .hero7__rating strong{color:var(--ink)} .hero7__rating .tp-star{width:15px;height:15px} .hero7__title{font-size:clamp(2.4rem,1.7rem+3.1vw,4.3rem);font-weight:800;line-height:1.04;letter-spacing:-.04em;margin-top:20px} .hero7__accent{color:var(--accent)} .hero7__sub{font-size:var(--s-1);color:var(--muted);max-width:46ch;margin-top:20px;line-height:1.6} .hero7__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px} .hero7__checks{display:flex;flex-wrap:wrap;gap:9px 22px;margin-top:26px;list-style:none} .hero7__checks li{display:inline-flex;align-items:center;gap:7px;font-size:.9rem;color:var(--ink-soft);font-weight:500} .hero7__checks .ic{color:var(--ok)} .hero7__visual{display:flex;justify-content:center} .hero7__visual img{width:100%;max-width:580px;height:auto;object-fit:contain} @media(max-width:900px){.hero7__grid{grid-template-columns:1fr}.hero7__visual{order:-1;max-width:440px;margin:0 auto}} /* USP-BALK */ .usp7{padding-bottom:clamp(8px,2vw,24px)} .usp7__row{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;border-top:1px solid var(--line);padding-top:clamp(22px,3vw,34px)} .usp7__item{display:flex;align-items:center;gap:13px} .usp7__ic{width:46px;height:46px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;flex:0 0 auto} .usp7__ic .ic{width:22px;height:22px} .usp7__item b{font-weight:600;font-size:.96rem;display:block;letter-spacing:-.01em} .usp7__item small{color:var(--muted);font-size:.82rem} @media(max-width:880px){.usp7__row{grid-template-columns:repeat(2,1fr);gap:20px}} @media(max-width:520px){.usp7__row{grid-template-columns:1fr}} /* SECTIES */ .sec7{padding-block:clamp(40px,5vw,72px)} .sec7--alt{background:var(--bg-2)} .sec7__head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;flex-wrap:wrap;margin-bottom:30px} .sec7__head h2{font-size:clamp(1.55rem,1.25rem+1.3vw,2.25rem);font-weight:700;letter-spacing:-.03em} .sec7__head p{color:var(--muted);margin-top:8px;font-size:1rem} .sec7__link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:var(--accent);font-size:.92rem;white-space:nowrap} .sec7__link .ic{transition:transform .25s} .sec7__link:hover .ic{transform:translateX(3px)} /* WAAROM / LEGAAL */ .legal7{background:var(--bg-2)} .legal7__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4vw,56px);align-items:center} .legal7__ey{font-weight:600;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent)} .legal7__copy h2{font-size:clamp(1.6rem,1.3rem+1.3vw,2.3rem);font-weight:700;letter-spacing:-.03em;margin:12px 0 16px} .legal7__copy p{color:var(--ink-soft);line-height:1.65} .legal7__copy .muted{color:var(--muted);margin-top:12px} .legal7__copy .btn{margin-top:20px} .legal7__list{display:grid;gap:12px;list-style:none} .legal7__list li{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px} .legal7__ic{width:36px;height:36px;border-radius:10px;background:var(--ok-soft);color:var(--ok);display:grid;place-items:center;flex:0 0 auto} .legal7__list b{display:block;font-weight:600;font-size:1rem} .legal7__list small{color:var(--muted);font-size:.86rem} @media(max-width:860px){.legal7__grid{grid-template-columns:1fr}} /* collecties + producten netjes binnen sec7 */ .sec7 .brandcats{margin-top:0} .sec7 .ad-showcase{margin-top:0} .sec7 .blog-grid{margin-top:0} /* FOOTER */ .footer7{background:#191A1C;color:#aeb2b8;padding-top:clamp(38px,5vw,64px);margin-top:clamp(40px,5vw,76px)} .footer7__cta{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;padding-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)} .footer7__cta h3{color:#fff;font-size:clamp(1.3rem,1.1rem+.8vw,1.7rem);font-weight:700;letter-spacing:-.02em} .footer7__cta p{color:#9298a0;margin-top:6px} .footer7__main{display:grid;grid-template-columns:1.7fr 1fr 1fr 1fr 1.2fr;gap:30px;padding-block:40px} .footer7__brand .brand{color:#fff;margin-bottom:14px} .footer7__brand .brand__mark{background:transparent} .footer7__brand p{color:#9298a0;font-size:.92rem;max-width:34ch;line-height:1.6} .footer7__pay{margin-top:18px} .footer7__col h4{color:#fff;font-size:.76rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:14px;font-weight:600} .footer7__col a{display:block;color:#9298a0;padding:6px 0;font-size:.92rem;transition:color .2s} .footer7__col a:hover{color:#fff} .footer7__col--deals a{display:flex;justify-content:space-between;gap:12px;align-items:center;border-bottom:1px solid rgba(255,255,255,.08)} .footer7__col--deals em{color:#fff;font-style:normal;font-weight:600;font-size:.88rem} .footer7__bottom{display:flex;align-items:center;justify-content:space-between;gap:14px 22px;flex-wrap:wrap;padding-block:22px;border-top:1px solid rgba(255,255,255,.1);font-size:.82rem;color:#7f858d} .footer7__info a{color:#9298a0}.footer7__info a:hover{color:#fff} .footer7__legal{display:flex;align-items:center;gap:18px;flex-wrap:wrap} .footer7__legal a{color:#9298a0}.footer7__legal a:hover{color:#fff} .footer7__tp{display:inline-flex;align-items:center;gap:7px;color:#aeb2b8} .footer7__tp .tp-star{width:15px;height:15px} @media(max-width:900px){.footer7__main{grid-template-columns:1fr 1fr;gap:28px}.footer7__brand{grid-column:1/-1}.footer7__cta{flex-direction:column;align-items:flex-start}} @media(max-width:560px){.footer7__main{grid-template-columns:1fr}} /* ---- v7.1 — hero deal card + grotere collectie-knoppen in menu ---- */ .hero7__visual{display:flex;justify-content:center;align-items:center} .hdeal{position:relative;display:block;width:100%;max-width:400px;background:#fff;border:1px solid var(--line);border-radius:20px;padding:20px;box-shadow:0 30px 60px -32px rgba(20,30,60,.28);transition:transform .3s ease,box-shadow .3s ease} .hdeal::before{content:"";position:absolute;inset:0;transform:translate(16px,18px);background:var(--accent-soft);border-radius:20px;z-index:-1} .hdeal:hover{transform:translateY(-4px);box-shadow:0 42px 72px -32px rgba(20,30,60,.34)} .hdeal__off{position:absolute;top:16px;right:16px;z-index:2;background:var(--accent);color:#fff;font-weight:700;font-size:.9rem;padding:6px 11px;border-radius:999px;letter-spacing:-.01em} .hdeal__art{display:flex;align-items:center;justify-content:center;background:var(--bg-2);border-radius:14px;min-height:190px;padding:22px;color:var(--muted-2)} .hdeal__art img{max-width:210px;max-height:170px;width:auto;height:auto;object-fit:contain;mix-blend-mode:multiply} .hdeal__body{display:block;padding:18px 4px 4px} .hdeal__rating{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--muted)} .hdeal__rating .tp-star{width:14px;height:14px} .hdeal__rating em{font-style:normal;font-weight:600;color:var(--ink)} .hdeal__name{display:block;font-weight:700;font-size:1.18rem;letter-spacing:-.02em;color:var(--ink);margin:9px 0 7px;line-height:1.25} .hdeal__price{display:flex;align-items:baseline;gap:10px} .hdeal__price s{color:var(--muted-2);font-size:.95rem} .hdeal__price strong{font-size:1.7rem;font-weight:800;color:var(--ink);letter-spacing:-.02em} .hdeal__note{display:flex;align-items:center;gap:6px;font-size:.84rem;color:var(--ok);font-weight:500;margin-top:11px} .hdeal__note .ic{color:var(--ok);flex:0 0 auto} .hdeal__btn{display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;background:var(--accent);color:#fff;font-weight:600;font-size:.96rem;padding:13px;border-radius:12px;transition:background .2s} .hdeal:hover .hdeal__btn{background:var(--accent-press)} @media(max-width:900px){.hdeal{max-width:360px}} /* grotere categorie-knoppen in het submenu */ .subnav__row{gap:8px;flex-wrap:wrap} .subnav__row a{font-size:1rem;font-weight:600;padding:11px 16px;border-radius:11px;color:var(--ink);transition:background .18s,color .18s} .subnav__row a:hover{background:var(--accent-soft);color:var(--accent-press)} .subnav__row a.is-strong{background:var(--ink);color:#fff} .subnav__row a.is-strong:hover{background:#000;color:#fff} .subnav__row a svg,.subnav__row a .ic{width:17px;height:17px} /* ============================================================ v7.2 — CONVERSIE: winkelwagen + checkout ============================================================ */ .btn--sm{padding:.62em 1.05em;font-size:.9rem;border-radius:11px} .btn--sm .ic{width:16px;height:16px} /* 2-knops "toegevoegd" melding (single product / non-ajax) */ .woocommerce-message:has(.atc-msg){display:block} .atc-msg{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 18px;width:100%} .atc-msg__txt{display:inline-flex;align-items:center;gap:9px;font-size:.98rem;color:var(--ink)} .atc-msg__txt .ic{color:var(--ok);flex:0 0 auto} .atc-msg__btns{display:inline-flex;gap:10px;flex-wrap:wrap} .woocommerce-message:has(.atc-msg) .button{display:none!important} /* Slide-in bevestiging (AJAX-toevoegen vanaf kaarten) */ .atc-toast{position:fixed;z-index:1200;right:18px;bottom:18px;max-width:360px;width:calc(100% - 36px);transform:translateY(18px);opacity:0;transition:transform .32s cubic-bezier(.2,.8,.2,1),opacity .32s;pointer-events:none} .atc-toast.show{transform:translateY(0);opacity:1;pointer-events:auto} .atc-toast__in{background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 28px 60px -24px rgba(20,30,60,.42);padding:16px 16px 14px} .atc-toast__head{display:flex;align-items:center;gap:10px;font-weight:600;font-size:.96rem;color:var(--ink)} .atc-toast__ok{flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center;font-size:.82rem;font-weight:700} .atc-toast__t{flex:1;line-height:1.3} .atc-toast__x{flex:0 0 auto;background:transparent;border:0;color:var(--muted-2);font-size:1.3rem;line-height:1;cursor:pointer;padding:0 2px} .atc-toast__x:hover{color:var(--ink)} .atc-toast__btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px} .atc-toast__btns .btn{justify-content:center} /* Besparingsregel in totalen */ tr.cart-savings th,tr.cart-savings td{color:var(--ok)!important;font-weight:700!important} tr.cart-savings th{display:flex;align-items:center;gap:7px} tr.cart-savings .ic{color:var(--ok)} /* Levering-geruststelling bovenaan winkelwagen */ .cart-promo{display:flex;align-items:center;gap:11px;background:var(--accent-soft);border:1px solid #d9e4fb;color:var(--ink);border-radius:12px;padding:13px 16px;margin-bottom:20px;font-size:.92rem;line-height:1.45} .cart-promo .ic{color:var(--accent);flex:0 0 auto} /* Geruststelling onder de bestelknop */ .co-reassure{list-style:none;display:grid;gap:9px;margin:16px 0 0;padding:15px 0 0;border-top:1px solid var(--line)} .co-reassure li{display:flex;align-items:center;gap:9px;font-size:.86rem;color:var(--ink-soft)} .co-reassure .ic{color:var(--ok);flex:0 0 auto} /* Mobiele sticky balk */ .mbar{display:none} @media(max-width:980px){ .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:1100;align-items:center;justify-content:space-between;gap:14px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -10px 30px -18px rgba(20,30,60,.3);padding:11px 16px;padding-bottom:calc(11px + env(safe-area-inset-bottom))} .mbar__total{display:flex;flex-direction:column;line-height:1.15} .mbar__total small{font-size:.72rem;color:var(--muted)} .mbar__total strong{font-size:1.15rem;font-weight:800;color:var(--ink)} .mbar__total .amount{font-weight:800} .mbar__btn{flex:0 0 auto;padding:.85em 1.4em} .woocommerce-cart .site-main,.woocommerce-checkout .site-main{padding-bottom:84px} } /* Lege winkelwagen: suggesties */ .cart-empty-suggest{margin-top:38px} .cart-empty-suggest h2{font-size:1.3rem;margin-bottom:18px} .ad-showcase--plain{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:760px){.ad-showcase--plain{grid-template-columns:1fr 1fr}} @media(max-width:480px){.ad-showcase--plain{grid-template-columns:1fr}} /* Checkout-knop met slotje-gevoel + betere focus */ .woocommerce #payment #place_order,.woocommerce-checkout button#place_order{box-shadow:0 14px 30px -14px rgba(63,114,229,.6)} .woocommerce-checkout #payment ul.payment_methods li{padding:6px 0} /* ============================================================ v7.3 — WINKELWAGEN & CHECKOUT: layout-fix (geen overlap, ruimer, blauwe knoppen) ============================================================ */ /* ---- knopkleuren forceren naar merkblauw (geen zwart) ---- */ .wc-proceed-to-checkout a.checkout-button, .woocommerce #place_order, .woocommerce-checkout button#place_order{ background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;border-radius:var(--r-pill)!important; } .wc-proceed-to-checkout a.checkout-button:hover, .woocommerce #place_order:hover{background:var(--accent-press)!important;border-color:var(--accent-press)!important} .woocommerce-cart td.actions button[name="apply_coupon"]{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line-2)!important} .woocommerce-cart td.actions button[name="apply_coupon"]:hover{background:var(--bg-2)!important} .woocommerce-cart td.actions button[name="update_cart"]{background:#fff!important;color:var(--ink)!important;border:1px solid var(--line-2)!important} /* ======================= WINKELWAGEN ======================= */ @media(min-width:981px){ .woocommerce-cart .woocommerce{ display:grid!important; grid-template-columns:minmax(0,1fr) 360px; column-gap:36px;row-gap:0; align-items:start; grid-template-areas:"steps steps" "promo promo" "notices notices" "form totals"!important; } .woocommerce-cart .woocommerce>.co-steps{grid-area:steps} .woocommerce-cart .woocommerce>.cart-promo{grid-area:promo} .woocommerce-cart .woocommerce>.woocommerce-notices-wrapper{grid-area:notices} .woocommerce-cart .woocommerce>form.woocommerce-cart-form{grid-area:form;margin:0;min-width:0} .woocommerce-cart .woocommerce>.cart-collaterals{grid-area:totals;width:auto!important;float:none!important;margin:0!important;position:sticky;top:108px} } /* item-kaarten ruimer en vol breedte */ .woocommerce-cart table.cart{width:100%} .woocommerce-cart table.cart tr.cart_item{grid-template-columns:92px minmax(0,1fr) auto!important;column-gap:20px!important;padding:20px 22px!important} .woocommerce-cart td.product-thumbnail img{width:92px!important;height:92px!important} .woocommerce-cart td.product-name{font-size:1.1rem!important} .woocommerce-cart td.product-subtotal{font-size:1.25rem!important} .woocommerce-cart .cart_totals{padding:26px!important} .woocommerce-cart .cart_totals h2{font-size:1.25rem!important} /* ======================= CHECKOUT ======================= */ @media(min-width:981px){ .woocommerce-checkout form.checkout{ display:grid!important; grid-template-columns:minmax(0,1fr) 384px; column-gap:40px;row-gap:0; align-items:start; grid-template-areas:none!important; } /* zwervende/verborgen kinderen (lege div, wc-order-attribution) onderaan, vol breedte */ .woocommerce-checkout form.checkout>*{grid-column:1 / -1;grid-row:auto} .woocommerce-checkout form.checkout>#customer_details{grid-column:1!important;grid-row:1 / span 2!important;min-width:0} .woocommerce-checkout form.checkout>#order_review_heading{grid-column:2!important;grid-row:1!important;margin:0 0 14px!important} .woocommerce-checkout form.checkout>#order_review{grid-column:2!important;grid-row:2!important;position:sticky;top:108px} } @media(max-width:980px){ .woocommerce-checkout form.checkout{display:block!important} .woocommerce-checkout #order_review,.woocommerce-checkout .woocommerce-checkout-review-order{position:static!important} .woocommerce-cart .woocommerce{display:block!important} .woocommerce-cart .cart-collaterals{position:static!important;width:100%!important;margin-top:20px!important} } /* ---- v7.3.1: WooCommerce-pagina's vol breedte (geen prose-max-width) ---- */ .wc-page{max-width:none;width:100%} .page-hero--wc{padding-block:clamp(20px,3vw,32px) 0} .page-hero--wc .eyebrow{display:none} .page-hero--wc h1{font-size:clamp(1.7rem,1.4rem+1.4vw,2.4rem)} /* ============================================================ v7.4 — CHECKOUT herschreven: 2-koloms, compact, sticky overzicht, dropdown-fix ============================================================ */ /* reset alle eerdere form-grids */ .woocommerce-checkout form.checkout{display:block!important;grid-template-columns:none!important;grid-template-areas:none!important;gap:0!important} .woocommerce-checkout .woocommerce-checkout-review-order{position:static!important;top:auto!important} .page-hero--wc{padding-block:16px 0} .page-hero--wc h1{font-size:clamp(1.5rem,1.3rem+1vw,2rem)} /* express-betalen bovenaan */ .lico-co-express{max-width:1180px;margin:0 auto 14px} .lico-co-express .wcpay-express-checkout-wrapper{margin:0 auto;max-width:520px} /* grid */ .lico-co-grid{max-width:1180px;margin-inline:auto;display:flex;flex-direction:column;gap:16px} @media(min-width:1024px){ .lico-co-grid{display:grid;grid-template-columns:minmax(0,1fr) 400px;gap:32px;align-items:start} .lico-co-main{grid-column:1} .lico-co-side{grid-column:2;position:sticky;top:24px} .lico-co-mini{display:none!important} } /* velden-kaart */ .lico-co-main #customer_details{display:block;width:auto} .lico-co-main .col-1,.lico-co-main .col-2{width:auto!important;float:none!important;background:#fff;border:1px solid var(--line);border-radius:16px;padding:22px} .lico-co-main .col-2:empty{display:none} .lico-co-main .woocommerce-billing-fields>h3,.lico-co-main #customer_details h3{font-size:1.1rem;font-weight:700;letter-spacing:-.02em;margin:0 0 16px} .lico-co-main .woocommerce-billing-fields__field-wrapper,.lico-co-main .woocommerce-shipping-fields__field-wrapper{display:grid;grid-template-columns:1fr 1fr;gap:12px 14px} .lico-co-main .form-row{grid-column:1 / -1;margin:0;padding:0} .lico-co-main .form-row-first{grid-column:1} .lico-co-main .form-row-last{grid-column:2} @media(max-width:480px){.lico-co-main .woocommerce-billing-fields__field-wrapper{grid-template-columns:1fr}.lico-co-main .form-row-first,.lico-co-main .form-row-last{grid-column:1 / -1}} .lico-co-main .form-row label{display:block;font-weight:500;font-size:.84rem;margin:0 0 5px;color:var(--ink)} .lico-co-main .form-row .required{color:var(--accent);border:0} /* consistente veldhoogte h-11 (44px) + focus */ .woocommerce-checkout .input-text, .woocommerce-checkout select, .woocommerce-checkout .select2-container--default .select2-selection--single{ height:44px!important;min-height:44px!important;border:1px solid var(--line-2)!important;border-radius:11px!important;background:#fff!important;font-size:.95rem;box-shadow:none!important } .woocommerce-checkout .input-text{width:100%;padding:0 14px!important} .woocommerce-checkout textarea.input-text{height:auto!important;min-height:80px!important;padding:10px 14px!important} .woocommerce-checkout .input-text:focus,.woocommerce-checkout select:focus{border-color:var(--accent)!important;box-shadow:0 0 0 3px var(--accent-soft)!important;outline:0} /* DROPDOWN-FIX: select2 als nette field, tekst netjes in het veld */ .woocommerce-checkout .select2-container{width:100%!important;display:block} .woocommerce-checkout .select2-container--default .select2-selection--single{display:flex;align-items:center;padding:0!important} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{height:42px!important;line-height:42px!important;padding:0 34px 0 14px!important;color:var(--ink)!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%} .woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:42px!important;right:10px!important;top:0!important} .select2-dropdown{border:1px solid var(--line-2)!important;border-radius:11px;box-shadow:var(--sh);overflow:hidden;z-index:60} .select2-container--open .select2-dropdown{z-index:60} .select2-results__option--highlighted[aria-selected]{background:var(--accent)!important} /* native select pijl als fallback */ .woocommerce-checkout select{appearance:none;-webkit-appearance:none;padding:0 34px 0 14px!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232C2D2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important} /* ----- rechterkolom: besteloverzicht + betaling in één kaart ----- */ .lico-co-side>#order_review_heading{font-size:1.15rem;font-weight:700;letter-spacing:-.02em;margin:0 0 12px} .lico-co-side #order_review{background:#fff;border:1px solid var(--line);border-radius:16px;padding:20px;box-shadow:var(--sh-sm)} .lico-co-side .shop_table{border:0!important;margin:0;background:transparent;width:100%} .lico-co-side .shop_table thead{display:none} .lico-co-side .shop_table th,.lico-co-side .shop_table td{border:0!important;padding:7px 0!important;font-size:.92rem} .lico-co-side .cart_item td{border-top:1px solid var(--line)!important} .lico-co-side .cart_item .product-name{color:var(--ink);font-weight:500;line-height:1.35} .lico-co-side .product-total,.lico-co-side .cart-subtotal td,.lico-co-side .order-total td{text-align:right;white-space:nowrap} .lico-co-side tfoot .order-total th,.lico-co-side tfoot .order-total td{padding-top:12px!important;border-top:1px solid var(--line)!important;font-size:1.15rem;font-weight:800} .lico-co-side tr.cart-savings th,.lico-co-side tr.cart-savings td{color:var(--ok)!important;font-weight:700!important} /* coupon in de kaart */ .lico-co-coupon{display:flex;gap:8px;margin:12px 0 4px} .lico-co-coupon .input-text{flex:1;min-width:0} .lico-co-coupon__btn{flex:0 0 auto;height:44px;padding:0 16px;border:1px solid var(--line-2);background:#fff;border-radius:11px;font-weight:600;font-size:.9rem;color:var(--ink);cursor:pointer} .lico-co-coupon__btn:hover{background:var(--bg-2)} /* standaard WC-couponformulier verbergen (proxy gebruikt het) */ .woocommerce-form-coupon-toggle{display:none!important} form.checkout_coupon{position:absolute!important;left:-9999px!important;width:1px;height:1px;overflow:hidden} /* betaling compact binnen de kaart */ .lico-co-side #payment{background:transparent!important;border:0!important;border-top:1px solid var(--line)!important;border-radius:0;margin-top:14px;padding-top:14px} .lico-co-side #payment ul.payment_methods{border:0!important;margin:0 0 6px!important;padding:0!important} .lico-co-side #payment ul.payment_methods li{border:1px solid var(--line);border-radius:11px;padding:12px 14px;margin:0 0 8px;background:#fff;list-style:none} .lico-co-side #payment div.payment_box{background:var(--bg-2);border-radius:10px;margin-top:8px;font-size:.86rem;padding:12px} .lico-co-side #payment div.payment_box::before{display:none} .lico-co-side #place_order{width:100%;background:var(--accent)!important;border-color:var(--accent)!important;color:#fff!important;font-size:1.05rem;padding:.95em 1.4em;border-radius:var(--r-pill)!important;margin-top:6px;box-shadow:0 14px 30px -14px rgba(63,114,229,.6)} .lico-co-side #place_order:hover{background:var(--accent-press)!important} .co-secure{margin:12px 0 0;font-size:.82rem} .co-reassure{margin-top:12px;padding-top:12px;gap:7px} .checkout-trust{margin-top:14px;padding-top:14px} /* ----- mobiel inklapbaar overzicht ----- */ .lico-co-mini{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden} .lico-co-minitoggle{width:100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:15px 18px;background:#fff;border:0;cursor:pointer;font-weight:600;color:var(--ink);font-size:.98rem} .lico-co-minitoggle>span{display:inline-flex;align-items:center;gap:9px} .lico-co-minitoggle .ic{color:var(--accent)} .lico-co-minitoggle em{display:inline-flex;align-items:center;gap:7px;font-style:normal;font-weight:800;font-size:1.05rem} .lico-co-minitoggle em .ic{color:var(--muted-2);transition:transform .25s} .lico-co-mini.is-open .lico-co-minitoggle em .ic{transform:rotate(180deg)} .lico-co-minibody{display:none;padding:0 18px 16px;border-top:1px solid var(--line)} .lico-co-mini.is-open .lico-co-minibody{display:block} .lico-mini-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line)} .lico-mini-img{position:relative;flex:0 0 auto} .lico-mini-img img{width:46px;height:46px;object-fit:contain;border:1px solid var(--line);border-radius:9px;background:#fff;padding:4px} .lico-mini-img i{position:absolute;top:-7px;right:-7px;min-width:19px;height:19px;padding:0 5px;background:var(--ink);color:#fff;border-radius:999px;font-size:.7rem;font-weight:700;font-style:normal;display:grid;place-items:center} .lico-mini-name{flex:1;font-size:.9rem;line-height:1.3} .lico-mini-price{font-weight:700;white-space:nowrap} .lico-mini-tot{display:flex;align-items:center;justify-content:space-between;padding-top:13px;font-size:1.05rem} .lico-mini-tot strong{font-weight:800} /* ============================================================ v7.5 — checkout refinements (scoped) + account-flyout + fixes ============================================================ */ /* ---- D) sitebreed: geen horizontale scroll ---- */ body.woocommerce-checkout,body.woocommerce-account{overflow-x:hidden} /* ---- A) checkout, alles onder body.woocommerce-checkout ---- */ body.woocommerce-checkout .page-hero--wc h1,body.woocommerce-checkout h1.entry-title{font-size:clamp(28px,4vw,40px);margin-bottom:8px} /* velden 48px + radius 14px (overschrijft 44px uit v7.4) */ body.woocommerce-checkout .input-text, body.woocommerce-checkout select, body.woocommerce-checkout .select2-container--default .select2-selection--single, body.woocommerce-checkout #lico_coupon, body.woocommerce-checkout .lico-co-coupon__btn{height:48px!important;min-height:48px!important;border-radius:14px!important} body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered{height:46px!important;line-height:46px!important;padding:0 36px 0 14px!important} body.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow{height:46px!important;right:12px!important} body.woocommerce-checkout select{background-position:right 14px center!important} /* besteloverzicht compacter */ body.woocommerce-checkout #order_review .shop_table th, body.woocommerce-checkout #order_review .shop_table td{padding:8px 0!important;line-height:1.4} body.woocommerce-checkout #order_review .cart_item .product-name{line-height:1.4} body.woocommerce-checkout .lico-co-side #payment ul.payment_methods li{padding:11px 14px;margin-bottom:8px} /* KNOP-OVERLAP FIX: place order in normale flow, geen overlap met USP's */ body.woocommerce-checkout .form-row.place-order, body.woocommerce-checkout #payment .place-order{display:block;position:static;margin:0;padding:0;float:none} body.woocommerce-checkout #place_order{display:block!important;width:100%!important;margin:16px 0 14px!important;min-height:54px;line-height:1.2;white-space:normal;position:static!important;float:none!important;transform:none!important} /* USP's horizontaal (nooit één-woord-per-regel) */ body.woocommerce-checkout ul.co-reassure{display:flex!important;flex-wrap:wrap;gap:8px 18px;padding:14px 0 0;margin:14px 0 0;list-style:none;border-top:1px solid #E5E7EB} body.woocommerce-checkout ul.co-reassure li{display:inline-flex!important;align-items:center;gap:6px;white-space:nowrap;font-size:13px;color:#64748B} body.woocommerce-checkout ul.co-reassure li .ic{color:var(--ok);width:15px;height:15px;flex:0 0 auto} /* trust-badges horizontaal */ body.woocommerce-checkout .checkout-trust{margin-top:14px;padding-top:14px;border-top:1px solid #E5E7EB} body.woocommerce-checkout .checkout-trust ul{display:flex!important;flex-wrap:wrap;gap:9px 16px;margin:0 0 12px;list-style:none} body.woocommerce-checkout .checkout-trust li{display:inline-flex;align-items:center;gap:7px;white-space:nowrap;font-size:13px} body.woocommerce-checkout .checkout-trust .pdp-pay,body.woocommerce-checkout .checkout-trust .paylogos{display:flex;flex-wrap:wrap;align-items:center;gap:6px} body.woocommerce-checkout .checkout-trust .paylogo,body.woocommerce-checkout .pdp-pay .paylogo{height:30px;display:inline-flex;align-items:center} body.woocommerce-checkout .checkout-trust .paylogo img,body.woocommerce-checkout .pdp-pay img{height:22px;width:auto} @media(max-width:480px){body.woocommerce-checkout .checkout-trust ul{flex-direction:column;gap:8px}} /* express-betalen even hoog + compacte divider */ body.woocommerce-checkout .lico-co-express .wcpay-express-checkout-element, body.woocommerce-checkout .lico-co-express button.gpay-button, body.woocommerce-checkout .lico-co-express .apple-pay-button{min-height:48px!important} body.woocommerce-checkout .lico-co-express .wcpay-express-checkout__divider, body.woocommerce-checkout .wc-block-components-checkout-step{margin:14px 0} /* coupon-rij netjes op één regel */ body.woocommerce-checkout .lico-co-coupon{display:flex;gap:8px;align-items:stretch} body.woocommerce-checkout .lico-co-coupon #lico_coupon{flex:1;min-width:0} body.woocommerce-checkout .lico-co-coupon__btn{flex:0 0 auto;padding:0 16px} /* ---- C) account-flyout in header ---- */ .acc-dd{position:relative} .acc-panel{position:absolute;top:calc(100% + 12px);right:0;width:320px;max-width:calc(100vw - 32px);background:#fff;border:1px solid #E5E7EB;border-radius:14px;box-shadow:0 18px 50px -18px rgba(15,23,42,.28);padding:18px;z-index:130;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s ease,transform .2s ease,visibility .2s} .acc-dd.open .acc-panel{opacity:1;visibility:visible;transform:none} .acc-panel__head{margin-bottom:14px} .acc-panel__head strong{display:block;font-size:1.05rem;font-weight:700;letter-spacing:-.01em;color:#0F172A} .acc-panel__head span{font-size:.84rem;color:#64748B} .acc-form .acc-fld{margin:0 0 12px} .acc-form label{display:block;font-size:.84rem;font-weight:500;margin-bottom:6px;color:#0F172A} .acc-form input[type=text],.acc-form input[type=password]{width:100%;height:48px;border:1px solid #E5E7EB;border-radius:14px;padding:0 14px;font-size:.95rem;background:#fff;font-family:inherit;color:#0F172A} .acc-form input[type=text]:focus,.acc-form input[type=password]:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);outline:0} .acc-form__row{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:2px 0 14px;font-size:.82rem} .acc-remember{display:inline-flex;align-items:center;gap:7px;color:#64748B;font-weight:500;cursor:pointer} .acc-remember input{width:16px;height:16px;accent-color:var(--accent)} .acc-form__row>a{color:var(--accent);font-weight:600} .acc-form__btn{width:100%;justify-content:center;height:48px;border-radius:12px} .acc-form__reg{margin:13px 0 0;font-size:.85rem;color:#64748B;text-align:center} .acc-form__reg a{color:var(--accent);font-weight:600} .acc-menu{display:grid;gap:2px} .acc-menu a{display:flex;align-items:center;gap:10px;padding:10px;border-radius:10px;color:#0F172A;font-weight:500;font-size:.93rem} .acc-menu a:hover{background:#F5F6F8} .acc-menu a .ic{color:#64748B;width:18px;height:18px} .acc-menu__out{margin-top:6px;padding-top:12px!important;border-top:1px solid #E5E7EB;border-radius:0;color:var(--warm)!important} @media(max-width:560px){.acc-panel{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;border-radius:18px 18px 0 0;padding:20px}} /* ---- C-fallback) /my-account/ pagina strak in een kaart (alleen uitgelogd login-scherm) ---- */ body.woocommerce-account:not(.logged-in) .woocommerce{max-width:520px;margin-inline:auto} body.woocommerce-account:not(.logged-in) .u-columns,body.woocommerce-account:not(.logged-in) .col2-set{grid-template-columns:1fr!important;display:block!important} body.woocommerce-account form.login,body.woocommerce-account form.register{background:#fff;border:1px solid #E5E7EB;border-radius:14px;padding:26px;box-shadow:0 1px 2px rgba(0,0,0,.05)} body.woocommerce-account form.login .input-text,body.woocommerce-account form.register .input-text{height:48px;border-radius:14px;border:1px solid #E5E7EB;padding:0 14px} body.woocommerce-account form.login label,body.woocommerce-account form.register label{font-weight:500;font-size:.86rem} body.woocommerce-account form.login .button,body.woocommerce-account form.register .button{width:100%;justify-content:center} body.woocommerce-account .woocommerce-form-login__rememberme{display:inline-flex;align-items:center;gap:7px} /* ============================================================ v7.6 — VOLLEDIGE MOBIELE OPTIMALISATIE ============================================================ */ /* 1) Zoekbalk: input + ronde knop op één flex-rij (knop hing los onder het veld) */ @media (max-width:880px){ .searchbar.msearch{display:flex!important;padding:5px 5px 5px 15px;margin:2px 0 10px} .searchbar.msearch input{height:38px} .searchbar button{width:42px;height:42px} } /* 2) Categoriestrip verbergen op mobiel — alles loopt via het burgermenu */ @media (max-width:900px){ .subnav{display:none!important} } /* 3) USP-topbalk: roterende ticker (alle 4 USP's, niets afgekapt) */ @media (max-width:720px){ .usp-top .u2,.usp-top .u3{display:inline-flex} .usp-top .container{position:relative;height:38px;min-height:38px;flex-wrap:nowrap;gap:0;justify-content:center;overflow:hidden} .usp-top .container>span{position:absolute;inset:0;display:inline-flex;align-items:center;justify-content:center;opacity:0;transition:opacity .45s ease;pointer-events:none;white-space:nowrap} .usp-top .container>span.usp-top__on{opacity:1;pointer-events:auto} } /* 4) Mobiele header compacter + account-icoon zichtbaar; slanke sticky bij scrollen */ @media (max-width:880px){ .acc-dd{display:block} .account-tool{display:inline-grid} .header-main{height:60px} body.is-stuck .site-header .msearch{display:none} } /* 5) Anker-offset zodat koppen niet onder de sticky header verdwijnen */ .sec7[id],#collecties,#autodesk,#waarom,#blog{scroll-margin-top:84px} /* 6) Collectie-/deal-rijen als swipe-carrousel op mobiel (grid-pattern = klipt netjes, geen page-overflow) */ @media (max-width:768px){ .ad-showcase,.blog-grid{ display:grid!important;grid-auto-flow:column;grid-template-columns:none!important;grid-auto-columns:78%; overflow-x:auto;gap:14px;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; scroll-padding-inline:2px;padding-bottom:10px;scrollbar-width:none; min-width:0;width:100%;max-width:100%;contain:layout paint; } .blog-grid{grid-auto-columns:82%} .ad-showcase::-webkit-scrollbar,.blog-grid::-webkit-scrollbar{display:none} .ad-showcase>*,.blog-grid>*{scroll-snap-align:start;min-width:0} .ad-showcase .ad-promo{grid-column:auto!important;grid-row:auto!important;min-height:auto;flex-direction:column;align-items:flex-start} } /* 7) Productkaarten compacter op mobiel */ @media (max-width:768px){ .shop-card__title{font-size:clamp(15px,3.6vw,18px);line-height:1.3} .shop-card__art{aspect-ratio:5/4} .shop-card__add{width:100%;min-height:44px} } /* 8) Grote koppen clampen + vangnet tegen horizontale scroll (clip breekt sticky niet) */ @media (max-width:768px){ .sec7__head h2,.legal7__copy h2{font-size:clamp(20px,5.4vw,26px)} .hero7__title{font-size:clamp(30px,8vw,40px)} } /* vangnet horizontale scroll: body clippen (breekt position:sticky niet) + off-canvas drawer clippen */ body{overflow-x:clip} .mobile-nav:not(.open){overflow-x:hidden} /* 9) Tap-targets en footer-kolommen leesbaar op smal scherm */ @media (max-width:480px){ .footer7__main{grid-template-columns:1fr 1fr} .footer7__col a,.acc-menu a,.nav-menu a{min-height:44px;display:flex;align-items:center} } /* ============================================================ v7.7 — WINKELWAGEN COMPACT (alles in één blik, geen dubbele prijs) ============================================================ */ /* kop + stappen + banner compacter */ body.woocommerce-cart .page-hero h1{font-size:clamp(24px,3vw,34px)!important;margin:0 0 10px!important} body.woocommerce-cart .co-steps{margin:6px 0 16px!important;gap:8px} body.woocommerce-cart .co-step__n{width:26px;height:26px;font-size:.78rem} body.woocommerce-cart .co-step__l{font-size:14px} body.woocommerce-cart .cart-promo{padding:10px 14px!important;font-size:14px!important;margin-bottom:14px!important;line-height:1.35} /* compacter 2-koloms raster */ @media(min-width:981px){ body.woocommerce-cart .woocommerce{grid-template-columns:minmax(0,1fr) 360px!important;column-gap:28px!important} } /* CART-REGEL compact (~84px) */ body.woocommerce-cart table.cart tbody{gap:10px!important} body.woocommerce-cart table.cart tr.cart_item{ grid-template-columns:64px minmax(0,1fr) auto!important; grid-template-areas:"thumb name sub" "thumb qty sub"!important; column-gap:14px!important;row-gap:4px!important; padding:12px 14px!important;box-shadow:none!important;border:1px solid #E5E7EB!important;border-radius:14px!important; } body.woocommerce-cart td.product-thumbnail img{width:64px!important;height:64px!important;object-fit:contain;padding:4px!important} body.woocommerce-cart td.product-name{font-size:16px!important;font-weight:600;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;align-self:end;padding-right:8px} body.woocommerce-cart td.product-price{display:none!important} /* dubbele prijs weg */ body.woocommerce-cart td.product-subtotal{font-size:17px!important;font-weight:700;align-self:center} body.woocommerce-cart td.product-quantity{align-self:start} /* qty-stepper compact 40px */ body.woocommerce-cart .quantity{border:1px solid #E5E7EB;border-radius:999px} body.woocommerce-cart .quantity .qty-btn{width:36px!important;height:38px!important;font-size:1.15rem} body.woocommerce-cart .quantity input.qty{height:38px!important;min-height:38px!important;width:38px!important} /* verwijder-knop klein, grijs -> rood */ body.woocommerce-cart td.product-remove{top:8px!important;right:10px!important} body.woocommerce-cart a.remove{width:22px!important;height:22px!important;background:transparent!important;color:#94A3B8!important;font-size:1.05rem} body.woocommerce-cart a.remove:hover{background:var(--warm)!important;color:#fff!important} /* coupon-/update-rij compact */ body.woocommerce-cart td.actions{padding-top:14px!important} body.woocommerce-cart td.actions .input-text{height:44px!important} /* TOTAAL-BLOK compact */ body.woocommerce-cart .cart_totals{padding:18px!important;box-shadow:0 1px 2px rgba(0,0,0,.05)!important} body.woocommerce-cart .cart_totals h2{font-size:18px!important;margin-bottom:10px!important} body.woocommerce-cart .cart_totals table th,body.woocommerce-cart .cart_totals table td{font-size:15px!important;padding:6px 0!important} body.woocommerce-cart .cart_totals tr.cart-savings th{white-space:nowrap} body.woocommerce-cart .cart_totals tr.order-total th,body.woocommerce-cart .cart_totals tr.order-total td{font-size:17px!important;padding-top:12px!important} body.woocommerce-cart .cart-tp{margin-bottom:10px!important;font-size:13px} /* knoppen compact */ body.woocommerce-cart .wc-proceed-to-checkout a.checkout-button{height:52px;min-height:52px;display:flex;align-items:center;justify-content:center;font-size:1rem;padding:0 1.2em;margin-top:4px} body.woocommerce-cart .wcpay-express-checkout-wrapper{margin-top:10px} body.woocommerce-cart .wcpay-express-checkout-element{min-height:48px!important} /* trust + betaallogo's compacte horizontale rij */ body.woocommerce-cart .cart-trust{display:flex!important;flex-wrap:wrap;gap:8px 14px;margin-top:14px!important;padding-top:12px!important} body.woocommerce-cart .cart-trust li{font-size:13px!important;white-space:nowrap} body.woocommerce-cart .cart-pay{margin-top:12px!important} body.woocommerce-cart .cart-pay>span{font-size:12px} body.woocommerce-cart .cart-pay .paylogo img{height:20px!important;width:auto} /* MOBIEL: kleinere thumb, totaal onder de regels, sticky afrekenbalk (mbar bestaat al) */ @media(max-width:980px){ body.woocommerce-cart table.cart tr.cart_item{grid-template-columns:56px minmax(0,1fr) auto!important} body.woocommerce-cart td.product-thumbnail img{width:56px!important;height:56px!important} body.woocommerce-cart td.product-name{font-size:15px!important} body.woocommerce-cart .site-main{padding-bottom:84px} } /* v7.7.1 — winkelwagen: responsive data-title labels verbergen (kaart-layout) */ body.woocommerce-cart table.cart td::before{display:none!important} /* ============================================================ v7.8 — CHECKOUT GESTRIPT (minimale header, USP-strip boven, geen overstekende tekst) ============================================================ */ /* G1 — minimale checkout-header */ .site-header--checkout{background:#fff;border-bottom:1px solid #E5E7EB;position:sticky;top:0;z-index:60} .header-main--checkout{display:flex;align-items:center;justify-content:space-between;height:62px} .co-back{display:inline-flex;align-items:center;gap:7px;font-weight:600;font-size:.92rem;color:#64748B;white-space:nowrap} .co-back:hover{color:var(--accent)} .co-back .ic{transform:rotate(180deg)} @media(max-width:560px){.header-main--checkout{height:54px}.co-back{font-size:.85rem}} /* G2 — compacte horizontale USP-strip bovenaan */ body.woocommerce-checkout .co-usps{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 18px;max-width:1180px;margin:0 auto 18px;padding:11px 16px;background:#F8FAFC;border:1px solid #E5E7EB;border-radius:12px} body.woocommerce-checkout .co-usps__item{display:inline-flex;align-items:center;gap:7px;font-size:13px;color:#64748B;white-space:nowrap} body.woocommerce-checkout .co-usps__item .ic{color:var(--ok);flex:0 0 auto;width:16px;height:16px} @media(max-width:560px){body.woocommerce-checkout .co-usps{justify-content:flex-start;gap:8px 14px;padding:10px 12px}} /* G3 — minimale, CONTAINED betaalrij onderaan (niets buiten de kaart) */ body.woocommerce-checkout .checkout-pay{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px;padding-top:12px;border-top:1px solid #E5E7EB;max-width:100%;overflow:hidden} body.woocommerce-checkout .checkout-pay>span{flex:1 0 100%;font-size:12px;color:#94A3B8;margin-bottom:2px} body.woocommerce-checkout .checkout-pay .paylogo{height:24px;background:#fff} body.woocommerce-checkout .checkout-pay .paylogo img{height:20px;width:auto} /* dode resten van de oude verticale lijsten hard uitschakelen */ body.woocommerce-checkout .co-reassure,body.woocommerce-checkout .checkout-trust{display:none!important} /* G4 — compacter algemeen */ body.woocommerce-checkout .page-hero h1{font-size:clamp(26px,3vw,34px)!important;margin:0 0 8px!important} body.woocommerce-checkout .co-steps{margin:8px 0 16px!important;gap:8px} body.woocommerce-checkout .co-step__n{width:26px;height:26px;font-size:.78rem} body.woocommerce-checkout .co-step__l{font-size:14px} body.woocommerce-checkout .lico-co-express{margin-bottom:12px} body.woocommerce-checkout .lico-co-main .woocommerce-billing-fields__field-wrapper, body.woocommerce-checkout .lico-co-main .woocommerce-shipping-fields__field-wrapper{gap:12px 14px} body.woocommerce-checkout #payment div.payment_box{padding:12px} body.woocommerce-checkout #payment ul.payment_methods li{padding:12px 14px} body.woocommerce-checkout .co-secure{margin:10px 0 0;font-size:.8rem} /* ============================================================ v8.0 — taal- & valutaschakelaar (rechtsboven) ============================================================ */ .header-tools .lang-switch,.header-tools .cur-switch{position:relative} .lang-switch__btn,.cur-switch__btn{display:inline-flex;align-items:center;gap:4px;height:38px;padding:0 10px;border:1px solid #E5E7EB;border-radius:10px;background:#fff;font-weight:600;font-size:.82rem;color:#0F172A;cursor:pointer;line-height:1} .lang-switch__btn .ic,.cur-switch__btn .ic{width:13px;height:13px;color:#64748B} .lang-switch__menu,.cur-switch__menu{position:absolute;top:calc(100% + 6px);right:0;min-width:150px;background:#fff;border:1px solid #E5E7EB;border-radius:12px;box-shadow:0 18px 40px -18px rgba(15,23,42,.28);padding:6px;z-index:120;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .18s,transform .18s,visibility .18s} .lang-switch.open .lang-switch__menu,.cur-switch.open .cur-switch__menu{opacity:1;visibility:visible;transform:none} .lang-switch__item,.cur-switch__item{display:block;padding:8px 10px;border-radius:8px;font-size:.88rem;color:#0F172A;font-weight:500} .lang-switch__item:hover,.cur-switch__item:hover{background:#F5F6F8} .lang-switch__item.is-active,.cur-switch__item.is-active{color:var(--accent);font-weight:700} @media(max-width:880px){.lang-switch__btn,.cur-switch__btn{height:36px;padding:0 8px;font-size:.78rem}} /* ============================================================ v8.3 — Mijn account (login/registratie, dashboard, orders, licentiecodes) ============================================================ */ /* ---- Login/registratie: gecentreerde gebrande kaart ---- */ .woocommerce-account .woocommerce-MyAccount-navigation{display:none}/* op login-scherm geen lege nav */ .woocommerce-account.logged-in .woocommerce-MyAccount-navigation{display:block} .lico-auth{display:flex;justify-content:center;padding:8px 0 36px} .lico-auth__card{width:100%;max-width:460px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh);padding:34px 32px} .lico-auth__brand{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);font-weight:700;font-size:1.2rem;color:var(--ink);margin-bottom:22px} .lico-auth__brand img{width:42px;height:42px;border-radius:10px} .lico-auth__tabs{display:flex;gap:4px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-pill);padding:4px;margin-bottom:24px} .lico-auth__tab{flex:1;border:0;background:transparent;cursor:pointer;font-family:var(--f-display);font-weight:600;font-size:.92rem;color:var(--muted);padding:.6em 1em;border-radius:var(--r-pill);transition:background .18s,color .18s} .lico-auth__tab.is-active{background:var(--surface);color:var(--ink);box-shadow:var(--sh-sm)} .lico-auth__pane{display:none} .lico-auth__pane.is-active{display:block;animation:licoFade .25s ease} @keyframes licoFade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}} .lico-auth__title{font-size:1.5rem;text-align:center;margin:0 0 6px} .lico-auth__sub{text-align:center;color:var(--muted);font-size:.92rem;margin:0 0 22px;line-height:1.5} .lico-auth__form .lico-fld{margin:0 0 16px} .lico-auth__form label{display:block;font-size:.85rem;font-weight:600;color:var(--ink);margin-bottom:7px} .lico-auth__form .input-text{width:100%;height:50px;border:1px solid var(--line-2);border-radius:var(--r-sm);padding:0 15px;font-family:var(--f-body);font-size:.96rem;color:var(--ink);background:#fff;transition:border-color .18s,box-shadow .18s} .lico-auth__form .input-text:focus{border-color:var(--accent);box-shadow:0 0 0 4px var(--accent-soft);outline:0} .lico-auth__row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:2px 0 20px;font-size:.86rem} .lico-remember{display:inline-flex;align-items:center;gap:8px;color:var(--muted);font-weight:500;cursor:pointer;margin:0} .lico-remember input{width:17px;height:17px;accent-color:var(--accent)} .lico-auth__lost{color:var(--accent);font-weight:600} .lico-auth__submit{width:100%;justify-content:center;height:52px;font-size:1rem;border-radius:var(--r-sm)} .lico-auth__note{background:var(--accent-soft);color:var(--ink-soft);border-radius:var(--r-sm);padding:12px 14px;font-size:.88rem;margin:0 0 16px} .lico-auth__switch{text-align:center;color:var(--muted);font-size:.9rem;margin:18px 0 0} .lico-auth__switch a{color:var(--accent);font-weight:600} .lico-auth__usps{display:flex;flex-direction:column;gap:11px;margin:26px 0 0;padding:20px 0 0;border-top:1px solid var(--line)} .lico-auth__usps li{display:flex;align-items:center;gap:11px;font-size:.9rem;font-weight:500;color:var(--ink-soft)} .lico-auth__usps li .ic{width:18px;height:18px;color:var(--ok);flex:0 0 auto} @media(max-width:520px){.lico-auth__card{padding:26px 20px;border-radius:var(--r)}} /* ---- Dashboard ---- */ .lico-dash__hero{display:flex;align-items:center;justify-content:space-between;gap:20px;background:linear-gradient(135deg,var(--ink) 0%,#1b2030 100%);color:#fff;border-radius:var(--r-lg);padding:28px 30px;margin-bottom:22px} .lico-dash__hi{color:#fff;font-size:1.5rem;margin:0 0 6px} .lico-dash__intro{color:rgba(255,255,255,.74);font-size:.94rem;margin:0;max-width:54ch;line-height:1.55} .lico-dash__cta{flex:0 0 auto;white-space:nowrap} .lico-dash__tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:14px} .lico-tile{display:flex;flex-direction:column;gap:5px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:20px;transition:border-color .18s,box-shadow .18s,transform .18s} .lico-tile:hover{border-color:var(--accent);box-shadow:var(--sh);transform:translateY(-2px)} .lico-tile__ic{width:44px;height:44px;border-radius:12px;background:var(--accent-soft);color:var(--accent);display:grid;place-items:center;margin-bottom:8px} .lico-tile strong{font-family:var(--f-display);font-size:1.05rem;color:var(--ink)} .lico-tile__sub{color:var(--muted);font-size:.86rem;line-height:1.45} @media(max-width:760px){.lico-dash__hero{flex-direction:column;align-items:flex-start}.lico-dash__tiles{grid-template-columns:1fr}} /* ---- Orders-lijst: actieknoppen incl. factuur ---- */ .woocommerce-account .woocommerce-orders-table{border:1px solid var(--line);border-radius:var(--r);border-collapse:separate;border-spacing:0;overflow:hidden;width:100%} .woocommerce-account .woocommerce-orders-table th{background:var(--bg);font-family:var(--f-display);font-weight:600;font-size:.82rem;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:13px 16px;text-align:left} .woocommerce-account .woocommerce-orders-table td{padding:14px 16px;border-top:1px solid var(--line);font-size:.92rem;vertical-align:middle} .woocommerce-account .woocommerce-orders-table .button,.woocommerce-account .woocommerce-orders-table .woocommerce-button{display:inline-flex;align-items:center;justify-content:center;margin:3px 4px 3px 0;padding:.5em 1em;border-radius:var(--r-pill);font-family:var(--f-display);font-weight:500;font-size:.84rem;border:1px solid var(--line-2);background:#fff;color:var(--ink)} .woocommerce-account .woocommerce-orders-table .button:hover{border-color:var(--ink)} .woocommerce-account .woocommerce-orders-table .button.licono-invoice{background:var(--accent);border-color:var(--accent);color:#fff} .woocommerce-account .woocommerce-orders-table .button.licono-invoice:hover{background:var(--accent-press);border-color:var(--accent-press)} .woocommerce-account .woocommerce-orders-table .button.view{background:var(--ink);border-color:var(--ink);color:#fff} /* ---- Orderdetail: factuurblok ---- */ .lico-order-invoice{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;background:var(--surface);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:var(--r);padding:16px 20px;margin:0 0 22px} .lico-order-invoice__lbl{font-family:var(--f-display);font-weight:600;color:var(--ink)} .lico-order-invoice__btn{border-radius:var(--r-sm)} .lico-order-invoice__pending{color:var(--muted);font-size:.9rem;font-style:italic} /* ---- Licentiecodes-paneel ---- */ .lico-keys{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:24px 0 0} .lico-keys__title{display:flex;align-items:center;gap:9px;font-size:1.2rem;margin:0 0 6px} .lico-keys__title .ic{color:var(--accent)} .lico-keys__intro{color:var(--muted);font-size:.88rem;margin:0 0 16px} .lico-keys__list{display:flex;flex-direction:column;gap:14px} .lico-keys__row{display:flex;flex-direction:column;gap:8px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-sm)} .lico-keys__prod{font-family:var(--f-display);font-weight:600;font-size:.95rem;color:var(--ink)} .lico-keys__code{display:flex;align-items:center;gap:10px;flex-wrap:wrap} .lico-keys__code code{flex:1;min-width:0;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.95rem;letter-spacing:.5px;color:var(--accent);background:var(--accent-soft);padding:9px 13px;border-radius:8px;word-break:break-all} .lico-keys__copy{flex:0 0 auto;border:1px solid var(--line-2);background:#fff;color:var(--ink);font-family:var(--f-display);font-weight:500;font-size:.82rem;padding:.5em 1em;border-radius:var(--r-pill);cursor:pointer;transition:border-color .18s,background .18s,color .18s} .lico-keys__copy:hover{border-color:var(--ink)} .lico-keys__copy.is-copied{background:var(--ok);border-color:var(--ok);color:#fff} @media(max-width:520px){.lico-keys{padding:18px 16px}} /* ---- Edit-account / adressen: kop binnen de kaart ---- */ .woocommerce-account .woocommerce-EditAccountForm fieldset{margin-top:18px;padding:18px;border:1px solid var(--line);border-radius:var(--r-sm)} .woocommerce-account .woocommerce-EditAccountForm legend{font-family:var(--f-display);font-weight:600;padding:0 8px;color:var(--ink)}