@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,600;0,700;1,600;1,700&display=swap');

:root{
  --bg: #f4f1ea;
  --surface: #ffffff;
  --text: #1f2a24;
  --muted: #5c6b62;
  --brand: #1f6b54;
  --brand2: #c9a44a;
  --accent: #de7c5a;
  --accent-dark: #c96848;
  --soft-green: #dbe7df;
  --warm-soft: #f4f1ea;
  --plain-soft: #fcfbf9;
  --ring: rgba(31,107,84,.18);

  --wrap: 1260px;
  --pad: 18px;

  --radius: 18px;
  --shadow: 0 10px 30px rgba(0,0,0,.08);
  --border: rgba(31,42,36,.12);

  --danger: rgba(176, 0, 32, 1);
  --danger-bg: rgba(176, 0, 32, .08);
  --danger-border: rgba(176, 0, 32, .22);

  --warn: rgba(199, 123, 0, 1);
  --warn-bg: rgba(199, 123, 0, .10);
  --warn-border: rgba(199, 123, 0, .22);

  --ok: rgba(31, 107, 84, 1);
  --ok-bg: rgba(31, 107, 84, .08);
  --ok-border: rgba(31, 107, 84, .20);

  --headerH: 92px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
a{ color:inherit; text-decoration:none; }

body{
  margin:0;
  position:relative;
  padding-top:var(--headerH);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 20% 0%, rgba(31,107,84,.12), transparent 55%),
    radial-gradient(1200px 800px at 80% 10%, rgba(201,164,74,.10), transparent 60%),
    var(--bg);
  overflow-x:hidden;
}

body::after{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  opacity:.035;
  z-index:-1;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.35'/%3E%3C/svg%3E");
}

main, header, footer, section, .wrap{
  position:relative;
  z-index:1;
}

.wrap{
  max-width:var(--wrap);
  margin:0 auto;
  padding-left:var(--pad);
  padding-right:var(--pad);
}

.wrap-wide{
  max-width:1440px;
}

.muted{ color:var(--muted); }

/* =========================================================
   HEADER
========================================================= */

.site-header{
  position:fixed;
  top:0;
  left:0;
  width:100%;
  z-index:1000;
  background:rgba(244,241,234,.90);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(31,42,36,.12);
  transition:box-shadow .25s ease, background .25s ease;
  isolation:isolate;
}

.site-header::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(
    90deg,
    rgba(31,107,84,0),
    rgba(31,107,84,.55),
    rgba(201,164,74,.35),
    rgba(31,107,84,0)
  );
  opacity:.55;
  pointer-events:none;
}

.site-header.scrolled{
  box-shadow:0 14px 40px rgba(0,0,0,.10);
  background:rgba(244,241,234,.95);
}

.site-nav{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:20px;
  padding:16px 0;
}

.brand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}

.brand-icon{
  width:68px;
  height:68px;
  padding:0;
  background:transparent;
  border:none;
  box-shadow:none;
  border-radius:0;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 6px 12px rgba(0,0,0,.10));
  transition:transform .18s ease, filter .2s ease;
}

.brand:hover .brand-icon{
  transform:scale(1.05);
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.12));
}

.brand-text{ line-height:1; }

.brand-name{
  margin:0;
  font-size:clamp(30px, 4.1vw, 50px);
  font-weight:950;
  letter-spacing:.16em;
  text-transform:uppercase;
  line-height:.92;
  color:#1f6b54;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.nav-links{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.nav-links a{
  color:var(--muted);
  font-weight:650;
  padding:8px 4px;
  position:relative;
  transition:color .2s ease, transform .15s ease;
}

.nav-links a:hover{
  color:var(--text);
  transform:translateY(-1px);
}

.nav-links a::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-7px;
  width:0%;
  height:2px;
  background:var(--brand);
  transition:width .25s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after{
  width:100%;
}

.nav-links a.active{
  color:var(--text);
}

.nav-toggle{ display:none !important; }

.lang{
  display:none !important;
}

.lang-dropdown{
  position:relative;
  display:flex;
  align-items:center;
}

.lang-current{
  display:inline-flex;
  align-items:center;
  gap:8px;
  height:42px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.72);
  color:var(--text);
  font-weight:800;
  cursor:pointer;
  transition:border-color .15s ease, background .15s ease, box-shadow .2s ease, transform .08s ease;
}

.lang-current:hover{
  border-color:rgba(31,107,84,.32);
  background:rgba(255,255,255,.88);
  box-shadow:0 10px 20px rgba(0,0,0,.05);
}

.lang-current:active{
  transform:translateY(1px);
}

.lang-caret{
  font-size:12px;
  opacity:.72;
}

.lang-menu{
  position:absolute;
  top:calc(100% + 10px);
  right:0;
  min-width:84px;
  padding:8px;
  border-radius:16px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.96);
  box-shadow:0 18px 40px rgba(0,0,0,.10);
  display:none;
  flex-direction:column;
  gap:6px;
  z-index:1100;
}

.lang-menu.open{
  display:flex;
}

.lang-menu button{
  border:none;
  background:transparent;
  color:var(--text);
  font-weight:800;
  padding:10px 12px;
  border-radius:12px;
  text-align:left;
  cursor:pointer;
  transition:background .15s ease, color .15s ease;
}

.lang-menu button:hover,
.lang-menu button.active{
  background:rgba(31,107,84,.10);
  color:var(--brand);
}

.nav-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:64px;
  padding:0 34px !important;
  border-radius:20px;
  background:linear-gradient(135deg, #d89a2b, #b97d18);
  color:#fff !important;
  font-weight:900 !important;
  font-size:18px;
  letter-spacing:.01em;
  box-shadow:0 18px 38px rgba(185,125,24,.24);
  margin-left:4px;
}

.nav-cta::after{ display:none !important; }

.nav-cta:hover{
  background:linear-gradient(135deg, #c78418, #9f6210);
  box-shadow:0 20px 40px rgba(159,98,16,.28);
  filter:none;
}

.nav-cta.active{
  color:#fff !important;
}

@media (max-width: 980px){
  .site-nav{
    flex-wrap:wrap;
    align-items:flex-start;
    gap:12px;
    padding:14px 0;
  }

  .nav-links{
    width:100%;
    justify-content:flex-start;
    gap:12px;
    row-gap:10px;
  }

  .brand-name{
    font-size:clamp(24px, 7vw, 36px);
  }

  .brand-icon{
    width:54px;
    height:54px;
  }

  .nav-cta{
    min-height:48px;
    padding:0 22px !important;
  }
}

/* =========================================================
   TYPOGRAPHY
========================================================= */

h1{
  font-size:clamp(38px, 4.8vw, 72px);
  margin:18px 0 10px;
  letter-spacing:-0.03em;
  line-height:.98;
}

h2{
  margin:0 0 12px;
  letter-spacing:-0.02em;
  font-size:clamp(28px, 3vw, 44px);
}

h3{
  margin:0 0 10px;
  letter-spacing:-0.01em;
}

.lead{
  color:var(--muted);
  max-width:760px;
  font-size:18px;
  margin:0 0 8px;
  line-height:1.55;
}

.sublead{
  color:rgba(92,107,98,.92);
  margin:0 0 18px;
  font-size:14px;
  line-height:1.5;
}

.pill{
  display:inline-block;
  padding:7px 12px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.68);
  font-size:13px;
  color:var(--muted);
}

.section-heading{
  margin-bottom:20px;
}

.section-heading-centered{
  text-align:center;
  max-width:900px;
  margin:0 auto 28px;
}

.section-heading-values{
  margin-bottom:34px;
}

.section-heading-about{
  margin-bottom:24px;
}

.section-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:62px;
  padding:0 32px;
  border-radius:999px;
  border:1px solid rgba(201,164,74,.42);
  background:linear-gradient(180deg, rgba(255,250,242,.96), rgba(252,245,232,.96));
  color:var(--brand);
  font-size:28px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
  box-shadow:0 12px 28px rgba(0,0,0,.05);
}

.section-kicker-gold{
  color:#8f6a18;
  border-color:rgba(201,164,74,.34);
}

.section-kicker-premium{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:56px;
  padding:0 28px;
  border-radius:999px;
  border:1px solid rgba(201,164,74,.30);
  background:linear-gradient(135deg, rgba(255,255,255,.96), rgba(250,247,240,.98));
  color:var(--brand);
  font-size:16px;
  font-weight:900;
  letter-spacing:.20em;
  text-transform:uppercase;
  box-shadow:
    0 14px 30px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.82);
  position:relative;
}

.values-heading-premium,
.about-heading-premium{
  margin-bottom:28px;
}

.values-heading-premium .section-intro{
  margin:20px auto 0;
  max-width:760px;
  font-size:clamp(20px, 2.1vw, 30px);
  line-height:1.45;
  font-weight:500;
  letter-spacing:-0.01em;
  color:rgba(31,42,36,.72);
  text-align:center;
  font-family:Georgia, "Times New Roman", serif;
}

.about-heading-premium .section-kicker-premium{
  min-height:60px;
  padding:0 30px;
}

.section-title-xl{
  margin:22px 0 14px;
  font-size:clamp(56px, 7vw, 108px);
  line-height:.92;
  letter-spacing:-0.05em;
  color:var(--brand);
}

.section-subline{
  margin:0 auto;
  max-width:880px;
  color:rgba(92,107,98,.88);
  font-size:24px;
  line-height:1.55;
  font-weight:500;
}

.section-display-title{
  display:none;
}

.values-main-title{
  display:none;
}

.values-kicker-pill{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 30px;
  border-radius:999px;
  border:1px solid rgba(201,164,74,.42);
  background:linear-gradient(180deg, rgba(255,250,242,.97), rgba(252,245,232,.97));
  color:var(--brand);
  font-size:15px;
  font-weight:900;
  letter-spacing:.18em;
  text-transform:uppercase;
  box-shadow:
    0 12px 28px rgba(0,0,0,.05),
    inset 0 1px 0 rgba(255,255,255,.82);
}

.values-headline{
  display:block;
  margin:22px auto 14px;
  max-width:860px;
  font-size:clamp(42px, 5.8vw, 78px);
  line-height:.95;
  letter-spacing:-0.045em;
  font-weight:900;
  color:var(--brand);
  text-wrap:balance;
  text-shadow:0 8px 22px rgba(31,107,84,.08);
}

.values-subline{
  margin:0 auto;
  max-width:820px;
  font-family:Georgia, "Times New Roman", serif;
  font-style:italic;
  font-size:clamp(20px, 2.2vw, 30px);
  line-height:1.55;
  color:rgba(112, 90, 34, .92);
  text-shadow:0 1px 0 rgba(255,255,255,.55);
}

/* =========================================================
   BUTTONS
========================================================= */

.btn{
  display:inline-block;
  margin-top:14px;
  padding:13px 20px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(31,107,84,.95), rgba(31,107,84,.85));
  color:#fff;
  font-weight:800;
  box-shadow:0 12px 30px rgba(31,107,84,.16);
  transition:transform .12s ease, filter .2s ease, box-shadow .2s ease, opacity .2s ease;
}

.btn:hover{
  filter:brightness(1.04);
  box-shadow:0 14px 34px rgba(31,107,84,.22);
}

.btn:active{
  transform:translateY(1px);
}

.btn.secondary{
  background:rgba(255,255,255,.78);
  border:1px solid rgba(31,42,36,.12);
  box-shadow:none;
  color:var(--text);
}

.btn:disabled,
button:disabled{
  opacity:.65;
  cursor:not-allowed;
  transform:none !important;
  filter:none !important;
}

/* =========================================================
   GENERIC LAYOUT / CARDS
========================================================= */

section{ position:relative; }

.home-block{
  padding:26px 0 14px;
}

.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(260px,1fr));
  gap:18px;
}

.card{
  background:var(--surface);
  border:1px solid rgba(31,42,36,.12);
  border-radius:var(--radius);
  padding:18px;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.card--hover:hover{
  transform:translateY(-2px);
  border-color:rgba(31,107,84,.22);
  box-shadow:0 16px 44px rgba(0,0,0,.10);
}

/* =========================================================
   HERO
========================================================= */

.hero-section{
  padding:42px 0 26px;
}

.hero-section-wide{
  padding:24px 0 28px;
}

.hero-shell{
  display:block;
  max-width:none;
  padding:0;
}

.hero-copy{
  display:block;
  max-width:none;
  padding:0;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.hero-media{
  border-radius:26px;
  overflow:hidden;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.55);
  box-shadow:0 18px 60px rgba(0,0,0,.10);
}

.hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:none;
}

.hero-media:hover img{
  transform:none;
}

.hero-media-large{
  min-height:640px;
}

.hero-banner{
  position:relative;
  min-height:690px;
  border-radius:34px;
  overflow:hidden;
  border:1px solid rgba(31,42,36,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.12);
  background:#ddd;
}

.hero-banner > img{
  width:100%;
  height:100%;
  min-height:690px;
  object-fit:cover;
  display:block;
}

.hero-overlay{
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  padding:52px;
  background:
    linear-gradient(
      90deg,
      rgba(12,24,19,.46) 0%,
      rgba(12,24,19,.28) 28%,
      rgba(12,24,19,.08) 54%,
      rgba(12,24,19,0) 74%
    );
}

.hero-overlay-inner{
  max-width:620px;
}

.hero-title-on-image{
  margin:0;
  color:#fff7ee;
  text-shadow:0 10px 24px rgba(0,0,0,.28);
  font-size:clamp(54px, 6vw, 92px);
  line-height:.92;
  letter-spacing:-0.04em;
}

.hero-actions-on-image{
  margin-top:26px;
}

.hero-actions-on-image .btn{
  min-height:54px;
  padding:0 24px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
}

.hero-actions-on-image .btn.secondary{
  background:rgba(255,255,255,.88);
}

@media (max-width: 1100px){
  .hero-banner,
  .hero-banner > img{
    min-height:600px;
  }

  .hero-title-on-image{
    font-size:clamp(46px, 6vw, 78px);
  }
}

@media (max-width: 980px){
  .hero-media-large{
    min-height:320px;
  }
}

@media (max-width: 900px){
  .hero-overlay{
    padding:30px;
    background:
      linear-gradient(
        180deg,
        rgba(12,24,19,.34) 0%,
        rgba(12,24,19,.12) 48%,
        rgba(12,24,19,.08) 100%
      );
    align-items:flex-end;
  }

  .hero-banner,
  .hero-banner > img{
    min-height:470px;
  }

  .hero-title-on-image{
    font-size:clamp(36px, 8vw, 56px);
    max-width:540px;
  }
}

/* =========================================================
   ORDER CHOICE / HOME ORDER CARDS
========================================================= */

.choice-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(280px, 1fr));
  gap:16px;
  margin-top:14px;
}

.choice{
  display:block;
  padding:24px;
  border-radius:20px;
  border:1px solid rgba(31,107,84,.18);
  background:
    radial-gradient(900px 240px at 18% 0%, rgba(31,107,84,.10), transparent 55%),
    radial-gradient(700px 240px at 120% 20%, rgba(201,164,74,.08), transparent 55%),
    rgba(255,255,255,.78);
  box-shadow:0 12px 28px rgba(0,0,0,.05);
  position:relative;
  overflow:hidden;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease, background .2s ease;
}

.choice::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:4px;
  background:linear-gradient(90deg, rgba(31,107,84,0), rgba(31,107,84,.55), rgba(31,107,84,0));
  opacity:.55;
}

.choice:hover{
  border-color:rgba(31,107,84,.28);
  box-shadow:0 18px 44px rgba(0,0,0,.08);
  transform:translateY(-2px);
}

.choice h2{ color:var(--brand); }
.choice p{ color:var(--muted); }
.choice:active{ transform:translateY(0); }

.home-order-block{
  padding-top:24px;
}

.choice-grid-home{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:20px;
}

.choice-home{
  display:grid;
  grid-template-columns:170px 1fr;
  align-items:center;
  gap:18px;
  padding:24px 24px 24px 18px;
  min-height:220px;
}

.choice-home-media{
  display:flex;
  align-items:center;
  justify-content:center;
}

.choice-home-media img{
  width:150px;
  height:150px;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.12));
}

.choice-home-content h2{
  margin:0 0 8px;
  font-size:clamp(28px, 3vw, 42px);
  line-height:.98;
}

.choice-home-content p{
  margin:0;
  font-size:15px;
  line-height:1.55;
  max-width:460px;
}

.choice-home:hover .choice-home-media img{
  transform:translateY(-2px) scale(1.02);
  transition:transform .2s ease;
}

@media (max-width: 1100px){
  .choice-home{
    grid-template-columns:130px 1fr;
  }

  .choice-home-media img{
    width:118px;
    height:118px;
  }
}

@media (max-width: 900px){
  .choice-grid-home{
    grid-template-columns:1fr;
  }

  .choice-home{
    grid-template-columns:110px 1fr;
    min-height:auto;
  }
}

/* =========================================================
   SECTION WAVES / BLOCKS
========================================================= */

.section-wave{
  position:relative;
  line-height:0;
  margin:0;
  z-index:2;
}

.section-wave svg{
  display:block;
  width:100%;
  height:130px;
}

.section-wave-soft svg path{
  fill:#dbe7df;
}

.section-wave-plain svg path{
  fill:#fcfbf9;
}

.home-block-soft,
.home-block-plain{
  position:relative;
  z-index:1;
}

.home-block-soft{
  background:linear-gradient(
    180deg,
    #dbe7df 0%,
    #e2e8e1 24%,
    #ece9e3 58%,
    #f1ede7 82%,
    #f4f1ea 100%
  );
  padding-top:72px;
  padding-bottom:74px;
}

.home-block-plain{
  background:linear-gradient(
    180deg,
    #fcfbf9 0%,
    #fcfbf9 34%,
    rgba(255,255,255,.92) 100%
  );
  padding-top:54px;
  padding-bottom:72px;
}

#values,
#about-home{
  overflow:visible;
}

/* =========================================================
   DECORATIVE VISUALS
========================================================= */

.section-deco{
  position:absolute;
  width:150px;
  pointer-events:none;
  opacity:.96;
  filter:drop-shadow(0 18px 34px rgba(0,0,0,.16));
  z-index:2;
}

.section-deco-float{
  animation:niloFloatSoft 5.6s ease-in-out infinite;
  will-change:transform;
}

.section-deco-values{
  top:-86px;
  left:-8px;
  width:210px;
  transform:rotate(-7deg);
  --nilo-rot:-7deg;
}

.section-deco-about{
  top:-30px;
  right:-6px;
  width:235px;
  transform:rotate(8deg);
  --nilo-rot:8deg;
}

@keyframes niloFloatSoft{
  0%   { transform:translateY(0) rotate(var(--nilo-rot, 0deg)); }
  50%  { transform:translateY(-10px) rotate(var(--nilo-rot, 0deg)); }
  100% { transform:translateY(0) rotate(var(--nilo-rot, 0deg)); }
}

#values .wrap,
#about-home .wrap{
  position:relative;
}

#values .section-heading,
#about-home .section-heading,
#values .values-grid,
#about-home .about-card{
  position:relative;
  z-index:3;
}

/* =========================================================
   VALUES
========================================================= */

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

.value-card{
  border-radius:28px !important;
  padding:28px !important;
  text-align:center;
  min-height:100%;
  box-shadow:0 16px 38px rgba(0,0,0,.06);
}

.value-card-1{
  background:
    radial-gradient(700px 240px at 10% 0%, rgba(31,107,84,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,249,244,.96));
}

.value-card-2{
  background:
    radial-gradient(520px 180px at 14% 8%, rgba(31,107,84,.07), transparent 58%),
    linear-gradient(180deg, rgba(244,249,246,.96), rgba(236,244,239,.94));
}

.value-card-3{
  background:
    radial-gradient(540px 180px at 12% 8%, rgba(201,164,74,.08), transparent 58%),
    linear-gradient(180deg, rgba(245,250,247,.96), rgba(239,246,241,.94));
}

.value-card-4{
  background:
    radial-gradient(680px 220px at 10% 0%, rgba(201,164,74,.07), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(250,247,242,.95));
}

.value-card-title{
  margin:0 0 18px !important;
  font-size:clamp(24px, 2.5vw, 38px) !important;
  line-height:1.08 !important;
  letter-spacing:-0.02em !important;
  color:var(--brand) !important;
  font-weight:800 !important;
}

.value-media{
  width:248px;
  height:248px;
  border-radius:999px;
  overflow:hidden;
  border:3px solid rgba(31,107,84,.16);
  background:rgba(31,107,84,.05);
  margin:12px auto 20px;
  box-shadow:0 18px 42px rgba(0,0,0,.10);
}

.value-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
  transition:transform .35s ease;
}

.value-media:hover img{
  transform:scale(1.03);
}

.value-card-text{
  margin:0 auto !important;
  max-width:500px;
  text-align:center !important;
  font-size:16px !important;
  line-height:1.72 !important;
  color:var(--muted) !important;
}

/* =========================================================
   ABOUT
========================================================= */

.about-card{
  padding:46px 52px;
  background:
    radial-gradient(800px 200px at 15% 0%, rgba(31,107,84,.08), transparent 55%),
    rgba(255,255,255,.92);
  border:1px solid rgba(31,42,36,.10);
  max-width:980px;
  margin:0 auto;
}

.about-card-quote{
  position:relative;
  max-width:980px;
  margin:0 auto;
  padding:46px 56px !important;
  border-radius:28px;
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(31,107,84,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,250,246,.95));
  box-shadow:0 18px 40px rgba(0,0,0,.07);
}

.about-card-quote::before,
.about-card-quote::after{
  position:absolute;
  font-family:Georgia, "Times New Roman", serif;
  font-size:120px;
  line-height:1;
  opacity:.22;
  pointer-events:none;
}

.about-card-quote::before{
  content:"“";
  top:12px;
  left:28px;
  color:var(--brand);
}

.about-card-quote::after{
  content:"”";
  right:34px;
  bottom:-24px;
  color:#c9a44a;
}

.about-text{
  margin:0 auto;
  max-width:860px;
  font-size:20px;
  line-height:1.95;
  text-align:center;
}

/* =========================================================
   FORMS
========================================================= */

input, textarea, select{
  width:100%;
  margin-top:8px;
  padding:12px 12px;
  border-radius:12px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.88);
  color:var(--text);
  outline:none;
}

input:focus, textarea:focus, select:focus{
  border-color:rgba(31,107,84,.40);
  box-shadow:0 0 0 4px var(--ring);
}

textarea{
  min-height:120px;
  resize:vertical;
}

button[type="submit"]{
  margin-top:12px;
  padding:12px 16px;
  border:none;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(31,107,84,.95), rgba(31,107,84,.85));
  font-weight:800;
  cursor:pointer;
  color:#fff;
  box-shadow:0 12px 26px rgba(31,107,84,.14);
}

.is-invalid{
  border-color:var(--danger-border) !important;
  box-shadow:0 0 0 4px rgba(176,0,32,.12) !important;
  background:rgba(255,255,255,.92) !important;
}

.is-valid{
  border-color:var(--ok-border) !important;
  box-shadow:0 0 0 4px rgba(31,107,84,.10) !important;
}

.field{
  margin:0;
}

.field-label{
  display:block;
  margin:0 0 6px;
  font-size:12px;
  font-weight:850;
  color:rgba(31,42,36,.80);
  letter-spacing:.02em;
}

.field-hint{
  margin-top:6px;
  font-size:12px;
  color:var(--muted);
  line-height:1.45;
}

.field-error{
  margin-top:6px;
  font-size:12px;
  color:rgba(176,0,32,.95);
  line-height:1.35;
  font-weight:650;
}

/* =========================================================
   GALLERY / TILES
========================================================= */

.gallery{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px;
  margin-top:14px;
}

.tile{
  display:block;
  border-radius:var(--radius);
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.70);
  overflow:hidden;
  box-shadow:0 10px 24px rgba(0,0,0,.06);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
  min-height:180px;
}

.tile:hover{
  transform:translateY(-2px);
  border-color:rgba(31,107,84,.28);
  box-shadow:0 14px 34px rgba(0,0,0,.10);
}

.tile .thumb{
  height:120px;
  background:
    radial-gradient(480px 220px at 20% 20%, rgba(31,107,84,.12), transparent 55%),
    radial-gradient(480px 220px at 80% 15%, rgba(201,164,74,.10), transparent 55%),
    rgba(255,255,255,.55);
  border-bottom:1px solid rgba(31,42,36,.12);
}

.tile .caption{
  padding:12px 12px 14px;
}

.tile .caption h3{
  margin:0 0 6px;
  font-size:16px;
  letter-spacing:-0.01em;
}

.tile .caption p{
  margin:0;
  font-size:13px;
  color:var(--muted);
  line-height:1.45;
}

/* =========================================================
   CONTACT VISUAL
========================================================= */

.contact-visual-large{
  margin-top:20px;
  border-radius:16px;
  overflow:hidden;
}

.contact-visual-large img{
  width:100%;
  height:auto;
  display:block;
  border-radius:16px;
}

/* =========================================================
   ORDER HUB
========================================================= */

.order-hub-page{
  padding-top:42px;
  padding-bottom:18px;
}

.order-hub-hero{
  padding:10px 0 0;
}

.order-hub-intro{
  max-width:860px;
  margin:0 0 28px;
}

.order-hub-kicker{
  margin:0 0 16px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#b77b17;
  font-size:14px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.order-hub-kicker::before{
  content:"✣";
  font-size:17px;
  line-height:1;
  color:#d89a2b;
}

.order-hub-main-title{
  margin:0;
  max-width:860px;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size:clamp(56px, 7vw, 90px);
  line-height:.92;
  letter-spacing:-.055em;
  font-weight:700;
}

.order-hub-main-lead{
  margin:18px 0 0;
  max-width:650px;
  color:rgba(31,42,36,.78);
  font-size:clamp(17px, 1.5vw, 21px);
  line-height:1.55;
}

.order-hub-layout{
  display:grid;
  gap:22px;
}

.order-hub-card{
  position:relative;
  display:grid;
  overflow:hidden;
  border:1px solid rgba(31,42,36,.12);
  border-radius:24px;
  background:
    radial-gradient(760px 260px at 100% 0%, rgba(201,164,74,.07), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(252,251,248,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.065);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
  isolation:isolate;
}

/* Keep temporarily disabled order-hub features hidden even though cards use display:grid. */
.order-hub-card[hidden],
.order-hub-help[hidden]{
  display:none !important;
}

.order-hub-card:hover{
  transform:translateY(-3px);
  border-color:rgba(31,107,84,.24);
  box-shadow:0 24px 56px rgba(0,0,0,.10);
}

.order-hub-card:focus-visible{
  outline:4px solid var(--ring);
  outline-offset:4px;
}

.order-hub-card--primary{
  min-height:320px;
  grid-template-columns:minmax(0, 1fr) minmax(320px, 470px);
  align-items:center;
  padding:34px 36px;
  background:
    radial-gradient(780px 300px at 86% 36%, rgba(31,107,84,.10), transparent 62%),
    radial-gradient(620px 230px at 8% 0%, rgba(201,164,74,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,250,246,.98));
}

.order-hub-card--secondary{
  min-height:245px;
  grid-template-columns:minmax(0, 1fr) minmax(150px, 245px);
  align-items:center;
  padding:26px 28px;
}

.order-hub-secondary-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

/* Invoice ordering is temporarily disabled. The remaining event card stays secondary. */
.order-hub-secondary-grid.is-invoice-disabled{
  grid-template-columns:minmax(0, 1fr);
  width:min(100%, calc((100% - 22px) / 2));
}

.order-hub-card-content{
  position:relative;
  z-index:2;
  min-width:0;
}

.order-hub-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  margin:0 0 18px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.18);
  background:rgba(31,107,84,.07);
  color:var(--brand);
  font-size:13px;
  font-weight:900;
  line-height:1;
  white-space:nowrap;
}

.order-hub-badge--gold{
  border-color:rgba(216,153,34,.34);
  background:rgba(216,153,34,.10);
  color:#a66b08;
}

.order-hub-badge--gold::before{
  content:"★";
  margin-right:8px;
  color:#d89a2b;
}

.order-hub-title{
  margin:0 0 14px;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:-.045em;
  line-height:.96;
  font-size:clamp(36px, 4.2vw, 58px);
}

.order-hub-card--secondary .order-hub-title{
  font-size:clamp(30px, 3vw, 43px);
}

.order-hub-desc{
  margin:0;
  max-width:480px;
  color:rgba(31,42,36,.76);
  font-size:17px;
  line-height:1.6;
}

.order-hub-card--secondary .order-hub-desc{
  max-width:360px;
  font-size:15px;
  line-height:1.55;
}

.order-hub-meta{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin:24px 0 0;
  color:rgba(31,42,36,.76);
  font-size:16px;
  font-weight:650;
}

.order-hub-meta-item{
  display:inline-flex;
  align-items:center;
  gap:10px;
}

.order-hub-meta-icon{
  width:30px;
  height:30px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border:2px solid rgba(31,107,84,.65);
  border-radius:999px;
  color:var(--brand);
  font-size:16px;
  font-weight:900;
}

.order-hub-meta-separator{
  width:1px;
  height:34px;
  background:rgba(31,42,36,.16);
}

.order-hub-cta{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  min-height:58px;
  margin-top:30px;
  padding:0 24px;
  border-radius:15px;
  background:linear-gradient(135deg, #e3a630, #bf7c10);
  color:#fff;
  font-weight:950;
  font-size:17px;
  box-shadow:0 18px 34px rgba(191,124,16,.24);
}

.order-hub-card--secondary .order-hub-cta{
  min-height:52px;
  margin-top:24px;
  font-size:15px;
}

.order-hub-cta-arrow{
  font-size:20px;
  line-height:1;
  transform:translateY(-1px);
  transition:transform .18s ease;
}

.order-hub-card:hover .order-hub-cta-arrow{
  transform:translate(4px, -1px);
}

.order-hub-illustration{
  position:relative;
  z-index:1;
  justify-self:end;
  align-self:center;
  width:100%;
  max-width:500px;
  opacity:1;
  overflow:visible;
}

/* New order hub WebP illustrations have real transparent, feathered edges.
   Keep the CSS simple so no rectangular image background is visible. */
.order-hub-illustration img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
  border-radius:0;
  filter:drop-shadow(0 14px 26px rgba(16,38,30,.08));
}

.order-hub-illustration--delivery{
  max-width:510px;
  margin-right:-10px;
}

.order-hub-illustration--delivery img{
  transform:translateX(8px) scale(1.02);
  transform-origin:center;
}

.order-hub-illustration--event,
.order-hub-illustration--business{
  max-width:262px;
  align-self:center;
  transform:translate(12px, -8px);
}

.order-hub-illustration--event img,
.order-hub-illustration--business img{
  transform:none;
}

.order-hub-illustration svg{
  display:block;
  width:100%;
  height:auto;
  filter:drop-shadow(0 16px 28px rgba(0,0,0,.08));
}

.oh-line,
.oh-plant,
.oh-house,
.oh-tuk,
.oh-bowl,
.oh-bag,
.oh-doc,
.oh-steam,
.oh-mark{
  fill:none;
  stroke:rgba(31,107,84,.54);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.oh-plant{
  stroke:rgba(31,107,84,.33);
}

.oh-house,
.oh-bag,
.oh-doc{
  fill:rgba(31,107,84,.06);
}

.oh-tuk{
  fill:rgba(31,107,84,.76);
  stroke:rgba(23,81,64,.84);
}

.oh-window{
  fill:rgba(255,255,255,.68);
  stroke:rgba(23,81,64,.82);
  stroke-width:4;
}

.oh-gold{
  fill:rgba(216,153,34,.22);
  stroke:rgba(216,153,34,.62);
  stroke-width:4;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.oh-wheel{
  fill:rgba(31,42,36,.82);
  stroke:rgba(255,255,255,.72);
  stroke-width:4;
}

.oh-wheel-inner{
  fill:rgba(255,255,255,.72);
}

.oh-ink-soft{
  fill:none;
  stroke:rgba(31,42,36,.12);
  stroke-width:4;
  stroke-linecap:round;
}

.order-hub-help{
  display:flex;
  align-items:center;
  gap:16px;
  padding:17px 20px;
  border-radius:18px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.58);
  box-shadow:0 10px 24px rgba(0,0,0,.045);
}

.order-hub-help-icon{
  flex:0 0 auto;
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:950;
  font-size:24px;
  line-height:1;
}

.order-hub-help-text{
  margin:0;
  color:rgba(31,42,36,.72);
  font-size:14px;
  line-height:1.55;
}

.order-hub-help-text strong{
  color:var(--brand);
  font-weight:900;
}

.order-hub-help-text strong:first-child{
  color:var(--text);
}

.order-hub-info-section{
  margin-top:34px;
}

.order-hub-info-card{
  border-radius:26px;
  border:1px solid rgba(31,107,84,.14);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(31,107,84,.10), transparent 55%),
    radial-gradient(700px 220px at 100% 100%, rgba(201,164,74,.08), transparent 58%),
    linear-gradient(180deg, rgba(252,251,249,.96), rgba(244,241,234,.96));
  box-shadow:0 18px 40px rgba(0,0,0,.06);
  padding:32px;
}

.order-hub-info-title{
  margin:0 0 14px;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size:clamp(34px, 3.4vw, 50px);
  line-height:1;
  letter-spacing:-0.04em;
}

.order-hub-info-text{
  margin:0;
  color:var(--muted);
  font-size:16px;
  line-height:1.8;
  max-width:980px;
}

@media (max-width: 1080px){
  .order-hub-card--primary{
    grid-template-columns:minmax(0, 1fr) minmax(260px, 360px);
    padding:30px;
  }

  .order-hub-secondary-grid{
    gap:18px;
  }

  .order-hub-card--secondary{
    grid-template-columns:minmax(0, 1fr);
    padding:24px;
  }

  .order-hub-illustration--event,
  .order-hub-illustration--business{
    position:absolute;
    right:12px;
    bottom:14px;
    width:190px;
    max-width:42%;
    opacity:.28;
    transform:none;
  }
}

@media (max-width: 820px){
  .order-hub-page{
    padding-top:28px;
  }

  .order-hub-intro{
    margin-bottom:22px;
  }

  .order-hub-main-title{
    font-size:clamp(44px, 12vw, 66px);
  }

  .order-hub-main-lead{
    font-size:16px;
  }

  .order-hub-card--primary{
    grid-template-columns:1fr;
    min-height:0;
    padding:24px;
  }

  .order-hub-illustration--delivery{
    max-width:360px;
    justify-self:center;
    order:-1;
    margin:-10px 0 6px;
  }

  .order-hub-illustration--delivery img{
    transform:none;
  }

  .order-hub-secondary-grid,
  .order-hub-secondary-grid.is-invoice-disabled{
    grid-template-columns:1fr;
    width:100%;
  }

  .order-hub-card--secondary{
    min-height:0;
  }

  .order-hub-title,
  .order-hub-card--secondary .order-hub-title{
    font-size:clamp(34px, 9vw, 46px);
  }

  .order-hub-desc,
  .order-hub-card--secondary .order-hub-desc{
    font-size:15px;
    max-width:100%;
  }

  .order-hub-info-card{
    padding:24px;
  }
}

@media (max-width: 560px){
  .order-hub-page{
    padding-top:20px;
  }

  .order-hub-kicker{
    font-size:12px;
    letter-spacing:.18em;
  }

  .order-hub-card--primary,
  .order-hub-card--secondary{
    border-radius:20px;
    padding:20px 18px;
  }

  .order-hub-illustration--delivery{
    max-width:270px;
  }

  .order-hub-illustration--event,
  .order-hub-illustration--business{
    width:150px;
    max-width:46%;
    opacity:.22;
  }

  .order-hub-meta{
    gap:10px;
    font-size:14px;
  }

  .order-hub-meta-separator{
    display:none;
  }

  .order-hub-cta,
  .order-hub-card--secondary .order-hub-cta{
    width:100%;
    min-height:54px;
    justify-content:space-between;
  }

  .order-hub-help{
    align-items:flex-start;
    padding:16px;
  }

  .order-hub-help-icon{
    width:36px;
    height:36px;
    font-size:20px;
  }

  .order-hub-info-text{
    font-size:15px;
    line-height:1.65;
  }
}

