:root {
  --bg: #e6f4f5;
  --dark: #235b63;
  --orange: #f47b3b;
  --teal: #43a8ae;
  --soft-orange: #ffd9c5;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; overflow-x: hidden; background: var(--bg); }
body { font-family: "Poppins", Arial, sans-serif; color: var(--dark); }
.svg-filters { position: absolute; width: 0; height: 0; overflow: hidden; }
.page { width: 100vw; background: var(--bg); }
.canvas {
  position: relative;
  width: 100vw;
  aspect-ratio: 4269 / 6429;
  min-height: 100vh;
  overflow: hidden;
  background: var(--bg);
}
.layer, .bg-lines { position: absolute; user-select: none; pointer-events: none; image-rendering: auto; }
.full { left: 0; top: 0; width: 100%; height: auto; }
.base-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--bg);
  background-image: url("assets/Background Web.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
}
/* Keep the original Canva background color and line tone. */
.base-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("assets/Background Web.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  background-position: center top;
  opacity: .18;
  mix-blend-mode: multiply;
}

.animated-bg-lines {
  z-index: 1;
  opacity: .58;
  mix-blend-mode: multiply;
  filter: url(#seaweed-lines);
  transform-origin: 50% 50%;
  animation: seaweedFloat 22s ease-in-out infinite alternate;
}

@keyframes seaweedFloat {
  0% { transform: translate3d(-0.28%, -0.10%, 0) scale(1.006) skewX(-0.35deg); }
  50% { transform: translate3d(0.32%, 0.18%, 0) scale(1.012) skewX(0.45deg); }
  100% { transform: translate3d(-0.18%, 0.05%, 0) scale(1.008) skewX(-0.25deg); }
}

.bg-lines { display: none; }

.elements { z-index: 2; }
.logo { z-index: 8; }
.upper-buttons { z-index: 10; }
.news-button { left: 35.63%; top: 1.99%; width: 100%; z-index: 9; }
.noah { left: 22.59%; top: 19.86%; width: 100%; z-index: 6; }
.friends { left: -23.94%; top: 40.07%; width: 100%; z-index: 6; }
.cold-img { left: -20.45%; top: 62.57%; width: 100%; z-index: 6; }
.warm-img { left: 21.32%; top: 64.06%; width: 100%; z-index: 6; }
.decorative-wave {
  left: 6.9%;
  top: 36.95%;
  width: 57.2%;
  height: auto;
  z-index: 4;
}

.copy, .nav-btn, .section-badge { position: absolute; z-index: 7; text-align: center; }
.hero-title, .section-title, .cold-title, .warm-title, .closing, .beginning, .nav-btn { font-family: "MuseoModerno", "Poppins", sans-serif; }
.hero-title {
  left: 9.5%; top: 24.15%; width: 43%;
  white-space: nowrap;
  color: var(--orange); font-size: 2.82vw; line-height: 1.38; font-weight: 800; letter-spacing: .035em;
}
.hero-sub {
  left: 10.2%; top: 32.55%; width: 43%;
  white-space: nowrap;
  font-size: 1.58vw; line-height: 1.34; font-weight: 400; letter-spacing: .02em;
}
.beginning {
  left: 13.2%; top: 40.45%; width: 43%;
  color: var(--orange); font-size: 1.86vw; line-height: 1.25; font-weight: 500; letter-spacing: .08em;
}
.vision {
  left: 47.2%; top: 43.65%; width: 43.5%;
  font-size: 1.62vw; line-height: 1.47; font-weight: 400; letter-spacing: .015em;
}
.vision strong { font-weight: 800; }
.section-title {
  left: 27.0%; top: 58.95%; width: 46%;
  color: var(--orange); font-size: 2.12vw; font-weight: 900; letter-spacing: .115em; white-space: nowrap;
  padding: .55em .75em .48em; border-radius: .42em; background: rgba(255,217,197,.94);
}
.cold-title, .warm-title { color: var(--teal); font-size: 2.10vw; font-weight: 900; letter-spacing: .18em; white-space: nowrap; }
.cold-title { left: 13.0%; top: 81.15%; width: 34%; }
.warm-title { left: 58.8%; top: 81.15%; width: 36%; }
.cold-text, .warm-text { font-size: 1.48vw; line-height: 1.31; font-weight: 400; letter-spacing: .01em; }
.cold-text { left: 13.5%; top: 85.25%; width: 33%; }
.warm-text { left: 57.2%; top: 85.25%; width: 39%; }
.closing { left: 10.0%; top: 95.15%; width: 64%; color: var(--orange); font-size: 2.22vw; font-weight: 900; letter-spacing: .085em; text-align: left; white-space: nowrap; }

/* Real visible navigation buttons, positioned on top of the teal bar */
.nav-btn {
  display: flex; align-items: center; justify-content: center;
  height: 2.75%;
  border-radius: 999px; background: #fff;
  color: #1b1b1b; text-decoration: none;
  font-family: "Poppins", Arial, sans-serif;
  font-size: 1.02vw; font-weight: 500;
  letter-spacing: .01em;
  box-shadow: none;
  z-index: 12;
}
.nav-story { left: 10.9%; top: 15.55%; width: 14.7%; }
.nav-offer { left: 32.65%; top: 15.55%; width: 14.7%; }
.nav-find { left: 52.85%; top: 15.55%; width: 14.7%; }
.nav-contact { left: 74.05%; top: 15.55%; width: 14.9%; }

.hotspot { position: absolute; z-index: 20; display: block; border: 0; margin: 0; padding: 0; background: transparent; cursor: pointer; text-decoration: none; }
.hotspot:focus-visible { outline: 3px solid rgba(67,168,174,.9); outline-offset: 4px; border-radius: 999px; }
.lang { left: 5.5%; top: 2.4%; width: 7.8%; height: 4.3%; border-radius: 999px; }
.news { left: 81.2%; top: 5.2%; width: 8.5%; height: 4.2%; border-radius: 999px; }
.menu { left: 88.7%; top: 1.5%; width: 7.5%; height: 6.5%; border-radius: 999px; }
.story { left: 10.9%; top: 15.55%; width: 14.7%; height: 2.75%; border-radius: 999px; }
.offer { left: 32.65%; top: 15.55%; width: 14.7%; height: 2.75%; border-radius: 999px; }
.find { left: 52.85%; top: 15.55%; width: 14.7%; height: 2.75%; border-radius: 999px; }
.contact { left: 74.05%; top: 15.55%; width: 14.9%; height: 2.75%; border-radius: 999px; }
.floating-menu {
  position: absolute; right: 4.2%; top: 9.4%; width: min(260px, 18vw); min-width: 190px;
  padding: 14px; border-radius: 24px; background: rgba(255,255,255,.96);
  box-shadow: 0 18px 40px rgba(0,0,0,.14); z-index: 30;
}
.floating-menu a { display: block; padding: 10px 14px; border-radius: 14px; color: var(--dark); text-decoration: none; font-family: "MuseoModerno", "Poppins", sans-serif; font-weight: 800; }
.floating-menu a:hover { background: var(--bg); }


/* Desktop design protection: below tablet width, keep the Canva layout proportional.
   This prevents text boxes/buttons from wrapping or overlapping while we build a separate mobile version. */
@media (max-width: 900px) {
  html, body { overflow-x: auto; }
  .page { width: 900px; min-width: 900px; }
  .canvas { width: 900px; min-width: 900px; }
}

/* ---------- Mobile version: separate layout, optimized for phones ---------- */
.mobile-home { display: none; }

@media (max-width: 768px) {
  html, body { overflow-x: hidden; background: var(--bg); }
  .page { width: 100%; min-width: 0; }
  .canvas { display: none; }

  .mobile-home {
    position: relative;
    display: block;
    min-height: 100vh;
    overflow: hidden;
    background: var(--bg);
    color: var(--dark);
    padding: 14px 18px 42px;
  }

  .mobile-bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background-color: var(--bg);
    background-image: url("assets/Background Web.png");
    background-size: auto 100%;
    background-position: center top;
    background-repeat: repeat-y;
    opacity: 1;
  }

  .mobile-header,
  .mobile-hero,
  .mobile-community,
  .mobile-offer,
  .mobile-nav {
    position: relative;
    z-index: 2;
  }

  .mobile-header {
    display: grid;
    grid-template-columns: 48px 1fr 48px;
    align-items: start;
    gap: 8px;
    min-height: 96px;
    margin-bottom: 4px;
  }

  .mobile-logo {
    justify-self: center;
    width: clamp(82px, 24vw, 106px);
    height: auto;
    display: block;
  }

  .mobile-lang,
  .mobile-menu-btn {
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 999px;
    background: var(--teal);
    color: white;
    box-shadow: 0 7px 16px rgba(35, 91, 99, .10);
    cursor: pointer;
  }

  .mobile-lang {
    font-size: 0;
    position: relative;
  }
  .mobile-lang::before {
    content: "EN/DE";
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Poppins", sans-serif;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .02em;
  }

  .mobile-menu-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    justify-self: end;
  }
  .mobile-menu-btn span {
    width: 24px;
    height: 3px;
    border-radius: 999px;
    background: white;
  }

  .mobile-nav {
    margin: -18px 0 24px auto;
    width: min(260px, 86vw);
    padding: 10px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 18px 40px rgba(0,0,0,.14);
  }
  .mobile-nav a {
    display: block;
    padding: 11px 13px;
    border-radius: 15px;
    color: var(--dark);
    text-decoration: none;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .03em;
  }
  .mobile-nav a:hover { background: rgba(67,168,174,.12); }

  .mobile-teal-divider {
    position: relative;
    z-index: 2;
    width: min(360px, 92vw);
    height: 18px;
    margin: 8px auto 24px;
    background: var(--teal);
    border-radius: 999px;
    box-shadow: 0 8px 18px rgba(35, 91, 99, .08);
  }

  .mobile-copy { text-align: center; }

  .mobile-hero { padding: 4px 0 20px; }

  .mobile-hero-title {
    margin: 0 auto 18px;
    max-width: 350px;
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 850;
    font-size: clamp(27px, 7.4vw, 34px);
    line-height: 1.22;
    letter-spacing: .03em;
  }

  .mobile-hero-sub {
    margin: 0 auto 14px;
    max-width: 330px;
    font-size: clamp(15.5px, 4.15vw, 18px);
    line-height: 1.42;
    letter-spacing: .012em;
  }

  .mobile-noah {
    display: block;
    width: min(275px, 76vw);
    height: auto;
    margin: 2px auto 4px;
  }

  .mobile-wave {
    display: block;
    width: 92vw;
    max-width: 380px;
    height: 10px;
    object-fit: fill;
    margin: 2px auto 16px;
  }

  .mobile-beginning {
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(18px, 5vw, 22px);
    line-height: 1.28;
    font-weight: 500;
    letter-spacing: .075em;
    margin: 0 auto;
    max-width: 350px;
  }

  .mobile-community { padding: 8px 0 28px; }

  .mobile-friends {
    display: block;
    width: min(330px, 88vw);
    height: auto;
    margin: 0 auto 18px;
  }

  .mobile-vision {
    max-width: 342px;
    margin: 0 auto;
    font-size: clamp(16px, 4.25vw, 18.5px);
    line-height: 1.48;
    letter-spacing: .008em;
  }
  .mobile-vision strong { font-weight: 800; }

  .mobile-offer { padding-top: 4px; }

  .mobile-section-title {
    display: block;
    width: min(330px, 88vw);
    margin: 0 auto 22px;
    padding: 12px 15px 11px;
    border-radius: 17px;
    background: rgba(255,217,197,.95);
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 900;
    font-size: clamp(19px, 5.2vw, 24px);
    line-height: 1.22;
    letter-spacing: .075em;
  }

  .mobile-card {
    max-width: 360px;
    margin: 0 auto 32px;
    text-align: center;
  }

  .mobile-product {
    display: block;
    width: min(340px, 92vw);
    height: auto;
    margin: 0 auto 14px;
  }

  .mobile-product-warm {
    width: min(245px, 66vw);
    margin-top: 4px;
  }

  .mobile-card h2 {
    margin: 4px 0 11px;
    color: var(--teal);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(22px, 6vw, 27px);
    line-height: 1.14;
    font-weight: 900;
    letter-spacing: .145em;
  }

  .mobile-card p {
    margin: 0 auto;
    max-width: 330px;
    font-size: clamp(15.5px, 4.15vw, 18px);
    line-height: 1.42;
  }

  .mobile-closing {
    max-width: 340px;
    margin: 0 auto;
    color: var(--orange);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(20px, 5.5vw, 26px);
    line-height: 1.25;
    font-weight: 900;
    letter-spacing: .055em;
  }
}

