@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Playfair+Display:ital,wght@0,600;0,700;1,600;1,700&display=swap');
:root{--ink:#28271f;--muted:#77766e;--cream:#f7f5ef;--line:#e9e5db;--green:#254b3c;--orange:#c9683c}
*{box-sizing:border-box}body{margin:0;background:#fff;color:var(--ink);font-family:'DM Sans',sans-serif}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between;padding:0 max(5vw,24px);border-bottom:1px solid var(--line)}.brand{font-size:21px;font-weight:700;color:var(--ink);text-decoration:none;letter-spacing:-.7px}.brand span:last-child{color:var(--green)}.brand-icon{margin-right:8px}.updated{font-size:12px;color:var(--muted)}.wrap{max-width:1240px;margin:auto;padding:0 28px}.hero{margin-top:32px;min-height:255px;background:#f2eee5;border-radius:18px;display:flex;align-items:center;justify-content:space-between;padding:40px 7%;overflow:hidden;position:relative}.eyebrow{font-size:10px;letter-spacing:2px;color:var(--orange);font-weight:700}.hero h1{font-family:'Playfair Display',serif;font-size:clamp(32px,4vw,48px);line-height:1.12;letter-spacing:-1px;margin:16px 0}.hero h1 em{color:var(--green)}.sub{color:#68675f;font-size:14px}.hero-art{width:260px;height:190px;display:flex;align-items:center;justify-content:center;position:relative}.cup{font-size:105px;filter:drop-shadow(0 12px 10px #b6a996)}.steam{position:absolute;top:3px;color:#aaa18f;font-size:30px;letter-spacing:8px;transform:rotate(-12deg)}.bean{position:absolute;background:#7b4a30;width:24px;height:14px;border-radius:50%;transform:rotate(35deg)}.bean1{right:4px;bottom:34px}.bean2{left:20px;bottom:22px;transform:rotate(-25deg)}.category-row{display:flex;gap:10px;flex-wrap:wrap;margin:28px 0 34px}.category{border:1px solid var(--line);border-radius:9px;background:white;padding:12px 16px;font:600 12px 'DM Sans';color:#5b5a52;cursor:pointer}.category span{margin-right:7px}.category.active,.category:hover{background:var(--green);color:white;border-color:var(--green)}.toolbar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:16px}.toolbar h2{font-size:23px;margin:0 0 6px;letter-spacing:-.7px}.toolbar p{font-size:12px;color:var(--muted);margin:0}.controls{display:flex;gap:9px;flex-wrap:wrap}.search,select{height:40px;border:1px solid var(--line);border-radius:8px;background:#fff;color:#55534b;font:12px 'DM Sans';padding:0 12px}.search{display:flex;align-items:center;gap:8px}.search span{font-size:22px}.search input{border:0;outline:0;width:150px;font:12px 'DM Sans'}.notice{background:#f8f6f1;color:#716d60;border-radius:9px;padding:15px 18px;font-size:15px;line-height:1.55;margin:20px 0;display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap}.notice-copy{flex:1;min-width:240px}.notice-copy span{color:var(--orange);margin-right:8px}.notice-updated{font-size:14px;color:#5b5a52;white-space:nowrap}.notice-updated strong{color:var(--green);font-weight:700}.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}.product{border:1px solid var(--line);border-radius:12px;overflow:hidden;transition:transform .2s,box-shadow .2s}.product:hover{transform:translateY(-3px);box-shadow:0 10px 24px #29251a0d}.product-image{height:178px;background:#f6f3ec;position:relative;display:flex;align-items:center;justify-content:center}.product-image img{width:100%;height:100%;object-fit:contain;mix-blend-mode:multiply}.discount{position:absolute;top:12px;left:12px;background:#c9683c;color:white;padding:6px 8px;border-radius:5px;font-size:11px;font-weight:700}.product-body{padding:15px}.store{font-size:10px;text-transform:uppercase;letter-spacing:1px;color:var(--green);font-weight:700}.product h3{font-size:14px;line-height:1.4;min-height:40px;margin:8px 0 5px}.unit{font-size:11px;color:var(--muted)}.price-row{display:flex;align-items:baseline;gap:9px;margin:15px 0 12px}.price-row strong{font-size:23px;letter-spacing:-.7px}.price-row del{font-size:12px;color:#99958a}.period{border-top:1px solid var(--line);padding-top:12px;color:#777367;font-size:10px}.period span{margin-right:4px}.visit{display:flex;justify-content:space-between;margin-top:14px;color:var(--green);text-decoration:none;font-size:11px;font-weight:700}.empty{text-align:center;padding:50px;color:var(--muted)}footer{border-top:1px solid var(--line);margin-top:42px;padding:20px 0;color:#99958a;font-size:10px}@media(max-width:1000px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar{align-items:start;flex-direction:column}.hero-art{opacity:.7}}@media(max-width:700px){.wrap{padding:0 16px}.topbar{padding:0 18px}.updated{display:none}.hero{padding:30px 24px;min-height:235px}.hero-art{position:absolute;right:-60px;bottom:-10px;opacity:.22}.hero-copy{position:relative;z-index:1}.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-image{height:140px}.product-body{padding:11px}.product h3{font-size:12px}.price-row strong{font-size:20px}.controls{width:100%}.search{flex:1}.search input{width:100%;min-width:60px}.controls select{max-width:48%;flex:1}.category{padding:10px 11px}.category-row{gap:7px}}@media(max-width:380px){.products{grid-template-columns:1fr 1fr}.product-image{height:115px}}

.update-status { margin-top: 12px; padding: 10px 14px; border: 1px solid #e6dfd4; border-radius: 12px; color: #5c5145; background: #fbf8f2; font-size: .9rem; }
.update-status span { display: block; margin-top: 3px; color: #817568; font-size: .82rem; }

/* Ontwerp 3: rustig, minimalistisch en gericht op vergelijken */
:root{--ink:#25251f;--muted:#74756d;--cream:#f7f6f1;--line:#e7e6df;--green:#315b49;--orange:#b65c3b}
body{background:#fbfbf8}
.topbar{background:#fff;position:relative}
.brand{letter-spacing:-.8px}
.wrap{max-width:1320px}
.hero{background:linear-gradient(110deg,#f2f0e8 0%,#f8f7f2 72%);border-radius:22px;min-height:270px}
.hero h1{font-size:clamp(34px,4.2vw,52px)}
.hero-art{background:radial-gradient(ellipse at center,#e7e2d5 0%,rgba(231,226,213,0) 68%);border-radius:50%}
.category-row{gap:8px;margin:24px 0 30px}
.category{border-radius:999px;padding:12px 18px;transition:background .15s,border-color .15s}
.toolbar{align-items:center;margin:0 0 18px;padding:18px 0 14px;border-bottom:1px solid var(--line)}
.toolbar h2{font-size:24px}
.controls{align-items:center}
.search,select{border-radius:11px;height:44px;background:#fff}
.search input{min-width:160px}
.products{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;align-items:stretch}
.product{border:1px solid #e8e7e0;border-radius:17px;overflow:hidden;background:#fff;box-shadow:0 3px 12px rgba(36,38,30,.025);transition:transform .18s,box-shadow .18s;display:flex;flex-direction:column}
.product:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(36,38,30,.08)}
.product-image{background:#f5f4ee;min-height:190px;display:flex;align-items:center;justify-content:center;position:relative;padding:18px}
.product-image img{max-height:165px;max-width:100%;object-fit:contain}
.discount{position:absolute;top:12px;left:12px;background:#b94736;color:#fff;font-weight:700;font-size:12px;border-radius:7px;padding:7px 9px}
.product-body{padding:16px;display:flex;flex:1;flex-direction:column}
.store{font-size:10px;text-transform:uppercase;letter-spacing:1.1px;color:var(--green);font-weight:700}
.product h3{font-size:15px;line-height:1.4;min-height:42px;margin:8px 0}
.unit{color:var(--muted);font-size:12px}
.price-row{display:flex;align-items:baseline;gap:9px;margin:12px 0}
.price-row strong{font-size:23px;letter-spacing:-.7px;color:#262820}
.price-row del{color:#88877e;font-size:12px}
.period{font-size:11px;color:#66675f;background:#f7f7f2;border-radius:8px;padding:9px;margin:0 0 13px;line-height:1.5}
.visit{margin-top:auto;border:1px solid #d9e3dc;border-radius:10px;padding:11px 12px;text-decoration:none;color:var(--green);font-size:12px;font-weight:700;display:flex;justify-content:space-between;align-items:center}
.visit:hover{background:#edf3ee}
.how-it-works{display:flex;gap:12px 24px;flex-wrap:wrap;align-items:center;background:#f4f4ee;border-radius:14px;padding:18px 20px;margin-top:32px;font-size:12px;color:#66675f}
.how-it-works strong{color:var(--ink);font-size:13px}
.how-it-works span:before{content:'✓';color:var(--green);font-weight:700;margin-right:7px}
footer{margin-top:30px}
@media(max-width:1000px){.products{grid-template-columns:repeat(3,minmax(0,1fr))}.toolbar{align-items:flex-start;flex-direction:column}.controls{width:100%}}
@media(max-width:700px){.topbar{padding:0 18px;height:66px}.updated{max-width:140px;text-align:right;font-size:10px}.wrap{padding:0 16px}.hero{padding:28px 22px;min-height:220px}.hero-art{width:105px;height:120px;flex-shrink:0}.cup{font-size:65px}.steam{font-size:18px}.hero h1{font-size:32px}.sub{max-width:260px;line-height:1.5}.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.product-image{min-height:135px;padding:12px}.product-image img{max-height:115px}.product-body{padding:12px}.product h3{font-size:13px;min-height:54px}.price-row strong{font-size:19px}.period{font-size:10px}.controls>*{flex:1;min-width:0}.search input{width:100%;min-width:0}.category{padding:10px 13px}.how-it-works{gap:10px;align-items:flex-start;flex-direction:column}}
@media(max-width:380px){.products{grid-template-columns:1fr}.product-image{min-height:180px}}

/* Referentie-uitwerking: warme banner, grote categorieknoppen en ruime productkaarten */
:root{--ink:#201a16;--muted:#716963;--cream:#f7f0e7;--line:#e8ded3;--green:#124c34;--orange:#c65a35}
body{background:#f6f0e7;color:#161616}
.masthead{min-height:176px;position:relative;display:flex;align-items:center;padding:22px max(calc((100vw - 1460px)/2),38px);overflow:hidden;background:linear-gradient(90deg,rgba(250,244,235,.98) 0%,rgba(250,244,235,.94) 47%,rgba(250,244,235,.2) 100%),url('images/coffee-beans.svg') right center/auto 100% no-repeat,#f5e8d9;border-bottom:1px solid #e9dfd4}
.masthead-inner{position:relative;z-index:1;max-width:800px}
.masthead .brand{display:flex;align-items:center;gap:18px;color:#3b2114;font-size:0;text-decoration:none}
.brand-icon{font-size:68px;line-height:1;filter:sepia(.7)}
.brand-title{font-family:'Playfair Display',Georgia,serif;font-size:clamp(34px,3.6vw,52px);font-weight:700;letter-spacing:-1.8px}
.masthead-subtitle{margin:7px 0 0 86px;font-size:clamp(15px,1.55vw,23px);line-height:1.35;color:#3f281c}
.update-pill{position:absolute;z-index:2;right:max(calc((100vw - 1460px)/2),38px);top:25px;background:rgba(255,255,255,.94);border-radius:17px;padding:15px 20px;display:flex;gap:14px;align-items:center;box-shadow:0 8px 28px rgba(55,35,20,.12);min-width:260px}
.update-pill .clock{font-size:32px;color:#333}.update-pill div{display:flex;flex-direction:column;gap:4px;font-size:12px}.update-pill strong{font-size:13px;font-weight:500}.update-pill small{font-size:12px}.update-pill i{display:inline-block;width:9px;height:9px;border-radius:50%;background:#47b63b;margin-right:5px}
.wrap{max-width:1530px;padding:0 38px}
.category-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:12px;margin:21px 0 20px}
.category{height:60px;border:1px solid rgba(255,255,255,.75);background:rgba(255,255,255,.8);border-radius:14px;color:#171717;font-size:16px;font-weight:500;display:flex;align-items:center;justify-content:center;gap:14px;padding:10px}
.category span{font-size:27px;color:#4b2a19;margin:0}.category.active,.category:hover{background:#164c35;border-color:#164c35;color:white}.category.active span{color:white}
.toolbar{display:block;margin:0 0 22px;padding:0;border:0}
.toolbar>div:first-child{display:none}
.controls{display:grid;grid-template-columns:1.35fr 1fr 1fr 1fr;gap:15px;width:100%}
.search,select{height:66px;border:1px solid #ddd7d1;border-radius:13px;padding:0 18px;font-size:15px;color:#1f1f1f;box-shadow:0 1px 2px rgba(0,0,0,.015)}
.search{gap:14px}.search span{font-size:27px}.search input{font-size:15px}
.products{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.product{border:1px solid #eee8e1;border-radius:17px;background:#fff;box-shadow:0 2px 10px rgba(47,32,18,.025);overflow:hidden}
.product-image{height:385px;min-height:250px;background:#fff;padding:15px 22px;align-items:center;justify-content:center}
.product-image img{width:100%;height:100%;max-height:350px;object-fit:contain}
.product-body{padding:14px 25px 22px}
.store{font-size:12px;letter-spacing:.2px}
.product h3{font-size:20px;min-height:0;margin:8px 0 4px;line-height:1.25;color:#151515}
.unit{font-size:15px;color:#646464}
.price-row{margin:7px 0 13px;gap:14px;flex-wrap:wrap}
.price-row strong{font-size:36px;color:#d9211b;letter-spacing:-1px}
.price-row del{font-size:18px}
.discount{top:14px;left:14px;border-radius:9px;padding:7px 14px;font-size:17px;background:#e21d1d}
.period{background:#f7f4f1;font-size:14px;color:#181818;padding:12px;border-radius:11px;margin:0 0 14px}
.visit{font-size:14px;border-radius:10px;padding:13px}
.notice{border-radius:10px}
@media(max-width:1050px){.masthead{padding:22px 24px}.update-pill{right:24px;min-width:220px}.wrap{padding:0 24px}.category-row{gap:8px}.category{font-size:13px;gap:7px}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.product-image{height:300px}.product-body{padding:14px}.product h3{font-size:17px}.price-row strong{font-size:30px}}
@media(max-width:700px){.masthead{min-height:170px;padding:20px 16px 72px;background:linear-gradient(90deg,rgba(250,244,235,.96),rgba(250,244,235,.7)),url('images/coffee-beans.svg') right center/auto 100% no-repeat,#f5e8d9}.masthead .brand{gap:9px}.brand-icon{font-size:43px}.brand-title{font-size:30px;letter-spacing:-1px}.masthead-subtitle{margin:6px 0 0 52px;font-size:14px}.desktop-break{display:none}.update-pill{top:auto;bottom:9px;left:16px;right:auto;min-width:0;padding:7px 11px;border-radius:10px;gap:8px}.update-pill .clock{font-size:20px}.update-pill div{font-size:10px;gap:1px}.update-pill strong,.update-pill small{font-size:10px}.wrap{padding:0 14px}.category-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:14px 0}.category{height:52px;font-size:13px}.category span{font-size:21px}.category:first-child{grid-column:span 2}.controls{grid-template-columns:1fr 1fr;gap:8px}.search,select{height:51px;padding:0 10px;font-size:12px}.search{gap:6px}.search input{font-size:12px;min-width:0;width:100%}.products{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.product-image{height:190px;min-height:160px;padding:9px}.product-image img{max-height:175px}.product-body{padding:11px}.product h3{font-size:14px;line-height:1.3}.unit{font-size:12px}.price-row strong{font-size:23px}.price-row del{font-size:12px}.discount{font-size:12px;padding:5px 8px}.period{font-size:10px;padding:8px}.visit{font-size:11px;padding:10px}.notice{font-size:14px;padding:13px 14px;gap:8px}.notice-updated{font-size:13px;white-space:normal}}
@media(max-width:390px){.products{grid-template-columns:1fr}.product-image{height:230px}.controls{grid-template-columns:1fr}}

/* Fix: header fills the viewport; readable retailer badges and optional list view */
html,body{width:100%;min-height:100%;overflow-x:hidden}
.masthead{width:100%;min-height:176px;box-sizing:border-box;padding-left:max(calc((100vw - 1460px)/2),38px);padding-right:max(calc((100vw - 1460px)/2),38px);display:flex;align-items:center;justify-content:space-between;background-image:linear-gradient(90deg,rgba(250,244,235,.97) 0%,rgba(250,244,235,.88) 53%,rgba(250,244,235,.15) 100%),url('images/coffee-beans.svg');background-position:center,right center;background-size:cover,auto 100%;background-repeat:no-repeat,no-repeat}
.masthead-inner{display:block;max-width:calc(100% - 300px);min-width:0}
.masthead .brand{display:flex;align-items:center;white-space:nowrap}
.masthead-subtitle{margin-left:86px}
.update-pill{right:max(calc((100vw - 1460px)/2),38px)}
main.wrap{width:100%;max-width:1530px;margin:0 auto}
.controls{grid-template-columns:auto minmax(200px,1.35fr) minmax(160px,1fr) minmax(160px,1fr) minmax(180px,1fr);align-items:center}
.view-toggle{height:48px;padding:0 14px;border:1px solid #ddd7d1;background:#fff;border-radius:12px;color:#214c39;font:600 13px 'DM Sans',sans-serif;cursor:pointer;white-space:nowrap}
.view-toggle:hover,.view-toggle[aria-pressed=true]{background:#164c35;color:#fff;border-color:#164c35}
.store-line{display:flex;align-items:center;gap:9px;margin-bottom:8px;min-height:30px}
.store-logo{width:31px;height:31px;border-radius:8px;background:#f0eee8;color:#204c39;display:inline-flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;letter-spacing:-.5px;flex-shrink:0;border:1px solid #e7e2d8}
.store-ah{background:#009fe3;color:#fff;border:0}.store-lidl{background:#ffdf00;color:#d5222b;border-color:#1b59a6}.store-plus{background:#e63839;color:#fff;border:0}.store-aldi{background:#123f91;color:#fff;border:0}.store-jumbo{background:#ffdf00;color:#d72825}.store-dirksupermarkten,.store-dirk{background:#e5262b;color:#fff}.store-vomar{background:#d9262e;color:#fff}.store-hoogvliet{background:#00549e;color:#fff}.store-nettorama{background:#24683d;color:#fff}
.store{font-size:12px}
.period{font-size:15px;padding:13px 12px}
.visit{font-size:15px;padding:14px 13px;min-height:48px}
.products.list-view{display:flex;flex-direction:column;gap:10px}
.products.list-view .product{display:grid;grid-template-columns:170px minmax(0,1fr);min-height:170px}
.products.list-view .product-image{height:auto;min-height:160px;max-height:190px;border-right:1px solid #eee8e1}
.products.list-view .product-image img{max-height:155px}
.products.list-view .product-body{display:grid;grid-template-columns:minmax(170px,1.7fr) minmax(90px,.7fr) minmax(200px,1.2fr) minmax(180px,1fr);grid-template-rows:auto auto 1fr;column-gap:18px;align-items:center;padding:18px 22px}
.products.list-view .store-line{grid-column:1;grid-row:1;margin:0}
.products.list-view h3{grid-column:1;grid-row:2;margin:0;font-size:18px}
.products.list-view .unit{grid-column:1;grid-row:3}
.products.list-view .price-row{grid-column:2;grid-row:1/3;display:flex;flex-direction:column;align-items:flex-start;gap:4px;margin:0}
.products.list-view .price-row strong{font-size:27px}
.products.list-view .period{grid-column:3;grid-row:1/4;margin:0;font-size:13px}
.products.list-view .visit{grid-column:4;grid-row:1/4;margin:0;align-self:center}
.products.list-view .discount{top:10px;left:10px;font-size:12px}
@media(max-width:1050px){.masthead{padding-left:24px;padding-right:24px}.update-pill{right:24px}.controls{grid-template-columns:repeat(2,minmax(0,1fr))}.view-toggle{height:51px}.products.list-view .product-body{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto auto;gap:8px}.products.list-view .store-line,.products.list-view h3,.products.list-view .unit,.products.list-view .price-row,.products.list-view .period,.products.list-view .visit{grid-column:auto;grid-row:auto}.products.list-view .product-image{min-height:150px}}
@media(max-width:700px){.masthead{padding:18px 14px 76px;min-height:170px;display:block;background-size:cover,auto 100%}.masthead-inner{max-width:100%}.masthead .brand{white-space:normal}.masthead-subtitle{margin-left:52px}.update-pill{left:14px;right:auto;bottom:9px;top:auto}.controls{grid-template-columns:1fr 1fr}.view-toggle{font-size:11px;padding:0 7px}.products.list-view .product{grid-template-columns:100px minmax(0,1fr)}.products.list-view .product-image{min-height:130px;padding:7px}.products.list-view .product-body{display:flex;flex-direction:column;align-items:stretch;padding:10px;gap:6px}.products.list-view .product h3{font-size:14px}.products.list-view .price-row{flex-direction:row;align-items:baseline}.products.list-view .price-row strong{font-size:21px}.products.list-view .period{font-size:10px;padding:7px}.products.list-view .visit{min-height:38px;font-size:12px;padding:9px}.store-logo{width:25px;height:25px}}

/* FINAL OVERRIDES — force layout and prevent cached old assets */
header.masthead{display:flex!important;width:100%!important;max-width:none!important;min-height:176px!important;box-sizing:border-box!important;position:relative!important;align-items:center!important;justify-content:space-between!important;overflow:hidden!important;margin:0!important;padding:22px max(calc((100vw - 1460px)/2),38px)!important;background-color:#f5e8d9!important;background-image:linear-gradient(90deg,rgba(250,244,235,.97) 0%,rgba(250,244,235,.86) 55%,rgba(250,244,235,.15) 100%),url('images/coffee-beans.svg')!important;background-position:center,right center!important;background-size:cover,auto 100%!important;background-repeat:no-repeat!important}
header.masthead .masthead-inner{display:block!important;position:relative!important;max-width:calc(100% - 300px)!important;min-width:0!important;margin:0!important}
header.masthead .brand{display:flex!important;align-items:center!important;gap:16px!important;white-space:nowrap!important;color:#3b2114!important;text-decoration:none!important}
header.masthead .brand-icon{font-size:58px!important;line-height:1!important;margin:0!important}
header.masthead .brand-title{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(32px,3.6vw,52px)!important;font-weight:700!important;color:#3b2114!important;letter-spacing:-1.5px!important}
header.masthead .masthead-subtitle{display:block!important;margin:8px 0 0 76px!important;font-size:clamp(15px,1.55vw,22px)!important;line-height:1.35!important;color:#3f281c!important}
header.masthead .update-pill{position:absolute!important;right:max(calc((100vw - 1460px)/2),38px)!important;top:50%!important;bottom:auto!important;left:auto!important;transform:translateY(-50%)!important;z-index:5!important}
main.wrap{width:100%!important;max-width:1530px!important;margin:0 auto!important;padding-left:38px!important;padding-right:38px!important;box-sizing:border-box!important}
.products{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:16px!important}
.products .product{min-width:0!important}
.products .product-image{height:340px!important;min-height:250px!important}
.products .product-image img{width:100%!important;height:100%!important;max-height:310px!important;object-fit:contain!important}
.products .product-body{padding:15px 22px 20px!important}
.products .period{font-size:15px!important;line-height:1.4!important;padding:13px!important}
.products .visit{font-size:15px!important;min-height:48px!important;padding:14px!important}
.store-line{display:flex!important;align-items:center!important;gap:9px!important}
.store-logo{width:32px!important;height:32px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:8px!important;font-size:11px!important;font-weight:800!important;flex-shrink:0!important}
.controls{display:grid!important;grid-template-columns:auto minmax(180px,1.35fr) minmax(140px,1fr) minmax(140px,1fr) minmax(160px,1fr)!important;gap:12px!important}
.view-toggle{display:inline-flex!important;align-items:center!important;justify-content:center!important}
.products.list-view{display:flex!important;flex-direction:column!important;gap:10px!important}
.products.list-view .product{display:grid!important;grid-template-columns:170px minmax(0,1fr)!important;min-height:165px!important}
.products.list-view .product-image{height:auto!important;min-height:155px!important;max-height:none!important;border-right:1px solid #eee8e1!important}
.products.list-view .product-image img{max-height:150px!important}
.products.list-view .product-body{display:grid!important;grid-template-columns:minmax(170px,1.7fr) minmax(90px,.7fr) minmax(180px,1.2fr) minmax(170px,1fr)!important;grid-template-rows:auto auto 1fr!important;column-gap:16px!important;align-items:center!important;padding:16px 20px!important}
.products.list-view .store-line{grid-column:1!important;grid-row:1!important;margin:0!important}
.products.list-view h3{grid-column:1!important;grid-row:2!important;margin:0!important}
.products.list-view .unit{grid-column:1!important;grid-row:3!important}
.products.list-view .price-row{grid-column:2!important;grid-row:1/3!important;display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:4px!important;margin:0!important}
.products.list-view .price-row strong{font-size:27px!important}
.products.list-view .period{grid-column:3!important;grid-row:1/4!important;margin:0!important;font-size:13px!important}
.products.list-view .visit{grid-column:4!important;grid-row:1/4!important;margin:0!important;align-self:center!important}
@media(max-width:1050px){header.masthead{padding:22px 24px!important}header.masthead .update-pill{right:24px!important}main.wrap{padding-left:24px!important;padding-right:24px!important}.controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}.products{grid-template-columns:repeat(2,minmax(0,1fr))!important}.products.list-view .product-body{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important}.products.list-view .period,.products.list-view .visit{margin:0!important}}
@media(max-width:700px){header.masthead{display:block!important;min-height:170px!important;padding:18px 14px 76px!important;background-size:cover,auto 100%!important}header.masthead .masthead-inner{max-width:100%!important}header.masthead .brand{white-space:normal!important;gap:9px!important}header.masthead .brand-icon{font-size:42px!important}header.masthead .brand-title{font-size:30px!important}header.masthead .masthead-subtitle{margin:6px 0 0 51px!important;font-size:14px!important}header.masthead .update-pill{top:auto!important;bottom:9px!important;left:14px!important;right:auto!important;transform:none!important;padding:7px 11px!important}main.wrap{padding-left:14px!important;padding-right:14px!important}.category-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}.category:first-child{grid-column:span 2}.controls{grid-template-columns:1fr 1fr!important}.products{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important}.products .product-image{height:190px!important;min-height:160px!important;padding:9px!important}.products .product-image img{max-height:175px!important}.products .product-body{padding:11px!important}.products .period{font-size:11px!important;padding:8px!important}.products .visit{font-size:12px!important;padding:10px!important;min-height:40px!important}.products.list-view{display:flex!important}.products.list-view .product{grid-template-columns:100px minmax(0,1fr)!important}.products.list-view .product-image{min-height:130px!important;height:auto!important;padding:7px!important}.products.list-view .product-body{display:flex!important;flex-direction:column!important;align-items:stretch!important;padding:10px!important;gap:6px!important}.products.list-view .price-row{flex-direction:row!important;align-items:baseline!important}.products.list-view .price-row strong{font-size:21px!important}}
@media(max-width:390px){.products:not(.list-view){grid-template-columns:1fr!important}.controls{grid-template-columns:1fr!important}}

/* Banner v4: warmer, polished, full width */
header.masthead{min-height:205px!important;padding:28px clamp(20px,5vw,76px)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:24px!important;background:radial-gradient(ellipse at 82% 120%,rgba(124,74,42,.22),transparent 32%),radial-gradient(ellipse at 73% 0%,rgba(255,255,255,.7),transparent 34%),linear-gradient(105deg,#f7eee2 0%,#eee0ce 56%,#d8c1a5 100%)!important;border-bottom:1px solid #e1d1bf!important;position:relative!important;overflow:hidden!important;box-sizing:border-box!important}
header.masthead:before{content:'☕';position:absolute;right:clamp(260px,25vw,390px);top:-32px;font-size:210px;line-height:1;color:rgba(95,55,31,.11);transform:rotate(-10deg);pointer-events:none}
header.masthead:after{content:'●  ·  ●  ·  ●  ·  ●';position:absolute;right:20%;bottom:16px;font-size:24px;letter-spacing:10px;color:rgba(91,52,29,.22);transform:rotate(-8deg);pointer-events:none}
header.masthead .masthead-inner{z-index:1;max-width:calc(100% - 330px)!important}
header.masthead .brand{gap:16px!important}
header.masthead .brand-icon{display:inline-flex!important;width:70px;height:70px;align-items:center;justify-content:center;border-radius:22px;background:#57331f;color:#fff;font-size:45px!important;filter:none!important;box-shadow:0 10px 24px rgba(77,43,24,.16)}
header.masthead .brand-title{font-size:clamp(35px,4vw,57px)!important;letter-spacing:-1.8px!important}
header.masthead .masthead-subtitle{font-size:clamp(16px,1.6vw,23px)!important;margin:11px 0 0 86px!important;color:#503522!important}
header.masthead .update-pill{z-index:2;min-width:250px!important;border:1px solid rgba(255,255,255,.7);box-shadow:0 12px 34px rgba(67,42,24,.13)!important;border-radius:16px!important}
.store-line{display:flex!important;align-items:center!important;gap:10px!important;min-height:34px!important;margin-bottom:8px!important}
.store-logo-img{display:block!important;width:94px!important;height:34px!important;object-fit:contain!important;object-position:left center!important;flex:0 0 auto!important;border-radius:6px!important}
.store-logo-fallback{width:34px;height:34px;border-radius:8px;background:#315b49;color:#fff;font-weight:800;align-items:center;justify-content:center}
.store-logo-fallback:not([hidden]){display:inline-flex!important}
.store-line .store{font-size:12px!important}
.controls{grid-template-columns:auto minmax(180px,1.3fr) minmax(150px,1fr) minmax(150px,1fr) minmax(170px,1fr)!important}
.reset-filters{background:#f7f4ee!important;color:#65442d!important}
.reset-filters:hover{background:#efe4d7!important}
@media(max-width:1050px){header.masthead{padding:22px 24px!important;min-height:190px!important}header.masthead .masthead-inner{max-width:calc(100% - 250px)!important}header.masthead .update-pill{min-width:210px!important}.controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}.store-logo-img{width:75px!important}}
@media(max-width:700px){header.masthead{min-height:200px!important;padding:18px 14px 80px!important;display:block!important}header.masthead .masthead-inner{max-width:100%!important}header.masthead .brand{gap:9px!important}header.masthead .brand-icon{width:44px;height:44px;border-radius:13px;font-size:28px!important}header.masthead .brand-title{font-size:30px!important;letter-spacing:-1px!important}header.masthead .masthead-subtitle{margin:7px 0 0 53px!important;font-size:14px!important}header.masthead .update-pill{top:auto!important;bottom:10px!important;left:14px!important;right:auto!important;transform:none!important;min-width:0!important;padding:8px 12px!important}header.masthead:before{right:-25px;top:8px;font-size:130px}header.masthead:after{right:6%;bottom:70px;font-size:15px}.controls{grid-template-columns:1fr 1fr!important}.store-logo-img{width:62px!important;height:27px!important}.store-line{gap:6px!important}.reset-filters,.view-toggle{font-size:11px!important;padding:0 7px!important}}

/* Applied banner concept: premium coffee hero + supermarket logo rail */
header.masthead{min-height:238px!important;padding:34px clamp(20px,5vw,78px)!important;display:flex!important;align-items:center!important;justify-content:space-between!important;gap:26px!important;position:relative!important;overflow:hidden!important;box-sizing:border-box!important;background:radial-gradient(ellipse at 78% 115%,rgba(120,70,37,.20),transparent 33%),radial-gradient(ellipse at 90% 18%,rgba(255,255,255,.78),transparent 27%),linear-gradient(105deg,#fbf5ec 0%,#f1e2cf 57%,#d7bda0 100%)!important;border-bottom:1px solid #e4d3bf!important}
header.masthead:before{content:'☕';position:absolute;right:clamp(250px,26vw,410px);top:-39px;font-size:240px;line-height:1;color:rgba(91,53,32,.13);transform:rotate(-9deg);pointer-events:none}
header.masthead:after{content:'●  ●  ●  ●  ●  ●';position:absolute;right:22%;bottom:20px;font-size:22px;letter-spacing:9px;color:rgba(94,54,30,.22);transform:rotate(-9deg);pointer-events:none}
header.masthead .masthead-inner{z-index:1;max-width:calc(100% - 340px)!important}
header.masthead .brand{display:flex!important;align-items:center!important;gap:17px!important;text-decoration:none!important;white-space:nowrap!important}
header.masthead .brand-icon{width:76px!important;height:76px!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;border-radius:24px!important;background:#4b2b1a!important;color:#fff!important;font-size:45px!important;box-shadow:0 10px 26px rgba(75,43,26,.18)!important}
header.masthead .brand-title{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(36px,4vw,58px)!important;line-height:1.08!important;letter-spacing:-1.6px!important;color:#432817!important}
header.masthead .masthead-subtitle{margin:18px 0 0 93px!important;font-family:Georgia,'Times New Roman',serif!important;font-weight:700!important;font-size:clamp(20px,2.1vw,30px)!important;line-height:1.25!important;color:#684126!important}
header.masthead .masthead-description{margin:7px 0 0 93px!important;font-size:clamp(14px,1.25vw,18px)!important;line-height:1.45!important;color:#5e4a3a!important}
header.masthead .update-pill{z-index:2!important;min-width:250px!important;border:1px solid rgba(255,255,255,.85)!important;border-radius:17px!important;box-shadow:0 14px 36px rgba(71,44,24,.15)!important;background:rgba(255,255,255,.92)!important;backdrop-filter:blur(8px)!important}
.retailer-strip{width:100%;box-sizing:border-box;display:flex;align-items:center;justify-content:center;gap:clamp(8px,1.5vw,22px);flex-wrap:wrap;padding:15px 24px;background:#fffdf9;border-bottom:1px solid #eee4d8;box-shadow:0 5px 16px rgba(75,49,28,.035)}
.retailer-strip-label{font-size:12px;font-weight:700;letter-spacing:.04em;text-transform:uppercase;color:#8a715d;margin-right:4px}
.retailer-strip img{display:block;width:76px;height:28px;object-fit:contain}
@media(max-width:900px){header.masthead{min-height:220px!important;padding:26px 24px!important}header.masthead .masthead-inner{max-width:calc(100% - 235px)!important}header.masthead .update-pill{min-width:190px!important}.retailer-strip{gap:12px;padding:12px}.retailer-strip img{width:65px}}
@media(max-width:650px){header.masthead{display:block!important;min-height:240px!important;padding:18px 14px 82px!important}header.masthead .masthead-inner{max-width:100%!important}header.masthead .brand{gap:10px!important;white-space:normal!important}header.masthead .brand-icon{width:48px!important;height:48px!important;border-radius:14px!important;font-size:29px!important}header.masthead .brand-title{font-size:31px!important;letter-spacing:-.8px!important}header.masthead .masthead-subtitle{margin:13px 0 0 58px!important;font-size:20px!important}header.masthead .masthead-description{margin:5px 0 0 58px!important;font-size:13px!important}header.masthead .update-pill{position:absolute!important;top:auto!important;left:14px!important;right:auto!important;bottom:10px!important;transform:none!important;min-width:0!important;padding:8px 12px!important}header.masthead:before{right:-30px;top:25px;font-size:145px}header.masthead:after{right:5%;bottom:90px;font-size:13px;letter-spacing:5px}.retailer-strip{justify-content:flex-start;gap:10px 14px;padding:12px 14px}.retailer-strip-label{width:100%}.retailer-strip img{width:62px;height:24px}}

/* Logo polish + clear category selection */
.retailer-strip img{width:100px!important;height:38px!important;object-fit:contain!important;transition:transform .15s ease}
.retailer-strip img:hover{transform:translateY(-2px)}
.store-logo-img{width:112px!important;height:40px!important;object-fit:contain!important;object-position:left center!important;background:#fff!important;border:1px solid #eee5da!important;border-radius:8px!important;padding:2px 4px!important;box-sizing:border-box!important}
.category{cursor:pointer!important;transition:background .15s,border-color .15s,transform .15s}
.category.active{background:#164c35!important;border-color:#164c35!important;color:#fff!important;box-shadow:0 5px 14px rgba(22,76,53,.15)!important}
.category:not(.active):hover{background:#f5ede3!important;border-color:#cbb9a5!important}
.category:focus-visible,.view-toggle:focus-visible,select:focus-visible,input:focus-visible{outline:3px solid #b47a48!important;outline-offset:2px!important}
[hidden]{display:none!important}
@media(max-width:650px){.store-logo-img{width:84px!important;height:32px!important}.retailer-strip img{width:75px!important;height:30px!important}}

/* FINAL HERO FIX: reset inherited positioning and give content its own columns */
header.masthead{
  width:100%!important;min-height:250px!important;height:auto!important;
  padding:30px clamp(20px,4.5vw,72px)!important;box-sizing:border-box!important;
  display:grid!important;grid-template-columns:minmax(0,1fr) 285px!important;
  grid-template-rows:auto!important;align-items:center!important;column-gap:28px!important;
  background:linear-gradient(110deg,#fbf4e9 0%,#f1dfc9 58%,#d9b998 100%)!important;
  position:relative!important;overflow:hidden!important;
}
header.masthead .banner-beans{position:absolute!important;left:4%;bottom:25px!important;top:auto!important;z-index:0!important;color:#69432b!important;font-size:18px!important;letter-spacing:9px!important;opacity:.85}
header.masthead .masthead-inner{
  grid-column:1!important;grid-row:1!important;position:relative!important;z-index:2!important;
  width:100%!important;max-width:none!important;min-width:0!important;margin:0!important;
  display:flex!important;flex-direction:column!important;align-items:flex-start!important;
}
header.masthead .brand{display:flex!important;align-items:center!important;gap:16px!important;margin:0!important;padding:0!important;max-width:100%!important;white-space:normal!important}
header.masthead .brand-icon{display:flex!important;flex:0 0 68px!important;width:68px!important;height:68px!important;align-items:center!important;justify-content:center!important;font-size:39px!important;border-radius:20px!important}
header.masthead .brand-title{display:block!important;font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(34px,4vw,56px)!important;line-height:1.06!important;letter-spacing:-1.5px!important;color:#422718!important;white-space:normal!important}
header.masthead .masthead-subtitle{display:block!important;margin:16px 0 0 84px!important;max-width:780px!important;font-size:clamp(20px,2.15vw,29px)!important;line-height:1.22!important;color:#704323!important;font-weight:700!important}
header.masthead .masthead-description{display:block!important;margin:7px 0 0 84px!important;max-width:760px!important;font-size:clamp(14px,1.35vw,18px)!important;line-height:1.4!important;color:#5d4939!important}
header.masthead .update-pill{
  grid-column:2!important;grid-row:1!important;position:relative!important;inset:auto!important;
  transform:none!important;align-self:center!important;justify-self:end!important;
  width:100%!important;min-width:0!important;max-width:285px!important;box-sizing:border-box!important;
  padding:18px 20px!important;margin:0!important;z-index:3!important;
  display:flex!important;align-items:center!important;gap:13px!important;
  background:rgba(255,255,255,.94)!important;border:1px solid rgba(255,255,255,.9)!important;
  border-radius:18px!important;box-shadow:0 12px 32px rgba(77,48,27,.14)!important;
}
header.masthead:before{content:'☕'!important;position:absolute!important;right:clamp(240px,25vw,400px)!important;top:-46px!important;font-size:230px!important;line-height:1!important;color:rgba(96,59,35,.09)!important;pointer-events:none!important;z-index:0!important}
header.masthead:after{content:''!important;position:absolute!important;right:0!important;bottom:0!important;width:28%!important;height:5px!important;background:linear-gradient(90deg,transparent,#9b6a43)!important}
.retailer-strip{position:relative!important;z-index:4!important}
@media(max-width:900px){
 header.masthead{grid-template-columns:minmax(0,1fr) 220px!important;min-height:220px!important;padding:25px 24px!important;column-gap:18px!important}
 header.masthead .brand-icon{flex-basis:56px!important;width:56px!important;height:56px!important;font-size:32px!important}
 header.masthead .brand-title{font-size:clamp(30px,4.3vw,42px)!important}
 header.masthead .masthead-subtitle{margin-left:72px!important;font-size:21px!important}
 header.masthead .masthead-description{margin-left:72px!important;font-size:14px!important}
 header.masthead .update-pill{padding:13px!important}
}
@media(max-width:650px){
 header.masthead{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px!important;min-height:0!important;padding:20px 15px 18px!important}
 header.masthead .masthead-inner{width:100%!important}
 header.masthead .brand{gap:10px!important}
 header.masthead .brand-icon{flex:0 0 44px!important;width:44px!important;height:44px!important;font-size:26px!important;border-radius:13px!important}
 header.masthead .brand-title{font-size:30px!important;letter-spacing:-.7px!important}
 header.masthead .masthead-subtitle{margin:13px 0 0 0!important;font-size:21px!important;max-width:100%!important}
 header.masthead .masthead-description{margin:5px 0 0 0!important;font-size:14px!important;max-width:100%!important}
 header.masthead .update-pill{position:relative!important;inset:auto!important;transform:none!important;align-self:flex-start!important;justify-self:auto!important;width:auto!important;max-width:100%!important;padding:10px 13px!important}
 header.masthead:before{right:-25px!important;top:12px!important;font-size:130px!important}
 header.masthead .banner-beans{left:auto!important;right:14px!important;bottom:14px!important;font-size:12px!important}
}

/* Hero illustration and refined supermarket brand rail */
header.masthead{isolation:isolate!important;background:linear-gradient(108deg,#fbf4e9 0%,#f4e4d1 52%,#d9b998 100%)!important;min-height:275px!important}
header.masthead .masthead-inner{max-width:100%!important}
header.masthead .brand-title{max-width:760px!important}
header.masthead .masthead-subtitle,header.masthead .masthead-description{position:relative!important;z-index:2!important}
header.masthead .hero-art{position:absolute!important;right:clamp(190px,22vw,350px)!important;bottom:-22px!important;width:clamp(230px,28vw,390px)!important;height:220px!important;z-index:1!important;opacity:.96!important;pointer-events:none!important}
header.masthead .hero-art img{display:block!important;width:100%!important;height:100%!important;object-fit:contain!important;object-position:center bottom!important}
header.masthead .update-pill{position:relative!important;z-index:4!important;background:rgba(255,255,255,.96)!important}
header.masthead:before{content:''!important;display:none!important}
header.masthead:after{height:5px!important;width:100%!important;background:linear-gradient(90deg,#d6b38f,#9c6a43,#d6b38f)!important}
.retailer-strip{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;padding:13px clamp(12px,3vw,42px)!important;background:#fffdfa!important}
.retailer-strip-label{flex:0 0 auto!important;font-size:11px!important;letter-spacing:.035em!important;color:#8a6b53!important;margin-right:8px!important}
.retailer-strip img{width:clamp(82px,8vw,112px)!important;height:42px!important;object-fit:contain!important;background:#fff!important;border-radius:9px!important;filter:none!important;box-shadow:0 2px 6px rgba(53,35,22,.045)!important}
.store-logo-img{width:104px!important;height:40px!important;object-fit:contain!important;background:#fff!important;border:1px solid #eee4d8!important;border-radius:9px!important;padding:1px!important;box-shadow:0 2px 5px rgba(45,30,20,.04)!important}
@media(max-width:900px){
 header.masthead{min-height:250px!important}
 header.masthead .hero-art{right:175px!important;width:250px!important;height:180px!important;opacity:.6!important}
 .retailer-strip{flex-wrap:wrap!important;justify-content:flex-start!important}
 .retailer-strip-label{width:100%!important}
}
@media(max-width:650px){
 header.masthead{min-height:0!important;padding-bottom:18px!important}
 header.masthead .hero-art{position:absolute!important;right:-12px!important;bottom:70px!important;width:150px!important;height:120px!important;opacity:.25!important}
 header.masthead .masthead-inner{position:relative!important;z-index:2!important}
 header.masthead .brand-title{max-width:calc(100vw - 90px)!important}
 header.masthead .masthead-subtitle,header.masthead .masthead-description{max-width:calc(100vw - 30px)!important}
 header.masthead .update-pill{z-index:4!important}
 .retailer-strip{gap:8px!important;padding:10px!important}
 .retailer-strip img{width:82px!important;height:34px!important}
 .store-logo-img{width:84px!important;height:32px!important}
}

/* HERO REDESIGN — structured layout, photo-like illustration at right */
header.masthead{position:relative!important;isolation:isolate;display:grid!important;grid-template-columns:minmax(0,1.1fr) minmax(300px,.9fr) auto!important;align-items:center!important;gap:22px!important;min-height:270px!important;padding:30px clamp(24px,4vw,64px)!important;overflow:hidden!important;box-sizing:border-box!important;background:linear-gradient(100deg,#fbf4e9 0%,#f4e5d2 55%,#dfc4a4 100%)!important;border-bottom:1px solid #dfc9af!important}
header.masthead:before{content:none!important}
header.masthead:after{content:none!important}
header.masthead .masthead-inner{grid-column:1;grid-row:1;max-width:none!important;min-width:0!important;z-index:3!important}
header.masthead .brand{display:flex!important;align-items:center!important;gap:16px!important;white-space:normal!important;text-decoration:none!important}
header.masthead .brand-icon{display:flex!important;flex:0 0 68px!important;width:68px!important;height:68px!important;align-items:center!important;justify-content:center!important;border-radius:20px!important;background:#4a2918!important;color:#fff!important;font-size:39px!important;box-shadow:0 8px 22px rgba(69,40,23,.16)!important}
header.masthead .brand-title{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(34px,3.5vw,56px)!important;line-height:1.05!important;letter-spacing:-1.5px!important;color:#432514!important}
header.masthead .masthead-subtitle{margin:18px 0 0 84px!important;font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(19px,1.9vw,28px)!important;font-weight:700!important;line-height:1.25!important;color:#70401f!important}
header.masthead .masthead-description{margin:8px 0 0 84px!important;font-size:clamp(14px,1.25vw,18px)!important;line-height:1.45!important;color:#5d4938!important}
header.masthead .hero-art{grid-column:2;grid-row:1;align-self:stretch;position:relative!important;z-index:1!important;min-width:0!important;min-height:200px!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:visible!important}
header.masthead .hero-art img{display:block!important;width:120%!important;max-width:none!important;height:285px!important;object-fit:contain!important;object-position:center!important;opacity:.98!important;filter:drop-shadow(0 12px 12px rgba(79,49,27,.08))!important}
header.masthead .update-pill{grid-column:3;grid-row:1;position:relative!important;inset:auto!important;transform:none!important;align-self:center!important;z-index:4!important;width:230px!important;min-width:230px!important;box-sizing:border-box!important;padding:17px 18px!important;border:1px solid rgba(255,255,255,.9)!important;border-radius:18px!important;background:rgba(255,255,255,.94)!important;box-shadow:0 12px 28px rgba(74,47,28,.12)!important}
.retailer-strip{display:flex!important;align-items:center!important;justify-content:space-around!important;gap:10px!important;flex-wrap:nowrap!important;padding:16px clamp(12px,3vw,42px)!important;background:#fff!important;border-bottom:1px solid #ece3d8!important;box-shadow:0 3px 12px rgba(50,35,22,.04)!important}
.retailer-strip-label{flex:0 0 auto!important;max-width:155px!important;font-size:11px!important;line-height:1.35!important;letter-spacing:.045em!important;color:#806953!important}
.retailer-strip img{width:clamp(68px,7.2vw,112px)!important;height:40px!important;flex:0 1 112px!important;min-width:0!important;object-fit:contain!important;padding:3px 6px!important;box-sizing:border-box!important;background:#fff!important;border:1px solid #eee4d9!important;border-radius:9px!important}
.store-logo-img{width:100px!important;height:36px!important;object-fit:contain!important;padding:2px!important;background:#fff!important;border:1px solid #eee4d9!important;border-radius:8px!important}
@media(max-width:1100px){header.masthead{grid-template-columns:minmax(0,1fr) minmax(210px,.7fr)!important;min-height:245px!important}header.masthead .hero-art{grid-column:2;grid-row:1}.update-pill{grid-column:2!important;grid-row:1!important;align-self:end!important;margin-bottom:4px!important;width:200px!important;min-width:200px!important}.hero-art img{opacity:.42!important}.retailer-strip{flex-wrap:wrap!important}.retailer-strip-label{max-width:none!important;width:100%!important;text-align:center!important}.retailer-strip img{flex:0 0 auto!important}}
@media(max-width:680px){header.masthead{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:6px!important;min-height:0!important;padding:20px 16px 12px!important}header.masthead .masthead-inner{width:100%!important}header.masthead .brand{gap:10px!important}header.masthead .brand-icon{flex:0 0 46px!important;width:46px!important;height:46px!important;border-radius:14px!important;font-size:27px!important}header.masthead .brand-title{font-size:30px!important;letter-spacing:-.8px!important}header.masthead .masthead-subtitle{margin:13px 0 0 0!important;font-size:21px!important}header.masthead .masthead-description{margin:6px 0 0!important;font-size:14px!important}header.masthead .hero-art{position:absolute!important;right:-110px!important;bottom:-30px!important;width:300px!important;height:180px!important;min-height:0!important;opacity:.25!important;pointer-events:none!important}header.masthead .hero-art img{width:100%!important;height:180px!important}.update-pill{position:relative!important;inset:auto!important;align-self:flex-start!important;width:auto!important;min-width:0!important;margin:10px 0 0!important;padding:9px 12px!important}.retailer-strip{justify-content:flex-start!important;flex-wrap:wrap!important;padding:12px!important;gap:8px!important}.retailer-strip-label{width:100%!important;text-align:left!important}.retailer-strip img{width:74px!important;height:32px!important;flex:0 0 74px!important}.store-logo-img{width:78px!important;height:30px!important}}

/* FINAL HEADER FIX: no overlap, clear left text / coffee artwork / update card */
header.masthead{
  display:block!important;position:relative!important;isolation:isolate!important;
  height:250px!important;min-height:250px!important;padding:0!important;overflow:hidden!important;
  box-sizing:border-box!important;
  background:linear-gradient(105deg,#fbf5ec 0%,#f5e7d5 55%,#dfc2a0 100%)!important;
  border-bottom:1px solid #e3cfb7!important;
}
header.masthead:before,header.masthead:after{content:none!important;display:none!important}
header.masthead .masthead-inner{
  position:absolute!important;left:clamp(24px,4vw,64px)!important;top:35px!important;
  width:min(58%,780px)!important;max-width:780px!important;z-index:3!important;
}
header.masthead .brand{display:flex!important;align-items:center!important;gap:16px!important;white-space:nowrap!important}
header.masthead .brand-icon{flex:0 0 68px!important;width:68px!important;height:68px!important;border-radius:20px!important;background:#4a2918!important;color:#fff!important;font-size:38px!important;display:flex!important;align-items:center!important;justify-content:center!important}
header.masthead .brand-title{font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(34px,3.6vw,58px)!important;line-height:1.05!important;letter-spacing:-1.6px!important;color:#432514!important}
header.masthead .masthead-subtitle{margin:16px 0 0 84px!important;font-family:Georgia,'Times New Roman',serif!important;font-size:clamp(19px,1.9vw,29px)!important;line-height:1.2!important;font-weight:700!important;color:#70401f!important;max-width:650px!important}
header.masthead .masthead-description{margin:8px 0 0 84px!important;font-size:clamp(14px,1.15vw,18px)!important;line-height:1.4!important;color:#5d4938!important;max-width:610px!important}
header.masthead .hero-art{position:absolute!important;left:auto!important;right:245px!important;top:0!important;bottom:0!important;width:430px!important;height:250px!important;min-height:0!important;display:flex!important;align-items:center!important;justify-content:center!important;overflow:hidden!important;z-index:1!important;pointer-events:none!important}
header.masthead .hero-art img{display:block!important;width:500px!important;height:250px!important;max-width:none!important;object-fit:contain!important;object-position:center!important;opacity:1!important;filter:none!important}
header.masthead .update-pill{position:absolute!important;right:32px!important;top:50%!important;left:auto!important;bottom:auto!important;transform:translateY(-50%)!important;width:245px!important;min-width:245px!important;box-sizing:border-box!important;padding:17px 18px!important;z-index:5!important;background:rgba(255,255,255,.96)!important;border:1px solid #fff!important;border-radius:18px!important;box-shadow:0 12px 28px rgba(74,47,28,.12)!important}
.retailer-strip{display:flex!important;align-items:center!important;justify-content:space-evenly!important;gap:clamp(8px,1.1vw,18px)!important;flex-wrap:nowrap!important;min-height:70px!important;padding:12px clamp(16px,3.5vw,58px)!important;box-sizing:border-box!important;background:#fff!important;border-bottom:1px solid #e9e0d6!important;box-shadow:0 3px 12px rgba(50,35,22,.035)!important}
.retailer-strip-label{flex:0 0 170px!important;max-width:170px!important;margin:0!important;font-size:11px!important;line-height:1.4!important;font-weight:700!important;letter-spacing:.04em!important;color:#8a715d!important}
.retailer-strip img{display:block!important;flex:0 1 105px!important;width:105px!important;min-width:0!important;height:42px!important;max-width:105px!important;object-fit:contain!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
.store-logo-img{width:112px!important;height:40px!important;object-fit:contain!important;object-position:left center!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important}
@media(max-width:1200px){
 header.masthead .masthead-inner{width:58%!important}
 header.masthead .hero-art{right:210px!important;width:330px!important;opacity:.9!important}
 header.masthead .hero-art img{width:400px!important}
 header.masthead .update-pill{right:18px!important;width:200px!important;min-width:200px!important}
 .retailer-strip{flex-wrap:wrap!important;justify-content:center!important}
 .retailer-strip-label{flex:0 0 100%!important;max-width:none!important;text-align:center!important}
 .retailer-strip img{flex:0 0 85px!important;width:85px!important;height:36px!important}
}
@media(max-width:760px){
 header.masthead{height:310px!important;min-height:310px!important}
 header.masthead .masthead-inner{left:18px!important;right:18px!important;top:20px!important;width:auto!important;max-width:none!important}
 header.masthead .brand{white-space:normal!important;gap:10px!important}
 header.masthead .brand-icon{flex:0 0 48px!important;width:48px!important;height:48px!important;border-radius:14px!important;font-size:27px!important}
 header.masthead .brand-title{font-size:clamp(28px,7vw,38px)!important;letter-spacing:-.8px!important}
 header.masthead .masthead-subtitle{margin:12px 0 0!important;font-size:21px!important;max-width:95%!important}
 header.masthead .masthead-description{margin:6px 0 0!important;font-size:14px!important;max-width:95%!important}
 header.masthead .hero-art{right:0!important;bottom:0!important;top:auto!important;width:220px!important;height:145px!important;opacity:.5!important}
 header.masthead .hero-art img{width:290px!important;height:145px!important}
 header.masthead .update-pill{left:18px!important;right:auto!important;top:auto!important;bottom:14px!important;transform:none!important;width:auto!important;min-width:0!important;padding:8px 12px!important}
 .retailer-strip{justify-content:flex-start!important;gap:8px 14px!important;padding:12px 14px!important}
 .retailer-strip-label{flex:0 0 100%!important;text-align:left!important}
 .retailer-strip img{flex:0 0 72px!important;width:72px!important;height:30px!important}
 .store-logo-img{width:84px!important;height:32px!important}
}

/* Apply the approved clean photographic banner as the actual site hero */
header.masthead{
  display:block!important;position:relative!important;isolation:isolate!important;
  width:100%!important;height:clamp(250px,16.6vw,360px)!important;min-height:250px!important;
  padding:0!important;overflow:hidden!important;box-sizing:border-box!important;
  background:#f4e7d6 url('../images/banner-hero-reference.jpg') center center / cover no-repeat!important;
  border-bottom:1px solid #e6d6c4!important;
}
header.masthead:before,header.masthead:after{display:none!important;content:none!important}
header.masthead .masthead-inner,header.masthead .hero-art,header.masthead .update-pill,header.masthead .banner-beans{display:none!important}
.retailer-strip{min-height:76px!important;background:#fff!important;display:flex!important;align-items:center!important;justify-content:space-evenly!important;gap:clamp(7px,1vw,16px)!important;flex-wrap:nowrap!important;padding:12px clamp(14px,3vw,44px)!important;box-sizing:border-box!important}
.retailer-strip-label{flex:0 0 165px!important;max-width:165px!important;font-size:11px!important;font-weight:700!important;line-height:1.35!important;color:#806953!important}
.retailer-strip img{display:block!important;flex:0 1 108px!important;width:108px!important;max-width:108px!important;height:42px!important;object-fit:contain!important;padding:0!important;margin:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important}
@media(max-width:760px){
 header.masthead{height:220px!important;min-height:220px!important;background-position:22% center!important;background-size:auto 220px!important}
 .retailer-strip{flex-wrap:wrap!important;justify-content:flex-start!important}
 .retailer-strip-label{flex:0 0 100%!important;max-width:none!important}
 .retailer-strip img{flex:0 0 72px!important;width:72px!important;height:32px!important}
}

/* Klikbare supermarktlogo's in de bovenste balk */
.retailer-link{display:flex;align-items:center;justify-content:center;min-width:58px;min-height:48px;padding:5px 8px;border:1px solid transparent;border-radius:10px;transition:background .15s,border-color .15s}
.retailer-link:hover,.retailer-link:focus-visible{background:#fff;border-color:#d8cbbd;outline:none}
.retailer-link img{display:block;max-width:100px;width:auto;height:34px;object-fit:contain}

/* De bovenste banner is ook een klikbare link naar de homepage. */
.masthead{cursor:pointer}
.masthead a{cursor:pointer}

/* Overzichtelijke categorie- en filterbalk */
.category-row{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr))!important;gap:12px!important;margin:20px 0 22px!important;align-items:stretch!important}
.category{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;min-width:0!important;min-height:60px!important;padding:12px 14px!important;border:1px solid #e6e0d6!important;border-radius:14px!important;background:#fffdfa!important;color:#34362f!important;font-size:14px!important;font-weight:600!important;white-space:nowrap!important;box-shadow:0 2px 7px rgba(49,45,35,.035)!important}
.category-icon{display:inline-flex!important;align-items:center!important;justify-content:center!important;flex:0 0 28px!important;width:28px!important;height:28px!important;font-size:24px!important;line-height:1!important;margin:0!important}
.category-icon-img{display:block!important;flex:0 0 30px!important;width:30px!important;height:30px!important;object-fit:contain!important;margin:0!important}
.category-label{overflow:hidden;text-overflow:ellipsis}
.category.active{background:#174d38!important;border-color:#174d38!important;color:#fff!important;box-shadow:0 5px 13px rgba(23,77,56,.14)!important}
.category:not(.active):hover{background:#f7f3eb!important;border-color:#cfc2b0!important;transform:translateY(-1px)}
.controls{display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:10px!important;width:100%!important;align-items:stretch!important}
.controls>*{min-width:0!important;width:100%!important;height:52px!important;border-radius:12px!important;font-size:13px!important}
.controls .search{display:flex!important;padding:0 16px!important;gap:10px!important}
.controls .search input{min-width:0!important;width:100%!important;font-size:13px!important}
.controls select{padding:0 14px!important}
.controls .view-toggle{justify-content:center!important}
@media(max-width:850px){.category-row{grid-template-columns:repeat(3,minmax(0,1fr))!important}.controls{grid-template-columns:repeat(2,minmax(0,1fr))!important}}
@media(max-width:520px){.category-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.category{min-height:52px!important;padding:9px!important;font-size:12px!important;gap:7px!important}.category:first-child{grid-column:span 2}.category-icon{font-size:21px!important;flex-basis:24px!important;width:24px!important;height:24px!important}.category-icon-img{width:25px!important;height:25px!important;flex-basis:25px!important}.controls{grid-template-columns:1fr 1fr!important;gap:8px!important}.controls>*{height:48px!important;font-size:12px!important}.controls .search{grid-column:span 2}}


/* Duidelijke markering van de geselecteerde supermarkt in de bovenbalk */
.retailer-link.is-active{border:2px solid #2f7652!important;border-radius:12px!important;background:#f0f8f2!important;box-shadow:0 0 0 3px rgba(47,118,82,.16)!important;position:relative!important}
.retailer-link.is-active:after{content:"✓";position:absolute;top:-7px;right:-7px;width:18px;height:18px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:#2f7652;color:#fff;font-size:12px;font-weight:800;line-height:1;box-shadow:0 1px 4px rgba(0,0,0,.18)}
.retailer-link.is-active img{transform:scale(1.03)}

/* Multi-supermarket comparison */
.multi-retailer{margin:18px 0 24px;padding:18px 20px;border:1px solid var(--line);border-radius:14px;background:#fbfaf7}.multi-retailer-heading{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap;margin-bottom:13px}.multi-retailer-heading strong{font-size:16px;color:var(--ink)}.multi-retailer-heading span{font-size:12px;color:var(--muted)}.multi-retailer-options{display:flex;flex-wrap:wrap;gap:9px}.multi-retailer-option{display:inline-flex;align-items:center;gap:7px;border:1px solid #dedbd2;border-radius:8px;background:#fff;padding:9px 11px;font-size:13px;cursor:pointer}.multi-retailer-option:has(input:checked){border-color:var(--green);background:#edf5ef;color:var(--green);font-weight:700}.multi-retailer-option input{accent-color:var(--green);width:16px;height:16px;margin:0}.multi-retailer-actions{display:flex;align-items:center;gap:14px;margin-top:14px}.compare-button{border:0;border-radius:8px;background:var(--green);color:#fff;padding:11px 16px;font:700 13px 'DM Sans',sans-serif;cursor:pointer}.clear-compare{color:var(--muted);font-size:12px;text-decoration:underline}@media(max-width:700px){.multi-retailer{padding:14px;margin:14px 0 18px}.multi-retailer-options{gap:7px}.multi-retailer-option{padding:9px;font-size:12px}.multi-retailer-actions{align-items:stretch;flex-direction:column;gap:10px}.compare-button{width:100%}.clear-compare{text-align:center}}

/* Fix: filter controls stay on one row on wide screens */
@media (min-width: 1000px) {
  .controls {
    display: grid !important;
    grid-template-columns: minmax(130px, .9fr) minmax(130px, .9fr) minmax(220px, 1.3fr) minmax(180px, 1fr) minmax(180px, 1fr) !important;
    gap: 10px !important;
    align-items: stretch !important;
  }
  .controls > * { min-width: 0 !important; }
}
/* Keep the timestamp readable and prevent accidental wrapping */
.notice-updated { white-space: nowrap; }

/* Definitieve brede filterbalk: alle vijf bedieningselementen op één rij */
@media (min-width: 1000px) {
  .controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr) minmax(0, 1fr) !important;
    grid-auto-flow: row !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .controls > * {
    grid-column: auto !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .controls .search { grid-column: auto !important; }
}
@media (min-width: 1000px) and (max-width: 1200px) {
  .controls { gap: 7px !important; }
  .controls > * { font-size: 12px !important; padding-left: 9px !important; padding-right: 9px !important; }
}

/* Definitieve lijstweergave: alle productkaarten in de resultatenlijst worden horizontaal getoond. */
#products.list-view {
  display: flex !important;
  flex-direction: column !important;
  grid-template-columns: none !important;
  gap: 12px !important;
}
#products.list-view > .product {
  display: grid !important;
  grid-template-columns: 150px minmax(0, 1fr) !important;
  width: 100% !important;
  min-height: 145px !important;
}
#products.list-view > .product[hidden] { display: none !important; }
#products.list-view > .product .product-image {
  height: auto !important;
  min-height: 140px !important;
  max-height: none !important;
}
#products.list-view > .product .product-image img {
  width: 100% !important;
  height: 100% !important;
  max-height: 135px !important;
  object-fit: contain !important;
}
#products.list-view > .product .product-body {
  display: grid !important;
  grid-template-columns: minmax(180px, 1.5fr) minmax(100px, .7fr) minmax(150px, 1fr) minmax(150px, 1fr) !important;
  grid-template-rows: auto auto auto !important;
  align-items: center !important;
  gap: 8px 16px !important;
  padding: 14px 18px !important;
}
#products.list-view > .product .store-line { grid-column: 1 !important; grid-row: 1 !important; }
#products.list-view > .product h3 { grid-column: 1 !important; grid-row: 2 !important; margin: 0 !important; }
#products.list-view > .product .unit { grid-column: 1 !important; grid-row: 3 !important; }
#products.list-view > .product .price-row { grid-column: 2 !important; grid-row: 1 / 3 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 0 !important; }
#products.list-view > .product .period { grid-column: 3 !important; grid-row: 1 / 4 !important; margin: 0 !important; }
#products.list-view > .product .visit { grid-column: 4 !important; grid-row: 1 / 4 !important; margin: 0 !important; align-self: center !important; }
@media (max-width: 900px) {
  #products.list-view > .product { grid-template-columns: 110px minmax(0,1fr) !important; }
  #products.list-view > .product .product-body { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 7px !important; }
  #products.list-view > .product .price-row { flex-direction: row !important; align-items: baseline !important; }
}

/* Homepage uitgelichte aanbiedingen en beheerbaar reclameblok */
.homepage-highlights{display:grid;gap:18px;margin:18px 0 26px}
.featured-offers h2{font-size:1.25rem;margin:0 0 12px}
.featured-offers-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.featured-offer{display:flex;gap:12px;align-items:center;padding:14px;border:1px solid var(--border,#dce5df);border-radius:14px;background:var(--card,#fff);min-width:0}
.featured-offer>img{width:88px;height:88px;object-fit:contain;flex:0 0 88px}
.featured-offer h3{font-size:1rem;margin:5px 0;line-height:1.3}
.featured-offer span,.featured-offer small{color:var(--muted,#64736a);font-size:.85rem}
.featured-offer p{margin:7px 0 0}
.homepage-promo img{display:block;width:100%;height:auto;max-height:260px;object-fit:cover;border-radius:14px}
@media(max-width:760px){.featured-offers-grid{grid-template-columns:1fr}.featured-offer>img{width:72px;height:72px;flex-basis:72px}}

/* Hotfix: voorkom dat homepage-aanbiedings- of reclameafbeeldingen de layout opblazen */
.homepage-highlights { width:100%; min-width:0; }
.featured-offers-grid { display:grid !important; grid-template-columns:repeat(3,minmax(0,1fr)) !important; align-items:stretch; }
.featured-offer { min-width:0; overflow:hidden; }
.featured-offer > img { display:block !important; width:88px !important; height:88px !important; max-width:88px !important; max-height:88px !important; object-fit:contain !important; flex:0 0 88px !important; }
.homepage-promo { width:100%; max-width:100%; min-width:0; overflow:hidden; }
.homepage-promo img { display:block !important; width:100% !important; height:auto !important; max-height:220px !important; object-fit:contain !important; }
#products > .product > img { width:100%; max-width:100%; height:180px; max-height:180px; object-fit:contain; }
@media(max-width:760px) {
 .featured-offers-grid { grid-template-columns:minmax(0,1fr) !important; }
 .homepage-promo img { max-height:160px !important; }
 #products > .product > img { height:150px; max-height:150px; }
}

/* Categorieënmenu naast de supermarktlogo's */
.category-menu{position:relative;flex:0 0 auto;z-index:20;font-family:inherit}
.category-menu>summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:9px;min-height:42px;padding:0 15px;border:1px solid #dfc8ae;border-radius:12px;background:linear-gradient(135deg,#fffaf2,#f3e3cf);color:#5b3824;font-size:14px;font-weight:750;box-shadow:0 3px 9px rgba(70,43,22,.08);transition:transform .15s ease,box-shadow .15s ease;white-space:nowrap}
.category-menu>summary::-webkit-details-marker{display:none}
.category-menu>summary:hover{transform:translateY(-1px);box-shadow:0 5px 13px rgba(70,43,22,.13)}
.category-menu-icon{display:flex;flex-direction:column;gap:4px;width:17px}
.category-menu-icon i{display:block;width:17px;height:2px;border-radius:2px;background:#765034}
.category-menu-chevron{font-size:16px;line-height:1;margin-left:1px}
.category-menu-dropdown{position:absolute;top:calc(100% + 8px);left:0;min-width:205px;padding:7px;background:#fffdf9;border:1px solid #ead9c7;border-radius:13px;box-shadow:0 12px 30px rgba(56,36,20,.17);display:flex;flex-direction:column;gap:3px}
.category-menu-dropdown a{display:block;padding:11px 12px;border-radius:8px;color:#573a27;text-decoration:none;font-size:14px;font-weight:650;white-space:nowrap}
.category-menu-dropdown a:hover,.category-menu-dropdown a:focus{background:#f4e8da;color:#392416;outline:none}
.category-menu[open]>summary{border-color:#c59d76;background:#f4e4d2}
@media(max-width:650px){.category-menu>summary{min-height:38px;padding:0 11px;gap:7px;font-size:13px}.category-menu-dropdown{min-width:190px}.category-menu-dropdown a{padding:12px}}


/* Logo/banner-fix: behoud de volledige brede afbeelding zonder inzoomen of afsnijden */
@media (min-width: 761px) {
  header.masthead {
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1737 / 238 !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }
}
@media (max-width: 760px) {
  header.masthead {
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1737 / 238 !important;
    background-size: 100% 100% !important;
    background-position: center center !important;
  }
}


/* Category buttons — inspired by design proposal 3 (premium image tiles) */
.category-row{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:12px!important;
  margin:22px 0 28px!important;
  align-items:stretch!important;
}
.category{
  position:relative!important;
  isolation:isolate!important;
  overflow:hidden!important;
  min-width:0!important;
  height:116px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:14px!important;
  padding:12px 16px!important;
  border:1px solid rgba(255,255,255,.82)!important;
  border-radius:22px!important;
  background:linear-gradient(90deg,rgba(255,255,255,.94),rgba(255,250,244,.83))!important;
  box-shadow:0 8px 22px rgba(75,48,29,.10),inset 0 1px 0 rgba(255,255,255,.9)!important;
  color:#3c281d!important;
  font:700 clamp(13px,1.15vw,19px) 'DM Sans',sans-serif!important;
  text-align:left!important;
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease!important;
}
.category::before{
  content:""!important;
  position:absolute!important;
  z-index:-1!important;
  inset:0!important;
  background:radial-gradient(ellipse at 10% 100%,rgba(183,127,77,.13),transparent 58%)!important;
  pointer-events:none!important;
}
.category:hover{
  transform:translateY(-2px)!important;
  box-shadow:0 12px 28px rgba(75,48,29,.16)!important;
  background:linear-gradient(90deg,rgba(255,255,255,.98),rgba(255,248,239,.92))!important;
  color:#3c281d!important;
}
.category span:first-child,.category .category-icon-img{
  position:relative!important;
  z-index:1!important;
  flex:0 0 auto!important;
  width:78px!important;
  height:78px!important;
  margin:0!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  object-fit:contain!important;
  font-size:56px!important;
  line-height:1!important;
  filter:drop-shadow(0 5px 5px rgba(70,42,22,.13))!important;
}
.category .category-label{position:relative!important;z-index:1!important;flex:1 1 auto!important}
.category.active,.category.active:hover{
  background:linear-gradient(110deg,#164b35 0%,#123d2d 100%)!important;
  border:1px solid #d5b36b!important;
  color:#fff!important;
  box-shadow:0 10px 26px rgba(21,67,47,.24),inset 0 1px 0 rgba(255,255,255,.15)!important;
}
.category.active::before{
  background:radial-gradient(ellipse at 10% 100%,rgba(255,255,255,.15),transparent 58%)!important;
}
.category.active span,.category.active .category-label{color:#fff!important}
.category.active .category-icon-img{filter:drop-shadow(0 5px 5px rgba(0,0,0,.18))!important}
@media(max-width:900px){
 .category-row{gap:9px!important}
 .category{height:98px!important;border-radius:18px!important;padding:10px!important;gap:8px!important;font-size:14px!important}
 .category span:first-child,.category .category-icon-img{width:58px!important;height:58px!important;font-size:43px!important}
}
@media(max-width:700px){
 .category-row{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:9px!important;margin:16px 0 22px!important}
 .category{height:82px!important;justify-content:flex-start!important;border-radius:17px!important;padding:9px 11px!important;font-size:13px!important;gap:8px!important}
 .category:first-child{grid-column:span 2!important}
 .category span:first-child,.category .category-icon-img{width:52px!important;height:58px!important;font-size:39px!important}
}



/* Compactere categorieknoppen: houd alle categorienamen volledig zichtbaar. */
.category-row{
  gap:10px!important;
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
.category{
  height:92px!important;
  min-height:92px!important;
  padding:8px 10px!important;
  gap:9px!important;
  border-radius:18px!important;
  font-size:clamp(12px,1vw,16px)!important;
}
.category span:first-child,.category .category-icon-img{
  width:58px!important;
  height:58px!important;
  font-size:42px!important;
}
.category .category-label{
  min-width:0!important;
  white-space:normal!important;
  overflow-wrap:anywhere!important;
  word-break:normal!important;
  line-height:1.2!important;
}
@media(max-width:900px){
  .category{height:82px!important;min-height:82px!important;padding:7px!important;gap:7px!important;font-size:13px!important}
  .category span:first-child,.category .category-icon-img{width:46px!important;height:48px!important;font-size:35px!important}
}
@media(max-width:700px){
  .category-row{grid-template-columns:repeat(2,minmax(0,1fr))!important}
  .category{height:72px!important;min-height:72px!important;padding:7px 9px!important;font-size:12px!important}
  .category:first-child{grid-column:span 2!important}
  .category span:first-child,.category .category-icon-img{width:42px!important;height:46px!important;font-size:32px!important}
}

/* Menubalk blijft betrouwbaar bovenaan zichtbaar tijdens scrollen. */
.retailer-strip {
  position: relative;
  z-index: 1000;
  background: rgba(255, 250, 243, 0.97);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 5px 16px rgba(57, 36, 22, 0.08);
}
.retailer-strip.is-fixed-on-scroll {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  box-sizing: border-box !important;
  z-index: 99999 !important;
  box-shadow: 0 8px 24px rgba(57, 36, 22, 0.16) !important;
}


/* Category links navigate to server-filtered pages without relying on JavaScript clicks. */
.category-row a.category { display:inline-flex; align-items:center; justify-content:center; text-decoration:none; cursor:pointer; }

/* Remove link underlines in every state for category pills. */
.category-row a.category,
.category-row a.category:link,
.category-row a.category:visited,
.category-row a.category:hover,
.category-row a.category:focus,
.category-row a.category:active {
  text-decoration: none !important;
}


/* SEO category intro: readable width and spacing, without redundant navigation links. */
.category-landing-intro {
  width: min(100% - 40px, 1180px);
  box-sizing: border-box;
  margin: 24px auto 28px;
  padding: 0;
  text-align: left;
}
.category-landing-intro h1 {
  margin: 0 0 12px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.2;
  color: var(--text, #24180f);
}
.category-landing-copy {
  max-width: 850px;
  margin: 0;
  font-size: 1rem;
  line-height: 1.7;
  color: var(--muted, #5f554d);
}
@media (max-width: 640px) {
  .category-landing-intro {
    width: calc(100% - 32px);
    margin: 18px auto 22px;
  }
}


/* Category SEO copy: keep the reading measure compact on wide screens. */
.category-landing-intro {
  max-width: 760px;
  width: calc(100% - 40px);
  margin: 22px auto 30px;
  padding: 0;
  box-sizing: border-box;
}
.category-landing-intro h1 {
  max-width: 720px;
  margin: 0 0 12px;
  line-height: 1.18;
  text-wrap: balance;
}
.category-landing-copy {
  max-width: 680px;
  line-height: 1.75;
  overflow-wrap: break-word;
}
@media (max-width: 640px) {
  .category-landing-intro {
    width: calc(100% - 32px);
    margin: 18px auto 24px;
  }
}


/* Filterkoffie SEO-inhoud: dezelfde rustige, gecentreerde leeskolom als de info-pagina */
.category-landing-intro {
  width: calc(100% - 40px);
  max-width: 980px;
  margin: 24px auto 30px;
  padding: 0;
  box-sizing: border-box;
  text-align: left;
}
.category-landing-intro h1,
.category-landing-copy,
.category-seo-article {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.category-landing-intro h1 {
  margin-top: 0;
  margin-bottom: 14px;
  line-height: 1.2;
}
.category-landing-copy,
.category-seo-article {
  font-size: 17px;
  line-height: 1.8;
  color: var(--muted, #5f554d);
  overflow-wrap: break-word;
}
.category-seo-article {
  margin-top: 24px;
}
.category-seo-article h2 {
  margin: 30px 0 10px;
  line-height: 1.3;
  color: var(--text, #24180f);
  font-size: clamp(1.35rem, 2.3vw, 1.7rem);
}
.category-seo-article h3 {
  margin: 22px 0 8px;
  line-height: 1.35;
  color: var(--text, #24180f);
  font-size: 1.15rem;
}
.category-seo-article p {
  margin: 0 0 16px;
}
.category-seo-article ul {
  margin: 0 0 20px;
  padding-left: 24px;
}
@media (max-width: 640px) {
  .category-landing-intro {
    width: calc(100% - 32px);
    margin: 18px auto 24px;
  }
  .category-landing-copy,
  .category-seo-article {
    font-size: 16px;
    line-height: 1.75;
  }
}


/* Filterkoffie SEO-tekst: breder tekstvlak met hetzelfde rustige kader als de info-pagina. */
.category-landing-intro {
  width: min(calc(100% - 40px), 1180px);
  max-width: 1180px;
  box-sizing: border-box;
  margin: 24px auto 30px;
  padding: clamp(20px, 3vw, 32px);
  border: 1px solid #e7ddd2;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 20px rgba(45, 32, 20, .06);
}
.category-landing-intro h1,
.category-landing-copy,
.category-seo-article {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}
.category-landing-intro h1 {
  margin-top: 0;
  margin-bottom: 14px;
}
.category-landing-copy,
.category-seo-article {
  width: 100%;
  box-sizing: border-box;
}
.category-seo-article {
  margin-top: 18px;
}
@media (max-width: 640px) {
  .category-landing-intro {
    width: calc(100% - 24px);
    margin: 16px auto 22px;
    padding: 18px;
    border-radius: 12px;
  }
}



/* Gerichte mobiele fix op de echte elementen van de pagina */
@media screen and (max-width: 600px) {
  /* De supermarktlogo-balk bovenaan verbergen op mobiel */
  body .retailer-strip {
    display: none !important;
  }

  /* Categorieknoppen: geen afgesneden tekst of halve woorden */
  body .category-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    margin: 18px 0 24px !important;
  }
  body .category-row .category:first-child {
    grid-column: 1 / -1 !important;
  }
  body .category-row .category {
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 9px !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 76px !important;
    height: auto !important;
    padding: 12px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    overflow: visible !important;
    font-size: clamp(13px, 3.8vw, 17px) !important;
    line-height: 1.25 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  body .category-row .category span,
  body .category-row .category .category-icon {
    flex: 0 0 auto !important;
    margin-right: 0 !important;
  }

  /* Zoekveld, knoppen en dropdowns krijgen een voorspelbare mobiele indeling */
  body .controls {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    gap: 10px !important;
    width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  body .controls .view-toggle {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 8px !important;
    font-size: 14px !important;
    white-space: normal !important;
  }
  body .controls .search {
    grid-column: 1 / -1 !important;
    display: flex !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  body .controls .search input {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    font-size: 16px !important;
  }
  body .controls select,
  body select#category-select,
  body select#sort {
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    height: 52px !important;
    padding: 0 10px !important;
    font-size: 14px !important;
    line-height: normal !important;
    white-space: normal !important;
    text-overflow: ellipsis !important;
  }
}



/* Mobiel: compactere categorietekst en menu bovenaan terugzetten */
@media screen and (max-width: 600px) {
  body .category-row .category {
    font-size: clamp(12px, 3.2vw, 14px) !important;
    line-height: 1.2 !important;
    padding: 10px 9px !important;
    gap: 7px !important;
    min-height: 72px !important;
  }
  body .category-row .category span:not(.category-icon) {
    min-width: 0 !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }
  body .category-row .category .category-icon {
    font-size: 24px !important;
    width: 28px !important;
    min-width: 28px !important;
    text-align: center !important;
  }

  /* Zorg dat het bestaande menu zichtbaar is op mobiele schermen */
  body .mobile-menu,
  body .menu-toggle,
  body .nav-toggle,
  body .hamburger-menu,
  body button[aria-label*="Menu"],
  body a[aria-label*="Menu"] {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }

  body header .menu,
  body header .menu-button,
  body header .nav-menu-button,
  body header .mobile-nav-toggle,
  body .site-header .menu,
  body .site-header .menu-button,
  body .site-header .mobile-nav-toggle {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
}



/* Definitieve mobiele zichtbaarheid van de bestaande categorie-menuknop */
@media screen and (max-width: 650px) {
  body details.category-menu {
    display: inline-block !important;
    position: relative !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    max-width: 100% !important;
    overflow: visible !important;
    z-index: 10000 !important;
    flex: 0 0 auto !important;
  }
  body details.category-menu > summary,
  body details.category-menu > summary[aria-label] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: auto !important;
    min-width: 112px !important;
    min-height: 44px !important;
    height: auto !important;
    box-sizing: border-box !important;
    color: #573a27 !important;
    background: #f7eadb !important;
    border: 1px solid #dfc6ad !important;
    border-radius: 12px !important;
    cursor: pointer !important;
    position: relative !important;
    z-index: 10001 !important;
  }
  body details.category-menu .category-menu-icon,
  body details.category-menu .category-menu-icon i,
  body details.category-menu .category-menu-chevron {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body details.category-menu > .category-menu-dropdown {
    display: none !important;
    position: absolute !important;
    top: calc(100% + 6px) !important;
    left: 0 !important;
    right: auto !important;
    z-index: 10002 !important;
  }
  body details.category-menu[open] > .category-menu-dropdown {
    display: flex !important;
  }
}


/* Mobile menu fallback: separate element in the document flow */
.mobile-menu-fallback { display:none; }
@media screen and (max-width: 650px) {
  .mobile-menu-fallback {
    display:block !important;
    position:relative !important;
    width:100% !important;
    box-sizing:border-box !important;
    margin:8px 0 12px !important;
    padding:0 12px !important;
    visibility:visible !important;
    opacity:1 !important;
    z-index:20000 !important;
  }
  .mobile-menu-fallback .mobile-menu-details {
    display:block !important;
    position:relative !important;
    width:100% !important;
    overflow:visible !important;
  }
  .mobile-menu-fallback summary {
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:9px !important;
    width:100% !important;
    min-height:46px !important;
    box-sizing:border-box !important;
    padding:12px 16px !important;
    border:1px solid #dfc6ad !important;
    border-radius:12px !important;
    background:#f7eadb !important;
    color:#573a27 !important;
    font-size:15px !important;
    font-weight:700 !important;
    list-style:none !important;
    cursor:pointer !important;
  }
  .mobile-menu-fallback summary::-webkit-details-marker { display:none !important; }
  .mobile-menu-fallback nav {
    display:none !important;
    position:absolute !important;
    top:calc(100% + 5px) !important;
    left:0 !important;
    right:0 !important;
    z-index:20001 !important;
    flex-direction:column !important;
    gap:3px !important;
    padding:8px !important;
    border:1px solid #dfc6ad !important;
    border-radius:12px !important;
    background:#fffdf9 !important;
    box-shadow:0 12px 30px rgba(56,36,20,.17) !important;
  }
  .mobile-menu-fallback details[open] nav { display:flex !important; }
  .mobile-menu-fallback nav a {
    display:block !important;
    padding:12px !important;
    border-radius:8px !important;
    color:#573a27 !important;
    text-decoration:none !important;
    font-size:15px !important;
  }
}


/* Gerichte correctie: geef het mobiele menu een volledige eigen rij binnen de flex-container */
@media screen and (max-width: 650px) {
  body .retailer-strip > .mobile-menu-fallback {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    order: -1 !important;
    margin: 0 0 10px !important;
    padding: 0 12px !important;
    box-sizing: border-box !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  body .retailer-strip > .mobile-menu-fallback .mobile-menu-details,
  body .retailer-strip > .mobile-menu-fallback summary {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}


/* Herstel de supermarkt-balk op mobiel en toon alleen de eerste twee winkels */
@media screen and (max-width: 600px) {
  body .retailer-strip {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 8px !important;
    width: 100% !important;
    min-height: 0 !important;
    padding: 8px 10px !important;
    box-sizing: border-box !important;
    overflow: visible !important;
  }

  body .retailer-strip > .mobile-menu-fallback {
    display: block !important;
    flex: 0 0 100% !important;
    width: 100% !important;
    order: -1 !important;
  }

  body .retailer-strip > a.retailer-link:nth-of-type(n+3) {
    display: none !important;
  }

  body .retailer-strip > a.retailer-link {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 42px !important;
    min-height: 38px !important;
    margin: 0 !important;
  }

  body .retailer-strip > a.retailer-link img {
    display: block !important;
    max-width: 70px !important;
    max-height: 30px !important;
    object-fit: contain !important;
  }
}


/* Verberg alleen de extra brede mobiele menuknop onder de banner.
   Het compacte categorie-/winkelmenu blijft zichtbaar. */
@media screen and (max-width: 650px) {
  body .mobile-menu-fallback {
    display: none !important;
  }
}