/* =========================================================
   ORDER PAGE
========================================================= */

.order-hero{ margin-top:18px; }

.order-page{
  padding-top:14px;
  padding-bottom:18px;
}

.order-page-hero{
  margin-bottom:12px;
  text-align:center;
}

.order-page-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 20px;
  border:1px solid rgba(201,164,74,.34);
  border-radius:999px;
  background:rgba(255,255,255,.72);
  color:var(--brand);
  box-shadow:0 10px 24px rgba(0,0,0,.04);
  font-size:14px;
  font-weight:900;
  letter-spacing:.16em;
  text-transform:uppercase;
}

.order-page-title{
  margin:12px 0 8px;
  color:var(--brand);
  text-shadow:0 10px 24px rgba(31,107,84,.08);
  font-size:clamp(40px, 5.2vw, 72px);
  font-weight:900;
  line-height:.94;
  letter-spacing:-.04em;
  text-wrap:balance;
}

.order-page-sub{
  max-width:760px;
  margin:0 auto;
  color:var(--muted);
  font-size:17px;
  line-height:1.6;
  display:none;
}

.order-badges{
  display:grid;
  gap:10px;
  margin:14px 0;
}

.badge-line{
  background:rgba(255,255,255,.72);
  border:1px solid rgba(31,42,36,.12);
  border-radius:14px;
  padding:10px 12px;
  display:flex;
  gap:10px;
  align-items:flex-start;
}

.badge{
  background:rgba(31,107,84,.10);
  color:var(--brand);
  border:1px solid rgba(31,107,84,.18);
  padding:4px 8px;
  border-radius:999px;
  font-weight:800;
  font-size:12px;
  white-space:nowrap;
}

.order-details-collapsible{
  border:1px solid rgba(31,42,36,.12);
  border-radius:14px;
  padding:10px 12px;
  background:rgba(255,255,255,.82);
}

.order-details-collapsible summary{
  cursor:pointer;
  font-weight:800;
}

.details-body{
  padding:10px 2px 4px;
  opacity:.92;
}

.order-page + section,
.order-page-hero + section{
  margin-top:0;
}

.order-grid-modern{
  display:grid;
  grid-template-columns:minmax(0, 1.18fr) minmax(360px, 420px);
  gap:20px;
  align-items:start;
  margin-top:6px;
}

.order-left{
  min-width:0;
}

.order-right{
  position:sticky;
  top:calc(var(--headerH) + 14px);
  padding:0 !important;
  overflow:visible !important;
  border-radius:24px;
  border:1px solid rgba(31,42,36,.10);
  background:
    radial-gradient(900px 220px at 14% 0%, rgba(31,107,84,.08), transparent 56%),
    radial-gradient(700px 220px at 100% 100%, rgba(201,164,74,.08), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(252,251,249,.98));
  box-shadow:0 20px 48px rgba(0,0,0,.08);
}

.order-right-head{
  margin-bottom:10px;
}

.order-right-title{
  margin:0;
  color:var(--brand);
  font-size:clamp(24px, 2vw, 30px);
  line-height:1.02;
  letter-spacing:-0.03em;
  font-weight:900;
}

.order-right-sub{
  font-size:13px;
  color:var(--muted);
  margin-top:6px;
  line-height:1.5;
}

.order-side-shell{
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:0;
}

.order-side-section{
  position:relative;
  overflow:visible;
  display:flex;
  flex-direction:column;
  gap:12px;
  padding:18px !important;
  border-bottom:1px solid rgba(31,42,36,.08);
}

.order-side-section:first-child{
  padding-top:20px;
}

.order-side-section:last-child{
  border-bottom:none;
}

.order-side-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  align-self:flex-start;
  min-height:32px;
  padding:0 12px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.16);
  background:rgba(31,107,84,.06);
  color:var(--brand);
  font-size:11px;
  font-weight:900;
  letter-spacing:.12em;
  text-transform:uppercase;
  margin-bottom:8px;
}

.order-side-divider{
  margin-top:12px;
  height:1px;
  border-top:1px dashed rgba(31,42,36,.12);
  background:linear-gradient(90deg, rgba(31,107,84,.15), rgba(31,107,84,0));
}

.order-infobars{
  display:grid;
  gap:10px;
  margin-bottom:2px;
}

.order-infobar{
  border:1px solid rgba(31,42,36,.12);
  border-radius:18px;
  padding:12px 14px;
  background:rgba(255,255,255,.72);
}

.order-infobar-title{
  font-weight:900;
  margin-bottom:4px;
  font-size:14px;
}

.order-infobar-text{
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.order-infobar-urgent{
  border-color:rgba(31,107,84,.22);
  background:rgba(31,107,84,.06);
}

.order-infobar-warn{
  border-color:rgba(176,0,32,.18);
  background:rgba(176,0,32,.06);
}

.order-cat{
  margin-top:14px;
  scroll-margin-top:120px;
}

.order-cat:first-child{
  margin-top:6px;
}

.order-cat-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom:10px;
}

.order-cat-title{
  margin:0;
  color:var(--brand);
  font-size:clamp(22px, 2vw, 30px);
  line-height:1;
  letter-spacing:-0.03em;
  font-weight:900;
}

.order-items{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(300px, 1fr));
  gap:16px;
}

.order-item{
  padding:16px;
  border-radius:22px;
  background:
    radial-gradient(600px 180px at 10% 0%, rgba(31,107,84,.05), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,251,249,.96));
  min-height:100%;
}

.order-item-top{
  display:flex;
  gap:14px;
  align-items:flex-start;
}

.order-item-media{
  flex:0 0 auto;
}

.order-item-img,
.order-item-img.ph{
  width:86px;
  height:86px;
  border-radius:18px;
  object-fit:cover;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.55);
}

.order-item-main{
  flex:1;
  min-width:0;
}

.order-item-title-row{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:flex-start;
}

.order-item-title{
  font-weight:950;
  font-size:17px;
  line-height:1.18;
}


.order-price-pill{
  flex:0 0 auto;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.18);
  background:rgba(31,107,84,.08);
  font-weight:900;
  font-size:12px;
  white-space:nowrap;
}

.order-item-badges{
  margin-top:7px;
  display:flex;
  gap:6px;
  flex-wrap:wrap;
}

.order-badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:4px 8px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.10);
  background:rgba(255,255,255,.68);
  color:rgba(31,42,36,.72);
  font-weight:800;
  font-size:11px;
  line-height:1;
  letter-spacing:.01em;
  white-space:nowrap;
}

.order-badge-spicy{
  border-color:rgba(222,124,90,.22);
  background:rgba(222,124,90,.08);
  color:rgba(154,73,45,.95);
}

.order-badge-allergen{
  border-color:rgba(201,164,74,.24);
  background:rgba(201,164,74,.09);
  color:rgba(112,90,34,.96);
}

.order-badge-pop{
  border-color:rgba(31,107,84,.20);
  background:rgba(31,107,84,.08);
  color:var(--brand);
}

.order-item-desc{
  margin-top:8px;
  color:var(--muted);
  font-size:13px;
  line-height:1.52;
}

.order-item-includes{
  margin-top:6px;
  color:rgba(92,107,98,.92);
  font-size:12px;
}

.order-options{
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.order-opt{
  display:flex;
  flex-direction:column;
  gap:0;
}

.order-opt-label{
  display:block;
  font-size:12px;
  font-weight:850;
  margin:0 0 6px;
}

.order-opt-select{
  width:100%;
  min-height:48px;
  border-radius:14px;
  border:1px solid rgba(31,42,36,.12);
  padding:10px 12px;
  background:rgba(255,255,255,.90);
}

.order-opt-hint{
  font-size:12.5px;
  margin:6px 0 4px;
  opacity:.75;
}

.order-qty-row{
  margin-top:16px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
}

.order-qty-label{
  font-size:12px;
  font-weight:850;
  color:var(--muted);
}

.order-item-add{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.16);
  background:rgba(31,107,84,.08);
  color:var(--brand);
  font-weight:900;
  font-size:13px;
  cursor:pointer;
  transition:transform .08s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease;
}

.order-item-add:hover{
  background:rgba(31,107,84,.12);
  border-color:rgba(31,107,84,.28);
  box-shadow:0 10px 20px rgba(31,107,84,.08);
}

.order-item-add:active{
  transform:translateY(1px);
}

.order-item .qty{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.92);
}

.order-item .qty-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.12);
  background:#fff;
  cursor:pointer;
  font-weight:950;
  font-size:16px;
  display:grid;
  place-items:center;
  padding:0;
}

.order-item .qty-btn:hover{
  border-color:rgba(31,107,84,.26);
  background:rgba(31,107,84,.06);
  box-shadow:0 6px 14px rgba(31,107,84,.08);
}

.qty-value{
  min-width:18px;
  text-align:center;
  font-weight:900;
}

.order-item .qty-value{
  min-width:24px;
  text-align:center;
  font-size:13px;
  font-weight:900;
}

.order-cart-head{
  position:relative;
  display:block;
  min-height:84px;
  padding-right:112px;
  margin-bottom:-8px;
}

.order-cart-head-main{
  position:relative;
  z-index:2;
  max-width:100%;
  min-width:0;
}

.order-cart-hero{
  position:absolute;
  top:-18px;
  right:-10px;
  z-index:6;
  margin:0;
  pointer-events:none;
  display:flex;
  align-items:center;
  justify-content:center;
}

.order-cart-hero-img{
  width:128px;
  height:auto;
  object-fit:contain;
  display:block;
  filter:drop-shadow(0 10px 18px rgba(0,0,0,.10));
  animation:niloCartFloatSoft 5.2s ease-in-out infinite;
}

@keyframes niloCartFloatSoft{
  0%   { transform:translateY(0); }
  50%  { transform:translateY(-8px); }
  100% { transform:translateY(0); }
}

.order-summary-empty{
  display:grid;
  place-items:center;
  text-align:center;
  min-height:180px;
  color:var(--muted);
  border:1px dashed rgba(31,42,36,.14);
  border-radius:20px;
  background:
    radial-gradient(420px 120px at 50% 0%, rgba(31,107,84,.05), transparent 60%),
    rgba(255,255,255,.62);
  padding:20px;
}

.order-empty-visual{
  display:flex;
  justify-content:center;
  align-items:center;
  margin-bottom:16px;
}

.order-empty-visual-img{
  width:122px;
  height:122px;
  object-fit:contain;
  display:block;
  opacity:.98;
  filter:drop-shadow(0 12px 22px rgba(0,0,0,.10));
}

.order-empty-title{
  font-weight:900;
  font-size:18px;
  letter-spacing:-.02em;
  margin-bottom:6px;
}

.order-empty-text{
  margin:8px auto 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
  max-width:260px;
}

.summary{
  display:grid;
  gap:12px;
}

.summary-lines{
  display:grid;
  gap:12px;
}

.sum-card{
  display:grid;
  grid-template-columns:56px 1fr;
  gap:12px;
  padding:12px;
  border:1px solid rgba(31,42,36,.10);
  border-radius:18px;
  background:rgba(255,255,255,.76);
}

.sum-media{
  width:56px;
  height:56px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(31,42,36,.10);
  background:rgba(255,255,255,.82);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:22px;
}

.sum-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.sum-media.ph{
  color:var(--muted);
}

.sum-main{
  min-width:0;
}

.sum-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:flex-start;
}

.line-title{
  font-weight:900;
  line-height:1.15;
  font-size:14px;
}

.sum-options{
  margin-top:4px;
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.line-total{
  font-weight:900;
  white-space:nowrap;
  font-size:14px;
}

.sum-actions{
  margin-top:10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
}

.qty-control{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:4px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.10);
  background:rgba(255,255,255,.86);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
}

.qty-pill-btn{
  width:34px;
  height:34px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.10);
  background:#fff;
  cursor:pointer;
  font-weight:900;
  font-size:18px;
  display:grid;
  place-items:center;
  transition:border-color .15s ease, background .15s ease, transform .08s ease, box-shadow .15s ease;
}

.qty-pill-btn:hover{
  border-color:rgba(31,107,84,.22);
  background:rgba(31,107,84,.06);
  box-shadow:0 6px 14px rgba(31,107,84,.08);
}

.qty-pill-btn:active{
  transform:translateY(1px);
}

.qty-pill-value{
  min-width:22px;
  text-align:center;
  font-weight:900;
  font-size:13px;
  color:var(--text);
}

.sum-remove{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(176,0,32,.12);
  background:rgba(176,0,32,.05);
  color:var(--danger);
  cursor:pointer;
  font-size:15px;
  display:grid;
  place-items:center;
  transition:border-color .15s ease, background .15s ease, transform .08s ease;
}

.sum-remove:hover{
  border-color:rgba(176,0,32,.22);
  background:rgba(176,0,32,.09);
}

.sum-remove:active{
  transform:translateY(1px);
}

.summary-totals{
  margin-top:14px;
  padding-top:14px;
  border-top:1px dashed rgba(31,42,36,.14);
  display:grid;
  gap:8px;
}

.tot-row{
  display:flex;
  justify-content:space-between;
  gap:14px;
  color:var(--muted);
  font-size:14px;
}

.tot-row.tot{
  color:var(--text);
  font-size:18px;
  font-weight:900;
}

.order-delivery-box{
  display:grid;
  gap:10px;
}

.order-delivery-box.compact{
  display:grid;
  gap:12px;
}

.delivery-list{
  display:grid;
  gap:8px;
}

.delivery-list.compact{
  display:grid;
  gap:10px;
}

.delivery-line{
  display:grid;
  grid-template-columns:20px 1fr;
  gap:10px;
  align-items:flex-start;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
}

.delivery-line strong{
  color:var(--text);
}

.delivery-icon{
  width:22px;
  height:22px;
  border-radius:999px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  background:rgba(31,107,84,.08);
  color:var(--brand);
  font-size:12px;
  transform:translateY(1px);
}

.delivery-note{
  margin-top:4px;
  border:1px solid rgba(31,42,36,.10);
  border-radius:16px;
  background:rgba(255,255,255,.66);
  padding:12px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.5;
}

.free-delivery-chip{
  display:inline-flex;
  align-items:center;
  gap:8px;
  width:100%;
  justify-content:flex-start;
  padding:11px 13px;
  border-radius:14px;
  border:1px solid rgba(31,107,84,.14);
  background:rgba(31,107,84,.06);
  color:var(--brand);
  font-size:13px;
  font-weight:850;
}

.free-delivery-chip.is-applied{
  background:rgba(31,107,84,.10);
  border-color:rgba(31,107,84,.22);
}

.order-form-grid{
  display:grid;
  gap:14px;
}

.order-form-group{
  display:flex;
  flex-direction:column;
  gap:10px !important;
}

.order-form-group-title{
  margin:0;
  font-size:13px;
  font-weight:900;
  letter-spacing:.10em;
  text-transform:uppercase;
  color:rgba(31,42,36,.62);
}

.order-form-block{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px !important;
}

.order-form-block .field.full{
  grid-column:1 / -1;
}

.order-form input,
.order-form textarea,
.order-form select,
.order-form-grid input,
.order-form-grid textarea,
.order-form-grid select{
  margin-top:0;
  min-height:48px;
  border-radius:14px;
  background:rgba(255,255,255,.94);
}

.order-form textarea,
.order-form-grid textarea,
#del_address,
#team_notes{
  min-height:64px !important;
  resize:vertical;
}

.order-cta-btn{
  width:100%;
  min-height:56px;
  margin-top:6px;
  border-radius:18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  font-size:15px;
  font-weight:900;
  text-align:center;
  box-shadow:0 16px 34px rgba(31,107,84,.18);
}

.order-cta-note{
  margin-top:2px !important;
  color:var(--muted);
  font-size:12px;
  line-height:1.5;
}

.order-cta-total{
  margin-top:2px !important;
  padding-top:10px !important;
  border-top:1px dashed rgba(31,42,36,.14);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  font-size:14px;
  color:var(--muted);
}

.order-cta-total strong{
  color:var(--text);
  font-size:20px;
}

.team-form{
  margin-bottom:14px;
  padding:18px;
  border-radius:20px;
  background:
    radial-gradient(700px 180px at 10% 0%, rgba(31,107,84,.05), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,251,249,.96));
}

.team-form-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:12px;
}

.team-form-title{
  margin:0;
}

.team-form-sub{
  margin-top:6px;
}

.team-grid{
  margin-top:12px;
  display:grid;
  gap:12px;
  grid-template-columns:1fr 1fr;
}

.team-invoice-field{
  display:flex;
  align-items:flex-end;
}

.team-checkbox{
  display:flex;
  gap:10px;
  align-items:center;
  user-select:none;
}

.team-checkbox input{
  width:auto;
  margin:0;
}

.team-checkbox-label{
  margin:0;
}

.order-error{
  border:1px solid var(--danger-border);
  background:
    radial-gradient(900px 220px at 10% 0%, rgba(176,0,32,.10), transparent 55%),
    rgba(176,0,32,.08);
  color:var(--text);
  border-radius:16px;
  padding:13px 14px;
  margin:10px 0 12px;
  display:none;
}

.order-error.show{
  display:block;
}

.order-error-title{
  font-weight:900;
  margin:0 0 4px;
  letter-spacing:-0.01em;
}

.order-error-text{
  margin:0;
  font-size:13px;
  line-height:1.35;
  opacity:.95;
}

.order-toast{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%) translateY(10px);
  opacity:0;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.92);
  color:var(--text);
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  font-size:13px;
  z-index:9999;
  transition:opacity .18s ease, transform .18s ease;
}

.order-toast.show{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

.availability-box{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  border:1px solid rgba(31,42,36,.10);
  background:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.45;
  font-weight:800;
  transition:background .18s ease, border-color .18s ease, color .18s ease;
}

.availability-box.is-neutral{
  color:var(--muted);
  background:rgba(255,255,255,.78);
  border-color:rgba(31,42,36,.10);
}

.availability-box.is-ok{
  color:rgba(31,107,84,.98);
  background:rgba(31,107,84,.07);
  border-color:rgba(31,107,84,.16);
}

.availability-box.is-warning{
  color:rgba(138,92,12,1);
  background:rgba(199,123,0,.10);
  border-color:rgba(199,123,0,.22);
}

.availability-box.is-critical{
  color:rgba(161,80,0,1);
  background:rgba(199,123,0,.14);
  border-color:rgba(199,123,0,.28);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45);
}

.availability-box.is-closed{
  color:rgba(176,0,32,.96);
  background:rgba(176,0,32,.08);
  border-color:rgba(176,0,32,.20);
}

/* =========================================================
   ORDER CATEGORY NAV
========================================================= */

.order-cat-nav-wrap{
  position:sticky;
  top:calc(var(--headerH) + 10px);
  z-index:20;
  margin:4px 0 14px;
  padding:8px 0 2px;
  background:linear-gradient(
    180deg,
    rgba(244,241,234,.96) 0%,
    rgba(244,241,234,.88) 70%,
    rgba(244,241,234,0) 100%
  );
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.order-cat-nav{
  display:flex;
  gap:10px;
  overflow-x:auto;
  overflow-y:hidden;
  padding:2px 2px 6px;
  scrollbar-width:none;
}

.order-cat-nav::-webkit-scrollbar{
  display:none;
}

.order-cat-nav-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  min-height:38px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.14);
  background:rgba(255,255,255,.84);
  color:var(--brand);
  font-size:13px;
  font-weight:850;
  letter-spacing:.01em;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}

.order-cat-nav-link:hover{
  transform:translateY(-1px);
  background:rgba(31,107,84,.08);
  border-color:rgba(31,107,84,.24);
}

.order-cat-nav-link.is-active{
  background:linear-gradient(135deg, rgba(31,107,84,.14), rgba(31,107,84,.10));
  border-color:rgba(31,107,84,.30);
  color:var(--brand);
  box-shadow:0 8px 18px rgba(31,107,84,.10);
  font-weight:900;
}

/* =========================================================
   ORDER PAGE RESPONSIVE
========================================================= */

@media (max-width: 1100px){
  .order-grid-modern{
    grid-template-columns:1fr 380px;
  }
}

@media (max-width: 980px){
  .order-grid-modern{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:6px;
  }

  .order-right{
    position:static;
    margin-top:6px;
  }

  .order-page{
    padding-top:10px;
  }

  .order-page-hero{
    margin-bottom:8px;
  }

  .order-page-title{
    margin:10px 0 8px;
    font-size:clamp(34px, 10vw, 52px);
  }

  .order-page-kicker{
    min-height:38px;
    padding:0 16px;
    font-size:12px;
  }

  .order-cat-nav-wrap{
    top:calc(var(--headerH) + 6px);
    margin-bottom:12px;
  }

  .order-cat-nav-link{
    min-height:34px;
    padding:0 12px;
    font-size:12px;
  }

  .order-cat{
    scroll-margin-top:calc(var(--headerH) + 68px);
  }

  .order-cart-head{
  min-height:64px;
  padding-right:72px;
}

.order-cart-hero{
  top:-4px;
  right:0;
}

.order-cart-hero-img{
  width:58px;
}

  .order-empty-visual-img{
    width:82px;
    height:82px;
  }

  .order-form-block{
    grid-template-columns:1fr;
  }
}

@media (max-width: 700px){
  .sum-card{
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
  }

  .sum-media{
    width:48px;
    height:48px;
  }

  .order-right-title{
    font-size:24px;
  }

  .order-side-section{
    padding:16px !important;
  }

  .order-items{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .team-grid{
    grid-template-columns:1fr;
  }

  .order-page-title{
    font-size:clamp(32px, 10vw, 46px);
  }
}

/* =========================================================
   DISH / MENU SUPPORT
========================================================= */

.dish-desc,
.menu-desc{
  margin:6px 0 0;
  color:var(--muted);
  font-size:13px;
  line-height:1.45;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.dish-more,
.menu-more{
  margin-top:10px;
  border-top:1px dashed rgba(31,42,36,.14);
  padding-top:10px;
}

.dish-more summary,
.menu-more summary{
  list-style:none;
  cursor:pointer;
  user-select:none;
  display:inline-flex;
  align-items:center;
  gap:8px;
  color:var(--brand);
  font-weight:850;
  font-size:12px;
  letter-spacing:.04em;
  padding:6px 10px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.18);
  background:rgba(31,107,84,.06);
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}

.dish-more summary:hover,
.menu-more summary:hover{
  background:rgba(31,107,84,.10);
  border-color:rgba(31,107,84,.30);
  transform:translateY(-1px);
}

.dish-more summary::-webkit-details-marker,
.menu-more summary::-webkit-details-marker{
  display:none;
}

.dish-more summary::after,
.menu-more summary::after{
  content:"▾";
  font-size:12px;
  line-height:1;
  transition:transform .18s ease;
  transform:translateY(-1px);
}

.dish-more[open] summary::after,
.menu-more[open] summary::after{
  transform:rotate(180deg) translateY(1px);
}

.dish-more .dish-more-body,
.menu-more-body{
  margin-top:10px;
  color:var(--muted);
  font-size:13px;
  line-height:1.5;
}

.menu-more-body b,
.dish-more .dish-more-body b{
  color:var(--text);
}

.info-dot{
  margin-left:8px;
  width:18px;
  height:18px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.88);
  cursor:pointer;
  font-weight:950;
  font-size:12px;
  line-height:16px;
  padding:0;
}

.tooltip{
  margin-top:10px;
  border:1px solid rgba(31,42,36,.12);
  border-radius:14px;
  padding:10px 10px;
  background:rgba(255,255,255,.88);
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
  display:none;
}

.tooltip.show{ display:block; }

/* =========================================================
   LOADER / OVERLAY
========================================================= */

button.is-loading{
  opacity:.9;
  pointer-events:none;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
}

.btn-loader{
  width:16px;
  height:16px;
  border:2px solid rgba(255,255,255,0.3);
  border-top:2px solid #fff;
  border-radius:50%;
  animation:niloSpin .7s linear infinite;
}

@keyframes niloSpin{
  to{ transform:rotate(360deg); }
}

.form-overlay{
  position:fixed;
  inset:0;
  background:rgba(14, 21, 18, 0.85);
  backdrop-filter:blur(6px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:9999;
}

.overlay-content{
  background:#1a231f;
  padding:40px;
  border-radius:18px;
  text-align:center;
  box-shadow:var(--shadow);
}

.overlay-loader{
  width:40px;
  height:40px;
  margin:0 auto 20px;
  border:3px solid rgba(255,255,255,0.2);
  border-top:3px solid var(--brand2);
  border-radius:50%;
  animation:niloSpin .8s linear infinite;
}

.overlay-content p{
  color:rgba(255,255,255,.92);
  font-weight:500;
}

/* =========================================================
   FOOTER
========================================================= */

.site-footer{
  margin-top:72px;
  padding:36px 0 28px;
  background:linear-gradient(180deg, rgba(31,107,84,.08), rgba(31,107,84,.04));
  border-top:1px solid rgba(31,42,36,.10);
}

.site-footer::before{
  content:"";
  display:block;
  height:6px;
  background:linear-gradient(90deg, rgba(31,107,84,0), rgba(31,107,84,.45), rgba(31,107,84,0));
  margin-bottom:18px;
}

.footer-grid{
  display:grid;
  grid-template-columns:1.1fr .9fr;
  gap:22px;
  align-items:start;
}

.footer-brand{
  margin:0 0 8px;
  font-size:38px;
  font-weight:900;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:#1f6b54;
}

.footer-copy{
  margin:0;
  max-width:420px;
  line-height:1.6;
  font-size:15px;
}

.social-row{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

.social-link{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:10px 14px;
  border-radius:999px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.82);
  font-weight:800;
  transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}

.social-link:hover{
  transform:translateY(-1px);
  border-color:rgba(31,107,84,.28);
  box-shadow:0 10px 22px rgba(0,0,0,.06);
}

.social-icon{
  font-size:18px;
  line-height:1;
}

.footer-bottom{
  margin-top:22px;
  padding-top:16px;
  border-top:1px solid rgba(31,42,36,.10);
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
}

.footer-legal{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  color:var(--muted);
  font-size:14px;
  letter-spacing:.01em;
}

.footer-legal a:hover{
  color:var(--text);
}

.footer-dot{
  opacity:.55;
}

.footer-copyright{
  font-size:13px;
}

footer .muted{
  opacity:.9;
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 1100px){
  .order-grid-modern{
    grid-template-columns:1fr 380px;
  }
}

@media (max-width: 980px){
  .section-heading-values{
    margin-bottom:30px;
  }

  .values-kicker-pill{
    min-height:52px;
    padding:0 22px;
    font-size:13px;
    letter-spacing:.14em;
  }

  .values-headline{
    font-size:clamp(34px, 8vw, 56px);
    margin-top:18px;
    margin-bottom:12px;
  }

  .values-subline{
    font-size:clamp(17px, 3.6vw, 24px);
    line-height:1.55;
    max-width:700px;
  }

  .section-kicker{
    min-height:54px;
    padding:0 24px;
    font-size:22px;
    letter-spacing:.12em;
  }

  .section-subline{
    font-size:19px;
  }

  .values-grid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .value-card{
    padding:24px 20px 22px !important;
  }

  .value-media{
    width:210px;
    height:210px;
    margin:10px auto 18px;
  }

  .section-deco-values{
    width:165px;
    left:0;
    top:-64px;
  }

  .section-deco-about{
    width:180px;
    right:0;
    top:-12px;
  }

  .about-card-quote{
    padding:34px 28px !important;
  }

  .about-card-quote::before,
  .about-card-quote::after{
    font-size:84px;
  }

  .about-text{
    font-size:17px;
    line-height:1.8;
  }

  .order-grid-modern{
    grid-template-columns:1fr;
    gap:18px;
    margin-top:6px;
  }

  .order-right{
    position:static;
    margin-top:6px;
  }

  .order-cat-nav-wrap{
    top:calc(var(--headerH) + 6px);
    margin-bottom:12px;
  }

  .order-cat-nav-link{
    min-height:34px;
    padding:0 12px;
    font-size:12px;
  }

  .order-cat{
    scroll-margin-top:calc(var(--headerH) + 68px);
  }

  .order-cart-head{
    min-height:72px;
    padding-right:82px;
  }

  .order-cart-hero{
    top:-8px;
    right:0;
  }

  .order-cart-hero-img{
    width:72px;
  }

  .order-empty-visual-img{
    width:82px;
    height:82px;
  }

  .order-form-block{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .section-wave svg{
    height:72px;
  }

  .section-deco{
    display:block;
    opacity:.92;
    z-index:1;
    filter:drop-shadow(0 10px 22px rgba(0,0,0,.12));
  }

  .section-deco-values{
    width:110px;
    top:-24px;
    left:auto;
    right:10px;
    transform:rotate(6deg);
    --nilo-rot:6deg;
  }

  .section-deco-about{
    width:120px;
    top:-16px;
    right:10px;
    transform:rotate(7deg);
    --nilo-rot:7deg;
  }

  .home-block-soft,
  .home-block-plain{
    padding-top:42px;
    padding-bottom:44px;
  }
}

@media (max-width: 800px){
  .footer-grid{
    grid-template-columns:1fr;
  }

  .footer-bottom{
    align-items:flex-start;
    flex-direction:column;
  }
}

@media (max-width: 700px){
  .sum-card{
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
  }

  .sum-media{
    width:48px;
    height:48px;
  }

  .order-right-title{
    font-size:24px;
  }

  .order-side-section{
    padding:16px;
  }

  .order-items{
    grid-template-columns:1fr;
  }
}

@media (max-width: 640px){
  .menu-img{
    aspect-ratio:1 / 1;
  }

  .section-heading-centered{
    margin-bottom:24px;
  }

  .values-kicker-pill{
    min-height:46px;
    padding:0 18px;
    font-size:12px;
    letter-spacing:.12em;
  }

  .values-headline{
    font-size:clamp(30px, 10vw, 42px);
    line-height:1.02;
  }

  .values-subline{
    font-size:17px;
    line-height:1.6;
  }

  .section-kicker{
    min-height:48px;
    padding:0 18px;
    font-size:18px;
  }

  .section-subline{
    font-size:17px;
  }

   .section-deco-about{
  }

  .value-card-title{
    font-size:28px !important;
  }

  .value-card-text{
    font-size:15px !important;
  }

  .value-media{
    width:188px;
    height:188px;
  }

  .team-grid{
    grid-template-columns:1fr;
  }
}



/* =========================================================
   HOMEPAGE MOBILE IMPROVEMENTS
========================================================= */

@media (max-width: 980px){
  .hero-section-wide{
    padding:14px 0 18px;
  }

  .hero-banner{
    min-height:520px;
    border-radius:24px;
  }

  .hero-banner > img{
    min-height:520px;
  }

  .hero-overlay{
    padding:22px;
    align-items:flex-end;
  }

  .hero-overlay-inner{
    max-width:100%;
  }

  .hero-title-on-image{
    max-width:100%;
    font-size:clamp(34px, 8vw, 52px);
    line-height:0.98;
  }

  .hero-actions-on-image{
    margin-top:18px;
    gap:10px;
  }

  .hero-actions-on-image .btn{
    min-height:48px;
    padding:0 18px;
  }

  .home-order-block{
    padding-top:18px;
  }

  .choice-grid-home{
    grid-template-columns:1fr;
    gap:16px;
  }

  .choice-home{
    grid-template-columns:110px 1fr;
    gap:14px;
    padding:18px 18px 18px 14px;
    min-height:auto;
  }

  .choice-home-content h2{
    font-size:clamp(24px, 5.4vw, 34px);
  }

  .choice-home-content p{
    font-size:14px;
    line-height:1.5;
  }

  .home-block-soft{
    padding-top:44px;
    padding-bottom:46px;
  }

  .home-block-plain{
    padding-top:34px;
    padding-bottom:46px;
  }

  .section-heading-values{
    margin-bottom:24px;
  }

  .values-grid{
    gap:16px;
  }

  .value-card{
    border-radius:22px !important;
    padding:20px 18px !important;
  }

  .value-media{
    width:180px;
    height:180px;
    margin:10px auto 16px;
  }

  .about-card-quote{
    padding:28px 20px !important;
    border-radius:22px;
  }

  .about-card-quote::before{
    top:8px;
    left:14px;
    font-size:62px;
  }

  .about-card-quote::after{
    right:16px;
    bottom:-8px;
    font-size:62px;
  }

  .about-text{
    font-size:16px;
    line-height:1.75;
  }

  .site-footer{
    margin-top:48px;
    padding:28px 0 22px;
  }

  .footer-brand{
    font-size:30px;
  }
}

@media (max-width: 640px){
  body{
    --pad: 14px;
  }

  .hero-banner{
    min-height:430px;
    border-radius:20px;
  }

  .hero-banner > img{
    min-height:430px;
  }

  .hero-overlay{
    padding:16px;
  }

  .hero-title-on-image{
    font-size:clamp(28px, 9vw, 40px);
    line-height:1.02;
  }

  .hero-actions,
.hero-actions-on-image{
  flex-direction:row;
  flex-wrap:wrap;
  gap:10px;
}

.hero-actions-on-image .btn{
  width:auto;
  min-height:44px;
  padding:0 16px;
  font-size:14px;
}

  .choice-home{
    grid-template-columns:1fr;
    text-align:center;
    padding:18px 16px;
  }

  .choice-home-media{
    justify-content:center;
  }

  .choice-home-media img{
    width:108px;
    height:108px;
  }

  .choice-home-content{
    display:flex;
    flex-direction:column;
    align-items:center;
  }

  .choice-home-content h2{
    margin-bottom:6px;
    font-size:clamp(22px, 7vw, 30px);
  }

  .choice-home-content p{
    max-width:100%;
    font-size:14px;
  }

  .section-wave svg{
    height:52px;
  }

  .home-block{
    padding-top:18px;
    padding-bottom:10px;
  }

  .home-block-soft{
    padding-top:28px;
    padding-bottom:34px;
  }

  .home-block-plain{
    padding-top:24px;
    padding-bottom:36px;
  }

  .values-headline{
    font-size:clamp(28px, 9vw, 38px);
    margin-top:14px;
    margin-bottom:10px;
  }

  .values-subline{
    font-size:16px;
    line-height:1.55;
  }

  .value-card-title{
    font-size:24px !important;
  }

  .value-media{
    width:156px;
    height:156px;
  }

  .value-card-text{
    font-size:14px !important;
    line-height:1.6 !important;
  }

  .about-card-quote{
    padding:22px 16px !important;
  }

  .about-card-quote::before,
  .about-card-quote::after{
    font-size:48px;
  }

  .about-text{
    font-size:15px;
    line-height:1.7;
  }

  .footer-grid{
    gap:16px;
  }

  .footer-legal{
    gap:8px;
    font-size:13px;
  }

  .social-link{
    width:100%;
    justify-content:center;
  }
}

@media (max-width: 420px){
  .hero-banner{
    min-height:390px;
  }

  .hero-banner > img{
    min-height:390px;
  }

  .hero-title-on-image{
    font-size:30px;
  }

  .values-kicker-pill{
    min-height:42px;
    padding:0 14px;
    font-size:11px;
    letter-spacing:.1em;
  }

  .section-kicker{
    min-height:42px;
    padding:0 14px;
    font-size:16px;
  }
}

.slot-selected-summary {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 12px;
  background: rgba(255,255,255,0.65);
}

.slot-selected-summary-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.slot-selected-time {
  font-weight: 700;
}

.slot-selected-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  line-height: 1;
  border: 1px solid rgba(0,0,0,0.08);
  background: #fff;
}

.slot-selected-badge.is-available {
  opacity: 0.9;
}

.slot-selected-badge.is-limited {
  background: rgba(255, 193, 7, 0.12);
}

.slot-selected-badge.is-review {
  background: rgba(255, 87, 34, 0.12);
}

.slot-selected-badge.is-full {
  background: rgba(0, 0, 0, 0.06);
}

.slot-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-top: 10px;
}

