:root{
 --green:#0b3d2b;--green2:#164f39;--cream:#f8f4eb;--paper:#fffdf8;--sand:#e9dfcc;--panel:#f3ede1;--panel-2:#f6f1e7;
 --ink:#102b20;--muted:#5d685f;--line:rgba(16,43,32,.14);--radius:22px;
 --shell:min(1320px,calc(100vw - 56px));--shadow:0 14px 42px rgba(21,45,32,.09);
}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:var(--cream);color:var(--ink);font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;line-height:1.48}a{text-decoration:none;color:inherit}img{max-width:100%;display:block}button,input,textarea{font:inherit}.shell{width:var(--shell);margin:auto}.narrow{max-width:850px}.skip{position:fixed;top:-70px;left:12px;background:white;padding:12px;z-index:999}.skip:focus{top:12px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;letter-spacing:-.035em;margin:0}h1{font-size:clamp(3.5rem,6vw,6.7rem);line-height:.93}h2{font-size:clamp(2.3rem,4vw,4.4rem);line-height:1.0}h3{font-size:1.35rem;line-height:1.1}p{margin:0 0 1rem}.kicker{font-size:.72rem;letter-spacing:.22em;font-weight:850;color:#8b7045;margin-bottom:15px}.kicker.light{color:#e6d6ac}.lead{font-size:1.2rem;color:var(--muted)}
.button{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 22px;border-radius:999px;font-weight:800;border:1px solid transparent;gap:10px;transition:.25s}.button:hover{transform:translateY(-2px)}.button-green{background:var(--green);color:white;box-shadow:0 10px 25px rgba(11,61,43,.15)}.button-green-light{background:#0e6244;color:#fff}.button-outline{border-color:rgba(11,61,43,.35);background:rgba(255,255,255,.72)}.button-small{min-height:42px;padding-inline:17px;font-size:.86rem}.button-row{display:flex;gap:12px;flex-wrap:wrap;margin-top:28px}.inline-link{font-weight:800;text-decoration:underline;text-underline-offset:4px}
.site-header{height:86px;position:sticky;top:0;z-index:50;background:rgba(248,244,235,.92);backdrop-filter:blur(16px);border-bottom:1px solid rgba(16,43,32,.08)}.header-inner{height:100%;display:flex;align-items:center;gap:36px}.brand{display:flex;align-items:center;gap:10px;min-width:max-content}.brand-leaf{font-size:2rem;transform:rotate(-20deg);color:var(--green)}.brand>span:last-child{display:flex;flex-direction:column;line-height:1}.brand strong{font-family:Georgia,serif;font-size:2rem}.brand small{font-size:.53rem;letter-spacing:.21em;margin-top:4px}.custom-logo{max-height:56px;width:auto}.desktop-nav{margin-left:auto}.menu{display:flex;list-style:none;gap:28px;padding:0;margin:0;align-items:center}.menu a{font-size:.9rem;font-weight:700}.header-actions{display:flex;gap:10px;align-items:center}.header-button{min-height:44px}.icon-button{font-size:1.5rem}.menu-toggle{display:none;width:44px;height:44px;border:0;background:transparent}.menu-toggle span{height:2px;background:var(--ink);display:block;margin:6px}.mobile-nav{background:var(--cream);padding:18px 28px;border-bottom:1px solid var(--line)}.mobile-nav .menu{display:grid;gap:0}.mobile-nav a{padding:10px 0}.mobile-nav .button{width:100%;margin-top:14px}
.hero{height:650px;position:relative;overflow:hidden}.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center right}.hero:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(248,244,235,.98) 0%,rgba(248,244,235,.9) 34%,rgba(248,244,235,.24) 59%,rgba(248,244,235,0) 78%)}.hero-inner{position:relative;z-index:2;height:100%;display:flex;align-items:center}.hero-copy{max-width:600px}.hero-copy p{font-size:1.13rem;color:#415249;max-width:570px;margin-top:22px}
.usp-strip{background:var(--panel);border-block:1px solid var(--line)}.usp-grid{display:grid;grid-template-columns:repeat(4,1fr)}.usp-grid>div{padding:24px;display:flex;align-items:flex-start;gap:14px;border-right:1px solid var(--line)}.usp-grid>div:last-child{border-right:0}.usp-grid i{font-style:normal;font-size:2rem}.usp-grid span{display:flex;flex-direction:column}.usp-grid strong{font-size:.9rem}.usp-grid small{font-size:.76rem;color:var(--muted);margin-top:4px}
.section{padding:94px 0}.section-heading{margin-bottom:34px}.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:80px;align-items:end}.two-col>div:last-child{font-size:.96rem;color:#56635a}.two-col .inline-link{display:block;margin-top:14px;color:var(--ink);text-align:right}
.bread-grid,.cookie-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}.product-card{background:#fffdf9;border:1px solid var(--line);border-radius:16px;overflow:hidden;box-shadow:0 8px 24px rgba(16,43,32,.045)}.product-photo{display:block;aspect-ratio:1.45;background-size:cover;background-position:center;transition:.4s}.product-card:hover .product-photo{transform:scale(1.025)}.product-info{display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px}.product-info h3{font-family:inherit;letter-spacing:0;font-size:1rem}.product-info p{font-size:.8rem;color:var(--muted);margin:5px 0 0}.round-arrow{width:38px;height:38px;border:1px solid var(--ink);border-radius:50%;display:grid;place-items:center;flex:0 0 auto}
.cookie-section{padding-top:40px}.cookie-card{text-align:left;padding:0 8px 8px}.cookie-photo{display:block;aspect-ratio:1/1;background-size:cover;background-position:center;border-radius:18px;margin-bottom:14px;box-shadow:0 10px 25px rgba(35,37,25,.055)}.cookie-card h3{font-family:inherit;letter-spacing:0;font-size:1rem}.cookie-card p{font-size:.84rem;color:var(--muted);min-height:42px;margin:7px 0 13px}
.mini-usp{background:var(--panel);border-block:1px solid var(--line)}.mini-usp-grid{display:grid;grid-template-columns:repeat(4,1fr)}.mini-usp-grid span{padding:18px 22px;text-align:center;border-right:1px solid var(--line);font-size:.83rem}.mini-usp-grid span:last-child{border:0}
.life-section{background:#fbf8f1}.life-heading{align-items:center}.life-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}.life-card{height:370px;background-size:cover;background-position:center;border-radius:18px;position:relative;overflow:hidden}.life-card:after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(4,25,17,.86),rgba(4,25,17,0) 62%)}.life-card>div{position:absolute;z-index:2;left:20px;right:20px;bottom:18px;color:#fff}.life-card h3{color:#fff;font-family:Georgia,serif;font-size:1.45rem}.life-card p{font-size:.83rem;margin:7px 0 10px;color:#e4ebe6}.life-card a{font-size:.8rem;font-weight:800}
.teff-banner{min-height:500px;background-size:cover;background-position:center;position:relative;color:#fff}.overlay{position:absolute;inset:0;background:linear-gradient(90deg,rgba(4,29,19,.86),rgba(4,29,19,.22))}.teff-banner-inner{position:relative;z-index:2;min-height:500px;display:grid;grid-template-columns:1fr .8fr;gap:90px;align-items:center}.banner-copy{max-width:580px}.banner-copy h2{color:#fff}.banner-copy p{color:#e6eee9;margin:20px 0 26px}.teff-facts{justify-self:end;background:rgba(4,42,28,.86);backdrop-filter:blur(10px);padding:26px 30px;border-radius:18px;display:grid;gap:18px;min-width:360px}.teff-facts span{font-weight:750}
.why-section{background:var(--panel-2)}.why-grid{display:grid;grid-template-columns:.8fr 1fr .65fr;gap:40px;align-items:center}.why-grid p{color:var(--muted);margin:18px 0 24px}.why-image{height:300px;background-size:cover;background-position:center;border-radius:20px}.why-points{display:grid;gap:15px;font-weight:750;font-size:.88rem}
.cta-banner{position:relative;background-size:cover;background-position:center;min-height:390px;color:#fff}.overlay.strong{background:linear-gradient(90deg,rgba(4,20,14,.9),rgba(4,20,14,.2))}.cta-inner{position:relative;z-index:2;min-height:390px;display:flex;align-items:center}.cta-inner>div{max-width:590px}.cta-inner h2{color:#fff}.cta-inner p{margin:18px 0 24px;color:#e7ece9}
.footer{background:#062c1f;color:#fff;padding:58px 0 18px}.footer-grid{display:grid;grid-template-columns:1.6fr 1fr 1fr 1.2fr;gap:45px}.brand-light strong{color:white}.footer-brand p,.footer p{color:#b9cac1;font-size:.85rem;margin-top:18px}.socials{display:flex;gap:14px;margin-top:20px}.footer h3{font-family:inherit;color:#fff;font-size:.88rem;letter-spacing:0;margin-bottom:14px}.footer a{display:block;color:#c6d3cc;font-size:.82rem;margin:8px 0}.footer-form{display:flex;position:relative}.footer-form input{width:100%;min-height:44px;padding:0 48px 0 14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.2);border-radius:9px;color:#fff}.footer-form button{position:absolute;right:0;top:0;bottom:0;width:44px;border:0;background:#0d6042;color:#fff;border-radius:0 9px 9px 0}.footer-form small{display:none}.footer-form.done small{display:block;position:absolute;top:50px;color:#dbe8e0}.footer-bottom{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,.1);margin-top:42px;padding-top:18px;font-size:.74rem;color:#9eb2a7}.footer-bottom div{display:flex;gap:20px}.footer-bottom a{margin:0;font-size:.74rem}
.page-hero{padding:100px 0 70px;background:#efe5d5}.page-hero h1{max-width:900px}.page-hero p{font-size:1.15rem;color:var(--muted);max-width:700px;margin-top:15px}.archive-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.single-product{padding:80px 0}.single-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px}.single-photo{min-height:590px;background-size:cover;background-position:center;border-radius:26px}.single-copy{padding-top:35px}.single-copy h1{font-size:clamp(3rem,5vw,5rem)}.product-meta{display:grid;gap:10px;border-block:1px solid var(--line);padding:18px 0;margin:25px 0}.prose{font-size:1rem}.prose h2{font-size:2rem;margin-top:1.4em}.contact-grid{display:grid;grid-template-columns:.7fr 1.3fr;gap:70px}.contact-form{display:grid;gap:15px}.contact-form label{display:grid;gap:7px;font-weight:700}.contact-form input,.contact-form textarea{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}.contact-form .button{justify-self:start}
.reveal{opacity:0;transform:translateY(15px);transition:.65s ease}.reveal.visible{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
@media(max-width:980px){
 :root{--shell:min(100% - 28px,1320px)}
 .desktop-nav,.header-button{display:none}.menu-toggle{display:block}.site-header{height:74px}
 .hero{height:auto;min-height:660px}.hero-bg{background-position:68% center}.hero:after{background:linear-gradient(90deg,rgba(248,244,235,.97),rgba(248,244,235,.75) 55%,rgba(248,244,235,.08))}.hero-inner{min-height:660px}
 .usp-grid,.mini-usp-grid{grid-template-columns:1fr 1fr}.usp-grid>div:nth-child(2){border-right:0}.usp-grid>div:nth-child(-n+2){border-bottom:1px solid var(--line)}
 .two-col,.why-grid,.teff-banner-inner,.single-grid,.contact-grid{grid-template-columns:1fr;gap:28px}.two-col .inline-link{text-align:left}
 .bread-grid,.cookie-grid,.life-grid{grid-template-columns:1fr 1fr}.teff-facts{justify-self:start;min-width:0;width:100%}.footer-grid{grid-template-columns:1.5fr 1fr 1fr}.footer-grid>div:last-child{grid-column:2/4}
}
@media(max-width:640px){
 h1{font-size:3.25rem}.section{padding:70px 0}.hero{min-height:690px}.hero-inner{min-height:690px;align-items:flex-end;padding-bottom:55px}.hero-copy{background:rgba(248,244,235,.85);padding:22px;border-radius:18px;backdrop-filter:blur(7px)}.hero:after{background:linear-gradient(to top,rgba(248,244,235,.96),rgba(248,244,235,.2) 80%)}
 .usp-grid,.mini-usp-grid,.bread-grid,.cookie-grid,.life-grid,.archive-products{grid-template-columns:1fr}.usp-grid>div,.mini-usp-grid span{border-right:0;border-bottom:1px solid var(--line)}
 .life-card{height:360px}.teff-banner-inner{padding-block:60px}.footer-grid{grid-template-columns:1fr 1fr}.footer-brand{grid-column:1/-1}.footer-grid>div:last-child{grid-column:1/-1}.footer-bottom{flex-direction:column;gap:12px}.footer-bottom div{flex-wrap:wrap}.single-photo{min-height:400px}
}


/* V3.2 — stronger visual photo slots for breads and cookies */
.product-card{background:#fbf7ef;border:1px solid rgba(16,43,32,.12)}
.product-photo{aspect-ratio:1.32;border-bottom:1px solid rgba(16,43,32,.10);position:relative;background-color:#e9dfcf}
.cookie-card{background:#f8f2e7;border:1px solid rgba(16,43,32,.10);border-radius:18px;padding:10px 10px 14px}
.cookie-photo{aspect-ratio:1/1;background-color:#eadfce;position:relative;margin-bottom:14px;border:1px solid rgba(16,43,32,.08)}
.image-frame{box-shadow:inset 0 0 0 1px rgba(255,255,255,.25)}
.image-frame:before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,44,31,.08),transparent 35%);pointer-events:none}
.image-frame-label{position:absolute;left:12px;top:12px;padding:6px 9px;border-radius:999px;background:rgba(248,244,235,.86);backdrop-filter:blur(8px);font-size:.65rem;letter-spacing:.08em;font-weight:800;text-transform:uppercase;color:var(--green);opacity:0;transform:translateY(-4px);transition:.2s;z-index:2}
.product-card:hover .image-frame-label,.cookie-card:hover .image-frame-label{opacity:1;transform:none}
.cookie-grid{gap:22px}.bread-grid{gap:22px}
.product-info{background:#fbf7ef}.cookie-card h3{margin-top:2px}
@media(max-width:640px){.image-frame-label{opacity:1;transform:none;font-size:.6rem}}


/* V3.3 — duidelijke productfoto-vakken */
.product-photo,.cookie-photo{
  position:relative;
  border:1px solid rgba(16,43,32,.14);
  background-color:#eee4d4;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45);
}
.product-photo:before,.cookie-photo:before{
  content:"PRODUCTFOTO";
  position:absolute;left:12px;top:12px;z-index:2;
  background:rgba(248,244,235,.9);color:#496053;
  border:1px solid rgba(16,43,32,.14);border-radius:999px;
  padding:5px 8px;font-size:.58rem;letter-spacing:.13em;font-weight:800;
  opacity:0;transition:.2s;
}
.product-card:hover .product-photo:before,.cookie-card:hover .cookie-photo:before{opacity:1}
.archive-line{padding-top:84px}.archive-cookie-line{background:#f3ede1}.archive-line-head{margin-bottom:30px}.archive-line-head p{margin-top:10px;color:var(--muted)}
.products-page-hero{background:linear-gradient(135deg,#f6f0e6,#e9dfcc)}
@media(max-width:640px){.archive-line{padding-top:62px}}


/* V3.4 — complete subpages */
.subpage-hero{padding:92px 0;background:linear-gradient(135deg,#f7f1e7,#eadfcd);overflow:hidden}
.subpage-hero-grid{display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:center}
.subpage-hero h1{font-size:clamp(3.5rem,5.8vw,6rem);max-width:760px}
.subpage-hero p{font-size:1.1rem;color:var(--muted);max-width:650px;margin:20px 0}
.subhero-photo{height:500px;border-radius:28px;background-size:cover;background-position:center;box-shadow:var(--shadow)}
.products-collage{height:520px;position:relative}
.collage-card{position:absolute;background-size:cover;background-position:center;border-radius:26px;box-shadow:var(--shadow)}
.collage-card.bread{width:75%;height:72%;right:0;top:0}
.collage-card.cookie{width:48%;height:48%;left:0;bottom:0;border:9px solid var(--cream)}
.split-copy{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:start}
.split-copy p{font-size:1.05rem;color:var(--muted)}
.note-box{padding:18px 20px;background:var(--panel);border-left:3px solid var(--green);border-radius:10px;font-size:.92rem!important}
.line-section{border-top:1px solid var(--line)}
.cookie-detail-section{background:var(--panel-2)}
.subpage-cta{background:var(--green);color:#fff;padding:56px 0}
.subpage-cta h2{color:#fff;font-size:clamp(2rem,3vw,3.2rem)}
.subpage-cta p{color:#cbd9d1;margin-top:10px}
.subpage-cta-inner{display:flex;align-items:center;justify-content:space-between;gap:35px}
.teff-story-banner{position:relative;min-height:520px;background-size:cover;background-position:center;color:#fff;display:flex;align-items:center}
.story-copy-large{position:relative;z-index:2;max-width:680px}
.story-copy-large h2{color:#fff}
.story-copy-large p{font-size:1.08rem;color:#e7eee9;margin-top:18px}
.centered-heading{text-align:center;max-width:800px;margin:0 auto 38px}.centered-heading p{color:var(--muted);margin-top:14px}
.fact-card-grid,.pillar-grid,.timeline-grid,.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.fact-card-grid>div,.pillar-grid>div,.timeline-grid>div,.process-grid>div{padding:28px;background:#fffdf9;border:1px solid var(--line);border-radius:18px;min-height:210px}
.fact-card-grid span,.pillar-grid span{font-size:.75rem;font-weight:900;color:#8a7049}
.fact-card-grid h3,.pillar-grid h3,.timeline-grid h3,.process-grid h3{font-family:inherit;letter-spacing:0;font-size:1.08rem;margin:40px 0 10px}
.fact-card-grid p,.pillar-grid p,.timeline-grid p,.process-grid p{font-size:.88rem;color:var(--muted)}
.panel-section,.b2b-split{background:var(--panel)}
.two-panel{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.two-panel>div{padding:40px;background:#fffdf9;border-radius:22px;border:1px solid var(--line)}
.two-panel p{color:var(--muted);margin:17px 0}
.about-mark{height:480px;border-radius:28px;background:var(--green);color:#fff;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:40px}
.about-mark strong{font-family:Georgia,serif;font-size:7rem;line-height:.8}.about-mark span{font-size:1.1rem;letter-spacing:.32em;margin-top:20px}.about-mark small{margin-top:40px;letter-spacing:.11em;color:#cbd8d0}
.brand-pillars{background:#fff}.brand-quote{background:var(--green);color:white;padding:90px 0}.brand-quote blockquote{font-family:Georgia,serif;font-size:clamp(2.5rem,5vw,5rem);line-height:1.04;max-width:1100px;margin:0}
.timeline-grid b,.process-grid b{font-size:2.5rem;font-family:Georgia,serif;color:#bea982}
.business-card-grid-v34{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.business-card-grid-v34>div{padding:30px;background:#fffdf9;border:1px solid var(--line);border-radius:20px;min-height:220px}
.business-card-grid-v34 span{font-size:2rem}.business-card-grid-v34 h3{font-family:inherit;letter-spacing:0;font-size:1.1rem;margin:30px 0 10px}.business-card-grid-v34 p{font-size:.9rem;color:var(--muted)}
.business-process{background:#fff}
.contact-hero-card{height:410px;background:var(--green);color:white;border-radius:28px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;box-shadow:var(--shadow)}
.contact-hero-card>span{letter-spacing:.28em;font-size:.75rem}.contact-hero-card strong{font-family:Georgia,serif;font-size:3.5rem;line-height:1.05;margin:22px 0}.contact-hero-card small{color:#d2ddd6}
.contact-v34-grid{display:grid;grid-template-columns:.78fr 1.22fr;gap:70px}
.contact-sidebar{display:grid;gap:30px}.contact-sidebar h3{font-family:inherit;letter-spacing:0;font-size:1.15rem}.contact-sidebar p{color:var(--muted)}
.contact-small-card{background:var(--panel);padding:20px;border-radius:14px;display:grid;gap:6px}.contact-small-card span{font-size:.85rem;color:var(--muted)}
.contact-form-v34{grid-template-columns:1fr 1fr}.contact-form-v34 label:nth-of-type(3),.contact-form-v34 label:nth-of-type(4){grid-column:1/-1}.contact-form-v34 select{padding:14px;border:1px solid var(--line);border-radius:12px;background:#fff}.success-note{grid-column:1/-1;color:var(--green);font-weight:800}
.contact-bottom-strip{background:var(--panel);border-top:1px solid var(--line);padding:34px 0}.contact-bottom-grid{display:grid;grid-template-columns:repeat(3,1fr)}.contact-bottom-grid>div{padding:0 30px;border-right:1px solid var(--line);display:flex;flex-direction:column}.contact-bottom-grid>div:last-child{border:0}.contact-bottom-grid span{font-size:.82rem;color:var(--muted);margin-top:4px}

@media(max-width:980px){
 .subpage-hero-grid,.split-copy,.contact-v34-grid{grid-template-columns:1fr}
 .products-collage{max-width:700px;width:100%;margin:auto}
 .fact-card-grid,.pillar-grid,.timeline-grid,.process-grid{grid-template-columns:1fr 1fr}
 .business-card-grid-v34{grid-template-columns:1fr 1fr}
 .subpage-cta-inner{align-items:flex-start;flex-direction:column}
}
@media(max-width:640px){
 .subpage-hero{padding:65px 0}.subhero-photo,.products-collage,.about-mark,.contact-hero-card{height:360px}
 .about-mark strong{font-size:5rem}
 .fact-card-grid,.pillar-grid,.timeline-grid,.process-grid,.two-panel,.business-card-grid-v34,.contact-bottom-grid{grid-template-columns:1fr}
 .contact-form-v34{grid-template-columns:1fr}.contact-form-v34 label:nth-of-type(3),.contact-form-v34 label:nth-of-type(4){grid-column:auto}
 .contact-bottom-grid>div{border-right:0;border-bottom:1px solid var(--line);padding:18px 0}.contact-bottom-grid>div:last-child{border-bottom:0}
}


/* V3.7.2 — hero overlap fix */
.hero{
    height:auto;
    min-height:720px;
    overflow:hidden;
}
.hero-inner{
    min-height:720px;
    padding-top:58px;
    padding-bottom:72px;
}
.hero-copy{
    padding-bottom:10px;
}
.hero-copy .button-row{
    margin-bottom:0;
}
.usp-strip{
    position:relative;
    z-index:5;
    margin-top:0;
}
@media(max-width:980px){
    .hero{min-height:700px}
    .hero-inner{min-height:700px;padding-top:48px;padding-bottom:62px}
}
@media(max-width:640px){
    .hero{min-height:760px}
    .hero-inner{min-height:760px;padding-top:40px;padding-bottom:52px}
}


/* =========================================================
   V3.8 — refinement: warmer, more editorial, less template-like
   ========================================================= */
:root{
  --accent:#df762f;
  --accent-dark:#bd5b1f;
  --accent-soft:#f2d6bf;
  --accent-pale:#faeee4;
  --accent-ink:#54240d;
}

/* Buttons keep their normal state; hover becomes orange. */
.button,
.round-arrow,
.footer-form button{
  transition:background-color .2s ease,color .2s ease,border-color .2s ease,transform .2s ease,box-shadow .2s ease;
}
.button:hover,
.button:focus-visible{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
  box-shadow:0 10px 24px rgba(223,118,47,.22);
}
.round-arrow:hover,
.round-arrow:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}
.footer-form button:hover,
.footer-form button:focus-visible{
  background:var(--accent);
}
.inline-link:hover{color:var(--accent-dark)}

/* First USP row was removed from the homepage in V3.8. */
.usp-strip{display:none!important}

/* The second benefits strip is now an editorial orange brand band. */
.editorial-strip{
  background:var(--accent);
  border:0;
}
.editorial-strip .mini-usp-grid{
  background:transparent;
}
.editorial-strip .mini-usp-grid span{
  min-height:72px;
  padding:17px 24px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  color:#fff;
  border-color:rgba(255,255,255,.24);
  text-align:left;
}
.editorial-strip .mini-usp-grid small{
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  flex:0 0 28px;
  border:1px solid rgba(255,255,255,.55);
  border-radius:50%;
  font-size:.64rem;
  font-weight:850;
  letter-spacing:.05em;
}
.editorial-strip .mini-usp-grid b{
  font-size:.84rem;
  letter-spacing:.01em;
}

/* Remove development-looking labels from product imagery if cached markup remains. */
.image-frame-label{display:none!important}

/* Compact value cards: less white space, warm contrast, no generic SaaS-card feel. */
.fact-card-grid,
.pillar-grid{
  gap:12px;
}
.fact-card-grid>div,
.pillar-grid>div{
  min-height:145px;
  padding:22px 24px;
  border:0;
  border-radius:15px;
  background:var(--accent-pale);
  box-shadow:none;
  position:relative;
}
.fact-card-grid>div:nth-child(even),
.pillar-grid>div:nth-child(even){
  background:#f0e3d2;
}
.fact-card-grid>div:before,
.pillar-grid>div:before{
  content:"";
  position:absolute;
  left:0;
  top:18px;
  bottom:18px;
  width:3px;
  background:var(--accent);
  border-radius:3px;
}
.fact-card-grid span,
.pillar-grid span{
  color:var(--accent-dark);
  font-size:.68rem;
}
.fact-card-grid h3,
.pillar-grid h3{
  margin:18px 0 7px;
  font-size:1.02rem;
}
.fact-card-grid p,
.pillar-grid p{
  margin:0;
  font-size:.84rem;
  line-height:1.5;
}

/* Timeline / process blocks: tighter and more editorial as well. */
.timeline-grid>div,
.process-grid>div{
  min-height:160px;
  padding:24px;
  background:#fffaf4;
  border-color:rgba(223,118,47,.22);
  border-radius:15px;
}
.timeline-grid b,
.process-grid b{
  color:var(--accent);
  font-size:2rem;
}
.timeline-grid h3,
.process-grid h3{
  margin:20px 0 8px;
}

/* Business channel cards retain their successful layout, gain brand colour and real line icons. */
.business-card-grid-v34{
  gap:16px;
}
.business-card-grid-v34>div{
  min-height:205px;
  padding:28px;
  background:#fffaf4;
  border:1px solid rgba(223,118,47,.24);
  border-radius:18px;
  box-shadow:0 8px 24px rgba(74,45,24,.035);
}
.business-card-grid-v34>div:nth-child(2),
.business-card-grid-v34>div:nth-child(5){
  background:var(--accent-pale);
}
.biz-icon{
  width:48px;
  height:48px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--accent);
  color:#fff;
}
.biz-icon svg{
  width:25px;
  height:25px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.7;
  stroke-linecap:round;
  stroke-linejoin:round;
}
.business-card-grid-v34 h3{
  margin:24px 0 8px;
}
.business-card-grid-v34 p{
  margin:0;
}

/* Internal notes should never appear on the public-facing site. */
.note-box,
.contact-small-card{
  display:none!important;
}

/* Contact sidebar breathes naturally after removing the admin note. */
.contact-sidebar{
  align-content:start;
}

/* Warm hover detail on product cards, without recolouring their resting state. */
.product-card:hover,
.cookie-card:hover{
  transform:translateY(-2px);
}
.product-card,
.cookie-card{
  transition:transform .2s ease;
}

/* Mobile treatment for new orange strip and compact cards. */
@media(max-width:980px){
  .editorial-strip .mini-usp-grid span{
    justify-content:flex-start;
  }
}
@media(max-width:640px){
  .editorial-strip .mini-usp-grid{
    grid-template-columns:1fr 1fr;
  }
  .editorial-strip .mini-usp-grid span{
    min-height:66px;
    padding:14px;
  }
  .fact-card-grid>div,
  .pillar-grid>div,
  .timeline-grid>div,
  .process-grid>div{
    min-height:0;
  }
}


/* =========================================================
   V3.8.1 — extra refinements from review
   ========================================================= */

/* 1) Orange editorial strip without numbers */
.editorial-strip .mini-usp-grid span{
  justify-content:center;
  gap:0;
  font-weight:700;
}
.editorial-strip .mini-usp-grid small{
  display:none!important;
}
.editorial-strip .mini-usp-grid b{
  font-size:.92rem;
}
@media(max-width:640px){
  .editorial-strip .mini-usp-grid span{
    justify-content:flex-start;
  }
}

/* 2) Business cards should pop more */
.business-card-grid-v34>div{
  border:1px solid rgba(223,118,47,.32);
  box-shadow:0 14px 36px rgba(74,45,24,.06);
  position:relative;
  overflow:hidden;
}
.business-card-grid-v34>div:before{
  content:"";
  position:absolute;
  inset:0 0 auto 0;
  height:5px;
  background:var(--accent);
}
.business-card-grid-v34>div:nth-child(1){
  background:linear-gradient(180deg,#fff2e6 0%, #fffaf4 100%);
}
.business-card-grid-v34>div:nth-child(2){
  background:linear-gradient(180deg,#fff6ed 0%, #fff8f2 100%);
}
.business-card-grid-v34>div:nth-child(3){
  background:linear-gradient(180deg,#ffeede 0%, #fff9f3 100%);
}
.business-card-grid-v34>div:nth-child(4){
  background:linear-gradient(180deg,#fff4ea 0%, #fffaf5 100%);
}
.business-card-grid-v34>div:nth-child(5){
  background:linear-gradient(180deg,#ffefdf 0%, #fff8f1 100%);
}
.business-card-grid-v34>div:nth-child(6){
  background:linear-gradient(180deg,#fff3e8 0%, #fffaf6 100%);
}
.biz-icon{
  background:var(--accent);
  box-shadow:0 10px 22px rgba(223,118,47,.20);
}
.business-card-grid-v34 h3{
  font-size:1.08rem;
}
.business-card-grid-v34 p{
  color:#4b5b61;
}

/* 3) Why-Teff cards: totally different, smaller, no numbers, more pop */
.fact-card-grid{
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.fact-card-grid .fact-pop-card,
.fact-card-grid > div{
  min-height:0;
  padding:20px 18px 18px;
  background:linear-gradient(180deg,#fff8f2 0%, #fff1e5 100%);
  border:1px solid rgba(223,118,47,.24);
  border-radius:16px;
  box-shadow:0 10px 26px rgba(74,45,24,.045);
  position:relative;
}
.fact-card-grid .fact-pop-card:nth-child(even),
.fact-card-grid > div:nth-child(even){
  background:linear-gradient(180deg,#fff5ec 0%, #fde8d7 100%);
}
.fact-card-grid .fact-pop-card:before,
.fact-card-grid > div:before{
  content:"";
  position:static;
  display:block;
  width:44px;
  height:4px;
  margin:0 0 14px 0;
  background:var(--accent);
  border-radius:999px;
}
.fact-card-grid .fact-pop-card:after,
.fact-card-grid > div:after{
  content:"";
  position:absolute;
  right:16px;
  top:16px;
  width:12px;
  height:12px;
  border-radius:50%;
  background:rgba(223,118,47,.18);
}
.fact-card-grid span{
  display:none!important;
}
.fact-card-grid .fact-pop-card h3,
.fact-card-grid > div h3{
  margin:0 0 8px;
  font-size:1rem;
  line-height:1.2;
}
.fact-card-grid .fact-pop-card p,
.fact-card-grid > div p{
  margin:0;
  font-size:.82rem;
  line-height:1.5;
  color:#4d5b60;
}
@media(max-width:980px){
  .fact-card-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:640px){
  .fact-card-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   V3.8.2 — image principles + calmer brand sections
   ========================================================= */

/* Replace fact cards with image tiles */
.fact-image-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
}
.fact-image-card{
  min-height:330px;
  border-radius:22px;
  overflow:hidden;
  position:relative;
  background-size:cover;
  background-position:center;
  box-shadow:0 16px 34px rgba(45,33,22,.12);
}
.fact-image-card:before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(12,26,20,.04) 0%, rgba(12,26,20,.18) 36%, rgba(12,26,20,.72) 100%);
}
.fact-image-overlay{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  z-index:2;
  padding:22px 20px 20px;
  color:#fff;
}
.fact-image-overlay h3{
  color:#fff;
  font-size:1.22rem;
  margin:0 0 7px;
  letter-spacing:0;
}
.fact-image-overlay p{
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:.9rem;
  line-height:1.55;
  max-width:34ch;
}

/* Over page principles: cleaner and more editorial */
.brand-principles-row{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:18px;
  margin-top:10px;
}
.principle-item{
  padding:10px 8px 0 0;
  background:transparent;
}
.principle-mark{
  display:block;
  width:42px;
  height:4px;
  border-radius:999px;
  background:var(--accent);
  margin:0 0 16px;
}
.principle-item h3{
  font-family:inherit;
  letter-spacing:0;
  font-size:1.08rem;
  margin:0 0 8px;
}
.principle-item p{
  margin:0;
  color:var(--muted);
  font-size:.92rem;
  line-height:1.6;
}

/* Remove old card look if any cached markup remains */
.pillar-grid>div{
  background:transparent;
  box-shadow:none;
  border:0;
  padding:0;
  min-height:0;
}
.pillar-grid span{
  display:none!important;
}
.pillar-grid>div:before{
  width:42px;
  height:4px;
  margin:0 0 16px;
  background:var(--accent);
  position:static;
  display:block;
}

/* Lower over-page section: no cards, heading moved right */
.day-journey-section{
  padding-top:74px;
  padding-bottom:86px;
}
.day-journey-grid{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:50px;
  align-items:start;
}
.day-journey-spacer{
  min-height:10px;
}
.day-journey-copy{
  max-width:780px;
  justify-self:end;
}
.day-journey-copy h2{
  font-size:clamp(3rem,5.8vw,5.9rem);
  line-height:.96;
  max-width:10ch;
  margin:8px 0 18px;
}
.day-journey-copy p{
  max-width:36ch;
  font-size:1.05rem;
  color:var(--muted);
  line-height:1.7;
}

/* Hide old timeline cards if some markup survives */
.timeline-grid{
  display:none!important;
}

@media(max-width:1100px){
  .fact-image-grid,
  .brand-principles-row{
    grid-template-columns:repeat(2,1fr);
  }
  .day-journey-grid{
    grid-template-columns:1fr;
  }
  .day-journey-copy{
    justify-self:start;
  }
}
@media(max-width:640px){
  .fact-image-grid,
  .brand-principles-row{
    grid-template-columns:1fr;
  }
  .fact-image-card{
    min-height:280px;
  }
  .day-journey-copy h2{
    max-width:12ch;
  }
}


/* =========================================================
   V3.8.3 — process without cards + uploadable lifestyle image
   ========================================================= */

/* Zakelijk: collaboration steps without boxed cards */
.process-editorial{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:30px;
  margin-top:8px;
}
.process-editorial>div{
  padding:6px 0 0;
  min-height:0;
  background:transparent;
  border:0;
  border-radius:0;
  box-shadow:none;
  position:relative;
}
.process-editorial>div + div{
  border-left:1px solid rgba(16,43,32,.14);
  padding-left:28px;
}
.process-editorial span{
  display:inline-block;
  color:var(--accent);
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.08em;
  margin-bottom:18px;
}
.process-editorial h3{
  margin:0 0 8px;
  font-family:inherit;
  letter-spacing:0;
  font-size:1.08rem;
}
.process-editorial p{
  margin:0;
  color:var(--muted);
  font-size:.9rem;
  line-height:1.6;
}

/* Over Teff-It: image on the left, editorial copy on the right */
.day-journey-grid{
  grid-template-columns:1fr 1fr;
  gap:72px;
  align-items:center;
}
.day-journey-image{
  min-height:520px;
  border-radius:26px;
  background-size:cover;
  background-position:center;
  box-shadow:0 18px 45px rgba(35,32,24,.12);
}
.day-journey-copy{
  max-width:720px;
  justify-self:end;
}
.day-journey-copy h2{
  max-width:11ch;
}

@media(max-width:980px){
  .process-editorial{
    grid-template-columns:1fr 1fr;
    row-gap:36px;
  }
  .process-editorial>div + div{
    border-left:0;
    padding-left:0;
  }
  .day-journey-grid{
    grid-template-columns:1fr;
    gap:36px;
  }
  .day-journey-image{
    min-height:430px;
  }
  .day-journey-copy{
    justify-self:start;
  }
}
@media(max-width:640px){
  .process-editorial{
    grid-template-columns:1fr;
    gap:26px;
  }
  .process-editorial>div{
    padding-bottom:22px;
    border-bottom:1px solid rgba(16,43,32,.12);
  }
  .process-editorial>div:last-child{
    border-bottom:0;
  }
  .day-journey-image{
    min-height:320px;
  }
}


/* V3.10 — premium motion */
:root{--motion-ease:cubic-bezier(.22,.61,.36,1)}

.motion-reveal,.motion-left,.motion-right,.motion-scale{
  opacity:0;
  will-change:transform,opacity;
  transition:opacity .7s var(--motion-ease),transform .7s var(--motion-ease);
}
.motion-reveal{transform:translateY(34px)}
.motion-left{transform:translateX(-42px)}
.motion-right{transform:translateX(42px)}
.motion-scale{transform:scale(.96) translateY(18px)}
.motion-visible{opacity:1!important;transform:none!important}

.motion-stagger>*{
  opacity:0;
  transform:translateY(22px);
  transition:opacity .58s var(--motion-ease),transform .58s var(--motion-ease);
}
.motion-stagger.motion-visible>*{opacity:1;transform:none}
.motion-stagger.motion-visible>*:nth-child(1){transition-delay:.04s}
.motion-stagger.motion-visible>*:nth-child(2){transition-delay:.10s}
.motion-stagger.motion-visible>*:nth-child(3){transition-delay:.16s}
.motion-stagger.motion-visible>*:nth-child(4){transition-delay:.22s}
.motion-stagger.motion-visible>*:nth-child(5){transition-delay:.28s}
.motion-stagger.motion-visible>*:nth-child(6){transition-delay:.34s}

.hero-copy{animation:teffHeroIn .9s var(--motion-ease) both}
@keyframes teffHeroIn{
  from{opacity:0;transform:translateY(24px)}
  to{opacity:1;transform:none}
}

.product-photo,.cookie-photo,.life-card,.subhero-photo,.day-journey-image,
.fact-image-card,.why-image,.single-photo{
  transition:transform .55s var(--motion-ease),box-shadow .55s var(--motion-ease);
}
.product-card:hover .product-photo,
.cookie-card:hover .cookie-photo,
.fact-image-card:hover,
.day-journey-image:hover,
.life-card:hover{transform:scale(1.025)}

.button{position:relative;overflow:hidden}
.button:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg,transparent 15%,rgba(255,255,255,.2) 45%,transparent 75%);
  transform:translateX(-130%);
  transition:transform .55s var(--motion-ease);
}
.button:hover:after{transform:translateX(130%)}

.site-header{transition:box-shadow .3s ease,background-color .3s ease}
.site-header.is-scrolled{box-shadow:0 8px 30px rgba(18,39,29,.08)}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
    scroll-behavior:auto!important;
  }
  .motion-reveal,.motion-left,.motion-right,.motion-scale,.motion-stagger>*{
    opacity:1!important;
    transform:none!important;
  }
}


/* =========================================================
   V3.11 — richer, deeper Teff-It colour palette
   ========================================================= */
:root{
  --green:#073d2c;
  --green2:#0c5a3d;
  --green-deep:#042d20;
  --green-bright:#146c49;

  --cream:#f6efe2;
  --paper:#fffaf2;
  --sand:#e7d4b7;
  --panel:#efe3cf;
  --panel-2:#f8eddf;

  --ink:#0b2d21;
  --muted:#53645b;
  --line:rgba(7,61,44,.18);

  --accent:#f07a22;
  --accent-dark:#c9540d;
  --accent-deep:#a94408;
  --accent-soft:#f7c49d;
  --accent-pale:#fff0e4;
  --accent-ink:#5c2408;
}

/* Overall warmth/depth */
body{
  background:var(--cream);
  color:var(--ink);
}
.site-header{
  background:rgba(246,239,226,.94);
}
.footer{
  background:var(--green-deep);
}

/* Green elements a little richer */
.button-green{
  background:var(--green);
  box-shadow:0 10px 26px rgba(7,61,44,.18);
}
.button-green-light{
  background:var(--green-bright);
}
.teff-facts{
  background:rgba(4,45,32,.9);
}
.brand-quote,
.subpage-cta,
.about-mark,
.contact-hero-card{
  background:var(--green);
}

/* Orange more energetic */
.editorial-strip{
  background:var(--accent);
}
.editorial-strip .mini-usp-grid span{
  border-color:rgba(255,255,255,.28);
}
.biz-icon{
  background:var(--accent);
}
.principle-mark,
.fact-card-grid .fact-pop-card:before,
.fact-card-grid > div:before{
  background:var(--accent);
}
.timeline-grid b,
.process-grid b,
.process-editorial span{
  color:var(--accent);
}

/* Panels with richer contrast */
.product-card,
.cookie-card,
.fact-card-grid>div,
.pillar-grid>div,
.timeline-grid>div,
.process-grid>div,
.business-card-grid-v34>div,
.two-panel>div{
  border-color:rgba(240,122,34,.22);
}
.product-card,
.cookie-card{
  background:#fffaf4;
}

/* More punch in business cards */
.business-card-grid-v34>div:nth-child(1){
  background:linear-gradient(180deg,#fff0e2 0%,#fff9f1 100%);
}
.business-card-grid-v34>div:nth-child(2){
  background:linear-gradient(180deg,#fce8d6 0%,#fff7ef 100%);
}
.business-card-grid-v34>div:nth-child(3){
  background:linear-gradient(180deg,#ffe8d3 0%,#fff9f2 100%);
}
.business-card-grid-v34>div:nth-child(4){
  background:linear-gradient(180deg,#ffefe0 0%,#fff9f3 100%);
}
.business-card-grid-v34>div:nth-child(5){
  background:linear-gradient(180deg,#fbdcc0 0%,#fff6ec 100%);
}
.business-card-grid-v34>div:nth-child(6){
  background:linear-gradient(180deg,#ffe9d8 0%,#fff9f4 100%);
}
.business-card-grid-v34>div:before{
  background:var(--accent);
}

/* Why Teff cards richer */
.fact-card-grid .fact-pop-card,
.fact-card-grid > div{
  background:linear-gradient(180deg,#fff5ea 0%,#fde2ca 100%);
  border-color:rgba(240,122,34,.28);
}
.fact-card-grid .fact-pop-card:nth-child(even),
.fact-card-grid > div:nth-child(even){
  background:linear-gradient(180deg,#ffeedd 0%,#f8d5b5 100%);
}

/* Slightly deeper headings and links */
.kicker{
  color:#9a5b20;
}
.inline-link:hover{
  color:var(--accent-dark);
}
.footer a:hover{
  color:#fff;
}

/* Stronger hover while keeping default colours intact */
.button:hover,
.button:focus-visible{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
  box-shadow:0 12px 28px rgba(240,122,34,.28);
}
.round-arrow:hover,
.round-arrow:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* richer subtle background blocks */
.panel-section,
.b2b-split,
.contact-bottom-strip{
  background:var(--panel);
}
.why-section{
  background:var(--panel-2);
}
.life-section{
  background:#fbf3e8;
}


/* =========================================================
   V3.12 — unified header + bolder warm background
   ========================================================= */
:root{
  --cream:#f0ddc7;
  --paper:#fff6eb;
  --sand:#d9b88f;
  --panel:#e6c8a7;
  --panel-2:#f3dcc5;
  --surface-warm:#f0ddc7;
  --surface-soft:#f7e8d8;
}

/* Header and hero now use the exact same base colour */
.site-header{
  background:var(--surface-warm)!important;
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
}
.hero{
  background:var(--surface-warm);
}
.hero:after{
  background:linear-gradient(
    90deg,
    rgba(240,221,199,1) 0%,
    rgba(240,221,199,.96) 34%,
    rgba(240,221,199,.46) 59%,
    rgba(240,221,199,0) 78%
  )!important;
}

/* Bolder overall page warmth */
body{
  background:var(--surface-warm);
}
.product-section,
.cookie-section,
.facts-section,
.brand-pillars,
.business-process{
  background:var(--surface-warm);
}
.life-section{
  background:var(--surface-soft);
}
.panel-section,
.b2b-split,
.contact-bottom-strip{
  background:var(--panel);
}
.why-section{
  background:var(--panel-2);
}

/* Subpages get a richer, less neutral opening */
.subpage-hero,
.page-hero{
  background:linear-gradient(135deg,#f2dfca 0%,#e6c39f 100%)!important;
}

/* Cards stay readable against the stronger background */
.product-card,
.cookie-card{
  background:#fff8f1;
}
.two-panel>div,
.fact-card-grid>div,
.pillar-grid>div,
.timeline-grid>div,
.process-grid>div,
.business-card-grid-v34>div{
  box-shadow:0 10px 28px rgba(70,42,23,.055);
}

/* Mobile hero uses the same matching surface colour */
@media(max-width:980px){
  .hero:after{
    background:linear-gradient(
      90deg,
      rgba(240,221,199,.99) 0%,
      rgba(240,221,199,.86) 55%,
      rgba(240,221,199,.12) 100%
    )!important;
  }
}
@media(max-width:640px){
  .hero-copy{
    background:rgba(240,221,199,.90)!important;
  }
  .hero:after{
    background:linear-gradient(
      to top,
      rgba(240,221,199,.98) 0%,
      rgba(240,221,199,.74) 36%,
      rgba(240,221,199,.08) 85%
    )!important;
  }
}


/* =========================================================
   V3.13 — floating adaptive header
   ========================================================= */

/* No coloured bar: navigation floats above the page */
.site-header{
  position:fixed!important;
  top:0;
  left:0;
  right:0;
  width:100%;
  z-index:1000;
  height:86px;
  background:transparent!important;
  border-bottom:0!important;
  box-shadow:none!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
  color:var(--green-deep);
  transition:color .32s ease, transform .32s ease;
}

.site-header .header-inner{
  position:relative;
  z-index:2;
}

.site-header .brand,
.site-header .brand strong,
.site-header .brand small,
.site-header .desktop-nav a,
.site-header .icon-button{
  color:currentColor!important;
  transition:color .32s ease, opacity .32s ease;
}

.site-header .brand-leaf{
  color:currentColor!important;
  transition:color .32s ease;
}

.site-header .menu-toggle span{
  background:currentColor!important;
  transition:background-color .32s ease;
}

/* Default/light background state */
.site-header.header-on-light{
  color:var(--green-deep);
}

/* Dark/image section state */
.site-header.header-on-dark{
  color:#fff;
  text-shadow:0 1px 14px rgba(0,0,0,.22);
}

.site-header.header-on-dark .header-button{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
  text-shadow:none;
}

.site-header.header-on-light .header-button{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:#fff!important;
  text-shadow:none;
}

.site-header .header-button:hover,
.site-header .header-button:focus-visible{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
}

/* Tiny readability boost without recreating a full bar */
.site-header.is-scrolled .brand,
.site-header.is-scrolled .desktop-nav,
.site-header.is-scrolled .header-actions{
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.06));
}

/* Page content now runs underneath the floating navigation */
.hero{
  margin-top:0!important;
}

/* Subpage headings need extra top breathing room under the fixed header */
.subpage-hero{
  padding-top:158px!important;
}
.page-hero{
  padding-top:154px!important;
}

/* Mobile menu may still use a solid panel when explicitly opened */
.mobile-nav{
  position:absolute;
  top:74px;
  left:0;
  right:0;
  background:rgba(240,221,199,.98)!important;
  color:var(--green-deep)!important;
  border-bottom:1px solid rgba(7,61,44,.14);
  box-shadow:0 18px 36px rgba(29,30,24,.12);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.mobile-nav a{
  color:var(--green-deep)!important;
}
.mobile-nav .button{
  color:#fff!important;
}

/* When a custom logo is an image, keep it natural rather than forcing a filter */
.site-header .custom-logo{
  transition:opacity .32s ease;
}
.site-header.header-on-dark .custom-logo{
  filter:none;
}

/* Smooth colour transition gives the modern adaptive feel */
.site-header *{
  transition-property:color,background-color,border-color,opacity,transform;
  transition-duration:.32s;
  transition-timing-function:ease;
}

@media(max-width:980px){
  .site-header{height:74px}
  .subpage-hero{padding-top:132px!important}
  .page-hero{padding-top:128px!important}
}

@media(max-width:640px){
  .site-header{
    text-shadow:none;
  }
  .site-header.header-on-dark{
    text-shadow:0 1px 10px rgba(0,0,0,.24);
  }
}


/* =========================================================
   V3.14 — editorial spacing & asymmetry
   STYLE ONLY: no routes, content fields or product logic changed
   ========================================================= */

/* More breathing room between major homepage sections */
.section{
  padding-top:124px;
  padding-bottom:124px;
}
.product-section{
  padding-top:142px;
  padding-bottom:132px;
}
.cookie-section,
.life-section{
  padding-top:132px;
  padding-bottom:132px;
}
.section-heading{
  margin-bottom:52px;
}
.mini-usp{
  margin:0;
}

/* Headings no longer all sit on the same side */
.cookie-heading,
.life-heading{
  grid-template-columns:.9fr 1.1fr;
  align-items:end;
}
.cookie-heading>div:first-child,
.life-heading>div:first-child{
  grid-column:2;
  grid-row:1;
  text-align:left;
  max-width:720px;
  justify-self:end;
}
.cookie-heading>div:last-child,
.life-heading>div:last-child{
  grid-column:1;
  grid-row:1;
  align-self:end;
  max-width:480px;
}
.cookie-heading .inline-link{
  text-align:left;
}

/* Slight stagger for the main section headings */
.product-section .section-heading>div:first-child{
  transform:translateX(3vw);
}
.cookie-section .section-heading>div:first-child{
  transform:translateX(-1.5vw);
}
.life-section .section-heading>div:first-child{
  transform:translateX(-3vw);
}

/* Teff feature becomes wider, more editorial and image-led */
.teff-banner{
  min-height:640px;
  background-position:72% center!important;
}
.teff-banner .overlay{
  background:
    linear-gradient(
      90deg,
      rgba(4,45,32,.97) 0%,
      rgba(4,45,32,.92) 27%,
      rgba(4,45,32,.67) 43%,
      rgba(4,45,32,.18) 66%,
      rgba(4,45,32,0) 82%
    )!important;
}
.teff-banner-inner{
  min-height:640px;
  grid-template-columns:.78fr 1.22fr;
  gap:80px;
}
.teff-banner .banner-copy{
  align-self:center;
  max-width:520px;
  transform:translateX(2vw);
}
.teff-banner .teff-facts{
  align-self:end;
  justify-self:end;
  margin-bottom:58px;
  min-width:360px;
  background:rgba(4,45,32,.78);
  border:1px solid rgba(255,255,255,.12);
}

/* Homepage Why section becomes a full editorial image composition */
.why-section{
  padding-top:150px;
  padding-bottom:150px;
  overflow:hidden;
}
.why-section .why-grid{
  position:relative;
  display:block;
  min-height:560px;
}
.why-section .why-image{
  position:absolute;
  z-index:0;
  top:0;
  bottom:0;
  left:24%;
  right:calc((100vw - min(100vw - 40px, 1280px))/ -2);
  width:auto;
  height:auto;
  min-height:560px;
  border-radius:28px 0 0 28px;
  background-position:center;
  box-shadow:0 24px 58px rgba(44,30,18,.14);
}
.why-section .why-grid:after{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      var(--panel-2) 0%,
      rgba(243,220,197,.98) 19%,
      rgba(243,220,197,.86) 31%,
      rgba(243,220,197,.35) 48%,
      rgba(243,220,197,0) 67%
    );
}
.why-section .why-grid>div:first-child{
  position:relative;
  z-index:3;
  width:min(46%,560px);
  padding-top:76px;
  padding-left:2vw;
}
.why-section .why-grid>div:first-child h2{
  max-width:8.5ch;
  font-size:clamp(3.7rem,5.7vw,6.4rem);
  line-height:.94;
}
.why-section .why-grid>div:first-child p{
  max-width:42ch;
}
.why-section .why-points{
  position:absolute;
  z-index:3;
  right:2.5vw;
  bottom:34px;
  width:min(360px,31%);
  padding:24px 26px;
  border-radius:18px;
  color:#fff;
  background:rgba(4,45,32,.82);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 34px rgba(0,0,0,.10);
}

/* Closing CTA gets extra breathing room */
.cta-banner{
  min-height:600px;
}
.cta-inner{
  min-height:600px;
}
.cta-inner>div{
  max-width:650px;
  margin-left:auto;
  margin-right:4vw;
}
.cta-inner h2{
  max-width:10ch;
}

/* Subpage headings also get subtle horizontal rhythm without redesigning them */
.subpage-hero:nth-of-type(even) .subpage-hero-grid>div:first-child{
  transform:translateX(2vw);
}
.split-copy>div:first-child{
  max-width:720px;
}
.section:nth-of-type(even) .split-copy>div:first-child{
  transform:translateX(2vw);
}

/* Keep everything safe and straightforward on tablet/mobile */
@media(max-width:980px){
  .section,
  .product-section,
  .cookie-section,
  .life-section,
  .why-section{
    padding-top:92px;
    padding-bottom:92px;
  }

  .cookie-heading,
  .life-heading{
    display:grid;
    grid-template-columns:1fr;
    gap:24px;
  }
  .cookie-heading>div:first-child,
  .cookie-heading>div:last-child,
  .life-heading>div:first-child,
  .life-heading>div:last-child{
    grid-column:1;
    grid-row:auto;
    max-width:none;
    justify-self:start;
    transform:none;
  }
  .product-section .section-heading>div:first-child,
  .cookie-section .section-heading>div:first-child,
  .life-section .section-heading>div:first-child{
    transform:none;
  }

  .teff-banner,
  .teff-banner-inner{
    min-height:650px;
  }
  .teff-banner-inner{
    grid-template-columns:1fr;
    align-content:center;
    gap:32px;
  }
  .teff-banner .banner-copy{
    transform:none;
  }
  .teff-banner .teff-facts{
    justify-self:start;
    margin-bottom:0;
    min-width:0;
    width:min(100%,480px);
  }

  .why-section .why-grid{
    min-height:auto;
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
  }
  .why-section .why-grid:after{
    display:none;
  }
  .why-section .why-grid>div:first-child{
    width:auto;
    padding:0;
  }
  .why-section .why-grid>div:first-child h2{
    max-width:11ch;
  }
  .why-section .why-image{
    position:relative;
    inset:auto;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
    min-height:440px;
    height:440px;
    border-radius:24px;
  }
  .why-section .why-points{
    position:relative;
    right:auto;
    bottom:auto;
    width:auto;
    color:var(--ink);
    background:transparent;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    border:0;
    box-shadow:none;
    padding:0;
  }
  .cta-inner>div{
    margin-left:0;
    margin-right:0;
  }
}

@media(max-width:640px){
  .section,
  .product-section,
  .cookie-section,
  .life-section,
  .why-section{
    padding-top:76px;
    padding-bottom:76px;
  }
  .section-heading{
    margin-bottom:36px;
  }
  .teff-banner{
    background-position:66% center!important;
  }
  .why-section .why-image{
    min-height:330px;
    height:330px;
  }
}


/* =========================================================
   V3.15 — cleanup, spacing, full-bleed teff imagery, premium B2B
   ========================================================= */

/* 1 + 2: remove boxed overlays on teff imagery */
.teff-banner .teff-facts,
.teff-story-banner .teff-facts,
.teff-story-banner .why-points{
  display:none!important;
}

/* With the box gone, let the image breathe */
.teff-banner{
  min-height:620px;
}
.teff-banner-inner{
  min-height:620px;
  grid-template-columns:1fr;
}
.teff-banner .banner-copy{
  max-width:560px;
  margin-left:2vw;
}

/* 3: give the top of pages significantly more breathing room */
.subpage-hero{
  padding-top:220px!important;
  padding-bottom:130px!important;
}
.page-hero{
  padding-top:210px!important;
  padding-bottom:125px!important;
}
.subpage-hero-grid{
  gap:92px;
}
.subpage-hero h1,
.page-hero h1{
  margin-top:18px;
}
.subpage-hero p,
.page-hero p{
  margin-top:24px;
}
.subpage-hero .button,
.page-hero .button{
  margin-top:18px;
}

/* Homepage opening gets a little more space under floating nav too */
.hero-copy{
  padding-top:42px;
}

/* 4: safety hide old orange strip if cached template markup survives */
.mini-usp.editorial-strip{
  display:none!important;
}

/* 5: Why Teff top image becomes a full-bleed visual, like homepage imagery */
.teff-subhero-fullbleed{
  position:relative;
  overflow:hidden;
  padding-top:0!important;
  padding-bottom:0!important;
  min-height:720px;
  background:transparent!important;
}
.teff-subhero-fullbleed .subpage-hero-grid{
  display:block;
  min-height:720px;
  width:100%;
  max-width:none;
  padding:0;
}
.teff-subhero-fullbleed .subhero-photo{
  position:absolute;
  inset:0;
  min-height:720px;
  border-radius:0!important;
  background-size:cover;
  background-position:center;
  box-shadow:none!important;
  z-index:0;
}
.teff-subhero-fullbleed:after{
  content:"";
  position:absolute;
  inset:0;
  z-index:1;
  background:linear-gradient(
    90deg,
    rgba(4,45,32,.88) 0%,
    rgba(4,45,32,.72) 33%,
    rgba(4,45,32,.34) 55%,
    rgba(4,45,32,.08) 75%,
    rgba(4,45,32,0) 100%
  );
}
.teff-subhero-fullbleed .subpage-hero-grid>div:first-child{
  position:relative;
  z-index:2;
  max-width:650px;
  margin-left:max(6vw,60px);
  padding-top:210px;
  padding-bottom:130px;
  color:#fff;
}
.teff-subhero-fullbleed .kicker,
.teff-subhero-fullbleed h1,
.teff-subhero-fullbleed p{
  color:#fff!important;
}
.teff-subhero-fullbleed .button{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#fff!important;
}

/* 6: Zakelijk gets a more serious dark green environment */
.business-dark-theme{
  background:var(--green-deep);
  color:#fff;
}
.business-dark-theme .subpage-hero,
.business-dark-theme .section,
.business-dark-theme .panel-section,
.business-dark-theme .b2b-split,
.business-dark-theme .business-process,
.business-dark-theme .contact-bottom-strip{
  background:var(--green-deep)!important;
  color:#fff;
}
.business-dark-theme .subpage-hero h1,
.business-dark-theme .subpage-hero h2,
.business-dark-theme .section h2,
.business-dark-theme .section h3,
.business-dark-theme .panel-section h2,
.business-dark-theme .panel-section h3,
.business-dark-theme .business-process h2,
.business-dark-theme .business-process h3{
  color:#fff!important;
}
.business-dark-theme .subpage-hero p,
.business-dark-theme .section p,
.business-dark-theme .panel-section p,
.business-dark-theme .business-process p{
  color:rgba(255,255,255,.78)!important;
}
.business-dark-theme .kicker{
  color:var(--accent)!important;
}

/* B2B cards: darker, cleaner, more premium */
.business-dark-theme .business-card-grid-v34>div{
  background:rgba(255,255,255,.055)!important;
  border:1px solid rgba(255,255,255,.12)!important;
  box-shadow:none!important;
  border-radius:18px;
  color:#fff;
  backdrop-filter:blur(7px);
  -webkit-backdrop-filter:blur(7px);
}
.business-dark-theme .business-card-grid-v34>div:before{
  height:3px;
  background:var(--accent)!important;
}
.business-dark-theme .business-card-grid-v34 h3{
  color:#fff!important;
}
.business-dark-theme .business-card-grid-v34 p{
  color:rgba(255,255,255,.72)!important;
}
.business-dark-theme .biz-icon{
  background:var(--accent)!important;
  color:#fff!important;
}

/* Product/business panels in dark green */
.business-dark-theme .two-panel>div{
  background:rgba(255,255,255,.05)!important;
  border:1px solid rgba(255,255,255,.11)!important;
  box-shadow:none!important;
}
.business-dark-theme .inline-link{
  color:#fff!important;
}
.business-dark-theme .inline-link:hover{
  color:var(--accent)!important;
}

/* Process section stays editorial, not card-like */
.business-dark-theme .process-editorial>div + div{
  border-left-color:rgba(255,255,255,.16);
}
.business-dark-theme .process-editorial span{
  color:var(--accent);
}
.business-dark-theme .process-editorial h3{
  color:#fff!important;
}
.business-dark-theme .process-editorial p{
  color:rgba(255,255,255,.72)!important;
}

/* Orange CTA still pops strongly on dark green */
.business-dark-theme .subpage-cta{
  background:var(--accent)!important;
  color:#fff;
}
.business-dark-theme .subpage-cta .kicker,
.business-dark-theme .subpage-cta h2,
.business-dark-theme .subpage-cta p{
  color:#fff!important;
}
.business-dark-theme .subpage-cta .button{
  background:#fff!important;
  color:var(--green-deep)!important;
  border-color:#fff!important;
}
.business-dark-theme .subpage-cta .button:hover{
  background:var(--green-deep)!important;
  color:#fff!important;
  border-color:var(--green-deep)!important;
}

/* Slightly more space before B2B card section */
.business-dark-theme .business-card-grid-v34{
  margin-top:56px;
}

/* Responsive */
@media(max-width:980px){
  .subpage-hero{
    padding-top:168px!important;
    padding-bottom:96px!important;
  }
  .page-hero{
    padding-top:162px!important;
    padding-bottom:92px!important;
  }
  .subpage-hero-grid{
    gap:46px;
  }

  .teff-subhero-fullbleed{
    min-height:660px;
  }
  .teff-subhero-fullbleed .subpage-hero-grid,
  .teff-subhero-fullbleed .subhero-photo{
    min-height:660px;
  }
  .teff-subhero-fullbleed .subpage-hero-grid>div:first-child{
    margin-left:28px;
    margin-right:28px;
    padding-top:180px;
    padding-bottom:100px;
  }

  .business-dark-theme .process-editorial>div + div{
    border-left:0;
  }
}

@media(max-width:640px){
  .subpage-hero{
    padding-top:142px!important;
    padding-bottom:78px!important;
  }
  .page-hero{
    padding-top:138px!important;
    padding-bottom:74px!important;
  }

  .teff-subhero-fullbleed{
    min-height:610px;
  }
  .teff-subhero-fullbleed .subpage-hero-grid,
  .teff-subhero-fullbleed .subhero-photo{
    min-height:610px;
  }
  .teff-subhero-fullbleed:after{
    background:linear-gradient(
      to top,
      rgba(4,45,32,.90) 0%,
      rgba(4,45,32,.66) 48%,
      rgba(4,45,32,.16) 82%
    );
  }
  .teff-subhero-fullbleed .subpage-hero-grid>div:first-child{
    margin-left:22px;
    margin-right:22px;
    padding-top:260px;
    padding-bottom:76px;
  }
}


/* =========================================================
   V3.16 — calmer homepage ending: image → text → image
   ========================================================= */

/* Why Teff-It is now purely typographic */
.why-section.why-text-only{
  padding-top:138px;
  padding-bottom:138px;
  background:var(--surface-warm)!important;
}
.why-text-layout{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:110px;
  align-items:end;
}
.why-text-heading{
  max-width:760px;
  padding-left:2vw;
}
.why-text-heading h2{
  font-size:clamp(4rem,7vw,7.2rem);
  line-height:.92;
  max-width:8ch;
  margin:10px 0 0;
}
.why-text-copy{
  max-width:520px;
  padding-bottom:12px;
}
.why-text-copy p{
  margin:0 0 28px;
  font-size:1.08rem;
  line-height:1.72;
  color:var(--muted);
}

/* Disable the old image-based Why layout completely */
.why-text-only .why-grid,
.why-text-only .why-image,
.why-text-only .why-points{
  display:none!important;
}

/* The bread/lifestyle visual now stands on its own */
.cta-banner.cta-image-only{
  position:relative;
  min-height:680px;
  height:min(72vw,820px);
  background-size:cover;
  background-position:center;
  border:0;
  margin:0;
  box-shadow:none;
}
.cta-banner.cta-image-only:before,
.cta-banner.cta-image-only:after,
.cta-banner.cta-image-only .overlay,
.cta-banner.cta-image-only .cta-inner{
  display:none!important;
}

/* Remove any visual strip between text section and final image */
.why-text-only + .cta-image-only{
  margin-top:0;
}
.why-text-only{
  margin-bottom:0;
}

/* Slight editorial offset so the section does not feel too symmetrical */
.why-text-copy{
  transform:translateY(18px);
}

@media(max-width:980px){
  .why-section.why-text-only{
    padding-top:100px;
    padding-bottom:100px;
  }
  .why-text-layout{
    grid-template-columns:1fr;
    gap:34px;
  }
  .why-text-heading{
    padding-left:0;
  }
  .why-text-heading h2{
    max-width:10ch;
  }
  .why-text-copy{
    transform:none;
    max-width:640px;
  }
  .cta-banner.cta-image-only{
    min-height:520px;
    height:64vw;
  }
}

@media(max-width:640px){
  .why-section.why-text-only{
    padding-top:78px;
    padding-bottom:82px;
  }
  .why-text-heading h2{
    font-size:clamp(3.2rem,15vw,4.8rem);
  }
  .cta-banner.cta-image-only{
    min-height:420px;
    height:76vw;
    background-position:center;
  }
}


/* =========================================================
   V3.17 — brighter Waarom Teff-It + cleaner Zakelijk
   ========================================================= */

/* WHY TEFF-IT — top hero less dark and more readable */
.teff-subhero-fullbleed:after{
  background:linear-gradient(
    90deg,
    rgba(240,221,199,.94) 0%,
    rgba(240,221,199,.82) 28%,
    rgba(240,221,199,.48) 49%,
    rgba(240,221,199,.14) 70%,
    rgba(240,221,199,0) 100%
  )!important;
}
.teff-subhero-fullbleed .subpage-hero-grid>div:first-child{
  color:var(--green-deep);
  max-width:610px;
}
.teff-subhero-fullbleed .kicker,
.teff-subhero-fullbleed h1,
.teff-subhero-fullbleed p{
  color:var(--green-deep)!important;
  text-shadow:none!important;
}
.teff-subhero-fullbleed .button{
  background:var(--green)!important;
  border-color:var(--green)!important;
  color:#fff!important;
}
.teff-subhero-fullbleed .button:hover{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
}
.teff-subhero-fullbleed .subhero-photo{
  background-position:62% center!important;
}

/* WHY TEFF-IT — story image lighter and text more readable */
.teff-story-banner{
  min-height:620px;
  background-position:center;
}
.teff-story-banner .overlay{
  background:linear-gradient(
    90deg,
    rgba(4,45,32,.58) 0%,
    rgba(4,45,32,.52) 28%,
    rgba(4,45,32,.34) 48%,
    rgba(4,45,32,.12) 70%,
    rgba(4,45,32,0) 100%
  )!important;
}
.teff-story-banner .story-copy-large{
  position:relative;
  z-index:2;
  max-width:600px;
  padding:40px 42px;
  border-radius:24px;
  background:rgba(255,250,242,.08);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 16px 38px rgba(0,0,0,.06);
}
.teff-story-banner .story-copy-large .kicker,
.teff-story-banner .story-copy-large h2,
.teff-story-banner .story-copy-large p{
  color:#fff!important;
}

/* ZAKELIJK — no icon boxes, more editorial, wide grain image */
.business-dark-theme .business-grain-band{
  position:relative;
  min-height:500px;
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.business-dark-theme .business-grain-band .overlay{
  position:absolute;
  inset:0;
  background:linear-gradient(
    90deg,
    rgba(4,45,32,.88) 0%,
    rgba(4,45,32,.74) 35%,
    rgba(4,45,32,.38) 58%,
    rgba(4,45,32,.06) 82%,
    rgba(4,45,32,0) 100%
  );
}
.business-dark-theme .grain-band-copy{
  position:relative;
  z-index:2;
  min-height:500px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  max-width:680px;
}
.business-dark-theme .grain-band-copy h2{
  color:#fff!important;
  font-size:clamp(3rem,5.4vw,5.6rem);
  line-height:.94;
  max-width:10ch;
  margin:10px 0 16px;
}
.business-dark-theme .grain-band-copy p{
  color:rgba(255,255,255,.78)!important;
  max-width:34ch;
  font-size:1.04rem;
  line-height:1.72;
}

/* Simple text list instead of cards/icons */
.business-audience-editorial{
  background:var(--green-deep)!important;
  padding-top:84px;
  padding-bottom:110px;
}
.business-dark-theme .audience-grid-simple{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:32px 40px;
  margin-top:0;
}
.business-dark-theme .audience-grid-simple article{
  padding:0 0 22px;
  border-bottom:1px solid rgba(255,255,255,.12);
}
.business-dark-theme .audience-grid-simple h3{
  color:#fff!important;
  margin:0 0 8px;
  font-size:1.18rem;
}
.business-dark-theme .audience-grid-simple p{
  color:rgba(255,255,255,.74)!important;
  margin:0;
  line-height:1.62;
}

/* Remove legacy cards/icons if some cached markup still appears */
.business-dark-theme .business-card-grid-v34,
.business-dark-theme .biz-icon{
  display:none!important;
}

/* Product split on business page a bit more premium */
.business-dark-theme .b2b-split{
  padding-top:114px;
}
.business-dark-theme .two-panel{
  gap:28px;
}
.business-dark-theme .two-panel>div{
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  border-radius:22px;
  padding:34px 34px 36px;
}

/* Responsive */
@media(max-width:980px){
  .teff-subhero-fullbleed .subhero-photo{
    background-position:66% center!important;
  }
  .teff-story-banner .story-copy-large{
    padding:30px 30px;
  }
  .business-dark-theme .business-grain-band,
  .business-dark-theme .grain-band-copy{
    min-height:430px;
  }
  .business-dark-theme .audience-grid-simple{
    grid-template-columns:1fr 1fr;
    gap:26px 28px;
  }
}
@media(max-width:640px){
  .teff-story-banner{
    min-height:520px;
  }
  .teff-story-banner .story-copy-large{
    padding:24px 22px;
    border-radius:18px;
  }
  .business-dark-theme .business-grain-band,
  .business-dark-theme .grain-band-copy{
    min-height:380px;
  }
  .business-dark-theme .audience-grid-simple{
    grid-template-columns:1fr;
    gap:22px;
  }
}


/* =========================================================
   V3.18 — more editorial, less boxed
   ========================================================= */

/* Sitewide: soften boxed-image feeling on subpage heroes */
.subhero-photo{
  border-radius:0 !important;
  box-shadow:none !important;
  overflow:hidden;
}
.subpage-hero-grid{
  align-items:center;
}

/* Homepage bottom image: full-width grain fields */
.cta-banner.cta-image-only{
  min-height:720px;
  height:min(70vw,840px);
  background-position:center center;
}

/* Zakelijk page: stronger premium atmosphere */
.business-dark-theme .business-subhero{
  background:linear-gradient(135deg,#0b3a2d 0%, #083126 100%) !important;
}
.business-dark-theme .subpage-hero-grid{
  gap:72px;
}
.business-dark-theme .subhero-photo{
  min-height:480px;
  border-radius:0 !important;
  background-position:center;
}

/* The broad grain band should feel powerful and clean */
.business-dark-theme .business-grain-band{
  min-height:560px;
  background-position:center;
}
.business-dark-theme .grain-band-copy{
  max-width:760px;
}
.business-dark-theme .grain-band-copy h2{
  max-width:9ch;
}
.business-dark-theme .grain-band-copy p{
  font-size:1.08rem;
}

/* Audience section even cleaner: no box feeling, just elegant rows */
.business-dark-theme .business-audience-editorial{
  padding-top:72px;
  padding-bottom:112px;
}
.business-dark-theme .audience-grid-simple{
  gap:26px 56px;
}
.business-dark-theme .audience-grid-simple article{
  padding:0 0 26px;
  border-bottom:1px solid rgba(255,255,255,.16);
  background:transparent !important;
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Replace remaining “card” feeling in the business product section */
.business-dark-theme .b2b-editorial{
  background:var(--green-deep) !important;
  padding-top:110px;
  padding-bottom:118px;
}
.business-dark-theme .editorial-columns{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:54px;
  margin-top:48px;
}
.business-dark-theme .editorial-columns article{
  padding:0 0 0 2px;
  border-left:2px solid var(--accent);
}
.business-dark-theme .editorial-columns h3{
  color:#fff !important;
  margin:8px 0 14px;
  font-size:1.75rem;
  line-height:1.16;
}
.business-dark-theme .editorial-columns p{
  color:rgba(255,255,255,.74) !important;
  max-width:34ch;
  line-height:1.68;
}

/* Process section also less boxed, more direct */
.business-dark-theme .business-process{
  padding-top:104px;
  padding-bottom:110px;
}
.business-dark-theme .process-editorial{
  gap:34px;
}
.business-dark-theme .process-editorial > div{
  padding:0 18px 0 0;
}

/* Over Teff-It and Why pages: avoid hard-framed images where possible */
.teff-subhero-fullbleed .subhero-photo{
  border-radius:0 !important;
}
.fact-image-card{
  border-radius:20px;
  overflow:hidden;
  box-shadow:none !important;
}
.fact-image-card:before{
  border-radius:20px;
}

/* Generic image-blocks less “in a card” */
.image-card,
.photo-card,
.panel-image,
.story-image{
  border-radius:0 !important;
  box-shadow:none !important;
}

/* Responsive */
@media(max-width:980px){
  .cta-banner.cta-image-only{
    min-height:540px;
    height:64vw;
  }
  .business-dark-theme .subpage-hero-grid{
    gap:40px;
  }
  .business-dark-theme .subhero-photo{
    min-height:380px;
  }
  .business-dark-theme .business-grain-band{
    min-height:460px;
  }
  .business-dark-theme .editorial-columns{
    grid-template-columns:1fr;
    gap:34px;
  }
}
@media(max-width:640px){
  .cta-banner.cta-image-only{
    min-height:420px;
    height:76vw;
  }
  .business-dark-theme .business-grain-band{
    min-height:380px;
  }
  .business-dark-theme .editorial-columns h3{
    font-size:1.48rem;
  }
}


/* =========================================================
   V3.19 — zakelijke hero zonder foto + dark green product cards
   ========================================================= */

/* Zakelijke hero: geen losse foto meer, maar decoratieve graanillustratie in de achtergrond */
.business-dark-theme .business-subhero {
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.04), transparent 24%),
    radial-gradient(circle at 84% 72%, rgba(255,255,255,.03), transparent 26%),
    linear-gradient(135deg, #072b22 0%, #083328 42%, #0b4535 100%) !important;
}
.business-dark-theme .business-subhero::after {
  content:"";
  position:absolute;
  inset:0;
  background-image:url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20viewBox%3D%270%200%201400%20900%27%3E%0A%20%20%3Cg%20fill%3D%27none%27%20stroke%3D%27%230f5a45%27%20stroke-width%3D%272.6%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%20opacity%3D%270.55%27%3E%0A%20%20%20%20%3Cpath%20d%3D%27M180%20860%20C210%20690%2C%20240%20520%2C%20255%20160%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20280%20C235%20255%2C220%20245%2C205%20235%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20320%20C280%20292%2C298%20282%2C315%20272%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20380%20C225%20355%2C205%20345%2C187%20335%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20430%20C282%20405%2C305%20393%2C324%20382%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20500%20C227%20478%2C207%20468%2C188%20458%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20560%20C286%20534%2C309%20522%2C331%20510%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20620%20C228%20598%2C208%20588%2C187%20577%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20680%20C286%20650%2C310%20638%2C332%20626%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20730%20C228%20708%2C210%20700%2C193%20691%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M255%20790%20C286%20764%2C311%20752%2C333%20741%27/%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%27M540%20850%20C560%20700%2C585%20520%2C598%20210%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20315%20C568%20290%2C550%20280%2C533%20270%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20365%20C628%20340%2C646%20330%2C664%20319%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20430%20C566%20408%2C544%20399%2C524%20388%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20490%20C632%20465%2C653%20452%2C674%20441%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20555%20C566%20530%2C545%20520%2C524%20510%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20620%20C632%20595%2C655%20584%2C677%20571%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20690%20C566%20666%2C544%20656%2C524%20646%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M598%20760%20C632%20735%2C656%20722%2C678%20709%27/%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%27M930%20865%20C940%20720%2C960%20520%2C972%20180%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20295%20C943%20269%2C925%20259%2C907%20248%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20345%20C1000%20321%2C1021%20309%2C1042%20299%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20412%20C943%20387%2C924%20378%2C905%20368%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20470%20C1001%20445%2C1022%20435%2C1044%20423%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20540%20C943%20513%2C923%20503%2C904%20493%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20605%20C1003%20578%2C1024%20566%2C1046%20555%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20675%20C943%20647%2C922%20639%2C904%20629%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M972%20745%20C1004%20719%2C1026%20706%2C1048%20694%27/%3E%0A%0A%20%20%20%20%3Cpath%20d%3D%27M1185%20860%20C1205%20740%2C1230%20600%2C1248%20260%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M1248%20350%20C1222%20328%2C1204%20319%2C1189%20310%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M1248%20404%20C1275%20380%2C1295%20370%2C1314%20360%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M1248%20472%20C1221%20449%2C1203%20440%2C1188%20431%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M1248%20540%20C1276%20516%2C1297%20506%2C1316%20495%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M1248%20612%20C1222%20589%2C1204%20581%2C1188%20571%27/%3E%0A%20%20%20%20%3Cpath%20d%3D%27M1248%20685%20C1277%20660%2C1297%20650%2C1317%20639%27/%3E%0A%20%20%3C/g%3E%0A%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:center bottom;
  background-size:cover;
  opacity:.52;
  pointer-events:none;
}
.business-dark-theme .business-subhero .shell {
  position:relative;
  z-index:2;
}
.business-subhero-copy-only {
  display:block !important;
  max-width:980px;
  padding-top:28px;
  padding-bottom:36px;
}
.business-subhero-copy-only > div:first-child {
  max-width:780px;
}
.business-dark-theme .business-subhero h1 {
  max-width:9ch;
  margin-bottom:28px;
}
.business-dark-theme .business-subhero p {
  max-width:34ch;
  font-size:1.1rem;
  line-height:1.7;
}
.business-dark-theme .business-subhero .button {
  margin-top:14px;
}
.business-dark-theme .business-subhero .subhero-photo {
  display:none !important;
}

/* Proces-blok: geen nummers, maar oranje lijnen links + meer ruimte */
.business-dark-theme .process-editorial {
  gap:46px;
  margin-top:52px;
}
.business-dark-theme .process-editorial > div {
  position:relative;
  padding:6px 26px 0 26px;
  border-left:2px solid rgba(255,255,255,.14);
}
.business-dark-theme .process-editorial > div::before {
  content:"";
  position:absolute;
  left:0;
  top:8px;
  width:3px;
  height:64px;
  border-radius:6px;
  background:var(--accent);
}
.business-dark-theme .process-editorial > div span {
  display:none !important;
}
.business-dark-theme .process-editorial h3 {
  margin-top:0;
  margin-bottom:10px;
  color:#fff !important;
}
.business-dark-theme .process-editorial p {
  margin:0;
  color:rgba(255,255,255,.74) !important;
  max-width:26ch;
}

/* Desem- en koekenvakken: donkerder, consistenter en klaar voor nieuwe beelden */
.product-card,
.cookie-card {
  background:linear-gradient(180deg, #0b3a2d 0%, #072c22 100%) !important;
  border:1px solid rgba(255,255,255,.06);
  box-shadow:none !important;
  overflow:hidden;
}
.product-card h3,
.cookie-card h3,
.product-card p,
.cookie-card p {
  color:#fff !important;
}
.product-card p,
.cookie-card p {
  color:rgba(255,255,255,.78) !important;
}
.product-card .product-info,
.cookie-card {
  padding-bottom:0;
}
.product-card .product-photo,
.cookie-card .cookie-photo {
  border-radius:0 !important;
  box-shadow:none !important;
  border-bottom:1px solid rgba(255,255,255,.08);
  background-color:#0d3429;
}
.product-card .product-info {
  padding:22px 22px 20px;
}
.cookie-card {
  padding:0 0 24px !important;
}
.cookie-card h3,
.cookie-card p,
.cookie-card .button {
  margin-left:22px;
  margin-right:22px;
}
.cookie-card h3 {
  margin-top:18px;
}
.cookie-card .button {
  margin-top:10px;
}
.product-card .round-arrow {
  color:#fff;
  border-color:rgba(255,255,255,.18);
}
.product-card .round-arrow:hover {
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
}

/* Buttons on product cards keep the orange hover language */
.cookie-card .button.button-green {
  background:rgba(255,255,255,.06) !important;
  border-color:rgba(255,255,255,.08) !important;
  color:#fff !important;
}
.cookie-card .button.button-green:hover {
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}

/* Slightly more serious section feeling under dark cards */
.product-section .bread-grid,
.cookie-section .cookie-grid {
  gap:26px;
}

/* Mobile adjustments */
@media(max-width:980px) {
  .business-dark-theme .process-editorial {
    gap:28px;
  }
  .business-dark-theme .process-editorial > div {
    padding-left:22px;
  }
  .business-dark-theme .process-editorial > div::before {
    height:52px;
  }
  .business-subhero-copy-only > div:first-child {
    max-width:100%;
  }
}

@media(max-width:640px) {
  .business-dark-theme .business-subhero h1 {
    max-width:10ch;
  }
  .business-dark-theme .business-subhero p {
    max-width:none;
  }
  .product-card .product-info,
  .cookie-card h3,
  .cookie-card p,
  .cookie-card .button {
    margin-left:18px;
    margin-right:18px;
  }
  .product-card .product-info {
    padding:18px 18px 18px;
  }
}


/* =========================================================
   V3.19.1 — fix: sport desem cards match koek cards
   ========================================================= */

.product-section .bread-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:26px !important;
}

.product-section .bread-grid .product-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:100%;
  background:linear-gradient(180deg,#0b3a2d 0%,#072c22 100%) !important;
  border:1px solid rgba(255,255,255,.06) !important;
  border-radius:18px !important;
  overflow:hidden !important;
  box-shadow:none !important;
}

.product-section .bread-grid .product-photo{
  display:block !important;
  width:100% !important;
  min-height:250px !important;
  aspect-ratio:1.38 !important;
  background-size:cover !important;
  background-position:center !important;
  background-color:#0d3429 !important;
  border-radius:0 !important;
  border-bottom:1px solid rgba(255,255,255,.08) !important;
}

.product-section .bread-grid .product-info{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:18px !important;
  padding:22px !important;
  flex:1;
}

.product-section .bread-grid .product-info h3{
  color:#fff !important;
  margin:0 0 7px !important;
}

.product-section .bread-grid .product-info p{
  color:rgba(255,255,255,.76) !important;
  margin:0 !important;
}

.product-section .bread-grid .round-arrow{
  flex:0 0 auto;
  color:#fff !important;
  border-color:rgba(255,255,255,.22) !important;
}

.product-section .bread-grid .round-arrow:hover{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}

@media(max-width:1100px){
  .product-section .bread-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:640px){
  .product-section .bread-grid{
    grid-template-columns:1fr !important;
  }
  .product-section .bread-grid .product-photo{
    min-height:230px !important;
  }
}


/* =========================================================
   V3.19.2 — exact same product card for desems + koeken
   ========================================================= */
.bread-grid,
.cookie-grid,
.archive-grid,
.archive-cookie-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:24px !important;
}

.unified-product-card{
  display:flex !important;
  flex-direction:column !important;
  min-height:100%;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#073d2c !important;
  border:1px solid rgba(7,61,44,.38) !important;
  box-shadow:none !important;
  padding:0 !important;
}

.unified-product-card .unified-product-photo{
  display:block !important;
  width:100% !important;
  aspect-ratio:1 / 1 !important;
  min-height:0 !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  flex:0 0 auto;
}

.unified-product-body{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  flex:1;
  padding:22px 22px 24px;
  background:#073d2c;
}

.unified-product-body h3{
  margin:0 0 8px !important;
  color:#fff !important;
  font-size:1.03rem !important;
  line-height:1.2 !important;
}

.unified-product-body p{
  margin:0 0 24px !important;
  color:rgba(255,255,255,.82) !important;
  font-size:.91rem !important;
  line-height:1.55 !important;
  max-width:30ch;
}

.unified-product-button{
  margin-top:auto !important;
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:11px 17px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#fff !important;
  font-size:.86rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.unified-product-button:hover,
.unified-product-button:focus-visible{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}

.unified-product-card{
  transition:transform .3s var(--motion-ease),box-shadow .3s var(--motion-ease);
}
.unified-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(4,45,32,.15) !important;
}
.unified-product-card:hover .unified-product-photo{
  transform:scale(1.015);
}

@media(max-width:1100px){
  .bread-grid,
  .cookie-grid,
  .archive-grid,
  .archive-cookie-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}
@media(max-width:640px){
  .bread-grid,
  .cookie-grid,
  .archive-grid,
  .archive-cookie-grid{
    grid-template-columns:1fr !important;
  }
  .unified-product-card .unified-product-photo{
    aspect-ratio:1.12 / 1 !important;
  }
}


/* =========================================================
   V3.19.3 — isolated product card component
   No legacy product-card/cookie-card classes are used.
   ========================================================= */

.bread-grid,
.cookie-grid,
.archive-grid,
.archive-cookie-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:24px !important;
}

.teff-product-card{
  display:flex !important;
  flex-direction:column !important;
  min-width:0;
  min-height:100%;
  margin:0 !important;
  padding:0 !important;
  overflow:hidden !important;
  border-radius:18px !important;
  background:#073d2c !important;
  border:1px solid rgba(7,61,44,.42) !important;
  box-shadow:none !important;
  color:#fff !important;
  transition:transform .3s var(--motion-ease),box-shadow .3s var(--motion-ease);
}

.teff-product-card__image{
  display:block !important;
  width:100% !important;
  height:auto !important;
  min-height:0 !important;
  aspect-ratio:1 / 1 !important;
  flex:0 0 auto !important;
  background-size:cover !important;
  background-position:center !important;
  background-repeat:no-repeat !important;
  background-color:#0d3429 !important;
  border:0 !important;
  border-radius:0 !important;
  box-shadow:none !important;
  transition:transform .45s var(--motion-ease);
}

.teff-product-card__body{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  flex:1 1 auto !important;
  width:100% !important;
  box-sizing:border-box !important;
  padding:22px 22px 24px !important;
  background:#073d2c !important;
}

.teff-product-card__body h3{
  margin:0 0 8px !important;
  padding:0 !important;
  color:#fff !important;
  font-size:1.03rem !important;
  line-height:1.22 !important;
  font-weight:800 !important;
}

.teff-product-card__body p{
  margin:0 0 24px !important;
  padding:0 !important;
  color:rgba(255,255,255,.82) !important;
  font-size:.91rem !important;
  line-height:1.55 !important;
  max-width:30ch !important;
}

.teff-product-card__button{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  margin:auto 0 0 !important;
  padding:11px 17px !important;
  min-height:42px !important;
  width:auto !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.08) !important;
  border:1px solid rgba(255,255,255,.15) !important;
  color:#fff !important;
  text-decoration:none !important;
  font-size:.86rem !important;
  font-weight:800 !important;
  line-height:1 !important;
  box-shadow:none !important;
}

.teff-product-card__button:hover,
.teff-product-card__button:focus-visible{
  background:var(--accent) !important;
  border-color:var(--accent) !important;
  color:#fff !important;
}

.teff-product-card:hover{
  transform:translateY(-4px);
  box-shadow:0 18px 34px rgba(4,45,32,.15) !important;
}

.teff-product-card:hover .teff-product-card__image{
  transform:scale(1.015);
}

@media(max-width:1100px){
  .bread-grid,
  .cookie-grid,
  .archive-grid,
  .archive-cookie-grid{
    grid-template-columns:repeat(2,minmax(0,1fr)) !important;
  }
}

@media(max-width:640px){
  .bread-grid,
  .cookie-grid,
  .archive-grid,
  .archive-cookie-grid{
    grid-template-columns:1fr !important;
  }

  .teff-product-card__image{
    aspect-ratio:1.12 / 1 !important;
  }

  .teff-product-card__body{
    padding:20px !important;
  }
}


/* =========================================================
   V3.20 — completely rebuilt product sections
   ========================================================= */

.v320-products{
  padding-top:136px;
  padding-bottom:136px;
}

.v320-products--bread{
  background:var(--surface-warm);
}

.v320-products--cookies{
  background:var(--surface-soft);
}

.v320-products__head{
  display:grid;
  grid-template-columns:1.12fr .88fr;
  align-items:end;
  gap:80px;
  margin-bottom:52px;
}

.v320-products__heading{
  max-width:760px;
}

.v320-products__heading h2{
  margin:10px 0 0;
  max-width:10.5ch;
  font-size:clamp(3.2rem,5.25vw,5.8rem);
  line-height:.95;
}

.v320-products__intro{
  max-width:500px;
  justify-self:end;
  padding-bottom:4px;
}

.v320-products__intro p{
  margin:0 0 18px;
  color:var(--muted);
  font-size:1rem;
  line-height:1.72;
}

.v320-products__grid{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:24px;
}

/* NEW product card */
.v320-card{
  position:relative;
  display:flex;
  flex-direction:column;
  min-width:0;
  overflow:hidden;
  border-radius:22px;
  background:#073d2c;
  border:1px solid rgba(4,45,32,.22);
  box-shadow:0 12px 28px rgba(45,34,22,.06);
  transition:
    transform .35s var(--motion-ease),
    box-shadow .35s var(--motion-ease);
}

.v320-card__image{
  position:relative;
  display:block;
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  background-color:#0b3c2e;
  transition:transform .5s var(--motion-ease);
}

.v320-card__image::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg,transparent 70%,rgba(7,61,44,.08));
  pointer-events:none;
}

.v320-card__accent{
  position:absolute;
  left:22px;
  bottom:0;
  z-index:2;
  width:54px;
  height:5px;
  border-radius:999px 999px 0 0;
  background:var(--accent);
}

.v320-card__body{
  display:flex;
  flex-direction:column;
  flex:1;
  min-height:196px;
  padding:23px 22px 24px;
  background:
    radial-gradient(circle at 100% 0%,rgba(255,255,255,.045),transparent 28%),
    #073d2c;
}

.v320-card__body h3{
  margin:0 0 8px;
  color:#fff;
  font-size:1.05rem;
  line-height:1.2;
}

.v320-card__body p{
  margin:0 0 24px;
  color:rgba(255,255,255,.78);
  font-size:.91rem;
  line-height:1.55;
}

.v320-card__button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  margin-top:auto;
  align-self:flex-start;
  min-height:42px;
  padding:11px 17px;
  border:1px solid rgba(255,255,255,.15);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#fff;
  text-decoration:none;
  font-size:.86rem;
  font-weight:800;
  transition:
    background .28s ease,
    border-color .28s ease,
    transform .28s ease;
}

.v320-card__button span{
  transition:transform .28s ease;
}

.v320-card:hover{
  transform:translateY(-6px);
  box-shadow:0 20px 42px rgba(4,45,32,.15);
}

.v320-card:hover .v320-card__image{
  transform:scale(1.025);
}

.v320-card__button:hover,
.v320-card__button:focus-visible{
  background:var(--accent);
  border-color:var(--accent);
  color:#fff;
  transform:translateY(-1px);
}

.v320-card__button:hover span{
  transform:translateX(3px);
}

/* Koeken layout slightly staggered, same cards */
.v320-products--cookies .v320-products__head{
  grid-template-columns:.9fr 1.1fr;
}

.v320-products--cookies .v320-products__heading{
  grid-column:2;
  grid-row:1;
  justify-self:end;
}

.v320-products--cookies .v320-products__intro{
  grid-column:1;
  grid-row:1;
  justify-self:start;
}

/* neutralise legacy grids in case old CSS remains */
.v320-products .bread-grid,
.v320-products .cookie-grid,
.v320-products .teff-product-card,
.v320-products .product-card,
.v320-products .cookie-card{
  all:unset;
}

@media(max-width:1100px){
  .v320-products__grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .v320-products__head,
  .v320-products--cookies .v320-products__head{
    grid-template-columns:1fr;
    gap:24px;
  }

  .v320-products--cookies .v320-products__heading,
  .v320-products--cookies .v320-products__intro{
    grid-column:1;
    grid-row:auto;
    justify-self:start;
  }

  .v320-products__intro{
    justify-self:start;
  }
}

@media(max-width:640px){
  .v320-products{
    padding-top:84px;
    padding-bottom:84px;
  }

  .v320-products__grid{
    grid-template-columns:1fr;
  }

  .v320-card__image{
    aspect-ratio:1.15 / 1;
  }

  .v320-card__body{
    min-height:0;
  }
}


/* V3.20.1 preview-only build marker */
.teff-preview-build-marker{
  position:fixed;
  right:14px;
  bottom:14px;
  z-index:99999;
  padding:9px 12px;
  border-radius:999px;
  background:#f07a22;
  color:#fff;
  font:800 11px/1.1 system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  letter-spacing:.08em;
  box-shadow:0 8px 22px rgba(0,0,0,.16);
  pointer-events:none;
}


/* =========================================================
   V3.20.3 — calm editorial hero for Onze producten
   Inspired by Zakelijk hero, but lighter and softer.
   ========================================================= */

.products-hero-v3203{
  position:relative;
  overflow:hidden;
  min-height:560px;
  display:flex;
  align-items:flex-end;
  padding:150px 0 92px;
  background:
    radial-gradient(circle at 78% 26%, rgba(255,255,255,.42), transparent 34%),
    linear-gradient(135deg,#ecd4b7 0%,#f2dfc8 48%,#ead0b0 100%);
}

.products-hero-v3203__inner{
  position:relative;
  z-index:2;
  width:100%;
}

.products-hero-v3203__copy{
  max-width:820px;
}

.products-hero-v3203__copy .kicker{
  margin-bottom:16px;
  color:#a85e29;
}

.products-hero-v3203__copy h1{
  margin:0;
  max-width:10.5ch;
  color:#073d2c;
  font-size:clamp(4rem,7.1vw,7.8rem);
  line-height:.91;
  letter-spacing:-.035em;
}

.products-hero-v3203__copy p{
  margin:28px 0 0;
  max-width:610px;
  color:rgba(7,61,44,.72);
  font-size:1.08rem;
  line-height:1.7;
}

/* subtle grain drawing, calmer than Zakelijk */
.products-hero-v3203__grain{
  position:absolute;
  right:-2%;
  bottom:-2%;
  width:min(46vw,720px);
  height:96%;
  opacity:.28;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  filter:saturate(.7);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 720 640' fill='none'%3E%3Cg stroke='%237d8b67' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' opacity='.78'%3E%3Cpath d='M620 620C602 493 568 359 503 215'/%3E%3Cpath d='M533 620C525 492 498 345 446 177'/%3E%3Cpath d='M446 620C454 477 441 332 406 137'/%3E%3Cpath d='M361 620C380 500 383 353 366 198'/%3E%3Cpath d='M281 620C309 506 323 386 316 256'/%3E%3Cpath d='M202 620C239 514 261 410 271 306'/%3E%3Cpath d='M497 217c26 9 42 27 54 52'/%3E%3Cpath d='M497 217c-4 29 3 50 20 70'/%3E%3Cpath d='M446 177c25 10 41 29 51 54'/%3E%3Cpath d='M446 177c-6 30 0 53 15 74'/%3E%3Cpath d='M407 137c24 12 38 31 46 56'/%3E%3Cpath d='M407 137c-8 30-4 54 10 76'/%3E%3Cpath d='M366 199c22 10 37 27 46 49'/%3E%3Cpath d='M366 199c-8 28-4 49 9 68'/%3E%3Cpath d='M316 256c21 9 35 24 44 44'/%3E%3Cpath d='M316 256c-8 24-5 45 7 62'/%3E%3Cpath d='M271 306c19 8 32 22 40 39'/%3E%3Cpath d='M271 306c-8 23-6 41 5 57'/%3E%3C/g%3E%3C/svg%3E");
}

.products-hero-v3203::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:1px;
  background:rgba(7,61,44,.10);
}

@media(max-width:900px){
  .products-hero-v3203{
    min-height:500px;
    padding:132px 0 72px;
  }

  .products-hero-v3203__grain{
    width:68vw;
    right:-18%;
    opacity:.18;
  }

  .products-hero-v3203__copy{
    max-width:680px;
  }
}

@media(max-width:640px){
  .products-hero-v3203{
    min-height:auto;
    padding:118px 0 64px;
  }

  .products-hero-v3203__copy h1{
    font-size:clamp(3.2rem,15vw,5rem);
  }

  .products-hero-v3203__copy p{
    font-size:.98rem;
    max-width:34rem;
  }

  .products-hero-v3203__grain{
    width:82vw;
    right:-30%;
    bottom:-10%;
    opacity:.13;
  }
}


/* =========================================================
   V3.23 — isolated final-stage hero refinements only
   No global section/image/overlay selectors.
   ========================================================= */

/* HOME */
.home-hero-v323{
  position:relative;
  overflow:hidden;
  min-height:760px;
  padding:150px 0 0;
  background:#0a3a2d;
  color:#fff;
}

.home-hero-v323__photo{
  position:absolute;
  inset:0 0 0 auto;
  width:56%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}

.home-hero-v323__fade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      #0a3a2d 0%,
      #0a3a2d 38%,
      rgba(10,58,45,.92) 48%,
      rgba(10,58,45,.54) 64%,
      rgba(10,58,45,.14) 82%,
      rgba(10,58,45,0) 100%);
  pointer-events:none;
}

.home-hero-v323__grain{
  position:absolute;
  right:2%;
  bottom:5%;
  width:34%;
  height:70%;
  z-index:1;
  opacity:.09;
  pointer-events:none;
  background-repeat:no-repeat;
  background-position:right bottom;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 500 600' fill='none'%3E%3Cg stroke='%23f1a267' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M420 580C402 460 370 330 318 190'/%3E%3Cpath d='M332 580C330 452 309 312 270 145'/%3E%3Cpath d='M248 580C261 448 253 313 225 178'/%3E%3Cpath d='M318 190c25 10 41 29 51 53'/%3E%3Cpath d='M318 190c-20 17-31 37-36 61'/%3E%3Cpath d='M270 145c23 11 38 28 47 51'/%3E%3Cpath d='M270 145c-18 17-28 35-32 58'/%3E%3Cpath d='M225 178c21 10 34 25 42 45'/%3E%3Cpath d='M225 178c-17 15-26 32-30 52'/%3E%3C/g%3E%3C/svg%3E");
}

.home-hero-v323__inner{
  position:relative;
  z-index:2;
  min-height:545px;
  display:flex;
  align-items:center;
}

.home-hero-v323__copy{
  max-width:720px;
  padding-bottom:28px;
}

.home-hero-v323 .kicker{
  color:#f1a267;
  margin-bottom:16px;
}

.home-hero-v323 h1{
  margin:0;
  max-width:8.8ch;
  color:#fff;
  font-size:clamp(4.2rem,6.8vw,7.8rem);
  line-height:.91;
  letter-spacing:-.04em;
}

.home-hero-v323__copy p{
  margin:28px 0 0;
  max-width:610px;
  color:rgba(255,255,255,.78);
  font-size:1.05rem;
  line-height:1.7;
}

.home-hero-v323__actions{
  display:flex;
  align-items:center;
  gap:24px;
  flex-wrap:wrap;
  margin-top:32px;
}

.home-hero-v323__primary{
  background:#f07a22 !important;
  border-color:#f07a22 !important;
  color:#fff !important;
}

.home-hero-v323__link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:#fff;
  text-decoration:none;
  font-weight:800;
}

.home-hero-v323__bar{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.035);
  backdrop-filter:blur(3px);
}

.home-hero-v323__barinner{
  display:flex;
  flex-wrap:wrap;
  gap:18px 32px;
  padding-top:18px;
  padding-bottom:18px;
}

.home-hero-v323__barinner span{
  color:rgba(255,255,255,.66);
  font-size:.77rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

/* OUR PRODUCTS */
.products-hero-v323{
  position:relative;
  overflow:hidden;
  min-height:560px;
  padding:142px 0 0;
  background:#edd8c0;
}

.products-hero-v323__photo{
  position:absolute;
  inset:0 0 0 auto;
  width:50%;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  z-index:0;
}

.products-hero-v323__fade{
  position:absolute;
  inset:0;
  z-index:1;
  background:
    linear-gradient(90deg,
      #edd8c0 0%,
      #edd8c0 43%,
      rgba(237,216,192,.94) 53%,
      rgba(237,216,192,.58) 68%,
      rgba(237,216,192,.10) 88%,
      rgba(237,216,192,0) 100%);
  pointer-events:none;
}

.products-hero-v323__inner{
  position:relative;
  z-index:2;
  min-height:360px;
  display:flex;
  align-items:center;
}

.products-hero-v323__copy{
  max-width:700px;
}

.products-hero-v323 .kicker{
  color:#a85e29;
  margin-bottom:16px;
}

.products-hero-v323 h1{
  margin:0;
  max-width:10.5ch;
  color:#073d2c;
  font-size:clamp(3.8rem,6vw,6.7rem);
  line-height:.93;
  letter-spacing:-.035em;
}

.products-hero-v323__copy p{
  margin:26px 0 0;
  max-width:570px;
  color:rgba(7,61,44,.72);
  font-size:1.04rem;
  line-height:1.7;
}

.products-hero-v323__bar{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(7,61,44,.10);
  background:rgba(255,248,241,.38);
  backdrop-filter:blur(3px);
}

.products-hero-v323__barinner{
  display:flex;
  flex-wrap:wrap;
  gap:18px 32px;
  padding-top:18px;
  padding-bottom:18px;
}

.products-hero-v323__barinner span{
  color:rgba(7,61,44,.68);
  font-size:.77rem;
  letter-spacing:.09em;
  text-transform:uppercase;
}

@media(max-width:900px){
  .home-hero-v323__photo{width:68%; opacity:.72;}
  .home-hero-v323__fade{
    background:linear-gradient(90deg,#0a3a2d 0%,#0a3a2d 45%,rgba(10,58,45,.78) 66%,rgba(10,58,45,.20) 100%);
  }
  .products-hero-v323__photo{width:62%; opacity:.82;}
  .products-hero-v323__fade{
    background:linear-gradient(90deg,#edd8c0 0%,#edd8c0 48%,rgba(237,216,192,.80) 70%,rgba(237,216,192,.18) 100%);
  }
}

@media(max-width:640px){
  .home-hero-v323{
    min-height:auto;
    padding-top:112px;
  }
  .home-hero-v323__inner{min-height:520px;}
  .home-hero-v323 h1{font-size:clamp(3.5rem,15vw,5.4rem);}
  .home-hero-v323__photo{width:100%; opacity:.42;}
  .home-hero-v323__fade{
    background:linear-gradient(90deg,rgba(10,58,45,.98) 0%,rgba(10,58,45,.88) 58%,rgba(10,58,45,.48) 100%);
  }

  .products-hero-v323{
    min-height:auto;
    padding-top:112px;
  }
  .products-hero-v323__inner{min-height:360px;}
  .products-hero-v323 h1{font-size:clamp(3rem,13vw,4.7rem);}
  .products-hero-v323__photo{width:100%; opacity:.34;}
  .products-hero-v323__fade{
    background:linear-gradient(90deg,rgba(237,216,192,.98) 0%,rgba(237,216,192,.88) 62%,rgba(237,216,192,.50) 100%);
  }
}


/* =========================================================
   V3.24 — final hero image visibility refinement only
   ========================================================= */

/* HOME: image more visible, fade starts later */
.home-hero-v323__photo{
  width:60% !important;
  background-position:center 48% !important;
}

.home-hero-v323__fade{
  background:
    linear-gradient(90deg,
      #0a3a2d 0%,
      #0a3a2d 30%,
      rgba(10,58,45,.98) 39%,
      rgba(10,58,45,.78) 51%,
      rgba(10,58,45,.42) 64%,
      rgba(10,58,45,.12) 78%,
      rgba(10,58,45,0) 100%) !important;
}

/* OUR PRODUCTS: calmer sand fade, image integrated in the bar */
.products-hero-v323__photo{
  width:56% !important;
  background-position:center 50% !important;
}

.products-hero-v323__fade{
  background:
    linear-gradient(90deg,
      #edd8c0 0%,
      #edd8c0 34%,
      rgba(237,216,192,.98) 43%,
      rgba(237,216,192,.78) 55%,
      rgba(237,216,192,.44) 68%,
      rgba(237,216,192,.12) 82%,
      rgba(237,216,192,0) 100%) !important;
}

@media(max-width:900px){
  .home-hero-v323__photo{
    width:72% !important;
    opacity:.78 !important;
  }

  .home-hero-v323__fade{
    background:
      linear-gradient(90deg,
        #0a3a2d 0%,
        #0a3a2d 40%,
        rgba(10,58,45,.86) 58%,
        rgba(10,58,45,.48) 76%,
        rgba(10,58,45,.12) 100%) !important;
  }

  .products-hero-v323__photo{
    width:68% !important;
    opacity:.88 !important;
  }

  .products-hero-v323__fade{
    background:
      linear-gradient(90deg,
        #edd8c0 0%,
        #edd8c0 43%,
        rgba(237,216,192,.86) 60%,
        rgba(237,216,192,.48) 78%,
        rgba(237,216,192,.10) 100%) !important;
  }
}

@media(max-width:640px){
  .home-hero-v323__photo{
    width:100% !important;
    opacity:.48 !important;
  }

  .home-hero-v323__fade{
    background:
      linear-gradient(90deg,
        rgba(10,58,45,.98) 0%,
        rgba(10,58,45,.90) 55%,
        rgba(10,58,45,.54) 100%) !important;
  }

  .products-hero-v323__photo{
    width:100% !important;
    opacity:.42 !important;
  }

  .products-hero-v323__fade{
    background:
      linear-gradient(90deg,
        rgba(237,216,192,.98) 0%,
        rgba(237,216,192,.90) 58%,
        rgba(237,216,192,.54) 100%) !important;
  }
}


/* =========================================================
   V3.24.1 — softer Home fade + remove hero info bars
   ========================================================= */

/* Home: less green coverage, more image visible */
.home-hero-v323{
  background:#123f33 !important;
}

.home-hero-v323__photo{
  width:64% !important;
}

.home-hero-v323__fade{
  background:
    linear-gradient(90deg,
      #123f33 0%,
      #123f33 22%,
      rgba(18,63,51,.96) 31%,
      rgba(18,63,51,.72) 42%,
      rgba(18,63,51,.42) 53%,
      rgba(18,63,51,.18) 66%,
      rgba(18,63,51,.04) 78%,
      rgba(18,63,51,0) 100%) !important;
}

/* Ensure removed bars never reserve space */
.home-hero-v323__bar,
.products-hero-v323__bar{
  display:none !important;
}

@media(max-width:900px){
  .home-hero-v323__photo{
    width:76% !important;
    opacity:.84 !important;
  }

  .home-hero-v323__fade{
    background:
      linear-gradient(90deg,
        #123f33 0%,
        #123f33 32%,
        rgba(18,63,51,.82) 48%,
        rgba(18,63,51,.46) 66%,
        rgba(18,63,51,.10) 100%) !important;
  }
}

@media(max-width:640px){
  .home-hero-v323__photo{
    width:100% !important;
    opacity:.54 !important;
  }

  .home-hero-v323__fade{
    background:
      linear-gradient(90deg,
        rgba(18,63,51,.97) 0%,
        rgba(18,63,51,.84) 50%,
        rgba(18,63,51,.42) 100%) !important;
  }
}


/* =========================================================
   V3.24.2 — seamless full-width Home hero fade
   Photo spans the whole hero. Dark green is only an overlay,
   so there is no visible vertical transition line.
   ========================================================= */

.home-hero-v323{
  background:#0b3b2f !important;
}

/* Let the actual photograph run underneath the complete hero. */
.home-hero-v323__photo{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  background-position:center center !important;
}

/* One continuous dark-green veil:
   opaque on the left for text readability,
   progressively transparent toward the right. */
.home-hero-v323__fade{
  inset:0 !important;
  background:
    linear-gradient(
      90deg,
      rgba(8,49,38,.98) 0%,
      rgba(8,49,38,.96) 12%,
      rgba(8,49,38,.91) 25%,
      rgba(8,49,38,.80) 38%,
      rgba(8,49,38,.62) 50%,
      rgba(8,49,38,.42) 62%,
      rgba(8,49,38,.23) 73%,
      rgba(8,49,38,.10) 84%,
      rgba(8,49,38,.02) 94%,
      rgba(8,49,38,0) 100%
    ) !important;
}

/* Keep decorative grain subtle so it cannot read as a seam. */
.home-hero-v323__grain{
  opacity:.055 !important;
}

@media(max-width:900px){
  .home-hero-v323__photo{
    width:100% !important;
    opacity:1 !important;
    background-position:58% center !important;
  }

  .home-hero-v323__fade{
    background:
      linear-gradient(
        90deg,
        rgba(8,49,38,.98) 0%,
        rgba(8,49,38,.95) 20%,
        rgba(8,49,38,.84) 38%,
        rgba(8,49,38,.64) 54%,
        rgba(8,49,38,.38) 70%,
        rgba(8,49,38,.16) 85%,
        rgba(8,49,38,.02) 100%
      ) !important;
  }
}

@media(max-width:640px){
  .home-hero-v323__photo{
    width:100% !important;
    opacity:1 !important;
    background-position:62% center !important;
  }

  /* Mobile stays darker for legibility, but is still one continuous fade. */
  .home-hero-v323__fade{
    background:
      linear-gradient(
        90deg,
        rgba(8,49,38,.97) 0%,
        rgba(8,49,38,.93) 32%,
        rgba(8,49,38,.78) 56%,
        rgba(8,49,38,.52) 76%,
        rgba(8,49,38,.26) 90%,
        rgba(8,49,38,.12) 100%
      ) !important;
  }
}


/* =========================================================
   V3.25 — horizontal editorial product rail
   Scope: V3.20 product sections only.
   ========================================================= */

.v320-products{
  overflow:hidden;
}

/* Let the rail visually continue beyond the standard content column. */
.v320-products .shell{
  overflow:visible;
}

/* Replace fixed 4-column grid with a horizontal snap rail. */
.v320-products__grid{
  display:flex !important;
  grid-template-columns:none !important;
  gap:24px !important;
  overflow-x:auto !important;
  overflow-y:visible !important;
  scroll-snap-type:x mandatory;
  scroll-padding-left:0;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior-inline:contain;
  padding:6px max(24px, calc((100vw - min(1240px, calc(100vw - 48px))) / 2)) 34px 0;
  margin-right:calc(50% - 50vw);
  scrollbar-width:none;
  cursor:grab;
}

.v320-products__grid::-webkit-scrollbar{
  display:none;
}

.v320-products__grid:active{
  cursor:grabbing;
}

/* Wider cards: roughly 3 visible on large desktop, with next card peeking in. */
.v320-card{
  flex:0 0 clamp(330px, 29vw, 430px) !important;
  width:clamp(330px, 29vw, 430px) !important;
  min-height:100%;
  scroll-snap-align:start;
  scroll-snap-stop:normal;
}

/* Give imagery more presence in the wider card format. */
.v320-card__image{
  aspect-ratio:1.18 / 1 !important;
}

.v320-card__body{
  min-height:210px !important;
  padding:25px 24px 26px !important;
}

.v320-card__body h3{
  font-size:1.12rem !important;
}

.v320-card__body p{
  max-width:34ch;
}

/* Subtle visual cue that more content continues horizontally. */
.v320-products .shell{
  position:relative;
}

.v320-products .shell::after{
  content:"";
  position:absolute;
  z-index:4;
  right:calc(50% - 50vw);
  bottom:34px;
  width:86px;
  height:calc(100% - 190px);
  max-height:470px;
  pointer-events:none;
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--surface-soft));
  opacity:.34;
}

.v320-products--bread .shell::after{
  background:linear-gradient(90deg, rgba(255,255,255,0), var(--surface-warm));
}

@media(max-width:1100px){
  .v320-products__grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:22px !important;
  }

  .v320-card{
    flex-basis:clamp(320px, 44vw, 400px) !important;
    width:clamp(320px, 44vw, 400px) !important;
  }

  .v320-products .shell::after{
    width:64px;
  }
}

@media(max-width:640px){
  .v320-products__grid{
    display:flex !important;
    grid-template-columns:none !important;
    gap:16px !important;
    margin-right:calc(50% - 50vw);
    padding-right:24px;
    padding-bottom:24px;
  }

  /* One large card plus an obvious peek of the next. */
  .v320-card{
    flex:0 0 min(82vw, 360px) !important;
    width:min(82vw, 360px) !important;
  }

  .v320-card__image{
    aspect-ratio:1.08 / 1 !important;
  }

  .v320-card__body{
    min-height:0 !important;
    padding:21px 20px 22px !important;
  }

  .v320-products .shell::after{
    display:none;
  }
}


/* =========================================================
   V3.27 — sharper editorial product rails
   Scope: product rails/cards only.
   ========================================================= */

/* More breathing room around the rail */
.v320-products__grid{
  gap:28px !important;
  padding-bottom:38px !important;
}

/* Sharper, more architectural card */
.v320-card{
  position:relative;
  overflow:hidden !important;
  border-radius:6px !important;
  background:#073d2c !important;
  border:1px solid rgba(7,61,44,.26) !important;
  box-shadow:0 12px 28px rgba(4,45,32,.07) !important;

  /* subtle cut corner */
  clip-path:polygon(
    0 0,
    calc(100% - 22px) 0,
    100% 22px,
    100% 100%,
    0 100%
  );
}

/* Remove old short accent and replace it with a full-width rule */
.v320-card__accent{
  left:0 !important;
  bottom:0 !important;
  width:100% !important;
  height:5px !important;
  border-radius:0 !important;
  background:#f07a22 !important;
}

/* Image slightly wider/lower for editorial feel */
.v320-card__image{
  aspect-ratio:1.22 / 1 !important;
}

/* Cleaner, flatter content area */
.v320-card__body{
  position:relative;
  min-height:218px !important;
  padding:24px 24px 26px !important;
  background:#073d2c !important;
}

/* Product names as a deliberate orange brand cue */
.v320-card__body h3{
  margin-bottom:10px !important;
  color:#f39a54 !important;
  font-size:1.14rem !important;
  letter-spacing:-.01em;
}

/* Keep descriptions quiet */
.v320-card__body p{
  color:rgba(255,255,255,.76) !important;
  font-size:.92rem !important;
  line-height:1.58 !important;
}

/* Straighter CTA with a stronger orange interaction */
.v320-card__button{
  min-height:40px !important;
  padding:10px 15px !important;
  border-radius:3px !important;
  border:1px solid rgba(255,255,255,.18) !important;
  background:transparent !important;
  color:#fff !important;
  font-size:.82rem !important;
  letter-spacing:.015em;
}

.v320-card__button span{
  color:#f39a54;
}

.v320-card__button:hover,
.v320-card__button:focus-visible{
  background:#f07a22 !important;
  border-color:#f07a22 !important;
  color:#fff !important;
}

.v320-card__button:hover span,
.v320-card__button:focus-visible span{
  color:#fff !important;
}

/* Slightly more confident hover */
.v320-card:hover{
  transform:translateY(-5px) !important;
  box-shadow:0 22px 44px rgba(4,45,32,.15) !important;
}

/* Tiny rail cue: an orange baseline near the left edge */
.v320-products__grid{
  border-bottom:1px solid rgba(7,61,44,.10);
}

.v320-products__grid::before{
  content:"";
  flex:0 0 0;
  width:0;
}

/* Desktop cursor makes drag behavior obvious */
@media(hover:hover) and (pointer:fine){
  .v320-products__grid{
    cursor:grab;
  }

  .v320-products__grid:active{
    cursor:grabbing;
  }
}

@media(max-width:640px){
  .v320-products__grid{
    gap:18px !important;
    padding-bottom:28px !important;
  }

  .v320-card{
    border-radius:4px !important;
    clip-path:polygon(
      0 0,
      calc(100% - 16px) 0,
      100% 16px,
      100% 100%,
      0 100%
    );
  }

  .v320-card__body{
    padding:21px 20px 22px !important;
  }
}


/* =========================================================
   V3.28 — larger Our Products hero image + orange Teff ticker
   Scope: Our Products hero only.
   ========================================================= */

/* Give the image more visual weight without changing Home. */
.products-hero-v323{
  min-height:610px !important;
}

.products-hero-v323__photo{
  width:64% !important;
  background-position:center center !important;
}

.products-hero-v323__fade{
  background:
    linear-gradient(
      90deg,
      #edd8c0 0%,
      #edd8c0 28%,
      rgba(237,216,192,.98) 38%,
      rgba(237,216,192,.78) 50%,
      rgba(237,216,192,.48) 61%,
      rgba(237,216,192,.22) 72%,
      rgba(237,216,192,.06) 83%,
      rgba(237,216,192,0) 100%
    ) !important;
}

.products-hero-v323__inner{
  min-height:410px !important;
}

/* Orange statement ticker directly under the hero. */
.products-teff-ticker{
  position:relative;
  overflow:hidden;
  width:100%;
  background:#f07a22;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(7,61,44,.08);
}

.products-teff-ticker::before,
.products-teff-ticker::after{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:72px;
  z-index:2;
  pointer-events:none;
}

.products-teff-ticker::before{
  left:0;
  background:linear-gradient(90deg,#f07a22,rgba(240,122,34,0));
}

.products-teff-ticker::after{
  right:0;
  background:linear-gradient(270deg,#f07a22,rgba(240,122,34,0));
}

.products-teff-ticker__track{
  display:flex;
  width:max-content;
  animation:teffTickerMove 34s linear infinite;
  will-change:transform;
}

.products-teff-ticker:hover .products-teff-ticker__track{
  animation-play-state:paused;
}

.products-teff-ticker__set{
  display:flex;
  align-items:center;
  flex-shrink:0;
  gap:22px;
  padding:17px 11px;
}

.products-teff-ticker__set span{
  white-space:nowrap;
  color:#fff8ef;
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.09em;
  text-transform:uppercase;
}

.products-teff-ticker__set i{
  color:#073d2c;
  font-style:normal;
  font-size:.9rem;
  opacity:.70;
}

@keyframes teffTickerMove{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}

/* Respect reduced-motion preference. */
@media(prefers-reduced-motion:reduce){
  .products-teff-ticker__track{
    animation:none !important;
  }
}

@media(max-width:900px){
  .products-hero-v323{
    min-height:570px !important;
  }

  .products-hero-v323__photo{
    width:72% !important;
  }

  .products-hero-v323__fade{
    background:
      linear-gradient(
        90deg,
        #edd8c0 0%,
        #edd8c0 36%,
        rgba(237,216,192,.90) 50%,
        rgba(237,216,192,.62) 66%,
        rgba(237,216,192,.24) 82%,
        rgba(237,216,192,.04) 100%
      ) !important;
  }
}

@media(max-width:640px){
  .products-hero-v323{
    min-height:auto !important;
  }

  .products-hero-v323__photo{
    width:100% !important;
    opacity:.46 !important;
  }

  .products-hero-v323__fade{
    background:
      linear-gradient(
        90deg,
        rgba(237,216,192,.98) 0%,
        rgba(237,216,192,.90) 58%,
        rgba(237,216,192,.52) 100%
      ) !important;
  }

  .products-teff-ticker::before,
  .products-teff-ticker::after{
    width:34px;
  }

  .products-teff-ticker__set{
    gap:16px;
    padding:14px 8px;
  }

  .products-teff-ticker__set span{
    font-size:.72rem;
  }
}


/* =========================================================
   V3.28.1 — Homepage product section intro full-width
   Scope: home page only.
   ========================================================= */

body.home .v320-products__head{
  grid-template-columns:1fr !important;
  align-items:start !important;
  gap:18px !important;
  margin-bottom:42px !important;
}

body.home .v320-products__heading{
  max-width:none !important;
}

body.home .v320-products__heading h2{
  max-width:none !important;
  width:100%;
  font-size:clamp(3.3rem,5.3vw,6rem) !important;
  line-height:.94 !important;
}

body.home .v320-products__intro{
  max-width:760px !important;
  justify-self:start !important;
  padding-bottom:0 !important;
}

body.home .v320-products__intro p{
  margin:0 0 14px !important;
  color:var(--muted) !important;
  font-size:.95rem !important;
  line-height:1.62 !important;
}

body.home .v320-products__intro .inline-link{
  font-size:.9rem;
}

@media(max-width:640px){
  body.home .v320-products__head{
    gap:14px !important;
    margin-bottom:28px !important;
  }

  body.home .v320-products__heading h2{
    font-size:clamp(2.7rem,12vw,4.2rem) !important;
  }

  body.home .v320-products__intro{
    max-width:none !important;
  }

  body.home .v320-products__intro p{
    font-size:.92rem !important;
    line-height:1.58 !important;
  }
}


/* =========================================================
   V3.28.2 — Our products hero refinement
   Bigger image, ticker lower, cleaner statements.
   ========================================================= */

.products-hero-v323{
  min-height:680px !important;
  padding-top:142px !important;
}

.products-hero-v323__inner{
  min-height:500px !important;
  align-items:flex-start !important;
  padding-top:20px !important;
  padding-bottom:42px !important;
}

.products-hero-v323__photo{
  width:70% !important;
  background-position:center center !important;
}

.products-hero-v323__fade{
  background:
    linear-gradient(
      90deg,
      #edd8c0 0%,
      #edd8c0 24%,
      rgba(237,216,192,.96) 34%,
      rgba(237,216,192,.72) 46%,
      rgba(237,216,192,.42) 58%,
      rgba(237,216,192,.18) 70%,
      rgba(237,216,192,.04) 84%,
      rgba(237,216,192,0) 100%
    ) !important;
}

.products-hero-v323__copy{
  max-width:620px !important;
}

.products-hero-v323__copy p{
  max-width:500px !important;
}

/* Lower ticker by letting the hero breathe more and softening the attachment */
.products-teff-ticker{
  margin-top:8px !important;
  box-shadow:0 -1px 0 rgba(255,255,255,.12), 0 10px 24px rgba(7,61,44,.05);
}

.products-teff-ticker__set{
  padding:18px 14px !important;
  gap:24px !important;
}

.products-teff-ticker__set span{
  letter-spacing:.08em !important;
}

@media(max-width:900px){
  .products-hero-v323{
    min-height:620px !important;
  }

  .products-hero-v323__inner{
    min-height:450px !important;
    padding-bottom:34px !important;
  }

  .products-hero-v323__photo{
    width:76% !important;
  }

  .products-hero-v323__fade{
    background:
      linear-gradient(
        90deg,
        #edd8c0 0%,
        #edd8c0 30%,
        rgba(237,216,192,.88) 45%,
        rgba(237,216,192,.56) 62%,
        rgba(237,216,192,.20) 80%,
        rgba(237,216,192,.03) 100%
      ) !important;
  }
}

@media(max-width:640px){
  .products-hero-v323{
    min-height:auto !important;
  }

  .products-hero-v323__inner{
    min-height:390px !important;
    padding-top:8px !important;
    padding-bottom:26px !important;
  }

  .products-hero-v323__photo{
    width:100% !important;
    opacity:.52 !important;
    background-position:60% center !important;
  }

  .products-hero-v323__fade{
    background:
      linear-gradient(
        90deg,
        rgba(237,216,192,.98) 0%,
        rgba(237,216,192,.90) 52%,
        rgba(237,216,192,.48) 100%
      ) !important;
  }

  .products-teff-ticker{
    margin-top:4px !important;
  }

  .products-teff-ticker__set{
    padding:15px 10px !important;
    gap:18px !important;
  }
}


/* =========================================================
   V3.28.3 — definitive Home product intro alignment fix
   ========================================================= */

/* Both Home product sections use one clean full-width intro stack. */
body.home .v320-products__head,
body.home .v320-products--cookies .v320-products__head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  align-items:start !important;
  gap:16px !important;
  width:100% !important;
  margin-bottom:42px !important;
}

/* Explicitly neutralise the old cookie reverse-column positioning. */
body.home .v320-products__heading,
body.home .v320-products--cookies .v320-products__heading{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  justify-self:stretch !important;
  align-self:start !important;
  width:100% !important;
  max-width:none !important;
}

body.home .v320-products__intro,
body.home .v320-products--cookies .v320-products__intro{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  justify-self:start !important;
  align-self:start !important;
  width:100% !important;
  max-width:760px !important;
  padding:0 !important;
}

/* Large headline gets the complete content width. */
body.home .v320-products__heading h2,
body.home .v320-products--cookies .v320-products__heading h2{
  display:block !important;
  width:100% !important;
  max-width:none !important;
  margin:10px 0 0 !important;
  font-size:clamp(3.3rem,5.3vw,6rem) !important;
  line-height:.94 !important;
}

/* Supporting copy stays intentionally small beneath the title. */
body.home .v320-products__intro p,
body.home .v320-products--cookies .v320-products__intro p{
  max-width:700px !important;
  margin:0 0 12px !important;
  color:var(--muted) !important;
  font-size:.92rem !important;
  line-height:1.62 !important;
}

body.home .v320-products__intro .inline-link{
  display:inline-flex !important;
  font-size:.88rem !important;
}

@media(max-width:640px){
  body.home .v320-products__head,
  body.home .v320-products--cookies .v320-products__head{
    gap:12px !important;
    margin-bottom:28px !important;
  }

  body.home .v320-products__heading h2,
  body.home .v320-products--cookies .v320-products__heading h2{
    font-size:clamp(2.7rem,12vw,4.2rem) !important;
  }

  body.home .v320-products__intro,
  body.home .v320-products--cookies .v320-products__intro{
    max-width:none !important;
  }

  body.home .v320-products__intro p,
  body.home .v320-products--cookies .v320-products__intro p{
    font-size:.9rem !important;
    line-height:1.58 !important;
  }
}


/* =========================================================
   V3.28.4 — Home desems centered, cookies split layout,
   centered wider accent bar on product cards
   ========================================================= */

/* 1) Home desems section: full-width headline, centered */
body.home .v320-products--bread .v320-products__head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  align-items:start !important;
  gap:16px !important;
  width:100% !important;
  margin-bottom:42px !important;
}

body.home .v320-products--bread .v320-products__heading{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
}

body.home .v320-products--bread .v320-products__heading h2{
  width:100% !important;
  max-width:none !important;
  margin:10px auto 0 !important;
  text-align:center !important;
  font-size:clamp(3.3rem,5.3vw,6rem) !important;
  line-height:.94 !important;
}

body.home .v320-products--bread .v320-products__intro{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  width:100% !important;
  max-width:760px !important;
  justify-self:start !important;
  padding:0 !important;
}

body.home .v320-products--bread .v320-products__intro p{
  margin:0 0 14px !important;
  color:var(--muted) !important;
  font-size:.95rem !important;
  line-height:1.62 !important;
}

/* 2) Home cookies section: revert to title-left / text-right */
body.home .v320-products--cookies .v320-products__head{
  display:grid !important;
  grid-template-columns:1.08fr .92fr !important;
  align-items:end !important;
  gap:56px !important;
  margin-bottom:42px !important;
}

body.home .v320-products--cookies .v320-products__heading{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:760px !important;
  justify-self:start !important;
}

body.home .v320-products--cookies .v320-products__heading h2{
  width:100% !important;
  max-width:10.5ch !important;
  margin:10px 0 0 !important;
  text-align:left !important;
  font-size:clamp(3.2rem,5.1vw,5.8rem) !important;
  line-height:.95 !important;
}

body.home .v320-products--cookies .v320-products__intro{
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:500px !important;
  justify-self:end !important;
  align-self:end !important;
  padding:0 0 4px !important;
}

body.home .v320-products--cookies .v320-products__intro p{
  margin:0 0 18px !important;
  color:var(--muted) !important;
  font-size:1rem !important;
  line-height:1.72 !important;
}

/* 3) Product card orange accent wider + centered below image */
.v320-card__accent{
  left:50% !important;
  bottom:0 !important;
  transform:translateX(-50%) !important;
  width:88px !important;
  height:6px !important;
  border-radius:999px 999px 0 0 !important;
}

@media(max-width:1100px){
  body.home .v320-products--cookies .v320-products__head{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  body.home .v320-products--cookies .v320-products__heading,
  body.home .v320-products--cookies .v320-products__intro{
    grid-column:1 !important;
    grid-row:auto !important;
    justify-self:start !important;
    align-self:start !important;
    max-width:none !important;
  }
}

@media(max-width:640px){
  body.home .v320-products--bread .v320-products__head{
    gap:12px !important;
    margin-bottom:28px !important;
  }

  body.home .v320-products--bread .v320-products__heading h2{
    font-size:clamp(2.7rem,12vw,4.2rem) !important;
  }

  body.home .v320-products--bread .v320-products__intro{
    max-width:none !important;
  }

  body.home .v320-products--bread .v320-products__intro p{
    font-size:.9rem !important;
    line-height:1.58 !important;
  }

  body.home .v320-products--cookies .v320-products__head{
    gap:18px !important;
    margin-bottom:28px !important;
  }

  body.home .v320-products--cookies .v320-products__heading h2{
    max-width:none !important;
    font-size:clamp(2.6rem,11vw,4rem) !important;
  }

  body.home .v320-products--cookies .v320-products__intro p{
    font-size:.92rem !important;
    line-height:1.6 !important;
  }

  .v320-card__accent{
    width:74px !important;
    height:5px !important;
  }
}


/* =========================================================
   V3.28.5 — remove products intro bar, stronger product cards,
   visible arrow navigation for horizontal rails
   ========================================================= */

/* 1) Remove the “Teff als basis...” block below the orange ticker */
.products-teff-ticker + .detail-intro{
  display:none !important;
}

/* Close up the space so the product sections start cleaner */
.products-teff-ticker + .detail-intro + .v320-products{
  padding-top:38px !important;
}

/* 2) Product cards: thicker line, a bit sharper, more premium */
.v320-card{
  border:2px solid rgba(227,124,39,.70) !important;
  border-radius:18px !important;
  box-shadow:0 14px 32px rgba(24,20,14,.10) !important;
}

.v320-card:hover{
  box-shadow:0 18px 38px rgba(24,20,14,.14) !important;
}

.v320-card__image{
  border-bottom:1px solid rgba(227,124,39,.22);
}

/* Remove the old subtle right-fade cue; arrows replace it */
.v320-products .shell::after{
  display:none !important;
}

/* Wrapper around the horizontal rail so arrows can sit left/right */
.v320-products__rail-wrap{
  position:relative;
  overflow:visible;
}

/* Leave room for the floating buttons */
.v320-products__grid{
  padding-top:10px !important;
  padding-bottom:34px !important;
}

/* Arrow navigation */
.v320-products__nav{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  pointer-events:none;
  z-index:8;
}

.v320-products__arrow{
  pointer-events:auto;
  width:54px;
  height:54px;
  border-radius:999px;
  border:2px solid rgba(227,124,39,.82);
  background:rgba(7,61,44,.96);
  color:var(--accent);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  box-shadow:0 14px 28px rgba(10,26,18,.18);
  transition:
    transform .25s ease,
    background .25s ease,
    color .25s ease,
    opacity .25s ease,
    border-color .25s ease;
}

.v320-products__arrow:hover{
  transform:translateY(-1px) scale(1.04);
  background:var(--accent);
  color:#fff;
  border-color:var(--accent);
}

.v320-products__arrow:disabled{
  opacity:.34;
  cursor:default;
  transform:none;
}

.v320-products__arrow span{
  font-size:1.5rem;
  line-height:1;
  font-weight:700;
  transform:translateY(-1px);
}

.v320-products__arrow--prev{
  position:absolute;
  left:max(8px, calc((100vw - min(1240px, calc(100vw - 48px))) / 2) - 28px);
}

.v320-products__arrow--next{
  position:absolute;
  right:12px;
}

/* Slightly highlight that the rail is interactive */
.v320-products__grid{
  scroll-behavior:smooth;
}

@media (max-width:1100px){
  .v320-products__arrow--prev{
    left:12px;
  }
}

@media (max-width:860px){
  .v320-products__arrow{
    width:48px;
    height:48px;
  }
}

@media (max-width:760px){
  /* On mobile/touch the rail itself is enough; keep UI calmer */
  .v320-products__nav{
    display:none !important;
  }

  .products-teff-ticker + .detail-intro + .v320-products{
    padding-top:28px !important;
  }
}


/* =========================================================
   V3.29 — three isolated finishing refinements
   ========================================================= */

/* 1) OUR PRODUCTS — cookies heading left, intro right */
.products-page-v329 .v320-products--cookies .v320-products__head{
  display:grid !important;
  grid-template-columns:1.08fr .92fr !important;
  gap:56px !important;
  align-items:end !important;
}

.products-page-v329 .v320-products--cookies .v320-products__heading{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  max-width:760px !important;
  width:100% !important;
}

.products-page-v329 .v320-products--cookies .v320-products__heading h2{
  max-width:10.5ch !important;
  text-align:left !important;
}

.products-page-v329 .v320-products--cookies .v320-products__intro{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:end !important;
  max-width:500px !important;
  width:100% !important;
  padding-bottom:4px !important;
}

.products-page-v329 .v320-products--cookies .v320-products__intro p{
  margin:0 0 18px !important;
  font-size:1rem !important;
  line-height:1.72 !important;
}

@media(max-width:980px){
  .products-page-v329 .v320-products--cookies .v320-products__head{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  .products-page-v329 .v320-products--cookies .v320-products__heading,
  .products-page-v329 .v320-products--cookies .v320-products__intro{
    grid-column:1 !important;
    grid-row:auto !important;
    justify-self:start !important;
    max-width:none !important;
  }
}

/* 2) WHY TEFF-IT — remove hazy/blurred feeling */
.why-page-v329 .teff-subhero-fullbleed:after{
  background:
    linear-gradient(
      90deg,
      rgba(4,45,32,.82) 0%,
      rgba(4,45,32,.62) 34%,
      rgba(4,45,32,.28) 58%,
      rgba(4,45,32,.05) 78%,
      rgba(4,45,32,0) 100%
    ) !important;
}

.why-page-v329 .subhero-photo{
  filter:none !important;
  opacity:1 !important;
}

.why-page-v329 .teff-story-banner .overlay{
  background:linear-gradient(
    90deg,
    rgba(4,45,32,.72) 0%,
    rgba(4,45,32,.46) 46%,
    rgba(4,45,32,.14) 76%,
    rgba(4,45,32,.02) 100%
  ) !important;
}

.why-page-v329 .teff-story-banner .story-copy-large{
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  background:rgba(4,45,32,.62) !important;
  border:1px solid rgba(255,255,255,.10);
  box-shadow:none !important;
}

.why-page-v329 .fact-image-card{
  filter:none !important;
  opacity:1 !important;
}

.why-page-v329 .fact-image-card:before{
  background:linear-gradient(
    180deg,
    rgba(12,26,20,0) 0%,
    rgba(12,26,20,.08) 42%,
    rgba(12,26,20,.66) 100%
  ) !important;
}

.why-page-v329 .fact-image-overlay p{
  color:rgba(255,255,255,.96) !important;
}

.why-page-v329 .panel-section{
  filter:none !important;
  opacity:1 !important;
}

/* 3) ZAKELIJK — audience block lower and centered between sections */
.business-page-v329 .business-audience-editorial{
  padding-top:138px !important;
  padding-bottom:146px !important;
}

.business-page-v329 .audience-grid-simple{
  margin-top:0 !important;
  align-items:start;
}

.business-page-v329 .b2b-editorial{
  padding-top:118px !important;
}

@media(max-width:980px){
  .business-page-v329 .business-audience-editorial{
    padding-top:110px !important;
    padding-bottom:118px !important;
  }
}

@media(max-width:640px){
  .business-page-v329 .business-audience-editorial{
    padding-top:84px !important;
    padding-bottom:92px !important;
  }
}


/* =========================================================
   V3.30 — Why Teff-It: crisp imagery, no fade, orange type
   ========================================================= */

/* TOP HERO: completely remove the green fade */
.why-page-v329 .teff-subhero-fullbleed:after{
  display:none !important;
  content:none !important;
  background:none !important;
}

/* Keep hero image fully crisp */
.why-page-v329 .teff-subhero-fullbleed .subhero-photo{
  filter:none !important;
  opacity:1 !important;
}

/* Turn the copy into a clean editorial panel instead of an overlay fade */
.why-page-v329 .teff-subhero-fullbleed .subpage-hero-grid>div:first-child{
  position:relative !important;
  z-index:2 !important;
  max-width:610px !important;
  margin-left:max(5vw,48px) !important;
  margin-top:148px !important;
  margin-bottom:108px !important;
  padding:38px 42px 40px !important;
  color:#073d2c !important;
  background:rgba(248,235,219,.96) !important;
  border:1px solid rgba(7,61,44,.10) !important;
  box-shadow:0 18px 42px rgba(24,32,23,.10) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

/* Orange typography becomes the visual accent */
.why-page-v329 .teff-subhero-fullbleed .kicker{
  color:#b55f24 !important;
}

.why-page-v329 .teff-subhero-fullbleed h1{
  color:#f07a22 !important;
}

.why-page-v329 .teff-subhero-fullbleed p{
  color:rgba(7,61,44,.78) !important;
}

.why-page-v329 .teff-subhero-fullbleed .button{
  background:#073d2c !important;
  border-color:#073d2c !important;
  color:#fff !important;
}

.why-page-v329 .teff-subhero-fullbleed .button:hover{
  background:#f07a22 !important;
  border-color:#f07a22 !important;
}

/* STORY IMAGE: remove overlay entirely */
.why-page-v329 .teff-story-banner .overlay{
  display:none !important;
  background:none !important;
}

/* Sharp photo, no filters/fades */
.why-page-v329 .teff-story-banner{
  filter:none !important;
}

/* Solid editorial card instead of hazy transparent panel */
.why-page-v329 .teff-story-banner .story-copy-large{
  max-width:650px !important;
  margin-left:max(4vw,32px) !important;
  padding:34px 38px 36px !important;
  background:#073d2c !important;
  border:0 !important;
  box-shadow:0 18px 42px rgba(0,0,0,.16) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
}

.why-page-v329 .teff-story-banner .story-copy-large .kicker{
  color:#f3a363 !important;
}

.why-page-v329 .teff-story-banner .story-copy-large h2{
  color:#f07a22 !important;
}

.why-page-v329 .teff-story-banner .story-copy-large p{
  color:rgba(255,255,255,.86) !important;
}

/* Keep image cards crisp as well */
.why-page-v329 .fact-image-card{
  filter:none !important;
  opacity:1 !important;
}

.why-page-v329 .fact-image-card:before{
  background:
    linear-gradient(
      180deg,
      rgba(12,26,20,0) 0%,
      rgba(12,26,20,.04) 48%,
      rgba(12,26,20,.58) 100%
    ) !important;
}

/* Orange card headings for continuity */
.why-page-v329 .fact-image-overlay h3{
  color:#f3a363 !important;
}

.why-page-v329 .panel-section h2{
  color:#073d2c !important;
}

.why-page-v329 .panel-section .kicker{
  color:#b55f24 !important;
}

/* Responsive */
@media(max-width:900px){
  .why-page-v329 .teff-subhero-fullbleed .subpage-hero-grid>div:first-child{
    max-width:560px !important;
    margin-left:32px !important;
    margin-right:32px !important;
    margin-top:128px !important;
    margin-bottom:86px !important;
  }

  .why-page-v329 .teff-story-banner .story-copy-large{
    margin-left:28px !important;
    margin-right:28px !important;
  }
}

@media(max-width:640px){
  .why-page-v329 .teff-subhero-fullbleed{
    min-height:680px !important;
  }

  .why-page-v329 .teff-subhero-fullbleed .subpage-hero-grid{
    min-height:680px !important;
  }

  .why-page-v329 .teff-subhero-fullbleed .subhero-photo{
    min-height:680px !important;
    background-position:62% center !important;
  }

  .why-page-v329 .teff-subhero-fullbleed .subpage-hero-grid>div:first-child{
    max-width:none !important;
    margin:104px 18px 48px !important;
    padding:28px 24px 30px !important;
  }

  .why-page-v329 .teff-story-banner .story-copy-large{
    margin:24px 18px !important;
    padding:28px 24px 30px !important;
  }
}


/* =========================================================
   V3.30.1 — Zakelijk text alignment correction
   ========================================================= */

/* Force all editorial business copy back to a clear left alignment. */
.business-page-v329,
.business-page-v329 .business-subhero,
.business-page-v329 .business-grain-band,
.business-page-v329 .business-audience-editorial,
.business-page-v329 .b2b-editorial,
.business-page-v329 .business-process,
.business-page-v329 .subpage-cta{
  text-align:left !important;
}

/* Hero */
.business-page-v329 .business-subhero-copy-only{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

.business-page-v329 .business-subhero-copy-only > div:first-child{
  text-align:left !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

/* Grain-image copy */
.business-page-v329 .grain-band-copy{
  text-align:left !important;
  align-items:flex-start !important;
  margin-left:0 !important;
  margin-right:auto !important;
}

/* Audience rows */
.business-page-v329 .audience-grid-simple{
  text-align:left !important;
  justify-items:stretch !important;
}

.business-page-v329 .audience-grid-simple article,
.business-page-v329 .audience-grid-simple h3,
.business-page-v329 .audience-grid-simple p{
  text-align:left !important;
}

/* Two-column editorial headings */
.business-page-v329 .section-heading.two-col{
  text-align:left !important;
  align-items:end !important;
}

.business-page-v329 .section-heading.two-col > div{
  text-align:left !important;
  justify-self:start !important;
  width:100%;
}

.business-page-v329 .section-heading.two-col p{
  margin-left:0 !important;
  margin-right:0 !important;
}

/* Product-line copy */
.business-page-v329 .editorial-columns{
  text-align:left !important;
}

.business-page-v329 .editorial-columns article,
.business-page-v329 .editorial-columns h3,
.business-page-v329 .editorial-columns p{
  text-align:left !important;
}

/* Collaboration process */
.business-page-v329 .process-editorial{
  text-align:left !important;
}

.business-page-v329 .process-editorial > div,
.business-page-v329 .process-editorial h3,
.business-page-v329 .process-editorial p{
  text-align:left !important;
}

/* CTA */
.business-page-v329 .subpage-cta-inner,
.business-page-v329 .subpage-cta-inner > div{
  text-align:left !important;
}

@media(max-width:980px){
  .business-page-v329 .section-heading.two-col{
    align-items:start !important;
  }
}


/* =========================================================
   V3.30.2 — Zakelijk: restore normal site shell alignment
   ========================================================= */

/* These elements are also .shell elements. Restore their normal centered shell. */
.business-page-v329 .shell.business-subhero-copy-only,
.business-page-v329 .shell.grain-band-copy{
  width:var(--shell) !important;
  max-width:none !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Keep the actual text column left-aligned inside the shared shell. */
.business-page-v329 .business-subhero-copy-only > div:first-child{
  max-width:780px !important;
  margin-left:0 !important;
  margin-right:auto !important;
  text-align:left !important;
}

.business-page-v329 .grain-band-copy{
  align-items:flex-start !important;
  text-align:left !important;
}

.business-page-v329 .grain-band-copy h2,
.business-page-v329 .grain-band-copy p{
  text-align:left !important;
}

/* Keep the remaining business sections on the exact same shell line. */
.business-page-v329 .business-audience-editorial > .shell,
.business-page-v329 .b2b-editorial > .shell,
.business-page-v329 .business-process > .shell,
.business-page-v329 .subpage-cta > .shell{
  width:var(--shell) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

/* Do not center the copy itself. */
.business-page-v329 .audience-grid-simple,
.business-page-v329 .section-heading.two-col,
.business-page-v329 .editorial-columns,
.business-page-v329 .process-editorial,
.business-page-v329 .subpage-cta-inner{
  text-align:left !important;
}


/* =========================================================
   V3.30.3 — Product page section headings centered
   ========================================================= */

/* Desems: center the main heading */
.products-page-v329 .v320-products--bread .v320-products__heading{
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
}

.products-page-v329 .v320-products--bread .v320-products__heading h2{
  width:100% !important;
  max-width:none !important;
  text-align:center !important;
}

/* Koeken: center heading + supporting copy */
.products-page-v329 .v320-products--cookies .v320-products__head{
  grid-template-columns:1fr !important;
  grid-template-rows:auto auto !important;
  gap:16px !important;
}

.products-page-v329 .v320-products--cookies .v320-products__heading{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
}

.products-page-v329 .v320-products--cookies .v320-products__heading h2{
  width:100% !important;
  max-width:none !important;
  text-align:center !important;
}

.products-page-v329 .v320-products--cookies .v320-products__intro{
  grid-column:1 !important;
  grid-row:2 !important;
  width:100% !important;
  max-width:760px !important;
  justify-self:center !important;
  text-align:center !important;
  padding-bottom:0 !important;
}

.products-page-v329 .v320-products--cookies .v320-products__intro p{
  text-align:center !important;
  margin-left:auto !important;
  margin-right:auto !important;
}


/* =========================================================
   V3.31 — Uploaded photos integrated into the site
   ========================================================= */

/* Homepage hero / dark fade section */
.home-page-v329 .page-hero--dark-fade,
.home-page-v329 .home-hero,
.home-page-v329 .hero-home {
  background-image:
    linear-gradient(90deg, rgba(8,49,36,.82) 0%, rgba(8,49,36,.74) 22%, rgba(8,49,36,.48) 45%, rgba(8,49,36,.16) 66%, rgba(8,49,36,0) 100%),
    url('../images/teffit-grain-field-home.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Product page top hero */
.products-page-v329 .page-hero--dark-fade,
.products-page-v329 .products-subhero,
.products-page-v329 .products-hero,
.products-page-v329 .hero-products {
  background-image:
    linear-gradient(90deg, rgba(10,42,31,.70) 0%, rgba(10,42,31,.56) 18%, rgba(10,42,31,.28) 38%, rgba(10,42,31,.08) 58%, rgba(10,42,31,0) 76%),
    url('../images/teffit-products-hero-bakery.png') !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

.products-page-v329 .page-hero--dark-fade,
.products-page-v329 .products-subhero,
.products-page-v329 .products-hero,
.products-page-v329 .hero-products {
  min-height: 620px !important;
}

.products-page-v329 .page-hero--dark-fade .shell,
.products-page-v329 .products-subhero .shell,
.products-page-v329 .products-hero .shell,
.home-page-v329 .page-hero--dark-fade .shell,
.home-page-v329 .home-hero .shell {
  position: relative !important;
  z-index: 2 !important;
}

@media (max-width: 900px) {
  .products-page-v329 .page-hero--dark-fade,
  .products-page-v329 .products-subhero,
  .products-page-v329 .products-hero,
  .products-page-v329 .hero-products {
    min-height: 520px !important;
  }
}


/* =========================================================
   V3.31.1 — direct user-image integration
   ========================================================= */

/* Home uploaded field/teff image */
.home-hero-v323__photo{
  background-position:center center !important;
}

/* Product uploaded bakery image: keep bread/product focal area visible */
.products-hero-v323__photo{
  background-position:center 48% !important;
  background-size:cover !important;
}

@media(max-width:700px){
  .products-hero-v323__photo{
    background-position:62% center !important;
  }
}


/* =========================================================
   V3.31.6 — Home life heading: title left, copy right
   ========================================================= */

body.home .life-heading{
  display:grid !important;
  grid-template-columns:1.15fr .85fr !important;
  gap:64px !important;
  align-items:end !important;
  width:100% !important;
}

body.home .life-heading > div:first-child{
  grid-column:1 !important;
  grid-row:1 !important;
  justify-self:start !important;
  align-self:end !important;
  max-width:760px !important;
  text-align:left !important;
}

body.home .life-heading > div:last-child{
  grid-column:2 !important;
  grid-row:1 !important;
  justify-self:end !important;
  align-self:end !important;
  max-width:470px !important;
  text-align:left !important;
}

body.home .life-heading > div:last-child p{
  margin:0 !important;
  text-align:left !important;
}

@media(max-width:900px){
  body.home .life-heading{
    grid-template-columns:1fr !important;
    gap:22px !important;
  }

  body.home .life-heading > div:first-child,
  body.home .life-heading > div:last-child{
    grid-column:1 !important;
    grid-row:auto !important;
    justify-self:start !important;
    max-width:none !important;
  }
}


/* =========================================================
   V3.31.7 — Home life heading optical inset
   ========================================================= */

/* Keep title left / copy right, but bring the whole composition
   slightly inward so it aligns better with the visual rhythm
   of the other homepage sections. */
body.home .life-heading{
  width:min(1120px, calc(100% - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
}

@media(max-width:900px){
  body.home .life-heading{
    width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
  }
}


/* =========================================================
   V3.31.8 — Home cookies intro aligned with section above
   ========================================================= */

body.home .v320-products--cookies .v320-products__head{
  display:grid !important;
  grid-template-columns:1.15fr .85fr !important;
  gap:64px !important;
  align-items:end !important;
  width:min(1120px, calc(100% - 48px)) !important;
  margin-left:auto !important;
  margin-right:auto !important;
  margin-bottom:42px !important;
}

body.home .v320-products--cookies .v320-products__heading{
  grid-column:1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:760px !important;
  justify-self:start !important;
  align-self:end !important;
}

body.home .v320-products--cookies .v320-products__heading h2{
  width:100% !important;
  max-width:11ch !important;
  margin:10px auto 0 !important;
  text-align:center !important;
  font-size:clamp(3.2rem,5.1vw,5.8rem) !important;
  line-height:.95 !important;
}

body.home .v320-products--cookies .v320-products__heading .kicker{
  text-align:center !important;
}

body.home .v320-products--cookies .v320-products__intro{
  grid-column:2 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:470px !important;
  justify-self:end !important;
  align-self:end !important;
  padding:0 0 4px !important;
  text-align:left !important;
}

body.home .v320-products--cookies .v320-products__intro p{
  margin:0 0 16px !important;
  text-align:left !important;
  font-size:.95rem !important;
  line-height:1.65 !important;
}

body.home .v320-products--cookies .v320-products__intro .inline-link{
  display:inline-flex !important;
  text-align:left !important;
}

@media(max-width:900px){
  body.home .v320-products--cookies .v320-products__head{
    grid-template-columns:1fr !important;
    gap:18px !important;
    width:100% !important;
  }

  body.home .v320-products--cookies .v320-products__heading,
  body.home .v320-products--cookies .v320-products__intro{
    grid-column:1 !important;
    grid-row:auto !important;
    max-width:none !important;
    justify-self:start !important;
  }

  body.home .v320-products--cookies .v320-products__heading h2{
    max-width:none !important;
    text-align:left !important;
    margin-left:0 !important;
  }

  body.home .v320-products--cookies .v320-products__heading .kicker{
    text-align:left !important;
  }
}


/* =========================================================
   V3.31.9 — Home cookies intro matches bread intro exactly
   ========================================================= */

body.home .v320-products--cookies .v320-products__head{
  display:grid !important;
  grid-template-columns:minmax(0,1fr) !important;
  grid-template-rows:auto auto !important;
  align-items:start !important;
  gap:16px !important;
  width:100% !important;
  margin-left:0 !important;
  margin-right:0 !important;
  margin-bottom:42px !important;
}

body.home .v320-products--cookies .v320-products__heading{
  grid-column:1 / -1 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  justify-self:stretch !important;
  align-self:start !important;
}

body.home .v320-products--cookies .v320-products__heading h2{
  width:100% !important;
  max-width:none !important;
  margin:10px auto 0 !important;
  text-align:center !important;
  font-size:clamp(3.3rem,5.3vw,6rem) !important;
  line-height:.94 !important;
}

body.home .v320-products--cookies .v320-products__heading .kicker{
  text-align:left !important;
}

body.home .v320-products--cookies .v320-products__intro{
  grid-column:1 / -1 !important;
  grid-row:2 !important;
  width:100% !important;
  max-width:760px !important;
  justify-self:start !important;
  align-self:start !important;
  padding:0 !important;
  text-align:left !important;
}

body.home .v320-products--cookies .v320-products__intro p{
  margin:0 0 14px !important;
  color:var(--muted) !important;
  text-align:left !important;
  font-size:.95rem !important;
  line-height:1.62 !important;
}

body.home .v320-products--cookies .v320-products__intro .inline-link{
  display:inline-flex !important;
  text-align:left !important;
}

@media(max-width:640px){
  body.home .v320-products--cookies .v320-products__head{
    gap:12px !important;
    margin-bottom:28px !important;
  }

  body.home .v320-products--cookies .v320-products__heading h2{
    font-size:clamp(2.7rem,12vw,4.2rem) !important;
    text-align:center !important;
  }

  body.home .v320-products--cookies .v320-products__intro{
    max-width:none !important;
  }

  body.home .v320-products--cookies .v320-products__intro p{
    font-size:.9rem !important;
    line-height:1.58 !important;
  }
}


/* =========================================================
   V3.32 — PREMIUM POLISH
   Home + Why Teff-It + product detail.
   ========================================================= */

/* ---------- Global polish, intentionally subtle ---------- */
body{
  text-rendering:optimizeLegibility;
}

.button,
.inline-link,
.v320-card__button{
  transition:
    transform .22s ease,
    background-color .22s ease,
    color .22s ease,
    border-color .22s ease,
    box-shadow .22s ease !important;
}

.button:hover{
  transform:translateY(-2px);
}

/* ---------- HOME: stronger rhythm without rebuilding ---------- */
body.home .v320-products,
body.home .life-section,
body.home .why-section{
  position:relative;
}

body.home .v320-products::before,
body.home .life-section::before,
body.home .why-section::before{
  content:"";
  position:absolute;
  top:0;
  left:50%;
  width:min(1180px,calc(100% - 48px));
  height:1px;
  transform:translateX(-50%);
  background:rgba(7,61,44,.09);
}

body.home .v320-products__heading h2,
body.home .life-heading h2,
body.home .why-text-heading h2{
  letter-spacing:-.035em;
}

body.home .v320-products__intro p,
body.home .life-heading p,
body.home .why-text-copy p{
  max-width:62ch;
}

/* Product rail feels more deliberate, not redesigned */
body.home .v320-card{
  box-shadow:0 16px 38px rgba(18,39,29,.09) !important;
}

body.home .v320-card:hover{
  transform:translateY(-7px) !important;
  box-shadow:0 24px 52px rgba(18,39,29,.15) !important;
}

body.home .v320-card__image{
  transition:transform .55s cubic-bezier(.22,.61,.36,1) !important;
}

body.home .v320-card:hover .v320-card__image{
  transform:scale(1.018) !important;
}

/* Life cards: crisper editorial geometry */
body.home .life-card{
  border-radius:8px !important;
  border:1px solid rgba(7,61,44,.10);
  box-shadow:0 14px 34px rgba(24,38,29,.08);
}

body.home .life-card>div{
  left:24px !important;
  right:24px !important;
  bottom:22px !important;
}

body.home .life-card h3{
  letter-spacing:-.025em;
}

body.home .life-card a{
  color:#f4a05d !important;
}

/* Teff band gets a fine orange anchor line */
body.home .teff-banner{
  position:relative;
}

body.home .teff-banner::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;
  background:#f07a22;
  z-index:3;
}

/* final image: preserve image/effects, improve proportion only */
body.home .cta-image-only{
  min-height:520px;
  background-position:center 52%;
}

/* ---------- WHY TEFF-IT: editorial clean-up ---------- */
.why-page-v329 #verhaal{
  padding-top:124px !important;
  padding-bottom:124px !important;
}

.why-page-v329 #verhaal .split-copy{
  position:relative;
  padding-top:34px;
}

.why-page-v329 #verhaal .split-copy::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:92px;
  height:5px;
  background:#f07a22;
}

.why-page-v329 #verhaal h2,
.why-page-v329 .centered-heading h2,
.why-page-v329 .panel-section h2{
  letter-spacing:-.035em;
}

.why-page-v329 .teff-story-banner{
  min-height:610px !important;
}

.why-page-v329 .teff-story-banner .story-copy-large{
  border-radius:4px !important;
  max-width:620px !important;
}

.why-page-v329 .facts-section{
  padding-top:132px !important;
  padding-bottom:132px !important;
}

.why-page-v329 .fact-image-grid{
  gap:18px !important;
}

.why-page-v329 .fact-image-card{
  border-radius:6px !important;
  min-height:430px;
  box-shadow:0 14px 34px rgba(24,38,29,.09);
}

.why-page-v329 .fact-image-overlay{
  padding:28px !important;
}

.why-page-v329 .fact-image-overlay h3{
  font-size:1.55rem !important;
  letter-spacing:-.02em;
}

.why-page-v329 .panel-section{
  padding-top:126px !important;
  padding-bottom:126px !important;
}

.why-page-v329 .two-panel{
  gap:0 !important;
  border-top:1px solid rgba(7,61,44,.14);
  border-bottom:1px solid rgba(7,61,44,.14);
}

.why-page-v329 .two-panel > div{
  padding:54px 52px !important;
}

.why-page-v329 .two-panel > div + div{
  border-left:1px solid rgba(7,61,44,.14);
}

/* ---------- PRODUCT DETAIL: premium editorial ---------- */
.product-detail-v332{
  background:#f5eddf;
}

.product-detail-v332__hero{
  padding:132px 0 110px;
}

.product-detail-v332__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);
  gap:82px;
  align-items:start;
}

.product-detail-v332__visual{
  position:sticky;
  top:108px;
}

.product-detail-v332__photo{
  min-height:690px;
  background-size:cover;
  background-position:center;
  border-radius:8px;
  border:2px solid rgba(240,122,34,.68);
  box-shadow:0 22px 54px rgba(24,39,30,.13);
}

.product-detail-v332__image-label{
  display:flex;
  justify-content:space-between;
  gap:24px;
  padding:15px 2px 0;
  border-top:1px solid rgba(7,61,44,.18);
  margin-top:16px;
  color:#073d2c;
}

.product-detail-v332__image-label span{
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.12em;
}

.product-detail-v332__image-label strong{
  font-size:.82rem;
  font-weight:700;
}

.product-detail-v332__copy{
  padding-top:34px;
}

.product-detail-v332__back{
  display:inline-flex;
  margin-bottom:54px;
  color:rgba(7,61,44,.62);
  text-decoration:none;
  font-size:.84rem;
  font-weight:800;
}

.product-detail-v332__copy .kicker{
  color:#b65e24;
}

.product-detail-v332__copy h1{
  margin:10px 0 22px;
  max-width:9.8ch;
  color:#073d2c;
  font-size:clamp(4rem,6.2vw,7rem);
  line-height:.89;
  letter-spacing:-.055em;
}

.product-detail-v332__lead{
  max-width:580px;
  margin:0;
  color:rgba(7,61,44,.72);
  font-size:1.14rem;
  line-height:1.72;
}

.product-detail-v332__rule{
  width:110px;
  height:6px;
  margin:38px 0 34px;
  background:#f07a22;
}

.product-detail-v332__facts{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:0;
  border-top:1px solid rgba(7,61,44,.16);
  border-bottom:1px solid rgba(7,61,44,.16);
  margin-bottom:34px;
}

.product-detail-v332__facts > div{
  padding:22px 22px 22px 0;
}

.product-detail-v332__facts > div + div{
  padding-left:24px;
  border-left:1px solid rgba(7,61,44,.16);
}

.product-detail-v332__facts span{
  display:block;
  margin-bottom:5px;
  color:#a6602e;
  font-size:.7rem;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
}

.product-detail-v332__facts strong{
  color:#073d2c;
  font-size:1rem;
}

.product-detail-v332__prose{
  max-width:590px;
  color:rgba(7,61,44,.76);
  line-height:1.72;
}

.product-detail-v332__prose h2{
  color:#073d2c;
  letter-spacing:-.03em;
}

.product-detail-v332__actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:20px;
  margin-top:40px;
}

.product-detail-v332__textlink{
  color:#073d2c;
  font-size:.86rem;
  font-weight:800;
  text-decoration:none;
  border-bottom:1px solid rgba(7,61,44,.35);
}

/* ---------- Responsive polish ---------- */
@media(max-width:1050px){
  .product-detail-v332__grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  .product-detail-v332__visual{
    position:relative;
    top:auto;
  }

  .product-detail-v332__photo{
    min-height:620px;
  }

  .product-detail-v332__copy{
    padding-top:0;
  }
}

@media(max-width:760px){
  body.home .cta-image-only{
    min-height:360px;
  }

  .why-page-v329 #verhaal,
  .why-page-v329 .facts-section,
  .why-page-v329 .panel-section{
    padding-top:84px !important;
    padding-bottom:84px !important;
  }

  .why-page-v329 .teff-story-banner{
    min-height:520px !important;
  }

  .why-page-v329 .fact-image-card{
    min-height:350px;
  }

  .why-page-v329 .two-panel{
    border-top:1px solid rgba(7,61,44,.14);
    border-bottom:1px solid rgba(7,61,44,.14);
  }

  .why-page-v329 .two-panel > div{
    padding:36px 0 !important;
  }

  .why-page-v329 .two-panel > div + div{
    border-left:0;
    border-top:1px solid rgba(7,61,44,.14);
  }

  .product-detail-v332__hero{
    padding:102px 0 72px;
  }

  .product-detail-v332__grid{
    gap:34px;
  }

  .product-detail-v332__photo{
    min-height:430px;
    border-width:1px;
  }

  .product-detail-v332__back{
    margin-bottom:34px;
  }

  .product-detail-v332__copy h1{
    max-width:none;
    font-size:clamp(3.2rem,14vw,5rem);
  }

  .product-detail-v332__facts{
    grid-template-columns:1fr;
  }

  .product-detail-v332__facts > div + div{
    padding-left:0;
    border-left:0;
    border-top:1px solid rgba(7,61,44,.16);
  }

  .product-detail-v332__actions{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media(prefers-reduced-motion:reduce){
  .button,
  .inline-link,
  .v320-card,
  .v320-card__image{
    transition:none !important;
  }
}


/* =========================================================
   V3.33 — Home category showcase
   Replaces duplicate product cards on Home only.
   ========================================================= */

.home-category-showcase{
  padding:138px 0 146px;
  background:#f4eadb;
  overflow:hidden;
}

.home-category-showcase__intro{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:72px;
  align-items:end;
  margin-bottom:74px;
  padding-bottom:34px;
  border-bottom:1px solid rgba(7,61,44,.13);
}

.home-category-showcase__intro h2{
  margin:10px 0 0;
  max-width:12ch;
  color:#073d2c;
  font-size:clamp(3.6rem,5.5vw,6.4rem);
  line-height:.93;
  letter-spacing:-.05em;
}

.home-category-showcase__intro p{
  max-width:520px;
  margin:0 0 4px auto;
  color:rgba(7,61,44,.70);
  font-size:1rem;
  line-height:1.72;
}

.home-category-feature{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(330px,.75fr);
  gap:64px;
  align-items:center;
  position:relative;
}

.home-category-feature + .home-category-feature{
  margin-top:118px;
  padding-top:118px;
  border-top:1px solid rgba(7,61,44,.12);
}

.home-category-feature--cookies{
  grid-template-columns:minmax(330px,.75fr) minmax(0,1.25fr);
}

.home-category-feature--cookies .home-cookie-mosaic{
  grid-column:2;
  grid-row:1;
}

.home-category-feature--cookies .home-category-feature__copy{
  grid-column:1;
  grid-row:1;
}

.home-category-feature__visual{
  position:relative;
  display:block;
  min-height:600px;
  overflow:hidden;
  border-radius:7px;
  background:#e8dccb;
  text-decoration:none;
}

.home-category-feature__image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  transition:transform .75s cubic-bezier(.22,.61,.36,1);
}

.home-category-feature__visual:hover .home-category-feature__image{
  transform:scale(1.025);
}

.home-category-feature__index{
  position:absolute;
  right:18px;
  bottom:16px;
  z-index:3;
  color:#fff;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.14em;
  text-shadow:0 2px 14px rgba(0,0,0,.3);
}

.home-category-feature__copy{
  max-width:480px;
}

.home-category-feature__copy h3{
  margin:10px 0 22px;
  color:#073d2c;
  font-size:clamp(3rem,4.45vw,5.2rem);
  line-height:.93;
  letter-spacing:-.045em;
}

.home-category-feature__copy p{
  margin:0 0 28px;
  color:rgba(7,61,44,.70);
  font-size:.98rem;
  line-height:1.7;
}

.home-category-feature__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:6px;
  border-bottom:2px solid #f07a22;
  color:#073d2c;
  text-decoration:none;
  font-size:.87rem;
  font-weight:900;
}

.home-category-feature__link span{
  color:#f07a22;
  transition:transform .25s ease;
}

.home-category-feature__link:hover span{
  transform:translateX(4px);
}

/* Cookie mosaic */
.home-cookie-mosaic{
  position:relative;
  display:grid;
  grid-template-columns:1.15fr .85fr;
  grid-template-rows:1fr 1fr;
  gap:10px;
  min-height:600px;
}

.home-cookie-mosaic__item{
  display:block;
  min-height:0;
  overflow:hidden;
  border-radius:5px;
  background-size:cover;
  background-position:center;
  transition:
    transform .35s ease,
    filter .35s ease;
}

.home-cookie-mosaic__item:hover{
  transform:translateY(-3px);
  filter:saturate(1.04);
}

.home-cookie-mosaic__item--1{
  grid-row:1 / 3;
}

.home-cookie-mosaic__item--2{
  grid-column:2;
  grid-row:1;
}

.home-cookie-mosaic__item--3{
  grid-column:2;
  grid-row:2;
}

.home-cookie-mosaic__item--4{
  position:absolute;
  right:22px;
  bottom:-34px;
  width:34%;
  height:39%;
  border:7px solid #f4eadb;
  box-shadow:0 18px 38px rgba(31,37,28,.13);
}

@media(max-width:1050px){
  .home-category-showcase__intro{
    grid-template-columns:1fr;
    gap:24px;
  }

  .home-category-showcase__intro p{
    margin-left:0;
  }

  .home-category-feature,
  .home-category-feature--cookies{
    grid-template-columns:1fr;
    gap:38px;
  }

  .home-category-feature--cookies .home-cookie-mosaic,
  .home-category-feature--cookies .home-category-feature__copy{
    grid-column:1;
    grid-row:auto;
  }

  .home-category-feature__visual,
  .home-cookie-mosaic{
    min-height:520px;
  }

  .home-category-feature__copy{
    max-width:700px;
  }
}

@media(max-width:700px){
  .home-category-showcase{
    padding:92px 0 98px;
  }

  .home-category-showcase__intro{
    margin-bottom:48px;
  }

  .home-category-showcase__intro h2{
    font-size:clamp(3rem,13vw,4.5rem);
  }

  .home-category-feature + .home-category-feature{
    margin-top:76px;
    padding-top:76px;
  }

  .home-category-feature__visual{
    min-height:420px;
  }

  .home-category-feature__copy h3{
    font-size:clamp(2.7rem,12vw,4rem);
  }

  .home-cookie-mosaic{
    min-height:430px;
    grid-template-columns:1fr 1fr;
    grid-template-rows:1fr 1fr;
  }

  .home-cookie-mosaic__item--1{
    grid-row:1;
    grid-column:1;
  }

  .home-cookie-mosaic__item--2{
    grid-row:1;
    grid-column:2;
  }

  .home-cookie-mosaic__item--3{
    grid-row:2;
    grid-column:1;
  }

  .home-cookie-mosaic__item--4{
    position:relative;
    right:auto;
    bottom:auto;
    width:auto;
    height:auto;
    grid-row:2;
    grid-column:2;
    border:0;
    box-shadow:none;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-category-feature__image,
  .home-cookie-mosaic__item,
  .home-category-feature__link span{
    transition:none !important;
  }
}


/* =========================================================
   V3.34 — Home category editorial campaign
   ========================================================= */

.home-category-showcase--v334{
  padding:120px 0 140px;
  background:
    linear-gradient(180deg, #f4eadb 0%, #f5eddf 52%, #f4eadb 100%);
  overflow:hidden;
  position:relative;
}

.home-category-showcase--v334::before{
  content:"";
  position:absolute;
  inset:auto -10% 14% auto;
  width:420px;
  height:420px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,122,34,.12) 0%, rgba(240,122,34,0) 70%);
  pointer-events:none;
}

.home-category-showcase__intro--compact{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:56px;
  align-items:end;
  margin-bottom:58px;
  padding-bottom:28px;
  border-bottom:1px solid rgba(7,61,44,.12);
}

.home-category-showcase__intro--compact h2{
  margin:10px 0 0;
  max-width:13ch;
  color:#073d2c;
  font-size:clamp(3.2rem,4.8vw,5.8rem);
  line-height:.94;
  letter-spacing:-.05em;
}

.home-category-showcase__intro--compact p{
  margin:0 0 4px auto;
  max-width:500px;
  color:rgba(7,61,44,.72);
  font-size:1rem;
  line-height:1.7;
}

/* Bread block */
.home-category-feature--bread-cinematic{
  position:relative;
  margin-bottom:96px;
}

.home-category-feature__bleed--bread{
  width:min(1480px, calc(100vw - 44px));
  margin-left:auto;
  position:relative;
}

.home-category-feature__visual--cinematic{
  position:relative;
  display:block;
  min-height:700px;
  overflow:hidden;
  border-radius:8px 0 0 8px;
  text-decoration:none;
  background:#d7ccb9;
  box-shadow:0 26px 70px rgba(19,35,27,.14);
}

.home-category-feature__visual--cinematic .home-category-feature__image{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center 52%;
  transition:transform .85s cubic-bezier(.22,.61,.36,1);
}

.home-category-feature__visual--cinematic:hover .home-category-feature__image{
  transform:scale(1.025);
}

.home-category-feature__copy--overlay{
  position:relative;
  margin-top:-160px;
  width:min(540px, 100%);
  padding:40px 0 0;
  z-index:4;
}

.home-category-feature__copy--overlay::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  width:92px;
  height:6px;
  background:#f07a22;
}

.home-category-feature__copy--overlay h3{
  margin:12px 0 20px;
  max-width:8.6ch;
  color:#073d2c;
  font-size:clamp(4rem,6.5vw,7.6rem);
  line-height:.88;
  letter-spacing:-.055em;
}

.home-category-feature__copy--overlay p{
  max-width:500px;
  margin:0 0 28px;
  color:rgba(7,61,44,.72);
  font-size:1rem;
  line-height:1.72;
}

/* Brand runner */
.home-brand-runner{
  position:relative;
  margin:20px 0 92px;
  overflow:hidden;
  border-top:1px solid rgba(7,61,44,.12);
  border-bottom:1px solid rgba(7,61,44,.12);
  background:#f07a22;
}

.home-brand-runner__track{
  display:flex;
  align-items:center;
  gap:44px;
  min-width:max-content;
  padding:13px 0;
  color:#fff8f2;
  font-size:.72rem;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  animation:teffitRunner 22s linear infinite;
}

.home-brand-runner__track span{
  white-space:nowrap;
}

@keyframes teffitRunner{
  from { transform:translateX(0); }
  to { transform:translateX(-25%); }
}

/* Cookie editorial collage */
.home-cookie-editorial__grid{
  display:grid;
  grid-template-columns:minmax(340px,.78fr) minmax(0,1.22fr);
  gap:74px;
  align-items:center;
}

.home-cookie-editorial__copy{
  max-width:500px;
  position:relative;
}

.home-cookie-editorial__copy::before{
  content:"";
  position:absolute;
  top:-12px;
  left:0;
  width:76px;
  height:6px;
  background:#f07a22;
}

.home-cookie-editorial__copy h3{
  margin:18px 0 20px;
  max-width:9.5ch;
  color:#073d2c;
  font-size:clamp(3.6rem,5.5vw,6.4rem);
  line-height:.9;
  letter-spacing:-.05em;
}

.home-cookie-editorial__copy p{
  max-width:480px;
  margin:0 0 28px;
  color:rgba(7,61,44,.72);
  font-size:1rem;
  line-height:1.72;
}

.home-cookie-collage{
  position:relative;
  min-height:690px;
}

.home-cookie-collage__bg{
  position:absolute;
  right:0;
  top:-12px;
  z-index:0;
  color:rgba(7,61,44,.07);
  font-size:clamp(8rem,18vw,15rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.08em;
  user-select:none;
}

.home-cookie-collage__item{
  position:absolute;
  display:block;
  overflow:hidden;
  border-radius:6px;
  background-size:cover;
  background-position:center;
  box-shadow:0 20px 50px rgba(23,36,29,.12);
  transition:transform .38s ease, box-shadow .38s ease, filter .38s ease;
}

.home-cookie-collage__item:hover{
  transform:translateY(-5px);
  box-shadow:0 28px 60px rgba(23,36,29,.16);
  filter:saturate(1.04);
}

.home-cookie-collage__item--hero{
  left:0;
  top:74px;
  width:60%;
  height:74%;
  z-index:2;
}

.home-cookie-collage__item--top{
  right:0;
  top:0;
  width:33%;
  height:32%;
  z-index:4;
}

.home-cookie-collage__item--bottom{
  right:7%;
  bottom:0;
  width:39%;
  height:34%;
  z-index:3;
}

.home-cookie-collage__item--accent{
  left:44%;
  top:49%;
  width:28%;
  height:26%;
  z-index:5;
  border:8px solid #f5eddf;
}

/* Shared editorial links */
.home-category-showcase--v334 .home-category-feature__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:7px;
  border-bottom:2px solid #f07a22;
  color:#073d2c;
  text-decoration:none;
  font-size:.87rem;
  font-weight:900;
}

.home-category-showcase--v334 .home-category-feature__link span{
  color:#f07a22;
  transition:transform .25s ease;
}

.home-category-showcase--v334 .home-category-feature__link:hover span{
  transform:translateX(4px);
}

/* Responsive */
@media(max-width:1120px){
  .home-category-showcase__intro--compact{
    grid-template-columns:1fr;
    gap:22px;
  }

  .home-category-showcase__intro--compact p{
    margin-left:0;
  }

  .home-cookie-editorial__grid{
    grid-template-columns:1fr;
    gap:46px;
  }

  .home-cookie-editorial__copy{
    max-width:700px;
  }
}

@media(max-width:900px){
  .home-category-showcase--v334{
    padding:92px 0 98px;
  }

  .home-category-feature__bleed--bread{
    width:min(100%, calc(100vw - 28px));
  }

  .home-category-feature__visual--cinematic{
    min-height:500px;
    border-radius:8px;
  }

  .home-category-feature__copy--overlay{
    margin-top:28px;
    width:100%;
    padding-top:30px;
  }

  .home-category-feature__copy--overlay h3{
    max-width:10ch;
    font-size:clamp(3rem,13vw,4.8rem);
  }

  .home-brand-runner{
    margin:48px 0 62px;
  }

  .home-cookie-collage{
    min-height:500px;
  }

  .home-cookie-collage__item--hero{
    width:62%;
    height:66%;
    top:64px;
  }
}

@media(max-width:640px){
  .home-category-showcase__intro--compact{
    margin-bottom:36px;
  }

  .home-category-showcase__intro--compact h2{
    font-size:clamp(2.8rem,12vw,4.2rem);
  }

  .home-category-feature--bread-cinematic{
    margin-bottom:62px;
  }

  .home-category-feature__visual--cinematic{
    min-height:390px;
  }

  .home-category-feature__copy--overlay p,
  .home-cookie-editorial__copy p{
    font-size:.94rem;
  }

  .home-brand-runner__track{
    gap:26px;
    font-size:.64rem;
    letter-spacing:.14em;
  }

  .home-cookie-collage{
    min-height:420px;
  }

  .home-cookie-collage__bg{
    font-size:7rem;
  }

  .home-cookie-collage__item--hero{
    left:0;
    top:34px;
    width:58%;
    height:58%;
  }

  .home-cookie-collage__item--top{
    width:36%;
    height:28%;
  }

  .home-cookie-collage__item--bottom{
    right:0;
    width:40%;
    height:29%;
  }

  .home-cookie-collage__item--accent{
    left:35%;
    top:52%;
    width:30%;
    height:22%;
    border-width:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .home-category-feature__visual--cinematic .home-category-feature__image,
  .home-cookie-collage__item,
  .home-brand-runner__track,
  .home-category-showcase--v334 .home-category-feature__link span{
    transition:none !important;
    animation:none !important;
  }
}


/* =========================================================
   V3.35 — Teff-It product cards
   Modern ecommerce card language inspired by contemporary
   food brands, translated into Teff-It styling.
   Scope: Our Products page only.
   ========================================================= */

/* Give the product rail more breathing space */
.products-page-v329 .v320-products__grid{
  gap:22px !important;
  padding-top:12px !important;
  padding-bottom:42px !important;
}

/* Light, product-first card */
.products-page-v329 .v320-card{
  position:relative;
  overflow:hidden !important;
  flex:0 0 clamp(315px,27vw,395px) !important;
  width:clamp(315px,27vw,395px) !important;
  border:1px solid rgba(7,61,44,.14) !important;
  border-radius:16px !important;
  background:#fffaf3 !important;
  box-shadow:0 10px 28px rgba(26,39,31,.07) !important;
  clip-path:none !important;
  transition:
    transform .3s ease,
    box-shadow .3s ease,
    border-color .3s ease !important;
}

.products-page-v329 .v320-card:hover{
  transform:translateY(-6px) !important;
  border-color:rgba(240,122,34,.72) !important;
  box-shadow:0 22px 44px rgba(26,39,31,.13) !important;
}

/* Product image becomes the hero of the card */
.products-page-v329 .v320-card__image{
  position:relative !important;
  aspect-ratio:1 / .92 !important;
  background-size:cover !important;
  background-position:center !important;
  background-color:#eadfce !important;
  border-bottom:0 !important;
  transform:none !important;
}

.products-page-v329 .v320-card:hover .v320-card__image{
  transform:none !important;
}

.products-page-v329 .v320-card__image::after{
  background:
    linear-gradient(
      180deg,
      rgba(7,61,44,0) 70%,
      rgba(7,61,44,.06) 100%
    ) !important;
}

/* Alternating soft Teff-It backgrounds around the image */
.products-page-v329 .v320-card:nth-child(4n+1) .v320-card__image{
  background-color:#e8decb !important;
}

.products-page-v329 .v320-card:nth-child(4n+2) .v320-card__image{
  background-color:#dfe7d7 !important;
}

.products-page-v329 .v320-card:nth-child(4n+3) .v320-card__image{
  background-color:#f0dfcf !important;
}

.products-page-v329 .v320-card:nth-child(4n+4) .v320-card__image{
  background-color:#e7dfd6 !important;
}

/* Product-line badge */
.products-page-v329 .v320-products--bread .v320-card__image::before,
.products-page-v329 .v320-products--cookies .v320-card__image::before{
  position:absolute;
  top:16px;
  left:16px;
  z-index:4;
  padding:8px 11px 7px;
  border-radius:999px;
  background:#f07a22;
  color:#fff;
  font-size:.65rem;
  font-weight:900;
  line-height:1;
  letter-spacing:.10em;
  text-transform:uppercase;
  box-shadow:0 6px 16px rgba(45,37,25,.10);
}

.products-page-v329 .v320-products--bread .v320-card__image::before{
  content:"Sport desem";
}

.products-page-v329 .v320-products--cookies .v320-card__image::before{
  content:"Teff-It koek";
}

/* Remove the old centered orange image strip */
.products-page-v329 .v320-card__accent{
  display:none !important;
}

/* Clean white / cream product information area */
.products-page-v329 .v320-card__body{
  position:relative;
  display:flex !important;
  flex-direction:column !important;
  min-height:252px !important;
  padding:24px 22px 20px !important;
  background:#fffaf3 !important;
}

/* tiny orange brand marker */
.products-page-v329 .v320-card__body::before{
  content:"TEFF ALS BASIS";
  display:block;
  margin-bottom:10px;
  color:#b86125;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
}

.products-page-v329 .v320-card__body h3{
  margin:0 0 9px !important;
  color:#073d2c !important;
  font-size:1.42rem !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
}

.products-page-v329 .v320-card__body p{
  max-width:31ch !important;
  margin:0 0 22px !important;
  color:rgba(7,61,44,.68) !important;
  font-size:.9rem !important;
  line-height:1.55 !important;
}

/* Wide ecommerce CTA */
.products-page-v329 .v320-card__button{
  width:100% !important;
  min-height:46px !important;
  margin-top:auto !important;
  padding:12px 15px !important;
  justify-content:space-between !important;
  border:1px solid #073d2c !important;
  border-radius:6px !important;
  background:#073d2c !important;
  color:#fff !important;
  font-size:.8rem !important;
  font-weight:850 !important;
  letter-spacing:.015em !important;
}

.products-page-v329 .v320-card__button span{
  color:#f5a163 !important;
  font-size:1rem;
}

.products-page-v329 .v320-card__button:hover,
.products-page-v329 .v320-card__button:focus-visible{
  background:#f07a22 !important;
  border-color:#f07a22 !important;
  color:#fff !important;
}

.products-page-v329 .v320-card__button:hover span,
.products-page-v329 .v320-card__button:focus-visible span{
  color:#fff !important;
}

/* Navigation buttons fit the new card language */
.products-page-v329 .v320-products__arrow{
  width:50px !important;
  height:50px !important;
  border:1px solid rgba(7,61,44,.18) !important;
  background:#fffaf3 !important;
  color:#073d2c !important;
  box-shadow:0 12px 26px rgba(25,38,30,.10) !important;
}

.products-page-v329 .v320-products__arrow:hover{
  background:#073d2c !important;
  border-color:#073d2c !important;
  color:#f5a163 !important;
}

/* Slightly cleaner page section backgrounds */
.products-page-v329 .v320-products--bread{
  background:#f4eadb !important;
}

.products-page-v329 .v320-products--cookies{
  background:#eee6d9 !important;
}

/* Product section kicker in orange for stronger brand hierarchy */
.products-page-v329 .v320-products__heading .kicker{
  color:#b75e23 !important;
}

@media(max-width:900px){
  .products-page-v329 .v320-card{
    flex-basis:min(76vw,350px) !important;
    width:min(76vw,350px) !important;
  }
}

@media(max-width:640px){
  .products-page-v329 .v320-card{
    flex-basis:min(84vw,340px) !important;
    width:min(84vw,340px) !important;
    border-radius:12px !important;
  }

  .products-page-v329 .v320-card__body{
    min-height:230px !important;
    padding:21px 18px 18px !important;
  }

  .products-page-v329 .v320-card__body h3{
    font-size:1.3rem !important;
  }

  .products-page-v329 .v320-card__button{
    min-height:44px !important;
  }
}


/* =========================================================
   V3.35.1 — Home restore safeguard
   Home markup restored to V3.33; experimental V3.34 markup is not used.
   ========================================================= */

body.home .home-category-showcase:not(.home-category-showcase--v334){
  display:block;
}


/* =========================================================
   V3.35.2 — Home palette balance
   Dark green becomes an anchor instead of the default tone.
   Scope: Home only.
   ========================================================= */

/* 1) Product category intro stays warm and food-focused */
body.home .home-category-showcase{
  background:#f3e7d7 !important;
}

/* Give the second category a very subtle tonal shift */
body.home .home-category-feature--cookies{
  position:relative;
}

body.home .home-category-feature--cookies::before{
  content:"";
  position:absolute;
  inset:-54px calc(50% - 50vw) -54px;
  z-index:-1;
  background:#f7f0e7;
}

/* 2) Lifestyle section: soft sage instead of another green-heavy block */
body.home .life-section{
  background:#e7e9de !important;
}

body.home .life-heading .kicker{
  color:#b76026 !important;
}

body.home .life-heading h2{
  color:#173f32 !important;
}

body.home .life-heading p{
  color:#596a61 !important;
}

/* Photo cards stay rich, but use a warmer neutral shadow rather than green-black */
body.home .life-card::after{
  background:
    linear-gradient(
      to top,
      rgba(31,25,20,.88) 0%,
      rgba(31,25,20,.52) 46%,
      rgba(31,25,20,.08) 78%,
      rgba(31,25,20,0) 100%
    ) !important;
}

body.home .life-card{
  border-color:rgba(62,69,59,.14) !important;
  box-shadow:0 16px 34px rgba(52,46,37,.09) !important;
}

/* 3) Teff banner remains the dark visual anchor */
body.home .teff-banner .overlay{
  background:
    linear-gradient(
      90deg,
      rgba(15,47,35,.84) 0%,
      rgba(15,47,35,.60) 42%,
      rgba(15,47,35,.20) 72%,
      rgba(15,47,35,.05) 100%
    ) !important;
}

/* Orange becomes the small brand spark inside the dark section */
body.home .teff-banner .kicker{
  color:#f5a162 !important;
}

/* 4) Why section deliberately light to break up the page */
body.home .why-section.why-text-only{
  background:#fff9f0 !important;
}

body.home .why-text-heading .kicker{
  color:#b76026 !important;
}

body.home .why-text-heading h2{
  color:#173f32 !important;
}

body.home .why-text-copy p{
  color:#617067 !important;
}

/* Let this CTA be the warm accent instead of yet another green button */
body.home .why-text-copy .button-green{
  background:#f07a22 !important;
  border-color:#f07a22 !important;
  color:#fff !important;
}

body.home .why-text-copy .button-green:hover,
body.home .why-text-copy .button-green:focus-visible{
  background:#173f32 !important;
  border-color:#173f32 !important;
}

/* 5) Section separators use warm neutral tones rather than green everywhere */
body.home .home-category-showcase__intro,
body.home .home-category-feature + .home-category-feature{
  border-color:rgba(104,78,56,.16) !important;
}

body.home .life-section::before,
body.home .why-section::before{
  background:rgba(104,78,56,.14) !important;
}

/* 6) Slightly soften dark-green typography across light Home sections */
body.home .home-category-showcase h2,
body.home .home-category-feature__copy h3{
  color:#173f32 !important;
}

@media(max-width:700px){
  body.home .home-category-feature--cookies::before{
    inset:-34px calc(50% - 50vw) -34px;
  }
}


/* =========================================================
   V3.35.3 — Home productintro centered + statement
   ========================================================= */

body.home .home-category-showcase__intro{
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:18px !important;
  text-align:center !important;
}

body.home .home-category-showcase__intro > div:first-child{
  width:100% !important;
  max-width:1000px !important;
}

body.home .home-category-showcase__intro .kicker{
  text-align:center !important;
}

body.home .home-category-showcase__intro h2{
  width:100% !important;
  max-width:14ch !important;
  margin-left:auto !important;
  margin-right:auto !important;
  text-align:center !important;
}

body.home .home-category-showcase__statement{
  margin:0 auto !important;
  color:#b76026 !important;
  font-size:clamp(1.05rem,1.6vw,1.45rem) !important;
  font-weight:800 !important;
  line-height:1.2 !important;
  letter-spacing:.02em !important;
  text-align:center !important;
}

@media(max-width:700px){
  body.home .home-category-showcase__intro{
    gap:14px !important;
  }

  body.home .home-category-showcase__statement{
    font-size:1rem !important;
  }
}


/* =========================================================
   V3.35.4 — Home dark statement bands + overlapping lifestyle
   Scope: Home only.
   ========================================================= */

/* 1) Product-lines intro becomes a strong dark statement band */
body.home .home-category-showcase{
  background:#f3e7d7 !important;
}

body.home .home-category-showcase__intro{
  position:relative !important;
  width:100vw !important;
  max-width:none !important;
  margin-left:calc(50% - 50vw) !important;
  margin-right:calc(50% - 50vw) !important;
  margin-bottom:74px !important;
  padding:78px max(24px, calc((100vw - var(--shell)) / 2)) 72px !important;
  border:0 !important;
  background:#173f32 !important;
}

body.home .home-category-showcase__intro::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  width:min(980px, calc(100% - 48px));
  height:1px;
  transform:translateX(-50%);
  background:rgba(255,255,255,.12);
}

body.home .home-category-showcase__intro .kicker{
  color:#f07a22 !important;
}

body.home .home-category-showcase__intro h2{
  color:#fff7ec !important;
}

body.home .home-category-showcase__statement{
  color:#f3a164 !important;
}

/* 2) Lifestyle section gets a dark editorial header zone */
body.home .life-section{
  position:relative !important;
  overflow:hidden !important;
  padding-top:0 !important;
  background:
    linear-gradient(
      to bottom,
      #173f32 0,
      #173f32 330px,
      #e7e9de 330px,
      #e7e9de 100%
    ) !important;
}

body.home .life-section::before{
  display:none !important;
}

body.home .life-heading{
  position:relative !important;
  z-index:2 !important;
  padding-top:82px !important;
  padding-bottom:118px !important;
}

body.home .life-heading .kicker{
  color:#f3a164 !important;
}

body.home .life-heading h2{
  color:#fff7ec !important;
}

body.home .life-heading p{
  color:rgba(255,247,236,.72) !important;
}

/* Cards overlap the dark header and the light lower area */
body.home .life-grid{
  position:relative !important;
  z-index:3 !important;
  margin-top:-72px !important;
  padding-bottom:96px !important;
}

body.home .life-card{
  border-color:rgba(255,255,255,.12) !important;
  box-shadow:0 22px 46px rgba(40,39,32,.13) !important;
}

/* Slightly stronger first card rhythm */
body.home .life-card:nth-child(1),
body.home .life-card:nth-child(3){
  transform:translateY(-8px);
}

body.home .life-card:nth-child(2),
body.home .life-card:nth-child(4){
  transform:translateY(8px);
}

/* Keep hover intentional */
body.home .life-card:hover{
  transform:translateY(-12px) !important;
}

/* Reset stagger on smaller screens */
@media(max-width:900px){
  body.home .home-category-showcase__intro{
    padding-top:64px !important;
    padding-bottom:58px !important;
  }

  body.home .life-section{
    background:
      linear-gradient(
        to bottom,
        #173f32 0,
        #173f32 390px,
        #e7e9de 390px,
        #e7e9de 100%
      ) !important;
  }

  body.home .life-heading{
    padding-top:64px !important;
    padding-bottom:102px !important;
  }

  body.home .life-grid{
    margin-top:-56px !important;
  }

  body.home .life-card:nth-child(n){
    transform:none;
  }
}

@media(max-width:640px){
  body.home .home-category-showcase__intro{
    margin-bottom:56px !important;
    padding-left:22px !important;
    padding-right:22px !important;
  }

  body.home .life-section{
    background:
      linear-gradient(
        to bottom,
        #173f32 0,
        #173f32 430px,
        #e7e9de 430px,
        #e7e9de 100%
      ) !important;
  }

  body.home .life-heading{
    padding-top:56px !important;
    padding-bottom:88px !important;
  }

  body.home .life-grid{
    margin-top:-44px !important;
    padding-bottom:72px !important;
  }
}


/* =========================================================
   V3.35.5 — Home green bands continuity fix
   ========================================================= */

/* Remove the unnecessary cream gap above the dark product-line statement */
body.home .home-category-showcase{
  padding-top:0 !important;
}

body.home .home-category-showcase__intro{
  margin-top:0 !important;
}

/* Ensure no top pseudo/spacing creates a visible cream strip */
body.home .home-category-showcase::before{
  display:none !important;
}

/* Extend the lower dark-green zone so it visually reaches the wide image below */
body.home .life-section{
  background:#173f32 !important;
  padding-bottom:0 !important;
}

/* Keep cards sitting over the green section rather than ending into sage too early */
body.home .life-grid{
  padding-bottom:110px !important;
}

/* Make the transition into the following wide image continuous */
body.home .life-section + .teff-banner,
body.home .life-section + .cta-banner,
body.home .life-section + section{
  margin-top:0 !important;
}

/* If the wide image follows via another wrapper, remove pale separator space */
body.home .life-section + *{
  border-top:0 !important;
}

@media(max-width:900px){
  body.home .life-grid{
    padding-bottom:88px !important;
  }
}

@media(max-width:640px){
  body.home .life-grid{
    padding-bottom:72px !important;
  }
}


/* =========================================================
   V3.35.6 — Lifestyle cards border cleanup
   ========================================================= */

body.home .life-card{
  border:0 !important;
  outline:0 !important;
  box-shadow:0 20px 44px rgba(24,31,26,.14) !important;
}

body.home .life-card:hover{
  box-shadow:0 28px 56px rgba(24,31,26,.18) !important;
}


/* =========================================================
   V3.36 — Our Products editorial rhythm
   ========================================================= */

/* Hero: new image + clearer premium contrast */
.products-page-v329 .products-hero-v323{
  min-height:700px !important;
}

.products-page-v329 .products-hero-v323__photo{
  background-position:center 54% !important;
}

.products-page-v329 .products-hero-v323__fade{
  background:
    linear-gradient(
      90deg,
      rgba(17,58,45,.92) 0%,
      rgba(17,58,45,.76) 29%,
      rgba(17,58,45,.36) 53%,
      rgba(17,58,45,.05) 76%,
      rgba(17,58,45,0) 100%
    ) !important;
}

/* First product family stays warm */
.products-page-v329 .v320-products--bread{
  background:#f3e7d7 !important;
  padding-top:118px !important;
  padding-bottom:116px !important;
}

/* Second product family has its own softer identity */
.products-page-v329 .v320-products--cookies{
  background:#e7e9df !important;
  padding-top:120px !important;
  padding-bottom:124px !important;
}

.products-page-v329 .v320-products--cookies .v320-products__heading h2,
.products-page-v329 .v320-products--cookies .v320-products__intro p{
  color:#173f32 !important;
}

/* ---------- Editorial bridge between product lines ---------- */
.products-editorial-bridge{
  position:relative;
  overflow:hidden;
  padding:118px 0 126px;
  background:#173f32;
  color:#fff7ec;
}

.products-editorial-bridge::before{
  content:"";
  position:absolute;
  left:-120px;
  bottom:-190px;
  width:520px;
  height:520px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(240,122,34,.14) 0%, rgba(240,122,34,0) 70%);
  pointer-events:none;
}

.products-editorial-bridge__grid{
  display:grid;
  grid-template-columns:minmax(340px,.82fr) minmax(0,1.18fr);
  gap:82px;
  align-items:center;
}

.products-editorial-bridge__copy{
  position:relative;
  z-index:3;
  max-width:560px;
}

.products-editorial-bridge__copy .kicker{
  color:#f3a164 !important;
}

.products-editorial-bridge__copy h2{
  margin:12px 0 24px;
  max-width:10ch;
  color:#fff7ec;
  font-size:clamp(4rem,5.8vw,6.8rem);
  line-height:.9;
  letter-spacing:-.055em;
}

.products-editorial-bridge__copy p{
  max-width:500px;
  margin:0 0 30px;
  color:rgba(255,247,236,.72);
  font-size:1rem;
  line-height:1.72;
}

.products-editorial-bridge__link{
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding-bottom:7px;
  border-bottom:2px solid #f07a22;
  color:#fff7ec;
  text-decoration:none;
  font-size:.86rem;
  font-weight:900;
}

.products-editorial-bridge__link span{
  color:#f3a164;
  transition:transform .24s ease;
}

.products-editorial-bridge__link:hover span{
  transform:translateX(4px);
}

.products-editorial-bridge__visuals{
  position:relative;
  min-height:590px;
}

.products-editorial-bridge__bread,
.products-editorial-bridge__cookie{
  position:absolute;
  background-size:cover;
  background-position:center;
  box-shadow:0 24px 56px rgba(0,0,0,.22);
}

.products-editorial-bridge__bread{
  inset:0 12% 12% 0;
  border-radius:8px;
}

.products-editorial-bridge__cookie{
  right:0;
  bottom:0;
  width:38%;
  aspect-ratio:1 / 1;
  border:8px solid #173f32;
  border-radius:50%;
  background-position:center;
  z-index:4;
}

.products-editorial-bridge__number{
  position:absolute;
  top:-42px;
  right:-4px;
  z-index:1;
  color:rgba(255,255,255,.06);
  font-size:clamp(8rem,15vw,14rem);
  font-weight:900;
  line-height:1;
  letter-spacing:-.08em;
  user-select:none;
}

/* The CTA remains a strong dark close, but orange separates it */
.products-page-v329 .subpage-cta{
  border-top:5px solid #f07a22 !important;
}

/* Product cards feel slightly more at home on the sage cookie section */
.products-page-v329 .v320-products--cookies .v320-card{
  background:#fffaf3 !important;
}

/* Keep section transitions crisp */
.products-page-v329 .v320-products--bread,
.products-page-v329 .v320-products--cookies,
.products-editorial-bridge{
  margin:0 !important;
}

/* Mobile / tablet */
@media(max-width:980px){
  .products-page-v329 .products-hero-v323{
    min-height:610px !important;
  }

  .products-editorial-bridge__grid{
    grid-template-columns:1fr;
    gap:48px;
  }

  .products-editorial-bridge__copy{
    max-width:720px;
  }

  .products-editorial-bridge__copy h2{
    max-width:11ch;
  }

  .products-editorial-bridge__visuals{
    min-height:500px;
  }
}

@media(max-width:640px){
  .products-page-v329 .products-hero-v323{
    min-height:560px !important;
  }

  .products-page-v329 .v320-products--bread,
  .products-page-v329 .v320-products--cookies{
    padding-top:86px !important;
    padding-bottom:90px !important;
  }

  .products-editorial-bridge{
    padding:84px 0 92px;
  }

  .products-editorial-bridge__copy h2{
    max-width:none;
    font-size:clamp(3rem,12vw,4.6rem);
  }

  .products-editorial-bridge__visuals{
    min-height:360px;
  }

  .products-editorial-bridge__bread{
    inset:0 8% 10% 0;
  }

  .products-editorial-bridge__cookie{
    width:36%;
    border-width:5px;
  }
}

@media(prefers-reduced-motion:reduce){
  .products-editorial-bridge__link span{
    transition:none !important;
  }
}


/* =========================================================
   V3.36.1 — Cleanup pass after V3.36
   Goal: sharper readable text, cleaner product boxes,
   softer image filters, and straighter section rhythm.
   ========================================================= */

/* --- Product hero: slightly less heavy dark fade for crisper copy --- */
.products-page-v329 .products-hero-v323__fade{
  background:
    linear-gradient(
      90deg,
      rgba(17,58,45,.86) 0%,
      rgba(17,58,45,.68) 28%,
      rgba(17,58,45,.34) 52%,
      rgba(17,58,45,.09) 77%,
      rgba(17,58,45,0) 100%
    ) !important;
}

.products-page-v329 .products-hero-v323__copy{
  max-width:740px !important;
  text-shadow:0 1px 2px rgba(0,0,0,.14);
}

.products-page-v329 .products-hero-v323__copy p{
  max-width:640px !important;
  color:rgba(255,247,236,.92) !important;
}

/* --- Product cards: cleaner and more modern --- */
.products-page-v329 .v320-card{
  clip-path:none !important;
  border-radius:18px !important;
  overflow:hidden !important;
  background:#fffaf4 !important;
  border:1px solid rgba(23,63,50,.12) !important;
  box-shadow:0 16px 34px rgba(25,32,28,.08) !important;
}

.products-page-v329 .v320-card:hover{
  transform:translateY(-4px) !important;
  box-shadow:0 24px 44px rgba(25,32,28,.12) !important;
}

.products-page-v329 .v320-card__image{
  position:relative !important;
  aspect-ratio:1.14 / 1 !important;
  border-bottom:0 !important;
}

.products-page-v329 .v320-card__image::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:34%;
  background:linear-gradient(to top, rgba(9,38,29,.18), rgba(9,38,29,0));
  pointer-events:none;
}

.products-page-v329 .v320-card__accent{
  display:none !important;
}

.products-page-v329 .v320-card__body{
  min-height:228px !important;
  padding:24px 24px 26px !important;
  background:#fffaf4 !important;
}

.products-page-v329 .v320-card__body h3{
  margin-bottom:10px !important;
  color:#173f32 !important;
  font-size:1.18rem !important;
  line-height:1.08 !important;
}

.products-page-v329 .v320-card__body p{
  color:#617067 !important;
  font-size:.95rem !important;
  line-height:1.62 !important;
}

.products-page-v329 .v320-card__button{
  min-height:42px !important;
  border-radius:999px !important;
  border:1px solid #173f32 !important;
  background:#173f32 !important;
  color:#fff !important;
  padding:11px 16px !important;
}

.products-page-v329 .v320-card__button span{
  color:#f3a164 !important;
}

.products-page-v329 .v320-card__button:hover,
.products-page-v329 .v320-card__button:focus-visible{
  background:#f07a22 !important;
  border-color:#f07a22 !important;
  color:#fff !important;
}

.products-page-v329 .v320-card__button:hover span,
.products-page-v329 .v320-card__button:focus-visible span{
  color:#fff !important;
}

/* Better alignment for card rows */
.products-page-v329 .v320-products__grid{
  align-items:stretch !important;
  border-bottom:0 !important;
}

/* --- Section copy blocks: cleaner spacing --- */
.products-page-v329 .v320-products__head{
  margin-bottom:40px !important;
}

.products-page-v329 .v320-products__intro p{
  color:#5b655f !important;
}

/* --- Editorial bridge: remove any muddy feeling and tidy the boxes --- */
.products-editorial-bridge{
  padding:112px 0 118px !important;
}

.products-editorial-bridge__copy p{
  color:rgba(255,247,236,.82) !important;
}

.products-editorial-bridge__bread{
  border-radius:20px !important;
}

.products-editorial-bridge__cookie{
  border-width:6px !important;
  box-shadow:0 20px 44px rgba(0,0,0,.22) !important;
}

/* --- Home lifestyle cards: text sharper, overlay less muddy --- */
body.home .life-card::after{
  background:
    linear-gradient(
      to top,
      rgba(20,17,14,.74) 0%,
      rgba(20,17,14,.38) 45%,
      rgba(20,17,14,.08) 76%,
      rgba(20,17,14,0) 100%
    ) !important;
}

body.home .life-card > div{
  text-shadow:0 1px 2px rgba(0,0,0,.18);
}

body.home .life-card p{
  color:rgba(255,248,240,.92) !important;
}

/* --- Mobile refinements --- */
@media(max-width:760px){
  .products-page-v329 .v320-card{
    border-radius:16px !important;
  }

  .products-page-v329 .v320-card__body{
    min-height:0 !important;
    padding:21px 20px 22px !important;
  }

  .products-page-v329 .v320-products__head{
    margin-bottom:28px !important;
  }

  .products-editorial-bridge{
    padding:84px 0 90px !important;
  }
}


/* =========================================================
   V3.36.2 — DEFINITIVE OUR PRODUCTS LAYOUT RESET
   This block intentionally wins over all older product-page
   experiments to remove colour conflicts and overlaps.
   Scope: .products-page-v329 only.
   ========================================================= */

/* ---------- PAGE / HERO ---------- */
.products-page-v329{
  background:#f6efe5 !important;
  color:#173f32 !important;
}

.products-page-v329 .products-hero-v323{
  position:relative !important;
  min-height:640px !important;
  background:#173f32 !important;
  overflow:hidden !important;
}

.products-page-v329 .products-hero-v323__photo{
  inset:0 !important;
  width:100% !important;
  height:100% !important;
  opacity:1 !important;
  filter:none !important;
  background-size:cover !important;
  background-position:center 54% !important;
}

.products-page-v329 .products-hero-v323__fade{
  inset:0 !important;
  background:linear-gradient(
    90deg,
    rgba(17,63,50,.93) 0%,
    rgba(17,63,50,.82) 30%,
    rgba(17,63,50,.50) 52%,
    rgba(17,63,50,.14) 76%,
    rgba(17,63,50,0) 100%
  ) !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
}

.products-page-v329 .products-hero-v323__inner{
  position:relative !important;
  z-index:2 !important;
  min-height:640px !important;
  display:flex !important;
  align-items:center !important;
  padding-top:78px !important;
  padding-bottom:70px !important;
}

.products-page-v329 .products-hero-v323__copy{
  width:min(680px,100%) !important;
  max-width:680px !important;
  padding:0 !important;
  background:transparent !important;
  backdrop-filter:none !important;
  -webkit-backdrop-filter:none !important;
  filter:none !important;
  text-shadow:none !important;
}

.products-page-v329 .products-hero-v323 .kicker{
  color:#f3a164 !important;
}

.products-page-v329 .products-hero-v323 h1{
  max-width:9.5ch !important;
  margin:12px 0 24px !important;
  color:#fff8ef !important;
  line-height:.91 !important;
  letter-spacing:-.045em !important;
}

.products-page-v329 .products-hero-v323__copy p{
  max-width:590px !important;
  margin:0 !important;
  color:rgba(255,248,239,.88) !important;
  font-size:1.05rem !important;
  line-height:1.68 !important;
}

/* ---------- TICKER ---------- */
.products-page-v329 .products-teff-ticker{
  background:#f07a22 !important;
  border:0 !important;
}

.products-page-v329 .products-teff-ticker::before,
.products-page-v329 .products-teff-ticker::after{
  display:none !important;
}

.products-page-v329 .products-teff-ticker__track,
.products-page-v329 .products-teff-ticker__set{
  color:#fff8ef !important;
}

/* old hidden intro stays completely out of layout */
.products-page-v329 .products-teff-ticker + .detail-intro{
  display:none !important;
  height:0 !important;
  margin:0 !important;
  padding:0 !important;
}

/* ---------- PRODUCT SECTIONS ---------- */
.products-page-v329 .v320-products{
  margin:0 !important;
  border:0 !important;
}

.products-page-v329 .v320-products--bread{
  padding:104px 0 112px !important;
  background:#f3e7d7 !important;
}

.products-page-v329 .v320-products--cookies{
  padding:104px 0 112px !important;
  background:#e7e9df !important;
}

.products-page-v329 .v320-products__head{
  display:grid !important;
  grid-template-columns:1fr !important;
  gap:14px !important;
  width:100% !important;
  margin:0 0 44px !important;
  padding:0 !important;
  align-items:start !important;
}

.products-page-v329 .v320-products__heading,
.products-page-v329 .v320-products__intro{
  grid-column:1 !important;
  grid-row:auto !important;
  width:100% !important;
  max-width:none !important;
  margin:0 !important;
  padding:0 !important;
  justify-self:stretch !important;
  text-align:center !important;
}

.products-page-v329 .v320-products__heading .kicker{
  color:#b76026 !important;
  text-align:center !important;
}

.products-page-v329 .v320-products__heading h2{
  width:min(100%,1100px) !important;
  max-width:1100px !important;
  margin:10px auto 0 !important;
  color:#173f32 !important;
  text-align:center !important;
  line-height:.95 !important;
}

.products-page-v329 .v320-products__intro{
  max-width:720px !important;
  justify-self:center !important;
}

.products-page-v329 .v320-products__intro p{
  max-width:720px !important;
  margin:0 auto !important;
  color:#5d6962 !important;
  text-align:center !important;
  font-size:.96rem !important;
  line-height:1.66 !important;
}

/* ---------- RAIL ---------- */
.products-page-v329 .v320-products__rail-wrap{
  position:relative !important;
  overflow:visible !important;
}

.products-page-v329 .v320-products__grid{
  display:flex !important;
  align-items:stretch !important;
  gap:22px !important;
  margin:0 !important;
  padding:10px 2px 28px !important;
  border:0 !important;
  scroll-padding-left:2px !important;
}

.products-page-v329 .v320-products__grid::before,
.products-page-v329 .v320-products__grid::after{
  display:none !important;
  content:none !important;
}

/* ---------- CARD: one authoritative design ---------- */
.products-page-v329 .v320-card{
  position:relative !important;
  display:flex !important;
  flex:0 0 clamp(315px,27vw,390px) !important;
  flex-direction:column !important;
  width:clamp(315px,27vw,390px) !important;
  min-width:0 !important;
  height:auto !important;
  overflow:hidden !important;
  clip-path:none !important;
  border:1px solid rgba(23,63,50,.12) !important;
  border-radius:16px !important;
  background:#fffaf4 !important;
  box-shadow:0 12px 30px rgba(25,34,29,.08) !important;
  transform:none !important;
}

.products-page-v329 .v320-card:hover{
  transform:translateY(-4px) !important;
  border-color:rgba(240,122,34,.38) !important;
  box-shadow:0 22px 44px rgba(25,34,29,.12) !important;
}

.products-page-v329 .v320-card__image{
  position:relative !important;
  display:block !important;
  flex:0 0 auto !important;
  width:100% !important;
  aspect-ratio:1.12 / 1 !important;
  overflow:hidden !important;
  border:0 !important;
  border-radius:0 !important;
  background-size:cover !important;
  background-position:center !important;
  filter:none !important;
  opacity:1 !important;
  transform:none !important;
}

.products-page-v329 .v320-card:hover .v320-card__image{
  transform:none !important;
  filter:none !important;
}

/* No dark image filter / no old accent strip */
.products-page-v329 .v320-card__image::after{
  display:none !important;
  content:none !important;
}

.products-page-v329 .v320-card__accent{
  display:none !important;
}

/* Keep only one small product-line badge */
.products-page-v329 .v320-card__image::before{
  top:16px !important;
  left:16px !important;
  right:auto !important;
  bottom:auto !important;
  z-index:3 !important;
  display:block !important;
  width:auto !important;
  height:auto !important;
  padding:8px 11px 7px !important;
  border:0 !important;
  border-radius:999px !important;
  background:#f07a22 !important;
  color:#fff !important;
  box-shadow:none !important;
  font-size:.62rem !important;
  font-weight:900 !important;
  line-height:1 !important;
  letter-spacing:.08em !important;
  text-transform:uppercase !important;
}

.products-page-v329 .v320-products--bread .v320-card__image::before{
  content:"Sport desem" !important;
}
.products-page-v329 .v320-products--cookies .v320-card__image::before{
  content:"Teff-It koek" !important;
}

.products-page-v329 .v320-card__body{
  position:relative !important;
  display:flex !important;
  flex:1 1 auto !important;
  flex-direction:column !important;
  width:100% !important;
  min-height:238px !important;
  margin:0 !important;
  padding:24px 22px 20px !important;
  background:#fffaf4 !important;
  color:#173f32 !important;
  overflow:visible !important;
}

/* Remove duplicate TEFF ALS BASIS pseudo-label which caused crowding */
.products-page-v329 .v320-card__body::before,
.products-page-v329 .v320-card__body::after{
  display:none !important;
  content:none !important;
}

.products-page-v329 .v320-card__body h3{
  position:static !important;
  margin:0 0 10px !important;
  color:#173f32 !important;
  font-size:1.32rem !important;
  line-height:1.08 !important;
  letter-spacing:-.025em !important;
}

.products-page-v329 .v320-card__body p{
  position:static !important;
  display:block !important;
  max-width:none !important;
  margin:0 0 22px !important;
  color:#5d6962 !important;
  font-size:.91rem !important;
  line-height:1.55 !important;
  overflow:visible !important;
}

.products-page-v329 .v320-card__button{
  position:static !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  width:100% !important;
  min-height:44px !important;
  margin:auto 0 0 !important;
  padding:11px 15px !important;
  border:1px solid #173f32 !important;
  border-radius:7px !important;
  background:#173f32 !important;
  color:#fff !important;
  font-size:.80rem !important;
  font-weight:850 !important;
  line-height:1.1 !important;
  text-decoration:none !important;
}

.products-page-v329 .v320-card__button span{
  color:#f3a164 !important;
}

.products-page-v329 .v320-card__button:hover,
.products-page-v329 .v320-card__button:focus-visible{
  background:#f07a22 !important;
  border-color:#f07a22 !important;
  color:#fff !important;
}

.products-page-v329 .v320-card__button:hover span,
.products-page-v329 .v320-card__button:focus-visible span{
  color:#fff !important;
}

/* ---------- ARROWS: keep them off the card text ---------- */
.products-page-v329 .v320-products__nav{
  inset:0 !important;
  pointer-events:none !important;
}

.products-page-v329 .v320-products__arrow{
  top:42% !important;
  width:46px !important;
  height:46px !important;
  border:0 !important;
  background:#173f32 !important;
  color:#f3a164 !important;
  box-shadow:0 10px 24px rgba(17,39,31,.16) !important;
}

.products-page-v329 .v320-products__arrow--prev{
  left:-18px !important;
}

.products-page-v329 .v320-products__arrow--next{
  right:-18px !important;
}

.products-page-v329 .v320-products__arrow:hover{
  background:#f07a22 !important;
  color:#fff !important;
}

/* ---------- EDITORIAL BRIDGE: clean split, no collisions ---------- */
.products-page-v329 .products-editorial-bridge{
  position:relative !important;
  overflow:hidden !important;
  margin:0 !important;
  padding:108px 0 !important;
  background:#173f32 !important;
  color:#fff8ef !important;
}

.products-page-v329 .products-editorial-bridge::before{
  display:none !important;
  content:none !important;
}

.products-page-v329 .products-editorial-bridge__grid{
  display:grid !important;
  grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr) !important;
  gap:72px !important;
  align-items:center !important;
}

.products-page-v329 .products-editorial-bridge__copy{
  position:relative !important;
  z-index:3 !important;
  width:100% !important;
  max-width:540px !important;
  padding:0 !important;
}

.products-page-v329 .products-editorial-bridge__copy .kicker{
  color:#f3a164 !important;
}

.products-page-v329 .products-editorial-bridge__copy h2{
  max-width:10ch !important;
  margin:12px 0 24px !important;
  color:#fff8ef !important;
  font-size:clamp(3.5rem,5vw,6rem) !important;
  line-height:.92 !important;
  letter-spacing:-.045em !important;
}

.products-page-v329 .products-editorial-bridge__copy p{
  max-width:500px !important;
  margin:0 0 28px !important;
  color:rgba(255,248,239,.82) !important;
  font-size:.98rem !important;
  line-height:1.68 !important;
}

.products-page-v329 .products-editorial-bridge__visuals{
  position:relative !important;
  min-width:0 !important;
  min-height:520px !important;
  overflow:visible !important;
}

.products-page-v329 .products-editorial-bridge__bread{
  position:absolute !important;
  inset:0 10% 8% 0 !important;
  border:0 !important;
  border-radius:14px !important;
  background-size:cover !important;
  background-position:center !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:0 20px 44px rgba(0,0,0,.18) !important;
}

.products-page-v329 .products-editorial-bridge__cookie{
  position:absolute !important;
  right:0 !important;
  bottom:0 !important;
  width:34% !important;
  aspect-ratio:1 / 1 !important;
  border:6px solid #173f32 !important;
  border-radius:50% !important;
  background-size:cover !important;
  background-position:center !important;
  filter:none !important;
  opacity:1 !important;
  box-shadow:0 18px 38px rgba(0,0,0,.20) !important;
}

.products-page-v329 .products-editorial-bridge__number{
  top:-26px !important;
  right:0 !important;
  color:rgba(255,255,255,.055) !important;
  pointer-events:none !important;
}

/* ---------- CTA ---------- */
.products-page-v329 .subpage-cta{
  margin:0 !important;
  border-top:5px solid #f07a22 !important;
  background:#0f352a !important;
}

.products-page-v329 .subpage-cta h2,
.products-page-v329 .subpage-cta p{
  color:#fff8ef !important;
}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .products-page-v329 .products-hero-v323,
  .products-page-v329 .products-hero-v323__inner{
    min-height:570px !important;
  }

  .products-page-v329 .products-editorial-bridge__grid{
    grid-template-columns:1fr !important;
    gap:44px !important;
  }

  .products-page-v329 .products-editorial-bridge__copy{
    max-width:680px !important;
  }

  .products-page-v329 .products-editorial-bridge__visuals{
    min-height:460px !important;
  }

  .products-page-v329 .v320-products__arrow--prev{left:6px !important;}
  .products-page-v329 .v320-products__arrow--next{right:6px !important;}
}

@media(max-width:760px){
  .products-page-v329 .products-hero-v323,
  .products-page-v329 .products-hero-v323__inner{
    min-height:520px !important;
  }

  .products-page-v329 .products-hero-v323__fade{
    background:linear-gradient(
      180deg,
      rgba(17,63,50,.68) 0%,
      rgba(17,63,50,.78) 48%,
      rgba(17,63,50,.94) 100%
    ) !important;
  }

  .products-page-v329 .products-hero-v323__inner{
    align-items:flex-end !important;
    padding-top:110px !important;
    padding-bottom:48px !important;
  }

  .products-page-v329 .v320-products--bread,
  .products-page-v329 .v320-products--cookies{
    padding:78px 0 82px !important;
  }

  .products-page-v329 .v320-card{
    flex-basis:min(84vw,340px) !important;
    width:min(84vw,340px) !important;
    border-radius:14px !important;
  }

  .products-page-v329 .v320-card__body{
    min-height:220px !important;
    padding:21px 18px 18px !important;
  }

  .products-page-v329 .v320-products__nav{
    display:none !important;
  }

  .products-page-v329 .products-editorial-bridge{
    padding:78px 0 84px !important;
  }

  .products-page-v329 .products-editorial-bridge__copy h2{
    max-width:none !important;
    font-size:clamp(2.9rem,12vw,4.4rem) !important;
  }

  .products-page-v329 .products-editorial-bridge__visuals{
    min-height:340px !important;
  }

  .products-page-v329 .products-editorial-bridge__bread{
    inset:0 8% 8% 0 !important;
  }

  .products-page-v329 .products-editorial-bridge__cookie{
    width:34% !important;
    border-width:4px !important;
  }
}


/* =========================================================
   V3.37 — Content & consistency polish
   ========================================================= */

/* Adaptive header stays floating/translucent, but always readable */
.site-header{
  isolation:isolate !important;
}

.site-header .header-inner{
  transition:filter .25s ease !important;
}

.site-header.header-on-dark{
  color:#fffaf3 !important;
  text-shadow:0 1px 16px rgba(0,0,0,.34), 0 2px 4px rgba(0,0,0,.18) !important;
}

.site-header.header-on-light{
  color:#123b2e !important;
  text-shadow:0 1px 12px rgba(255,255,255,.65) !important;
}

.site-header.header-on-dark .custom-logo{
  filter:brightness(0) invert(1) drop-shadow(0 1px 8px rgba(0,0,0,.20)) !important;
}

.site-header.header-on-light .custom-logo{
  filter:none !important;
}

.site-header.header-on-dark .desktop-nav a,
.site-header.header-on-dark .icon-button,
.site-header.header-on-dark .brand{
  color:#fffaf3 !important;
}

.site-header.header-on-light .desktop-nav a,
.site-header.header-on-light .icon-button,
.site-header.header-on-light .brand{
  color:#123b2e !important;
}

/* Compact readability halo only around individual nav text, never a fixed bar */
.site-header .desktop-nav a,
.site-header .icon-button{
  text-decoration-thickness:1px;
  text-underline-offset:5px;
}

.site-header.header-on-dark .desktop-nav a:hover,
.site-header.header-on-dark .desktop-nav a:focus-visible{
  color:#f7a366 !important;
}

.site-header.header-on-light .desktop-nav a:hover,
.site-header.header-on-light .desktop-nav a:focus-visible{
  color:#c45f20 !important;
}

/* Remove decorative image numbering sitewide; process steps stay intact */
.home-category-feature__index,
.products-editorial-bridge__number{
  display:none !important;
}

/* Product editorial bridge: bread image larger and pulled to the right */
.products-page-v329 .products-editorial-bridge__grid{
  grid-template-columns:minmax(0,.82fr) minmax(0,1.28fr) !important;
  gap:58px !important;
}

.products-page-v329 .products-editorial-bridge__visuals{
  min-height:570px !important;
  margin-right:calc((100vw - min(1240px, calc(100vw - 48px))) / -2) !important;
}

.products-page-v329 .products-editorial-bridge__bread{
  inset:-18px 2% 4% -2% !important;
  border-radius:18px 0 0 18px !important;
  background-position:center center !important;
}

.products-page-v329 .products-editorial-bridge__cookie{
  right:7% !important;
  bottom:-2% !important;
  width:31% !important;
}

/* Stronger factual tone on Why Teff-It without heavy overlays */
.why-page-v329 .fact-image-overlay{
  background:linear-gradient(
    to top,
    rgba(15,43,33,.78) 0%,
    rgba(15,43,33,.36) 46%,
    rgba(15,43,33,0) 82%
  ) !important;
}

.why-page-v329 .fact-image-overlay p{
  color:rgba(255,250,244,.92) !important;
}

@media(max-width:980px){
  .products-page-v329 .products-editorial-bridge__grid{
    grid-template-columns:1fr !important;
    gap:42px !important;
  }

  .products-page-v329 .products-editorial-bridge__visuals{
    margin-right:calc(50% - 50vw) !important;
    min-height:500px !important;
  }

  .products-page-v329 .products-editorial-bridge__bread{
    inset:0 0 7% 0 !important;
    border-radius:16px 0 0 16px !important;
  }

  .products-page-v329 .products-editorial-bridge__cookie{
    right:8% !important;
    bottom:0 !important;
  }
}

@media(max-width:760px){
  .site-header.header-on-dark .custom-logo{
    filter:brightness(0) invert(1) drop-shadow(0 1px 6px rgba(0,0,0,.18)) !important;
  }

  .products-page-v329 .products-editorial-bridge__visuals{
    min-height:350px !important;
  }

  .products-page-v329 .products-editorial-bridge__bread{
    inset:0 !important;
    border-radius:14px 0 0 14px !important;
  }

  .products-page-v329 .products-editorial-bridge__cookie{
    right:7% !important;
    bottom:-7% !important;
    width:34% !important;
  }
}