/* Zeeburg Eats – homepage-content
   Alle stijlen staan onder .ze, zodat header, footer en de rest van de website ongemoeid blijven.
   Maten staan in px (niet rem), omdat het Bootstrap-thema de basisgrootte op 10px zet. */
.ze{--ink:#111;--paper:#fff;--pink:#ed0062;--violet:#6557c8;--orange:#ff8a13;--green:#00b968;--muted:#696969;--line:#e8e8e8;color:var(--ink);font:16px/1.5 Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;text-align:left;padding:10px 0 20px}
.ze *,.ze *:before,.ze *:after{box-sizing:border-box}
.ze a,.ze a:hover,.ze a:focus{color:inherit;text-decoration:none}
.ze button{font:inherit}
.ze h1,.ze h2,.ze h3{font-family:inherit;font-weight:800;color:inherit}
.ze p{line-height:1.5}
.ze img{max-width:none}

/* Hero */
.ze .hero{position:relative;overflow:hidden;background:#f5f3f2;border-radius:32px;min-height:560px;display:grid;grid-template-columns:1.02fr .98fr}
.ze .hero-copy{padding:64px 24px 56px 56px;display:flex;flex-direction:column;justify-content:center;z-index:2}
.ze .eyebrow{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:800;letter-spacing:.13em;text-transform:uppercase}
.ze .eyebrow:before{content:"";width:34px;height:3px;background:linear-gradient(90deg,var(--pink),var(--orange),var(--green))}
.ze .hero h1{font-size:clamp(48px,6.4vw,86px);line-height:.9;letter-spacing:-.06em;margin:22px 0 24px;max-width:690px}
.ze .hero h1 span{display:block;background:linear-gradient(90deg,var(--pink),var(--violet),var(--orange),var(--green));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.12em}
.ze .hero p{font-size:17px;max-width:500px;color:#4f4f4f;margin:0 0 30px}
.ze .actions{display:flex;gap:12px;flex-wrap:wrap}
.ze .actions a{border-radius:999px;padding:15px 24px;font-size:16px;font-weight:800;border:2px solid #111;cursor:pointer;line-height:1.2}
.ze .actions .primary,.ze .actions .primary:hover,.ze .actions .primary:focus{background:#111;color:#fff}
.ze .actions .secondary{background:transparent}
.ze .trust{margin-top:26px;display:flex;gap:20px;flex-wrap:wrap;color:#4d4d4d;font-weight:650;font-size:14px}
.ze .trust span:before{content:"✓";font-weight:900;margin-right:7px;color:var(--green)}
.ze .food-art{position:relative;min-height:440px;overflow:hidden;background:#2c211a}
.ze .hero-slide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.025);transition:opacity 1.2s ease,transform 6s ease}
.ze .hero-slide.active{opacity:1;transform:scale(1)}
.ze .food-art:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#f5f3f2 0%,transparent 28%);z-index:1}
.ze .stamp{position:absolute;right:26px;top:26px;z-index:2;width:112px;height:112px;border-radius:50%;background:#fff;display:grid;place-items:center;text-align:center;font-size:16px;font-weight:900;line-height:1.1;transform:rotate(7deg);box-shadow:0 18px 40px #0002}
.ze .stamp small{display:block;color:var(--green);font-size:11px;text-transform:uppercase;letter-spacing:.1em;margin-top:5px}
@media(prefers-reduced-motion:reduce){.ze .hero-slide{transition:none;transform:none}}

/* Belofte-balk */
.ze .promise{padding:30px 0 10px;display:grid;grid-template-columns:repeat(3,1fr);gap:2px}
.ze .promise div{padding:18px 24px;text-align:center;font-size:16px;font-weight:800;border-right:1px solid var(--line)}
.ze .promise div:last-child{border:0}
.ze .promise b{font-size:22px;margin-right:8px}

/* Keukens */
.ze .section{padding:70px 0}
.ze .section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;margin-bottom:30px}
.ze .section h2{font-size:clamp(40px,5vw,68px);line-height:.95;letter-spacing:-.05em;margin:0}
.ze .section-head p{max-width:400px;color:var(--muted);margin:0;font-size:16px}
.ze .cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ze .card{position:relative;min-height:380px;border-radius:24px;overflow:hidden;color:#fff;isolation:isolate;box-shadow:0 15px 40px #0001;margin:0}
.ze .card:before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 28%,#000e 100%);z-index:-1}
.ze .card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:.5s transform}
.ze .card:hover img{transform:scale(1.05)}
.ze .card-content{position:absolute;left:22px;right:22px;bottom:20px}
.ze .tag{display:inline-block;background:#fff;color:#111;border-radius:999px;padding:6px 10px;font-size:11px;font-weight:900;letter-spacing:.08em;text-transform:uppercase;line-height:1.2}
.ze .card h3{font-size:26px;margin:11px 0 4px;color:#fff;line-height:1.2}
.ze .card p{margin:0 0 14px;color:#eee;font-size:14px}
.ze .card a,.ze .card a:hover{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:900;color:#fff}
.ze .card a:after{content:"→"}
.ze .card.is-hidden{display:none}
.ze .more{display:flex;justify-content:center;margin-top:30px}
.ze .more button{background:none;border:0;border-bottom:2px solid #111;border-radius:0;font-size:16px;font-weight:900;padding:8px 0;cursor:pointer;color:#111}

/* Zo werkt het */
.ze .story{background:#111;color:#fff;border-radius:32px;padding:60px;display:grid;grid-template-columns:.85fr 1.15fr;gap:56px;align-items:center}
.ze .story img{width:100%;height:auto;background:#fff;border-radius:24px;padding:28px}
.ze .story h2{font-size:clamp(36px,4vw,64px);margin:0 0 22px;color:#fff;line-height:1.05;letter-spacing:-.03em}
.ze .story p{color:#cfcfcf;font-size:17px;margin:0}
.ze .steps{display:grid;gap:15px;margin-top:28px}
.ze .step{display:flex;gap:16px;align-items:center;font-size:16px;font-weight:800}
.ze .step b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:#fff;color:#111}
.ze .step:nth-child(1) b{background:var(--pink);color:#fff}
.ze .step:nth-child(2) b{background:var(--orange)}
.ze .step:nth-child(3) b{background:var(--green)}


/* Tablet */
@media(max-width:900px){
  .ze .hero{grid-template-columns:1fr}
  .ze .hero-copy{padding:48px 30px 40px}
  .ze .food-art{min-height:360px}
  .ze .promise{grid-template-columns:1fr}
  .ze .promise div{border-right:0;border-bottom:1px solid var(--line)}
  .ze .cards{grid-template-columns:repeat(2,1fr)}
  .ze .story{grid-template-columns:1fr;padding:44px;gap:30px}
  .ze .story img{max-width:300px}
  .ze .section-head{display:block}
  .ze .section-head p{margin-top:16px}
}
/* Mobiel */
@media(max-width:580px){
  .ze .hero{border-radius:22px}
  .ze .hero-copy{padding:40px 22px 34px}
  .ze .hero h1{font-size:50px}
  .ze .hero p{font-size:16px}
  .ze .actions>a{width:100%;text-align:center}
  .ze .food-art{min-height:290px}
  .ze .stamp{width:88px;height:88px;font-size:12px}
  .ze .cards{grid-template-columns:1fr}
  .ze .card{min-height:340px}
  .ze .section{padding:56px 0}
  .ze .story{padding:34px 24px;border-radius:22px}
}

/* Zeeburg Eats – productgroepen als tekstlijst (zoals IJburg Eats) i.p.v. de Swiper-carousel */
body.bestel-restaurant-layout .restaurant-menu-categories{display:block!important;height:auto!important;padding:10px 15px 10px 30px;margin:0 -15px;background:#fff;overflow:visible}
body.bestel-restaurant-layout .restaurant-menu-categories .swiper-wrapper{display:flex!important;flex-wrap:wrap!important;transform:none!important;height:auto!important;width:100%!important}
body.bestel-restaurant-layout .restaurant-menu-categories .swiper-slide{width:33.333%!important;margin:0!important;height:auto!important;flex-shrink:0}
body.bestel-restaurant-layout .restaurant-menu-categories .swiper-slide.ze-cat-hidden{display:none!important}
body.bestel-restaurant-layout .restaurant-menu-categories .swiper-button-prev,
body.bestel-restaurant-layout .restaurant-menu-categories .swiper-button-next,
body.bestel-restaurant-layout .restaurant-menu-categories .swiper-notification{display:none!important}
body.bestel-restaurant-layout .restaurant-menu-categories .categorie-menu-nav-item{width:auto!important;height:auto!important;padding:6px 6px 6px 10px!important;margin:0!important;text-align:left!important;background:none!important;border:0!important;box-shadow:none!important}
body.bestel-restaurant-layout .restaurant-menu-categories .restaurant-menu-category-pic{display:none!important}
body.bestel-restaurant-layout .restaurant-menu-categories .categorie-menu-nav-item span{display:inline!important;position:static!important;padding:0!important;margin:0!important;background:none!important;font:700 13px/1.43 "Open Sans",Roboto,sans-serif!important;text-transform:uppercase;color:#222!important;text-align:left!important;white-space:normal!important;overflow:visible!important;text-overflow:clip!important;-webkit-line-clamp:unset!important}
body.bestel-restaurant-layout .restaurant-menu-categories .categorie-menu-nav-item:hover span{text-decoration:underline}
@media(max-width:767px){body.bestel-restaurant-layout .restaurant-menu-categories .swiper-slide{width:50%!important}}

/* Restaurant-tegels in de eigen kleur van elk restaurant (zelfde kleuren als IJburg Eats) */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-f6cbf4f8-8583-45f4-8393-024d53be769b > a.categorie-nav-item{background-color:#cf6635!important} /* Uncle Kim's */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-f6715239-0bb4-4b39-86bf-608a3788382f > a.categorie-nav-item{background-color:#3c6b6c!important} /* Sushi Chefs */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-9b52fd1d-f552-45ff-bd64-e4790df3478c > a.categorie-nav-item{background-color:#c26f69!important} /* Poke Point */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-fb413dad-65f9-4e8c-b909-cd1ee5f59c11 > a.categorie-nav-item{background-color:#2e502e!important} /* Koh */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-240390f0-def7-4adf-92d1-6471b3c3e8db > a.categorie-nav-item{background-color:#5b2a26!important} /* Lunch Service */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-9d697106-bde7-4961-addb-25c9c39bb6a6 > a.categorie-nav-item{background-color:#330703!important} /* Tacos 2 Go */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-41df2594-dbe7-45ff-a714-6c8d5e621d7e > a.categorie-nav-item{background-color:#770028!important} /* The Bar */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-46df7ed3-c32a-4b53-b805-9f3881afa252 > a.categorie-nav-item{background-color:#ba9c42!important} /* Ijskoh */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-354110fc-8f01-463c-9930-438b785eb56e > a.categorie-nav-item{background-color:#5a1b16!important} /* Barstow */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-9a9c8a67-042a-43d8-8a26-63999a48b49f > a.categorie-nav-item{background-color:#535e95!important} /* Veal Rib Roastery */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li.toggle-active-restaurant-62c4e265-9a6f-4fd7-ad79-325b87acf366 > a.categorie-nav-item{background-color:#004f51!important} /* Kip aan Huys */

/* Logo's in de restaurant-tegels helemaal wit, zodat ze op elke kleur leesbaar zijn */
body.bestel-restaurant-layout .restaurant-categories .nav-categories-list > li > a.categorie-nav-item .restaurant-logo{filter:brightness(0) invert(1)!important}

/* Sticky: restaurant-tegels bovenaan, productgroepen er direct onder.
   --ze-nav-h (vaste menubalk op mobiel) en --ze-tiles-h (tegelrij) worden door zeeburg-menu.js gezet. */
html body.bestel-restaurant-layout .restaurant-categories{position:sticky!important;top:var(--ze-nav-h,0px)!important;z-index:101!important;background:#fff}
html body.bestel-restaurant-layout .order-wrapper .restaurant-order-menu .restaurants-container > .NewMenuStructure{position:sticky!important;top:calc(var(--ze-nav-h,0px) + var(--ze-tiles-h,135px))!important;z-index:100!important}
html body.bestel-restaurant-layout .NewMenuStructure .restaurant-menu-categories{position:static!important}

/* Mobiel: productgroepen als één horizontaal scrollbare rij, zodat het vaste deel compact blijft */
@media(max-width:767px){
  body.bestel-restaurant-layout .restaurant-menu-categories{padding:8px 12px!important}
  body.bestel-restaurant-layout .restaurant-menu-categories .swiper-wrapper{flex-wrap:nowrap!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  body.bestel-restaurant-layout .restaurant-menu-categories .swiper-wrapper::-webkit-scrollbar{display:none}
  body.bestel-restaurant-layout .restaurant-menu-categories .swiper-slide{width:auto!important}
  body.bestel-restaurant-layout .restaurant-menu-categories .categorie-menu-nav-item span{white-space:nowrap!important}
}

/* "Voeg drankje toe" / "Voeg dessert toe" op de menupagina (zoals IJburg Eats) */
.ze-extra{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;margin:0 0 20px}
.ze-extra-item{flex:1 1 calc(50% - 5px);display:flex;align-items:center;border-radius:6px;overflow:hidden;text-decoration:none!important;color:#fff!important;min-height:70px}
.ze-extra-item:hover{filter:brightness(1.08)}
.ze-extra-image{flex:0 0 120px;align-self:stretch;min-height:70px;background-color:#fff;background-size:cover;background-position:center}
.ze-extra-title{padding:15px;font-size:19px;font-weight:bold;color:#fff}
.ze-extra-drink{background-color:#770028}
.ze-extra-dessert{background-color:#cf6635}
.ze-extra-bottom{margin:20px 0}
@media(max-width:991px){.ze-extra-item{flex-basis:100%}}

/* Knoppen in het winkelmandje */
.ze-cart-extra .btn{border:0;color:#fff!important;margin-bottom:6px}
.ze-cart-extra .ze-extra-drink{background-color:#770028!important}
.ze-cart-extra .ze-extra-dessert{background-color:#cf6635!important}