.slot-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 13px;
  opacity: 0.9;
}

.slot-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display: inline-block;
  background: rgba(0,0,0,0.14);
}

.slot-legend-dot.is-available {
  background: rgba(34, 139, 34, 0.75);
}

.slot-legend-dot.is-limited {
  background: rgba(255, 193, 7, 0.95);
}

.slot-legend-dot.is-review {
  background: rgba(255, 87, 34, 0.95);
}

.slot-legend-dot.is-full {
  background: rgba(0,0,0,0.35);
}
/* =========================================================
   MOBILE CHECKOUT BAR + BOTTOM SHEET
   Desktop blijft onaangeraakt: alles hieronder is mobile-only.
========================================================= */

.mobile-cart-bar,
.mobile-checkout-backdrop,
.mobile-checkout-head,
.mobile-checkout-grip{
  display:none;
}

@media (max-width: 980px){
  body.mobile-cart-active .order-page{
    padding-bottom:calc(108px + env(safe-area-inset-bottom));
  }

  body.mobile-checkout-open{
    overflow:hidden;
    touch-action:none;
  }

  .mobile-cart-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:2400;
    display:block;
    padding:10px 14px calc(10px + env(safe-area-inset-bottom));
    background:linear-gradient(180deg, rgba(244,241,234,0), rgba(244,241,234,.96) 24%, rgba(244,241,234,.98));
    pointer-events:none;
  }

  .mobile-cart-bar-btn{
    pointer-events:auto;
    width:100%;
    min-height:64px;
    border:1px solid rgba(31,107,84,.22);
    border-radius:22px;
    background:linear-gradient(135deg, rgba(31,107,84,.98), rgba(27,91,72,.98));
    color:#fff;
    box-shadow:0 18px 44px rgba(0,0,0,.20);
    display:grid;
    grid-template-columns:auto 1fr auto;
    align-items:center;
    gap:10px;
    padding:0 14px;
    cursor:pointer;
    font:inherit;
    text-align:left;
  }

  .mobile-cart-bar-count{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:34px;
    padding:0 10px;
    border-radius:999px;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.16);
    font-size:13px;
    font-weight:900;
    white-space:nowrap;
  }

  .mobile-cart-bar-total{
    justify-self:start;
    font-size:18px;
    font-weight:950;
    letter-spacing:-.02em;
    white-space:nowrap;
  }

  .mobile-cart-bar-cta{
    justify-self:end;
    min-height:38px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:0 12px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    color:var(--brand);
    font-size:13px;
    font-weight:950;
    white-space:nowrap;
  }

  .mobile-checkout-backdrop{
    position:fixed;
    inset:0;
    z-index:2450;
    display:block;
    border:0;
    padding:0;
    background:rgba(18,24,22,.46);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0;
    pointer-events:none;
    transition:opacity .2s ease;
  }

  .mobile-checkout-backdrop.is-open{
    opacity:1;
    pointer-events:auto;
  }

  .order-right{
    position:fixed !important;
    left:0;
    right:0;
    bottom:0;
    top:auto !important;
    z-index:2500;
    width:100%;
    max-height:min(88dvh, 760px);
    margin:0 !important;
    border-radius:26px 26px 0 0 !important;
    overflow:auto !important;
    -webkit-overflow-scrolling:touch;
    transform:translateY(calc(100% + 24px));
    opacity:0;
    pointer-events:none;
    transition:transform .24s ease, opacity .2s ease;
    box-shadow:0 -22px 70px rgba(0,0,0,.24);
    padding:0 !important;
  }

  .order-right.is-mobile-open{
    transform:translateY(0);
    opacity:1;
    pointer-events:auto;
  }

  .mobile-checkout-grip{
    display:block;
    width:46px;
    height:5px;
    border-radius:999px;
    background:rgba(31,42,36,.18);
    margin:10px auto 4px;
  }

  .mobile-checkout-head{
    position:sticky;
    top:0;
    z-index:4;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:14px;
    padding:10px 16px 12px;
    background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,251,249,.94));
    border-bottom:1px solid rgba(31,42,36,.08);
    backdrop-filter:blur(10px);
    -webkit-backdrop-filter:blur(10px);
  }

  .mobile-checkout-kicker{
    color:var(--muted);
    font-size:12px;
    font-weight:900;
    letter-spacing:.08em;
    text-transform:uppercase;
  }

  .mobile-checkout-title{
    margin:2px 0 0;
    color:var(--brand);
    font-size:22px;
    line-height:1;
    letter-spacing:-.03em;
  }

  .mobile-checkout-close{
    flex:0 0 auto;
    width:46px;
    height:46px;
    border-radius:999px;
    border:1px solid rgba(31,42,36,.12);
    background:rgba(255,255,255,.88);
    color:var(--text);
    font-size:30px;
    line-height:1;
    cursor:pointer;
    display:grid;
    place-items:center;
    padding:0 0 4px;
  }

  .order-side-section{
    padding:16px !important;
  }

  .order-side-section:first-child{
    padding-top:14px !important;
  }

  .order-cart-section .order-side-kicker,
  .order-cart-section .order-cart-head{
    display:none;
  }

  .order-cart-hero{
    top:4px;
    right:14px;
    opacity:.55;
  }

  .order-cart-hero-img{
    width:62px;
  }

  .summary-lines{
    gap:10px;
  }

  .sum-card{
    grid-template-columns:48px minmax(0,1fr);
    gap:10px;
    padding:10px;
  }

  .sum-media{
    width:48px;
    height:48px;
  }

  .qty-pill-btn,
  .sum-remove{
    width:40px;
    height:40px;
  }

  .order-form-block{
    grid-template-columns:1fr !important;
  }

  .order-form input,
  .order-form textarea,
  .order-form select,
  .order-form-grid input,
  .order-form-grid textarea,
  .order-form-grid select,
  .order-opt-select{
    min-height:50px;
    font-size:16px;
  }

  .order-cta-btn{
    min-height:58px;
    font-size:16px;
    border-radius:18px;
  }
}

@media (max-width: 520px){
  .mobile-cart-bar{
    padding-left:10px;
    padding-right:10px;
  }

  .mobile-cart-bar-btn{
    grid-template-columns:1fr auto;
    grid-template-areas:
      "count total"
      "cta cta";
    gap:8px 10px;
    min-height:72px;
    padding:10px 12px;
  }

  .mobile-cart-bar-count{ grid-area:count; justify-self:start; }
  .mobile-cart-bar-total{ grid-area:total; justify-self:end; }
  .mobile-cart-bar-cta{
    grid-area:cta;
    justify-self:stretch;
    width:100%;
  }

  .order-right{
    max-height:90dvh;
    border-radius:22px 22px 0 0 !important;
  }

  .mobile-checkout-head{
    padding-left:14px;
    padding-right:14px;
  }
}


/* =========================================================
   PATCH 2 — MOBILE HEADER / HAMBURGER
   Desktop blijft onaangeraakt. Deze regels starten pas op kleine schermen.
========================================================= */

.nav-toggle-line{
  display:block;
  width:20px;
  height:2px;
  border-radius:999px;
  background:currentColor;
  transition:transform .18s ease, opacity .18s ease;
}

@media (max-width: 760px){
  .site-nav{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px 0;
  }

  .brand{
    gap:10px;
    min-width:0;
  }

  .brand-icon{
    width:44px;
    height:44px;
  }

  .brand-name{
    font-size:clamp(24px, 8vw, 34px);
    letter-spacing:.13em;
  }

  .nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    justify-self:end;
    width:46px;
    height:46px;
    border-radius:16px;
    border:1px solid rgba(31,42,36,.12);
    background:rgba(255,255,255,.80);
    color:var(--text);
    cursor:pointer;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
    transition:background .15s ease, border-color .15s ease, transform .08s ease;
  }

  .nav-toggle:hover{
    background:rgba(255,255,255,.94);
    border-color:rgba(31,107,84,.24);
  }

  .nav-toggle:active{
    transform:translateY(1px);
  }

  .nav-toggle.is-open .nav-toggle-line:nth-child(1){
    transform:translateY(7px) rotate(45deg);
  }

  .nav-toggle.is-open .nav-toggle-line:nth-child(2){
    opacity:0;
  }

  .nav-toggle.is-open .nav-toggle-line:nth-child(3){
    transform:translateY(-7px) rotate(-45deg);
  }

  .nav-links{
    grid-column:1 / -1;
    width:100%;
    display:none;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    gap:8px;
    padding:8px 0 4px;
    flex-wrap:nowrap;
  }

  .nav-links.is-open{
    display:flex;
  }

  .nav-links a{
    width:100%;
    min-height:46px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 14px;
    border-radius:14px;
    border:1px solid rgba(31,42,36,.10);
    background:rgba(255,255,255,.70);
    color:var(--text);
    font-weight:850;
  }

  .nav-links a::after{
    display:none;
  }

  .nav-links a:hover{
    transform:none;
    border-color:rgba(31,107,84,.20);
    background:rgba(255,255,255,.90);
  }

  .nav-links a.active{
    border-color:rgba(31,107,84,.24);
    background:rgba(31,107,84,.08);
    color:var(--brand);
  }

  .lang-dropdown{
    width:100%;
    display:block;
  }

  .lang-current{
    width:100%;
    height:46px;
    justify-content:space-between;
    border-radius:14px;
    background:rgba(255,255,255,.72);
  }

  .lang-menu{
    position:static;
    width:100%;
    margin-top:8px;
    box-shadow:none;
    background:rgba(255,255,255,.72);
    border-radius:14px;
  }

  .lang-menu.open{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }

  .lang-menu button{
    text-align:center;
    min-height:42px;
  }

  .nav-cta{
    width:100%;
    min-height:50px;
    margin-left:0;
    padding:0 18px !important;
    border-radius:16px;
    justify-content:center !important;
    font-size:16px;
  }

  body.mobile-nav-open .site-header{
    box-shadow:0 18px 44px rgba(0,0,0,.12);
    background:rgba(244,241,234,.98);
  }
}

@media (max-width: 420px){
  .brand-icon{
    width:40px;
    height:40px;
  }

  .brand-name{
    font-size:26px;
  }

  .nav-toggle{
    width:44px;
    height:44px;
    border-radius:14px;
  }
}


/* =========================================================
   PATCH 2B REPAIR — PREMIUM MOBILE MENU + HERO POLISH
   Safe override on top of Patch 1 + Patch 2.
========================================================= */

@media (max-width: 760px){
  body.mobile-nav-open{
    overflow:hidden;
    touch-action:none;
  }

  body.mobile-nav-open .site-header{
    box-shadow:0 18px 44px rgba(0,0,0,.12);
    background:rgba(244,241,234,.985);
  }

  .site-nav{
    display:grid;
    grid-template-columns:minmax(0, 1fr) auto;
    align-items:center;
    gap:10px;
    padding:10px 0;
  }

  .brand{
    gap:10px;
    min-width:0;
  }

  .brand-icon{
    width:44px;
    height:44px;
  }

  .brand-name{
    font-size:clamp(24px, 8vw, 34px);
    letter-spacing:.13em;
  }

  .nav-toggle{
    display:inline-flex !important;
    align-items:center;
    justify-content:center;
    flex-direction:column;
    gap:5px;
    justify-self:end;
    width:54px;
    height:54px;
    border-radius:18px;
    border:1px solid rgba(31,42,36,.13);
    background:rgba(255,255,255,.88);
    color:var(--text);
    cursor:pointer;
    box-shadow:
      0 10px 24px rgba(0,0,0,.075),
      inset 0 1px 0 rgba(255,255,255,.78);
    transition:background .15s ease, border-color .15s ease, transform .08s ease, box-shadow .15s ease;
  }

  .nav-toggle:hover{
    background:rgba(255,255,255,.98);
    border-color:rgba(31,107,84,.24);
  }

  .nav-toggle:active{
    transform:translateY(1px);
  }

  .nav-toggle-line{
    display:block;
    width:24px;
    height:2.5px;
    border-radius:999px;
    background:currentColor;
    transition:transform .18s ease, opacity .18s ease;
  }

  .nav-toggle.is-open{
    background:rgba(255,255,255,.96);
    border-color:rgba(31,107,84,.22);
  }

  .nav-toggle.is-open .nav-toggle-line:nth-child(1){
    transform:translateY(7.5px) rotate(45deg);
  }

  .nav-toggle.is-open .nav-toggle-line:nth-child(2){
    opacity:0;
  }

  .nav-toggle.is-open .nav-toggle-line:nth-child(3){
    transform:translateY(-7.5px) rotate(-45deg);
  }

  .nav-links{
    position:fixed;
    top:var(--headerH);
    left:0;
    right:0;
    bottom:0;
    z-index:1001;
    width:100%;
    height:calc(100dvh - var(--headerH));
    display:flex !important;
    flex-direction:column;
    align-items:stretch;
    justify-content:flex-start;
    flex-wrap:nowrap;
    gap:10px;
    padding:16px max(18px, env(safe-area-inset-left)) calc(22px + env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-right));
    margin:0;
    overflow:auto;
    overscroll-behavior:contain;
    background:
      radial-gradient(900px 360px at 14% 0%, rgba(31,107,84,.12), transparent 58%),
      radial-gradient(700px 320px at 100% 18%, rgba(201,164,74,.12), transparent 58%),
      linear-gradient(180deg, rgba(244,241,234,.985), rgba(250,247,240,.975));
    backdrop-filter:blur(16px);
    -webkit-backdrop-filter:blur(16px);
    box-shadow:0 28px 70px rgba(0,0,0,.16);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-10px);
    transition:opacity .20s ease, transform .20s ease, visibility .20s ease;
  }

  .nav-links.is-open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0);
  }

  .nav-links::before{
    content:"";
    display:block;
    width:54px;
    height:5px;
    margin:0 auto 4px;
    border-radius:999px;
    background:rgba(31,42,36,.12);
  }

  .nav-links a{
    width:100%;
    min-height:56px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:0 16px;
    border-radius:18px;
    border:1px solid rgba(31,42,36,.10);
    background:rgba(255,255,255,.74);
    color:var(--text);
    font-size:17px;
    font-weight:900;
    letter-spacing:-.01em;
    box-shadow:
      0 10px 24px rgba(0,0,0,.045),
      inset 0 1px 0 rgba(255,255,255,.62);
  }

  .nav-links a::after{
    display:none !important;
  }

  .nav-links a:hover{
    transform:none;
    background:rgba(255,255,255,.92);
    border-color:rgba(31,107,84,.20);
  }

  .nav-links a.active{
    background:rgba(31,107,84,.08);
    border-color:rgba(31,107,84,.22);
    color:var(--brand);
  }

  .lang-dropdown{
    width:100%;
    display:block;
    margin-top:2px;
  }

  .lang-current{
    width:100%;
    min-height:56px;
    height:56px;
    justify-content:space-between;
    border-radius:18px;
    padding:0 16px;
    background:rgba(255,255,255,.76);
    font-size:17px;
    font-weight:900;
    box-shadow:
      0 10px 24px rgba(0,0,0,.045),
      inset 0 1px 0 rgba(255,255,255,.62);
  }

  .lang-menu{
    position:static;
    width:100%;
    margin-top:8px;
    padding:7px;
    border-radius:18px;
    background:rgba(255,255,255,.72);
    border-color:rgba(31,42,36,.09);
    box-shadow:none;
  }

  .lang-menu.open{
    display:grid;
    grid-template-columns:repeat(3, 1fr);
  }

  .lang-menu button{
    text-align:center;
    min-height:42px;
    border-radius:13px;
    font-weight:900;
  }

  .nav-links .nav-cta{
    width:100%;
    margin:6px 0 0;
    min-height:60px;
    border:none;
    border-radius:20px;
    background:linear-gradient(135deg, #d89a2b, #b97d18);
    color:#fff !important;
    font-size:17px;
    font-weight:950 !important;
    box-shadow:0 18px 36px rgba(185,125,24,.28);
    justify-content:center;
    text-align:center;
  }

  .nav-links .nav-cta:hover,
  .nav-links .nav-cta.active{
    background:linear-gradient(135deg, #c78418, #9f6210);
    color:#fff !important;
    border:none;
  }
}

@media (max-width: 640px){
  .hero-overlay{
    padding:18px 18px 38px;
    align-items:flex-end;
    background:
      linear-gradient(
        180deg,
        rgba(12,24,19,.10) 0%,
        rgba(12,24,19,.06) 34%,
        rgba(12,24,19,.42) 100%
      );
  }

  .hero-overlay-inner{
    transform:translateY(-10px);
  }

  .hero-title-on-image{
    max-width:94%;
    font-size:clamp(30px, 8.8vw, 42px);
    line-height:1.02;
    letter-spacing:-.035em;
    text-shadow:0 10px 24px rgba(0,0,0,.36);
  }

  .hero-actions-on-image{
    margin-top:14px;
  }

  .hero-actions-on-image .btn{
    min-height:46px;
    padding:0 17px;
    border-radius:16px;
    font-size:14px;
  }
}

@media (max-width: 420px){
  .brand-icon{
    width:40px;
    height:40px;
  }

  .brand-name{
    font-size:26px;
  }

  .nav-toggle{
    width:52px;
    height:52px;
    border-radius:17px;
  }

  .nav-links{
    gap:9px;
    padding-top:14px;
  }

  .nav-links a,
  .lang-current{
    min-height:54px;
    height:54px;
    border-radius:17px;
    font-size:16px;
  }

  .nav-links .nav-cta{
    min-height:58px;
  }

  .hero-overlay{
    padding:16px 16px 34px;
  }

  .hero-overlay-inner{
    transform:translateY(-8px);
  }
}


/* =========================================================
   PATCH 3 — MOBILE ORDER POLISH + LIGHT PERFORMANCE
   Small, mobile-focused refinements. Desktop layout remains unchanged.
========================================================= */

.order-item.is-in-cart{
  border-color:rgba(31,107,84,.24);
  box-shadow:0 18px 42px rgba(31,107,84,.09);
}

.order-item.is-in-cart::before{
  content:"";
  display:block;
  height:4px;
  margin:-16px -16px 12px;
  border-radius:22px 22px 0 0;
  background:linear-gradient(90deg, rgba(31,107,84,.18), rgba(31,107,84,.58), rgba(201,164,74,.32));
}

.order-item-img,
.sum-media img,
.order-empty-visual-img,
.order-cart-hero-img{
  image-rendering:auto;
}

@media (max-width: 980px){
  .order-page{
    padding-top:8px;
  }

  .order-infobars{
    gap:12px;
  }

  .order-infobar{
    border-radius:20px;
    padding:14px 16px;
    background:rgba(255,255,255,.76);
    box-shadow:0 10px 24px rgba(0,0,0,.045);
  }

  .order-infobar-title{
    font-size:15px;
    letter-spacing:-.01em;
  }

  .order-infobar-text{
    font-size:14px;
    line-height:1.55;
  }

  .order-cat-nav-wrap{
    margin:12px -14px 16px;
    padding:8px 14px 8px;
    overflow:hidden;
  }

  .order-cat-nav-wrap::before,
  .order-cat-nav-wrap::after{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    width:24px;
    z-index:2;
    pointer-events:none;
  }

  .order-cat-nav-wrap::before{
    left:0;
    background:linear-gradient(90deg, rgba(244,241,234,.98), rgba(244,241,234,0));
  }

  .order-cat-nav-wrap::after{
    right:0;
    background:linear-gradient(270deg, rgba(244,241,234,.98), rgba(244,241,234,0));
  }

  .order-cat-nav{
    gap:9px;
    padding:3px 10px 7px 4px;
    scroll-snap-type:x proximity;
  }

  .order-cat-nav-link{
    scroll-snap-align:start;
    min-height:44px;
    padding:0 17px;
    border-radius:999px;
    background:rgba(255,255,255,.92);
    box-shadow:0 10px 24px rgba(0,0,0,.055);
    font-size:14px;
    font-weight:950;
  }

  .order-cat-nav-link.is-active{
    background:linear-gradient(135deg, rgba(31,107,84,.14), rgba(31,107,84,.08));
    box-shadow:0 10px 24px rgba(31,107,84,.10);
  }

  .order-cat-title{
    font-size:clamp(28px, 8vw, 38px);
    margin-bottom:4px;
  }

  .order-items{
    gap:18px;
  }

  .order-item{
    border-radius:26px;
    padding:18px;
    box-shadow:0 16px 38px rgba(0,0,0,.065);
  }

  .order-item.is-in-cart::before{
    margin:-18px -18px 14px;
    border-radius:26px 26px 0 0;
  }

  .order-item-top{
    gap:14px;
  }

  .order-item-title{
    font-size:clamp(18px, 4.7vw, 23px);
    line-height:1.08;
    letter-spacing:-.025em;
  }

  .order-price-pill{
    padding:8px 12px;
    font-size:13px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.55);
  }

  .order-item-img,
  .order-item-img.ph{
    width:96px;
    height:96px;
    border-radius:20px;
  }

  .order-item-desc{
    margin-top:10px;
    font-size:14px;
    line-height:1.55;
  }

  .order-item-badges{
    margin-top:10px;
  }

  .order-badge{
    min-height:28px;
    padding:5px 10px;
    font-size:12px;
  }

  .order-options{
    gap:10px;
  }

  .order-qty-row{
    margin-top:18px;
    padding-top:12px;
    border-top:1px dashed rgba(31,42,36,.10);
  }

  .order-qty-label{
    font-size:13px;
  }

  .order-item .qty{
    padding:5px;
    gap:10px;
  }

  .order-item .qty-btn{
    width:44px;
    height:44px;
    font-size:20px;
  }

  .order-item .qty-value{
    min-width:26px;
    font-size:16px;
  }

  .order-item-add{
    min-height:46px;
    padding:0 18px;
    font-size:14px;
  }
}

@media (max-width: 640px){
  .order-page-title{
    font-size:clamp(34px, 12vw, 44px);
    line-height:.94;
    margin:8px auto 12px;
    max-width:11ch;
  }

  .order-page-kicker{
    min-height:34px;
    padding:0 14px;
    font-size:11px;
  }

  .order-cat{
    margin-top:18px;
  }

  .order-cat-title{
    font-size:clamp(26px, 8.4vw, 34px);
  }

  .order-item{
    padding:16px;
    border-radius:24px;
  }

  .order-item.is-in-cart::before{
    margin:-16px -16px 13px;
    border-radius:24px 24px 0 0;
  }

  .order-item-top{
    align-items:flex-start;
  }

  .order-item-img,
  .order-item-img.ph{
    width:88px;
    height:88px;
    border-radius:18px;
  }

  .order-price-pill{
    padding:7px 10px;
    font-size:12px;
  }

  .order-item-desc{
    font-size:13.5px;
  }

  .order-cat-nav-link{
    min-height:42px;
    padding:0 15px;
    font-size:13px;
  }
}

@media (max-width: 430px){
  .order-infobar{
    padding:13px 14px;
  }

  .order-item-top{
    gap:12px;
  }

  .order-item-img,
  .order-item-img.ph{
    width:82px;
    height:82px;
  }

  .order-item-title-row{
    gap:8px;
  }

  .order-item-title{
    font-size:20px;
  }

  .order-price-pill{
    transform:translateY(-2px);
  }
}



/* =========================================================
   PATCH 4 — LIGHT PERFORMANCE + TABLET POLISH
   Safe CSS-only refinements on top of Patch 3.
========================================================= */

img{
  max-width:100%;
}

@media (min-width: 701px) and (max-width: 980px){
  .order-items{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .order-item{
    min-height:100%;
  }

  .order-item-top{
    flex-direction:column;
  }

  .order-item-img,
  .order-item-img.ph{
    width:100%;
    height:auto;
    aspect-ratio:1 / 1;
  }

  .order-price-pill{
    align-self:flex-start;
  }
}

@media (max-width: 760px){
  .site-header,
  .nav-links,
  .mobile-checkout-head{
    -webkit-backface-visibility:hidden;
    backface-visibility:hidden;
  }
}

@media (prefers-reduced-motion: reduce){
  *,
  *::before,
  *::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
}


/* =========================================================
   PATCH 5 — HOMEPAGE IMAGE PERFORMANCE + HERO STABILITY
   Safe CSS-only additions for <picture> hero and CLS prevention.
========================================================= */

.hero-banner > picture{
  display:block;
  width:100%;
  height:100%;
  min-height:690px;
}

.hero-banner > picture > img{
  width:100%;
  height:100%;
  min-height:690px;
  object-fit:cover;
  display:block;
}

.choice-home-media,
.value-media{
  contain:layout paint;
}

.choice-home-media img,
.value-media img{
  content-visibility:auto;
}

@media (max-width: 1100px){
  .hero-banner > picture,
  .hero-banner > picture > img{
    min-height:600px;
  }
}

@media (max-width: 900px){
  .hero-banner > picture,
  .hero-banner > picture > img{
    min-height:470px;
  }
}

@media (max-width: 640px){
  .hero-banner > picture,
  .hero-banner > picture > img{
    min-height:430px;
  }

  .hero-banner > picture > img{
    object-position:center center;
  }
}

@media (max-width: 420px){
  .hero-banner > picture,
  .hero-banner > picture > img{
    min-height:390px;
  }
}


/* =========================================================
   HOMEPAGE REFRESH — THE NILO WAY
   Added safely as an override layer. Existing order/admin/payment
   logic is untouched.
========================================================= */
:root{
  --nilo-serif: "Cormorant Garamond", Georgia, "Times New Roman", serif;
}

.nilo-way-hero{
  position:relative;
  padding:clamp(46px, 6vw, 86px) 0 26px;
  overflow:hidden;
  background:
    radial-gradient(900px 520px at 10% 16%, rgba(31,107,84,.08), transparent 58%),
    radial-gradient(760px 420px at 80% 8%, rgba(201,164,74,.07), transparent 62%);
}

.nilo-way-hero::before{
  content:"";
  position:absolute;
  left:-80px;
  top:12px;
  width:360px;
  height:360px;
  opacity:.16;
  filter:blur(5px);
  pointer-events:none;
  background-repeat:no-repeat;
  background-size:contain;
  background-image:url("data:image/svg+xml,%3Csvg width='360' height='360' viewBox='0 0 360 360' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' stroke='%231f6b54' stroke-width='9' stroke-linecap='round' stroke-linejoin='round' opacity='.70'%3E%3Cpath d='M64 252 C116 212 160 160 194 88'/%3E%3Cpath d='M116 202 C70 190 42 158 36 113 C84 117 117 144 134 184'/%3E%3Cpath d='M166 144 C116 118 93 72 103 28 C149 48 177 82 182 130'/%3E%3Cpath d='M206 102 C230 58 274 36 323 42 C306 86 266 115 218 116'/%3E%3Cpath d='M151 181 C193 184 228 205 251 242 C205 254 166 231 145 195'/%3E%3C/g%3E%3C/svg%3E");
}

.nilo-way-shell{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(420px, 610px);
  gap:clamp(30px, 5vw, 74px);
  align-items:center;
  min-height:640px;
}

.nilo-way-copy{
  max-width:700px;
  padding-left:clamp(0px, 1.8vw, 28px);
}

.nilo-kicker{
  display:inline-flex;
  align-items:center;
  gap:12px;
  margin-bottom:20px;
  color:#b98218;
  font-weight:950;
  letter-spacing:.20em;
  text-transform:uppercase;
  font-size:14px;
}

.nilo-kicker::before{
  content:"✣";
  font-size:17px;
  line-height:1;
  color:#d39b26;
}

.nilo-way-title{
  margin:0;
  color:var(--brand);
  font-family:var(--nilo-serif);
  font-size:clamp(58px, 6.3vw, 96px);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.055em;
  text-wrap:balance;
}

.nilo-way-title em{
  font-style:italic;
  font-weight:600;
  letter-spacing:-.045em;
}

.nilo-way-lead,
.nilo-way-note{
  max-width:610px;
  font-size:18px;
  line-height:1.78;
  color:rgba(31,42,36,.88);
}

.nilo-way-lead{
  margin:28px 0 0;
}

.nilo-way-note{
  margin:14px 0 0;
  color:rgba(92,107,98,.96);
}

.nilo-way-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

.nilo-way-media{
  position:relative;
  border-radius:32px;
  overflow:hidden;
  min-height:640px;
  border:1px solid rgba(31,42,36,.12);
  box-shadow:0 24px 70px rgba(0,0,0,.13);
  background:rgba(255,255,255,.52);
}

.nilo-way-media img{
  width:100%;
  height:100%;
  min-height:640px;
  object-fit:cover;
  display:block;
}

.nilo-order-after-hero{
  padding-top:20px;
  padding-bottom:34px;
}

.nilo-values-strip{
  padding:74px 0 56px;
  background:linear-gradient(180deg, rgba(252,251,248,.68), rgba(244,241,234,.95));
  overflow:hidden;
}

.nilo-values-heading{
  max-width:800px;
  margin:0 0 28px;
}

.nilo-values-heading h2,
.nilo-section-title,
.nilo-how-intro h2,
.nilo-contact-card h2{
  color:var(--brand);
  font-family:var(--nilo-serif);
  font-size:clamp(42px, 5vw, 72px);
  line-height:.96;
  letter-spacing:-.045em;
  margin:0 0 12px;
}

.nilo-values-heading p,
.nilo-section-lead,
.nilo-how-intro p,
.nilo-contact-card p{
  font-size:17px;
  line-height:1.7;
}

.nilo-value-pills{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:0;
  align-items:center;
  margin:26px 0 34px;
  border-top:1px solid rgba(31,42,36,.10);
  border-bottom:1px solid rgba(31,42,36,.10);
}

.nilo-value-pill{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:12px;
  min-height:86px;
  padding:16px 18px;
  color:var(--brand);
  font-weight:900;
  text-align:center;
  border-right:1px solid rgba(31,42,36,.10);
}

.nilo-value-pill:last-child{ border-right:none; }

.nilo-pill-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.18);
  background:rgba(255,255,255,.66);
  box-shadow:0 10px 22px rgba(0,0,0,.05);
  font-size:18px;
}

.nilo-visual-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:16px;
}

.nilo-visual-card{
  margin:0;
  border-radius:24px;
  overflow:hidden;
  border:1px solid rgba(31,42,36,.12);
  box-shadow:0 18px 38px rgba(0,0,0,.10);
  background:#fff;
  min-height:310px;
}

.nilo-visual-card img{
  width:100%;
  height:100%;
  min-height:310px;
  object-fit:cover;
  display:block;
}

.nilo-info-bar{
  width:min(920px, 100%);
  margin:26px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:0;
  border:1px solid rgba(31,42,36,.12);
  border-radius:999px;
  background:rgba(255,255,255,.70);
  box-shadow:0 12px 28px rgba(0,0,0,.05);
  overflow:hidden;
}

.nilo-info-bar span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:58px;
  padding:0 28px;
  color:rgba(31,42,36,.88);
  border-right:1px solid rgba(31,42,36,.10);
  text-align:center;
}

.nilo-info-bar span:last-child{ border-right:none; }

.nilo-how-section{
  padding:72px 0;
  background:linear-gradient(180deg, rgba(255,255,255,.80), rgba(252,251,248,.96));
}

.nilo-how-grid{
  display:grid;
  grid-template-columns:minmax(280px, 420px) 1fr;
  gap:42px;
  align-items:start;
}

.nilo-how-steps{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
}

.nilo-step-card{
  position:relative;
  min-height:280px;
  padding:30px 24px 26px;
  border-radius:28px;
  border:1px solid rgba(31,107,84,.15);
  background:
    radial-gradient(480px 200px at 10% 0%, rgba(31,107,84,.08), transparent 58%),
    rgba(255,255,255,.88);
  box-shadow:0 16px 34px rgba(0,0,0,.07);
}

.nilo-step-number{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:56px;
  height:56px;
  border-radius:999px;
  margin-bottom:22px;
  background:linear-gradient(180deg, rgba(255,250,242,.96), rgba(244,241,234,.96));
  border:1px solid rgba(201,164,74,.32);
  color:var(--brand);
  font-size:28px;
  font-weight:900;
}

.nilo-step-card h3{
  color:var(--brand);
  font-size:24px;
  line-height:1.05;
  margin:0 0 12px;
}

.nilo-step-card p{
  margin:0;
  line-height:1.68;
}

.nilo-menu-preview{
  padding:70px 0 64px;
  background:var(--bg);
}

.nilo-menu-cards{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:20px;
}

.nilo-menu-card{
  display:block;
  overflow:hidden;
  border-radius:26px;
  border:1px solid rgba(31,42,36,.12);
  background:rgba(255,255,255,.86);
  box-shadow:0 16px 34px rgba(0,0,0,.07);
  transition:transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.nilo-menu-card:hover{
  transform:translateY(-2px);
  border-color:rgba(31,107,84,.24);
  box-shadow:0 22px 48px rgba(0,0,0,.10);
}

.nilo-menu-card img{
  width:100%;
  height:220px;
  object-fit:cover;
  display:block;
  background:rgba(31,107,84,.06);
}

.nilo-menu-card h3{
  margin:20px 20px 8px;
  color:var(--brand);
  font-size:24px;
}

.nilo-menu-card p{
  margin:0 20px 22px;
  line-height:1.58;
}

.nilo-centered-action{
  text-align:center;
  margin-top:24px;
}

.nilo-short-section{
  padding-top:64px;
  padding-bottom:68px;
}

.nilo-contact-cta{
  padding:18px 0 80px;
  background:linear-gradient(180deg, rgba(252,251,249,.92), rgba(244,241,234,1));
}

.nilo-contact-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  padding:36px;
  border-radius:30px;
  border:1px solid rgba(31,107,84,.16);
  background:
    radial-gradient(600px 240px at 10% 0%, rgba(31,107,84,.09), transparent 58%),
    radial-gradient(600px 240px at 100% 100%, rgba(201,164,74,.09), transparent 58%),
    rgba(255,255,255,.86);
  box-shadow:0 18px 42px rgba(0,0,0,.08);
}

.nilo-contact-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

@media (max-width: 1100px){
  .nilo-way-shell{
    grid-template-columns:1fr;
    min-height:auto;
  }

  .nilo-way-copy{
    max-width:780px;
  }

  .nilo-way-media,
  .nilo-way-media img{
    min-height:460px;
  }

  .nilo-how-grid{
    grid-template-columns:1fr;
  }
}

@media (max-width: 900px){
  .nilo-way-hero{
    padding-top:34px;
  }

  .nilo-way-title{
    font-size:clamp(48px, 14vw, 72px);
  }

  .nilo-way-lead,
  .nilo-way-note{
    font-size:16px;
    line-height:1.7;
  }

  .nilo-way-media,
  .nilo-way-media img{
    min-height:360px;
  }

  .nilo-value-pills,
  .nilo-visual-grid,
  .nilo-how-steps,
  .nilo-menu-cards{
    grid-template-columns:1fr;
  }

  .nilo-value-pills{
    border:1px solid rgba(31,42,36,.10);
    border-radius:24px;
    overflow:hidden;
    background:rgba(255,255,255,.48);
  }

  .nilo-value-pill{
    justify-content:flex-start;
    border-right:none;
    border-bottom:1px solid rgba(31,42,36,.10);
    min-height:72px;
  }

  .nilo-value-pill:last-child{ border-bottom:none; }

  .nilo-info-bar{
    flex-direction:column;
    border-radius:24px;
  }

  .nilo-info-bar span{
    width:100%;
    min-height:50px;
    border-right:none;
    border-bottom:1px solid rgba(31,42,36,.10);
  }

  .nilo-info-bar span:last-child{ border-bottom:none; }

  .nilo-contact-card{
    grid-template-columns:1fr;
    padding:26px;
  }

  .nilo-contact-actions{
    justify-content:flex-start;
  }
}

