:root{ --header-height:80px; --hero-margin:64px; --border:#DBD6C6; --navy:#143352; --navy-dark:#0F2740; --cream:#EEF0E6; --ink:#29241F; --muted:#6E6759; --blue:#3E6C8C; --blue-light:#4C7FA3; --orange:#E4832E; }
@media (max-width:640px){ :root{ --header-height:64px; --hero-margin:24px; } }

*{ box-sizing:border-box; }
html,body{ margin:0; }
body{ -webkit-font-smoothing:antialiased; background:var(--cream); color:var(--ink); font-family:'Manrope',sans-serif; }
img{ max-width:100%; }
a{ color:var(--navy); }
a:hover{ color:var(--navy-dark); }

.wrap{ max-width:1240px; margin:0 auto; padding:0 32px; }

/* header */
.site-header{ position:sticky; top:0; z-index:100; background:var(--cream); border-bottom:1px solid var(--border); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); transition:background .35s ease, box-shadow .35s ease, border-color .35s ease; }
.site-header .bar{ max-width:1240px; width:100%; margin:0 auto; padding:16px 32px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; }
.site-header.is-glass{ background:#EEF0E6; box-shadow:0 8px 24px rgba(20,51,82,0.08); }
.site-header .logo{ display:flex; align-items:center; text-decoration:none; }
.site-header .logo img{ height:52px; width:auto; display:block; }
.trx-nav{ display:flex; align-items:center; gap:28px; flex-wrap:wrap; }
.trx-nav a{ font-size:14px; font-weight:500; color:var(--ink); text-decoration:none; padding-bottom:6px; border-bottom:2px solid transparent; }
.trx-nav a.is-active{ font-weight:700; }
.trx-book-btn{ background:var(--navy); color:#fff; font-weight:600; font-size:14px; padding:11px 22px; border-radius:10px; text-decoration:none; white-space:nowrap; }
.trx-book-btn:hover{ background:var(--navy-dark); color:#fff; }
.trx-burger{ display:none; background:none; border:none; cursor:pointer; padding:8px; align-items:center; justify-content:center; }
.trx-actions{ display:flex; align-items:center; gap:14px; }
.trx-lang{ font-size:13px; font-weight:700; letter-spacing:.06em; color:var(--navy); text-decoration:none; border:1.5px solid var(--border); border-radius:8px; padding:8px 11px; line-height:1; white-space:nowrap; transition:background .2s ease, border-color .2s ease; }
.trx-lang:hover{ background:#DCE9F0; border-color:var(--navy); color:var(--navy); }
@media (max-width:820px){
  .trx-nav{ display:none; }
  .trx-book-btn{ display:none; }
  .trx-actions{ display:none; }
  .trx-burger{ display:flex; }
}

/* mobile modal menu */
@keyframes trxOverlayIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes trxModalIn{ from{ opacity:0; transform:scale(0.92) translateY(14px); } to{ opacity:1; transform:scale(1) translateY(0); } }
@keyframes trxModalLinkIn{ from{ opacity:0; transform:translateY(10px); } to{ opacity:1; transform:translateY(0); } }
.trx-modal-overlay{ position:fixed; inset:0; z-index:150; background:rgba(20,51,82,0.45); display:none; align-items:center; justify-content:center; padding:24px; animation:trxOverlayIn 0.25s ease both; }
.trx-modal-overlay.is-open{ display:flex; }
.trx-modal-panel{ background:var(--cream); border-radius:20px; padding:28px 26px; display:flex; flex-direction:column; gap:2px; width:100%; max-width:360px; max-height:80vh; overflow-y:auto; box-shadow:0 30px 70px rgba(20,51,82,0.3); animation:trxModalIn 0.35s cubic-bezier(.2,.9,.25,1) both; }
.trx-modal-panel button.close{ align-self:flex-end; background:none; border:none; cursor:pointer; padding:8px; margin-bottom:12px; }
.trx-modal-link{ opacity:0; animation:trxModalLinkIn 0.4s ease both; text-decoration:none; }
a.trx-modal-link{ font-size:17px; font-weight:600; color:var(--navy); padding:14px 4px; border-bottom:1px solid var(--border); }
a.trx-modal-link.cta{ margin-top:16px; background:var(--navy); color:#fff; font-weight:600; font-size:15px; padding:14px; border-radius:10px; text-align:center; border-bottom:none; }
.trx-modal-panel > *:nth-of-type(1){ animation-delay:0.05s; }
.trx-modal-panel > *:nth-of-type(2){ animation-delay:0.10s; }
.trx-modal-panel > *:nth-of-type(3){ animation-delay:0.15s; }
.trx-modal-panel > *:nth-of-type(4){ animation-delay:0.20s; }
.trx-modal-panel > *:nth-of-type(5){ animation-delay:0.25s; }
.trx-modal-panel > *:nth-of-type(6){ animation-delay:0.30s; }
.trx-modal-panel > *:nth-of-type(7){ animation-delay:0.35s; }

/* fade-up on load */
@keyframes trxFadeUp{ 0%{ opacity:0; transform:translateY(16px); } 100%{ opacity:1; transform:translateY(0); } }
[data-fade]{ animation:trxFadeUp 0.7s ease both; }

/* scroll reveal (IntersectionObserver driven) */
[data-reveal]{ opacity:0; transform:translateY(28px); transition:opacity .8s ease, transform .8s ease; }
[data-reveal].in-view{ opacity:1; transform:translateY(0); }
[data-reveal-group] > *{ opacity:0; transform:translateY(24px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal-group].in-view > *{ opacity:1; transform:translateY(0); }
[data-reveal-group].in-view > *:nth-child(1){ transition-delay:0s; }
[data-reveal-group].in-view > *:nth-child(2){ transition-delay:.12s; }
[data-reveal-group].in-view > *:nth-child(3){ transition-delay:.24s; }
[data-reveal-group].in-view > *:nth-child(4){ transition-delay:.36s; }

/* carousels
   Without JS the track is a plain horizontally scrollable row. js/main.js
   upgrades it to `.is-loop`: the strip is duplicated until it is wider than
   the viewport and then moved with a transform, so it wraps seamlessly and
   drags at exactly the speed of the finger. */
.trx-carousel-wrap{ position:relative; overflow:hidden; }
.trx-carousel{ display:flex; gap:20px; overflow-x:auto; padding-bottom:8px; scrollbar-width:none; -webkit-overflow-scrolling:touch; }
.trx-carousel::-webkit-scrollbar{ display:none; }
.trx-carousel > *{ flex:0 0 auto; }
.trx-carousel.is-loop{ overflow:visible; cursor:grab; touch-action:pan-y; will-change:transform; user-select:none; -webkit-user-select:none; }
.trx-carousel.is-loop.is-dragging{ cursor:grabbing; }
.trx-carousel.is-loop img{ pointer-events:none; -webkit-user-drag:none; }
.trx-fade-l, .trx-fade-r{ position:absolute; top:0; bottom:8px; width:64px; pointer-events:none; z-index:2; }
.trx-fade-l{ left:0; background:linear-gradient(90deg,var(--cream) 0%,rgba(238,240,230,0) 100%); }
.trx-fade-r{ right:0; background:linear-gradient(270deg,var(--cream) 0%,rgba(238,240,230,0) 100%); }

/* menu list
   The price never shrinks, so on a narrow column it used to push out past the
   card. The row wraps instead: name and leader on one line, price dropping to
   its own right-aligned line when there isn't room. Prices made of two parts
   ("½kg 5,00 € · ¼kg 3,00 €") break between the parts, never inside one. */
.trx-menu-card{ break-inside:avoid; background:#F8F6EE; border:1px solid var(--border); border-radius:14px; padding:28px 26px; margin:0 0 24px; }
.trx-menu-card > h2{ font-family:'Noto Serif Display',serif; font-weight:600; font-size:21px; color:var(--navy); margin:0 0 18px; }
.trx-item{ margin-bottom:14px; }
.trx-row{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; }
.trx-name{ flex:0 1 auto; min-width:0; font-size:16px; font-weight:600; color:var(--ink); }
.trx-dots{ flex:1 1 20px; min-width:16px; border-bottom:1px dotted #C9C2AE; transform:translateY(-4px); }
.trx-price{ margin-left:auto; font-size:16px; font-weight:700; color:var(--navy); white-space:nowrap; }
.trx-price.is-split{ white-space:normal; text-align:right; }
.trx-price.is-split > span{ white-space:nowrap; }
.trx-note{ font-size:13.5px; line-height:1.5; color:var(--muted); margin:4px 0 0; }
.trx-menu-foot{ font-size:14px; line-height:1.6; color:var(--muted); margin:12px 0 0; font-style:italic; }
.trx-notes li{ font-size:14px; line-height:1.8; color:var(--muted); }

.img-cover{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; }
.img-placeholder{ position:absolute; inset:0; width:100%; height:100%; background:#E4E1D4; display:flex; align-items:center; justify-content:center; text-align:center; padding:12px; color:#8b8474; font-size:13px; }

/* footer */
.site-footer{ background:var(--navy); color:var(--cream); }
.site-footer .cols{ max-width:1240px; margin:0 auto; padding:80px 32px 40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:40px; }
.site-footer .cols img{ height:56px; width:auto; filter:brightness(0) invert(1); display:block; margin-bottom:16px; }
.site-footer .cols p{ font-size:14px; line-height:1.6; color:#DCE9F0; margin:0; max-width:30ch; }
.site-footer .label{ font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue-light); margin:0 0 14px; }
.site-footer .bottom{ border-top:1px solid rgba(255,255,255,0.15); padding:20px 32px; text-align:center; }
.site-footer .bottom p{ font-size:12px; color:#9FB3C4; margin:0; }
.site-footer a{ color:#fff; }
/* social links */
.site-footer .trx-social{ display:flex; flex-wrap:wrap; gap:20px; }
.site-footer .trx-social a{ display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:#fff; text-decoration:none; }
.site-footer .trx-social a:hover{ text-decoration:underline; text-underline-offset:4px; }
.site-footer .trx-social svg{ flex:0 0 auto; }

/* phone/email inside the footer paragraph: same colour as the text around it */
.site-footer .cols a.plain{ color:#DCE9F0; text-decoration:none; }
.site-footer .cols a.plain:hover{ color:#fff; text-decoration:underline; text-underline-offset:3px; }

/* cookie notice */
.trx-cookie{ position:fixed; left:16px; right:16px; bottom:16px; z-index:300; display:none; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; background:var(--navy); color:var(--cream); border-radius:14px; padding:16px 20px; box-shadow:0 18px 40px rgba(20,51,82,0.28); }
.trx-cookie.is-visible{ display:flex; animation:trxFadeUp 0.4s ease both; }
.trx-cookie p{ margin:0; font-size:14px; line-height:1.5; max-width:66ch; }
.trx-cookie button{ background:var(--cream); color:var(--navy); border:none; border-radius:9px; padding:11px 24px; font:inherit; font-weight:700; font-size:14px; cursor:pointer; white-space:nowrap; }
.trx-cookie button:hover{ background:#fff; }
@media (max-width:560px){ .trx-cookie{ justify-content:flex-start; } .trx-cookie button{ width:100%; } }

/* hero call-to-actions
   Three of them, so on a phone they have to shrink or the row that holds the
   review link falls off the bottom of the hero. */
.hero-cta{ display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.hero-btn{ background:var(--navy); color:#fff; font-weight:600; font-size:15px; padding:14px 28px; border-radius:10px; text-decoration:none; }
.hero-btn:hover{ background:var(--navy-dark); color:#fff; }
.hero-btn.is-ghost{ background:transparent; color:#fff; border:1.5px solid #fff; padding:12.5px 26.5px; }
.hero-btn.is-ghost:hover{ background:rgba(255,255,255,0.14); color:#fff; }
.hero-review{ display:inline-flex; align-items:center; gap:9px; color:#fff; font-weight:600; font-size:15px; padding:12.5px 6px; text-decoration:none; }
.hero-review > span{ text-decoration:underline; text-underline-offset:4px; }
.hero-review:hover{ color:#fff; }
.hero-review svg{ flex:0 0 auto; }
@media (max-width:640px){
  .hero-cta{ gap:10px; }
  .hero-btn{ font-size:14px; padding:12px 20px; }
  .hero-btn.is-ghost{ padding:10.5px 18.5px; }
  .hero-review{ font-size:14px; padding:8px 4px; }
}

/* misc reused patterns */
.eyebrow{ font-family:'Manrope',sans-serif; font-weight:700; font-size:12px; letter-spacing:.1em; text-transform:uppercase; color:var(--blue); margin:0 0 14px; }
.btn-primary{ display:inline-block; background:var(--navy); color:#fff; font-weight:600; font-size:15px; padding:14px 28px; border-radius:10px; text-decoration:none; }
.btn-primary:hover{ background:var(--navy-dark); color:#fff; }
.btn-outline{ display:inline-block; background:transparent; color:var(--navy); border:1.5px solid var(--navy); font-weight:600; font-size:15px; padding:12.5px 26.5px; border-radius:10px; text-decoration:none; }
.btn-outline:hover{ background:#DCE9F0; }