@media (max-width: 380px) {
  .mobile-home { padding-left: 14px; padding-right: 14px; }
  .mobile-header { grid-template-columns: 44px 1fr 44px; min-height: 88px; }
  .mobile-lang, .mobile-menu-btn { width: 40px; height: 40px; }
  .mobile-menu-btn span { width: 22px; height: 3px; }
  .mobile-logo { width: 82px; }
  .mobile-teal-divider { height: 15px; margin: 6px auto 20px; }
  .mobile-hero-title { font-size: 26px; }
  .mobile-section-title { letter-spacing: .055em; }
  .mobile-card h2 { letter-spacing: .11em; }
}

/* OUR STORY clean rebuild: exact Canva art + real Musano background */
.story-page-clean {
  --story-bg: #f9dece;
  min-height: 100vh;
  width: 100%;
  background: var(--story-bg);
  overflow-x: hidden;
}

.story-canvas-clean {
  position: relative;
  width: 100vw;
  aspect-ratio: 1024.5 / 1850.25;
  min-height: 100vh;
  overflow: hidden;
  background: var(--story-bg);
}
.story-canvas-clean.is-de {
  aspect-ratio: 1024.5 / 1946.25;
}

.story-bg-static {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-color: var(--story-bg);
  background-image: url("assets/story/background-our-story.png");
  background-size: 100% 100%;
  background-position: center top;
  background-repeat: no-repeat;
}