@media (max-width: 640px){
  .nilo-way-shell{
    gap:24px;
  }

  .nilo-way-media,
  .nilo-way-media img{
    min-height:300px;
    border-radius:24px;
  }

  .nilo-way-actions .btn,
  .nilo-contact-actions .btn{
    width:100%;
    text-align:center;
    justify-content:center;
  }

  .nilo-values-strip,
  .nilo-how-section,
  .nilo-menu-preview{
    padding-top:52px;
    padding-bottom:52px;
  }

  .nilo-visual-card,
  .nilo-visual-card img{
    min-height:240px;
  }

  .nilo-step-card{
    min-height:auto;
  }
}

/* =========================================================
   HOMEPAGE REFRESH V2 — requested refinements
   - hero kicker + duplicate hero CTAs removed in markup
   - NILO in short moved into hero
   - values intro copy moved below values title
   - values icons replaced by mature line icons
========================================================= */
.nilo-short-inline{
  max-width:640px;
  margin-top:30px;
  padding:24px 28px;
  border-radius:28px;
  border:1px solid rgba(31,107,84,.12);
  background:
    radial-gradient(620px 180px at 10% 0%, rgba(31,107,84,.07), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.76), rgba(252,250,246,.72));
  box-shadow:0 16px 34px rgba(0,0,0,.055);
}

.nilo-short-inline-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:34px;
  padding:0 14px;
  margin-bottom:12px;
  border-radius:999px;
  border:1px solid rgba(201,164,74,.30);
  background:rgba(255,250,242,.82);
  color:#8f6a18;
  font-size:12px;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.nilo-short-inline-text{
  margin:0;
  color:rgba(31,42,36,.86);
  font-size:18px;
  line-height:1.72;
}

.nilo-values-copy{
  max-width:760px;
  margin:18px 0 0;
}

.nilo-values-copy p{
  margin:0;
  max-width:760px;
  color:rgba(31,42,36,.84);
  font-size:17px;
  line-height:1.75;
}

.nilo-values-copy p + p{
  margin-top:10px;
  color:rgba(92,107,98,.96);
}

.nilo-pill-icon{
  color:var(--brand);
}

.nilo-pill-icon svg{
  width:25px;
  height:25px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nilo-value-pill{
  gap:14px;
}

@media (max-width: 900px){
  .nilo-short-inline{
    margin-top:24px;
    padding:20px 22px;
  }

  .nilo-short-inline-text,
  .nilo-values-copy p{
    font-size:16px;
    line-height:1.68;
  }
}

@media (max-width: 640px){
  .nilo-short-inline{
    border-radius:22px;
    padding:18px;
  }
}

/* =========================================================
   HOMEPAGE REFRESH V3 — final visual refinements
   - removed duplicated order choice cards from homepage markup
   - added larger professional icons to value strip
   - added icon row to practical info bar
   - added process icons next to step numbers
========================================================= */
.nilo-values-strip{
  padding-top:56px;
}

.nilo-value-pill{
  min-height:96px;
  gap:16px;
}

.nilo-pill-icon{
  width:52px;
  height:52px;
  border-color:rgba(31,107,84,.22);
  background:rgba(255,255,255,.78);
}

.nilo-pill-icon svg{
  width:31px;
  height:31px;
  stroke-width:2.05;
}

.nilo-info-bar{
  width:min(980px, 100%);
  margin:28px auto 0;
  background:linear-gradient(180deg, rgba(255,250,242,.88), rgba(244,241,234,.82));
  border-color:rgba(201,164,74,.22);
}

.nilo-info-bar > span{
  gap:14px;
  min-height:66px;
  padding:0 34px;
}

.nilo-info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:42px;
  height:42px;
  flex:0 0 auto;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.18);
  background:rgba(255,255,255,.78);
  color:var(--brand);
  box-shadow:0 9px 18px rgba(0,0,0,.045);
}

.nilo-info-icon svg,
.nilo-step-icon svg{
  width:26px;
  height:26px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nilo-step-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.nilo-step-number{
  margin-bottom:0;
}

.nilo-step-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:58px;
  height:58px;
  flex:0 0 auto;
  color:var(--brand);
}

.nilo-step-icon svg{
  width:50px;
  height:50px;
  stroke-width:2.05;
}

@media (max-width: 900px){
  .nilo-value-pill{
    min-height:78px;
  }

  .nilo-info-bar > span{
    justify-content:flex-start;
    padding:0 20px;
    min-height:58px;
  }
}

@media (max-width: 640px){
  .nilo-step-head{
    gap:14px;
  }

  .nilo-step-icon{
    width:50px;
    height:50px;
  }

  .nilo-step-icon svg{
    width:44px;
    height:44px;
  }
}


/* =========================================================
   PATCH 6 — Homepage CTA + icon repair
   Safe homepage-only visual refinements.
========================================================= */
.nilo-short-actions{
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  margin-top:22px;
}

.nilo-short-actions .btn{
  margin-top:0;
}

.nilo-short-btn{
  min-width:136px;
  min-height:54px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 24px;
  border-radius:20px;
  font-weight:950;
}

.nilo-short-actions .btn.secondary{
  background:rgba(255,255,255,.86);
  border-color:rgba(31,42,36,.14);
  box-shadow:0 12px 26px rgba(0,0,0,.06);
}

.nilo-short-actions .btn.secondary:hover{
  border-color:rgba(31,107,84,.24);
  box-shadow:0 14px 30px rgba(0,0,0,.075);
}

/* Restrict the info-bar layout styles to direct items only.
   This prevents nested icon/text spans from inheriting large padding
   and accidentally hiding the SVG icons. */
.nilo-info-bar > span{
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:66px;
  padding:0 34px;
  color:rgba(31,42,36,.88);
  border-right:1px solid rgba(31,42,36,.10);
  text-align:center;
}

.nilo-info-bar > span:last-child{
  border-right:none;
}

.nilo-info-bar .nilo-info-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  min-height:44px;
  padding:0;
  flex:0 0 44px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.18);
  background:rgba(255,255,255,.82);
  color:var(--brand);
  box-shadow:0 9px 18px rgba(0,0,0,.045);
}

.nilo-info-bar .nilo-info-icon svg{
  width:26px;
  height:26px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.15;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.nilo-info-bar > span > span:not(.nilo-info-icon),
.nilo-info-bar > span > strong{
  min-height:0;
  padding:0;
  border-right:0;
}

.nilo-step-head{
  display:flex;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}

.nilo-step-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  flex:0 0 60px;
  color:var(--brand);
}

.nilo-step-icon svg{
  width:52px;
  height:52px;
  display:block;
  fill:none;
  stroke:currentColor;
  stroke-width:2.05;
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}

.nilo-step-number{
  flex:0 0 56px;
}

@media (max-width: 900px){
  .nilo-info-bar > span{
    justify-content:flex-start;
    width:100%;
    min-height:58px;
    padding:0 20px;
    border-right:none;
    border-bottom:1px solid rgba(31,42,36,.10);
  }

  .nilo-info-bar > span:last-child{
    border-bottom:none;
  }
}

@media (max-width: 640px){
  .nilo-short-actions{
    gap:10px;
  }

  .nilo-short-btn{
    flex:1 1 140px;
    min-width:0;
    min-height:50px;
    padding:0 18px;
  }

  .nilo-step-icon{
    width:52px;
    height:52px;
    flex-basis:52px;
  }

  .nilo-step-icon svg{
    width:46px;
    height:46px;
  }
}

/* =========================================================
   CONTACT PAGE V2 — Contact & aanvragen
========================================================= */

.contact-page-v2{
  padding-top:0;
  padding-bottom:34px;
}

.contact-hero-v2{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(360px, 520px);
  gap:42px;
  align-items:center;
  padding-top:68px;
  padding-bottom:34px;
}

.contact-kicker-v2{
  margin:0 0 16px;
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#b77b17;
  font-size:14px;
  font-weight:950;
  letter-spacing:.22em;
  text-transform:uppercase;
}

.contact-kicker-v2::before{
  content:"✣";
  font-size:17px;
  color:#d89a2b;
}

.contact-hero-title-v2{
  margin:0;
  max-width:720px;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size:clamp(52px, 6.6vw, 88px);
  line-height:.92;
  letter-spacing:-.055em;
  font-weight:700;
}

.contact-hero-lead-v2{
  margin:22px 0 0;
  max-width:720px;
  color:rgba(31,42,36,.78);
  font-size:clamp(17px, 1.45vw, 20px);
  line-height:1.65;
}

.contact-hero-art-v2{
  justify-self:end;
  width:100%;
  max-width:520px;
  min-height:260px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.contact-hero-art-v2 img{
  width:100%;
  height:auto;
  display:block;
  object-fit:contain;
  filter:drop-shadow(0 20px 34px rgba(16,38,30,.11));
}

.contact-choice-section-v2{
  margin-top:4px;
}

.contact-choice-grid-v2{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:22px;
}

.contact-choice-card-v2{
  min-height:300px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  text-align:center;
  padding:34px 30px 28px;
  border-radius:24px;
  border:1px solid rgba(31,42,36,.12);
  background:
    radial-gradient(680px 220px at 50% 0%, rgba(31,107,84,.055), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,251,248,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.065);
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease, background .2s ease;
}

.contact-choice-card-v2:hover,
.contact-choice-card-v2.is-active{
  transform:translateY(-3px);
  border-color:rgba(31,107,84,.26);
  box-shadow:0 24px 56px rgba(0,0,0,.10);
}

.contact-choice-card-v2.is-active{
  background:
    radial-gradient(760px 230px at 50% 0%, rgba(31,107,84,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.97), rgba(248,250,247,.98));
}

.contact-choice-icon-v2{
  width:78px;
  height:78px;
  margin-bottom:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(31,107,84,.08);
  color:var(--brand);
}

.contact-choice-icon-v2 svg,
.contact-method-icon-v2 svg,
.contact-response-icon-v2 svg,
.contact-step-icon-v2 svg{
  width:32px;
  height:32px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}

.contact-choice-card-v2 h2{
  margin:0 0 14px;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size:clamp(28px, 2.6vw, 38px);
  line-height:1;
  letter-spacing:-.035em;
}

.contact-choice-card-v2 p{
  margin:0 auto;
  max-width:290px;
  color:rgba(31,42,36,.72);
  font-size:15px;
  line-height:1.62;
}

.contact-choice-cta-v2{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  min-height:48px;
  margin-top:auto;
  padding:0 20px;
  border-radius:14px;
  background:linear-gradient(135deg, rgba(31,107,84,.96), rgba(31,107,84,.86));
  color:#fff;
  font-size:14px;
  font-weight:900;
  box-shadow:0 16px 30px rgba(31,107,84,.18);
}

.contact-main-grid-v2{
  display:grid;
  grid-template-columns:minmax(290px, 420px) minmax(0, 1fr);
  gap:22px;
  margin-top:28px;
}

.contact-panel-v2{
  border-radius:24px;
  border:1px solid rgba(31,42,36,.12);
  background:
    radial-gradient(720px 250px at 0% 0%, rgba(31,107,84,.06), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,251,248,.98));
  box-shadow:0 16px 38px rgba(0,0,0,.06);
  padding:30px;
}

.contact-panel-v2 h2,
.contact-workflow-card-v2 h2{
  margin:0;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size:clamp(30px, 3vw, 40px);
  line-height:1;
  letter-spacing:-.035em;
}

.contact-title-line-v2{
  width:42px;
  height:2px;
  margin:18px 0 24px;
  background:var(--brand);
  border-radius:999px;
}

.contact-method-list-v2{
  display:grid;
  gap:14px;
}

.contact-method-v2{
  display:grid;
  grid-template-columns:50px minmax(0, 1fr) 18px;
  align-items:center;
  gap:14px;
  min-height:76px;
  padding:12px 14px;
  border-radius:16px;
  border:1px solid rgba(31,42,36,.10);
  background:rgba(255,255,255,.72);
  transition:transform .16s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}

.contact-method-v2:hover{
  transform:translateY(-2px);
  border-color:rgba(31,107,84,.24);
  background:rgba(255,255,255,.92);
  box-shadow:0 14px 30px rgba(0,0,0,.07);
}

.contact-method-icon-v2{
  width:50px;
  height:50px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.14);
  background:rgba(31,107,84,.05);
  color:var(--brand);
}

.contact-method-icon-v2 svg{
  width:29px;
  height:29px;
}

.contact-method-v2 strong{
  display:block;
  color:var(--brand);
  font-size:16px;
  line-height:1.2;
}

.contact-method-v2 small{
  display:block;
  margin-top:4px;
  color:rgba(31,42,36,.72);
  font-size:14px;
  line-height:1.35;
}

.contact-method-arrow-v2{
  color:rgba(31,42,36,.55);
  font-size:30px;
  line-height:1;
}

.contact-response-note-v2{
  display:grid;
  grid-template-columns:36px minmax(0, 1fr);
  gap:14px;
  align-items:start;
  margin-top:26px;
  padding:18px;
  border-radius:16px;
  background:rgba(244,241,234,.70);
  border:1px solid rgba(31,42,36,.08);
}

.contact-response-icon-v2{
  color:var(--brand);
}

.contact-response-icon-v2 svg{
  width:30px;
  height:30px;
}

.contact-response-note-v2 p{
  margin:0;
  color:rgba(31,42,36,.72);
  font-size:13px;
  line-height:1.55;
}

.contact-form-panel-v2{
  background:
    radial-gradient(780px 260px at 100% 0%, rgba(201,164,74,.07), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,251,248,.98));
}

.contact-form-panel-v2{
  scroll-margin-top:calc(var(--headerH) + 22px);
}

.contact-selected-notice-v2{
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  gap:14px;
  align-items:start;
  margin:-4px 0 22px;
  padding:16px 18px;
  border-radius:18px;
  border:1px solid rgba(31,107,84,.22);
  background:
    radial-gradient(520px 160px at 0% 0%, rgba(31,107,84,.12), transparent 58%),
    linear-gradient(180deg, rgba(244,249,246,.98), rgba(238,247,241,.96));
  box-shadow:0 14px 30px rgba(31,107,84,.075);
}

.contact-selected-icon-v2{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-weight:950;
  box-shadow:0 12px 22px rgba(31,107,84,.18);
}

.contact-selected-notice-v2 strong{
  display:block;
  color:var(--brand);
  font-size:16px;
  line-height:1.25;
}

.contact-selected-notice-v2 small{
  display:block;
  margin-top:5px;
  color:rgba(31,42,36,.72);
  font-size:14px;
  line-height:1.45;
}

.contact-selected-notice-v2.is-pulsing{
  animation:niloContactPulse 1.05s ease;
}

.contact-form-panel-v2.is-attention{
  animation:niloContactPanelFocus 1.05s ease;
}

@keyframes niloContactPulse{
  0%{
    transform:translateY(0);
    border-color:rgba(31,107,84,.20);
    box-shadow:0 14px 30px rgba(31,107,84,.075);
  }
  32%{
    transform:translateY(-2px);
    border-color:rgba(201,164,74,.62);
    box-shadow:0 20px 42px rgba(201,164,74,.18);
  }
  100%{
    transform:translateY(0);
    border-color:rgba(31,107,84,.22);
    box-shadow:0 14px 30px rgba(31,107,84,.075);
  }
}

@keyframes niloContactPanelFocus{
  0%{
    border-color:rgba(31,42,36,.12);
  }
  32%{
    border-color:rgba(201,164,74,.58);
  }
  100%{
    border-color:rgba(31,42,36,.12);
  }
}

.contact-form-v2{
  display:grid;
  gap:18px;
}

.contact-form-row-v2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

.contact-form-v2 input,
.contact-form-v2 select,
.contact-form-v2 textarea{
  min-height:50px;
  margin-top:0;
  border-radius:12px;
  background:rgba(255,255,255,.88);
}

.contact-form-v2 textarea{
  min-height:138px;
}

.contact-form-v2 button[type="submit"]{
  justify-self:start;
  min-height:50px;
  margin-top:0;
  padding:0 22px;
  border-radius:14px;
  font-weight:900;
}

.contact-form-privacy-v2{
  margin:-4px 0 0;
  color:rgba(31,42,36,.55);
  font-size:12px;
  line-height:1.5;
}

.contact-form-privacy-v2::before{
  content:"▢";
  margin-right:8px;
  color:var(--brand);
}

.contact-form-note-v2{
  min-height:18px;
  color:var(--brand);
  font-size:13px;
  line-height:1.45;
  font-weight:700;
}

.contact-workflow-v2{
  margin-top:28px;
}

.contact-workflow-card-v2{
  border-radius:24px;
  border:1px solid rgba(31,107,84,.14);
  background:
    radial-gradient(900px 260px at 10% 0%, rgba(31,107,84,.09), transparent 55%),
    radial-gradient(700px 220px at 100% 100%, rgba(201,164,74,.08), transparent 58%),
    linear-gradient(180deg, rgba(252,251,249,.96), rgba(244,241,234,.96));
  box-shadow:0 16px 38px rgba(0,0,0,.055);
  padding:32px;
}

.contact-steps-v2{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:18px;
  border-bottom:1px solid rgba(31,42,36,.10);
  padding-bottom:28px;
}

.contact-step-v2{
  position:relative;
  text-align:center;
  padding:0 10px;
}

.contact-step-v2:not(:last-child)::after{
  content:"→";
  position:absolute;
  top:42px;
  right:-15px;
  color:rgba(31,107,84,.50);
  font-size:28px;
}

.contact-step-number-v2{
  position:absolute;
  top:-8px;
  left:50%;
  transform:translateX(-42px);
  width:28px;
  height:28px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:13px;
  font-weight:950;
  box-shadow:0 10px 20px rgba(31,107,84,.18);
}

.contact-step-icon-v2{
  width:62px;
  height:62px;
  margin:4px auto 18px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.13);
  background:rgba(255,255,255,.62);
  color:var(--brand);
}

.contact-step-v2 h3{
  margin:0 0 8px;
  color:var(--text);
  font-size:16px;
  line-height:1.25;
}

.contact-step-v2 p{
  margin:0 auto;
  max-width:210px;
  color:rgba(31,42,36,.68);
  font-size:14px;
  line-height:1.55;
}

.contact-workflow-note-v2{
  margin:22px 0 0;
  color:rgba(31,42,36,.72);
  text-align:center;
  font-size:15px;
  line-height:1.55;
}

.contact-workflow-note-v2::before{
  content:"◇";
  color:var(--brand);
  margin-right:10px;
}

@media (max-width: 1100px){
  .contact-hero-v2{
    grid-template-columns:minmax(0, 1fr) minmax(300px, 430px);
    gap:28px;
  }

  .contact-choice-grid-v2{
    gap:16px;
  }

  .contact-choice-card-v2{
    padding:28px 22px 24px;
  }
}

@media (max-width: 980px){
  .contact-hero-v2,
  .contact-main-grid-v2{
    grid-template-columns:1fr;
  }

  .contact-hero-v2{
    padding-top:40px;
  }

  .contact-hero-art-v2{
    justify-self:center;
    max-width:560px;
  }

  .contact-choice-grid-v2{
    grid-template-columns:1fr;
  }

  .contact-choice-card-v2{
    min-height:auto;
  }

  .contact-steps-v2{
    grid-template-columns:repeat(2, minmax(0, 1fr));
    row-gap:34px;
  }

  .contact-step-v2:nth-child(2)::after{
    display:none;
  }
}

@media (max-width: 640px){
  .contact-page-v2{
    padding-bottom:24px;
  }

  .contact-hero-v2{
    padding-top:30px;
    padding-bottom:24px;
  }

  .contact-kicker-v2{
    font-size:12px;
    letter-spacing:.18em;
  }

  .contact-hero-title-v2{
    font-size:clamp(44px, 14vw, 60px);
  }

  .contact-hero-lead-v2{
    font-size:16px;
  }

  .contact-hero-art-v2{
    min-height:190px;
  }

  .contact-choice-card-v2,
  .contact-panel-v2,
  .contact-workflow-card-v2{
    border-radius:20px;
    padding:22px 18px;
  }

  .contact-choice-icon-v2{
    width:68px;
    height:68px;
  }

  .contact-main-grid-v2,
  .contact-workflow-v2{
    margin-top:18px;
  }

  .contact-form-row-v2{
    grid-template-columns:1fr;
  }

  .contact-selected-notice-v2{
    grid-template-columns:36px minmax(0, 1fr);
    padding:14px;
  }

  .contact-selected-icon-v2{
    width:36px;
    height:36px;
  }

  .contact-selected-notice-v2 strong{
    font-size:15px;
  }

  .contact-selected-notice-v2 small{
    font-size:13px;
  }

  .contact-form-v2 button[type="submit"]{
    justify-self:stretch;
  }

  .contact-steps-v2{
    grid-template-columns:1fr;
    padding-bottom:20px;
  }

  .contact-step-v2:not(:last-child)::after{
    display:none;
  }

  .contact-step-v2{
    padding:0;
  }
}


/* =========================================================
   NILO LUNCH REDESIGN PATCH — premium order page
   Safe visual layer: keeps existing IDs, inputs and JS hooks intact.
========================================================= */

.order-page-redesign{
  max-width:1440px;
  padding-top:0;
  padding-bottom:34px;
}

.order-lunch-hero{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0, .92fr) minmax(460px, .88fr);
  gap:34px;
  align-items:center;
  min-height:430px;
  margin:0 0 28px;
  padding:54px 44px 46px;
  border-radius:0 0 34px 34px;
  overflow:hidden;
  background:
    radial-gradient(800px 320px at 6% 18%, rgba(31,107,84,.11), transparent 62%),
    radial-gradient(900px 360px at 86% 10%, rgba(201,164,74,.10), transparent 66%),
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(252,249,242,.42));
}

.order-lunch-hero::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(244,241,234,.98) 0%, rgba(244,241,234,.90) 34%, rgba(244,241,234,.62) 56%, rgba(244,241,234,.10) 100%);
  z-index:1;
}

.order-lunch-hero-copy{
  position:relative;
  z-index:2;
  max-width:650px;
}

.order-lunch-kicker{
  display:inline-flex;
  align-items:center;
  gap:10px;
  margin-bottom:18px;
  color:var(--brand);
  font-size:13px;
  font-weight:950;
  letter-spacing:.24em;
  text-transform:uppercase;
}

.order-lunch-kicker::before{
  content:"✣";
  color:#d89a2b;
  font-size:15px;
  letter-spacing:0;
}

.order-lunch-title{
  margin:0;
  max-width:620px;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-size:clamp(58px, 6.4vw, 100px);
  font-weight:700;
  line-height:.92;
  letter-spacing:-.055em;
  text-wrap:balance;
  text-shadow:0 10px 28px rgba(31,107,84,.08);
}

.order-lunch-lead{
  margin:20px 0 0;
  max-width:560px;
  color:rgba(31,42,36,.78);
  font-size:clamp(17px, 1.45vw, 21px);
  line-height:1.58;
}

.order-lunch-trust{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:18px;
  margin-top:34px;
  max-width:720px;
}

.order-lunch-trust-item{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:12px;
  align-items:center;
  color:rgba(31,42,36,.78);
  font-size:14px;
  font-weight:850;
  line-height:1.28;
}

.order-lunch-trust-icon{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.13);
  background:rgba(255,255,255,.70);
  color:var(--brand);
  box-shadow:0 10px 20px rgba(0,0,0,.045);
  font-weight:950;
}

.order-lunch-hero-media{
  position:absolute;
  z-index:0;
  top:0;
  right:0;
  bottom:0;
  width:52%;
  overflow:hidden;
}

.order-lunch-hero-media img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  filter:saturate(1.03) contrast(1.02);
}

.order-builder-section{
  position:relative;
}

.order-page-redesign .order-grid-modern{
  grid-template-columns:minmax(0, 1fr) minmax(390px, 430px);
  gap:30px;
  align-items:start;
}

.order-page-redesign .order-left{
  min-width:0;
}

.order-flow-panel{
  margin:0 0 20px;
  padding:16px 18px;
  border:1px solid rgba(31,42,36,.10);
  border-radius:24px;
  background:rgba(255,255,255,.64);
  box-shadow:0 14px 34px rgba(0,0,0,.045);
}

.order-flow-title{
  margin-bottom:12px;
  color:#a66b08;
  font-size:13px;
  font-weight:950;
  letter-spacing:.20em;
  text-transform:uppercase;
}

.order-flow-items{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:14px;
}

.order-flow-item{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:center;
  min-width:0;
}

.order-flow-number{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(31,107,84,.09);
  color:var(--brand);
  border:1px solid rgba(31,107,84,.16);
  font-weight:950;
}

.order-flow-copy{
  min-width:0;
  display:grid;
  gap:2px;
}

.order-flow-copy strong{
  color:var(--text);
  font-size:13px;
  line-height:1.22;
}

.order-flow-copy small{
  color:var(--muted);
  font-size:12px;
  line-height:1.35;
}

.order-flow-warning{
  margin-top:14px;
  padding:12px 14px;
  border:1px solid var(--warn-border);
  border-radius:16px;
  background:var(--warn-bg);
  color:var(--text);
  display:grid;
  gap:3px;
  font-size:13px;
}

.order-flow-warning--standalone{
  margin:0 0 18px;
  box-shadow:0 12px 26px rgba(0,0,0,.045);
}

.order-popular-section{
  margin:0 0 28px;
  scroll-margin-top:140px;
}

.order-section-heading-row{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:16px;
  margin-bottom:14px;
}

.order-section-eyebrow{
  color:#c38417;
  font-size:18px;
  font-weight:950;
  letter-spacing:-.02em;
}

.order-section-intro{
  margin:5px 0 0;
  color:var(--muted);
  font-size:14px;
  line-height:1.5;
}

.order-page-redesign .order-cat-nav-wrap{
  top:calc(var(--headerH) + 8px);
  margin:0 0 24px;
  padding:10px 0 8px;
  background:linear-gradient(180deg, rgba(244,241,234,.98), rgba(244,241,234,.88) 76%, rgba(244,241,234,0));
}

.order-page-redesign .order-cat-nav{
  gap:12px;
  padding:4px 4px 8px;
}

.order-page-redesign .order-cat-nav-link{
  min-height:48px;
  padding:0 20px;
  color:var(--text);
  border-color:rgba(31,42,36,.10);
  background:rgba(255,255,255,.86);
  box-shadow:0 10px 22px rgba(0,0,0,.055);
}

.order-page-redesign .order-cat-nav-link.is-active{
  color:#fff;
  border-color:rgba(31,107,84,.92);
  background:linear-gradient(135deg, rgba(31,107,84,.96), rgba(31,107,84,.84));
  box-shadow:0 16px 30px rgba(31,107,84,.18);
}

.order-page-redesign .order-cat{
  margin-top:34px;
  scroll-margin-top:145px;
}

.order-page-redesign .order-cat:first-of-type{
  margin-top:20px;
}

.order-page-redesign .order-cat-title{
  font-size:clamp(28px, 2.4vw, 38px);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:700;
  letter-spacing:-.04em;
}

.order-page-redesign .order-items{
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:22px;
}

.order-page-redesign .order-item{
  padding:0;
  overflow:hidden;
  border-radius:24px;
  border-color:rgba(31,42,36,.10);
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,250,246,.96));
  box-shadow:0 16px 36px rgba(0,0,0,.065);
}

.order-page-redesign .order-item:hover{
  transform:translateY(-2px);
  border-color:rgba(31,107,84,.20);
  box-shadow:0 22px 48px rgba(0,0,0,.09);
}

.order-page-redesign .order-item-top{
  gap:0;
  align-items:stretch;
  min-height:190px;
}

.order-page-redesign .order-item-media{
  flex:0 0 168px;
  min-height:100%;
}

.order-page-redesign .order-item-img,
.order-page-redesign .order-item-img.ph{
  width:100%;
  height:100%;
  min-height:190px;
  border-radius:0;
  border:none;
  border-right:1px solid rgba(31,42,36,.08);
}

.order-page-redesign .order-item-main{
  display:flex;
  flex-direction:column;
  padding:18px 18px 16px;
}

.order-page-redesign .order-item-title{
  font-size:19px;
  line-height:1.12;
  letter-spacing:-.025em;
}

.order-page-redesign .order-price-pill{
  padding:7px 11px;
  background:rgba(255,255,255,.92);
  box-shadow:0 8px 16px rgba(0,0,0,.045);
}

.order-page-redesign .order-item-desc{
  margin-top:10px;
  font-size:14px;
  line-height:1.48;
}

.order-page-redesign .order-options{
  margin-top:12px;
}

.order-page-redesign .order-qty-row{
  margin-top:auto;
  padding-top:16px;
}

.order-page-redesign .order-item-add,
.order-page-redesign .order-item .qty-btn:last-child,
.order-page-redesign .qty-pill-btn:last-child{
  background:var(--brand);
  color:#fff;
  border-color:rgba(31,107,84,.95);
  box-shadow:0 10px 20px rgba(31,107,84,.16);
}

.order-page-redesign .order-item-add:hover,
.order-page-redesign .order-item .qty-btn:last-child:hover,
.order-page-redesign .qty-pill-btn:last-child:hover{
  background:#17513f;
}

.order-page-redesign .order-right{
  top:calc(var(--headerH) + 18px);
  border-radius:28px;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,250,246,.96));
  box-shadow:0 24px 60px rgba(0,0,0,.10);
}

.order-right-title-with-count{
  display:flex;
  align-items:center;
  gap:10px;
}

.order-cart-count-pill{
  min-width:26px;
  height:26px;
  padding:0 8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:var(--brand);
  color:#fff;
  font-size:13px;
  font-weight:950;
}

.order-page-redesign .order-cart-head{
  min-height:64px;
  padding-right:84px;
}

.order-page-redesign .order-cart-hero{
  top:-14px;
  right:0;
}

.order-page-redesign .order-cart-hero-img{
  width:86px;
}

.order-page-redesign .order-summary-empty{
  min-height:210px;
  background:radial-gradient(360px 140px at 50% 0%, rgba(31,107,84,.06), transparent 64%), rgba(255,255,255,.70);
}

.order-page-redesign .sum-card{
  grid-template-columns:64px 1fr;
  padding:13px;
  background:rgba(255,255,255,.82);
}

.order-page-redesign .sum-media{
  width:64px;
  height:64px;
  border-radius:16px;
}

.order-page-redesign .summary-totals{
  margin-top:18px;
  padding-top:18px;
}

.order-page-redesign .tot-row.tot{
  margin-top:6px;
  font-size:22px;
}

.order-page-redesign .tot-row.tot span:last-child{
  color:var(--brand);
}

.order-page-redesign .free-delivery-chip{
  border-radius:16px;
  background:rgba(31,107,84,.07);
}

.order-page-redesign .order-cta-btn{
  min-height:62px;
  border-radius:18px;
  background:linear-gradient(135deg, #1f6b54, #14523f);
  box-shadow:0 18px 36px rgba(31,107,84,.22);
}

.order-page-redesign .order-cta-btn::after{
  content:"→";
  margin-left:8px;
  font-size:20px;
  line-height:1;
}

.order-page-redesign .order-side-section{
  padding:20px !important;
}

.order-page-redesign .order-side-kicker{
  background:rgba(31,107,84,.07);
}

@media (max-width: 1260px){
  .order-lunch-hero{
    grid-template-columns:minmax(0, 1fr) minmax(360px, .72fr);
    padding-left:26px;
    padding-right:26px;
  }

  .order-lunch-hero-media{
    width:48%;
  }

  .order-page-redesign .order-grid-modern{
    grid-template-columns:minmax(0,1fr) minmax(360px, 400px);
    gap:22px;
  }

  .order-page-redesign .order-item-media{
    flex-basis:128px;
  }

  .order-page-redesign .order-item-img,
  .order-page-redesign .order-item-img.ph{
    min-height:178px;
  }
}

@media (max-width: 1060px){
  .order-lunch-hero{
    display:block;
    min-height:0;
    padding:42px 24px 280px;
    border-radius:0 0 28px 28px;
  }

  .order-lunch-hero::before{
    background:linear-gradient(180deg, rgba(244,241,234,.98) 0%, rgba(244,241,234,.90) 50%, rgba(244,241,234,.22) 100%);
  }

  .order-lunch-hero-media{
    top:auto;
    left:0;
    right:0;
    bottom:0;
    width:100%;
    height:330px;
  }

  .order-lunch-trust{
    grid-template-columns:1fr;
    gap:12px;
    max-width:420px;
  }

  .order-page-redesign .order-grid-modern{
    grid-template-columns:1fr;
  }

  .order-page-redesign .order-right{
    position:static;
  }
}

@media (max-width: 820px){
  .order-page-redesign{
    padding-left:14px;
    padding-right:14px;
  }

  .order-lunch-hero{
    margin-left:-14px;
    margin-right:-14px;
    padding:34px 18px 245px;
  }

  .order-lunch-title{
    font-size:clamp(48px, 15vw, 68px);
  }

  .order-lunch-lead{
    font-size:16px;
  }

  .order-flow-panel{
    padding:14px;
    border-radius:20px;
  }

  .order-flow-items{
    grid-template-columns:1fr;
    gap:12px;
  }

  .order-page-redesign .order-items{
    grid-template-columns:1fr;
    gap:16px;
  }

  .order-page-redesign .order-cat-nav-wrap{
    top:calc(var(--headerH) + 4px);
  }

  .order-page-redesign .order-cat-nav-link{
    min-height:42px;
    padding:0 15px;
  }

  .order-page-redesign .order-cat{
    margin-top:26px;
  }
}

@media (max-width: 560px){
  .order-lunch-hero{
    padding:28px 16px 220px;
  }

  .order-lunch-hero-media{
    height:260px;
  }

  .order-lunch-kicker{
    font-size:11px;
    letter-spacing:.18em;
  }

  .order-lunch-trust-item{
    grid-template-columns:36px 1fr;
    font-size:13px;
  }

  .order-lunch-trust-icon{
    width:36px;
    height:36px;
  }

  .order-page-redesign .order-item-top{
    min-height:0;
  }

  .order-page-redesign .order-item-media{
    flex-basis:112px;
  }

  .order-page-redesign .order-item-img,
  .order-page-redesign .order-item-img.ph{
    min-height:168px;
  }

  .order-page-redesign .order-item-main{
    padding:15px 14px;
  }

  .order-page-redesign .order-item-title-row{
    gap:8px;
  }

  .order-page-redesign .order-item-title{
    font-size:17px;
  }

  .order-page-redesign .order-price-pill{
    padding:6px 9px;
    font-size:11px;
  }

  .order-page-redesign .order-item-desc{
    font-size:13px;
  }

  .order-page-redesign .order-side-section{
    padding:16px !important;
  }
}

@media (max-width: 420px){
  .order-page-redesign .order-item-top{
    display:grid;
    grid-template-columns:104px 1fr;
  }

  .order-page-redesign .order-item-media{
    flex-basis:auto;
  }

  .order-page-redesign .order-item-img,
  .order-page-redesign .order-item-img.ph{
    min-height:100%;
    height:100%;
  }
}


/* =========================================================
   NILO LUNCH REDESIGN PATCH 2 — polish + mobile UX
   Frontend-only visual refinements. Keeps existing IDs, JS hooks,
   Supabase/Mollie/payment logic and SEO heads untouched.
========================================================= */

/* Hero: keep the premium split look, but make the food image richer and less washed out. */
.order-page-redesign .order-lunch-hero{
  min-height:410px;
  margin-bottom:26px;
  box-shadow:inset 0 -1px 0 rgba(31,42,36,.06);
}

.order-page-redesign .order-lunch-hero::before{
  background:
    linear-gradient(
      90deg,
      rgba(244,241,234,.985) 0%,
      rgba(244,241,234,.92) 30%,
      rgba(244,241,234,.42) 54%,
      rgba(244,241,234,.04) 100%
    );
}

.order-page-redesign .order-lunch-hero-media::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    radial-gradient(520px 240px at 14% 54%, rgba(244,241,234,.22), transparent 58%),
    linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.08));
}

.order-page-redesign .order-lunch-hero-media img{
  filter:saturate(1.16) contrast(1.08) brightness(.98);
  transform:scale(1.012);
}

.order-page-redesign .order-lunch-trust{
  max-width:760px;
}

.order-page-redesign .order-lunch-trust-item{
  padding:2px 0;
}

/* Make the 3-step panel feel lighter and more aligned with the home page. */
.order-page-redesign .order-flow-panel{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(700px 180px at 0% 0%, rgba(31,107,84,.055), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(252,250,246,.66));
  border-color:rgba(31,42,36,.095);
}

.order-page-redesign .order-flow-panel::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, rgba(31,107,84,0), rgba(31,107,84,.28), rgba(201,164,74,.18), rgba(31,107,84,0));
}

.order-page-redesign .order-flow-title{
  margin-top:2px;
}

/* Sticky category navigation: clearer active state and better affordance on scroll. */
.order-page-redesign .order-cat-nav-wrap{
  margin-bottom:26px;
  padding-top:12px;
  border-radius:0 0 22px 22px;
}

.order-page-redesign .order-cat-nav{
  scroll-padding-inline:8px;
}

.order-page-redesign .order-cat-nav-link{
  min-width:max-content;
  transition:transform .14s ease, box-shadow .18s ease, background .18s ease, color .18s ease, border-color .18s ease;
}

.order-page-redesign .order-cat-nav-link:focus-visible{
  outline:4px solid var(--ring);
  outline-offset:3px;
}

/* Product cards: more stable height, calmer text, better long-title handling. */
.order-page-redesign .order-item{
  min-height:210px;
  transition:transform .18s ease, box-shadow .2s ease, border-color .2s ease;
}

.order-page-redesign .order-item-top{
  min-height:210px;
}

.order-page-redesign .order-item-media{
  flex-basis:178px;
}

.order-page-redesign .order-item-img,
.order-page-redesign .order-item-img.ph{
  min-height:210px;
  object-position:center;
}

.order-page-redesign .order-item-main{
  min-width:0;
  padding:19px 19px 17px;
}

.order-page-redesign .order-item-title-row{
  align-items:flex-start;
}

.order-page-redesign .order-item-title{
  overflow-wrap:anywhere;
  hyphens:auto;
  max-width:100%;
}

.order-page-redesign .order-item-desc{
  display:-webkit-box;
  -webkit-line-clamp:4;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.order-page-redesign .order-item-includes{
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.order-page-redesign .order-price-pill{
  margin-top:1px;
}

.order-page-redesign .order-qty-row{
  align-items:center;
}

.order-page-redesign .order-item-add{
  min-width:76px;
  min-height:42px;
  border-radius:999px;
}

/* Sidebar: keep the cart usable on smaller laptop heights. */
@media (min-width: 981px){
  .order-page-redesign .order-right{
    max-height:calc(100vh - var(--headerH) - 32px);
    overflow:hidden !important;
  }

  .order-page-redesign .order-side-shell{
    max-height:calc(100vh - var(--headerH) - 34px);
    overflow-y:auto;
    overscroll-behavior:contain;
    scrollbar-width:thin;
    scrollbar-color:rgba(31,107,84,.28) transparent;
  }

  .order-page-redesign .order-side-shell::-webkit-scrollbar{
    width:8px;
  }

  .order-page-redesign .order-side-shell::-webkit-scrollbar-track{
    background:transparent;
  }

  .order-page-redesign .order-side-shell::-webkit-scrollbar-thumb{
    background:rgba(31,107,84,.24);
    border-radius:999px;
  }
}

.order-page-redesign .summary-lines{
  max-height:none;
}

.order-page-redesign .sum-card{
  border-color:rgba(31,42,36,.08);
}

.order-page-redesign .sum-top{
  gap:10px;
}

.order-page-redesign .line-title{
  overflow-wrap:anywhere;
}

/* Form polish: better scanability in the right column. */
.order-page-redesign .order-form-group-title{
  color:rgba(31,42,36,.74);
  letter-spacing:.08em;
}

.order-page-redesign .order-form-block{
  gap:14px;
}

.order-page-redesign .field-label{
  color:rgba(31,42,36,.72);
}

.order-page-redesign .field-hint{
  color:rgba(92,107,98,.86);
}

.order-page-redesign input,
.order-page-redesign textarea,
.order-page-redesign select{
  background:rgba(255,255,255,.94);
  border-color:rgba(31,42,36,.115);
}

.order-page-redesign input:hover,
.order-page-redesign textarea:hover,
.order-page-redesign select:hover{
  border-color:rgba(31,107,84,.22);
}

/* Mobile and tablet: make the order flow feel more app-like. */
@media (max-width: 1260px){
  .order-page-redesign .order-item-media{
    flex-basis:150px;
  }

  .order-page-redesign .order-item-top,
  .order-page-redesign .order-item-img,
  .order-page-redesign .order-item-img.ph{
    min-height:196px;
  }

  .order-page-redesign .order-item-desc{
    -webkit-line-clamp:3;
  }
}

@media (max-width: 980px){
  .order-page-redesign .order-lunch-hero{
    margin-bottom:22px;
  }

  .order-page-redesign .order-lunch-hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(244,241,234,.99) 0%,
        rgba(244,241,234,.94) 47%,
        rgba(244,241,234,.30) 100%
      );
  }

  .order-page-redesign .order-lunch-hero-media img{
    object-position:center 46%;
  }

  .order-page-redesign .order-cat-nav-wrap{
    top:calc(var(--headerH) + 6px);
    margin-left:-14px;
    margin-right:-14px;
    padding-left:14px;
    padding-right:14px;
  }

  .order-page-redesign .order-right{
    max-height:min(90dvh, 780px);
  }

  .order-page-redesign .mobile-checkout-head{
    border-radius:24px 24px 0 0;
  }

  .order-page-redesign .mobile-cart-bar{
    padding-top:14px;
  }

  .order-page-redesign .mobile-cart-bar-btn{
    border-radius:24px;
    min-height:66px;
    box-shadow:
      0 18px 46px rgba(0,0,0,.22),
      inset 0 1px 0 rgba(255,255,255,.12);
  }

  .order-page-redesign .mobile-cart-bar-cta::after{
    content:" →";
  }
}

@media (max-width: 820px){
  .order-page-redesign .order-flow-title{
    font-size:12px;
    letter-spacing:.16em;
  }

  .order-page-redesign .order-flow-item{
    grid-template-columns:36px 1fr;
  }

  .order-page-redesign .order-flow-number{
    width:36px;
    height:36px;
  }

  .order-page-redesign .order-item{
    min-height:0;
  }

  .order-page-redesign .order-item-top{
    min-height:190px;
  }

  .order-page-redesign .order-item-media{
    flex-basis:154px;
  }

  .order-page-redesign .order-item-img,
  .order-page-redesign .order-item-img.ph{
    min-height:190px;
  }

  .order-page-redesign .order-item-desc{
    -webkit-line-clamp:4;
  }
}

@media (max-width: 560px){
  .order-page-redesign .order-lunch-hero{
    padding-bottom:235px;
  }

  .order-page-redesign .order-lunch-hero-media{
    height:275px;
  }

  .order-page-redesign .order-lunch-title{
    line-height:.94;
  }

  .order-page-redesign .order-section-eyebrow{
    font-size:16px;
  }

  .order-page-redesign .order-section-intro{
    font-size:13px;
  }

  .order-page-redesign .order-item-top{
    min-height:172px;
  }

  .order-page-redesign .order-item-media{
    flex-basis:126px;
  }

  .order-page-redesign .order-item-img,
  .order-page-redesign .order-item-img.ph{
    min-height:172px;
  }

  .order-page-redesign .order-item-title{
    font-size:16px;
    line-height:1.14;
  }

  .order-page-redesign .order-item-desc{
    margin-top:8px;
    -webkit-line-clamp:3;
  }

  .order-page-redesign .order-item-badges{
    gap:5px;
  }

  .order-page-redesign .order-badge{
    min-height:22px;
    padding:3px 7px;
    font-size:10.5px;
  }

  .order-page-redesign .order-item-add{
    min-width:68px;
    min-height:40px;
  }
}

@media (max-width: 420px){
  .order-page-redesign .order-item-top{
    grid-template-columns:112px minmax(0, 1fr);
    min-height:0;
  }

  .order-page-redesign .order-item-media{
    min-height:100%;
  }

  .order-page-redesign .order-item-img,
  .order-page-redesign .order-item-img.ph{
    min-height:100%;
    object-position:center;
  }

  .order-page-redesign .order-item-main{
    padding:13px 12px;
  }

  .order-page-redesign .order-price-pill{
    font-size:10px;
    padding:5px 8px;
  }

  .order-page-redesign .order-qty-row{
    padding-top:12px;
  }

  .order-page-redesign .mobile-cart-bar-btn{
    border-radius:20px;
  }
}



/* =========================================================
   PATCH 3 — MOBILE CHECKOUT FLOW POLISH
   Safe frontend-only overrides for lunch/order pages.
   Desktop checkout remains unchanged.
========================================================= */

@media (max-width: 980px){
  body.mobile-checkout-open .mobile-cart-bar{
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
  }

  .order-page-redesign .mobile-cart-bar{
    padding:12px max(14px, env(safe-area-inset-left)) calc(12px + env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-right));
    transition:opacity .18s ease, transform .18s ease;
  }

  .order-page-redesign .mobile-cart-bar-btn{
    max-width:760px;
    margin:0 auto;
    min-height:76px;
    display:grid;
    grid-template-columns:44px minmax(0, 1fr) auto auto;
    grid-template-areas:"icon copy total cta";
    gap:10px;
    padding:10px 12px;
    border-radius:26px;
    border-color:rgba(255,255,255,.16);
    background:
      radial-gradient(180px 90px at 10% 0%, rgba(255,255,255,.16), transparent 60%),
      linear-gradient(135deg, rgba(31,107,84,1), rgba(17,82,63,1));
  }

  .order-page-redesign .mobile-cart-bar-icon{
    grid-area:icon;
    width:44px;
    height:44px;
    border-radius:999px;
    display:grid;
    place-items:center;
    background:rgba(255,255,255,.14);
    border:1px solid rgba(255,255,255,.14);
    font-size:20px;
    line-height:1;
  }

  .order-page-redesign .mobile-cart-bar-copy{
    grid-area:copy;
    min-width:0;
    display:flex;
    flex-direction:column;
    justify-content:center;
    gap:3px;
  }

  .order-page-redesign .mobile-cart-bar-count{
    min-height:0;
    padding:0;
    border:0;
    background:transparent;
    display:block;
    color:#fff;
    font-size:14px;
    font-weight:950;
    line-height:1.15;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .order-page-redesign .mobile-cart-bar-hint{
    display:block;
    color:rgba(255,255,255,.74);
    font-size:11px;
    font-weight:750;
    line-height:1.2;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .order-page-redesign .mobile-cart-bar-total{
    grid-area:total;
    justify-self:end;
    font-size:18px;
  }

  .order-page-redesign .mobile-cart-bar-cta{
    grid-area:cta;
    min-height:42px;
    padding:0 14px;
    background:#fff;
    box-shadow:0 8px 18px rgba(0,0,0,.12);
  }

  .order-page-redesign .mobile-checkout-backdrop{
    background:rgba(18,24,22,.56);
    backdrop-filter:blur(7px);
    -webkit-backdrop-filter:blur(7px);
  }

  .order-page-redesign .order-right{
    left:50%;
    right:auto;
    width:min(calc(100% - 22px), 590px);
    max-height:min(91dvh, 820px);
    border-radius:28px 28px 0 0 !important;
    transform:translate(-50%, calc(100% + 28px));
    will-change:transform, opacity;
  }

  .order-page-redesign .order-right.is-mobile-open{
    transform:translate(-50%, 0);
  }

  .order-page-redesign .mobile-checkout-grip{
    width:54px;
    height:5px;
    margin:12px auto 6px;
    background:rgba(31,42,36,.20);
  }

  .order-page-redesign .mobile-checkout-head{
    padding:12px 18px 14px;
    background:
      radial-gradient(360px 120px at 0% 0%, rgba(31,107,84,.08), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,251,249,.96));
  }

  .order-page-redesign .mobile-checkout-title{
    font-size:24px;
  }

  .order-page-redesign .mobile-checkout-close{
    width:44px;
    height:44px;
    font-size:28px;
    box-shadow:0 8px 20px rgba(0,0,0,.06);
  }

  .order-page-redesign .order-side-shell{
    padding-bottom:calc(18px + env(safe-area-inset-bottom));
  }

  .order-page-redesign .order-side-section{
    padding:17px 18px !important;
  }

  .order-page-redesign .order-cart-hero{
    display:none;
  }

  .order-page-redesign .order-side-divider{
    margin-top:6px;
  }

  .order-page-redesign .sum-card{
    border-radius:18px;
    background:rgba(255,255,255,.92);
  }

  .order-page-redesign .order-form-group{
    padding-top:2px;
  }

  .order-page-redesign .order-form-group-title{
    margin-bottom:10px;
  }

  .order-page-redesign .order-cta-btn{
    position:sticky;
    bottom:calc(10px + env(safe-area-inset-bottom));
    z-index:5;
    min-height:62px;
    border-radius:20px;
    box-shadow:
      0 18px 38px rgba(31,107,84,.24),
      0 0 0 1px rgba(255,255,255,.24) inset;
  }

  .order-page-redesign .order-cta-note{
    text-align:center;
    margin-top:10px;
  }

  .order-page-redesign .order-cta-total{
    margin-top:10px;
    padding-top:12px;
  }
}

@media (max-width: 720px){
  .order-page-redesign .order-flow-panel{
    border-radius:22px;
  }

  .order-page-redesign .order-flow-items{
    gap:10px;
  }

  .order-page-redesign .order-cat-nav-wrap{
    box-shadow:0 12px 28px rgba(244,241,234,.92);
  }
}

@media (max-width: 560px){
  .order-page-redesign .mobile-cart-bar-btn{
    grid-template-columns:40px minmax(0, 1fr) auto;
    grid-template-areas:
      "icon copy total"
      "cta cta cta";
    min-height:82px;
    gap:8px 10px;
    border-radius:23px;
  }

  .order-page-redesign .mobile-cart-bar-icon{
    width:40px;
    height:40px;
    font-size:18px;
  }

  .order-page-redesign .mobile-cart-bar-total{
    font-size:17px;
  }

  .order-page-redesign .mobile-cart-bar-cta{
    justify-self:stretch;
    width:100%;
    min-height:38px;
  }

  .order-page-redesign .order-right{
    left:0;
    right:0;
    width:100%;
    max-height:92dvh;
    border-radius:24px 24px 0 0 !important;
    transform:translateY(calc(100% + 24px));
  }

  .order-page-redesign .order-right.is-mobile-open{
    transform:translateY(0);
  }

  .order-page-redesign .mobile-checkout-head{
    padding-left:16px;
    padding-right:16px;
  }

  .order-page-redesign .mobile-checkout-title{
    font-size:22px;
  }

  .order-page-redesign .order-side-section{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .order-page-redesign .sum-card{
    grid-template-columns:52px minmax(0, 1fr);
  }

  .order-page-redesign .sum-media{
    width:52px;
    height:52px;
  }
}

@media (max-width: 380px){
  .order-page-redesign .mobile-cart-bar{
    padding-left:8px;
    padding-right:8px;
  }

  .order-page-redesign .mobile-cart-bar-count{
    font-size:13px;
  }

  .order-page-redesign .mobile-cart-bar-total{
    font-size:16px;
  }

  .order-page-redesign .mobile-cart-bar-cta{
    font-size:12px;
  }
}


/* =========================================================
   PATCH 4 — cleaner delivery + checkout sidebar
   Only affects the order page/right column/mobile checkout.
========================================================= */

.order-right .order-side-shell{
  background:
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,251,248,.98));
  border-radius:24px;
}

.order-side-section{
  padding:18px 20px !important;
}

.order-side-section.order-cart-section{
  padding-bottom:16px !important;
}

.order-cart-section .order-side-divider{
  margin-top:16px;
}

.order-delivery-card{
  display:grid;
  gap:14px;
}

.delivery-card-main{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:12px;
  align-items:flex-start;
  padding:14px;
  border:1px solid rgba(31,107,84,.14);
  border-radius:18px;
  background:
    radial-gradient(420px 160px at 0% 0%, rgba(31,107,84,.08), transparent 60%),
    rgba(255,255,255,.70);
}

.delivery-card-icon{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:999px;
  background:rgba(31,107,84,.10);
  color:var(--brand);
  box-shadow:inset 0 0 0 1px rgba(31,107,84,.10);
}

.delivery-card-title{
  margin:0 0 8px;
  color:var(--text);
  font-size:15px;
  line-height:1.15;
  font-weight:950;
  letter-spacing:-.01em;
}

.delivery-card-facts{
  display:flex;
  flex-wrap:wrap;
  gap:6px;
  margin-bottom:10px;
}

.delivery-card-facts span{
  display:inline-flex;
  align-items:center;
  min-height:24px;
  padding:0 9px;
  border-radius:999px;
  background:rgba(31,107,84,.07);
  color:var(--brand);
  border:1px solid rgba(31,107,84,.12);
  font-size:11px;
  font-weight:850;
  line-height:1;
}

.delivery-card-note{
  margin:0;
  color:rgba(31,42,36,.68);
  font-size:12.5px;
  line-height:1.55;
}

.delivery-slots-details{
  border:1px solid rgba(31,42,36,.10);
  border-radius:16px;
  background:rgba(255,255,255,.70);
  overflow:hidden;
}

.delivery-slots-details summary{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:12px 14px;
  cursor:pointer;
  color:var(--brand);
  font-size:12.5px;
  font-weight:900;
  list-style:none;
}

.delivery-slots-details summary::-webkit-details-marker{
  display:none;
}

.delivery-slots-details summary::after{
  content:"⌄";
  width:22px;
  height:22px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:rgba(31,107,84,.08);
  color:var(--brand);
  transition:transform .18s ease;
}

.delivery-slots-details[open] summary::after{
  transform:rotate(180deg);
}

.delivery-slots-details-body{
  padding:0 14px 14px;
  color:var(--muted);
  font-size:12.5px;
  line-height:1.55;
}

.delivery-slots-details-body p{
  margin:0 0 10px;
}

.delivery-slots-details .slot-legend{
  margin-top:0;
  padding-top:10px;
  border-top:1px dashed rgba(31,42,36,.12);
  gap:8px 12px;
}

.delivery-slots-details .slot-legend-item{
  font-size:12px;
}

.delivery-timing-group{
  margin-top:2px;
}

.delivery-timing-card{
  display:grid;
  gap:10px;
  padding:14px;
  border-radius:18px;
  border:1px solid rgba(31,107,84,.12);
  background:rgba(255,255,255,.74);
}

.delivery-timing-fields{
  gap:10px !important;
}

.delivery-timing-card .field-hint{
  font-size:11.5px;
}

.delivery-time-note{
  display:grid;
  grid-template-columns:auto 1fr;
  gap:8px;
  align-items:flex-start;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(201,164,74,.08);
  color:rgba(31,42,36,.70);
  font-size:12px;
  line-height:1.5;
}

.delivery-time-note::before{
  content:"i";
  width:18px;
  height:18px;
  display:inline-grid;
  place-items:center;
  border-radius:999px;
  background:rgba(201,164,74,.16);
  color:#9a6b12;
  font-size:11px;
  font-weight:950;
  transform:translateY(1px);
}

.delivery-timing-card .slot-selected-summary{
  margin-top:8px;
  border-radius:14px;
  background:rgba(31,107,84,.06);
  border-color:rgba(31,107,84,.13);
}

.order-form-grid{
  gap:16px;
}

.order-form-group-title{
  color:rgba(31,42,36,.68);
}

.order-form-block{
  padding:0;
}

.checkout-sticky-total{
  position:sticky;
  bottom:0;
  z-index:4;
  display:grid;
  gap:10px;
  margin:4px -2px -2px;
  padding:14px 0 0;
  border-top:1px solid rgba(31,42,36,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,0), rgba(252,251,248,.98) 20%, rgba(252,251,248,.98));
}

.checkout-sticky-total-row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:14px;
  color:var(--text);
  font-weight:950;
  font-size:16px;
}

.checkout-sticky-total-row strong{
  color:var(--brand);
  font-size:22px;
  letter-spacing:-.02em;
}

.checkout-sticky-total .order-cta-btn{
  margin-top:0;
}

.checkout-sticky-total .order-cta-note{
  margin:0 !important;
  font-size:11.5px;
}

.order-cta-total{
  display:none !important;
}

@media (min-width: 981px){
  .order-right{
    max-height:calc(100vh - var(--headerH) - 28px);
    overflow:auto !important;
    scrollbar-width:thin;
    scrollbar-color:rgba(31,107,84,.24) transparent;
  }

  .order-right::-webkit-scrollbar{
    width:8px;
  }

  .order-right::-webkit-scrollbar-thumb{
    border-radius:999px;
    background:rgba(31,107,84,.20);
  }

  .order-right::-webkit-scrollbar-track{
    background:transparent;
  }
}

@media (max-width: 980px){
  .order-side-section{
    padding:16px !important;
  }

  .delivery-card-main{
    grid-template-columns:34px 1fr;
    padding:13px;
  }

  .delivery-card-icon{
    width:34px;
    height:34px;
  }

  .delivery-timing-fields{
    grid-template-columns:1fr !important;
  }

  .checkout-sticky-total{
    position:sticky;
    bottom:0;
    padding:14px 0 calc(2px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 560px){
  .delivery-card-facts span{
    font-size:10.5px;
    padding:0 8px;
  }

  .delivery-slots-details summary{
    padding:11px 12px;
  }

  .delivery-slots-details-body{
    padding:0 12px 12px;
  }

  .checkout-sticky-total-row strong{
    font-size:20px;
  }
}



/* =========================================================
   TEAM ORDER PAGE — frontend-only polish
   Builds on the lunch/order redesign without changing checkout logic.
========================================================= */

.order-team-page .order-team-hero{
  background:
    radial-gradient(680px 360px at 7% 16%, rgba(31,107,84,.12), transparent 62%),
    radial-gradient(520px 280px at 88% 18%, rgba(201,164,74,.10), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.72), rgba(250,247,240,.58));
}

.order-team-page .order-lunch-kicker::before{
  content:"✦";
}

.order-team-page .order-team-hero-media img{
  object-position:center 48%;
}

.order-team-page .order-lunch-trust-item{
  min-width:0;
}

.order-team-page .order-flow-panel{
  border-color:rgba(31,107,84,.14);
}

.order-team-page .order-side-kicker{
  background:rgba(201,164,74,.08);
  border-color:rgba(201,164,74,.22);
  color:#8f650f;
}

.order-team-page .team-form{
  position:relative;
  overflow:hidden;
  border-radius:20px;
  border:1px solid rgba(31,107,84,.12);
  background:
    radial-gradient(480px 180px at 0% 0%, rgba(31,107,84,.09), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.94), rgba(252,251,248,.94));
  box-shadow:0 12px 28px rgba(0,0,0,.045);
  padding:16px !important;
}

.order-team-page .team-form::before{
  content:"";
  position:absolute;
  left:0;
  right:0;
  top:0;
  height:3px;
  background:linear-gradient(90deg, rgba(31,107,84,.52), rgba(201,164,74,.34), rgba(31,107,84,0));
  pointer-events:none;
}

.order-team-page .team-form-head{
  margin-bottom:10px;
}

.order-team-page .team-form-title{
  font-family:inherit;
  font-size:20px;
  letter-spacing:-.02em;
}

.order-team-page .team-form-sub{
  margin-top:4px;
  color:rgba(31,42,36,.62);
  font-size:12px;
}

.order-team-page .team-form-note{
  margin:0 0 14px;
  padding:10px 11px;
  border-radius:14px;
  background:rgba(201,164,74,.08);
  color:rgba(31,42,36,.72);
  font-size:12px;
  line-height:1.45;
}

.order-team-page .team-grid{
  gap:12px;
}

.order-team-page .team-invoice-field{
  align-self:end;
  min-height:44px;
  display:flex;
  align-items:center;
}

.order-team-page .team-checkbox{
  display:inline-flex;
  align-items:center;
  gap:9px;
  min-height:40px;
  padding:8px 12px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.14);
  background:rgba(31,107,84,.06);
  cursor:pointer;
}

.order-team-page .team-checkbox input{
  width:auto;
  margin:0;
  accent-color:var(--brand);
}

.order-team-page .team-checkbox-label{
  margin:0;
  color:var(--brand);
  font-size:12px;
  font-weight:950;
}

.order-team-page #team_notes{
  min-height:84px;
}

.order-team-page .delivery-card-note{
  color:rgba(31,42,36,.72);
}

.order-team-page .checkout-sticky-total-row strong{
  color:#0f6a51;
}

@media (max-width: 980px){
  .order-team-page .team-form{
    padding:15px !important;
  }

  .order-team-page .team-grid{
    grid-template-columns:1fr !important;
  }

  .order-team-page .team-invoice-field{
    min-height:0;
  }

  .order-team-page .team-checkbox{
    width:100%;
    justify-content:flex-start;
  }
}

@media (max-width: 560px){
  .order-team-page .order-lunch-hero{
    padding-bottom:225px;
  }

  .order-team-page .team-form-title{
    font-size:19px;
  }
}


/* =========================================================
   TEAM PATCH 2 — final polish
========================================================= */

/* The button already renders one arrow in the markup; avoid a duplicated CSS arrow. */
.order-cta-btn::after{
  content:none !important;
  display:none !important;
}

/* Safer title metrics for longer FR/EN team headings. */
.order-team-page .order-lunch-title{
  max-width:680px;
  font-size:clamp(52px, 5.8vw, 92px);
  line-height:1.02;
  letter-spacing:-.052em;
  padding-top:.04em;
  padding-bottom:.04em;
}

.order-team-page .order-lunch-hero-copy{
  max-width:690px;
}

.order-team-page .order-lunch-lead{
  margin-top:14px;
}

/* Cleaner, more compact company/invoice block. */
.order-team-page .team-form{
  padding:14px !important;
}

.order-team-page .team-form-head{
  margin-bottom:8px;
}

.order-team-page .team-form-title{
  font-size:19px;
  line-height:1.05;
}

.order-team-page .team-form-sub{
  margin-top:3px;
  font-size:11.5px;
}

.order-team-page .team-form-note{
  display:grid;
  gap:2px;
  margin:0 0 12px;
  padding:9px 10px;
  font-size:11.5px;
  line-height:1.38;
}

.order-team-page .team-form-note strong{
  color:#8f650f;
  font-weight:950;
}

.order-team-page .team-grid{
  gap:10px;
}

.order-team-page .team-grid input,
.order-team-page .team-grid textarea{
  margin-top:6px;
}

.order-team-page .team-grid .field-hint{
  margin-top:0;
  margin-bottom:2px;
  font-size:11px;
  line-height:1.3;
}

.order-team-page .team-checkbox{
  min-height:36px;
  padding:7px 10px;
  border-radius:14px;
}

.order-team-page #team_notes{
  min-height:66px;
}

@media (max-width: 1260px){
  .order-team-page .order-lunch-title{
    font-size:clamp(48px, 5.4vw, 82px);
  }
}

@media (max-width: 980px){
  .order-team-page .order-lunch-title{
    font-size:clamp(44px, 8.6vw, 68px);
    line-height:1.04;
  }
}

@media (max-width: 560px){
  .order-team-page .order-lunch-title{
    font-size:clamp(39px, 11vw, 56px);
  }

  .order-team-page .team-form{
    padding:13px !important;
  }
}


/* =========================================================
   LEGAL / TRUST PAGES
========================================================= */

.legal-page{
  padding-top:42px;
  padding-bottom:34px;
}

.legal-hero{
  display:grid;
  grid-template-columns:minmax(0, 1fr) minmax(260px, 360px);
  gap:24px;
  align-items:end;
  padding:34px;
  border-radius:28px;
  background:
    radial-gradient(900px 300px at 12% 0%, rgba(31,107,84,.10), transparent 58%),
    radial-gradient(700px 260px at 100% 12%, rgba(201,164,74,.10), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,250,246,.96));
}

.legal-kicker{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  margin:0 0 14px;
  padding:0 14px;
  border-radius:999px;
  border:1px solid rgba(201,164,74,.34);
  background:rgba(255,255,255,.72);
  color:#a66b08;
  font-size:12px;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
}

.legal-hero h1{
  margin:0;
  color:var(--brand);
  font-family:"Cormorant Garamond", Georgia, "Times New Roman", serif;
  font-weight:700;
  font-size:clamp(48px, 6vw, 84px);
  line-height:.92;
  letter-spacing:-.055em;
}

.legal-lead{
  margin:18px 0 0;
  max-width:780px;
  color:rgba(31,42,36,.76);
  font-size:clamp(17px, 1.6vw, 21px);
  line-height:1.65;
}

.legal-hero-card{
  border-radius:22px;
  border:1px solid rgba(31,107,84,.14);
  background:rgba(255,255,255,.72);
  padding:20px;
  box-shadow:0 14px 30px rgba(0,0,0,.05);
}

.legal-mini-title{
  margin:0 0 8px;
  color:var(--brand);
  font-weight:950;
  letter-spacing:-.01em;
}

.legal-contact-link{
  display:block;
  margin-top:10px;
  color:var(--text);
  font-weight:850;
}

.legal-contact-link:hover{
  color:var(--brand);
}

.legal-layout{
  display:grid;
  grid-template-columns:minmax(230px, 300px) minmax(0, 1fr);
  gap:22px;
  align-items:start;
  margin-top:22px;
}

.legal-summary{
  position:sticky;
  top:calc(var(--headerH) + 18px);
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(620px 200px at 0% 0%, rgba(31,107,84,.08), transparent 58%),
    rgba(255,255,255,.86);
}

.legal-checklist{
  display:grid;
  gap:12px;
  margin:14px 0 0;
  padding:0;
  list-style:none;
}

.legal-checklist li{
  position:relative;
  padding-left:28px;
  color:var(--muted);
  font-size:14px;
  line-height:1.55;
}

.legal-checklist li::before{
  content:"✓";
  position:absolute;
  left:0;
  top:.05em;
  width:19px;
  height:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(31,107,84,.10);
  color:var(--brand);
  font-size:12px;
  font-weight:950;
}

.legal-content{
  padding:30px;
  border-radius:28px;
  background:rgba(255,255,255,.92);
}

.legal-section{
  padding:0 0 26px;
  margin:0 0 26px;
  border-bottom:1px solid rgba(31,42,36,.10);
}

.legal-section:last-child{
  padding-bottom:0;
  margin-bottom:0;
  border-bottom:none;
}

.legal-section h2{
  margin:0 0 12px;
  color:var(--brand);
  font-size:clamp(24px, 2.4vw, 34px);
  line-height:1.05;
}

.legal-section p,
.legal-section li{
  color:var(--muted);
  font-size:16px;
  line-height:1.78;
}

.legal-section p{
  margin:0 0 12px;
}

.legal-section ul{
  margin:12px 0 0;
  padding-left:22px;
}

.legal-section li + li{
  margin-top:8px;
}

.legal-info-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}

.legal-info-grid div{
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(31,42,36,.10);
  background:rgba(31,107,84,.045);
}

.legal-info-grid span{
  display:block;
  margin-bottom:4px;
  color:var(--muted);
  font-size:12px;
  font-weight:850;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.legal-info-grid strong{
  display:block;
  font-size:15px;
  overflow-wrap:anywhere;
}

.legal-note-section{
  padding:22px !important;
  border:1px solid rgba(201,164,74,.24) !important;
  border-radius:22px;
  background:
    radial-gradient(620px 200px at 0% 0%, rgba(201,164,74,.08), transparent 62%),
    rgba(255,250,242,.72);
}


.privacy-cookie-section{
  background:
    radial-gradient(620px 200px at 0% 0%, rgba(31,107,84,.07), transparent 62%),
    rgba(255,255,255,.72) !important;
  border-color:rgba(31,107,84,.16) !important;
}

.legal-updated{
  margin-top:18px !important;
  font-size:14px !important;
}

@media (max-width: 900px){
  .legal-page{
    padding-top:28px;
  }

  .legal-hero,
  .legal-layout{
    grid-template-columns:1fr;
  }

  .legal-hero{
    padding:26px 22px;
  }

  .legal-summary{
    position:relative;
    top:auto;
  }
}

@media (max-width: 640px){
  .legal-page{
    padding-top:20px;
  }

  .legal-hero,
  .legal-content,
  .legal-summary{
    border-radius:22px;
  }

  .legal-hero,
  .legal-content{
    padding:20px 16px;
  }

  .legal-hero h1{
    font-size:clamp(40px, 13vw, 54px);
  }

  .legal-lead,
  .legal-section p,
  .legal-section li{
    font-size:15px;
    line-height:1.68;
  }

  .legal-info-grid{
    grid-template-columns:1fr;
  }
}


/* =========================================================
   ALLERGEN PAGE
========================================================= */

.allergen-page{
  padding-bottom:46px;
}

.allergen-hero{
  position:relative;
  overflow:hidden;
}

.allergen-hero::after{
  content:"";
  position:absolute;
  top:0;
  right:0;
  bottom:0;
  width:36%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,.70) 35%, rgba(255,255,255,.12)),
    url('/assets/img/hero.jpg') center / cover no-repeat;
  opacity:.76;
  pointer-events:none;
}

.allergen-hero .legal-hero-copy,
.allergen-hero .legal-hero-card{
  position:relative;
  z-index:2;
}

.allergen-safety-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  margin-top:18px;
}

.allergen-safety-card{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr);
  gap:14px;
  align-items:start;
  min-height:132px;
  padding:20px;
  border-radius:24px;
  background:rgba(255,255,255,.86);
}

.allergen-card-icon,
.allergen-important-icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.20);
  background:rgba(31,107,84,.08);
  color:var(--brand);
  font-weight:950;
  line-height:1;
}

.allergen-card-icon-warn{
  border-color:rgba(199,123,0,.28);
  background:rgba(199,123,0,.08);
  color:#9f6210;
}

.allergen-card-icon-gold{
  border-color:rgba(201,164,74,.34);
  background:rgba(201,164,74,.10);
  color:#8f6a18;
}

.allergen-safety-card h2{
  margin:0 0 8px;
  color:var(--brand);
  font-size:18px;
  line-height:1.15;
}

.allergen-safety-card p{
  margin:0;
  color:var(--muted);
  font-size:14px;
  line-height:1.65;
}

.allergen-important{
  display:grid;
  grid-template-columns:58px minmax(0, 1fr);
  gap:18px;
  align-items:start;
  margin-top:22px;
  padding:24px 28px;
  border-radius:24px;
  background:
    radial-gradient(760px 220px at 0% 0%, rgba(31,107,84,.10), transparent 58%),
    rgba(255,255,255,.78);
}

.allergen-important-icon{
  width:54px;
  height:54px;
  font-size:20px;
}

.allergen-important h2,
.allergen-table-head h2,
.allergen-cta h2,
.allergen-bottom-links h2{
  margin:0 0 8px;
  color:var(--brand);
  line-height:1.08;
}

.allergen-important p,
.allergen-cta p,
.allergen-bottom-links p{
  margin:0;
  color:var(--muted);
  line-height:1.7;
}

.allergen-table-card{
  margin-top:22px;
  padding:0;
  overflow:hidden;
  border-radius:28px;
  background:rgba(255,255,255,.92);
}