.story-bg-lines-clean {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  user-select: none;
  opacity: .74;
  filter: url(#story-soft-wave);
  transform-origin: 50% 50%;
  animation: storyLinesDriftClean 28s ease-in-out infinite alternate;
}

@keyframes storyLinesDriftClean {
  0% { transform: translate3d(-0.20%, -0.08%, 0) scale(1.004) skewX(-0.18deg); }
  50% { transform: translate3d(0.20%, 0.10%, 0) scale(1.008) skewX(0.22deg); }
  100% { transform: translate3d(-0.12%, 0.04%, 0) scale(1.005) skewX(-0.14deg); }
}

.story-design {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  object-fit: fill;
  display: block;
  pointer-events: none;
  user-select: none;
  image-rendering: auto;
}

.story-design[hidden] { display: none; }

.story-lang-button-clean {
  position: absolute;
  z-index: 20;
  left: 5.2%;
  top: 2.15%;
  width: 10.4%;
  height: 5.5%;
  border: 0;
  background: transparent;
  cursor: pointer;
  border-radius: 999px;
}

.story-home-link-clean {
  position: absolute;
  z-index: 20;
  right: 4.0%;
  top: 1.35%;
  width: 13.5%;
  height: 10.0%;
  border-radius: 18px;
}


.story-menu-button-clean {
  position: absolute;
  z-index: 21;
  left: 5.2%;
  top: 7.45%;
  width: 10.4%;
  height: 5.9%;
  border: 0;
  padding: 0;
  margin: 0;
  background: transparent;
  border-radius: 999px;
  cursor: pointer;
}
.story-floating-menu-clean {
  position: absolute;
  z-index: 35;
  left: 5.0%;
  top: 14.2%;
  width: 18.0%;
  min-width: 190px;
  padding: 1.25% 1.25%;
  border-radius: 22px;
  background: rgba(255,255,255,.93);
  box-shadow: 0 18px 42px rgba(35, 91, 99, .16);
  backdrop-filter: blur(8px);
}
.story-floating-menu-clean a {
  display: block;
  padding: 9px 14px;
  border-radius: 14px;
  color: var(--dark);
  text-decoration: none;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-weight: 800;
  font-size: clamp(13px, 1.05vw, 18px);
  letter-spacing: .03em;
}
.story-floating-menu-clean a:hover {
  background: rgba(68, 168, 174, .11);
}
.story-menu-button-clean:focus-visible {
  outline: 3px solid rgba(253,131,55,.75);
  outline-offset: 4px;
}

.story-lang-button-clean:focus-visible,
.story-home-link-clean:focus-visible {
  outline: 3px solid rgba(253,131,55,.75);
  outline-offset: 4px;
}

@media (max-width: 768px) {
  .story-page-clean { overflow-x: auto; }
  .story-floating-menu-clean { min-width: 170px; width: 40%; left: 5%; top: 14.5%; }
  .story-canvas-clean {
    width: 100vw;
    min-width: 420px;
    min-height: auto;
  }
}

/* ---------- OUR STORY mobile v46: optimized, text-photo rhythm ---------- */
.story-mobile-clean { display: none; }

@media (max-width: 768px) {
  .story-page-clean {
    overflow-x: hidden;
    background: #f9dece;
  }

  .story-canvas-clean { display: none; }

  .story-mobile-clean {
    --story-peach: #f9dece;
    --story-teal: #43a8ae;
    --story-orange: #f47b3b;
    --story-soft: #e9f6f4;
    display: block;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 20px 18px 44px;
    background: var(--story-peach);
    color: #235b63;
    font-family: "Poppins", Arial, sans-serif;
  }

  .story-mobile-bg,
  .story-mobile-lines {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    user-select: none;
  }

  .story-mobile-bg {
    z-index: 0;
    background: #f9dece url("assets/story/background-our-story.png") center top / cover repeat-y;
  }

  .story-mobile-lines {
    z-index: 1;
    object-fit: cover;
    opacity: .48;
    filter: url(#story-soft-wave);
    animation: storyMobileWaveV46 34s ease-in-out infinite alternate;
  }

  @keyframes storyMobileWaveV46 {
    0% { transform: translate3d(-0.16%, -0.08%, 0) scale(1.006) skewX(-0.10deg); }
    50% { transform: translate3d(0.16%, 0.08%, 0) scale(1.012) skewX(0.12deg); }
    100% { transform: translate3d(-0.08%, 0.05%, 0) scale(1.008) skewX(-0.08deg); }
  }

  .story-mobile-header,
  .story-mobile-nav,
  .story-mobile-content {
    position: relative;
    z-index: 4;
  }

  .story-mobile-header {
    display: grid;
    grid-template-columns: 58px 1fr 58px;
    align-items: start;
    min-height: 160px;
    margin-bottom: 4px;
  }

  .story-mobile-lang,
  .story-mobile-menu-btn {
    width: 56px;
    height: 56px;
    border: 0;
    border-radius: 999px;
    background: var(--story-orange);
    color: #fff;
    box-shadow: 0 8px 22px rgba(244, 123, 59, .16);
    cursor: pointer;
  }

  .story-mobile-lang {
    font-family: "Poppins", Arial, sans-serif;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .story-mobile-menu-btn {
    justify-self: end;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 0;
  }

  .story-mobile-menu-btn span {
    display: block;
    width: 29px;
    height: 4px;
    border-radius: 999px;
    background: #fff;
  }

  .story-mobile-logo-link {
    justify-self: center;
    display: block;
    width: clamp(138px, 39vw, 168px);
    margin-top: -2px;
  }

  .story-mobile-logo {
    display: block;
    width: 100%;
    height: auto;
  }

  .story-mobile-nav {
    width: min(260px, 80vw);
    margin: -44px 0 24px auto;
    padding: 12px;
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 18px 40px rgba(35,91,99,.14);
    backdrop-filter: blur(8px);
  }

  .story-mobile-nav a {
    display: block;
    padding: 11px 14px;
    border-radius: 14px;
    color: #235b63;
    text-decoration: none;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: 14px;
    font-weight: 850;
    letter-spacing: .035em;
  }

  .story-mobile-nav a:hover { background: rgba(67,168,174,.11); }

  .story-mobile-title {
    width: fit-content;
    max-width: 88%;
    margin: 0 auto 22px;
    padding: 11px 26px 13px;
    border-radius: 13px;
    background: rgba(233, 246, 244, .96);
    color: var(--story-teal);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(25px, 7vw, 34px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .15em;
    text-align: center;
    text-transform: uppercase;
  }

  .story-mobile-card {
    width: min(100%, 620px);
    margin: 0 auto 18px;
    border-radius: 18px;
    padding: 19px 19px 21px;
    color: #fff;
    box-shadow: 0 10px 24px rgba(71, 40, 20, .055);
  }

  .story-mobile-card.teal { background: rgba(67, 168, 174, .98); }
  .story-mobile-card.orange { background: rgba(244, 160, 112, .96); }

  .story-mobile-card p {
    margin: 0;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(15px, 3.92vw, 17px);
    line-height: 1.52;
    font-weight: 500;
    letter-spacing: .035em;
  }
  .story-mobile-card p + p { margin-top: 13px; }
  .story-mobile-card strong { font-weight: 800; letter-spacing: .04em; }

  .story-mobile-photo,
  .story-mobile-founders {
    position: relative;
    z-index: 4;
    display: block;
    height: auto;
    object-fit: cover;
  object-position: center top;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 7px 10px rgba(55, 30, 20, .08));
  }

  .story-mobile-photo.couple {
    width: min(50vw, 205px);
    margin: -2px auto 24px;
  }

  .story-mobile-photo.baking {
    width: min(58vw, 230px);
    margin: -2px auto 24px;
  }

  .story-mobile-photo.small-photo {
    width: min(52vw, 205px);
    margin: -2px auto 24px;
  }

  .story-mobile-orange-divider {
    position: relative;
    z-index: 4;
    width: min(92vw, 390px);
    height: 10px;
    margin: 8px auto 22px;
    border-radius: 999px;
    background: var(--story-orange);
    opacity: .82;
  }

  .story-mobile-values-title {
    width: fit-content;
    margin: 0 auto 20px;
    padding: 12px 28px 14px;
    border-radius: 14px;
    background: #f4a070;
    color: #fff;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(24px, 7vw, 33px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .16em;
    text-align: center;
    text-transform: uppercase;
  }

  .story-mobile-founders {
    width: min(64vw, 250px);
    margin: 2px auto 22px;
  }

  .story-mobile-values-grid {
    position: relative;
    z-index: 4;
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
    width: min(100%, 620px);
    margin: 0 auto;
  }

  .value-card { text-align: center; }

  .value-card strong {
    display: inline-block;
    min-width: 170px;
    padding: 10px 16px 11px;
    border-radius: 10px;
    background: rgba(255,255,255,.94);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(19px, 5.2vw, 24px);
    line-height: 1;
    font-weight: 900;
    letter-spacing: .05em;
  }

  .value-card span {
    display: block;
    margin-top: 8px;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(15px, 3.9vw, 17px);
    line-height: 1.35;
    font-weight: 500;
    letter-spacing: .07em;
  }

  .value-card.orange-text strong,
  .value-card.orange-text span { color: var(--story-orange); }
  .value-card.teal-text strong,
  .value-card.teal-text span { color: var(--story-teal); }

  .story-mobile-content[hidden],
  .story-mobile-nav[hidden] { display: none; }
}

@media (max-width: 390px) {
  .story-mobile-clean { padding-left: 15px; padding-right: 15px; }
  .story-mobile-header { grid-template-columns: 54px 1fr 54px; min-height: 150px; }
  .story-mobile-lang, .story-mobile-menu-btn { width: 52px; height: 52px; }
  .story-mobile-menu-btn span { width: 27px; height: 4px; }
  .story-mobile-logo-link { width: clamp(132px, 40vw, 154px); }
  .story-mobile-card { padding: 18px 17px 20px; }
  .story-mobile-card p { font-size: 14.8px; letter-spacing: .03em; }
  .story-mobile-photo.couple { width: min(48vw, 190px); }
  .story-mobile-photo.baking { width: min(56vw, 218px); }
  .story-mobile-photo.small-photo { width: min(50vw, 190px); }
  .story-mobile-founders { width: min(62vw, 236px); }
}

/* =========================
   OUR OFFER PAGE
   ========================= */

.offer-body {
  margin: 0;
  background: #e8f6f7;
  color: #235b63;
  font-family: "Poppins", Arial, sans-serif;
}
.offer-page { min-height: 100vh; }
.offer-desktop {
  display: block;
  width: 100%;
  overflow-x: hidden;
  background: #e8f6f7;
}
.offer-stage {
  position: relative;
  width: min(100vw, 1366px);
  aspect-ratio: 1024.5 / 1708.5;
  margin: 0 auto;
  overflow: hidden;
  background: #e8f6f7;
}
.offer-bg,
.offer-design {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.offer-bg {
  z-index: 0;
  filter: url(#offer-soft-wave);
  opacity: 1;
}
.offer-design {
  z-index: 1;
  pointer-events: none;
}
.offer-copy { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.offer-copy[hidden] { display: none; }
.offer-title,
.offer-section-title,
.offer-product-label {
  position: absolute;
  margin: 0;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-weight: 900;
  text-align: center;
  line-height: 1;
  white-space: nowrap;
}
.offer-title {
  top: 4.2%; left: 50%; transform: translateX(-50%);
  color: #f47b3b;
  font-size: clamp(22px, 2.35vw, 33px);
  letter-spacing: .11em;
}
.offer-section-title {
  left: 50%; transform: translateX(-50%);
  color: #43a8ae;
  font-size: clamp(15px, 1.55vw, 22px);
  letter-spacing: .145em;
}
.offer-section-title.cold { top: 10.6%; }
.offer-section-title.warm { top: 55.95%; color: #f47b3b; }
.offer-product-label {
  color: #43a8ae;
  font-family: "Poppins", Arial, sans-serif;
  font-size: clamp(13px, 1.28vw, 19px);
  font-weight: 800;
  letter-spacing: .01em;
}
.offer-product-label.ice-label { top: 14.45%; left: 50%; transform: translateX(-50%); }
.offer-product-label.mousse-label { top: 32.18%; left: 50%; transform: translateX(-50%); }
.offer-product-label.waffle-label { top: 60.25%; left: 50%; transform: translateX(-50%); color: #f47b3b; }
.offer-product-label.cake-label { top: 78.1%; left: 50%; transform: translateX(-50%); color: #f47b3b; }
.offer-text {
  position: absolute;
  margin: 0;
  color: #235b63;
  font-family: "Poppins", Arial, sans-serif;
  font-size: clamp(12px, 1.13vw, 17px);
  line-height: 1.32;
  letter-spacing: .035em;
  text-align: center;
}
.offer-text.ice-main { top: 18.65%; left: 46.6%; width: 45.5%; }
.offer-text.ice-tag { top: 26.9%; left: 47.5%; width: 43%; color: #f47b3b; }
.offer-text.mousse-main { top: 38.35%; left: 46.8%; width: 44.0%; }
.offer-text.mousse-tag { top: 45.9%; left: 49.2%; width: 39.5%; color: #f47b3b; }
.offer-text.waffle-main { top: 66.05%; left: 48.8%; width: 40.0%; color: #f47b3b; }
.offer-text.waffle-tag { top: 73.2%; left: 51.2%; width: 36.2%; color: #235b63; }
.offer-text.cake-main { top: 84.35%; left: 48.0%; width: 42.0%; color: #f47b3b; }
.offer-text.cake-tag { top: 91.2%; left: 53.2%; width: 32%; color: #235b63; }
.offer-copy-de .offer-title { font-size: clamp(18px, 1.95vw, 29px); }
.offer-copy-de .offer-text { font-size: clamp(10.5px, 1.0vw, 15.5px); line-height: 1.28; letter-spacing: .025em; }
.offer-copy-de .ice-main { top: 18.4%; }
.offer-copy-de .ice-tag { top: 27.1%; }
.offer-copy-de .mousse-main { top: 38.15%; }
.offer-copy-de .mousse-tag { top: 46.05%; }
.offer-copy-de .waffle-main { top: 65.85%; }
.offer-copy-de .waffle-tag { top: 73.15%; }
.offer-copy-de .cake-main { top: 84.15%; }
.offer-copy-de .cake-tag { top: 91.1%; }
.offer-home-link,
.offer-lang-hotspot,
.offer-menu-hotspot,
.offer-info-hotspot {
  position: absolute;
  z-index: 5;
  border: 0;
  background: transparent;
  cursor: pointer;
  padding: 0;
}
.offer-home-link { top: 2.1%; left: 4.2%; width: 11.6%; height: 8.5%; }
.offer-lang-hotspot { top: 1.7%; left: 89.1%; width: 9.3%; height: 6.4%; border-radius: 50%; }
.offer-menu-hotspot { top: 7.0%; left: 88.9%; width: 10.0%; height: 7.5%; border-radius: 50%; }
.offer-info-hotspot { width: 8.7%; height: 5.4%; border-radius: 999px; }
.offer-info-hotspot.ice { top: 17.2%; left: 6.5%; }
.offer-info-hotspot.mousse { top: 36.8%; left: 6.5%; }
.offer-info-hotspot.waffles { top: 63.2%; left: 6.1%; }
.offer-info-hotspot.cake { top: 81.0%; left: 6.1%; cursor: default; }
.offer-floating-menu {
  position: absolute;
  z-index: 10;
  top: 15.0%;
  right: 4.2%;
  width: min(250px, 24%);
  padding: 22px 22px;
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 14px 28px rgba(35,91,99,.12);
  font-family: "Poppins", Arial, sans-serif;
}
.offer-floating-menu[hidden] { display: none; }
.offer-floating-menu a {
  display: block;
  padding: 9px 0;
  color: #235b63;
  text-decoration: none;
  font-size: clamp(14px, 1.15vw, 17px);
  font-weight: 700;
  letter-spacing: .04em;
}
.offer-floating-menu a:hover { color: #f47b3b; }

.nutrition-modal[hidden] { display: none; }
.nutrition-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.nutrition-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(31, 65, 70, .45);
  backdrop-filter: blur(3px);
}
.nutrition-modal-panel {
  position: relative;
  z-index: 1;
  width: min(94vw, 860px);
  border-radius: 24px;
  background: transparent;
  padding: 0;
  box-shadow: 0 22px 60px rgba(0,0,0,.18);
}
.nutrition-modal-panel img { display: block; width: 100%; height: auto; border-radius: 18px; }
.nutrition-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 50%;
  background: #f47b3b;
  color: #fff;
  font-size: 30px;
  line-height: 1;
  cursor: pointer;
}

.offer-mobile { display: none; }

@media (max-width: 768px) {
  .offer-desktop { display: none; }
  .offer-mobile {
    display: block;
    position: relative;
    min-height: 100vh;
    overflow: hidden;
    padding: 22px 18px 48px;
    background: #e8f6f7;
  }
  .offer-mobile-bg {
    position: fixed;
    inset: 0;
    background-image: url('assets/offer/offer-background.svg');
    background-size: cover;
    background-position: center top;
    filter: url(#offer-soft-wave);
    opacity: 1;
    z-index: 0;
    pointer-events: none;
  }
  .offer-mobile-header {
    position: relative;
    z-index: 3;
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: start;
    min-height: 160px;
  }
  .offer-mobile-lang,
  .offer-mobile-menu-btn {
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: #43a8ae;
    color: white;
    box-shadow: 0 10px 24px rgba(35,91,99,.12);
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: .03em;
  }
  .offer-mobile-lang { font-size: 14px; }
  .offer-mobile-menu-btn { justify-self: end; display: grid; place-content: center; gap: 6px; }
  .offer-mobile-menu-btn span { display: block; width: 30px; height: 4px; border-radius: 999px; background: white; }
  .offer-mobile-logo-link { justify-self: center; width: clamp(155px, 46vw, 205px); margin-top: 8px; }
  .offer-mobile-logo-link img { width: 100%; height: auto; display: block; }
  .offer-mobile-nav {
    position: absolute;
    z-index: 7;
    top: 98px;
    right: 20px;
    width: min(250px, 70vw);
    padding: 18px 22px;
    border-radius: 24px;
    background: rgba(255,255,255,.94);
    box-shadow: 0 18px 42px rgba(35,91,99,.18);
  }
  .offer-mobile-nav[hidden] { display: none; }
  .offer-mobile-nav a {
    display: block;
    padding: 9px 0;
    color: #235b63;
    text-decoration: none;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
  }
  .offer-mobile-copy {
    position: relative;
    z-index: 2;
    max-width: 620px;
    margin: 0 auto;
  }
  .offer-mobile-copy[hidden] { display: none; }
  .offer-mobile-copy h1 {
    width: fit-content;
    margin: 0 auto 18px;
    padding: 13px 28px 15px;
    border-radius: 16px;
    background: #ffd8c1;
    color: #f47b3b;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1;
    letter-spacing: .12em;
    font-weight: 900;
    text-transform: uppercase;
    text-align: center;
  }
  .offer-mobile-copy h2 {
    width: fit-content;
    margin: 24px auto 12px;
    padding: 10px 18px 12px;
    border-radius: 13px;
    background: rgba(255,255,255,.93);
    color: #43a8ae;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(20px, 6vw, 29px);
    font-weight: 900;
    line-height: 1;
    letter-spacing: .13em;
    text-transform: uppercase;
    text-align: center;
  }
  .offer-mobile-copy h2.orange-title { color: #f47b3b; }
  .offer-mobile-card {
    position: relative;
    margin: 18px 0 24px;
    padding: 22px 18px 24px;
    border-radius: 26px;
    box-shadow: 0 12px 28px rgba(35,91,99,.08);
    text-align: center;
  }
  .offer-mobile-card.teal { background: rgba(189, 226, 226, .82); }
  .offer-mobile-card.peach { background: rgba(251, 181, 139, .78); }
  .offer-mobile-card h3 {
    width: fit-content;
    margin: -38px auto 14px;
    padding: 9px 18px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,.92);
    color: #43a8ae;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(17px, 4.8vw, 22px);
    font-weight: 800;
  }
  .offer-mobile-card.peach h3 { color: #f47b3b; }
  .offer-mobile-card img {
    display: block;
    width: min(70vw, 270px);
    height: auto;
    margin: 8px auto 16px;
    border-radius: 10px;
  }
  .offer-mobile-card p {
    margin: 0 auto 12px;
    max-width: 460px;
    color: #235b63;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.42;
    letter-spacing: .035em;
  }
  .offer-mobile-card strong {
    display: block;
    color: #f47b3b;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(16px, 4.4vw, 20px);
    font-weight: 800;
    letter-spacing: .04em;
  }
  .offer-mobile-card.peach strong { color: #235b63; }
  .mobile-nutrition-btn {
    position: absolute;
    top: 10px;
    left: 12px;
    width: 42px;
    height: 42px;
    border: 3px solid white;
    border-radius: 50%;
    background: #43a8ae;
    color: white;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    cursor: pointer;
  }
  .mobile-nutrition-btn.orange { background: #f47b3b; }
  .mobile-nutrition-btn.disabled { opacity: .75; cursor: default; }
  .nutrition-modal { padding: 18px; }
  .nutrition-modal-panel { width: min(94vw, 620px); padding: 0; border-radius: 18px; }
}

@media (max-width: 390px) {
  .offer-mobile { padding-left: 15px; padding-right: 15px; }
  .offer-mobile-header { grid-template-columns: 56px 1fr 56px; min-height: 148px; }
  .offer-mobile-lang,
  .offer-mobile-menu-btn { width: 54px; height: 54px; }
  .offer-mobile-menu-btn span { width: 27px; height: 4px; }
  .offer-mobile-logo-link { width: clamp(146px, 44vw, 176px); }
  .offer-mobile-card { padding-left: 15px; padding-right: 15px; }
  .offer-mobile-card img { width: min(68vw, 248px); }
}

/* Our Offer image-based version: text is already inside Canva SVGs */
.offer-image-page {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background: #e6f6f5;
}

.offer-image-page .offer-page {
  position: relative;
  min-height: 100vh;
  display: grid;
  place-items: start center;
  padding: 0;
  overflow: hidden;
}

.offer-page-background {
  position: fixed;
  inset: 0;
  z-index: 0;
  background-image: url('assets/offer/offer-background.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: scale(1.04);
  animation: offerBgFloat 20s ease-in-out infinite alternate;
}

@keyframes offerBgFloat {
  from { transform: scale(1.04) translate3d(0, 0, 0); }
  to { transform: scale(1.08) translate3d(-1.2%, -0.8%, 0); }
}

.offer-image-stage {
  position: relative;
  z-index: 1;
  width: min(100vw, 1024.5px);
  aspect-ratio: 1024.5 / 1708.5;
  margin: 0 auto;
}

.offer-full-design {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  pointer-events: none;
}

.offer-full-design[hidden] { display: none; }

.offer-image-page .offer-home-link,
.offer-image-page .offer-lang-hotspot,
.offer-image-page .offer-menu-hotspot,
.offer-image-page .offer-info-hotspot {
  position: absolute;
  z-index: 5;
  display: block;
  border: 0;
  background: transparent;
  padding: 0;
  cursor: pointer;
}

.offer-image-page .offer-home-link { top: 2.1%; left: 2.4%; width: 13.8%; height: 8.7%; }
.offer-image-page .offer-lang-hotspot { top: 2.2%; left: 86.8%; width: 8.4%; height: 4.8%; border-radius: 50%; }
.offer-image-page .offer-menu-hotspot { top: 6.7%; left: 85.6%; width: 10.1%; height: 6.5%; border-radius: 50%; }
.offer-image-page .offer-info-hotspot { width: 7.8%; height: 4.2%; border-radius: 999px; }
.offer-image-page .offer-info-hotspot.ice { top: 16.7%; left: 5.2%; }
.offer-image-page .offer-info-hotspot.mousse { top: 34.5%; left: 5.2%; }
.offer-image-page .offer-info-hotspot.waffles { top: 63.7%; left: 5.0%; }
.offer-image-page .offer-info-hotspot.cake { top: 81.9%; left: 5.0%; cursor: default; }

.offer-image-page .offer-floating-menu {
  position: absolute;
  z-index: 10;
  top: 13.5%;
  right: 4.3%;
  display: grid;
  gap: 8px;
  width: min(230px, 44vw);
  padding: 14px;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 35px rgba(31, 84, 88, .18);
  backdrop-filter: blur(8px);
}

.offer-image-page .offer-floating-menu[hidden] { display: none; }

.offer-image-page .offer-floating-menu a {
  font-family: 'Poppins', sans-serif;
  color: #235b63;
  text-decoration: none;
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .02em;
  padding: 8px 10px;
  border-radius: 999px;
}

.offer-image-page .offer-floating-menu a:hover { background: rgba(243, 125, 57, .12); color: #f47b3b; }

.offer-image-page .nutrition-modal {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: 22px;
}

.offer-image-page .nutrition-modal[hidden] { display: none; }

.offer-image-page .nutrition-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(25, 65, 68, .48);
  backdrop-filter: blur(5px);
}

.offer-image-page .nutrition-modal-panel {
  position: relative;
  width: min(92vw, 680px);
  max-height: 90vh;
  overflow: auto;
  padding: 0;
  border-radius: 22px;
  background: transparent;
  box-shadow: 0 24px 70px rgba(20, 68, 72, .24);
}

.offer-image-page .nutrition-modal-panel img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 20px;
}

.offer-image-page .nutrition-close {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.95);
  color: #f47b3b;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
}

@media (max-width: 700px) {
  .offer-image-stage {
    width: 100vw;
    min-height: 100svh;
  }

  .offer-page-background {
    background-size: cover;
    background-position: center top;
  }

  .offer-image-page .offer-floating-menu {
    top: 12.8%;
    right: 4.5%;
    width: min(230px, 58vw);
  }

  .offer-image-page .nutrition-modal-panel { width: min(94vw, 620px); }
}


/* =========================
   OUR OFFER CORRECTIONS v49
   - Code corrections only: no generated visual buttons/text
   - Desktop image fills the page width
   - Mobile switches earlier so phone/tablet preview does not use the desktop crop
   ========================= */
.offer-image-page .offer-page {
  display: block;
  min-height: 100vh;
  width: 100%;
  overflow-x: hidden;
}

.offer-page-background {
  background-size: cover;
  background-position: center center;
}

.offer-image-stage {
  width: 100vw;
  max-width: none;
  aspect-ratio: 1024.5 / 1708.5;
  margin: 0;
  overflow: hidden;
}

.offer-full-design {
  object-fit: cover;
  object-position: center top;
}

/* Phones and narrow/tablet previews: use the full vertical Canva composition,
   not a cropped desktop view. This also keeps the logo/buttons closer to the
   Home/Our Story scale instead of appearing oversized. */
@media (max-width: 900px) {
  .offer-image-page .offer-page {
    min-height: auto;
    overflow-x: hidden;
  }

  .offer-page-background {
    background-size: cover;
    background-position: center top;
    transform: scale(1.03);
  }

  .offer-image-stage {
    width: 100vw;
    max-width: none;
    aspect-ratio: 1024.5 / 1708.5;
    min-height: auto;
  }

  .offer-full-design {
    object-fit: cover;
  object-position: center top;
    object-position: center top;
  }

  .offer-image-page .offer-lang-hotspot { top: 2.2%; left: 86.8%; width: 8.4%; height: 4.8%; }
  .offer-image-page .offer-menu-hotspot { top: 6.7%; left: 85.6%; width: 10.1%; height: 6.5%; }
  .offer-image-page .offer-home-link { top: 2.0%; left: 2.2%; width: 14.2%; height: 8.8%; }

  .offer-image-page .offer-floating-menu {
    top: 13%;
    right: 4.5%;
    width: min(230px, 62vw);
  }
}

@media (max-width: 430px) {
  .offer-image-page .offer-floating-menu {
    width: min(220px, 68vw);
    padding: 12px;
  }

  .offer-image-page .offer-floating-menu a {
    font-size: 13px;
    padding: 7px 9px;
  }
}

/* =========================
   OUR OFFER MOBILE REWORK v53
   Desktop remains image-based. Mobile is reorganized for readability.
   ========================= */
.offer-mobile-layout { display: none; }

@media (max-width: 768px) {
  body.offer-image-page { background: #e8f6f7; }

  .offer-image-stage { display: none !important; }

  .offer-image-page .offer-page {
    min-height: 100vh;
    display: block;
    overflow-x: hidden;
  }

  .offer-page-background {
    background-image: url('assets/offer/offer-background.svg');
    background-size: cover;
    background-position: center top;
    transform: scale(1.02);
    animation: offerBgFloat 24s ease-in-out infinite alternate;
  }

  .offer-mobile-layout {
    display: block;
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 24px 18px 54px;
    box-sizing: border-box;
  }

  .offer-mobile-topbar {
    display: grid;
    grid-template-columns: 64px 1fr 64px;
    align-items: start;
    gap: 10px;
    min-height: 176px;
    position: relative;
  }

  .offer-mobile-lang,
  .offer-mobile-menu-btn {
    width: 62px;
    height: 62px;
    border: 0;
    border-radius: 50%;
    background: #43a8ae;
    color: #fff;
    box-shadow: 0 10px 22px rgba(35, 91, 99, .14);
    cursor: pointer;
  }

  .offer-mobile-lang {
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 800;
    font-size: 14px;
    letter-spacing: .02em;
  }

  .offer-mobile-menu-btn {
    justify-self: end;
    display: grid;
    place-content: center;
    gap: 6px;
  }

  .offer-mobile-menu-btn span {
    display: block;
    width: 31px;
    height: 4px;
    border-radius: 999px;
    background: white;
  }

  .offer-mobile-logo {
    justify-self: center;
    display: block;
    width: clamp(150px, 44vw, 190px);
    margin-top: 2px;
  }

  .offer-mobile-logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  .offer-mobile-nav {
    position: absolute;
    z-index: 20;
    top: 100px;
    right: 20px;
    width: min(245px, 70vw);
    padding: 18px 22px;
    border-radius: 24px;
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 18px 42px rgba(35, 91, 99, .18);
    backdrop-filter: blur(8px);
  }

  .offer-mobile-nav[hidden] { display: none; }

  .offer-mobile-nav a {
    display: block;
    padding: 9px 0;
    color: #235b63;
    text-decoration: none;
    font-family: "Poppins", Arial, sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .offer-mobile-content {
    position: relative;
    z-index: 3;
    text-align: center;
  }

  .offer-mobile-content[hidden] { display: none; }

  .offer-mobile-content h1 {
    width: fit-content;
    margin: 0 auto 24px;
    padding: 13px 28px 15px;
    border-radius: 16px;
    background: #ffd8c1;
    color: #f47b3b;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(30px, 8vw, 42px);
    line-height: 1;
    letter-spacing: .12em;
    font-weight: 900;
    text-transform: uppercase;
  }

  .offer-mobile-group { margin: 0 auto 28px; }

  .offer-mobile-group h2 {
    width: fit-content;
    margin: 0 auto 18px;
    padding: 10px 20px 12px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .92);
    color: #43a8ae;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(21px, 5.8vw, 30px);
    line-height: 1;
    letter-spacing: .13em;
    font-weight: 900;
    text-transform: uppercase;
  }

  .offer-mobile-group.warm h2 { color: #f47b3b; }

  .offer-product-mobile {
    margin: 0 auto 30px;
  }

  .offer-product-image-wrap {
    position: relative;
    width: min(86vw, 380px);
    margin: 0 auto 12px;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 12px 26px rgba(35, 91, 99, .10);
  }

  .offer-product-image-wrap img {
    width: 100%;
    height: auto;
    display: block;
  }

  .mobile-nutrition-pill {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 42px;
    height: 42px;
    border: 3px solid white;
    border-radius: 50%;
    background: #43a8ae;
    color: #fff;
    font-family: Georgia, serif;
    font-size: 24px;
    font-weight: 700;
    line-height: 1;
    box-shadow: 0 6px 16px rgba(35, 91, 99, .14);
    cursor: pointer;
  }

  .mobile-nutrition-pill.orange { background: #f47b3b; }

  .offer-product-text {
    width: min(88vw, 410px);
    margin: 0 auto;
    padding: 18px 20px 20px;
    border-radius: 24px;
    box-sizing: border-box;
    box-shadow: 0 10px 26px rgba(35, 91, 99, .08);
  }

  .offer-product-mobile.teal .offer-product-text {
    background: rgba(189, 226, 226, .88);
  }

  .offer-product-mobile.peach .offer-product-text {
    background: rgba(251, 181, 139, .82);
  }

  .offer-product-text h3 {
    margin: 0 auto 10px;
    color: #43a8ae;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(20px, 5.5vw, 25px);
    font-weight: 800;
    letter-spacing: .02em;
  }

  .offer-product-mobile.peach .offer-product-text h3 { color: #f47b3b; }

  .offer-product-text p {
    margin: 0 auto 12px;
    color: #235b63;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(15px, 4vw, 18px);
    line-height: 1.42;
    letter-spacing: .025em;
  }

  .offer-product-text strong {
    display: block;
    color: #f47b3b;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(16px, 4.4vw, 20px);
    line-height: 1.2;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .offer-product-mobile.peach .offer-product-text strong { color: #235b63; }

  .offer-mobile-divider {
    width: 92%;
    height: 12px;
    margin: 10px auto 30px;
    border-radius: 999px;
    background: #f4aa7b;
  }

  .offer-image-page .nutrition-modal-panel { width: min(94vw, 620px); }
}

@media (max-width: 390px) {
  .offer-mobile-layout { padding-left: 15px; padding-right: 15px; }
  .offer-mobile-topbar { grid-template-columns: 56px 1fr 56px; min-height: 162px; }
  .offer-mobile-lang,
  .offer-mobile-menu-btn { width: 54px; height: 54px; }
  .offer-mobile-menu-btn span { width: 27px; height: 4px; }
  .offer-mobile-logo { width: clamp(146px, 45vw, 178px); }
  .offer-product-image-wrap { width: min(84vw, 330px); }
  .offer-product-text { width: min(88vw, 360px); padding: 16px 16px 18px; }
}

/* =========================
   CONTACT PAGE
   ========================= */
.contact-body {
  margin: 0;
  background: #f8ddca;
  color: #235b63;
  font-family: "Poppins", Arial, sans-serif;
}

.contact-page {
  min-height: 100vh;
  background: #f8ddca;
}

.contact-desktop-stage {
  position: relative;
  width: 100vw;
  max-width: none;
  margin: 0;
  aspect-ratio: 1024.5 / 1634.25;
  overflow: hidden;
  background: #f8ddca;
}

.contact-full-design {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
  z-index: 1;
}

.contact-lang-hotspot,
.contact-menu-hotspot,
.contact-logo-hotspot,
.contact-whatsapp-hotspot,
.contact-instagram-hotspot,
.contact-home-link,
.contact-topic,
.contact-send-hotspot {
  position: absolute;
  z-index: 8;
  display: block;
  border: 0;
  padding: 0;
  background: transparent;
  cursor: pointer;
}

.contact-lang-hotspot { left: 5.4%; top: 3.2%; width: 8.4%; height: 5.3%; border-radius: 50%; }
.contact-menu-hotspot { left: 5.4%; top: 9.2%; width: 8.4%; height: 5.3%; border-radius: 50%; }
.contact-logo-hotspot { right: 5.2%; top: 2.0%; width: 16%; height: 8%; }
.contact-whatsapp-hotspot { left: 7.3%; top: 81.0%; width: 30.5%; height: 4.1%; border-radius: 999px; }
.contact-instagram-hotspot { left: 7.3%; top: 86.5%; width: 30.5%; height: 4.1%; border-radius: 999px; }

.contact-floating-menu {
  position: absolute;
  left: 6.1%;
  top: 15.2%;
  z-index: 20;
  width: 230px;
  padding: 20px 24px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .93);
  box-shadow: 0 16px 38px rgba(35, 91, 99, .16);
  backdrop-filter: blur(8px);
}

.contact-floating-menu a {
  display: block;
  padding: 10px 4px;
  color: #235b63;
  text-decoration: none;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-size: 16px;
  font-weight: 800;
  letter-spacing: .04em;
}

.contact-form-overlay {
  position: absolute;
  inset: 0;
  z-index: 7;
  pointer-events: none;
}

.contact-input {
  position: absolute;
  box-sizing: border-box;
  border: 0;
  outline: none;
  background: transparent;
  color: #235b63;
  font-family: "Poppins", Arial, sans-serif;
  font-size: clamp(14px, 1.35vw, 19px);
  font-weight: 500;
  letter-spacing: .02em;
  pointer-events: auto;
}

.contact-input:focus {
  box-shadow: 0 0 0 3px rgba(67, 168, 174, .18);
}

.contact-name { left: 50.3%; top: 38.8%; width: 41.6%; height: 2.4%; border-radius: 999px; padding: 0 18px; }
.contact-email { left: 50.3%; top: 44.2%; width: 41.6%; height: 2.4%; border-radius: 999px; padding: 0 18px; }
.contact-phone { left: 50.3%; top: 49.7%; width: 41.6%; height: 2.4%; border-radius: 999px; padding: 0 18px; }
.contact-message { left: 49.4%; top: 67.1%; width: 42.8%; height: 12.2%; border-radius: 30px; padding: 18px; resize: none; }
.contact-send-hotspot { left: 49.5%; top: 82.0%; width: 42.5%; height: 4.3%; border-radius: 999px; pointer-events: auto; }

.contact-topic { top: 59.5%; width: 7.6%; height: 4.75%; border-radius: 50%; pointer-events: auto; }
.contact-topic.selected { box-shadow: 0 0 0 3px rgba(244, 123, 59, .58); }
.topic-event { left: 48.0%; }
.topic-catering { left: 58.4%; }
.topic-market { left: 68.4%; }
.topic-collab { left: 78.4%; }
.topic-question { left: 88.2%; }

.contact-mobile-layout { display: none; }

@media (max-width: 768px) {
  .contact-desktop-stage { display: none; }
  .contact-mobile-layout {
    display: block;
    min-height: 100vh;
    padding: 24px 18px 44px;
    box-sizing: border-box;
    overflow: hidden;
    background-color: #f8ddca;
    background-image: url('assets/story/background-our-story.png');
    background-size: cover;
    background-position: center top;
  }

  .contact-mobile-topbar {
    display: grid;
    grid-template-columns: 68px 1fr 68px;
    align-items: start;
    gap: 10px;
    min-height: 178px;
  }

  .contact-mobile-lang,
  .contact-mobile-menu-btn {
    width: 64px;
    height: 64px;
    border: 0;
    border-radius: 50%;
    background: #f47b3b;
    color: #fff;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: .04em;
    box-shadow: 0 8px 20px rgba(35, 91, 99, .10);
  }

  .contact-mobile-menu-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 6px;
  }

  .contact-mobile-menu-btn span {
    width: 32px;
    height: 5px;
    border-radius: 999px;
    background: #fff;
  }

  .contact-mobile-logo {
    justify-self: center;
    width: clamp(156px, 48vw, 210px);
    display: block;
    margin-top: -2px;
  }

  .contact-mobile-logo img { width: 100%; height: auto; display: block; }

  .contact-mobile-nav {
    margin: -16px auto 24px;
    width: min(88vw, 360px);
    padding: 16px 20px;
    border-radius: 22px;
    background: rgba(255,255,255,.92);
    box-shadow: 0 14px 30px rgba(35, 91, 99, .12);
  }

  .contact-mobile-nav a {
    display: block;
    padding: 10px 4px;
    color: #235b63;
    text-decoration: none;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 800;
    letter-spacing: .04em;
  }

  .contact-mobile-content {
    width: min(100%, 460px);
    margin: 0 auto;
    text-align: center;
  }

  .contact-mobile-content h1 {
    margin: 0 auto 18px;
    color: #f47b3b;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(29px, 7.8vw, 42px);
    line-height: 1.08;
    font-weight: 900;
    letter-spacing: .09em;
  }

  .contact-mobile-content h1 span { color: #43a8ae; }

  .contact-mobile-intro {
    width: min(88vw, 380px);
    margin: 0 auto 28px;
    padding: 16px 18px;
    border-radius: 18px;
    background: #43a8ae;
    color: #fff;
    font-family: "Poppins", Arial, sans-serif;
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.42;
    letter-spacing: .02em;
  }

  .contact-mobile-card,
  .contact-mobile-form {
    width: min(90vw, 410px);
    margin: 0 auto 24px;
    padding: 22px 20px;
    box-sizing: border-box;
    border-radius: 28px;
    background: rgba(232, 246, 245, .88);
    box-shadow: 0 14px 34px rgba(35, 91, 99, .10);
  }

  .contact-mobile-card h2,
  .contact-mobile-form h2 {
    margin: 0 auto 16px;
    width: fit-content;
    padding: 8px 18px;
    border-radius: 12px;
    background: #fff;
    color: #f47b3b;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(22px, 5.8vw, 30px);
    font-weight: 900;
    letter-spacing: .08em;
  }

  .contact-mobile-card p {
    margin: 16px auto;
    color: #235b63;
    font-size: clamp(15px, 4.1vw, 18px);
    line-height: 1.38;
    letter-spacing: .02em;
  }

  .contact-mobile-card strong {
    color: #235b63;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-weight: 900;
  }

  .contact-mobile-card a { color: #235b63; text-decoration: none; font-weight: 700; }

  .contact-mobile-actions {
    display: grid;
    gap: 12px;
    margin-top: 22px;
  }

  .contact-mobile-actions a,
  .contact-mobile-form button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    border: 0;
    border-radius: 999px;
    padding: 14px 18px;
    background: #f4aa7b;
    color: #954620;
    text-decoration: none;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(15px, 4vw, 18px);
    font-weight: 900;
    letter-spacing: .05em;
  }

  .contact-mobile-form {
    text-align: left;
    background: rgba(255, 255, 255, .92);
  }

  .contact-mobile-form h2 { margin-left: auto; margin-right: auto; }

  .contact-mobile-form label {
    display: block;
    margin: 0 0 14px;
    color: #235b63;
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(16px, 4.4vw, 20px);
    font-weight: 800;
    letter-spacing: .03em;
  }

  .contact-mobile-form label span {
    font-family: "Poppins", Arial, sans-serif;
    font-size: .78em;
    font-weight: 500;
    letter-spacing: 0;
  }

  .contact-mobile-form input,
  .contact-mobile-form select,
  .contact-mobile-form textarea {
    width: 100%;
    box-sizing: border-box;
    margin-top: 7px;
    border: 0;
    border-radius: 999px;
    background: #f4f7f7;
    color: #235b63;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 16px;
    padding: 13px 16px;
    outline: none;
  }

  .contact-mobile-form textarea {
    min-height: 140px;
    resize: vertical;
    border-radius: 24px;
  }

  .contact-mobile-form input:focus,
  .contact-mobile-form select:focus,
  .contact-mobile-form textarea:focus {
    box-shadow: 0 0 0 3px rgba(67, 168, 174, .24);
  }

  .contact-mobile-form button {
    margin-top: 10px;
    cursor: pointer;
  }

  .contact-mobile-form small {
    display: block;
    margin-top: 14px;
    text-align: center;
    color: #43a8ae;
    font-family: "Poppins", Arial, sans-serif;
    font-size: 13px;
    font-weight: 700;
  }
}

@media (max-width: 390px) {
  .contact-mobile-layout { padding-left: 15px; padding-right: 15px; }
  .contact-mobile-topbar { grid-template-columns: 58px 1fr 58px; min-height: 166px; }
  .contact-mobile-lang,
  .contact-mobile-menu-btn { width: 56px; height: 56px; }
  .contact-mobile-menu-btn span { width: 28px; height: 4px; }
  .contact-mobile-logo { width: clamp(148px, 47vw, 190px); }
}


/* CONTACT v57 fixes: full-width desktop, crisp fields, German overlay */
.contact-desktop-stage {
  width: 100vw;
  max-width: none;
  margin: 0;
  aspect-ratio: 1024.5 / 1634.25;
}
.contact-full-design {
  object-fit: cover;
  object-position: center top;
  image-rendering: auto;
}
.contact-input {
  background: transparent !important;
  box-shadow: none;
}
.contact-input:focus {
  background: rgba(255,255,255,.12) !important;
}
.contact-de-overlay[hidden] { display: none; }
.contact-de-overlay {
  position: absolute;
  inset: 0;
  z-index: 6;
  pointer-events: none;
  font-family: "Poppins", Arial, sans-serif;
  color: #235b63;
}
.contact-de-overlay::before {
  content: "";
  position: absolute;
  left: 23%; top: 6.4%; width: 54%; height: 16.8%;
  background: #f8ddca;
  border-radius: 18px;
}
.contact-de-title {
  position: absolute;
  top: 7.0%; left: 50%; transform: translateX(-50%);
  width: 58%; text-align: center;
  color: #f47b3b;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  line-height: 1.16;
  font-size: clamp(20px, 3vw, 45px);
}
.contact-de-title span { color: #43a8ae; }
.contact-de-intro {
  position: absolute;
  top: 17.4%; left: 28.0%; width: 44.0%;
  padding: .8% 2.2%;
  background: #43a8ae;
  color: #fff;
  border-radius: 14px;
  text-align: center;
  font-size: clamp(14px, 1.6vw, 24px);
  line-height: 1.32;
  letter-spacing: .02em;
}
.contact-de-talk-title,
.contact-de-form-title {
  position: absolute;
  padding: .75% 2.4%;
  border-radius: 10px;
  background: rgba(255,255,255,.98);
  color: #f47b3b;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-weight: 900;
  letter-spacing: .12em;
  font-size: clamp(16px, 1.8vw, 28px);
  line-height: 1;
}
.contact-de-talk-title { top: 31.1%; left: 14.0%; }
.contact-de-form-title { top: 29.6%; left: 49.0%; }
.contact-de-small { position:absolute; top: 36.2%; left: 8.2%; width: 25%; text-align:center; font-weight:800; font-size:clamp(13px,1.15vw,20px); line-height:1.2; }
.contact-de-label { position:absolute; left:16.4%; font-weight:900; font-family:"MuseoModerno","Poppins",sans-serif; font-size:clamp(15px,1.45vw,23px); }
.contact-de-mail { top:43.2%; }
.contact-de-area { top:52.0%; }
.contact-de-area-text { position:absolute; top:54.5%; left:16.4%; font-size:clamp(12px,1.2vw,20px); line-height:1.25; }
.contact-de-ig { top:61.3%; }
.contact-de-btn { position:absolute; left:7.4%; width:30%; text-align:center; color:#954620; font-family:"MuseoModerno","Poppins",sans-serif; font-weight:900; font-size:clamp(12px,1.05vw,18px); letter-spacing:.04em; }
.contact-de-wa { top:82.45%; }
.contact-de-insta { top:87.95%; }
.contact-de-form-label { position:absolute; left:47.6%; color:#235b63; font-family:"MuseoModerno","Poppins",sans-serif; font-weight:900; font-size:clamp(15px,1.6vw,25px); letter-spacing:.035em; }
.contact-de-name-l { top:35.2%; }
.contact-de-email-l { top:42.0%; }
.contact-de-phone-l { top:48.7%; }
.contact-de-topic-l { top:56.0%; }
.contact-de-message-l { top:66.8%; }
.contact-de-send { position:absolute; top:83.65%; left:60.0%; transform:translateX(-50%); color:#954620; font-family:"MuseoModerno","Poppins",sans-serif; font-weight:900; font-size:clamp(16px,1.7vw,28px); letter-spacing:.05em; }
.contact-de-note { position:absolute; top:89.4%; left:50.0%; width:40%; text-align:center; color:#43a8ae; font-family:"Poppins",Arial,sans-serif; font-weight:700; font-size:clamp(12px,1.1vw,18px); }
body.contact-lang-de .contact-topic[aria-label="Event"]::after { content: none !important; }

/* CONTACT v58 desktop-only fixes: keep mobile untouched */
@media (min-width: 769px) {
  /* keep the desktop design sharp and stop the form from creating a second blurred layer */
  .contact-input,
  .contact-input:focus,
  .contact-input:active {
    background: transparent !important;
    box-shadow: none !important;
    filter: none !important;
    -webkit-appearance: none;
    appearance: none;
  }

  .contact-form-overlay { z-index: 10; }
  .contact-de-overlay { z-index: 6; }
  .contact-de-overlay > * { position: absolute; }
  .contact-de-overlay > :not(.contact-de-mask) { z-index: 2; }

  /* Masks cover the original English text areas only in desktop German mode.
     The base Canva design, icons, fields and decorative shapes stay in place. */
  .contact-de-mask {
    display: block;
    z-index: 1;
    pointer-events: none;
    border-radius: 14px;
  }
  .contact-de-mask-top {
    left: 23.0%; top: 5.2%; width: 54.0%; height: 12.2%;
    background: #f8ddca;
    border-radius: 18px;
  }
  .contact-de-mask-intro {
    left: 27.0%; top: 17.0%; width: 46.0%; height: 7.0%;
    background: #f8ddca;
    border-radius: 18px;
  }
  .contact-de-mask-left-title {
    left: 12.4%; top: 31.0%; width: 25.0%; height: 10.0%;
    background: rgba(232, 246, 245, .96);
    border-radius: 12px;
  }
  .contact-de-mask-left-info {
    left: 7.0%; top: 42.0%; width: 31.0%; height: 35.0%;
    background: rgba(232, 246, 245, .96);
    border-radius: 18px;
  }
  .contact-de-mask-left-buttons {
    left: 6.5%; top: 80.8%; width: 32.2%; height: 11.2%;
    background: rgba(232, 246, 245, .96);
    border-radius: 20px;
  }
  .contact-de-mask-form-title {
    left: 47.5%; top: 29.0%; width: 42.5%; height: 6.2%;
    background: rgba(232, 246, 245, .96);
    border-radius: 14px;
  }
  .contact-de-mask-form-labels {
    left: 46.0%; top: 34.8%; width: 47.0%; height: 20.5%;
    background: rgba(232, 246, 245, .96);
    border-radius: 16px;
  }
  .contact-de-mask-form-topic {
    left: 46.0%; top: 55.2%; width: 47.5%; height: 12.2%;
    background: rgba(232, 246, 245, .96);
    border-radius: 16px;
  }
  .contact-de-mask-send {
    left: 48.0%; top: 81.4%; width: 45.0%; height: 10.5%;
    background: rgba(232, 246, 245, .96);
    border-radius: 18px;
  }

  body.contact-lang-de .contact-de-overlay { display: block; }

  /* German text positions adjusted to the original desktop layout */
  .contact-de-title {
    top: 6.2%; left: 50%; transform: translateX(-50%);
    width: 54%; text-align: center;
    font-size: clamp(19px, 2.55vw, 38px);
    line-height: 1.12;
  }
  .contact-de-intro {
    top: 17.55%; left: 28.4%; width: 43.2%;
    padding: .72% 1.7%;
    font-size: clamp(13px, 1.36vw, 21px);
    line-height: 1.28;
  }
  .contact-de-talk-title { top: 31.25%; left: 14.0%; }
  .contact-de-form-title { top: 29.8%; left: 49.0%; }
  .contact-de-small { top: 36.2%; left: 8.0%; width: 26%; font-size: clamp(12px, 1.05vw, 18px); }
  .contact-de-label { left: 16.3%; font-size: clamp(14px,1.35vw,21px); }
  .contact-de-mail { top: 43.0%; }
  .contact-de-area { top: 52.1%; }
  .contact-de-area-text { top: 54.7%; left:16.3%; font-size: clamp(12px,1.05vw,18px); }
  .contact-de-ig { top: 61.4%; }
  .contact-de-btn { left: 7.4%; width: 30.0%; font-size: clamp(11px, .95vw, 16px); }
  .contact-de-wa { top: 82.35%; }
  .contact-de-insta { top: 87.85%; }
  .contact-de-form-label { left: 48.0%; font-size: clamp(14px, 1.35vw, 22px); }
  .contact-de-name-l { top: 35.0%; }
  .contact-de-email-l { top: 42.0%; }
  .contact-de-phone-l { top: 48.8%; }
  .contact-de-topic-l { top: 56.5%; }
  .contact-de-message-l { top: 67.0%; }
  .contact-de-send { top: 83.6%; left: 69.5%; transform: translateX(-50%); font-size: clamp(15px, 1.45vw, 24px); }
  .contact-de-note { top: 89.45%; left: 49.5%; width: 42%; font-size: clamp(11px, 1vw, 17px); }
}


/* CONTACT v59 desktop fix: use full German SVG instead of overlay text; keep mobile unchanged */
@media (min-width: 769px) {
  .contact-de-overlay { display: none !important; }

  /* Keep the design as the visible layer, and put only transparent real fields on top. */
  .contact-full-design {
    object-fit: cover;
    object-position: center top;
  }

  .contact-input,
  .contact-input:focus,
  .contact-input:active,
  .contact-input:-webkit-autofill {
    background: transparent !important;
    box-shadow: none !important;
    outline: none !important;
    border: none !important;
    filter: none !important;
  }

  /* Positions recalibrated to the Canva text boxes in both EN and DE SVGs. */
  .contact-name  { left: 48.45%; top: 37.95%; width: 39.95%; height: 2.75%; padding: 0 18px; }
  .contact-email { left: 48.45%; top: 44.90%; width: 39.95%; height: 2.75%; padding: 0 18px; }
  .contact-phone { left: 48.45%; top: 51.95%; width: 39.95%; height: 2.75%; padding: 0 18px; }
  .contact-message { left: 47.45%; top: 69.70%; width: 41.15%; height: 15.55%; padding: 18px; border-radius: 34px; }
  .contact-send-hotspot { left: 47.55%; top: 87.05%; width: 41.05%; height: 3.70%; border-radius: 999px; }

  .contact-topic { top: 58.95%; width: 7.05%; height: 6.25%; }
  .topic-event { left: 46.65%; }
  .topic-catering { left: 56.00%; }
  .topic-market { left: 65.40%; }
  .topic-collab { left: 74.75%; }
  .topic-question { left: 84.25%; }
}


/* CONTACT v61: precise circular topic selector + remove accidental DE Event text */
@media (min-width: 769px) {
  .contact-topic {
    width: 6.25% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    top: 60.05% !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  .contact-topic.selected {
    box-shadow: none !important;
    outline: 3px solid rgba(244, 161, 109, .92) !important;
    outline-offset: 0 !important;
  }
  .topic-event { left: 47.05% !important; }
  .topic-catering { left: 56.40% !important; }
  .topic-market { left: 65.80% !important; }
  .topic-collab { left: 75.15% !important; }
  .topic-question { left: 84.65% !important; }
  body.contact-lang-de .contact-topic::after,
  body.contact-lang-de .contact-topic[aria-label="Event"]::after {
    content: none !important;
    display: none !important;
  }
}


/* CONTACT v62: match topic selector circle to the white icon circle + favicon added */
@media (min-width: 769px) {
  .contact-topic {
    width: 7.42% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important;
    top: 58.92% !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
    background: transparent !important;
  }
  .contact-topic.selected {
    box-shadow: none !important;
    outline: 3px solid rgba(244, 161, 109, .92) !important;
    outline-offset: -1px !important;
  }
  .topic-event { left: 45.72% !important; }
  .topic-catering { left: 55.37% !important; }
  .topic-market { left: 65.14% !important; }
  .topic-collab { left: 74.99% !important; }
  .topic-question { left: 84.23% !important; }
}

/* =========================
   OUR OFFER DESKTOP CODED v65
   - desktop text is real HTML text, not part of a large Canva image
   - uses clean product images to avoid black/rough transparency artifacts
   - mobile layout from previous version is preserved
   ========================= */
body.offer-coded-page {
  background: #e8f6f7;
}
.offer-coded-page .offer-page-background {
  background-image: url('assets/offer/offer-background.svg');
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  transform: none !important;
  animation: none !important;
  opacity: 1;
}
.offer-coded-desktop {
  position: relative;
  z-index: 2;
  width: 100%;
  min-height: 100vh;
  padding: clamp(28px, 3.2vw, 54px) clamp(34px, 4.2vw, 68px) clamp(54px, 5vw, 84px);
  box-sizing: border-box;
  overflow: hidden;
}
.offer-coded-header {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  min-height: clamp(110px, 13vw, 178px);
}
.offer-coded-logo {
  display: block;
  width: clamp(110px, 10.5vw, 168px);
  position: relative;
  z-index: 6;
}
.offer-coded-logo img { width: 100%; height: auto; display: block; }
.offer-coded-orange-shape {
  position: absolute;
  top: clamp(-72px, -5vw, -28px);
  right: clamp(-98px, -5vw, -42px);
  width: clamp(230px, 29vw, 430px);
  height: clamp(160px, 19vw, 280px);
  background: #ff7f32;
  border-radius: 50% 0 45% 55%;
  transform: rotate(-13deg);
  z-index: 1;
}
.offer-visible-lang,
.offer-visible-menu {
  position: absolute !important;
  right: clamp(16px, 2.2vw, 36px);
  width: clamp(62px, 6.4vw, 86px);
  height: clamp(62px, 6.4vw, 86px);
  border-radius: 50%;
  border: 0;
  z-index: 8;
  display: grid;
  place-items: center;
  box-shadow: 0 12px 28px rgba(35, 91, 99, .14);
}
.offer-visible-lang {
  top: 0;
  background: #43a8ae;
  color: #fff;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(12px, 1.05vw, 16px);
  letter-spacing: .01em;
}
.offer-visible-menu {
  top: clamp(76px, 7.5vw, 104px);
  background: #43a8ae;
  gap: 6px;
}
.offer-visible-menu span {
  display: block;
  width: clamp(30px, 3.5vw, 46px);
  height: clamp(4px, .45vw, 6px);
  border-radius: 999px;
  background: #fff;
}
.offer-coded-page .offer-floating-menu {
  position: absolute;
  top: clamp(152px, 15.2vw, 238px);
  right: clamp(18px, 2.2vw, 38px);
  z-index: 20;
  width: min(245px, 23vw);
}
.offer-coded-copy[hidden] { display: none; }
.offer-coded-main-title {
  margin: -10px auto clamp(36px, 3.4vw, 54px);
  width: fit-content;
  padding: .38em 1.7em .44em;
  border-radius: 20px;
  background: #ffd9c7;
  color: #f47b3b;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-size: clamp(34px, 4.2vw, 68px);
  line-height: .92;
  font-weight: 900;
  letter-spacing: .12em;
  text-align: center;
}
.offer-coded-section {
  position: relative;
  max-width: 1180px;
  margin: 0 auto clamp(58px, 5.2vw, 86px);
  padding: clamp(52px, 5.1vw, 80px) clamp(38px, 4.8vw, 72px) clamp(46px, 4.2vw, 70px);
  border-radius: 48px;
}
.offer-coded-section.cold { background: rgba(166, 219, 219, .72); }
.offer-coded-section.warm { background: rgba(248, 176, 131, .78); }
.offer-coded-section h2 {
  position: absolute;
  top: calc(-1 * clamp(28px, 2.8vw, 40px));
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  padding: .48em 1.45em .56em;
  border-radius: 16px;
  background: #fff;
  color: #43a8ae;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-weight: 900;
  font-size: clamp(28px, 3.2vw, 48px);
  line-height: .92;
  letter-spacing: .14em;
  white-space: nowrap;
}
.offer-coded-section.warm h2 {
  color: #f47b3b;
  background: #ffd9c7;
}
.offer-coded-card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(270px, 38%) 1fr;
  align-items: center;
  gap: clamp(34px, 4.5vw, 76px);
  margin: clamp(26px, 3vw, 48px) 0;
  padding: clamp(24px, 2.8vw, 40px) clamp(28px, 4.0vw, 60px);
  min-height: clamp(230px, 23vw, 340px);
  border-radius: 36px;
  background: rgba(255,255,255,.98);
  box-shadow: 0 10px 28px rgba(35, 91, 99, .06);
}
.offer-coded-card:first-of-type { margin-top: 8px; }
.offer-coded-card:last-child { margin-bottom: 0; }
.offer-coded-image-wrap {
  position: relative;
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: 24px;
  background: #dff2f1;
}
.offer-coded-section.warm .offer-coded-image-wrap { background: #ffd9c7; }
.offer-coded-image-wrap img {
  width: 100%;
  height: 100%;
  max-height: 275px;
  object-fit: cover;
  object-position: center;
  display: block;
  image-rendering: auto;
  backface-visibility: hidden;
}
.offer-coded-info {
  position: absolute !important;
  top: 14px !important;
  left: 14px !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 50% !important;
  border: 0;
  display: grid !important;
  place-items: center;
  background: #43a8ae !important;
  color: #fff;
  font-family: "MuseoModerno", "Poppins", sans-serif;
  font-weight: 900;
  font-size: 28px;
  line-height: 1;
  cursor: pointer;
  z-index: 3;
}
.offer-coded-info.orange { background: #f47b3b !important; }
.offer-coded-text h3 {
  width: fit-content;
  margin: 0 auto clamp(22px, 2.0vw, 32px);
  padding: .42em 1.28em .52em;
  border-radius: 14px;
  background: #edf8f7;
  color: #43a8ae;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 800;
  font-size: clamp(24px, 2.9vw, 42px);
  line-height: 1.0;
  text-align: center;
  letter-spacing: .01em;
}
.offer-coded-card.peach .offer-coded-text h3 {
  background: #ffd9c7;
  color: #f47b3b;
}
.offer-coded-text p,
.offer-coded-text strong {
  display: block;
  margin: 0;
  font-family: "Poppins", Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(20px, 2.05vw, 33px);
  line-height: 1.48;
  text-align: center;
  letter-spacing: .055em;
  color: #235b63;
}
.offer-coded-card.peach .offer-coded-text p { color: #f47b3b; }
.offer-coded-text strong {
  margin-top: clamp(22px, 2.3vw, 38px);
  color: #f47b3b;
  font-weight: 400;
}
.offer-coded-card.peach .offer-coded-text strong { color: #235b63; }
.offer-coded-page .nutrition-modal-panel img {
  background: #fff;
}
@media (max-width: 768px) {
  .offer-coded-desktop { display: none !important; }
  .offer-coded-page .offer-page-background { animation: none !important; transform: none !important; }
}
@media (min-width: 769px) {
  .offer-coded-page .offer-mobile-layout { display: none !important; }
}
@media (max-width: 1100px) and (min-width: 769px) {
  .offer-coded-card { grid-template-columns: 36% 1fr; gap: 34px; }
  .offer-coded-text p, .offer-coded-text strong { font-size: clamp(17px, 1.85vw, 22px); }
  .offer-coded-main-title { font-size: clamp(30px, 4.0vw, 46px); }
  .offer-coded-section h2 { font-size: clamp(23px, 3.0vw, 34px); }
}

/* =========================
   v66 Offer desktop refinement
   - Keep the HTML-text direction
   - More premium proportions
   - No image zoom/crop
   - Product pictures shown cleaner without extra colored blocks
   ========================= */
@media (min-width: 769px) {
  .offer-coded-desktop {
    padding: clamp(26px, 2.8vw, 48px) clamp(42px, 5vw, 86px) clamp(48px, 4vw, 72px);
  }

  .offer-coded-header {
    min-height: clamp(92px, 10vw, 138px);
  }

  .offer-coded-logo {
    width: clamp(94px, 7.5vw, 132px);
  }

  .offer-coded-main-title {
    margin-top: clamp(10px, 1.8vw, 28px);
    margin-bottom: clamp(44px, 4.8vw, 70px);
    padding: .36em 1.55em .43em;
    border-radius: 18px;
    font-size: clamp(34px, 3.25vw, 54px);
    letter-spacing: .105em;
  }

  .offer-coded-section {
    max-width: 1160px;
    margin-bottom: clamp(46px, 4.5vw, 74px);
    padding: clamp(46px, 4.3vw, 68px) clamp(34px, 4.2vw, 62px) clamp(38px, 3.5vw, 58px);
    border-radius: 42px;
  }

  .offer-coded-section h2 {
    top: calc(-1 * clamp(26px, 2.5vw, 36px));
    padding: .42em 1.36em .50em;
    border-radius: 14px;
    font-size: clamp(25px, 2.45vw, 38px);
    letter-spacing: .13em;
  }

  .offer-coded-card {
    grid-template-columns: minmax(250px, 34%) 1fr;
    gap: clamp(28px, 3.6vw, 58px);
    min-height: clamp(210px, 19vw, 288px);
    margin: clamp(22px, 2.4vw, 38px) 0;
    padding: clamp(22px, 2.4vw, 34px) clamp(24px, 3.2vw, 46px);
    border-radius: 34px;
  }

  .offer-coded-image-wrap {
    align-self: center;
    height: clamp(188px, 18vw, 250px);
    overflow: visible;
    border-radius: 0;
    background: transparent !important;
  }

  .offer-coded-image-wrap img {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: contain;
    object-position: center;
    border-radius: 22px;
    box-shadow: none;
  }

  .offer-coded-info {
    top: 8px !important;
    left: 8px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 24px;
  }

  .offer-coded-text h3 {
    margin-bottom: clamp(16px, 1.55vw, 24px);
    padding: .40em 1.18em .48em;
    border-radius: 12px;
    font-size: clamp(22px, 2.18vw, 34px);
    letter-spacing: .015em;
  }

  .offer-coded-text p,
  .offer-coded-text strong {
    max-width: 690px;
    margin-left: auto;
    margin-right: auto;
    font-size: clamp(17px, 1.55vw, 24px);
    line-height: 1.46;
    letter-spacing: .035em;
  }

  .offer-coded-text strong {
    margin-top: clamp(16px, 1.8vw, 26px);
    font-family: "MuseoModerno", "Poppins", sans-serif;
    font-size: clamp(18px, 1.65vw, 25px);
    font-weight: 600;
    letter-spacing: .045em;
  }

  .offer-coded-orange-shape {
    width: clamp(220px, 24vw, 360px);
    height: clamp(150px, 16vw, 235px);
  }

  .offer-visible-lang,
  .offer-visible-menu {
    width: clamp(58px, 5.4vw, 78px);
    height: clamp(58px, 5.4vw, 78px);
  }

  .offer-visible-menu {
    top: clamp(70px, 6.4vw, 92px);
  }
}

@media (min-width: 769px) and (max-width: 1100px) {
  .offer-coded-card { grid-template-columns: 32% 1fr; }
  .offer-coded-image-wrap { height: clamp(170px, 20vw, 220px); }
  .offer-coded-text p, .offer-coded-text strong { font-size: clamp(15px, 1.7vw, 19px); }
  .offer-coded-text h3 { font-size: clamp(20px, 2.3vw, 28px); }
}

/* =========================
   v67 refinements requested:
   - Offer desktop header matches the more premium Our Story layout
   - language/menu buttons smaller, orange, vertical left
   - logo large on the upper right
   - info buttons use the cleaner mobile style
   - product images stay complete, no aggressive zoom/cropping or extra color blocks
   ========================= */
@media (min-width: 769px) {
  .offer-coded-desktop {
    padding-top: clamp(42px, 4.3vw, 72px);
  }

  .offer-coded-header {
    min-height: clamp(170px, 16vw, 240px);
    pointer-events: none;
  }

  .offer-coded-logo {
    position: absolute;
    top: clamp(4px, .9vw, 18px);
    right: clamp(50px, 5.2vw, 92px);
    width: clamp(138px, 10.8vw, 205px);
    z-index: 9;
    pointer-events: auto;
  }

  .offer-coded-orange-shape {
    display: none !important;
  }

  .offer-visible-lang,
  .offer-visible-menu {
    left: clamp(50px, 5vw, 92px) !important;
    right: auto !important;
    width: clamp(72px, 5.8vw, 96px) !important;
    height: clamp(72px, 5.8vw, 96px) !important;
    background: #f4a171 !important;
    box-shadow: none !important;
    pointer-events: auto;
  }

  .offer-visible-lang {
    top: clamp(10px, 1.2vw, 24px) !important;
    font-size: clamp(12px, .88vw, 15px) !important;
    font-weight: 900 !important;
    color: #fff !important;
  }

  .offer-visible-menu {
    top: clamp(102px, 9vw, 142px) !important;
    gap: clamp(5px, .45vw, 7px) !important;
  }

  .offer-visible-menu span {
    width: clamp(34px, 3.0vw, 48px) !important;
    height: clamp(4px, .34vw, 6px) !important;
  }

  .offer-coded-page .offer-floating-menu {
    top: clamp(196px, 16.5vw, 260px) !important;
    left: clamp(50px, 5vw, 92px) !important;
    right: auto !important;
    width: min(250px, 22vw) !important;
  }

  .offer-coded-main-title {
    margin-top: clamp(-60px, -4vw, -28px);
    font-size: clamp(28px, 3.25vw, 54px);
    padding: .36em 1.62em .43em;
    border-radius: 18px;
  }

  .offer-coded-section {
    max-width: 1160px;
    padding-top: clamp(48px, 4.7vw, 72px);
  }

  .offer-coded-section h2 {
    font-size: clamp(24px, 2.55vw, 42px);
    padding: .45em 1.35em .54em;
  }

  .offer-coded-card {
    grid-template-columns: minmax(240px, 34%) 1fr;
    gap: clamp(28px, 3.4vw, 58px);
    min-height: clamp(220px, 21vw, 310px);
    padding: clamp(22px, 2.45vw, 34px) clamp(28px, 3.5vw, 52px);
  }

  .offer-coded-image-wrap {
    background: transparent !important;
    box-shadow: none !important;
    overflow: visible !important;
    border-radius: 0 !important;
  }

  .offer-coded-image-wrap img {
    width: 100% !important;
    height: auto !important;
    max-height: clamp(190px, 18vw, 270px) !important;
    object-fit: contain !important;
    object-position: center center !important;
  }

  .offer-coded-info {
    top: clamp(4px, .55vw, 10px) !important;
    left: clamp(4px, .55vw, 10px) !important;
    width: clamp(38px, 3.1vw, 48px) !important;
    height: clamp(38px, 3.1vw, 48px) !important;
    border: 3px solid #fff !important;
    border-radius: 50% !important;
    background: #43a8ae !important;
    color: #fff !important;
    font-family: Georgia, serif !important;
    font-size: clamp(20px, 1.7vw, 26px) !important;
    font-weight: 700 !important;
    box-shadow: 0 6px 16px rgba(35,91,99,.14) !important;
    transform: translate(-10%, -10%);
  }

  .offer-coded-info.orange {
    background: #f47b3b !important;
  }

  .offer-coded-text h3 {
    font-size: clamp(20px, 2.05vw, 34px);
    border-radius: 12px;
  }

  .offer-coded-text p,
  .offer-coded-text strong {
    font-size: clamp(16px, 1.45vw, 25px);
    line-height: 1.45;
    letter-spacing: .045em;
  }
}

/* =========================
   v68 Offer desktop polish
   - Fix logo source/canvas issue by using cropped logo
   - More aesthetic desktop header button sizes and hamburger lines
   - Restore transparent nutrition popups like v62
   ========================= */
@media (min-width: 769px) {
  .offer-coded-header {
    min-height: clamp(150px, 14vw, 210px) !important;
  }

  .offer-coded-logo {
    top: clamp(12px, 1.3vw, 26px) !important;
    right: clamp(68px, 6vw, 108px) !important;
    width: clamp(105px, 8.7vw, 158px) !important;
  }

  .offer-visible-lang,
  .offer-visible-menu {
    left: clamp(58px, 5.4vw, 96px) !important;
    width: clamp(58px, 4.8vw, 76px) !important;
    height: clamp(58px, 4.8vw, 76px) !important;
    background: #f4a171 !important;
    box-shadow: none !important;
  }

  .offer-visible-lang {
    top: clamp(16px, 1.6vw, 30px) !important;
    font-size: clamp(11px, .78vw, 13px) !important;
  }

  .offer-visible-menu {
    top: clamp(86px, 7.6vw, 122px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: clamp(5px, .38vw, 6px) !important;
  }

  .offer-visible-menu span {
    width: clamp(29px, 2.25vw, 37px) !important;
    height: clamp(4px, .28vw, 5px) !important;
    border-radius: 999px !important;
    background: #fff !important;
    display: block !important;
    flex: 0 0 auto !important;
  }

  .offer-coded-page .offer-floating-menu {
    top: clamp(164px, 14.5vw, 218px) !important;
    left: clamp(58px, 5.4vw, 96px) !important;
  }

  .offer-coded-main-title {
    margin-top: clamp(-42px, -3.0vw, -18px) !important;
  }

  .offer-coded-info {
    width: clamp(34px, 2.65vw, 42px) !important;
    height: clamp(34px, 2.65vw, 42px) !important;
    font-size: clamp(18px, 1.42vw, 23px) !important;
    border: 2.5px solid #fff !important;
    top: clamp(6px, .55vw, 10px) !important;
    left: clamp(6px, .55vw, 10px) !important;
    transform: none !important;
  }
}

.offer-coded-page .nutrition-modal-panel,
.offer-coded-page .nutrition-modal-panel img,
.offer-image-page .nutrition-modal-panel,
.offer-image-page .nutrition-modal-panel img {
  background: transparent !important;
}

.offer-coded-page .nutrition-modal-panel img,
.offer-image-page .nutrition-modal-panel img {
  border-radius: 0 !important;
}

/* =========================
   v69 Offer desktop fine tuning
   - Keep the v68 layout direction
   - Slightly smaller title pills / copy for a more premium desktop scale
   - Header buttons stay in place; logo/buttons only slightly larger
   ========================= */
@media (min-width: 769px) {
  .offer-coded-logo {
    width: clamp(112px, 9.2vw, 168px) !important;
  }

  .offer-visible-lang,
  .offer-visible-menu {
    width: clamp(60px, 5.0vw, 80px) !important;
    height: clamp(60px, 5.0vw, 80px) !important;
  }

  .offer-visible-lang {
    font-size: clamp(11px, .82vw, 13.5px) !important;
  }

  .offer-coded-main-title {
    font-size: clamp(26px, 2.85vw, 46px) !important;
    padding: .32em 1.45em .39em !important;
    border-radius: 17px !important;
    letter-spacing: .105em !important;
    margin-bottom: clamp(38px, 4.1vw, 62px) !important;
  }

  .offer-coded-section {
    max-width: 1120px !important;
    padding: clamp(42px, 4.1vw, 62px) clamp(32px, 3.9vw, 56px) clamp(36px, 3.2vw, 52px) !important;
    margin-bottom: clamp(42px, 4vw, 66px) !important;
    border-radius: 40px !important;
  }

  .offer-coded-section h2 {
    top: calc(-1 * clamp(23px, 2.25vw, 32px)) !important;
    font-size: clamp(21px, 2.15vw, 34px) !important;
    padding: .40em 1.22em .48em !important;
    border-radius: 13px !important;
    letter-spacing: .125em !important;
  }

  .offer-coded-card {
    min-height: clamp(205px, 19vw, 284px) !important;
    padding: clamp(20px, 2.25vw, 32px) clamp(26px, 3.1vw, 46px) !important;
    gap: clamp(26px, 3.1vw, 50px) !important;
    border-radius: 32px !important;
  }

  .offer-coded-image-wrap img {
    max-height: clamp(180px, 17vw, 252px) !important;
  }

  .offer-coded-text h3 {
    font-size: clamp(18px, 1.78vw, 28px) !important;
    padding: .36em 1.05em .44em !important;
    margin-bottom: clamp(13px, 1.3vw, 20px) !important;
  }

  .offer-coded-text p,
  .offer-coded-text strong {
    font-size: clamp(14.5px, 1.28vw, 21px) !important;
    line-height: 1.42 !important;
    letter-spacing: .035em !important;
  }

  .offer-coded-text strong {
    margin-top: clamp(13px, 1.45vw, 22px) !important;
    font-size: clamp(15px, 1.36vw, 22px) !important;
  }
}