.allergen-table-head{
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:18px;
  padding:26px 28px 18px;
}

.allergen-table-head .legal-kicker{
  margin-bottom:10px;
}

.allergen-table-head p:last-child{
  max-width:320px;
  font-size:13px;
  text-align:right;
}

.allergen-legend{
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:18px 30px;
  padding:16px 28px;
  border-top:1px solid rgba(31,42,36,.08);
  border-bottom:1px solid rgba(31,42,36,.08);
  background:rgba(252,251,249,.82);
  color:var(--muted);
  font-size:14px;
}

.allergen-legend span{
  display:inline-flex;
  align-items:center;
  gap:8px;
}

.allergen-legend strong,
.allergen-symbol{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  font-weight:950;
  line-height:1;
}

.allergen-legend .contains,
.allergen-symbol.contains{
  background:var(--brand);
  color:#fff;
}

.allergen-legend .trace,
.allergen-symbol.trace{
  border:2px solid #c98716;
  color:#a66b08;
  background:#fff;
}

.allergen-legend .not-planned,
.allergen-symbol-none{
  color:var(--muted);
  font-weight:950;
}

.allergen-matrix .allergen-symbol,
.allergen-matrix .allergen-symbol-none{
  margin:0 auto;
}

.allergen-table-wrap{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
}

.allergen-table-wrap:focus-visible{
  outline:4px solid var(--ring);
  outline-offset:-4px;
}

.allergen-matrix{
  width:100%;
  min-width:1120px;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.allergen-matrix th,
.allergen-matrix td{
  border-right:1px solid rgba(31,42,36,.10);
  border-bottom:1px solid rgba(31,42,36,.10);
  padding:12px 10px;
  text-align:center;
  vertical-align:middle;
}

.allergen-matrix td{
  min-width:72px;
  height:48px;
}

.allergen-matrix thead th{
  position:sticky;
  top:0;
  z-index:3;
  background:rgba(252,251,249,.98);
  color:rgba(31,42,36,.86);
  font-size:11px;
  font-weight:950;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
}

.allergen-matrix .dish-col,
.allergen-matrix tbody th{
  position:sticky;
  left:0;
  z-index:2;
  min-width:210px;
  text-align:left;
  background:rgba(255,255,255,.98);
  color:var(--text);
  font-weight:900;
}

.allergen-matrix thead .dish-col{
  z-index:4;
  background:rgba(252,251,249,.98);
}

.allergen-matrix tbody tr:hover td,
.allergen-matrix tbody tr:hover th{
  background:rgba(31,107,84,.035);
}

.allergen-matrix td{
  color:var(--muted);
  font-weight:850;
}


.allergen-table-wrap::-webkit-scrollbar{
  height:10px;
}

.allergen-table-wrap::-webkit-scrollbar-track{
  background:rgba(31,42,36,.06);
  border-radius:999px;
}

.allergen-table-wrap::-webkit-scrollbar-thumb{
  background:rgba(31,107,84,.28);
  border-radius:999px;
}

@media (max-width: 760px){
  .allergen-matrix{
    min-width:1180px;
  }

  .allergen-matrix th,
  .allergen-matrix td{
    padding:10px 8px;
  }

  .allergen-matrix .dish-col,
  .allergen-matrix tbody th{
    min-width:175px;
    max-width:175px;
    white-space:normal;
  }
}

.allergen-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:22px;
  margin-top:22px;
  padding:26px 30px;
  border-radius:24px;
  border-color:rgba(201,164,74,.24);
  background:
    radial-gradient(760px 220px at 0% 0%, rgba(201,164,74,.09), transparent 62%),
    rgba(255,250,242,.78);
}

.allergen-cta p{
  max-width:800px;
}

.allergen-cta .btn{
  flex:0 0 auto;
  min-width:190px;
  text-align:center;
}

.allergen-bottom-links{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:0;
  margin-top:22px;
  padding:0;
  overflow:hidden;
  border-radius:24px;
  background:rgba(255,255,255,.88);
}

.allergen-bottom-links article{
  padding:26px;
  border-right:1px solid rgba(31,42,36,.10);
}

.allergen-bottom-links article:last-child{
  border-right:none;
}

.allergen-bottom-links .btn{
  margin-top:16px;
}

@media (max-width: 1050px){
  .allergen-safety-grid{
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }

  .allergen-hero::after{
    width:28%;
    opacity:.42;
  }
}

@media (max-width: 760px){
  .allergen-hero::after{
    display:none;
  }

  .allergen-safety-grid,
  .allergen-bottom-links{
    grid-template-columns:1fr;
  }

  .allergen-safety-card{
    min-height:0;
  }

  .allergen-important{
    grid-template-columns:1fr;
    padding:22px;
  }

  .allergen-table-head,
  .allergen-cta{
    flex-direction:column;
    align-items:flex-start;
  }

  .allergen-table-head p:last-child{
    text-align:left;
  }

  .allergen-table-side-note{
    display:block;
    max-width:none;
    padding-top:0;
  }

  .allergen-table-card-v2 .allergen-table-side-note p{
    text-align:left;
    font-size:12px;
  }

  .allergen-legend{
    align-items:flex-start;
    flex-direction:column;
    gap:10px;
  }

  .allergen-matrix{
    min-width:980px;
    font-size:12px;
  }

  .allergen-matrix .dish-col,
  .allergen-matrix tbody th{
    min-width:170px;
  }

  .allergen-cta .btn{
    width:100%;
  }

  .allergen-bottom-links article{
    border-right:none;
    border-bottom:1px solid rgba(31,42,36,.10);
  }

  .allergen-bottom-links article:last-child{
    border-bottom:none;
  }
}


/* =========================================================
   ORDER HERO SOFT FADE PATCH V2 — lunch & team
   CSS-only visual layer. Keeps the hero image rich, softens
   the left transition and adds a gentle bottom fade.
========================================================= */

.order-page-redesign .order-lunch-hero{
  isolation:isolate;
}

/* Softer base veil: keeps the copy area calm without washing out the food. */
.order-page-redesign .order-lunch-hero::before{
  background:
    linear-gradient(
      90deg,
      rgba(244,241,234,.98) 0%,
      rgba(244,241,234,.90) 31%,
      rgba(244,241,234,.52) 49%,
      rgba(244,241,234,.16) 64%,
      rgba(244,241,234,0) 82%
    );
  z-index:1;
}

/* Narrower creamy fade at the photo edge: less milky, more premium. */
.order-page-redesign .order-lunch-hero-media::before{
  content:"";
  position:absolute;
  z-index:2;
  top:0;
  bottom:0;
  left:0;
  width:40%;
  pointer-events:none;
  background:
    radial-gradient(360px 220px at 8% 40%, rgba(244,241,234,.36), transparent 66%),
    linear-gradient(
      90deg,
      rgba(244,241,234,.72) 0%,
      rgba(244,241,234,.46) 34%,
      rgba(244,241,234,.18) 64%,
      rgba(244,241,234,0) 100%
    );
}

/* Bottom image fade: makes the photo flow into the content below. */
.order-page-redesign .order-lunch-hero-media::after{
  content:"";
  position:absolute;
  z-index:3;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(244,241,234,0) 54%,
      rgba(244,241,234,.12) 72%,
      rgba(244,241,234,.44) 90%,
      rgba(244,241,234,.72) 100%
    );
}

/* Extra bottom blend above the image layer, limited to the photo side. */
.order-page-redesign .order-lunch-hero::after{
  content:"";
  position:absolute;
  z-index:3;
  left:43%;
  right:0;
  bottom:0;
  height:32%;
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(244,241,234,0) 0%,
      rgba(244,241,234,.12) 42%,
      rgba(244,241,234,.50) 82%,
      rgba(244,241,234,.78) 100%
    );
}

/* Keep text and trust elements above the decorative fade layers. */
.order-page-redesign .order-lunch-hero-copy{
  position:relative;
  z-index:4;
}

.order-page-redesign .order-lunch-hero-media img{
  transform:scale(1.012);
}

/* Team image has more dark negative space, so only a tiny bit more edge fade. */
.order-team-page .order-lunch-hero-media::before{
  width:44%;
  background:
    radial-gradient(380px 230px at 8% 40%, rgba(244,241,234,.40), transparent 67%),
    linear-gradient(
      90deg,
      rgba(244,241,234,.76) 0%,
      rgba(244,241,234,.48) 34%,
      rgba(244,241,234,.20) 64%,
      rgba(244,241,234,0) 100%
    );
}

.order-team-page .order-lunch-hero::after{
  left:41%;
  height:34%;
}

@media (max-width: 1060px){
  /* On tablet/mobile the image sits below the copy, so the fade becomes vertical. */
  .order-page-redesign .order-lunch-hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(244,241,234,.98) 0%,
        rgba(244,241,234,.90) 48%,
        rgba(244,241,234,.36) 76%,
        rgba(244,241,234,.08) 100%
      );
  }

  .order-page-redesign .order-lunch-hero-media::before{
    top:0;
    right:0;
    bottom:auto;
    left:0;
    width:100%;
    height:34%;
    background:
      linear-gradient(
        180deg,
        rgba(244,241,234,.78) 0%,
        rgba(244,241,234,.42) 45%,
        rgba(244,241,234,.14) 74%,
        rgba(244,241,234,0) 100%
      );
  }

  .order-page-redesign .order-lunch-hero-media::after{
    background:
      linear-gradient(
        180deg,
        rgba(244,241,234,0) 48%,
        rgba(244,241,234,.20) 76%,
        rgba(244,241,234,.62) 100%
      );
  }

  .order-page-redesign .order-lunch-hero::after{
    left:0;
    right:0;
    bottom:0;
    height:120px;
    background:
      linear-gradient(
        180deg,
        rgba(244,241,234,0) 0%,
        rgba(244,241,234,.30) 62%,
        rgba(244,241,234,.74) 100%
      );
  }
}

@media (max-width: 560px){
  .order-page-redesign .order-lunch-hero-media::before{
    height:38%;
  }

  .order-page-redesign .order-lunch-hero::after{
    height:96px;
  }
}

/* =========================================================
   HOMEPAGE HERO PREMIUM PATCH — menu-style fade hero
   - desktop: food image reaches the header area and fades into copy
   - no practical-info bar added under the hero
   - mobile/tablet: keeps safe stacked layout
========================================================= */

.nilo-way-hero{
  position:relative;
  margin-top:calc(var(--headerH) * -1);
  min-height:clamp(690px, 54vw, 820px);
  padding:calc(var(--headerH) + clamp(76px, 8vw, 126px)) 0 clamp(82px, 8vw, 118px);
  overflow:hidden;
  background:
    radial-gradient(900px 560px at 4% 18%, rgba(31,107,84,.10), transparent 62%),
    radial-gradient(880px 520px at 84% 4%, rgba(201,164,74,.08), transparent 62%),
    linear-gradient(180deg, rgba(250,248,243,.96) 0%, var(--bg) 100%);
  isolation:isolate;
}

.nilo-way-hero::before{
  z-index:0;
}

.nilo-way-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:190px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(244,241,234,0) 0%,
    rgba(244,241,234,.36) 48%,
    rgba(244,241,234,.92) 88%,
    var(--bg) 100%
  );
}

.nilo-way-hero > .wrap{
  position:relative;
  z-index:3;
}

.nilo-way-shell{
  display:block;
  min-height:0;
}

.nilo-way-copy{
  position:relative;
  z-index:4;
  width:min(660px, 48vw);
  max-width:660px;
  padding-left:clamp(0px, 4.2vw, 70px);
}

.nilo-way-title{
  max-width:670px;
  text-shadow:0 10px 28px rgba(31,107,84,.08);
}

.nilo-short-inline{
  margin-top:30px;
  background:
    radial-gradient(640px 190px at 10% 0%, rgba(31,107,84,.07), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.84), rgba(252,250,246,.80));
  border-color:rgba(31,107,84,.12);
  box-shadow:
    0 18px 46px rgba(0,0,0,.07),
    inset 0 1px 0 rgba(255,255,255,.76);
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
}

.nilo-short-actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:48px;
  padding:0 26px;
}

.nilo-short-actions .btn:first-child::after{
  content:"→";
  margin-left:10px;
  transform:translateY(-1px);
}

.nilo-way-media{
  position:absolute;
  z-index:1;
  top:var(--headerH);
  right:0;
  bottom:0;
  left:42%;
  min-height:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
}

.nilo-way-media img{
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:cover;
  object-position:52% 50%;
  border-radius:0;
}

.nilo-way-media::before,
.nilo-way-media::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:2;
}

.nilo-way-media::before{
  top:0;
  bottom:0;
  left:-2px;
  width:clamp(360px, 41%, 620px);
  background:linear-gradient(
    90deg,
    var(--bg) 0%,
    rgba(244,241,234,.995) 10%,
    rgba(244,241,234,.94) 22%,
    rgba(244,241,234,.76) 38%,
    rgba(244,241,234,.46) 55%,
    rgba(244,241,234,.16) 73%,
    rgba(244,241,234,0) 92%
  );
}

.nilo-way-media::after{
  left:0;
  right:0;
  bottom:-1px;
  height:260px;
  background:linear-gradient(
    180deg,
    rgba(244,241,234,0) 0%,
    rgba(244,241,234,.10) 22%,
    rgba(244,241,234,.34) 48%,
    rgba(244,241,234,.72) 76%,
    var(--bg) 100%
  );
}

.nilo-values-strip{
  position:relative;
  z-index:4;
  margin-top:-8px;
}

@media (max-width: 1180px){
  .nilo-way-copy{
    width:min(620px, 52vw);
    padding-left:clamp(0px, 2.6vw, 38px);
  }

  .nilo-way-title{
    font-size:clamp(54px, 6vw, 84px);
  }

  .nilo-way-media{
    left:45%;
  }

  .nilo-way-media::before{
    width:clamp(310px, 43%, 520px);
  }
}

@media (max-width: 980px){
  .nilo-way-hero{
    margin-top:0;
    min-height:auto;
    padding:34px 0 34px;
  }

  .nilo-way-hero::after{
    height:120px;
  }

  .nilo-way-shell{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    align-items:center;
  }

  .nilo-way-copy{
    width:auto;
    max-width:780px;
    padding-left:0;
  }

  .nilo-way-media{
    position:relative;
    inset:auto;
    min-height:420px;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(31,42,36,.10);
    box-shadow:0 22px 58px rgba(0,0,0,.12);
  }

  .nilo-way-media img{
    min-height:420px;
    border-radius:30px;
    object-position:52% 50%;
  }

  .nilo-way-media::before{
    width:42%;
    background:linear-gradient(
      90deg,
      rgba(244,241,234,.62) 0%,
      rgba(244,241,234,.36) 44%,
      rgba(244,241,234,0) 100%
    );
  }

  .nilo-way-media::after{
    height:170px;
  }

  .nilo-values-strip{
    margin-top:0;
  }
}

@media (max-width: 640px){
  .nilo-way-hero{
    padding:26px 0 30px;
  }

  .nilo-way-title{
    font-size:clamp(46px, 13vw, 64px);
  }

  .nilo-short-inline{
    margin-top:22px;
  }

  .nilo-short-actions{
    display:grid;
    grid-template-columns:1fr;
    gap:10px;
  }

  .nilo-short-actions .btn{
    width:100%;
  }

  .nilo-way-media{
    min-height:310px;
    border-radius:24px;
  }

  .nilo-way-media img{
    min-height:310px;
    border-radius:24px;
    object-position:50% 50%;
  }

  .nilo-way-media::before{
    display:none;
  }
}

/* =========================================================
   LUNCH HERO BOTTOM FADE FIX — stronger menu/home-style blend
   Scope: lunch order page only. Keeps order UI/JS hooks untouched.
========================================================= */

main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero{
  overflow:hidden;
}

/* Make the image itself blend out at the bottom instead of ending as a hard block. */
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media::after{
  content:"";
  position:absolute;
  z-index:5;
  left:0;
  right:0;
  bottom:-1px;
  top:auto;
  height:clamp(190px, 18vw, 300px);
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(244,241,234,0) 0%,
      rgba(244,241,234,.10) 24%,
      rgba(244,241,234,.34) 52%,
      rgba(244,241,234,.72) 78%,
      var(--bg) 100%
    );
}

/* Extra soft bridge from the photo into the order builder, limited to the image side. */
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::after{
  content:"";
  position:absolute;
  z-index:5;
  left:38%;
  right:0;
  bottom:-2px;
  height:clamp(155px, 14vw, 245px);
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(244,241,234,0) 0%,
      rgba(244,241,234,.16) 34%,
      rgba(244,241,234,.52) 70%,
      var(--bg) 100%
    );
}

/* Keep the text side and trust row clean above the fade. */
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-copy{
  position:relative;
  z-index:6;
}

@media (max-width: 1060px){
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media::after{
    height:clamp(150px, 28vw, 240px);
    background:
      linear-gradient(
        180deg,
        rgba(244,241,234,0) 0%,
        rgba(244,241,234,.18) 42%,
        rgba(244,241,234,.70) 82%,
        var(--bg) 100%
      );
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::after{
    left:0;
    height:clamp(115px, 20vw, 180px);
  }
}

/* =========================================================
   LUNCH HERO PREMIUM REBUILD V3 — wide image, menu/contact-style fade
   Scope: /pages/bestellen/lunch.html only via data-order-mode="lunch".
   Keeps #orderRoot, cart, category tabs and checkout logic untouched.
========================================================= */

main[data-order-mode="lunch"].order-page-redesign{
  max-width:1440px;
  padding-top:0;
  padding-bottom:34px;
}

main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero{
  position:relative;
  display:block;
  min-height:clamp(610px, 45vw, 720px);
  margin:calc(var(--headerH) * -1) calc(var(--pad) * -1) 0;
  padding:
    calc(var(--headerH) + clamp(58px, 5.8vw, 94px))
    clamp(22px, 6.8vw, 108px)
    clamp(150px, 12vw, 205px);
  border-radius:0;
  overflow:hidden;
  border-bottom:1px solid rgba(31,42,36,.06);
  background:
    radial-gradient(820px 420px at 5% 15%, rgba(31,107,84,.10), transparent 62%),
    radial-gradient(900px 420px at 88% 0%, rgba(201,164,74,.08), transparent 64%),
    var(--bg);
  isolation:isolate;
}

/* Full-width hero image layer. The new image has intentional dark table space on the left. */
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media{
  position:absolute;
  z-index:0;
  inset:0 0 -42px 0;
  width:auto;
  height:auto;
  overflow:hidden;
  border-radius:0;
  background:transparent;
}

main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media img{
  width:100%;
  height:100%;
  min-height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 47%;
  border-radius:0;
  filter:saturate(1.04) contrast(1.02);
  transform:none;
}

/* Disable older small-image fade patches on the image element. */
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media::before,
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media::after{
  content:"";
  display:none !important;
}

/* Left fade: keeps copy readable but avoids the hard vertical photo edge. */
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      var(--bg) 0%,
      rgba(244,241,234,.995) 13%,
      rgba(244,241,234,.94) 25%,
      rgba(244,241,234,.78) 38%,
      rgba(244,241,234,.50) 52%,
      rgba(244,241,234,.20) 68%,
      rgba(244,241,234,0) 86%
    );
}

/* Bottom fade: full-width bridge into the order builder below. */
main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:-1px;
  height:clamp(220px, 20vw, 340px);
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(244,241,234,0) 0%,
      rgba(244,241,234,.08) 26%,
      rgba(244,241,234,.28) 50%,
      rgba(244,241,234,.62) 74%,
      var(--bg) 100%
    );
}

main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-copy{
  position:relative;
  z-index:4;
  max-width:660px;
}

main[data-order-mode="lunch"].order-page-redesign .order-lunch-kicker{
  color:var(--brand);
}

main[data-order-mode="lunch"].order-page-redesign .order-lunch-title{
  max-width:640px;
  text-shadow:0 10px 28px rgba(31,107,84,.08);
}

main[data-order-mode="lunch"].order-page-redesign .order-lunch-lead{
  max-width:560px;
}

main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust{
  position:relative;
  z-index:4;
  max-width:720px;
}

/* Order builder overlaps the soft fade, like the menu/category bar and contact cards. */
main[data-order-mode="lunch"].order-page-redesign .order-builder-section{
  position:relative;
  z-index:6;
  margin-top:clamp(-70px, -5vw, -42px);
}

main[data-order-mode="lunch"].order-page-redesign .order-flow-panel{
  background:
    radial-gradient(520px 120px at 14% 0%, rgba(31,107,84,.055), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,250,246,.96));
  border-color:rgba(31,42,36,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.075), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

main[data-order-mode="lunch"].order-page-redesign .order-cat-nav-wrap{
  background:linear-gradient(180deg, rgba(244,241,234,.98), rgba(244,241,234,.90) 72%, rgba(244,241,234,0));
}

@media (max-width:1260px){
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero{
    padding-left:clamp(22px, 4vw, 58px);
    padding-right:clamp(22px, 4vw, 58px);
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::before{
    background:
      linear-gradient(
        90deg,
        var(--bg) 0%,
        rgba(244,241,234,.995) 16%,
        rgba(244,241,234,.92) 30%,
        rgba(244,241,234,.72) 45%,
        rgba(244,241,234,.38) 62%,
        rgba(244,241,234,0) 86%
      );
  }
}

@media (max-width:1060px){
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero{
    min-height:0;
    margin:0 calc(var(--pad) * -1) 0;
    padding:42px 24px 300px;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media{
    top:auto;
    left:0;
    right:0;
    bottom:-26px;
    height:390px;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media img{
    object-position:62% 52%;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::before{
    background:
      linear-gradient(
        180deg,
        var(--bg) 0%,
        rgba(244,241,234,.98) 44%,
        rgba(244,241,234,.72) 64%,
        rgba(244,241,234,.24) 86%,
        rgba(244,241,234,0) 100%
      );
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::after{
    height:190px;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-builder-section{
    margin-top:24px;
  }
}

@media (max-width:820px){
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero{
    margin-left:-14px;
    margin-right:-14px;
    padding:34px 18px 255px;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media{
    height:330px;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-title{
    font-size:clamp(48px, 15vw, 68px);
  }
}

@media (max-width:560px){
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero{
    padding:28px 16px 222px;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media{
    height:280px;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media img{
    object-position:66% 50%;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::after{
    height:145px;
  }
}

/* =========================================================
   TEAM HERO PREMIUM REBUILD V1 — wide image + menu/contact-style fade
   Scope: /pages/bestellen/team.html only via data-order-mode="team".
   Keeps cart, category tabs, invoice block and checkout logic untouched.
========================================================= */

main[data-order-mode="team"].order-page-redesign{
  max-width:1440px;
  padding-top:0;
  padding-bottom:34px;
}

main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
  position:relative;
  display:block;
  min-height:clamp(620px, 45vw, 730px);
  margin:calc(var(--headerH) * -1) calc(var(--pad) * -1) 0;
  padding:
    calc(var(--headerH) + clamp(58px, 5.8vw, 94px))
    clamp(22px, 6.8vw, 108px)
    clamp(152px, 12vw, 208px);
  border-radius:0;
  overflow:hidden;
  border-bottom:1px solid rgba(31,42,36,.06);
  background:
    radial-gradient(820px 420px at 5% 15%, rgba(31,107,84,.10), transparent 62%),
    radial-gradient(900px 420px at 88% 0%, rgba(201,164,74,.08), transparent 64%),
    var(--bg);
  isolation:isolate;
}

main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media{
  position:absolute;
  z-index:0;
  inset:0 0 -42px 0;
  width:auto;
  height:auto;
  overflow:hidden;
  border-radius:0;
  background:transparent;
}

main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media img{
  width:100%;
  height:100%;
  min-height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:0;
  filter:saturate(1.04) contrast(1.02);
  transform:none;
}

main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media::before,
main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media::after{
  content:"";
  display:none !important;
}

main[data-order-mode="team"].order-page-redesign .order-lunch-hero::before{
  content:"";
  position:absolute;
  z-index:1;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      var(--bg) 0%,
      rgba(244,241,234,.995) 13%,
      rgba(244,241,234,.94) 25%,
      rgba(244,241,234,.78) 38%,
      rgba(244,241,234,.50) 52%,
      rgba(244,241,234,.20) 68%,
      rgba(244,241,234,0) 86%
    );
}

main[data-order-mode="team"].order-page-redesign .order-lunch-hero::after{
  content:"";
  position:absolute;
  z-index:2;
  left:0;
  right:0;
  bottom:-1px;
  height:clamp(220px, 20vw, 340px);
  pointer-events:none;
  background:
    linear-gradient(
      180deg,
      rgba(244,241,234,0) 0%,
      rgba(244,241,234,.08) 26%,
      rgba(244,241,234,.28) 50%,
      rgba(244,241,234,.62) 74%,
      var(--bg) 100%
    );
}

main[data-order-mode="team"].order-page-redesign .order-lunch-hero-copy{
  position:relative;
  z-index:4;
  max-width:690px;
}

main[data-order-mode="team"].order-page-redesign .order-lunch-kicker{
  color:var(--brand);
}

main[data-order-mode="team"].order-page-redesign .order-lunch-title{
  max-width:660px;
  text-shadow:0 10px 28px rgba(31,107,84,.08);
}

main[data-order-mode="team"].order-page-redesign .order-lunch-lead{
  max-width:570px;
}

main[data-order-mode="team"].order-page-redesign .order-lunch-trust{
  position:relative;
  z-index:4;
  max-width:760px;
}

main[data-order-mode="team"].order-page-redesign .order-builder-section{
  position:relative;
  z-index:6;
  margin-top:clamp(-70px, -5vw, -42px);
}

main[data-order-mode="team"].order-page-redesign .order-flow-panel{
  background:
    radial-gradient(520px 120px at 14% 0%, rgba(31,107,84,.055), transparent 62%),
    linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,250,246,.96));
  border-color:rgba(31,42,36,.10);
  box-shadow:0 18px 44px rgba(0,0,0,.075), inset 0 1px 0 rgba(255,255,255,.78);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}

main[data-order-mode="team"].order-page-redesign .order-cat-nav-wrap{
  background:linear-gradient(180deg, rgba(244,241,234,.98), rgba(244,241,234,.90) 72%, rgba(244,241,234,0));
}

@media (max-width:1260px){
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    padding-left:clamp(22px, 4vw, 58px);
    padding-right:clamp(22px, 4vw, 58px);
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero::before{
    background:
      linear-gradient(
        90deg,
        var(--bg) 0%,
        rgba(244,241,234,.995) 16%,
        rgba(244,241,234,.92) 30%,
        rgba(244,241,234,.72) 45%,
        rgba(244,241,234,.38) 62%,
        rgba(244,241,234,0) 86%
      );
  }
}

@media (max-width:1060px){
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    min-height:0;
    margin:0 calc(var(--pad) * -1) 0;
    padding:42px 24px 300px;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media{
    top:auto;
    left:0;
    right:0;
    bottom:-26px;
    height:390px;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media img{
    object-position:58% 50%;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero::before{
    background:
      linear-gradient(
        180deg,
        var(--bg) 0%,
        rgba(244,241,234,.98) 44%,
        rgba(244,241,234,.72) 64%,
        rgba(244,241,234,.24) 86%,
        rgba(244,241,234,0) 100%
      );
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero::after{
    height:190px;
  }

  main[data-order-mode="team"].order-page-redesign .order-builder-section{
    margin-top:24px;
  }
}

@media (max-width:820px){
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    margin-left:-14px;
    margin-right:-14px;
    padding:34px 18px 255px;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media{
    height:330px;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-title{
    font-size:clamp(48px, 15vw, 68px);
  }
}

@media (max-width:560px){
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    padding:28px 16px 222px;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media{
    height:280px;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media img{
    object-position:61% 50%;
  }

  main[data-order-mode="team"].order-page-redesign .order-lunch-hero::after{
    height:145px;
  }
}


/* =========================================================
   HOME + CONTACT HERO RESTORE PATCH V5
   Scope only:
   - /index.html hero via .nilo-way-hero
   - /pages/contact.html hero via .contact-page-v2 .contact-hero-v2
   Does not touch menu/lunch/team/success/order logic.
========================================================= */

/* -------------------------
   HOME HERO RESTORE
   The previous absolute hero image was being positioned relative to
   the .wrap. Keep the wrap static here so the image/fades use the full
   hero section, like the menu page technique.
------------------------- */

.nilo-way-hero{
  position:relative;
  margin-top:calc(var(--headerH) * -1);
  min-height:clamp(690px, 54vw, 820px);
  padding:calc(var(--headerH) + clamp(76px, 8vw, 126px)) 0 clamp(82px, 8vw, 118px);
  overflow:hidden;
  background:
    radial-gradient(900px 560px at 4% 18%, rgba(31,107,84,.10), transparent 62%),
    radial-gradient(880px 520px at 84% 4%, rgba(201,164,74,.08), transparent 62%),
    linear-gradient(180deg, rgba(250,248,243,.96) 0%, var(--bg) 100%);
  isolation:isolate;
}

.nilo-way-hero > .wrap{
  position:static;
  z-index:auto;
}

.nilo-way-hero::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:190px;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(244,241,234,0) 0%,
    rgba(244,241,234,.34) 48%,
    rgba(244,241,234,.90) 88%,
    var(--bg) 100%
  );
}

.nilo-way-shell{
  display:block;
  min-height:0;
}

.nilo-way-copy{
  position:relative;
  z-index:4;
  width:min(660px, 48vw);
  max-width:660px;
  padding-left:clamp(0px, 4.2vw, 70px);
}

.nilo-way-media{
  position:absolute;
  z-index:1;
  top:var(--headerH);
  right:0;
  bottom:0;
  left:42%;
  min-height:0;
  border:0;
  border-radius:0;
  overflow:hidden;
  background:transparent;
  box-shadow:none;
}

.nilo-way-media img{
  width:100%;
  height:100%;
  min-height:0;
  display:block;
  object-fit:cover;
  object-position:52% 50%;
  border-radius:0;
}

.nilo-way-media::before,
.nilo-way-media::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:2;
}

.nilo-way-media::before{
  top:0;
  bottom:0;
  left:-2px;
  width:clamp(360px, 41%, 620px);
  background:linear-gradient(
    90deg,
    var(--bg) 0%,
    rgba(244,241,234,.995) 10%,
    rgba(244,241,234,.94) 22%,
    rgba(244,241,234,.76) 38%,
    rgba(244,241,234,.46) 55%,
    rgba(244,241,234,.16) 73%,
    rgba(244,241,234,0) 92%
  );
}

.nilo-way-media::after{
  left:0;
  right:0;
  bottom:-1px;
  height:260px;
  background:linear-gradient(
    180deg,
    rgba(244,241,234,0) 0%,
    rgba(244,241,234,.10) 22%,
    rgba(244,241,234,.34) 48%,
    rgba(244,241,234,.72) 76%,
    var(--bg) 100%
  );
}

.nilo-values-strip{
  position:relative;
  z-index:4;
  margin-top:-8px;
}

@media (max-width: 1180px){
  .nilo-way-copy{
    width:min(620px, 52vw);
    padding-left:clamp(0px, 2.6vw, 38px);
  }

  .nilo-way-media{
    left:45%;
  }

  .nilo-way-media::before{
    width:clamp(310px, 43%, 520px);
  }
}

@media (max-width: 980px){
  .nilo-way-hero{
    margin-top:0;
    min-height:auto;
    padding:34px 0 34px;
  }

  .nilo-way-hero > .wrap{
    position:relative;
  }

  .nilo-way-hero::after{
    height:120px;
  }

  .nilo-way-shell{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    align-items:center;
  }

  .nilo-way-copy{
    width:auto;
    max-width:780px;
    padding-left:0;
  }

  .nilo-way-media{
    position:relative;
    inset:auto;
    min-height:420px;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(31,42,36,.10);
    box-shadow:0 22px 58px rgba(0,0,0,.12);
  }

  .nilo-way-media img{
    min-height:420px;
    border-radius:30px;
    object-position:52% 50%;
  }

  .nilo-way-media::before{
    width:42%;
    background:linear-gradient(
      90deg,
      rgba(244,241,234,.62) 0%,
      rgba(244,241,234,.36) 44%,
      rgba(244,241,234,0) 100%
    );
  }

  .nilo-way-media::after{
    height:170px;
  }

  .nilo-values-strip{
    margin-top:0;
  }
}

@media (max-width: 640px){
  .nilo-way-hero{
    padding:26px 0 30px;
  }

  .nilo-way-media{
    min-height:310px;
    border-radius:24px;
  }

  .nilo-way-media img{
    min-height:310px;
    border-radius:24px;
    object-position:50% 50%;
  }

  .nilo-way-media::before{
    display:none;
  }
}

/* -------------------------
   CONTACT HERO RESTORE
   Same premium fade approach, but scoped only to contact-page-v2.
------------------------- */

.contact-page-v2{
  padding-top:0;
  padding-bottom:34px;
}

.contact-page-v2 .contact-hero-v2.wrap{
  position:relative;
  display:block;
  width:auto;
  max-width:none;
  min-height:clamp(560px, 42vw, 680px);
  margin:calc(var(--headerH) * -1) 0 0;
  padding:
    calc(var(--headerH) + clamp(76px, 7vw, 116px))
    max(var(--pad), calc((100vw - var(--wrap)) / 2 + var(--pad)))
    clamp(124px, 10vw, 172px);
  overflow:hidden;
  isolation:isolate;
  border-bottom:1px solid rgba(31,42,36,.06);
  background:
    radial-gradient(880px 500px at 4% 18%, rgba(31,107,84,.08), transparent 62%),
    radial-gradient(850px 500px at 88% 8%, rgba(201,164,74,.09), transparent 64%),
    linear-gradient(180deg, rgba(250,248,243,.96) 0%, var(--bg) 100%);
}

.contact-page-v2 .contact-hero-v2::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:210px;
  z-index:3;
  pointer-events:none;
  background:linear-gradient(
    180deg,
    rgba(244,241,234,0) 0%,
    rgba(244,241,234,.22) 34%,
    rgba(244,241,234,.72) 78%,
    var(--bg) 100%
  );
}

.contact-page-v2 .contact-hero-copy-v2{
  position:relative;
  z-index:5;
  width:min(720px, 50vw);
  max-width:720px;
}

.contact-page-v2 .contact-hero-art-v2{
  position:absolute;
  z-index:1;
  top:var(--headerH);
  right:0;
  bottom:0;
  left:48%;
  max-width:none;
  min-height:0;
  width:auto;
  display:block;
  overflow:hidden;
  pointer-events:none;
}

.contact-page-v2 .contact-hero-art-v2 img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:52% 50%;
  filter:none;
}

.contact-page-v2 .contact-hero-art-v2::before,
.contact-page-v2 .contact-hero-art-v2::after{
  content:"";
  position:absolute;
  pointer-events:none;
  z-index:2;
}

.contact-page-v2 .contact-hero-art-v2::before{
  top:0;
  bottom:0;
  left:-2px;
  width:clamp(350px, 44%, 650px);
  background:linear-gradient(
    90deg,
    var(--bg) 0%,
    rgba(244,241,234,.995) 10%,
    rgba(244,241,234,.94) 22%,
    rgba(244,241,234,.76) 39%,
    rgba(244,241,234,.46) 57%,
    rgba(244,241,234,.16) 75%,
    rgba(244,241,234,0) 94%
  );
}

.contact-page-v2 .contact-hero-art-v2::after{
  left:0;
  right:0;
  bottom:-1px;
  height:255px;
  background:linear-gradient(
    180deg,
    rgba(244,241,234,0) 0%,
    rgba(244,241,234,.12) 24%,
    rgba(244,241,234,.38) 54%,
    rgba(244,241,234,.76) 82%,
    var(--bg) 100%
  );
}

.contact-page-v2 .contact-choice-section-v2{
  position:relative;
  z-index:6;
  margin-top:clamp(-118px, -7vw, -72px);
}

@media (max-width: 1080px){
  .contact-page-v2 .contact-hero-v2.wrap{
    min-height:clamp(520px, 50vw, 620px);
  }

  .contact-page-v2 .contact-hero-copy-v2{
    width:min(650px, 54vw);
  }

  .contact-page-v2 .contact-hero-art-v2{
    left:50%;
  }

  .contact-page-v2 .contact-hero-art-v2::before{
    width:clamp(300px, 46%, 540px);
  }
}

@media (max-width: 980px){
  .contact-page-v2 .contact-hero-v2.wrap{
    display:grid;
    grid-template-columns:1fr;
    gap:26px;
    max-width:var(--wrap);
    min-height:0;
    margin:0 auto;
    padding:40px var(--pad) 34px;
    overflow:visible;
    border-bottom:0;
  }

  .contact-page-v2 .contact-hero-v2::after{
    display:none;
  }

  .contact-page-v2 .contact-hero-copy-v2{
    width:auto;
    max-width:780px;
  }

  .contact-page-v2 .contact-hero-art-v2{
    position:relative;
    inset:auto;
    width:100%;
    max-width:720px;
    min-height:360px;
    justify-self:center;
    display:block;
    border-radius:30px;
    overflow:hidden;
    border:1px solid rgba(31,42,36,.10);
    box-shadow:0 22px 58px rgba(0,0,0,.10);
  }

  .contact-page-v2 .contact-hero-art-v2 img{
    min-height:360px;
    object-position:52% 50%;
  }

  .contact-page-v2 .contact-hero-art-v2::before{
    width:44%;
    background:linear-gradient(
      90deg,
      rgba(244,241,234,.60) 0%,
      rgba(244,241,234,.34) 44%,
      rgba(244,241,234,0) 100%
    );
  }

  .contact-page-v2 .contact-hero-art-v2::after{
    height:155px;
  }

  .contact-page-v2 .contact-choice-section-v2{
    margin-top:18px;
  }
}

@media (max-width: 640px){
  .contact-page-v2 .contact-hero-v2.wrap{
    padding-top:30px;
    padding-bottom:24px;
  }

  .contact-page-v2 .contact-hero-art-v2{
    min-height:250px;
    border-radius:24px;
  }

  .contact-page-v2 .contact-hero-art-v2 img{
    min-height:250px;
    object-position:52% 50%;
  }

  .contact-page-v2 .contact-hero-art-v2::before{
    display:none;
  }
}


/* =========================================================
   NILO ICON PACK PATCH — PNG icon system
   Uses:
   /assets/img/icons/nilo/*.png
   /assets/img/icons/badges/*.png

   Safe visual-only layer:
   - keeps existing classes, data-i18n keys, JS hooks and layout
   - replaces inline/text/SVG-mask icons with image-based icons
========================================================= */

.nilo-png-icon,
.nilo-pill-icon img,
.nilo-info-icon img,
.nilo-step-icon img,
.order-hub-meta-icon img,
.order-lunch-trust-icon img,
.confirm-trust-icon img,
.confirm-row-icon img,
.success-next-icon img,
.confirm-thankyou-icon img,
.contact-choice-icon-v2 img,
.contact-method-icon-v2 img,
.contact-response-icon-v2 img,
.contact-step-icon-v2 img,
.contact-selected-icon-v2 img{
  display:block;
  width:1em;
  height:1em;
  object-fit:contain;
  object-position:center;
  flex:0 0 auto;
}

/* Homepage value/info/step icons */
.nilo-pill-icon,
.nilo-info-icon{
  overflow:hidden;
}

.nilo-pill-icon img{
  width:30px;
  height:30px;
}

.nilo-info-icon img{
  width:24px;
  height:24px;
}

.nilo-step-icon img{
  width:52px;
  height:52px;
}

@media (max-width:640px){
  .nilo-step-icon img{
    width:44px;
    height:44px;
  }
}

/* Menu page: keep existing .menu-icon markup but switch from SVG masks to PNGs */
.menu-icon{
  background-color:transparent !important;
  background-image:var(--nilo-icon-url) !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  -webkit-mask:none !important;
  mask:none !important;
  opacity:1;
}

.menu-icon-all{ --nilo-icon-url:url('/assets/img/icons/nilo/grid.png'); }
.menu-icon-combo{ --nilo-icon-url:url('/assets/img/icons/nilo/bowl.png'); }
.menu-icon-curry{ --nilo-icon-url:url('/assets/img/icons/nilo/curry.png'); }
.menu-icon-wok{ --nilo-icon-url:url('/assets/img/icons/nilo/wok.png'); }
.menu-icon-rice-noodles{ --nilo-icon-url:url('/assets/img/icons/nilo/noodles.png'); }
.menu-icon-soup{ --nilo-icon-url:url('/assets/img/icons/nilo/soup.png'); }
.menu-icon-small-bites{ --nilo-icon-url:url('/assets/img/icons/nilo/smallbites.png'); }
.menu-icon-extras{ --nilo-icon-url:url('/assets/img/icons/nilo/extras.png'); }
.menu-icon-fresh{ --nilo-icon-url:url('/assets/img/icons/nilo/leaf.png'); }
.menu-icon-delivery{ --nilo-icon-url:url('/assets/img/icons/nilo/scooter.png'); }
.menu-icon-allergen{ --nilo-icon-url:url('/assets/img/icons/badges/allergen.png'); }
.menu-icon-popular{ --nilo-icon-url:url('/assets/img/icons/badges/popular.png'); }
.menu-icon-spicy{ --nilo-icon-url:url('/assets/img/icons/badges/spicy.png'); }
.menu-icon-peanuts{ --nilo-icon-url:url('/assets/img/icons/badges/peanut.png'); }
.menu-icon-shrimp{ --nilo-icon-url:url('/assets/img/icons/badges/shrimp.png'); }

/* PNGs do not inherit currentColor, so invert only inside green filled buttons */
.menu-btn-primary .menu-icon,
.menu-category-link.is-main .menu-icon,
.menu-category-link.is-active .menu-icon{
  filter:brightness(0) invert(1);
}

/* Keep coloured badge/warning icons readable */
.menu-badge .menu-icon,
.menu-allergen-icon .menu-icon,
.menu-section-kicker .menu-icon,
.menu-section-title .menu-icon,
.menu-trust-icon .menu-icon,
.menu-hero-note-icon .menu-icon{
  filter:none;
}

/* Dish badges on menu/order cards */
.menu-badge,
.order-badge{
  gap:6px;
}

.order-badge{
  justify-content:flex-start;
}

.order-badge-icon{
  width:14px;
  height:14px;
  display:block;
  object-fit:contain;
  flex:0 0 auto;
}

.order-page-redesign .order-badge-icon{
  width:15px;
  height:15px;
}

/* Contact page PNG icons */
.contact-choice-icon-v2 img{
  width:34px;
  height:34px;
}

.contact-method-icon-v2 img,
.contact-response-icon-v2 img,
.contact-step-icon-v2 img{
  width:24px;
  height:24px;
}

.contact-selected-icon-v2 img{
  width:22px;
  height:22px;
}

/* Order hub / lunch / team PNG icons */
.order-hub-meta-icon{
  overflow:hidden;
}

.order-hub-meta-icon img{
  width:18px;
  height:18px;
}

.order-lunch-trust-icon img{
  width:22px;
  height:22px;
}

/* Success page PNG icons */
.success-confirm-page .confirm-trust-icon img{
  width:24px;
  height:24px;
}

.success-confirm-page .confirm-row-icon img,
.success-confirm-page .success-next-icon img{
  width:22px;
  height:22px;
}

.success-confirm-page .confirm-thankyou-icon img{
  width:18px;
  height:18px;
}

/* Prevent old inline SVG sizing rules from affecting replaced image icons */
.nilo-pill-icon svg,
.nilo-info-icon svg,
.nilo-step-icon svg,
.contact-choice-icon-v2 svg,
.contact-method-icon-v2 svg,
.contact-response-icon-v2 svg,
.contact-step-icon-v2 svg{
  display:none;
}


/* =========================================================
   NILO ICON PACK PATCH — size tuning
   Reason: PNG icons are 256x256 with transparent padding, so the
   rendered image box must be larger than a normal SVG icon.
========================================================= */

/* Homepage value strip */
.nilo-pill-icon{
  width:56px;
  height:56px;
}

.nilo-pill-icon img{
  width:44px;
  height:44px;
}

/* Homepage practical info bar */
.nilo-info-icon{
  width:44px;
  height:44px;
}

.nilo-info-icon img{
  width:34px;
  height:34px;
}

/* Homepage 3-step cards */
.nilo-step-icon{
  width:66px;
  height:66px;
}

.nilo-step-icon img{
  width:64px;
  height:64px;
}

/* Menu hero/trust/category icons */
.menu-icon{
  width:22px;
  height:22px;
}

.menu-btn .menu-icon,
.menu-category-link .menu-icon{
  width:20px;
  height:20px;
}

.menu-trust-icon .menu-icon,
.menu-hero-note-icon .menu-icon,
.menu-allergen-icon .menu-icon{
  width:24px;
  height:24px;
}

.menu-section-kicker .menu-icon{
  width:18px;
  height:18px;
}

.menu-section-title .menu-icon{
  width:36px;
  height:36px;
}

/* Menu and order dish badges */
.menu-badge .menu-icon{
  width:16px;
  height:16px;
}

.order-badge-icon,
.order-page-redesign .order-badge-icon{
  width:18px;
  height:18px;
}

/* Contact page */
.contact-choice-icon-v2 img{
  width:48px;
  height:48px;
}

.contact-method-icon-v2 img,
.contact-response-icon-v2 img,
.contact-step-icon-v2 img{
  width:30px;
  height:30px;
}

.contact-selected-icon-v2 img{
  width:30px;
  height:30px;
}

/* Order hub / lunch / team */
.order-hub-meta-icon img{
  width:24px;
  height:24px;
}

.order-lunch-trust-icon img{
  width:30px;
  height:30px;
}

/* Success page */
.success-confirm-page .confirm-trust-icon img{
  width:30px;
  height:30px;
}

.success-confirm-page .confirm-row-icon img,
.success-confirm-page .success-next-icon img{
  width:28px;
  height:28px;
}

.success-confirm-page .confirm-thankyou-icon img{
  width:24px;
  height:24px;
}

/* Small footer/social icons */
.social-icon img{
  width:22px !important;
  height:22px !important;
}

@media (max-width:640px){
  .nilo-pill-icon{
    width:48px;
    height:48px;
  }

  .nilo-pill-icon img{
    width:38px;
    height:38px;
  }

  .nilo-step-icon{
    width:58px;
    height:58px;
  }

  .nilo-step-icon img{
    width:56px;
    height:56px;
  }

  .menu-category-link .menu-icon,
  .menu-btn .menu-icon{
    width:18px;
    height:18px;
  }
}


/* =========================================================
   NILO ICON FINAL FIX 2
   Safe CSS-only fixes:
   1. Make menu icons more visible.
   2. Use whatsapp.png for the first quick contact option.
   3. Remove circles around order hub meta icons.
========================================================= */

/* 1) Menu page: make the small icons clearly visible */
.menu-btn .menu-icon{
  width:26px;
  height:26px;
  flex:0 0 26px;
}

.menu-category-link{
  gap:11px;
}

.menu-category-link .menu-icon{
  width:28px;
  height:28px;
  flex:0 0 28px;
}

.menu-trust-icon .menu-icon,
.menu-hero-note-icon .menu-icon,
.menu-allergen-icon .menu-icon{
  width:34px;
  height:34px;
  flex:0 0 34px;
}

.menu-section-kicker .menu-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
}

.menu-section-title .menu-icon{
  width:46px;
  height:46px;
  flex:0 0 46px;
  margin-right:2px;
}

.menu-badge .menu-icon{
  width:19px;
  height:19px;
  flex:0 0 19px;
}

/* Keep white icons inside active green category pills */
.menu-category-link.is-main .menu-icon,
.menu-category-link.is-active .menu-icon,
.menu-btn-primary .menu-icon{
  filter:brightness(0) invert(1);
}

/* 2) Contact page: use whatsapp.png for the WhatsApp quick contact icon */
.contact-method-v2:first-of-type .contact-method-icon-v2 img{
  content:url('/assets/img/icons/nilo/whatsapp.png');
}

/* Make quick contact icons a touch clearer while keeping them elegant */
.contact-method-icon-v2 img{
  width:32px;
  height:32px;
}

/* 3) Order hub: remove circles around clock/card meta icons */
.order-hub-meta-icon{
  width:auto;
  height:auto;
  min-width:0;
  border:none !important;
  border-radius:0 !important;
  background:transparent !important;
  box-shadow:none !important;
  padding:0;
}

.order-hub-meta-icon img{
  width:30px;
  height:30px;
}

@media (max-width:640px){
  .menu-btn .menu-icon,
  .menu-category-link .menu-icon{
    width:23px;
    height:23px;
    flex-basis:23px;
  }

  .menu-trust-icon .menu-icon,
  .menu-hero-note-icon .menu-icon,
  .menu-allergen-icon .menu-icon{
    width:28px;
    height:28px;
    flex-basis:28px;
  }

  .menu-section-title .menu-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }

  .order-hub-meta-icon img{
    width:26px;
    height:26px;
  }
}


/* =========================================================
   NILO CONTACT CHECK FINAL FIX
   Keep selected contact check white on the green circle.
========================================================= */

.contact-selected-icon-v2{
  background: linear-gradient(135deg, rgba(31,107,84,1), rgba(22,88,68,1)) !important;
  color: #fff !important;
}

.contact-selected-icon-v2 img{
  width: 24px !important;
  height: 24px !important;
  filter: brightness(0) invert(1) !important;
  opacity: .98 !important;
}



/* =========================================================
   CONFIRM/SUCCESS ORDER SUMMARY PATCH — icons + dish photos
   Visual-only: keeps existing confirm.js IDs and payment flow intact.
========================================================= */

.confirm-page .confirm-trust-icon img,
.success-confirm-page .confirm-trust-icon img{
  width:30px;
  height:30px;
}

.confirm-page .confirm-row-icon img,
.success-confirm-page .confirm-row-icon img,
.success-confirm-page .success-next-icon img{
  width:26px;
  height:26px;
}

.confirm-page .confirm-thankyou-icon img,
.success-confirm-page .confirm-thankyou-icon img{
  width:24px;
  height:24px;
}

.confirm-inline-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex:0 0 auto;
  width:22px;
  height:22px;
}

.confirm-inline-icon img{
  display:block;
  width:22px;
  height:22px;
  object-fit:contain;
}

.confirm-item-content{
  display:flex;
  align-items:flex-start;
  gap:14px;
  min-width:0;
}

.confirm-item-thumb{
  flex:0 0 72px;
  width:72px;
  height:72px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(31, 42, 36, .10);
  background:
    radial-gradient(80px 60px at 26% 12%, rgba(31,107,84,.10), transparent 72%),
    rgba(255,255,255,.72);
  box-shadow:0 12px 28px rgba(0,0,0,.075);
}

.confirm-item-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.confirm-item-main{
  min-width:0;
}

@media (max-width:640px){
  .confirm-item-content{
    gap:12px;
  }

  .confirm-item-thumb{
    flex-basis:64px;
    width:64px;
    height:64px;
    border-radius:16px;
  }

  .confirm-page .confirm-row-icon img,
  .success-confirm-page .confirm-row-icon img,
  .success-confirm-page .success-next-icon img{
    width:24px;
    height:24px;
  }
}


/* =========================================================
   CONFIRM/SUCCESS ORDER SUMMARY POLISH — mobile-first finish
   Visual-only: no payment, Supabase or Mollie logic changes.
========================================================= */

.confirm-primary-btn::before{
  content:"" !important;
  width:20px !important;
  height:20px !important;
  flex:0 0 auto !important;
  background-image:url("/assets/img/icons/nilo/shield.png") !important;
  background-repeat:no-repeat !important;
  background-position:center !important;
  background-size:contain !important;
  filter:brightness(0) invert(1) !important;
  opacity:.96 !important;
}

.confirm-page .confirm-item,
.success-confirm-page .confirm-item{
  align-items:center !important;
  gap:16px !important;
  padding:20px 0 !important;
}

.confirm-page .confirm-item-total,
.success-confirm-page .confirm-item-total{
  align-self:center !important;
  padding-top:0 !important;
}

.confirm-item-content{
  align-items:center;
  gap:16px;
}

.confirm-item-thumb{
  flex-basis:78px;
  width:78px;
  height:78px;
  border-radius:20px;
  border:1px solid rgba(31,107,84,.13);
  box-shadow:0 14px 30px rgba(0,0,0,.085);
}

.confirm-page .confirm-item-name,
.success-confirm-page .confirm-item-name{
  line-height:1.18 !important;
}

.confirm-page .confirm-item-options,
.success-confirm-page .confirm-item-options{
  display:inline-flex !important;
  width:fit-content;
  max-width:100%;
  margin-top:7px !important;
  padding:3px 8px;
  border:1px solid rgba(31,107,84,.14);
  border-radius:999px;
  background:rgba(31,107,84,.065);
  color:var(--brand) !important;
  font-size:13px !important;
  line-height:1.25 !important;
  font-weight:900 !important;
}

@media (max-width: 640px){
  .confirm-page,
  .success-confirm-page{
    padding:12px 0 26px !important;
  }

  .confirm-page .confirm-shell,
  .success-confirm-page .confirm-shell{
    width:100% !important;
  }

  .confirm-page .confirm-card,
  .success-confirm-page .confirm-card{
    border-radius:22px !important;
  }

  .confirm-page .confirm-hero,
  .success-confirm-page .confirm-hero{
    padding-left:16px !important;
    padding-right:16px !important;
  }

  .confirm-page .confirm-title,
  .success-confirm-page .confirm-title{
    font-size:clamp(38px, 12vw, 54px) !important;
    line-height:.96 !important;
  }

  .confirm-page .confirm-subtitle,
  .success-confirm-page .confirm-subtitle{
    font-size:15px !important;
    line-height:1.52 !important;
  }

  .confirm-page .confirm-trust-row,
  .success-confirm-page .confirm-trust-row{
    gap:12px !important;
  }

  .confirm-page .confirm-trust-icon,
  .success-confirm-page .confirm-trust-icon{
    width:44px !important;
    height:44px !important;
  }

  .confirm-page .confirm-trust-icon img,
  .success-confirm-page .confirm-trust-icon img{
    width:25px !important;
    height:25px !important;
  }

  .confirm-page .confirm-content,
  .success-confirm-page .confirm-content{
    padding:16px !important;
    gap:16px !important;
  }

  .confirm-page .confirm-panel,
  .success-confirm-page .confirm-panel{
    padding:18px !important;
    border-radius:20px !important;
  }

  .confirm-page .confirm-item,
  .success-confirm-page .confirm-item{
    grid-template-columns:1fr !important;
    gap:8px !important;
    padding:17px 0 !important;
  }

  .confirm-item-content{
    gap:12px;
  }

  .confirm-item-thumb{
    flex-basis:62px;
    width:62px;
    height:62px;
    border-radius:16px;
  }

  .confirm-page .confirm-item-name,
  .success-confirm-page .confirm-item-name{
    font-size:16px !important;
    line-height:1.18 !important;
  }

  .confirm-page .confirm-item-options,
  .success-confirm-page .confirm-item-options{
    font-size:12px !important;
    padding:3px 7px;
  }

  .confirm-page .confirm-item-meta,
  .success-confirm-page .confirm-item-meta{
    font-size:12px !important;
  }

  .confirm-page .confirm-item-total,
  .success-confirm-page .confirm-item-total{
    margin-left:74px;
    text-align:left !important;
    font-size:16px !important;
  }

  .confirm-page .confirm-row,
  .success-confirm-page .confirm-row{
    column-gap:10px !important;
  }
}

@media (max-width: 420px){
  .confirm-page .confirm-content,
  .success-confirm-page .confirm-content{
    padding:12px !important;
  }

  .confirm-page .confirm-panel,
  .success-confirm-page .confirm-panel{
    padding:16px !important;
  }

  .confirm-item-thumb{
    flex-basis:56px;
    width:56px;
    height:56px;
    border-radius:15px;
  }

  .confirm-page .confirm-item-total,
  .success-confirm-page .confirm-item-total{
    margin-left:68px;
  }

  .confirm-page .confirm-mobile-paybar-card,
  .success-confirm-page .confirm-mobile-paybar-card{
    left:10px !important;
    right:10px !important;
    width:auto !important;
  }
}

/* =========================================================
   ORDER PAGE CATEGORY ICONS
   Uses the same PNG icon system as the public menu page.
========================================================= */
.order-page-redesign .order-cat-nav-link{
  gap:10px;
  white-space:nowrap;
}

.order-page-redesign .order-cat-nav-link .menu-icon{
  width:24px;
  height:24px;
  flex:0 0 24px;
}

.order-page-redesign .order-cat-nav-link.is-active .menu-icon{
  filter:brightness(0) invert(1);
}

.order-page-redesign .order-cat-nav-link:not(.is-active) .menu-icon{
  filter:none;
}

@media (max-width:640px){
  .order-page-redesign .order-cat-nav-link{
    min-height:46px;
    padding:0 16px;
    gap:8px;
  }

  .order-page-redesign .order-cat-nav-link .menu-icon{
    width:22px;
    height:22px;
    flex-basis:22px;
  }
}

@media (max-width:420px){
  .order-page-redesign .order-cat-nav-link{
    padding:0 14px;
    font-size:13px;
  }

  .order-page-redesign .order-cat-nav-link .menu-icon{
    width:21px;
    height:21px;
    flex-basis:21px;
  }
}

/* =========================================================
   ORDER PAGE SECTION HEADING ICONS
   Adds the same category icons next to Curry, Woks, Soups, etc.
   Scope: lunch/team order pages only.
========================================================= */
.order-page-redesign .order-cat-title{
  display:inline-flex;
  align-items:center;
  gap:12px;
}

.order-page-redesign .order-cat-title .order-cat-title-icon{
  width:44px;
  height:44px;
  flex:0 0 44px;
  display:inline-block;
  filter:none;
}

@media (max-width:640px){
  .order-page-redesign .order-cat-title{
    gap:10px;
  }

  .order-page-redesign .order-cat-title .order-cat-title-icon{
    width:38px;
    height:38px;
    flex-basis:38px;
  }
}

@media (max-width:420px){
  .order-page-redesign .order-cat-title .order-cat-title-icon{
    width:34px;
    height:34px;
    flex-basis:34px;
  }
}


/* =========================================================
   ORDER CATEGORY ANCHOR / ACTIVE STATE FIX
   Keeps clicked sections visible below the fixed header + sticky category bar.
========================================================= */
.order-page-redesign .order-cat{
  scroll-margin-top:calc(var(--headerH) + 112px);
}

@media (max-width:980px){
  .order-page-redesign .order-cat{
    scroll-margin-top:calc(var(--headerH) + 136px);
  }
}

/* =========================================================
   ORDER CATEGORY BAR — FINAL COMPACT FIT
   Keeps all category tabs visible on the order pages without horizontal scroll.
   Scope: lunch/team order pages only.
========================================================= */
.order-page-redesign .order-cat-nav-wrap{
  overflow:visible;
}

.order-page-redesign .order-cat-nav{
  display:flex;
  flex-wrap:nowrap;
  gap:7px;
  overflow:visible;
  padding:4px 0 8px;
}

.order-page-redesign .order-cat-nav-link{
  flex:0 1 auto;
  min-width:0;
  min-height:44px;
  padding:0 12px;
  gap:7px;
  font-size:12.5px;
  letter-spacing:0;
  white-space:nowrap;
}

.order-page-redesign .order-cat-nav-link .menu-icon{
  width:21px;
  height:21px;
  flex:0 0 21px;
}

@media (max-width:980px){
  .order-page-redesign .order-cat-nav{
    flex-wrap:wrap;
    gap:8px;
  }

  .order-page-redesign .order-cat-nav-link{
    min-height:42px;
    padding:0 13px;
    font-size:12.5px;
  }
}

@media (max-width:420px){
  .order-page-redesign .order-cat-nav{
    gap:7px;
  }

  .order-page-redesign .order-cat-nav-link{
    min-height:40px;
    padding:0 11px;
    gap:6px;
    font-size:12px;
  }

  .order-page-redesign .order-cat-nav-link .menu-icon{
    width:19px;
    height:19px;
    flex-basis:19px;
  }
}


/* =========================================================
   ALLERGEN TABLE POLISH PATCH V1
   Softer, clearer, table-first allergen overview.
========================================================= */

.allergen-table-card-v2{
  border-radius:30px;
  background:
    radial-gradient(900px 260px at 8% 0%, rgba(31,107,84,.055), transparent 58%),
    rgba(255,255,255,.94);
  box-shadow:0 18px 46px rgba(0,0,0,.065);
}

.allergen-table-card-v2 .allergen-table-head{
  align-items:flex-start;
  padding:28px 28px 20px;
}

.allergen-table-card-v2 .allergen-table-head h2{
  font-size:clamp(34px, 3.8vw, 52px);
  letter-spacing:-.035em;
}

.allergen-table-side-note{
  display:none;
  flex-direction:column;
  align-items:flex-end;
  gap:8px;
  max-width:360px;
  padding-top:8px;
}

.allergen-table-card-v2 .allergen-table-side-note p{
  margin:0;
  text-align:right;
}

.allergen-updated{
  color:rgba(31,42,36,.58);
  font-size:12px;
  font-weight:750;
}

.allergen-tools{
  display:flex;
  align-items:end;
  gap:12px;
  padding:0 28px 20px;
  border-bottom:1px solid rgba(31,42,36,.08);
}

.allergen-tool{
  display:flex;
  flex-direction:column;
  gap:7px;
  min-width:210px;
}

.allergen-tool-search{
  min-width:min(360px, 100%);
}

.allergen-tool span{
  color:rgba(31,42,36,.66);
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.allergen-tool input,
.allergen-tool select{
  height:46px;
  margin:0;
  border-radius:14px;
  border:1px solid rgba(31,42,36,.13);
  background:rgba(255,255,255,.92);
  color:var(--text);
  font-weight:750;
  box-shadow:0 8px 18px rgba(0,0,0,.035);
}

.allergen-tool input::placeholder{
  color:rgba(92,107,98,.74);
  font-weight:650;
}




.allergen-table-card-v2 .allergen-legend{
  gap:12px;
  padding:15px 28px;
  background:linear-gradient(180deg, rgba(252,251,249,.90), rgba(248,246,241,.92));
}

.allergen-table-card-v2 .allergen-legend > span{
  min-height:38px;
  padding:7px 12px;
  border:1px solid rgba(31,42,36,.09);
  border-radius:999px;
  background:rgba(255,255,255,.74);
  color:rgba(31,42,36,.72);
  font-weight:750;
}

.allergen-table-card-v2 .allergen-legend strong,
.allergen-matrix-v2 .allergen-symbol{
  width:22px;
  height:22px;
  font-size:13px;
}

.allergen-table-card-v2 .allergen-legend .trace,
.allergen-matrix-v2 .allergen-symbol.trace{
  border:none;
  background:#f28a18;
  color:#fff;
  font-size:15px;
}

.allergen-table-card-v2 .allergen-legend .not-planned,
.allergen-matrix-v2 .allergen-symbol-none{
  width:22px;
  height:22px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(31,42,36,.10);
  color:rgba(31,42,36,.54);
  font-weight:950;
}

.allergen-table-card-v2 .allergen-table-wrap{
  border-top:none;
  background:rgba(255,255,255,.86);
  scrollbar-color:rgba(31,107,84,.35) rgba(31,42,36,.06);
}

.allergen-matrix-v2{
  min-width:1180px;
  border-collapse:separate;
  border-spacing:0;
  font-size:13px;
}

.allergen-matrix-v2 th,
.allergen-matrix-v2 td{
  border-right:1px solid rgba(31,42,36,.075);
  border-bottom:1px solid rgba(31,42,36,.075);
  padding:13px 10px;
}

.allergen-matrix-v2 thead th{
  top:0;
  background:linear-gradient(180deg, rgba(255,255,255,.98), rgba(252,251,249,.98));
  color:rgba(31,42,36,.84);
  font-size:11px;
  letter-spacing:.02em;
  text-transform:none;
  white-space:normal;
  box-shadow:0 1px 0 rgba(31,42,36,.08);
}

.allergen-matrix-v2 thead .dish-col{
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,251,249,.99));
}

.allergen-matrix-v2 .dish-col,
.allergen-matrix-v2 tbody th:not([colspan]){
  min-width:230px;
  max-width:230px;
  background:rgba(255,255,255,.98);
  box-shadow:8px 0 14px rgba(31,42,36,.035);
}

.allergen-dish-label{
  display:inline-flex;
  align-items:center;
  min-height:44px;
  color:rgba(31,42,36,.88);
  font-size:12px;
  font-weight:950;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.allergen-head-icon{
  width:42px;
  height:42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 7px;
  border-radius:16px;
  border:1px solid rgba(31,42,36,.09);
  background:
    radial-gradient(36px 28px at 36% 18%, rgba(255,255,255,.98), transparent 68%),
    rgba(250,247,240,.90);
  color:var(--brand);
  font-size:21px;
  line-height:1;
  box-shadow:0 8px 18px rgba(0,0,0,.04);
}

.allergen-col-sulphites .allergen-head-icon{
  font-size:12px;
  font-weight:950;
  letter-spacing:-.04em;
}

.allergen-matrix-v2 thead th > span:last-child{
  display:block;
  color:rgba(31,42,36,.82);
  font-weight:950;
  line-height:1.1;
}

.allergen-category-row th{
  position:sticky;
  left:0;
  z-index:2;
  padding:12px 18px !important;
  text-align:left !important;
  color:var(--brand) !important;
  font-size:12px;
  font-weight:950 !important;
  letter-spacing:.10em;
  text-transform:uppercase;
  background:
    linear-gradient(90deg, rgba(31,107,84,.10), rgba(31,107,84,.035) 48%, rgba(255,255,255,.92)) !important;
  box-shadow:none !important;
}

.allergen-category-row span::before{
  content:"✦";
  display:inline-block;
  margin-right:9px;
  color:#c98716;
  font-size:12px;
}

.allergen-matrix-v2 tbody tr:not(.allergen-category-row) th,
.allergen-matrix-v2 tbody tr:not(.allergen-category-row) td{
  height:52px;
}

.allergen-matrix-v2 tbody th:not([colspan]){
  color:rgba(31,42,36,.92);
  font-weight:950;
}

.allergen-matrix-v2 tbody tr:not(.allergen-category-row):hover th,
.allergen-matrix-v2 tbody tr:not(.allergen-category-row):hover td{
  background:rgba(31,107,84,.045);
}

.allergen-matrix-v2 tbody tr:not(.allergen-category-row):hover th{
  color:var(--brand);
}

.allergen-empty{
  margin:0;
  padding:22px 28px 28px;
  color:var(--muted);
  font-weight:800;
  border-top:1px solid rgba(31,42,36,.08);
  background:rgba(252,251,249,.84);
}

@media (max-width: 900px){
  .allergen-tools{
    display:grid;
    grid-template-columns:1fr 1fr;
  }

  .allergen-tool-search{
    grid-column:1 / -1;
  }
}

@media (max-width: 760px){
  .allergen-table-card-v2 .allergen-table-head,
  .allergen-tools{
    padding-left:18px;
    padding-right:18px;
  }

  .allergen-table-side-note,
  .allergen-table-card-v2 .allergen-table-side-note p{
    align-items:flex-start;
    text-align:left;
  }

  .allergen-tools{
    grid-template-columns:1fr;
  }

  .allergen-tool,
  .allergen-tool-search{
    min-width:0;
  }

  .allergen-table-card-v2 .allergen-legend{
    padding:14px 18px;
    align-items:stretch;
  }

  .allergen-table-card-v2 .allergen-legend > span{
    width:100%;
  }

  .allergen-matrix-v2{
    min-width:1120px;
  }

  .allergen-matrix-v2 .dish-col,
  .allergen-matrix-v2 tbody th:not([colspan]){
    min-width:176px;
    max-width:176px;
  }

  .allergen-head-icon{
    width:36px;
    height:36px;
    border-radius:14px;
    font-size:18px;
  }
}

/* =========================================================
   ALLERGEN TABLE POLISH PATCH V2
   Final visual refinement: calmer header, softer traces, cleaner toolbar.
   Scoped to .allergen-table-card-v2 so other pages stay untouched.
========================================================= */

.allergen-table-card-v2{
  border-radius:30px;
  background:
    radial-gradient(900px 260px at 8% 0%, rgba(31,107,84,.05), transparent 58%),
    linear-gradient(180deg, rgba(255,255,255,.96), rgba(252,251,248,.96));
  border-color:rgba(31,42,36,.105);
  box-shadow:0 18px 48px rgba(0,0,0,.06);
}

.allergen-table-card-v2 .allergen-table-head{
  padding:28px 28px 16px;
}

.allergen-table-card-v2 .allergen-table-head h2{
  margin-bottom:0;
}

.allergen-table-side-note{
  gap:6px;
}

.allergen-table-card-v2 .allergen-table-side-note .muted{
  color:rgba(92,107,98,.78);
  font-size:13px;
  line-height:1.45;
}

.allergen-updated{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.12);
  background:rgba(31,107,84,.055);
  color:rgba(31,107,84,.86);
  font-size:12px;
  font-weight:850;
}

.allergen-tools{
  margin:0 28px 18px;
  padding:14px;
  align-items:end;
  border:1px solid rgba(31,42,36,.09);
  border-radius:22px;
  background:
    radial-gradient(520px 160px at 0% 0%, rgba(31,107,84,.045), transparent 60%),
    rgba(252,251,249,.78);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75);
}

.allergen-tool{
  gap:6px;
}

.allergen-tool span{
  color:rgba(31,42,36,.58);
  font-size:11px;
  letter-spacing:.09em;
}

.allergen-tool input,
.allergen-tool select{
  height:44px;
  border-radius:14px;
  border-color:rgba(31,42,36,.11);
  background:rgba(255,255,255,.96);
  box-shadow:none;
  font-size:14px;
}

.allergen-tool input:focus,
.allergen-tool select:focus{
  border-color:rgba(31,107,84,.32);
  box-shadow:0 0 0 4px rgba(31,107,84,.10);
}


.allergen-table-card-v2 .allergen-legend{
  gap:8px;
  padding:12px 28px;
  background:linear-gradient(180deg, rgba(252,251,249,.92), rgba(248,246,241,.88));
}

.allergen-table-card-v2 .allergen-legend > span{
  min-height:34px;
  padding:6px 11px;
  border-color:rgba(31,42,36,.08);
  background:rgba(255,255,255,.82);
  color:rgba(31,42,36,.68);
  font-size:13px;
  font-weight:800;
}

.allergen-table-card-v2 .allergen-legend strong,
.allergen-matrix-v2 .allergen-symbol{
  width:20px;
  height:20px;
  font-size:12px;
}

.allergen-table-card-v2 .allergen-legend .contains,
.allergen-matrix-v2 .allergen-symbol.contains{
  background:#1f735b;
  color:#fff;
  box-shadow:0 4px 10px rgba(31,107,84,.13);
}

.allergen-table-card-v2 .allergen-legend .trace,
.allergen-matrix-v2 .allergen-symbol.trace{
  border:1.5px solid rgba(211,126,19,.55);
  background:rgba(211,126,19,.075);
  color:#a76508;
  font-size:11px;
  box-shadow:none;
}

.allergen-table-card-v2 .allergen-legend .not-planned,
.allergen-matrix-v2 .allergen-symbol-none{
  width:19px;
  height:19px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius:999px;
  background:rgba(31,42,36,.075);
  color:rgba(31,42,36,.42);
  font-size:12px;
  font-weight:950;
}

.allergen-table-card-v2 .allergen-table-wrap{
  background:rgba(255,255,255,.88);
}

.allergen-matrix-v2{
  min-width:1160px;
  font-size:13px;
}

.allergen-matrix-v2 th,
.allergen-matrix-v2 td{
  border-right:1px solid rgba(31,42,36,.055);
  border-bottom:1px solid rgba(31,42,36,.065);
  padding:10px 8px;
}

.allergen-matrix-v2 td{
  min-width:64px;
  height:46px;
}

.allergen-matrix-v2 thead th{
  padding:11px 8px 12px;
  background:linear-gradient(180deg, rgba(255,255,255,.99), rgba(252,251,249,.98));
  box-shadow:0 1px 0 rgba(31,42,36,.06);
}

.allergen-matrix-v2 thead .dish-col{
  background:linear-gradient(180deg, rgba(255,255,255,1), rgba(252,251,249,.99));
}

.allergen-matrix-v2 .dish-col,
.allergen-matrix-v2 tbody th:not([colspan]){
  min-width:226px;
  max-width:226px;
  box-shadow:8px 0 16px rgba(31,42,36,.025);
}

.allergen-dish-label{
  min-height:38px;
  font-size:11px;
  letter-spacing:.09em;
}

.allergen-head-icon{
  width:34px;
  height:34px;
  margin:0 auto 6px;
  border-radius:999px;
  border:1px solid rgba(31,107,84,.14);
  background:
    radial-gradient(24px 18px at 38% 22%, rgba(255,255,255,.95), transparent 72%),
    rgba(31,107,84,.055);
  color:rgba(31,107,84,.92);
  font-family:ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  font-size:11px;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1;
  box-shadow:none;
}

.allergen-col-peanuts .allergen-head-icon,
.allergen-col-nuts .allergen-head-icon,
.allergen-col-mustard .allergen-head-icon,
.allergen-col-sesame .allergen-head-icon{
  border-color:rgba(201,126,18,.20);
  background:
    radial-gradient(24px 18px at 38% 22%, rgba(255,255,255,.96), transparent 72%),
    rgba(201,126,18,.06);
  color:#996209;
}

.allergen-col-shellfish .allergen-head-icon,
.allergen-col-fish .allergen-head-icon,
.allergen-col-molluscs .allergen-head-icon{
  border-color:rgba(42,102,143,.18);
  background:
    radial-gradient(24px 18px at 38% 22%, rgba(255,255,255,.96), transparent 72%),
    rgba(42,102,143,.055);
  color:#2d6687;
}

.allergen-col-sulphites .allergen-head-icon{
  font-size:10px;
  letter-spacing:-.06em;
}

.allergen-matrix-v2 thead th > span:last-child{
  color:rgba(31,42,36,.76);
  font-size:10px;
  line-height:1.12;
}

.allergen-category-row th{
  padding:10px 18px !important;
  background:
    linear-gradient(90deg, rgba(31,107,84,.085), rgba(31,107,84,.025) 52%, rgba(255,255,255,.95)) !important;
  color:rgba(31,107,84,.96) !important;
  font-size:11px;
  letter-spacing:.12em;
}

.allergen-category-row span::before{
  color:#c98716;
  opacity:.85;
}

.allergen-matrix-v2 tbody tr:not(.allergen-category-row) th,
.allergen-matrix-v2 tbody tr:not(.allergen-category-row) td{
  height:48px;
}

.allergen-matrix-v2 tbody th:not([colspan]){
  color:rgba(31,42,36,.88);
  font-weight:900;
}

.allergen-matrix-v2 tbody tr:not(.allergen-category-row):hover th,
.allergen-matrix-v2 tbody tr:not(.allergen-category-row):hover td{
  background:rgba(31,107,84,.032);
}

.allergen-table-wrap::-webkit-scrollbar{
  height:9px;
}

.allergen-table-wrap::-webkit-scrollbar-thumb{
  background:rgba(31,107,84,.24);
}

.allergen-empty{
  padding:20px 28px 26px;
  background:rgba(252,251,249,.86);
}

@media (max-width: 900px){
  .allergen-tools{
    margin-left:18px;
    margin-right:18px;
  }
}

@media (max-width: 760px){
  .allergen-table-card-v2 .allergen-table-head{
    padding:22px 18px 14px;
  }

  .allergen-tools{
    padding:12px;
    margin:0 18px 16px;
  }

  .allergen-table-card-v2 .allergen-legend{
    padding:12px 18px;
  }

  .allergen-table-card-v2 .allergen-legend > span{
    min-height:32px;
  }

  .allergen-matrix-v2{
    min-width:1080px;
  }

  .allergen-matrix-v2 .dish-col,
  .allergen-matrix-v2 tbody th:not([colspan]){
    min-width:172px;
    max-width:172px;
  }

  .allergen-head-icon{
    width:32px;
    height:32px;
    font-size:10px;
  }
}

/* =========================================================
   ALLERGEN TABLE POLISH PATCH V4
   Reset button removed; toolbar kept compact and balanced.
========================================================= */

.allergen-table-card-v2 .allergen-tools{
  display:inline-flex;
  width:auto;
  max-width:calc(100% - 56px);
  margin:0 28px 18px;
}

.allergen-table-card-v2 .allergen-tool-search{
  min-width:min(330px, 42vw);
}

.allergen-table-card-v2 .allergen-tool:not(.allergen-tool-search){
  min-width:220px;
}

@media (max-width: 900px){
  .allergen-table-card-v2 .allergen-tools{
    display:grid;
    grid-template-columns:minmax(0, 1.35fr) minmax(180px, .8fr);
    width:auto;
    max-width:none;
    margin-left:18px;
    margin-right:18px;
  }

  .allergen-table-card-v2 .allergen-tool-search{
    grid-column:auto;
    min-width:0;
  }

  .allergen-table-card-v2 .allergen-tool:not(.allergen-tool-search){
    min-width:0;
  }
}

@media (max-width: 760px){
  .allergen-table-card-v2 .allergen-tools{
    grid-template-columns:1fr;
  }
}

/* =========================================================
   PATCH 2A.4 — STICKY CATEGORY BAR CORNER POLISH
   Rounds the visible right edge of the sticky category bar on
   the lunch/team order pages without changing sticky behavior.
========================================================= */

.order-page-redesign .order-cat-nav-wrap{
  border-radius:0 26px 26px 0;
  background-clip:padding-box;
}

@media (max-width: 980px){
  .order-page-redesign .order-cat-nav-wrap{
    border-radius:0 22px 22px 0;
  }
}

/* =========================================================
   ALLERGEN TABLE ICON HEADER PATCH V5
   Uses real allergen badges in the table header.
   Coconut can use /assets/img/allergens/kokos.png once added.
========================================================= */

.allergen-matrix-v2{
  min-width:1230px;
}

.allergen-table-card-v2 .allergen-head-icon{
  width:42px;
  height:42px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 7px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(31,107,84,.16);
  background:rgba(255,255,255,.82);
  box-shadow:0 8px 18px rgba(0,0,0,.04);
  color:var(--brand);
  font-size:12px;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1;
  overflow:hidden;
}

.allergen-table-card-v2 .allergen-head-icon img{
  width:100%;
  height:100%;
  object-fit:contain;
  display:block;
}

.allergen-table-card-v2 .allergen-head-icon-missing::before{
  content:attr(data-fallback);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
}

.allergen-table-card-v2 .allergen-col-peanuts .allergen-head-icon,
.allergen-table-card-v2 .allergen-col-nuts .allergen-head-icon,
.allergen-table-card-v2 .allergen-col-mustard .allergen-head-icon,
.allergen-table-card-v2 .allergen-col-sesame .allergen-head-icon{
  border-color:rgba(201,126,18,.22);
  background:rgba(255,250,241,.88);
  color:#996209;
}

.allergen-table-card-v2 .allergen-col-shellfish .allergen-head-icon,
.allergen-table-card-v2 .allergen-col-fish .allergen-head-icon,
.allergen-table-card-v2 .allergen-col-molluscs .allergen-head-icon{
  border-color:rgba(42,102,143,.20);
  background:rgba(248,252,255,.88);
  color:#2d6687;
}

.allergen-table-card-v2 .allergen-col-lupine .allergen-head-icon,
.allergen-table-card-v2 .allergen-col-coconut .allergen-head-icon{
  border-color:rgba(31,107,84,.18);
  background:rgba(248,253,250,.88);
}

.allergen-table-card-v2 .allergen-matrix-v2 thead th > span:last-child{
  display:block;
  color:rgba(31,42,36,.78);
  font-size:10px;
  font-weight:950;
  line-height:1.12;
}

@media (max-width:760px){
  .allergen-matrix-v2{
    min-width:1160px;
  }

  .allergen-table-card-v2 .allergen-head-icon{
    width:36px;
    height:36px;
    padding:5px;
  }
}

/* =========================================================
   Emergency Out-of-Stock V1 — Public order UI
   Path: /assets/styles.css
   Purpose: disabled temporary unavailable dishes on order pages
========================================================= */

.order-item.is-out-of-stock {
  opacity: .72;
  border-color: rgba(171,62,42,.20) !important;
  background:
    radial-gradient(420px 120px at 0 0, rgba(171,62,42,.06), transparent 62%),
    rgba(255,255,255,.82);
}

.order-item.is-out-of-stock .order-item-img {
  filter: grayscale(.18) saturate(.82);
}

.order-stock-label,
.sum-stock-label {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  min-height: 28px;
  padding: 0 10px;
  border-radius: 999px;
  border: 1px solid rgba(171,62,42,.24);
  background: rgba(255,247,242,.95);
  color: #8f2f20;
  font-size: 12px;
  font-weight: 950;
}

.order-stock-label {
  margin-top: 2px;
}

.sum-stock-label {
  margin-top: 4px;
  font-size: 11.5px;
}

.order-stock-warning {
  display: grid;
  gap: 4px;
  margin-top: 12px;
  padding: 12px 13px;
  border-radius: 16px;
  border: 1px solid rgba(171,62,42,.22);
  background: rgba(255,247,242,.92);
  color: #8f2f20;
}

.order-stock-warning strong {
  font-size: 13px;
  font-weight: 950;
}

.order-stock-warning span {
  font-size: 12px;
  font-weight: 850;
  line-height: 1.4;
}

.sum-card.is-out-of-stock {
  border-color: rgba(171,62,42,.18);
  background: rgba(255,250,247,.75);
}

.order-item-add:disabled,
.qty-btn:disabled,
.qty-pill-btn:disabled {
  cursor: not-allowed;
  opacity: .55;
  box-shadow: none;
  transform: none;
}


/* =========================================================
   MOBILE UX PATCH V1 — compact public mobile flow
   Scope: mobile-only visual/UX changes. Desktop layout and payment/order logic untouched.
========================================================= */

/* Menu page image lightbox */
.menu-card-image-button{
  appearance:none;
  display:block;
  width:100%;
  height:100%;
  padding:0;
  border:0;
  border-radius:inherit;
  background:transparent;
  cursor:zoom-in;
  overflow:hidden;
}

.menu-card-image-button:focus-visible{
  outline:4px solid var(--ring);
  outline-offset:-4px;
}

.menu-image-lightbox{
  position:fixed;
  inset:0;
  z-index:9999;
  display:none;
  align-items:center;
  justify-content:center;
  padding:18px;
}

.menu-image-lightbox.is-open{ display:flex; }

.menu-image-lightbox-backdrop{
  position:absolute;
  inset:0;
  border:0;
  background:rgba(19,27,23,.72);
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

.menu-image-lightbox-card{
  position:relative;
  z-index:1;
  width:min(940px, 96vw);
  max-height:88vh;
  overflow:hidden;
  border-radius:26px;
  background:rgba(255,255,255,.96);
  box-shadow:0 30px 90px rgba(0,0,0,.34);
}

.menu-image-lightbox-img{
  display:block;
  width:100%;
  max-height:78vh;
  object-fit:contain;
  background:rgba(244,241,234,.98);
}

.menu-image-lightbox-title{
  margin:0;
  padding:14px 18px 16px;
  color:var(--brand);
  font-weight:950;
  line-height:1.25;
}

.menu-image-lightbox-close{
  position:absolute;
  top:12px;
  right:12px;
  z-index:2;
  width:42px;
  height:42px;
  border:1px solid rgba(31,42,36,.14);
  border-radius:999px;
  background:rgba(255,255,255,.88);
  color:var(--brand);
  font-size:28px;
  font-weight:800;
  line-height:1;
  cursor:pointer;
  box-shadow:0 12px 30px rgba(0,0,0,.12);
}

body.menu-lightbox-open{ overflow:hidden; }

/* Allergen mobile cards */
.allergen-mobile-cards,
.allergen-table-toggle{ display:none; }

.allergen-mobile-card h3{
  margin:0 0 12px;
  color:var(--brand);
  font-size:18px;
  line-height:1.15;
}

.allergen-mobile-line + .allergen-mobile-line{ margin-top:12px; }

.allergen-mobile-line > strong{
  display:block;
  margin-bottom:7px;
  color:rgba(31,42,36,.78);
  font-size:12px;
  letter-spacing:.08em;
  text-transform:uppercase;
}

.allergen-mobile-chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}

.allergen-mobile-chip{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 9px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  line-height:1.15;
}

.allergen-mobile-chip.contains{
  background:rgba(31,107,84,.10);
  border:1px solid rgba(31,107,84,.18);
  color:var(--brand);
}

.allergen-mobile-chip.trace{
  background:rgba(201,164,74,.10);
  border:1px solid rgba(201,164,74,.26);
  color:#8c6416;
}

.allergen-mobile-muted{
  color:var(--muted);
  font-size:13px;
  font-weight:800;
}

@media (max-width:760px){
  /* Homepage: keep the brand feeling but reduce endless mobile scroll */
  .nilo-way-hero{
    min-height:0 !important;
    padding-bottom:22px !important;
  }

  .nilo-way-hero::before,
  .nilo-way-hero::after,
  .nilo-way-media::before,
  .nilo-way-media::after{
    display:none !important;
  }

  .nilo-way-shell{
    gap:16px !important;
  }

  .nilo-way-title{
    font-size:clamp(42px, 13vw, 58px) !important;
    line-height:.95 !important;
  }

  .nilo-short-inline{
    margin-top:14px !important;
    padding:16px !important;
    border-radius:22px !important;
  }

  .nilo-way-media,
  .nilo-way-media img{
    min-height:0 !important;
    height:230px !important;
    border-radius:24px !important;
  }

  .nilo-values-strip,
  .nilo-how-section,
  .nilo-menu-preview,
  .nilo-contact-cta{
    padding-top:28px !important;
    padding-bottom:28px !important;
  }

  .nilo-values-heading h2,
  .nilo-how-intro h2{
    font-size:clamp(32px, 9vw, 42px) !important;
  }

  .nilo-value-pills{
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:10px !important;
  }

  .nilo-value-pill{
    display:grid !important;
    grid-template-columns:36px minmax(0,1fr) !important;
    gap:9px !important;
    align-items:center !important;
    min-height:0 !important;
    padding:10px !important;
    border:1px solid rgba(31,42,36,.10) !important;
    border-radius:16px !important;
    font-size:13px !important;
  }

  .nilo-pill-icon{
    width:36px !important;
    height:36px !important;
  }

  .nilo-pill-icon img{
    width:30px !important;
    height:30px !important;
  }

  .nilo-visual-grid{
    grid-template-columns:repeat(3, minmax(0,1fr)) !important;
    gap:8px !important;
    margin-top:16px !important;
  }

  .nilo-visual-card,
  .nilo-visual-card img{
    min-height:0 !important;
    height:86px !important;
    border-radius:16px !important;
  }

  .nilo-how-grid{
    gap:16px !important;
  }

  .nilo-how-steps{
    gap:10px !important;
  }

  .nilo-step-card{
    display:grid !important;
    grid-template-columns:62px minmax(0,1fr) !important;
    column-gap:12px !important;
    align-items:center !important;
    padding:14px !important;
    min-height:0 !important;
  }

  .nilo-step-head{
    grid-row:1 / span 2;
    margin:0 !important;
  }

  .nilo-step-card h3{
    margin:0 0 4px !important;
    font-size:17px !important;
  }

  .nilo-step-card p{
    margin:0 !important;
    font-size:13px !important;
    line-height:1.45 !important;
  }

  .nilo-step-icon{
    width:52px !important;
    height:52px !important;
  }

  .nilo-step-icon img{
    width:50px !important;
    height:50px !important;
  }

  /* Order hub: make primary action visible faster */
  .order-hub-page{
    padding-top:22px !important;
  }

  .order-hub-intro{
    margin-bottom:16px !important;
  }

  .order-hub-main-title{
    font-size:clamp(42px, 13vw, 58px) !important;
  }

  .order-hub-main-lead{
    font-size:15px !important;
    line-height:1.5 !important;
  }

  .order-hub-card--primary,
  .order-hub-card--secondary{
    min-height:0 !important;
    padding:18px !important;
    gap:12px !important;
  }

  .order-hub-card--primary .order-hub-illustration{
    order:2;
    min-height:130px !important;
  }

  .order-hub-secondary-grid{
    gap:14px !important;
  }

  /* Lunch/team order pages: faster path to categories and products */
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    margin-left:-14px !important;
    margin-right:-14px !important;
    padding:22px 16px 138px !important;
    min-height:0 !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-kicker,
  main[data-order-mode="team"].order-page-redesign .order-lunch-kicker{
    margin-bottom:10px !important;
    font-size:11px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-title,
  main[data-order-mode="team"].order-page-redesign .order-lunch-title{
    font-size:clamp(38px, 12vw, 54px) !important;
    line-height:.96 !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-lead,
  main[data-order-mode="team"].order-page-redesign .order-lunch-lead{
    font-size:15px !important;
    line-height:1.45 !important;
    margin-top:10px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:14px !important;
    max-width:360px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-item,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-item{
    grid-template-columns:32px minmax(0,1fr) !important;
    gap:8px !important;
    padding:7px 10px !important;
    border-radius:14px !important;
    font-size:12px !important;
    line-height:1.25 !important;
    background:rgba(255,255,255,.78) !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-icon,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-icon{
    width:32px !important;
    height:32px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media{
    height:198px !important;
    bottom:-18px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::after,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero::after{
    height:105px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-builder-section,
  main[data-order-mode="team"].order-page-redesign .order-builder-section{
    margin-top:12px !important;
  }

  .order-page-redesign .order-cat-nav-link{
    white-space:nowrap !important;
  }

  /* Confirm/success: focus mobile on review/pay or practical delivery info */
  .confirm-page .confirm-hero,
  .success-confirm-page .confirm-hero{
    grid-template-columns:1fr !important;
    gap:14px !important;
    padding:16px !important;
  }

  .confirm-page .confirm-title,
  .success-confirm-page .confirm-title{
    margin:14px 0 8px !important;
    font-size:clamp(36px, 11vw, 50px) !important;
    line-height:.98 !important;
  }

  .confirm-page .confirm-subtitle,
  .success-confirm-page .confirm-subtitle{
    font-size:14px !important;
    line-height:1.45 !important;
  }

  .confirm-page .confirm-trust-row,
  .success-confirm-page .confirm-trust-row{
    grid-template-columns:1fr !important;
    gap:8px !important;
    margin-top:14px !important;
  }

  .confirm-page .confirm-trust-item,
  .success-confirm-page .confirm-trust-item{
    gap:8px !important;
    font-size:12px !important;
    line-height:1.25 !important;
  }

  .confirm-page .confirm-trust-icon,
  .success-confirm-page .confirm-trust-icon{
    width:34px !important;
    height:34px !important;
  }

  .confirm-page .confirm-trust-icon img,
  .success-confirm-page .confirm-trust-icon img{
    width:22px !important;
    height:22px !important;
  }

  .confirm-page .confirm-hero-paybox,
  .success-confirm-page .confirm-hero-paybox{
    min-height:0 !important;
    padding:16px !important;
    border-radius:20px !important;
  }

  .confirm-page .confirm-hero-total,
  .success-confirm-page .confirm-hero-total{
    font-size:clamp(42px, 13vw, 56px) !important;
    margin-bottom:10px !important;
  }

  .success-hero-visual{
    display:none !important;
  }

  .success-confirm-page .confirm-hero::before,
  .success-confirm-page .confirm-hero::after{
    opacity:.18 !important;
  }

  /* Allergen page: mobile cards first, full table optional */
  .allergen-mobile-cards{
    display:grid;
    gap:12px;
    padding:0 14px 14px;
  }

  .allergen-mobile-card{
    padding:16px;
    border:1px solid rgba(31,42,36,.10);
    border-radius:20px;
    background:rgba(255,255,255,.88);
    box-shadow:0 12px 28px rgba(0,0,0,.045);
  }

  .allergen-table-toggle{
    display:flex;
    align-items:center;
    justify-content:center;
    width:calc(100% - 28px);
    min-height:46px;
    margin:2px 14px 14px;
    padding:0 16px;
    border:1px solid rgba(31,107,84,.18);
    border-radius:999px;
    background:rgba(31,107,84,.07);
    color:var(--brand);
    font-weight:950;
  }

  .allergen-table-wrap{
    display:none;
  }

  .allergen-table-wrap.is-open{
    display:block;
  }

  .allergen-table-side-note{
    display:none !important;
  }

  .allergen-table-card-v2 .allergen-table-head{
    padding:20px 18px 12px !important;
  }

  .allergen-table-card-v2 .allergen-legend{
    padding:12px 18px !important;
  }
}

@media (max-width:420px){
  .nilo-visual-card,
  .nilo-visual-card img{
    height:74px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    padding-bottom:120px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media{
    height:170px !important;
  }
}

/* =========================================================
   MOBILE UX PATCH V2A — category bar stability + mobile-only menu lightbox
   Scope: bug fixes only. Desktop visual layout stays unchanged.
========================================================= */

/* The menu image lightbox is a mobile-only affordance. On desktop, menu photos
   behave like normal images and do not show a zoom cursor/focus target. */
.menu-card-image-button:disabled{
  cursor:default !important;
  pointer-events:none !important;
  opacity:1 !important;
}

.menu-card-image-button:disabled .menu-card-image{
  transform:none !important;
}

@media (min-width:761px){
  .menu-image-lightbox,
  .menu-image-lightbox.is-open{
    display:none !important;
  }
}

/* Lunch/team order category bar: one stable horizontal row on tablet/mobile.
   This overrides the earlier compact-fit rule that wrapped the bar to 2–3 lines. */
@media (max-width:980px){
  .order-page-redesign .order-cat-nav-wrap{
    overflow:hidden !important;
    border-radius:0 22px 22px 0 !important;
  }

  .order-page-redesign .order-cat-nav{
    display:flex !important;
    flex-wrap:nowrap !important;
    justify-content:flex-start !important;
    align-items:center !important;
    gap:7px !important;
    overflow-x:auto !important;
    overflow-y:hidden !important;
    padding:4px 2px 8px 0 !important;
    scrollbar-width:none !important;
    -webkit-overflow-scrolling:touch;
  }

  .order-page-redesign .order-cat-nav::-webkit-scrollbar{
    display:none !important;
  }

  .order-page-redesign .order-cat-nav-link{
    flex:0 0 auto !important;
    min-width:max-content !important;
    min-height:42px !important;
    padding:0 13px !important;
    white-space:nowrap !important;
    font-size:12.5px !important;
  }
}

@media (max-width:420px){
  .order-page-redesign .order-cat-nav-link{
    min-height:40px !important;
    padding:0 11px !important;
    gap:6px !important;
    font-size:12px !important;
  }
}


/* =========================================================
   MOBILE UX PATCH V2B — compact lunch/team ordering hero
   Scope: mobile-only layout. Desktop order hero and checkout logic stay unchanged.
========================================================= */

@media (max-width: 820px){
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    display:block !important;
    min-height:0 !important;
    margin:0 -14px 12px !important;
    padding:20px 16px 16px !important;
    border-radius:0 0 22px 22px !important;
    overflow:hidden !important;
    background:
      radial-gradient(420px 180px at 0% 0%, rgba(31,107,84,.10), transparent 62%),
      linear-gradient(180deg, rgba(255,255,255,.90), rgba(250,247,240,.78)) !important;
    box-shadow:0 10px 24px rgba(31,42,36,.045) !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::before,
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero::after,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero::before,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero::after,
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-media,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-media{
    display:none !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero-copy,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero-copy{
    max-width:none !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-kicker,
  main[data-order-mode="team"].order-page-redesign .order-lunch-kicker{
    margin-bottom:8px !important;
    font-size:10.5px !important;
    letter-spacing:.16em !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-title,
  main[data-order-mode="team"].order-page-redesign .order-lunch-title{
    max-width:11.5ch !important;
    font-size:clamp(34px, 10.5vw, 46px) !important;
    line-height:.96 !important;
    letter-spacing:-.045em !important;
    text-shadow:none !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-lead,
  main[data-order-mode="team"].order-page-redesign .order-lunch-lead{
    max-width:34rem !important;
    margin-top:9px !important;
    font-size:14px !important;
    line-height:1.42 !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust{
    display:grid !important;
    grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
    gap:7px !important;
    max-width:none !important;
    margin-top:13px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-item,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-item{
    display:flex !important;
    grid-template-columns:none !important;
    align-items:center !important;
    min-width:0 !important;
    min-height:38px !important;
    padding:7px 9px !important;
    gap:7px !important;
    border:1px solid rgba(31,107,84,.12) !important;
    border-radius:999px !important;
    background:rgba(255,255,255,.72) !important;
    color:rgba(31,42,36,.78) !important;
    font-size:11.5px !important;
    font-weight:850 !important;
    line-height:1.18 !important;
    box-shadow:none !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-item:nth-child(2),
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-item:nth-child(3){
    grid-column:1 / -1 !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-icon,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-icon{
    flex:0 0 24px !important;
    width:24px !important;
    height:24px !important;
    border-color:rgba(31,107,84,.10) !important;
    background:rgba(255,255,255,.78) !important;
    box-shadow:none !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-icon img,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-icon img{
    width:15px !important;
    height:15px !important;
    object-fit:contain !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-item > span:last-child,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-item > span:last-child{
    min-width:0 !important;
    display:-webkit-box !important;
    -webkit-line-clamp:2 !important;
    -webkit-box-orient:vertical !important;
    overflow:hidden !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-builder-section,
  main[data-order-mode="team"].order-page-redesign .order-builder-section{
    margin-top:8px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-flow-panel,
  main[data-order-mode="team"].order-page-redesign .order-flow-panel{
    margin-bottom:12px !important;
    padding:12px !important;
    border-radius:18px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-flow-title,
  main[data-order-mode="team"].order-page-redesign .order-flow-title{
    margin-bottom:8px !important;
    font-size:11px !important;
    letter-spacing:.14em !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-flow-items,
  main[data-order-mode="team"].order-page-redesign .order-flow-items{
    gap:8px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-flow-item,
  main[data-order-mode="team"].order-page-redesign .order-flow-item{
    grid-template-columns:28px 1fr !important;
    gap:9px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-flow-number,
  main[data-order-mode="team"].order-page-redesign .order-flow-number{
    width:28px !important;
    height:28px !important;
    font-size:12px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-flow-copy strong,
  main[data-order-mode="team"].order-page-redesign .order-flow-copy strong{
    font-size:12.5px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-flow-copy small,
  main[data-order-mode="team"].order-page-redesign .order-flow-copy small{
    display:none !important;
  }
}

@media (max-width: 420px){
  main[data-order-mode="lunch"].order-page-redesign .order-lunch-hero,
  main[data-order-mode="team"].order-page-redesign .order-lunch-hero{
    padding:18px 14px 14px !important;
    margin-bottom:10px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-title,
  main[data-order-mode="team"].order-page-redesign .order-lunch-title{
    max-width:10.8ch !important;
    font-size:clamp(32px, 10.8vw, 42px) !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-lead,
  main[data-order-mode="team"].order-page-redesign .order-lunch-lead{
    font-size:13.5px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust{
    gap:6px !important;
  }

  main[data-order-mode="lunch"].order-page-redesign .order-lunch-trust-item,
  main[data-order-mode="team"].order-page-redesign .order-lunch-trust-item{
    min-height:36px !important;
    padding:7px 8px !important;
    font-size:11px !important;
  }
}

/* =========================================================
   MOBILE UX PATCH V2D — homepage polish + allergen table stability
   Scope: mobile-only visual polish. Desktop layout, ordering, payment and admin logic untouched.
========================================================= */

@media (max-width: 760px){
  /* Homepage: make the three NILO way photos feel intentional/premium, not tiny thumbnails. */
  .nilo-visual-grid{
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:8px !important;
    margin-top:18px !important;
  }

  .nilo-visual-card{
    position:relative !important;
    min-height:0 !important;
    height:132px !important;
    border-radius:18px !important;
    overflow:hidden !important;
    border:1px solid rgba(31,42,36,.10) !important;
    box-shadow:0 12px 28px rgba(0,0,0,.075) !important;
    background:rgba(255,255,255,.72) !important;
  }

  .nilo-visual-card img{
    display:block !important;
    width:100% !important;
    height:100% !important;
    min-height:0 !important;
    object-fit:cover !important;
    object-position:center !important;
    transform:scale(1.05) !important;
  }

  .nilo-visual-card::after{
    content:"";
    position:absolute;
    inset:auto 0 0 0;
    height:34%;
    pointer-events:none;
    background:linear-gradient(180deg, transparent, rgba(19,27,23,.14));
  }

  /* Homepage: fix the three ordering steps so the number/icon can never overlap text. */
  .nilo-how-steps{
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
  }

  .nilo-step-card{
    display:grid !important;
    grid-template-columns:70px minmax(0,1fr) !important;
    grid-template-rows:auto auto !important;
    column-gap:14px !important;
    row-gap:3px !important;
    align-items:center !important;
    min-height:0 !important;
    padding:14px !important;
    border-radius:20px !important;
  }

  .nilo-step-head{
    grid-column:1 !important;
    grid-row:1 / span 2 !important;
    display:grid !important;
    place-items:center !important;
    width:60px !important;
    height:60px !important;
    margin:0 !important;
    position:relative !important;
  }

  .nilo-step-number{
    position:absolute !important;
    left:0 !important;
    top:0 !important;
    z-index:2 !important;
    width:26px !important;
    height:26px !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1 !important;
    box-shadow:0 6px 14px rgba(0,0,0,.08) !important;
  }

  .nilo-step-icon{
    width:54px !important;
    height:54px !important;
    margin:0 !important;
  }

  .nilo-step-icon img{
    width:52px !important;
    height:52px !important;
  }

  .nilo-step-card h3{
    grid-column:2 !important;
    grid-row:1 !important;
    margin:0 0 3px !important;
    font-size:17px !important;
    line-height:1.1 !important;
  }

  .nilo-step-card p{
    grid-column:2 !important;
    grid-row:2 !important;
    margin:0 !important;
    font-size:13px !important;
    line-height:1.42 !important;
  }

  /* Allergens: mobile card view remains primary; full table should not overlap while swiping. */
  .allergen-table-wrap.is-open{
    overflow-x:auto !important;
    overflow-y:hidden !important;
    overscroll-behavior-x:contain !important;
    padding-bottom:10px !important;
    background:rgba(255,255,255,.96) !important;
    border-top:1px solid rgba(31,42,36,.08) !important;
  }

  .allergen-matrix-v2{
    table-layout:fixed !important;
    border-collapse:separate !important;
    border-spacing:0 !important;
  }

  .allergen-matrix-v2 th,
  .allergen-matrix-v2 td{
    background-clip:padding-box !important;
  }

  .allergen-matrix-v2 .dish-col,
  .allergen-matrix-v2 tbody th{
    position:sticky !important;
    left:0 !important;
    z-index:8 !important;
    min-width:185px !important;
    width:185px !important;
    max-width:185px !important;
    background:#fff !important;
    box-shadow:10px 0 16px rgba(255,255,255,.96), 1px 0 0 rgba(31,42,36,.10) !important;
  }

  .allergen-matrix-v2 thead .dish-col{
    z-index:10 !important;
    background:rgb(252,251,249) !important;
  }

  .allergen-matrix-v2 td{
    position:relative !important;
    z-index:1 !important;
    min-width:70px !important;
    width:70px !important;
    background:rgba(255,255,255,.98) !important;
  }

  .allergen-matrix-v2 thead th:not(.dish-col){
    z-index:6 !important;
    background:rgb(252,251,249) !important;
  }
}

@media (max-width: 420px){
  .nilo-visual-card{
    height:116px !important;
    border-radius:16px !important;
  }

  .nilo-step-card{
    grid-template-columns:64px minmax(0,1fr) !important;
    column-gap:12px !important;
    padding:13px !important;
  }

  .nilo-step-head{
    width:56px !important;
    height:56px !important;
  }

  .nilo-step-icon,
  .nilo-step-icon img{
    width:50px !important;
    height:50px !important;
  }

  .nilo-step-number{
    width:24px !important;
    height:24px !important;
    font-size:12px !important;
  }
}


/* NILO LEGAL DOCUMENT CONTENT — PHASE 2 */
.legal-layout-full{
  grid-template-columns:minmax(0, 1fr);
}

.legal-document-body > .legal-version{
  display:inline-flex;
  margin:0 0 24px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(31,107,84,.06);
  color:var(--muted);
  font-size:14px;
}

.legal-document-body .legal-section h3{
  margin:20px 0 8px;
  color:var(--text);
  font-size:18px;
  line-height:1.3;
}

.legal-document-body .legal-section strong{
  color:var(--text);
}

.legal-document-body .legal-updated{
  margin-top:18px !important;
}

@media (max-width:640px){
  .legal-document-body > .legal-version{
    font-size:13px;
  }
}


.allergen-coconut-note{
  margin:10px 0 0;
  font-size:12.5px;
  line-height:1.55;
}

/* =========================================================
   MOBILE CART BAR CLICK-SAFETY PATCH — PHASE 5
   Prevents taps from passing through the fixed cart bar to footer links.
   Mobile-only; checkout/payment logic remains unchanged.
========================================================= */

@media (max-width: 980px){
  /*
   * Keep enough scrollable space after the footer so its links can move
   * fully above the fixed cart bar instead of remaining underneath it.
   */
  body.mobile-cart-active{
    padding-bottom:calc(124px + env(safe-area-inset-bottom));
  }

  /*
   * The complete fixed layer must intercept touch input. Previously the
   * wrapper used pointer-events:none, which allowed taps in transparent
   * wrapper areas to reach links underneath.
   */
  .order-page-redesign .mobile-cart-bar{
    z-index:3200;
    pointer-events:auto;
    isolation:isolate;
    touch-action:manipulation;
    background:
      linear-gradient(
        180deg,
        rgba(244,241,234,.995) 0%,
        rgba(244,241,234,.995) 100%
      );
    border-top:1px solid rgba(31,42,36,.08);
    box-shadow:0 -10px 28px rgba(31,42,36,.10);
  }

  /*
   * The button remains the only action. Child spans do not become separate
   * touch targets, so tapping the icon, total or white CTA always reaches
   * the same button handler.
   */
  .order-page-redesign .mobile-cart-bar-btn{
    position:relative;
    z-index:1;
    pointer-events:auto;
    touch-action:manipulation;
    -webkit-tap-highlight-color:transparent;
  }

  .order-page-redesign .mobile-cart-bar-btn > *{
    pointer-events:none;
  }

  /*
   * Preserve the existing bottom-sheet behaviour: once checkout opens,
   * the hidden cart bar must stop receiving input.
   */
  body.mobile-checkout-open .mobile-cart-bar{
    opacity:0;
    pointer-events:none;
    transform:translateY(10px);
  }
}

@media (max-width: 560px){
  body.mobile-cart-active{
    padding-bottom:calc(136px + env(safe-area-inset-bottom));
  }
}