:root {
  --joul-red: #e20613;
  --joul-red-rgb: 226, 6, 19;
  --joul-cream: #fff4df;
  --joul-ink: #14110f;
  --page-bg: #fff7ec;
  --container: 1510px;
  --ease-out: cubic-bezier(.18,.82,.22,1);
  --header-x: clamp(24px, 3.6vw, 60px);
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  overflow-x: hidden;
  color: var(--joul-ink);
  background: var(--page-bg);
  font-family: "Red Hat Display", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
img {
  display: block;
  max-width: 100%;
  -webkit-user-drag: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

a:focus-visible,
button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
}

.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

.skip-link {
  position: fixed;
  left: 16px;
  top: 16px;
  z-index: 999;
  padding: 10px 14px;
  border-radius: 8px;
  color: #111;
  background: #fff;
  transform: translateY(-180%);
  transition: transform .2s ease;
}
.skip-link:focus { transform: translateY(0); }

/* ---------- Header ---------- */
.site-header {
  position: absolute;
  inset: 0 0 auto;
  z-index: 50;
  height: 154px;
  pointer-events: none;
}

.site-header__inner {
  width: min(calc(100% - (var(--header-x) * 2)), var(--container));
  height: 100%;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 220px minmax(500px, 650px) 1fr;
  align-items: start;
  gap: clamp(18px, 2vw, 34px);
  padding-top: 34px;
}

.brand,
.site-nav,
.site-header__actions { pointer-events: auto; }

.brand {
  width: 170px;
  opacity: 0;
  transform: translate3d(-24px, -8px, 0);
  transition: opacity .55s var(--ease-out) .04s, transform .72s var(--ease-out) .04s;
}

.brand img {
  width: 100%;
  height: auto;
  filter: none;
  image-rendering: auto;
}

.site-nav {
  justify-self: center;
  width: 100%;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(30px, 3vw, 58px);
  padding: 0 30px;
  border: 1px solid rgba(255,255,255,.24);
  border-radius: 999px;
  background: rgba(53, 11, 8, .52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: inset 0 1px rgba(255,255,255,.05), 0 10px 24px rgba(38,0,0,.08);
  opacity: 0;
  transform: translate3d(70px, 0, 0);
  transition: opacity .66s var(--ease-out) .10s, transform .9s var(--ease-out) .10s;
}

.site-nav a {
  color: rgba(255,255,255,.96);
  font-size: 16px;
  font-weight: 500;
  line-height: 1;
  white-space: nowrap;
  transition: opacity .18s ease, transform .18s ease;
}
.site-nav a:hover { opacity: .72; transform: translateY(-1px); }

.site-header__actions {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 18px;
  opacity: 0;
  transform: translate3d(48px, 0, 0);
  transition: opacity .62s var(--ease-out) .18s, transform .82s var(--ease-out) .18s;
}

.icon-button,
.menu-toggle { border: 0; cursor: pointer; font: inherit; }

.icon-button {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #15100d;
  background: #fff8e9;
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.icon-button svg {
  width: 25px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
}

.button {
  min-height: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 32px;
  padding: 0 34px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-family: "Red Hat Display", sans-serif;
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button__arrow { font-size: 22px; font-weight: 400; line-height: 1; }
.button--primary {
  color: #fff;
  background: var(--joul-red);
  box-shadow: 0 12px 26px rgba(var(--joul-red-rgb),.22);
}
.button--primary:hover { box-shadow: 0 16px 34px rgba(var(--joul-red-rgb),.30); }
.button--ghost {
  color: #fff;
  border-color: rgba(255,255,255,.88);
  background: rgba(31,4,3,.12);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.button--ghost:hover { background: rgba(255,255,255,.07); }
.button--header {
  min-width: 205px;
  min-height: 60px;
  padding-inline: 28px;
  gap: 28px;
  font-size: 17px;
  font-weight: 600;
}

.menu-toggle {
  display: none;
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: #fff8e9;
  position: relative;
}
.menu-toggle span {
  position: absolute;
  left: 16px;
  width: 22px;
  height: 2px;
  background: #111;
  transition: transform .2s ease, top .2s ease;
}
.menu-toggle span:first-child { top: 22px; }
.menu-toggle span:last-child { top: 30px; }
.menu-toggle[aria-expanded="true"] span:first-child { top: 26px; transform: rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:last-child { top: 26px; transform: rotate(-45deg); }
.mobile-menu { display: none; }

.is-ready .brand,
.is-ready .site-nav,
.is-ready .site-header__actions { opacity: 1; transform: translate3d(0,0,0); }

/* ---------- Hero ---------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 680px;
  height: 100svh;
  max-height: 980px;
  background: #210708;
}

.hero__background {
  position: absolute;
  inset: 0;
  z-index: -3;
  background-image: url('../images/hero/hero-background.webp');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center center;
  filter: brightness(.72) saturate(.92);
  transform: scale(1.008);
}

.hero__vignette {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(12,0,0,.34) 0%, rgba(12,0,0,.16) 42%, rgba(12,0,0,.05) 67%, transparent 100%),
    linear-gradient(180deg, rgba(8,0,0,.16) 0%, transparent 35%, rgba(18,0,0,.10) 100%);
}

.hero__inner {
  position: relative;
  width: min(calc(100% - (var(--header-x) * 2)), var(--container));
  height: 100%;
  margin: 0 auto;
}

.hero__content {
  position: absolute;
  z-index: 12;
  left: 0;
  top: 25.5%;
  width: min(45%, 700px);
}

.hero__title,
.hero__description,
.hero__actions {
  opacity: 0;
  transform: translate3d(-28px, 14px, 0);
  transition-property: opacity, transform;
  transition-timing-function: var(--ease-out);
}

.hero__title {
  margin: 0;
  width: min(42vw, 710px);
  max-width: 100%;
  line-height: 0;
  transition-duration: .74s;
  transition-delay: .84s;
}

.hero__title-art {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 5px 0 rgba(42,0,0,.10));
}

.hero__description {
  max-width: 610px;
  margin: 38px 0 0 2px;
  color: rgba(255,255,255,.96);
  font-size: clamp(18px, 1.25vw, 22px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.012em;
  transition-duration: .6s;
  transition-delay: 1.04s;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin-top: 30px;
  transition-duration: .58s;
  transition-delay: 1.20s;
}
.hero__actions .button:first-child { min-width: 285px; }
.hero__actions .button:last-child { min-width: 230px; }

.hero__product {
  position: absolute;
  z-index: 8;
  right: -.8%;
  bottom: 5.6%;
  width: min(46.4vw, 790px);
  opacity: 0;
  transform: translate3d(180px, 8px, 0) scale(.986);
  filter: drop-shadow(0 24px 28px rgba(70,0,0,.18));
  transition: opacity .84s var(--ease-out) .28s, transform 1.05s var(--ease-out) .28s;
  will-change: transform, opacity;
}
.hero__product img { width: 100%; height: auto; }


.is-ready .hero__product { opacity: 1; transform: translate3d(0,0,0) scale(1); }
.is-ready .hero__title,
.is-ready .hero__description,
.is-ready .hero__actions { opacity: 1; transform: translate3d(0,0,0); }

.hero__scribble {
  position: absolute;
  z-index: 13;
  right: .4%;
  top: 48.5%;
  display: grid;
  justify-items: start;
  color: #fff8ea;
  font-family: "Caveat", cursive;
  font-size: clamp(25px, 1.8vw, 31px);
  font-weight: 700;
  line-height: .86;
  transform: rotate(-7deg);
  opacity: 0;
  transition: opacity .5s ease 1.30s, transform .7s var(--ease-out) 1.30s;
}
.hero__scribble span { display: block; }
.hero__scribble i {
  display: block;
  width: 48px;
  height: 4px;
  margin: 10px 0 0 27px;
  border-radius: 999px;
  background: var(--joul-red);
  transform: rotate(-12deg);
}
.hero__scribble::before,
.hero__scribble::after {
  content: "";
  position: absolute;
  width: 18px;
  height: 4px;
  border-radius: 999px;
  background: var(--joul-red);
  left: -22px;
  bottom: -4px;
  transform: rotate(72deg);
}
.hero__scribble::after { left: -8px; bottom: -14px; transform: rotate(32deg); }
.is-ready .hero__scribble { opacity: 1; transform: rotate(-7deg) translate3d(0,0,0); }

/* ---------- Category showcase / approved reference ---------- */
.category-showcase {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(50px, 4.1vw, 68px) 0 0;
  background-color: #fff8ef;
  background-image:
    radial-gradient(circle at 22% 18%, rgba(134, 92, 55, .045) 0 1px, transparent 1.15px),
    radial-gradient(circle at 78% 65%, rgba(134, 92, 55, .035) 0 1px, transparent 1.1px);
  background-size: 8px 8px, 11px 11px;
}

.category-showcase__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 90px), 1582px);
  margin: 0 auto;
}

.category-showcase__ghost {
  position: absolute;
  z-index: 0;
  color: #8c6b50;
  font-family: "Caveat", cursive;
  font-weight: 700;
  line-height: .78;
  opacity: .075;
  pointer-events: none;
  user-select: none;
}
.category-showcase__ghost--left {
  left: 8.6%;
  top: 72px;
  font-size: clamp(82px, 7.3vw, 122px);
  transform: rotate(-8deg);
}
.category-showcase__ghost--right {
  right: 9.2%;
  top: 66px;
  font-size: clamp(80px, 7vw, 116px);
  text-align: center;
  transform: rotate(-7deg);
}

.category-heading {
  width: min(720px, 52vw);
  margin: 0 auto;
  text-align: center;
}

.category-heading__title {
  position: relative;
  display: inline-flex;
  align-items: baseline;
  justify-content: center;
  gap: 0;
  margin: 0;
  color: #171717;
  white-space: nowrap;
}

.category-heading__script {
  color: var(--joul-red);
  font-family: "Caveat", cursive;
  font-size: clamp(48px, 4.1vw, 70px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  transform: rotate(-2deg);
  transform-origin: center;
  margin-right: .22em;
}

.category-heading__brand,
.category-heading__question {
  position: relative;
  display: inline-block;
  color: #101010;
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(60px, 5.35vw, 90px);
  font-weight: 900;
  line-height: .82;
  letter-spacing: -.075em;
}
.category-heading__brand { margin-right: .10em; }
.category-heading__question {
  margin-left: .02em;
  letter-spacing: -.04em;
}
.category-heading__brand::after {
  content: "";
  position: absolute;
  left: 7%;
  right: 2%;
  bottom: -.16em;
  height: .075em;
  min-height: 5px;
  border-radius: 999px;
  background: var(--joul-red);
  transform: rotate(-3deg);
}

.category-heading__accent {
  position: absolute;
  right: -58px;
  top: 22%;
  width: 50px;
  height: 55px;
}
.category-heading__accent i {
  position: absolute;
  left: 0;
  width: 34px;
  height: 5px;
  border-radius: 999px;
  background: var(--joul-red);
  transform-origin: left center;
}
.category-heading__accent i:nth-child(1) { top: 2px; transform: rotate(-51deg); }
.category-heading__accent i:nth-child(2) { top: 24px; left: 7px; transform: rotate(-8deg); }
.category-heading__accent i:nth-child(3) { top: 43px; left: 5px; transform: rotate(29deg); }

.category-heading p {
  margin: 23px 0 0;
  color: #24201d;
  font-size: clamp(16px, 1.2vw, 20px);
  font-weight: 550;
  line-height: 1.25;
  letter-spacing: -.018em;
}

.category-note {
  position: absolute;
  z-index: 3;
  display: grid;
  color: #151515;
  font-family: "Caveat", cursive;
  font-size: clamp(23px, 2vw, 33px);
  font-weight: 700;
  line-height: .88;
  pointer-events: none;
}
.category-note--left {
  left: 1.8%;
  top: 15px;
  transform: rotate(-5deg);
}
.category-note--right {
  right: 1.8%;
  top: 54px;
  transform: rotate(-5deg);
}
.category-note__line {
  width: 92px;
  height: 4px;
  margin-top: 12px;
  border-radius: 999px;
  background: var(--joul-red);
  transform: rotate(-10deg);
}
.category-note__arrow {
  color: var(--joul-red);
  font-family: "Red Hat Display", sans-serif;
  font-size: 42px;
  font-weight: 400;
  line-height: .8;
}
.category-note--left .category-note__arrow { margin: -3px 0 0 92px; transform: rotate(7deg); }
.category-note--right .category-note__arrow { margin: -1px 0 0 52px; }
.category-note__spark {
  position: absolute;
  width: 22px;
  height: 4px;
  border-radius: 999px;
  background: var(--joul-red);
}
.category-note__spark--one { right: -20px; top: 19px; transform: rotate(-55deg); }
.category-note__spark--two { right: -29px; top: 42px; transform: rotate(-12deg); }

.category-cards {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: clamp(14px, 1.15vw, 20px);
  margin-top: clamp(30px, 2.6vw, 42px);
}

.category-cards.is-stagger-ready .category-card {
  opacity: 0;
  transform: translate3d(-34px, 0, 0);
  will-change: transform, opacity;
}
.category-cards.is-stagger-ready.is-in-view .category-card {
  animation: category-card-enter .58s cubic-bezier(.2,.72,.22,1) forwards;
}
.category-cards.is-stagger-ready.is-in-view .category-card:nth-child(1) { animation-delay: 0ms; }
.category-cards.is-stagger-ready.is-in-view .category-card:nth-child(2) { animation-delay: 115ms; }
.category-cards.is-stagger-ready.is-in-view .category-card:nth-child(3) { animation-delay: 230ms; }
.category-cards.is-stagger-ready.is-in-view .category-card:nth-child(4) { animation-delay: 345ms; }
.category-cards.is-stagger-ready.is-in-view .category-card:nth-child(5) { animation-delay: 460ms; }

@keyframes category-card-enter {
  from { opacity: 0; transform: translate3d(-34px, 0, 0); }
  to { opacity: 1; transform: translate3d(0, 0, 0); }
}

.category-card {
  position: relative;
  min-width: 0;
  aspect-ratio: 308 / 356;
  overflow: hidden;
  border-radius: clamp(17px, 1.35vw, 22px);
  background: #eee1d0;
  box-shadow: 0 11px 22px rgba(83, 43, 24, .08);
  isolation: isolate;
}
.category-card--dark { background: var(--joul-red); color: #fff; }
.category-card--light { background: #ead7c3; color: #111; }



.category-card__media {
  position: relative;
  z-index: 1;
  width: 100%;
  height: auto;
  transform: scale(1.001);
  transform-origin: center center;
  transition: transform .18s ease;
}
.category-card--dark:not(.category-card--share)::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 58%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(var(--joul-red-rgb),0) 0%, rgba(var(--joul-red-rgb),.68) 36%, var(--joul-red) 76%);
  pointer-events: none;
}
.category-card--share::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 52%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(var(--joul-red-rgb),0) 0%, rgba(var(--joul-red-rgb),.58) 25%, var(--joul-red) 62%);
  pointer-events: none;
}
.category-card--light::after {
  content: "";
  position: absolute;
  z-index: 2;
  left: 0;
  right: 0;
  top: 64%;
  bottom: 0;
  background: linear-gradient(180deg, rgba(234,215,195,0) 0%, rgba(234,215,195,.90) 45%, #ead7c3 74%);
  pointer-events: none;
}

.category-card__body {
  position: absolute;
  z-index: 3;
  left: clamp(17px, 1.35vw, 22px);
  right: 64px;
  bottom: clamp(16px, 1.15vw, 20px);
}
.category-card__body h3 {
  margin: 0;
  font-size: clamp(21px, 1.55vw, 27px);
  font-weight: 800;
  line-height: .96;
  letter-spacing: -.045em;
}
.category-card__body p {
  margin: 7px 0 0;
  font-size: clamp(13px, .92vw, 16px);
  font-weight: 450;
  line-height: 1.15;
  letter-spacing: -.02em;
}
.category-card--dark .category-card__body p { color: rgba(255,255,255,.94); }
.category-card--light .category-card__body p { color: #3b342e; }
.category-card--share .category-card__body { bottom: 16px; }
.category-card--share .category-card__body h3 { font-size: clamp(20px, 1.5vw, 26px); }
.category-card--share .category-card__body p { margin-top: 8px; }

.category-card__arrow {
  position: absolute;
  z-index: 4;
  right: clamp(15px, 1.2vw, 19px);
  bottom: clamp(16px, 1.15vw, 20px);
  width: clamp(44px, 3.15vw, 52px);
  height: clamp(44px, 3.15vw, 52px);
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #151515;
  background: #fffdf8;
  box-shadow: 0 5px 12px rgba(50,20,10,.08);
}
.category-card__arrow svg {
  width: 23px;
  height: 23px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.category-card:hover 

.category-card__media { transform: scale(1.025); }
.category-card:hover .category-card__arrow svg { transform: translateX(2px); }
.category-card:focus-visible { outline: 3px solid var(--joul-red); outline-offset: 4px; }

/* ---------- Two-level Joul marquee divider ---------- */
.category-ribbons {
  position: relative;
  z-index: 4;
  width: min(calc(100% - 90px), 1582px);
  margin: clamp(30px, 2.45vw, 40px) auto 0;
  pointer-events: none;
}

.category-ribbon {
  position: relative;
  width: 100%;
  overflow: hidden;
  box-sizing: border-box;
}

.category-ribbon--outline {
  height: clamp(58px, 4.35vw, 74px);
  display: flex;
  align-items: center;
  background: transparent;
}

.category-ribbon--solid {
  height: clamp(68px, 5.15vw, 88px);
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: clamp(16px, 1.25vw, 22px);
  background:
    radial-gradient(circle at 12% 50%, rgba(255,255,255,.08), transparent 19%),
    radial-gradient(circle at 88% 40%, rgba(124,0,5,.18), transparent 22%),
    linear-gradient(90deg, #ef0711 0%, var(--joul-red) 48%, #d9060e 100%);
  box-shadow: 0 11px 25px rgba(105, 13, 16, .14);
}

.category-ribbon__track {
  display: flex;
  flex: 0 0 auto;
  width: max-content;
  height: 100%;
  align-items: center;
  will-change: transform;
}

.category-ribbon__track--outline {
  animation: category-copy-marquee-reverse 31s linear infinite;
}

.category-ribbon__track--solid {
  animation: category-copy-marquee 25s linear infinite;
}

.category-ribbon__set {
  display: flex;
  flex: 0 0 auto;
  height: 100%;
  align-items: center;
  gap: clamp(30px, 2.6vw, 48px);
  padding: 0 clamp(20px, 1.9vw, 34px);
  white-space: nowrap;
}

.category-ribbon__item {
  display: inline-flex;
  align-items: center;
  gap: clamp(26px, 2.1vw, 38px);
  font-family: "Barlow Condensed", "Arial Narrow", sans-serif;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.022em;
}

.category-ribbon__item strong {
  color: inherit;
  font: inherit;
}

.category-ribbon--outline .category-ribbon__item {
  color: rgba(220, 23, 31, .16);
  font-size: clamp(29px, 2.45vw, 43px);
  -webkit-text-stroke: 1px rgba(220, 23, 31, .30);
  text-shadow: 0 1px 0 rgba(255,255,255,.48);
}

.category-ribbon--solid .category-ribbon__item {
  color: #fff;
  font-size: clamp(27px, 2.15vw, 38px);
  text-shadow: 0 1px 0 rgba(90,0,4,.12);
}

.category-ribbon__spark {
  position: relative;
  width: clamp(16px, 1.3vw, 23px);
  height: clamp(16px, 1.3vw, 23px);
  flex: 0 0 auto;
}

.category-ribbon__spark::before,
.category-ribbon__spark::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  border-radius: 999px;
  transform: translate(-50%, -50%);
}

.category-ribbon__spark::before {
  width: 100%;
  height: 24%;
}

.category-ribbon__spark::after {
  width: 24%;
  height: 100%;
}

.category-ribbon--outline .category-ribbon__spark::before,
.category-ribbon--outline .category-ribbon__spark::after {
  background: rgba(220, 23, 31, .30);
}

.category-ribbon--solid .category-ribbon__spark::before,
.category-ribbon--solid .category-ribbon__spark::after {
  background: #fff8ef;
}

@keyframes category-copy-marquee {
  from { transform: translate3d(0,0,0); }
  to { transform: translate3d(-50%,0,0); }
}

@keyframes category-copy-marquee-reverse {
  from { transform: translate3d(-50%,0,0); }
  to { transform: translate3d(0,0,0); }
}

@media (prefers-reduced-motion: reduce) {
  .category-ribbon__track { animation-play-state: paused; }
}

.placeholder-section { min-height: 1px; }

/* ---------- Desktop / laptop scaling ---------- */
@media (max-width: 1380px) {
  .site-header__inner { grid-template-columns: 205px minmax(500px, 590px) 1fr; }
  .brand { width: 156px; }
  .site-nav { gap: 32px; }
  .site-nav a { font-size: 15px; }
  .button--header { min-width: 182px; }
  .hero__content { width: 47%; top: 25%; }
  .hero__description { font-size: 19px; }
  .hero__product { width: min(47vw, 735px); right: -2.5%; bottom: 5%; }
  .hero__scribble { display: none; }
}

@media (max-width: 1120px) {
  :root { --header-x: 28px; }
  .site-header__inner { grid-template-columns: 170px 1fr auto; gap: 16px; }
  .brand { width: 142px; }
  .site-nav { gap: 22px; padding-inline: 22px; }
  .site-nav a { font-size: 14px; }
  .button--header { display: none; }
  .hero__content { width: 51%; }
  .hero__title { width: min(48vw, 640px); }
  .hero__product { width: min(52vw, 700px); right: -5%; }
}

/* ---------- Category responsive behavior ---------- */
@media (max-width: 1439px) and (min-width: 1024px) {
  .category-showcase__inner { width: calc(100% - 64px); }
  .category-cards {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 2px 2px 18px;
    margin-inline: -2px;
    scroll-snap-type: x proximity;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .category-cards::-webkit-scrollbar { display: none; }
  .category-card { flex: 0 0 clamp(264px, 24vw, 300px); scroll-snap-align: start; }
  .category-heading { width: min(650px, 58vw); }
  .category-note--left { left: 0; }
  .category-note--right { right: 0; }
}

@media (max-width: 1023px) {
  .category-showcase { padding-top: 50px; }
  .category-showcase__inner { width: 100%; }
  .category-heading { width: calc(100% - 64px); max-width: 680px; }
  .category-note,
  .category-showcase__ghost { display: none; }
  .category-cards {
    display: flex;
    gap: 18px;
    overflow-x: auto;
    padding: 4px 32px 18px;
    margin-top: 32px;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .category-cards::-webkit-scrollbar { display: none; }
  .category-card { flex: 0 0 clamp(280px, 42vw, 318px); scroll-snap-align: start; }
  .category-ribbons { width: calc(100% - 64px); margin-top: 30px; }
  .category-ribbon--outline { height: 60px; }
  .category-ribbon--solid { height: 72px; }
  .category-ribbon__set { gap: 28px; padding-inline: 22px; }
  .category-ribbon__item { gap: 24px; }
  .category-ribbon--outline .category-ribbon__item { font-size: 29px; }
  .category-ribbon--solid .category-ribbon__item { font-size: 27px; }
}

@media (max-width: 767px) {
  .category-showcase { padding-top: 44px; }
  .category-heading { width: calc(100% - 32px); }
  .category-heading__script { margin-right: .16em; }
  .category-heading__brand { margin-right: .08em; }
  .category-heading__script { font-size: clamp(38px, 12vw, 54px); }
  .category-heading__brand, .category-heading__question { font-size: clamp(48px, 15vw, 68px); }
  .category-heading__accent { right: -34px; top: 18%; transform: scale(.72); transform-origin: left center; }
  .category-heading p {
    margin-top: 21px;
    font-size: 15px;
    line-height: 1.32;
  }
  .category-heading p br { display: none; }
  .category-cards {
    gap: 14px;
    padding-inline: 16px;
    margin-top: 28px;
    scroll-padding-inline: 16px;
  }
  .category-card { flex-basis: min(82vw, 320px); }
  .category-card__body { left: 19px; right: 70px; bottom: 18px; }
  .category-card__body h3 { font-size: 25px; }
  .category-card__body p { font-size: 14px; }
  .category-card__arrow { right: 17px; bottom: 18px; width: 48px; height: 48px; }
  .category-ribbons { width: calc(100% - 32px); margin-top: 24px; }
  .category-ribbon--outline { height: 50px; }
  .category-ribbon--solid { height: 64px; border-radius: 16px; }
  .category-ribbon__set { gap: 22px; padding-inline: 18px; }
  .category-ribbon__item { gap: 20px; }
  .category-ribbon--outline .category-ribbon__item { font-size: 24px; }
  .category-ribbon--solid .category-ribbon__item { font-size: 23px; }
  .category-ribbon__spark { width: 15px; height: 15px; }
}

@media (max-width: 430px) {
  .category-showcase { padding-top: 38px; }
  .category-heading__script { font-size: clamp(34px, 11.6vw, 45px); }
  .category-heading__brand, .category-heading__question { font-size: clamp(43px, 14.4vw, 57px); }
  .category-heading__accent { right: -27px; transform: scale(.58); }
  .category-heading p { max-width: 350px; margin-inline: auto; font-size: 14px; }
  .category-cards { padding-inline: 14px; scroll-padding-inline: 14px; }
  .category-card { flex-basis: min(84vw, 308px); }
  .category-ribbons { width: calc(100% - 28px); }
  .category-ribbon--outline { height: 45px; }
  .category-ribbon--solid { height: 58px; border-radius: 14px; }
  .category-ribbon__set { gap: 18px; padding-inline: 14px; }
  .category-ribbon__item { gap: 17px; }
  .category-ribbon--outline .category-ribbon__item { font-size: 21px; }
  .category-ribbon--solid .category-ribbon__item { font-size: 20px; }
  .category-ribbon__spark { width: 13px; height: 13px; }
}

@media (max-width: 359px) {
  .category-heading__accent { display: none; }
  .category-heading__script { font-size: 33px; }
  .category-heading__brand, .category-heading__question { font-size: 42px; }
  .category-heading p { font-size: 13px; }
  .category-card { flex-basis: calc(100vw - 34px); }
  .category-ribbons { width: calc(100% - 24px); margin-top: 20px; }
  .category-ribbon--outline { height: 42px; }
  .category-ribbon--solid { height: 54px; border-radius: 13px; }
  .category-ribbon__set { gap: 16px; padding-inline: 12px; }
  .category-ribbon__item { gap: 15px; }
  .category-ribbon--outline .category-ribbon__item { font-size: 19px; }
  .category-ribbon--solid .category-ribbon__item { font-size: 18px; }
  .category-ribbon__spark { width: 12px; height: 12px; }
}

/* ---------- Tablet + mobile: natural document flow, no overlaps ---------- */
@media (max-width: 900px) {
  :root { --header-x: 18px; }

  .site-header { height: 102px; }
  .site-header__inner {
    width: calc(100% - 36px);
    grid-template-columns: 1fr auto;
    align-items: start;
    gap: 14px;
    padding-top: 18px;
  }
  .brand { width: 116px; }
  .site-nav { display: none; }
  .icon-button,
  .button--header { display: none; }
  .menu-toggle { display: block; width: 48px; height: 48px; }
  .menu-toggle span { left: 14px; width: 20px; }
  .menu-toggle span:first-child { top: 20px; }
  .menu-toggle span:last-child { top: 28px; }
  .menu-toggle[aria-expanded="true"] span:first-child,
  .menu-toggle[aria-expanded="true"] span:last-child { top: 24px; }

  .mobile-menu {
    position: absolute;
    top: 78px;
    left: 18px;
    right: 18px;
    display: grid;
    padding: 14px 18px;
    border: 1px solid rgba(255,255,255,.17);
    border-radius: 18px;
    background: rgba(36,6,6,.97);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 18px 40px rgba(20,0,0,.25);
    pointer-events: auto;
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu a {
    padding: 13px 4px;
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    border-bottom: 1px solid rgba(255,255,255,.08);
  }
  .mobile-menu a:last-child { border-bottom: 0; color: var(--joul-red); }

  .hero {
    height: auto;
    min-height: 100svh;
    max-height: none;
    overflow: hidden;
  }
  .hero__background {
    background-size: auto 100%;
    background-position: 37% center;
  }
  .hero__vignette {
    background:
      linear-gradient(180deg, rgba(24,0,0,.22) 0%, rgba(24,0,0,.06) 45%, rgba(47,5,4,.08) 100%),
      linear-gradient(90deg, rgba(18,0,0,.18), transparent 70%);
  }
  .hero__inner {
    width: calc(100% - 36px);
    height: auto;
    min-height: 100svh;
    display: flex;
    flex-direction: column;
    padding-top: 118px;
    padding-bottom: 26px;
  }
  .hero__content {
    position: relative;
    inset: auto;
    width: 100%;
    max-width: 680px;
    flex: 0 0 auto;
  }
  .hero__title { width: min(100%, 650px); }
  .hero__description {
    max-width: 590px;
    margin-top: 24px;
    font-size: clamp(16px, 2.3vw, 19px);
    line-height: 1.48;
  }
  .hero__actions {
    margin-top: 22px;
    gap: 12px;
  }
  .hero__actions .button {
    min-height: 54px;
    min-width: 0 !important;
    padding-inline: 22px;
    gap: 20px;
    font-size: 15px;
  }
  .hero__actions .button:first-child { min-width: 210px !important; }
  .hero__actions .button:last-child { min-width: 190px !important; }

  .hero__product {
    position: relative;
    inset: auto;
    align-self: center;
    flex: 0 0 auto;
    width: min(96vw, 720px);
    margin-top: clamp(12px, 3vw, 28px);
    margin-bottom: -8px;
    opacity: 0;
    transform: translate3d(90px, 8px, 0) scale(.985);
  }
  .is-ready .hero__product { transform: translate3d(0,0,0) scale(1); }
  .hero__scribble { display: none; }

}

@media (max-width: 600px) {
  .site-header__inner { width: calc(100% - 28px); padding-top: 14px; }
  .brand { width: 102px; }
  .menu-toggle { width: 44px; height: 44px; }
  .menu-toggle span { left: 13px; width: 18px; }
  .menu-toggle span:first-child { top: 18px; }
  .menu-toggle span:last-child { top: 26px; }
  .menu-toggle[aria-expanded="true"] span:first-child,
  .menu-toggle[aria-expanded="true"] span:last-child { top: 22px; }

  .mobile-menu { top: 68px; left: 14px; right: 14px; }

  .hero__inner {
    width: calc(100% - 28px);
    padding-top: 94px;
    padding-bottom: 20px;
  }
  .hero__background { background-position: 31% center; }
  .hero__title { width: 100%; }
  .hero__title-art { filter: drop-shadow(0 3px 0 rgba(42,0,0,.08)); }
  .hero__description {
    max-width: 100%;
    margin-top: 18px;
    font-size: 15.5px;
    line-height: 1.46;
  }
  .hero__actions { margin-top: 18px; }
  .hero__actions .button {
    min-height: 50px;
    font-size: 14px;
    padding-inline: 20px;
  }
  .hero__product {
    width: min(112vw, 600px);
    max-width: none;
    margin-top: 12px;
    margin-bottom: -2px;
  }

}

@media (max-width: 480px) {
  .hero__actions {
    display: grid;
    grid-template-columns: 1fr;
    width: 100%;
  }
  .hero__actions .button,
  .hero__actions .button:first-child,
  .hero__actions .button:last-child {
    width: 100%;
    min-width: 0 !important;
    min-height: 48px;
  }
  .hero__product {
    width: min(122vw, 560px);
    margin-top: 10px;
  }
}

@media (max-width: 360px) {
  .site-header__inner { width: calc(100% - 22px); }
  .brand { width: 90px; }
  .hero__inner { width: calc(100% - 22px); padding-top: 84px; }
  .hero__description { font-size: 14px; line-height: 1.42; }
  .hero__actions .button { min-height: 46px; font-size: 13px; }
  .hero__product { width: 128vw; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    transition-delay: 0ms !important;
  }
  .brand,
  .site-nav,
  .site-header__actions,
  .hero__product,
  .hero__title,
  .hero__description,
  .hero__actions,
  .hero__scribble { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .category-cards.is-stagger-ready .category-card,
  .category-cards.is-stagger-ready.is-in-view .category-card {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
  .category-ribbon__track {
    animation: none !important;
    transform: translate3d(-12%, 0, 0);
  }
}


/* ---------- Featured showcase / approved reference ---------- */
.featured-showcase {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 12% 5%, rgba(var(--joul-red-rgb),.035), transparent 30%),
    radial-gradient(circle at 90% 12%, rgba(var(--joul-red-rgb),.025), transparent 26%),
    #fff8ee;
  color: var(--joul-ink);
  padding-top: clamp(52px, 5.2vw, 82px);
}

.featured-showcase::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .19;
  background-image: radial-gradient(rgba(29,29,27,.16) .6px, transparent .6px);
  background-size: 8px 8px;
}

.featured-showcase__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 96px), 1510px);
  margin: 0 auto;
}

.featured-showcase__ghost {
  position: absolute;
  z-index: 0;
  right: 4.5%;
  top: 9%;
  color: rgba(183,132,92,.105);
  font-family: "Caveat", cursive;
  font-size: clamp(92px, 10vw, 174px);
  font-weight: 700;
  line-height: .68;
  transform: rotate(-7deg);
  pointer-events: none;
  user-select: none;
}

.featured-showcase__top {
  display: grid;
  grid-template-columns: minmax(320px, .72fr) minmax(620px, 1.45fr);
  align-items: center;
  gap: clamp(22px, 3vw, 54px);
  min-height: 310px;
}

.featured-heading {
  align-self: center;
  padding-left: 4px;
}

.featured-heading__eyebrow {
  margin: 0 0 14px;
  color: var(--joul-red);
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 800;
  letter-spacing: .35em;
}

.featured-heading__title {
  margin: 0;
  display: grid;
  width: max-content;
  max-width: 100%;
  font-size: clamp(58px, 5.35vw, 91px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.065em;
}

.featured-heading__title span { color: #111; }
.featured-heading__title strong {
  color: var(--joul-red);
  font: inherit;
}

.featured-heading__underline {
  display: block;
  width: clamp(145px, 15vw, 235px);
  height: 8px;
  margin: 8px 0 0 auto;
  border-radius: 50%;
  border-top: 5px solid var(--joul-red);
  transform: rotate(-4deg);
}

.featured-heading__copy {
  max-width: 420px;
  margin: 14px 0 0;
  color: #2b2724;
  font-size: clamp(17px, 1.15vw, 21px);
  line-height: 1.38;
  letter-spacing: -.018em;
}

.featured-hero {
  --featured-drop-distance: 108px;
  position: relative;
  min-height: clamp(342px, 25vw, 402px);
  overflow: hidden;
  border-radius: 28px;
  background: #170605;
  box-shadow: 0 16px 40px rgba(73,15,8,.08);
  isolation: isolate;
}

.featured-hero::before {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.025), transparent 24%),
    linear-gradient(90deg, rgba(255,248,238,.07), transparent 18%, transparent 84%, rgba(255,248,238,.04));
}

.featured-hero::after {
  content: "";
  position: absolute;
  z-index: 8;
  inset: 0;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.045);
  border-radius: inherit;
}

.featured-hero__backdrop {
  position: absolute;
  z-index: 0;
  inset: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 74%, rgba(var(--joul-red-rgb),.42), transparent 30%),
    radial-gradient(circle at 58% 58%, rgba(111,21,13,.54), transparent 48%),
    linear-gradient(120deg, #090302 0%, #1a0705 46%, #350a07 72%, #120403 100%);
}

.featured-hero__backdrop::before {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .22;
  background-image:
    radial-gradient(circle at 12% 18%, rgba(255,187,89,.3) 0 1px, transparent 1.6px),
    radial-gradient(circle at 68% 14%, rgba(255,188,91,.25) 0 1px, transparent 1.7px),
    radial-gradient(circle at 82% 52%, rgba(var(--joul-red-rgb),.32) 0 1.2px, transparent 1.8px);
  background-size: 47px 43px, 61px 53px, 73px 69px;
  filter: blur(.1px);
}

.featured-hero__halo {
  position: absolute;
  left: 50%;
  bottom: -38%;
  width: 58%;
  aspect-ratio: 1.75 / 1;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(var(--joul-red-rgb),.42), rgba(159,14,9,.14) 46%, transparent 72%);
  filter: blur(18px);
  transform: translateX(-50%);
}

.featured-hero__product,
.featured-hero__steam,
.featured-hero__crumbs,
.featured-hero__discover,
.featured-hero__badge,
.featured-hero__burst {
  pointer-events: none;
  user-select: none;
}

.featured-hero__product {
  position: absolute;
  z-index: 4;
  left: 53%;
  bottom: -2%;
  width: clamp(250px, 35%, 330px);
  opacity: 1;
  transform: translate3d(-50%, 0, 0) scale(1);
  transform-origin: 50% 100%;
  filter: drop-shadow(0 24px 22px rgba(0,0,0,.42));
  will-change: transform, opacity;
}

.featured-hero__product img,
.featured-hero__steam img,
.featured-hero__crumbs img,
.featured-hero__discover img,
.featured-hero__badge,
.featured-hero__burst {
  width: 100%;
  height: auto;
}

.featured-hero.is-scene-ready:not(.has-entered) .featured-hero__product {
  opacity: 0;
  transform: translate3d(-50%, calc(-1 * var(--featured-drop-distance)), 0) scale(.982);
}

.featured-hero.has-entered .featured-hero__product {
  animation: featuredProductLand .9s var(--ease-out) both;
}

.featured-hero__crumbs {
  position: absolute;
  z-index: 3;
  left: 52%;
  top: 4%;
  width: min(80%, 760px);
  opacity: .48;
  transform: translate3d(-50%, 0, 0) scale(1);
  will-change: transform, opacity;
}

.featured-hero.is-scene-ready:not(.has-entered) .featured-hero__crumbs {
  opacity: 0;
  transform: translate3d(-50%, -22px, 0) scale(.985);
}

.featured-hero.has-entered .featured-hero__crumbs {
  animation: featuredCrumbsSettle .72s var(--ease-out) .62s both;
}

.featured-hero__steam {
  position: absolute;
  z-index: 2;
  left: 53%;
  bottom: 42%;
  width: clamp(210px, 31%, 290px);
  opacity: 0;
  transform: translateX(-50%);
  mix-blend-mode: screen;
}

.featured-hero__steam--two {
  z-index: 5;
  left: 51%;
  bottom: 39%;
  width: clamp(170px, 25%, 235px);
  opacity: 0;
}

.featured-hero.has-entered.is-scene-active .featured-hero__steam--one {
  animation: featuredSteamRise 5.2s ease-in-out .82s infinite;
}

.featured-hero.has-entered.is-scene-active .featured-hero__steam--two {
  animation: featuredSteamRiseAlt 6.1s ease-in-out 2.1s infinite;
}

.featured-hero__discover {
  position: absolute;
  z-index: 6;
  left: clamp(24px, 4%, 42px);
  top: clamp(34px, 8%, 58px);
  width: clamp(140px, 18%, 188px);
  color: #fff8ee;
  transform: rotate(-7deg);
  text-shadow: 0 3px 18px rgba(0,0,0,.38);
}

.featured-hero__discover span {
  display: block;
  font-family: "Caveat", cursive;
  font-size: clamp(31px, 3vw, 47px);
  font-weight: 700;
  line-height: .78;
  letter-spacing: -.035em;
}

.featured-hero__discover img {
  width: clamp(82px, 72%, 132px);
  margin: 10px 0 0 42%;
  transform: rotate(8deg);
}

.featured-hero__badge {
  position: absolute;
  z-index: 6;
  right: clamp(18px, 3.1%, 34px);
  bottom: clamp(16px, 4%, 28px);
  width: clamp(104px, 15%, 150px);
  filter: drop-shadow(0 10px 14px rgba(0,0,0,.26));
  transform: rotate(-3deg);
}

.featured-hero__burst {
  position: absolute;
  z-index: 6;
  right: clamp(120px, 19%, 190px);
  top: 37%;
  width: clamp(44px, 5.8%, 65px);
  transform: rotate(-14deg);
  opacity: .95;
}

.featured-hero__cta {
  position: absolute;
  z-index: 7;
  top: 14px;
  right: 14px;
  min-width: 228px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px 0 28px;
  border: 1px solid rgba(87,43,26,.28);
  border-radius: 999px;
  background: rgba(255,252,247,.94);
  color: #111;
  font-size: 16px;
  font-weight: 800;
  box-shadow: 0 10px 25px rgba(0,0,0,.16);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  transition: transform .18s ease, background-color .18s ease, box-shadow .18s ease;
}

.featured-hero__cta:hover {
  transform: translateY(-2px);
  background: #fff;
  box-shadow: 0 14px 28px rgba(0,0,0,.19);
}

.featured-hero__cta:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 4px;
}

.featured-hero__cta span:last-child { font-size: 24px; font-weight: 400; }

@keyframes featuredProductLand {
  0% {
    opacity: 0;
    transform: translate3d(-50%, calc(-1 * var(--featured-drop-distance)), 0) scale(.982);
  }
  58% {
    opacity: 1;
    transform: translate3d(-50%, 5px, 0) scale(1.006);
  }
  78% {
    opacity: 1;
    transform: translate3d(-50%, -3px, 0) scale(.998);
  }
  100% {
    opacity: 1;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

@keyframes featuredCrumbsSettle {
  0% { opacity: 0; transform: translate3d(-50%, -22px, 0) scale(.985); }
  55% { opacity: .84; transform: translate3d(-50%, 3px, 0) scale(1.005); }
  100% { opacity: .62; transform: translate3d(-50%, 0, 0) scale(1); }
}

@keyframes featuredSteamRise {
  0%, 100% { opacity: 0; transform: translate3d(-50%, 18px, 0) scale(.95); }
  18% { opacity: .30; }
  55% { opacity: .42; transform: translate3d(-50%, -20px, 0) scale(1.01); }
  82% { opacity: .18; }
  100% { opacity: 0; transform: translate3d(-50%, -52px, 0) scale(1.065); }
}

@keyframes featuredSteamRiseAlt {
  0%, 100% { opacity: 0; transform: translate3d(-50%, 12px, 0) scale(.94) rotate(-2deg); }
  18% { opacity: .17; }
  50% { opacity: .28; transform: translate3d(-50%, -18px, 0) scale(1.015) rotate(2deg); }
  82% { opacity: .12; }
  100% { opacity: 0; transform: translate3d(-50%, -44px, 0) scale(1.055) rotate(-1deg); }
}

.featured-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 1.2vw, 20px);
  margin-top: 20px;
  padding-bottom: clamp(34px, 4vw, 52px);
}

.featured-cards::before,
.featured-cards::after {
  position: absolute;
  z-index: 5;
  top: 42%;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: rgba(255,250,241,.94);
  color: #3a1b12;
  font-size: 38px;
  font-weight: 300;
  line-height: 1;
  box-shadow: 0 10px 24px rgba(48,16,7,.10);
  pointer-events: none;
}
.featured-cards::before { content: "‹"; left: -64px; }
.featured-cards::after { content: "›"; right: -64px; }

.featured-cards.is-stagger-ready .featured-card {
  opacity: 0;
  transform: translate3d(-18px, 16px, 0);
}
.featured-cards.is-stagger-ready.is-in-view .featured-card {
  opacity: 1;
  transform: translate3d(0,0,0);
  transition: opacity .46s var(--ease-out), transform .46s var(--ease-out);
}
.featured-cards.is-stagger-ready.is-in-view .featured-card:nth-child(1) { transition-delay: 0ms; }
.featured-cards.is-stagger-ready.is-in-view .featured-card:nth-child(2) { transition-delay: 80ms; }
.featured-cards.is-stagger-ready.is-in-view .featured-card:nth-child(3) { transition-delay: 160ms; }
.featured-cards.is-stagger-ready.is-in-view .featured-card:nth-child(4) { transition-delay: 240ms; }

.featured-card {
  position: relative;
  min-width: 0;
  height: clamp(286px, 19vw, 320px);
  overflow: hidden;
  border-radius: 22px;
  background: #2c0d08;
  color: #fff;
  box-shadow: 0 12px 24px rgba(53,16,8,.08);
  isolation: isolate;
}

.featured-card::after {
  content: "";
  position: absolute;
  z-index: 1;
  inset: 34% 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(33,8,5,.35) 27%, rgba(28,7,5,.94) 82%);
  pointer-events: none;
}

.featured-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  transition: transform .18s ease;
}

.featured-card__body {
  position: absolute;
  z-index: 2;
  left: 22px;
  right: 72px;
  bottom: 17px;
}

.featured-card__body h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(20px, 1.5vw, 27px);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -.035em;
}

.featured-card__body p {
  margin: 7px 0 0;
  color: rgba(255,255,255,.96);
  font-size: clamp(13px, .9vw, 16px);
  font-weight: 400;
  line-height: 1.25;
}

.featured-card__arrow {
  position: absolute;
  z-index: 3;
  right: 17px;
  bottom: 18px;
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #111;
  background: #fffaf0;
  font-size: 28px;
  line-height: 1;
  transition: transform .18s ease;
}

.featured-card:hover img { transform: scale(1.025); }
.featured-card:hover .featured-card__arrow { transform: translateX(2px); }
.featured-card:focus-visible { outline: 3px solid var(--joul-red); outline-offset: 4px; }

.featured-brand-band {
  position: relative;
  z-index: 2;
  min-height: 126px;
  overflow: hidden;
  background: var(--joul-red);
  color: #fff;
}

.featured-brand-band__pattern {
  position: absolute;
  inset: 0 auto 0 0;
  width: 35%;
  background:
    linear-gradient(90deg, rgba(132,0,9,.15), transparent 88%),
    conic-gradient(from 90deg at 50% 50%, rgba(255,255,255,.07) 0 25%, transparent 0 50%, rgba(255,255,255,.07) 0 75%, transparent 0)
      0 0/62px 62px;
}

.featured-brand-band__inner {
  position: relative;
  width: min(calc(100% - 96px), 1510px);
  min-height: 126px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.05fr 1fr 1.35fr;
  align-items: center;
  gap: 34px;
}

.featured-brand-band__script {
  justify-self: center;
  font-family: "Caveat", cursive;
  font-size: 41px;
  font-weight: 700;
  line-height: .72;
  transform: rotate(-8deg);
}

.featured-brand-band__story {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-left: 34px;
  border-left: 1px solid rgba(255,255,255,.55);
  font-size: 21px;
  font-weight: 800;
  line-height: 1.05;
}
.featured-brand-band__flame { width: 30px; height: 30px; display: grid; place-items: center; }
.featured-brand-band__flame svg { width: 100%; height: 100%; fill: #fff8e9; }

.featured-brand-band__name {
  justify-self: center;
  color: #fff8e9;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .42em;
  white-space: nowrap;
}

/* Featured responsive */
@media (max-width: 1240px) {
  .featured-cards::before, .featured-cards::after { display: none; }
  .featured-showcase__inner { width: calc(100% - 64px); }
  .featured-showcase__top { grid-template-columns: .72fr 1.28fr; }
  .featured-heading__title { font-size: clamp(54px, 5.7vw, 75px); }
  .featured-card { height: 300px; }
  .featured-brand-band__inner { width: calc(100% - 64px); }
}

@media (max-width: 1023px) {
  .featured-showcase__inner { width: calc(100% - 44px); }
  .featured-showcase__top {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .featured-heading { max-width: 560px; }
  .featured-heading__title { font-size: clamp(62px, 9vw, 82px); }
  .featured-hero { min-height: 378px; }
  .featured-hero__product { width: clamp(270px, 34%, 320px); }

  .featured-cards {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    margin-inline: -22px;
    padding: 0 22px 42px;
  }
  .featured-cards::-webkit-scrollbar { display: none; }
  .featured-card { flex: 0 0 min(42vw, 340px); height: 306px; scroll-snap-align: start; }

  .featured-brand-band__inner {
    width: calc(100% - 44px);
    grid-template-columns: .8fr 1fr 1.2fr;
    gap: 20px;
  }
  .featured-brand-band__name { letter-spacing: .25em; }
}

@media (max-width: 767px) {
  .featured-showcase { padding-top: 48px; }
  .featured-showcase__inner { width: calc(100% - 32px); }
  .featured-showcase__ghost { display: none; }
  .featured-heading__eyebrow { font-size: 11px; letter-spacing: .3em; }
  .featured-heading__title { font-size: clamp(52px, 14vw, 72px); }
  .featured-heading__copy { font-size: 16px; max-width: 360px; }
  .featured-heading__underline { width: 42vw; height: 6px; }

  .featured-hero {
    --featured-drop-distance: 62px;
    min-height: 348px;
    border-radius: 22px;
  }
  .featured-hero__product { left: 51%; bottom: -2%; width: clamp(232px, 48%, 280px); }
  .featured-hero__crumbs { left: 51%; top: 9%; width: 95%; }
  .featured-hero__steam { left: 51%; bottom: 41%; width: clamp(155px, 34%, 205px); }
  .featured-hero__steam--two { display: none; }
  .featured-hero__discover {
    left: 16px;
    top: 68px;
    width: 108px;
  }
  .featured-hero__discover span { font-size: clamp(27px, 7vw, 34px); }
  .featured-hero__discover img { width: 76px; margin-top: 7px; margin-left: 28%; }
  .featured-hero__badge { right: 10px; bottom: 10px; width: clamp(82px, 21vw, 104px); }
  .featured-hero__burst { display: none; }
  .featured-hero__cta {
    top: 10px;
    right: 10px;
    min-width: 178px;
    min-height: 48px;
    padding-inline: 18px;
    gap: 18px;
    font-size: 13px;
  }

  .featured-cards {
    margin-inline: -16px;
    padding-inline: 16px;
  }
  .featured-card { flex-basis: min(82vw, 322px); height: 300px; }

  .featured-brand-band { min-height: 174px; }
  .featured-brand-band__pattern { width: 50%; }
  .featured-brand-band__inner {
    width: calc(100% - 32px);
    min-height: 174px;
    grid-template-columns: 1fr 1.2fr;
    gap: 14px;
  }
  .featured-brand-band__script { justify-self: start; font-size: 34px; }
  .featured-brand-band__story { padding-left: 20px; font-size: 17px; }
  .featured-brand-band__name {
    grid-column: 1 / -1;
    justify-self: start;
    padding-bottom: 16px;
    font-size: 10px;
    letter-spacing: .3em;
  }
}

@media (max-width: 430px) {
  .featured-showcase__inner { width: calc(100% - 28px); }
  .featured-heading__title { font-size: clamp(47px, 14.5vw, 62px); }
  .featured-heading__copy { font-size: 15px; line-height: 1.42; }
  .featured-hero { min-height: 320px; }
  .featured-hero__product { width: 226px; left: 50%; bottom: -2%; }
  .featured-hero__crumbs { left: 50%; top: 14%; width: 108%; }
  .featured-hero__steam { left: 50%; bottom: 40%; width: 150px; }
  .featured-hero__discover { top: 64px; left: 12px; width: 94px; }
  .featured-hero__discover span { font-size: 27px; }
  .featured-hero__discover img { width: 64px; margin-left: 24%; }
  .featured-hero__badge { width: 80px; right: 8px; bottom: 8px; }
  .featured-hero__cta { min-width: 162px; min-height: 44px; padding-inline: 16px; font-size: 12px; }

  .featured-card { flex-basis: calc(100vw - 42px); height: 292px; }
  .featured-card__body { left: 18px; right: 66px; bottom: 16px; }
  .featured-card__body h3 { font-size: 22px; }
  .featured-card__body p { font-size: 13px; }
  .featured-card__arrow { width: 48px; height: 48px; right: 14px; bottom: 15px; }

  .featured-brand-band__inner { width: calc(100% - 28px); }
  .featured-brand-band__story { font-size: 15px; gap: 11px; }
  .featured-brand-band__script { font-size: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-cards.is-stagger-ready .featured-card,
  .featured-cards.is-stagger-ready.is-in-view .featured-card {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .featured-hero__product {
    opacity: 1 !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
    animation: none !important;
  }
  .featured-hero__crumbs {
    opacity: .48 !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
    animation: none !important;
  }
  .featured-hero__steam {
    opacity: .12 !important;
    transform: translateX(-50%) !important;
    animation: none !important;
  }
}


/* ---------- V10 / Featured showcase visual refinement ---------- */
/* Reference-led refinement: cinematic stage background, restrained particles,
   mixed display/handwritten heading, and tighter card polish. */
.featured-showcase__top {
  grid-template-columns: minmax(320px, .68fr) minmax(620px, 1.48fr);
  gap: clamp(26px, 3.2vw, 58px);
}

.featured-heading__title {
  font-size: clamp(56px, 4.85vw, 82px);
  line-height: .9;
  letter-spacing: -.058em;
}

.featured-heading__title strong {
  display: block;
  margin-top: .035em;
  margin-left: -.045em;
  color: var(--joul-red);
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: 1.28em;
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.045em;
  transform: rotate(-2.3deg);
  transform-origin: 12% 50%;
}

.featured-heading__underline {
  width: clamp(175px, 17.5vw, 270px);
  height: 7px;
  margin: 5px 0 0 clamp(76px, 7.2vw, 112px);
  border-top-width: 4px;
  transform: rotate(-4.2deg);
}

.featured-heading__copy {
  max-width: 430px;
  margin-top: 18px;
}

.featured-hero {
  min-height: clamp(372px, 26vw, 432px);
  border-radius: 26px;
  background: #130302;
  box-shadow: 0 18px 46px rgba(50, 10, 6, .14);
}

.featured-hero::before {
  background:
    linear-gradient(180deg, rgba(255,255,255,.022), transparent 22%),
    linear-gradient(90deg, rgba(0,0,0,.17), transparent 16%, transparent 82%, rgba(0,0,0,.10));
}

.featured-hero__backdrop {
  background:
    linear-gradient(180deg, rgba(9,0,0,.05) 0%, rgba(20,0,0,.02) 50%, rgba(14,0,0,.10) 100%),
    linear-gradient(90deg, rgba(0,0,0,.20), transparent 18%, transparent 82%, rgba(0,0,0,.09)),
    url("../images/featured/animation/joul-featured-stage-bg.webp") center center / cover no-repeat;
}

.featured-hero__backdrop::before {
  inset: 0;
  opacity: 1;
  background:
    radial-gradient(ellipse at 54% 48%, rgba(var(--joul-red-rgb),.13), transparent 38%),
    linear-gradient(180deg, rgba(0,0,0,.08), transparent 30%, transparent 74%, rgba(0,0,0,.12));
  filter: none;
}

.featured-hero__halo {
  left: 54.5%;
  bottom: -22%;
  width: 46%;
  background: radial-gradient(ellipse, rgba(var(--joul-red-rgb),.26), rgba(159,14,9,.09) 48%, transparent 72%);
  filter: blur(22px);
}

.featured-hero__product {
  left: 54.5%;
  bottom: -1.5%;
  width: clamp(272px, 34.5%, 334px);
  filter: drop-shadow(0 24px 24px rgba(0,0,0,.43));
}

.featured-hero__crumbs {
  left: 54%;
  top: 10%;
  width: min(66%, 620px);
  opacity: .52;
  filter: saturate(.93) brightness(.93);
}

.featured-hero.has-entered .featured-hero__crumbs {
  animation-duration: .84s;
}

@keyframes featuredCrumbsSettle {
  0% { opacity: 0; transform: translate3d(-50%, -20px, 0) scale(.985); }
  58% { opacity: .62; transform: translate3d(-50%, 2px, 0) scale(1.004); }
  100% { opacity: .42; transform: translate3d(-50%, 0, 0) scale(1); }
}

.featured-hero__steam {
  left: 54.5%;
  bottom: 46%;
  width: clamp(190px, 25%, 248px);
  mix-blend-mode: screen;
  filter: blur(.2px);
}

.featured-hero__steam--two {
  left: 53%;
  bottom: 43%;
  width: clamp(150px, 20%, 205px);
}

.featured-hero__discover {
  left: clamp(26px, 3.5%, 38px);
  top: clamp(31px, 7%, 48px);
  width: clamp(132px, 16%, 168px);
}

.featured-hero__discover span {
  font-size: clamp(30px, 2.65vw, 43px);
  line-height: .80;
}

.featured-hero__discover img {
  width: clamp(75px, 66%, 112px);
  margin-top: 8px;
  margin-left: 40%;
}

.featured-hero__badge {
  right: clamp(16px, 2.6%, 28px);
  bottom: clamp(14px, 3.2%, 24px);
  width: clamp(102px, 13.2%, 136px);
}

.featured-hero__burst {
  right: clamp(116px, 16.5%, 164px);
  top: 40%;
  width: clamp(38px, 4.8%, 52px);
  opacity: .86;
}

.featured-hero__cta {
  top: 16px;
  right: 16px;
  min-width: 220px;
  min-height: 56px;
  background: rgba(255,252,247,.965);
  box-shadow: 0 12px 28px rgba(0,0,0,.17);
}

.featured-cards {
  gap: clamp(14px, 1.15vw, 18px);
  margin-top: 18px;
}

.featured-card {
  height: clamp(278px, 18vw, 308px);
  border-radius: 20px;
  box-shadow: 0 14px 30px rgba(52,15,8,.10);
  transition: box-shadow .24s ease, transform .24s ease;
}

.featured-card::after {
  inset: 38% 0 0;
  background: linear-gradient(180deg, transparent 0%, rgba(33,8,5,.30) 25%, rgba(25,6,4,.94) 84%);
}

.featured-card img {
  transition: transform .34s var(--ease-out);
}

.featured-cards.is-in-view .featured-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 38px rgba(52,15,8,.16);
}

.featured-card:hover img { transform: scale(1.035); }

@media (max-width: 1200px) {
  .featured-heading__title { font-size: clamp(54px, 5.45vw, 72px); }
  .featured-heading__underline { margin-left: clamp(68px, 7vw, 94px); }
  .featured-hero__product { width: clamp(262px, 35%, 316px); }
}

@media (max-width: 1023px) {
  .featured-showcase__top { grid-template-columns: 1fr; gap: 30px; }
  .featured-heading { max-width: 620px; }
  .featured-heading__title { font-size: clamp(60px, 8.6vw, 80px); }
  .featured-heading__underline { width: clamp(190px, 28vw, 260px); margin-left: clamp(82px, 12vw, 112px); }
  .featured-hero { min-height: 402px; }
  .featured-hero__backdrop { background-position: center center; }
  .featured-hero__product { left: 54%; width: clamp(278px, 35%, 326px); }
  .featured-hero__crumbs { left: 54%; width: min(62%, 560px); }
  .featured-hero__steam { left: 54%; }
}

@media (max-width: 767px) {
  .featured-heading__title {
    width: min-content;
    font-size: clamp(49px, 13.2vw, 66px);
  }
  .featured-heading__title strong {
    font-size: 1.24em;
    line-height: .74;
  }
  .featured-heading__underline {
    width: clamp(150px, 44vw, 210px);
    margin-left: clamp(56px, 17vw, 88px);
    margin-top: 4px;
  }
  .featured-heading__copy { margin-top: 16px; }

  .featured-hero {
    min-height: 354px;
    border-radius: 22px;
  }
  .featured-hero__backdrop {
    background-position: 52% center;
  }
  .featured-hero__product {
    left: 52%;
    bottom: -1%;
    width: clamp(230px, 49%, 278px);
  }
  .featured-hero__crumbs {
    left: 52%;
    top: 15%;
    width: 74%;
    opacity: .34;
  }
  .featured-hero__steam { left: 52%; bottom: 43%; }
  .featured-hero__discover { top: 68px; left: 14px; }
  .featured-hero__badge { width: clamp(78px, 20vw, 100px); }
  .featured-card { height: 296px; }
}

@media (max-width: 430px) {
  .featured-heading__title { font-size: clamp(46px, 13.8vw, 58px); }
  .featured-heading__underline { width: 46vw; margin-left: 16vw; }
  .featured-hero { min-height: 326px; }
  .featured-hero__backdrop { background-position: 53% center; }
  .featured-hero__product { width: 226px; left: 51%; }
  .featured-hero__crumbs { left: 51%; width: 82%; }
  .featured-hero__steam { left: 51%; width: 146px; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-hero__crumbs {
    opacity: .32 !important;
  }
}

/* ---------- V11 / Featured scene typography, crumbs, badge and carousel controls ---------- */
.featured-heading__eyebrow {
  width: max-content;
  margin: 0 0 4px;
  color: var(--joul-red);
  font-family: "Caveat", cursive;
  font-size: clamp(27px, 2vw, 35px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.035em;
  text-transform: none;
  transform: rotate(-2deg);
  transform-origin: left center;
}

.featured-heading__title {
  display: grid;
  width: max-content;
  max-width: 100%;
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: clamp(66px, 5.65vw, 96px);
  font-weight: 400;
  line-height: .72;
  letter-spacing: -.045em;
  transform: rotate(-1.25deg);
  transform-origin: 8% 50%;
}

.featured-heading__title span,
.featured-heading__title strong {
  display: block;
  font: inherit;
  font-weight: 400;
  letter-spacing: inherit;
}

.featured-heading__title span {
  color: #111;
  font-size: 1em;
}

.featured-heading__title strong {
  margin-top: .035em;
  margin-left: .012em;
  color: var(--joul-red);
  font-size: 1.08em;
  line-height: .72;
  transform: none;
}

.featured-heading__underline {
  width: clamp(170px, 16.5vw, 255px);
  margin: 8px 0 0 clamp(72px, 6.8vw, 104px);
  border-top-width: 4px;
  transform: rotate(-4deg);
}

/* The original background has a lot of visual information; keep the floating
   crispy pieces above it so they read as deliberate animation, not texture. */
.featured-hero__crumbs {
  z-index: 3;
  left: 54%;
  top: 6%;
  width: min(72%, 690px);
  opacity: .72;
  filter:
    saturate(1.08)
    brightness(1.12)
    drop-shadow(0 5px 6px rgba(0,0,0,.24));
}

.featured-hero.has-entered .featured-hero__crumbs {
  animation: featuredCrumbsSettleV11 .88s var(--ease-out) .58s both;
}

@keyframes featuredCrumbsSettleV11 {
  0% {
    opacity: 0;
    transform: translate3d(-50%, -24px, 0) scale(.97);
  }
  58% {
    opacity: .84;
    transform: translate3d(-50%, 3px, 0) scale(1.008);
  }
  100% {
    opacity: .72;
    transform: translate3d(-50%, 0, 0) scale(1);
  }
}

/* Badge arrives after the burger, then slowly rotates in place. */
.featured-hero__badge {
  opacity: 1;
  transform: rotate(0deg);
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

.featured-hero.is-scene-ready:not(.has-entered) .featured-hero__badge {
  opacity: 0;
  transform: translate3d(18px, 12px, 0) scale(.68) rotate(-22deg);
}

.featured-hero.has-entered .featured-hero__badge {
  animation:
    featuredBadgeArrival .68s cubic-bezier(.2,.9,.24,1.12) 1.05s both,
    featuredBadgeSpin 10s linear 1.73s infinite;
}

.featured-hero.has-entered:not(.is-scene-active) .featured-hero__badge {
  animation-play-state: paused;
}

@keyframes featuredBadgeArrival {
  0% {
    opacity: 0;
    transform: translate3d(18px, 12px, 0) scale(.68) rotate(-22deg);
  }
  72% {
    opacity: 1;
    transform: translate3d(-2px, -1px, 0) scale(1.055) rotate(3deg);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1) rotate(0deg);
  }
}

@keyframes featuredBadgeSpin {
  from { opacity: 1; transform: rotate(0deg); }
  to   { opacity: 1; transform: rotate(360deg); }
}

/* Replace decorative arrows that sat outside the section with real carousel
   controls. On desktop all four cards already fit, so controls stay hidden. */
.featured-cards::before,
.featured-cards::after {
  display: none !important;
  content: none !important;
}

.featured-cards-wrap {
  position: relative;
  z-index: 3;
}

.featured-cards-nav {
  position: absolute;
  z-index: 8;
  top: 50%;
  width: 46px;
  height: 46px;
  display: none;
  place-items: center;
  padding: 0 0 4px;
  border: 1px solid rgba(58,27,18,.10);
  border-radius: 50%;
  background: rgba(255,250,241,.96);
  color: #3a1b12;
  box-shadow: 0 10px 24px rgba(48,16,7,.14);
  font: 300 34px/1 "Red Hat Display", sans-serif;
  cursor: pointer;
  transform: translateY(-50%);
  transition: opacity .18s ease, transform .18s ease, background-color .18s ease;
}

.featured-cards-nav--prev { left: 8px; }
.featured-cards-nav--next { right: 8px; }
.featured-cards-nav:hover:not(:disabled) {
  background: #fff;
  transform: translateY(-50%) scale(1.05);
}
.featured-cards-nav:focus-visible {
  outline: 3px solid var(--joul-red);
  outline-offset: 3px;
}
.featured-cards-nav:disabled {
  opacity: .34;
  cursor: default;
}
.featured-cards-nav[hidden] { display: none !important; }

@media (max-width: 1023px) {
  .featured-heading__eyebrow {
    font-size: clamp(27px, 4.6vw, 34px);
  }
  .featured-heading__title {
    font-size: clamp(70px, 10.5vw, 94px);
  }
  .featured-heading__underline {
    width: clamp(176px, 29vw, 250px);
    margin-left: clamp(70px, 11vw, 104px);
  }

  .featured-hero__crumbs {
    left: 54%;
    top: 8%;
    width: min(70%, 610px);
    opacity: .66;
  }

  .featured-cards-nav { display: grid; }
}

@media (max-width: 767px) {
  .featured-heading__eyebrow {
    margin-bottom: 1px;
    font-size: clamp(25px, 7.2vw, 31px);
  }
  .featured-heading__title {
    width: max-content;
    font-size: clamp(58px, 17.3vw, 78px);
    line-height: .71;
  }
  .featured-heading__title strong { font-size: 1.06em; }
  .featured-heading__underline {
    width: clamp(148px, 47vw, 204px);
    margin-left: clamp(48px, 15vw, 72px);
    margin-top: 6px;
  }

  .featured-hero__crumbs {
    left: 52%;
    top: 13%;
    width: 84%;
    opacity: .56;
  }

  .featured-cards-nav {
    width: 42px;
    height: 42px;
    font-size: 30px;
  }
  .featured-cards-nav--prev { left: 2px; }
  .featured-cards-nav--next { right: 2px; }
}

@media (max-width: 430px) {
  .featured-heading__title { font-size: clamp(54px, 17vw, 68px); }
  .featured-heading__underline { width: 45vw; margin-left: 14vw; }
  .featured-hero__crumbs { left: 51%; width: 88%; opacity: .52; }
}

@media (prefers-reduced-motion: reduce) {
  .featured-hero__badge,
  .featured-hero.has-entered .featured-hero__badge {
    opacity: 1 !important;
    transform: rotate(-3deg) !important;
    animation: none !important;
  }
  .featured-hero__crumbs,
  .featured-hero.has-entered .featured-hero__crumbs {
    opacity: .62 !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
    animation: none !important;
  }
}

/* ========================================================================== */
/* REV / CTA + footer + mobile drawer                                         */
/* ========================================================================== */
:root {
  --joul-cream-soft: #fff7eb;
  --joul-cream-warm: #fdf0dd;
}

body.drawer-open { overflow: hidden; }
.page-anchor { display: block; width: 0; height: 0; overflow: hidden; }

/* ---------- Mobile header actions ---------- */
.mobile-order { display: none; }
.menu-toggle__icon,
.ui-icon,
.drawer-icon,
.footer-icon,
.delivery-button__scooter {
  display: inline-block;
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  background: currentColor;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-size: contain;
  mask-size: contain;
}
.menu-toggle__icon {
  position: static !important;
  width: 27px !important;
  height: 27px !important;
  background: currentColor !important;
  transform: none !important;
  -webkit-mask-image: url('../icons/mobile-menu/ui/menu-open.svg');
  mask-image: url('../icons/mobile-menu/ui/menu-open.svg');
}
.menu-toggle .menu-toggle__icon:first-child,
.menu-toggle .menu-toggle__icon:last-child { top: auto; left: auto; }
.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  transform: none !important;
  -webkit-mask-image: url('../icons/mobile-menu/ui/close.svg');
  mask-image: url('../icons/mobile-menu/ui/close.svg');
}

/* ---------- Mobile slide drawer ---------- */
.mobile-menu-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(16, 0, 0, .58);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .28s ease, visibility .28s ease;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.mobile-menu-backdrop.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu {
  position: fixed;
  z-index: 110;
  inset: 0 0 0 auto;
  width: min(88vw, 430px);
  height: 100dvh;
  min-height: 100%;
  display: none;
  grid-template-rows: auto auto auto auto 1fr auto;
  padding: 22px 26px 22px;
  overflow: auto;
  overscroll-behavior: contain;
  color: #fff;
  border: 0;
  border-radius: 0;
  background:
    radial-gradient(circle at 18% 8%, rgba(var(--joul-red-rgb),.18), transparent 26%),
    radial-gradient(circle at 82% 76%, rgba(var(--joul-red-rgb),.12), transparent 28%),
    linear-gradient(155deg, #240708 0%, #170404 44%, #0e0202 100%);
  box-shadow: -22px 0 70px rgba(25,0,0,.34);
  transform: translate3d(104%,0,0);
  visibility: hidden;
  pointer-events: none;
  transition: transform .42s var(--ease-out), visibility .42s ease;
}
.mobile-menu::before {
  content: "";
  position: absolute;
  inset: auto -70px 72px 45%;
  height: 285px;
  pointer-events: none;
  background: url('../images/cta-footer/joul-fried-chicken-cluster.webp') center bottom / contain no-repeat;
  opacity: .78;
  filter: saturate(1.08) brightness(.76);
}
.mobile-menu.is-open {
  transform: translate3d(0,0,0);
  visibility: visible;
  pointer-events: auto;
}
.mobile-menu__top,
.mobile-menu__nav,
.mobile-menu__order,
.mobile-menu__support,
.mobile-menu__signature,
.mobile-menu__socials { position: relative; z-index: 2; }
.mobile-menu__top {
  min-height: 66px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.mobile-menu__brand { width: 132px; }
.mobile-menu__brand img { width: 100%; height: auto; }
.mobile-menu__top-actions { display: flex; align-items: center; gap: 11px; }
.mobile-menu__cart,
.mobile-menu__close {
  position: relative;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  padding: 0;
  color: #fff;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 50%;
  background: rgba(255,255,255,.04);
  cursor: pointer;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.mobile-menu__cart:hover,
.mobile-menu__close:hover { background: rgba(255,255,255,.10); border-color: rgba(255,255,255,.32); transform: translateY(-1px); }
.mobile-menu__cart-badge {
  position: absolute;
  top: -5px;
  right: -3px;
  min-width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  padding-inline: 4px;
  border-radius: 999px;
  color: #fff;
  background: var(--joul-red);
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
  box-shadow: 0 0 0 2px #210708;
}
.mobile-menu__nav { display: grid; padding: 12px 0 10px; }
.mobile-menu__link {
  min-height: 56px;
  display: grid;
  grid-template-columns: 28px 1fr 20px;
  align-items: center;
  gap: 14px;
  padding: 4px 2px;
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.055);
  font-size: 17px;
  font-weight: 650;
  letter-spacing: -.015em;
  transition: color .18s ease, padding-left .18s ease;
}
.mobile-menu__link:hover { color: #ffd9c5; padding-left: 5px; }
.mobile-menu__link .drawer-icon:last-child { width: 18px; height: 18px; opacity: .72; }
.mobile-menu__support {
  display: grid;
  gap: 2px;
  padding: 14px 0 12px;
  border-top: 1px solid rgba(255,255,255,.14);
}
.mobile-menu__support a {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 14px;
  color: rgba(255,255,255,.92);
  font-size: 15px;
  font-weight: 500;
}
.mobile-menu__support a:hover { color: #ffd9c5; }
.mobile-menu__signature {
  align-self: end;
  justify-self: end;
  width: 154px;
  margin: 4px -8px 4px 0;
  pointer-events: none;
}
.mobile-menu__signature img { width: 100%; height: auto; }
.mobile-menu__socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.mobile-menu__socials a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.34);
  border-radius: 50%;
  transition: background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.mobile-menu__socials a:hover { background: var(--joul-red); border-color: var(--joul-red); transform: translateY(-2px); }
.drawer-icon--home { -webkit-mask-image: url('../icons/mobile-menu/ui/home.svg'); mask-image: url('../icons/mobile-menu/ui/home.svg'); }
.drawer-icon--menu { -webkit-mask-image: url('../icons/mobile-menu/ui/menu-burger.svg'); mask-image: url('../icons/mobile-menu/ui/menu-burger.svg'); }
.drawer-icon--story { -webkit-mask-image: url('../icons/mobile-menu/ui/story-document.svg'); mask-image: url('../icons/mobile-menu/ui/story-document.svg'); }
.drawer-icon--heart { -webkit-mask-image: url('../icons/mobile-menu/ui/heart.svg'); mask-image: url('../icons/mobile-menu/ui/heart.svg'); }
.drawer-icon--pin { -webkit-mask-image: url('../icons/mobile-menu/ui/map-pin.svg'); mask-image: url('../icons/mobile-menu/ui/map-pin.svg'); }
.drawer-icon--phone { -webkit-mask-image: url('../icons/mobile-menu/ui/phone.svg'); mask-image: url('../icons/mobile-menu/ui/phone.svg'); }
.drawer-icon--gift { -webkit-mask-image: url('../icons/mobile-menu/ui/gift.svg'); mask-image: url('../icons/mobile-menu/ui/gift.svg'); }
.drawer-icon--news { -webkit-mask-image: url('../icons/mobile-menu/ui/megaphone.svg'); mask-image: url('../icons/mobile-menu/ui/megaphone.svg'); }
.drawer-icon--help { -webkit-mask-image: url('../icons/mobile-menu/ui/help-circle.svg'); mask-image: url('../icons/mobile-menu/ui/help-circle.svg'); }
.drawer-icon--close { -webkit-mask-image: url('../icons/mobile-menu/ui/close.svg'); mask-image: url('../icons/mobile-menu/ui/close.svg'); }
.drawer-icon--chevron-right { -webkit-mask-image: url('../icons/mobile-menu/ui/chevron-right.svg'); mask-image: url('../icons/mobile-menu/ui/chevron-right.svg'); }
.drawer-icon--instagram,
.footer-icon--instagram { -webkit-mask-image: url('../icons/mobile-menu/social/instagram.svg'); mask-image: url('../icons/mobile-menu/social/instagram.svg'); }
.drawer-icon--facebook,
.footer-icon--facebook { -webkit-mask-image: url('../icons/mobile-menu/social/facebook.svg'); mask-image: url('../icons/mobile-menu/social/facebook.svg'); }
.drawer-icon--youtube,
.footer-icon--youtube { -webkit-mask-image: url('../icons/mobile-menu/social/youtube.svg'); mask-image: url('../icons/mobile-menu/social/youtube.svg'); }
.drawer-icon--tiktok,
.footer-icon--tiktok { -webkit-mask-image: url('../icons/mobile-menu/social/tiktok.svg'); mask-image: url('../icons/mobile-menu/social/tiktok.svg'); }
.footer-icon--phone { -webkit-mask-image: url('../icons/mobile-menu/ui/phone.svg'); mask-image: url('../icons/mobile-menu/ui/phone.svg'); }
.footer-icon--pin { -webkit-mask-image: url('../icons/mobile-menu/ui/map-pin.svg'); mask-image: url('../icons/mobile-menu/ui/map-pin.svg'); }
.delivery-button__scooter { -webkit-mask-image: url('../icons/mobile-menu/ui/scooter.svg'); mask-image: url('../icons/mobile-menu/ui/scooter.svg'); }
.footer-icon--clock { -webkit-mask-image: url('../icons/mobile-menu/ui/clock.svg'); mask-image: url('../icons/mobile-menu/ui/clock.svg'); }
.ui-icon--search { -webkit-mask-image: url('../icons/mobile-menu/ui/search.svg'); mask-image: url('../icons/mobile-menu/ui/search.svg'); }
.ui-icon--arrow-up-right { -webkit-mask-image: url('../icons/mobile-menu/ui/arrow-up-right.svg'); mask-image: url('../icons/mobile-menu/ui/arrow-up-right.svg'); }

/* ---------- Delivery CTA ---------- */
.delivery-cta {
  position: relative;
  isolation: isolate;
  min-height: clamp(570px, 38vw, 680px);
  overflow: hidden;
  color: #181312;
  background:
    radial-gradient(circle at 55% 35%, rgba(255,255,255,.96), rgba(255,255,255,0) 43%),
    linear-gradient(180deg, #fff8ed 0%, #fff2df 100%);
}
.delivery-cta__glow {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 16% 40%, rgba(var(--joul-red-rgb),.06), transparent 25%),
    radial-gradient(circle at 88% 48%, rgba(var(--joul-red-rgb),.06), transparent 27%);
}
.delivery-cta__storefront,
.delivery-cta__store-note,
.delivery-cta__content,
.delivery-cta__destination,
.delivery-cta__route,
.delivery-cta__checker { position: absolute; }
.delivery-cta__storefront {
  z-index: 2;
  left: -1.8%;
  bottom: 24px;
  width: clamp(340px, 28vw, 510px);
}
.delivery-cta__storefront img { width: 100%; height: auto; }
.delivery-cta__store-note {
  z-index: 5;
  left: 21.5%;
  top: 4%;
  width: clamp(116px, 9.5vw, 176px);
}
.delivery-cta__store-note img { width: 100%; height: auto; }
.delivery-cta__content {
  z-index: 8;
  left: 34%;
  top: clamp(44px, 4vw, 70px);
  width: min(38%, 680px);
  text-align: center;
}
.delivery-cta__eyebrow {
  margin: 0 0 10px;
  color: var(--joul-red);
  font-size: clamp(12px, .92vw, 16px);
  font-weight: 900;
  letter-spacing: .38em;
  text-transform: uppercase;
}
.delivery-cta__title {
  margin: 0;
  display: grid;
  font-size: clamp(46px, 4.4vw, 78px);
  font-weight: 900;
  line-height: .88;
  letter-spacing: -.055em;
}
.delivery-cta__title span,
.delivery-cta__title strong { display: block; font: inherit; }
.delivery-cta__title strong { color: var(--joul-red); }
.delivery-cta__copy {
  width: min(96%, 650px);
  margin: 22px auto 0;
  font-size: clamp(15px, 1.12vw, 19px);
  line-height: 1.42;
  font-weight: 500;
}
.delivery-cta__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin-top: 24px;
}
.delivery-button {
  min-width: 218px;
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  padding: 0 25px;
  border: 1.5px solid var(--joul-red);
  border-radius: 999px;
  font-size: 16px;
  font-weight: 800;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.delivery-button:hover { transform: translateY(-2px); }
.delivery-button--primary { color: #fff; background: var(--joul-red); box-shadow: 0 10px 26px rgba(var(--joul-red-rgb),.18); }
.delivery-button--primary:hover { box-shadow: 0 14px 32px rgba(var(--joul-red-rgb),.28); }
.delivery-button--ghost { color: #181312; background: rgba(255,255,255,.32); }
.delivery-button--ghost:hover { background: #fff; }
.delivery-button__scooter { width: 22px; height: 22px; }
.order-platforms { margin-top: 22px; }
.order-platforms > p { margin: 0 0 11px; font-size: 14px; font-weight: 800; }
.order-platforms__grid { display: flex; justify-content: center; gap: 9px; }
.order-platform {
  width: 116px;
  min-height: 52px;
  display: grid;
  place-items: center;
  padding: 6px 10px;
  border-radius: 8px;
  color: #fff;
  box-shadow: 0 5px 13px rgba(73,19,7,.09);
  font-size: 14px;
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.04em;
  transition: transform .18s ease, filter .18s ease;
}
.order-platform:hover { transform: translateY(-2px); filter: brightness(1.05); }
.order-platform span { display: block; font-size: .65em; font-weight: 800; letter-spacing: -.01em; }
.order-platform--yemeksepeti { background: #ed164f; font-style: italic; }
.order-platform--getir { background: #5b2bc3; color: #ffe200; }
.order-platform--trendyol { background: #f66a14; }
.order-platform--migros { background: #f4670d; }
.delivery-cta__destination {
  z-index: 5;
  right: -1%;
  top: 5%;
  width: 27%;
  height: 88%;
  pointer-events: none;
}
.delivery-cta__kapina {
  position: absolute;
  top: 0;
  left: -10%;
  width: 70%;
}
.delivery-cta__pin {
  position: absolute;
  right: 27%;
  bottom: 16%;
  width: 35%;
  filter: drop-shadow(0 9px 12px rgba(107,17,9,.15));
}
.delivery-cta__chicken {
  position: absolute;
  right: -9%;
  bottom: 4%;
  width: 78%;
}
.delivery-cta__bucket {
  position: absolute;
  right: -5%;
  bottom: -23%;
  width: 52%;
}
.delivery-cta__route {
  z-index: 3;
  inset: auto 0 0;
  height: 50%;
  pointer-events: none;
}
.delivery-cta__road {
  position: absolute;
  left: 9%;
  bottom: -10%;
  width: 86%;
  max-width: none;
}
.delivery-cta__speed {
  position: absolute;
  left: 19%;
  bottom: 12%;
  width: 31%;
  opacity: .8;
}
.delivery-cta__smoke {
  position: absolute;
  left: 15%;
  bottom: -11%;
  width: 31%;
  opacity: 0;
  transform: translate3d(-14%,0,0) scale(.95);
}
.delivery-cta__courier {
  position: absolute;
  left: 17%;
  bottom: -12%;
  width: clamp(330px, 28vw, 520px);
  max-width: none;
  opacity: 0;
  transform: translate3d(-78vw,0,0) rotate(-1deg);
  will-change: transform, opacity;
  filter: drop-shadow(0 12px 12px rgba(73,10,5,.16));
}
.delivery-cta.has-entered .delivery-cta__courier {
  animation: joulCourierArrival 1.15s cubic-bezier(.18,.84,.22,1) .08s both;
}
.delivery-cta.has-entered .delivery-cta__smoke {
  animation: joulCourierSmoke 1.15s ease-out .22s both;
}
@keyframes joulCourierArrival {
  0% { opacity: 0; transform: translate3d(-78vw,0,0) rotate(-2deg); }
  68% { opacity: 1; transform: translate3d(2.2%,0,0) rotate(.5deg); }
  100% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
}
@keyframes joulCourierSmoke {
  0% { opacity: 0; transform: translate3d(-20%,8px,0) scale(.9); }
  50% { opacity: .92; }
  100% { opacity: .72; transform: translate3d(0,0,0) scale(1); }
}
.delivery-cta__checker {
  z-index: 15;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 38px;
  overflow: hidden;
  pointer-events: none;
}
.delivery-cta__checker img {
  position: absolute;
  left: 50%;
  top: 50%;
  width: max(100%, 1800px);
  max-width: none;
  transform: translate(-50%, -50%);
}

/* ---------- Footer ---------- */
.site-footer {
  position: relative;
  overflow: hidden;
  color: #fff;
  background:
    radial-gradient(circle at 2% 58%, rgba(var(--joul-red-rgb),.31), transparent 17%),
    radial-gradient(circle at 93% 20%, rgba(var(--joul-red-rgb),.16), transparent 19%),
    linear-gradient(115deg, #210909 0%, #170606 48%, #0f0303 100%);
}
.site-footer__ambient {
  position: absolute;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    linear-gradient(90deg, transparent 49%, rgba(255,255,255,.028) 50%, transparent 51%),
    linear-gradient(0deg, transparent 49%, rgba(255,255,255,.02) 50%, transparent 51%);
  background-size: 38px 38px;
  mask-image: linear-gradient(90deg,#000,transparent 28%,transparent 72%,#000);
}
.site-footer__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 80px), 1590px);
  min-height: 270px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(220px,1.25fr) .72fr .72fr .82fr 1.12fr 1.48fr;
  gap: clamp(22px, 2.4vw, 48px);
  align-items: start;
  padding: 50px 0 28px;
}
.site-footer__inner > *:not(.site-footer__stamp):not(.site-footer__signature) { position: relative; z-index: 3; }
.site-footer__brand-column { min-width: 0; }
.site-footer__logo { width: 188px; height: auto; }
.site-footer__brand-column p {
  margin: 20px 0 17px;
  color: rgba(255,255,255,.83);
  font-size: 13px;
  line-height: 1.48;
}
.site-footer__socials { display: flex; gap: 10px; }
.site-footer__socials a {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  color: #fff;
  border: 1px solid rgba(255,255,255,.42);
  border-radius: 50%;
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.site-footer__socials a:hover { transform: translateY(-2px); border-color: var(--joul-red); background: var(--joul-red); }
.site-footer__socials .footer-icon { width: 18px; height: 18px; }
.site-footer__handwritten { align-self: start; width: 130px; margin-top: 3px; }
.site-footer__handwritten img { width: 100%; height: auto; }
.site-footer__links,
.site-footer__contact,
.site-footer__newsletter { padding-left: clamp(12px, 1.6vw, 26px); border-left: 1px solid rgba(255,255,255,.14); }
.site-footer h2 { margin: 0 0 17px; font-size: 14px; font-weight: 800; letter-spacing: -.01em; }
.site-footer__links { display: grid; align-content: start; gap: 9px; }
.site-footer__links a,
.site-footer__contact a,
.site-footer__contact p {
  color: rgba(255,255,255,.83);
  font-size: 13px;
  line-height: 1.2;
}
.site-footer__links a { transition: color .18s ease, transform .18s ease; }
.site-footer__links a:hover { color: #fff; transform: translateX(2px); }
.site-footer__contact { display: grid; align-content: start; gap: 14px; }
.site-footer__contact h2 { margin-bottom: 5px; }
.site-footer__contact a,
.site-footer__contact p { margin: 0; display: grid; grid-template-columns: 23px 1fr; align-items: center; gap: 11px; }
.site-footer__contact .footer-icon { width: 21px; height: 21px; }
.site-footer__newsletter p { margin: -4px 0 14px; color: rgba(255,255,255,.78); font-size: 12px; line-height: 1.38; }
.newsletter-form {
  min-height: 49px;
  display: grid;
  grid-template-columns: 1fr 48px;
  align-items: stretch;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.52);
  border-radius: 999px;
  background: rgba(255,255,255,.035);
}
.newsletter-form input {
  min-width: 0;
  padding: 0 17px;
  color: #fff;
  border: 0;
  outline: 0;
  background: transparent;
  font: inherit;
  font-size: 12px;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,.62); }
.newsletter-form button {
  width: 48px;
  border: 0;
  border-radius: 50%;
  color: #fff;
  background: var(--joul-red);
  font-size: 22px;
  cursor: pointer;
}
.newsletter-form button .ui-icon { width: 20px; height: 20px; }
.newsletter-form__status { min-height: 1.4em; margin: 8px 0 0 !important; color: #ffd7c2 !important; }
.site-footer__stamp {
  position: absolute;
  z-index: 1;
  right: 1.5%;
  top: 19px;
  width: 142px;
  opacity: .22;
  transform: rotate(-7deg);
}
.site-footer__signature {
  position: absolute;
  z-index: 2;
  right: .7%;
  bottom: 4px;
  width: 137px;
}
.site-footer__bottom {
  position: relative;
  z-index: 3;
  width: min(calc(100% - 80px), 1590px);
  min-height: 58px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-top: 1px solid rgba(255,255,255,.22);
  color: rgba(255,255,255,.70);
  font-size: 11px;
}
.site-footer__bottom p { margin: 0; }
.site-footer__bottom nav { display: flex; align-items: center; gap: 12px; }
.site-footer__bottom a { transition: color .18s ease; }
.site-footer__bottom a:hover { color: #fff; }

@media (max-width: 1380px) and (min-width: 901px) {
  .delivery-cta__content { left: 32.5%; width: 41%; }
  .delivery-cta__storefront { width: 31vw; left: -3%; }
  .delivery-cta__store-note { left: 20%; }
  .delivery-cta__destination { width: 25%; }
  .order-platform { width: 105px; }
  .site-footer__inner,
  .site-footer__bottom { width: calc(100% - 54px); }
  .site-footer__inner { grid-template-columns: 1.15fr .62fr .68fr .76fr 1.08fr 1.36fr; gap: 20px; }
  .site-footer__links,
  .site-footer__contact,
  .site-footer__newsletter { padding-left: 15px; }
  .site-footer__signature { display: none; }
}

@media (max-width: 1100px) and (min-width: 901px) {
  .delivery-cta { min-height: 590px; }
  .delivery-cta__storefront { width: 34vw; left: -6%; }
  .delivery-cta__store-note { display: none; }
  .delivery-cta__content { left: 29%; width: 46%; }
  .delivery-cta__destination { right: -5%; width: 28%; }
  .delivery-cta__title { font-size: 52px; }
  .delivery-cta__copy { font-size: 14px; }
  .delivery-button { min-width: 185px; padding-inline: 20px; }
  .order-platform { width: 95px; font-size: 12px; }
  .site-footer__inner { grid-template-columns: 1.2fr .8fr .8fr 1.25fr; min-height: 0; row-gap: 30px; }
  .site-footer__handwritten { display: none; }
  .site-footer__newsletter { grid-column: span 2; }
}

@media (max-width: 900px) {
  .site-header__actions { gap: 4px; }
  .menu-toggle {
    display: grid;
    place-items: center;
    color: #fff;
    border-radius: 50%;
    background: rgba(47,4,4,.46);
    border: 1px solid rgba(255,255,255,.18);
  }
  .menu-toggle span { position: static; }
  .mobile-menu { display: grid; }
  .mobile-menu-backdrop { display: block; }

  .delivery-cta {
    min-height: 1010px;
    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.96), rgba(255,255,255,0) 46%),
      linear-gradient(180deg, #fff7e9 0%, #fff0db 100%);
  }
  .delivery-cta__storefront {
    left: -9%;
    top: 0;
    bottom: auto;
    width: 62%;
    height: 260px;
    overflow: hidden;
    opacity: .98;
  }
  .delivery-cta__storefront img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 17%;
  }
  .delivery-cta__store-note {
    left: auto;
    right: 3%;
    top: 23px;
    width: 132px;
  }
  .delivery-cta__content {
    left: 50%;
    top: 180px;
    width: min(calc(100% - 44px), 620px);
    transform: translateX(-50%);
  }
  .delivery-cta__eyebrow { font-size: 11px; letter-spacing: .29em; }
  .delivery-cta__title { font-size: clamp(46px, 9.4vw, 66px); line-height: .9; }
  .delivery-cta__copy { max-width: 520px; margin-top: 18px; font-size: 15px; }
  .delivery-cta__actions { max-width: 530px; margin: 22px auto 0; }
  .delivery-button { flex: 1 1 0; min-width: 0; }
  .order-platforms { margin-top: 20px; }
  .order-platforms__grid { flex-wrap: wrap; }
  .order-platform { width: 108px; }
  .delivery-cta__destination {
    right: -6%;
    top: auto;
    bottom: 35px;
    width: 47%;
    height: 365px;
  }
  .delivery-cta__kapina { left: -38%; top: 7%; width: 88%; }
  .delivery-cta__pin { right: 44%; bottom: 13%; width: 36%; }
  .delivery-cta__chicken { right: -14%; bottom: 2%; width: 78%; }
  .delivery-cta__bucket { right: -8%; bottom: -16%; width: 48%; }
  .delivery-cta__route { height: 34%; }
  .delivery-cta__road { left: -5%; bottom: -1%; width: 112%; }
  .delivery-cta__speed { left: 5%; bottom: 20%; width: 52%; }
  .delivery-cta__smoke { left: -4%; bottom: -7%; width: 55%; }
  .delivery-cta__courier { left: -3%; bottom: -6%; width: min(58vw, 430px); }
  @keyframes joulCourierArrival {
    0% { opacity: 0; transform: translate3d(-55vw,0,0) rotate(-2deg); }
    70% { opacity: 1; transform: translate3d(2%,0,0) rotate(.5deg); }
    100% { opacity: 1; transform: translate3d(0,0,0) rotate(0); }
  }
  .delivery-cta__checker { height: 32px; }
  .delivery-cta__checker img { width: 1600px; }

  .site-footer__inner {
    width: calc(100% - 40px);
    min-height: 220px;
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: 20px;
    padding: 34px 0 18px;
  }
  .site-footer__brand-column { align-self: center; }
  .site-footer__logo { width: 154px; }
  .site-footer__brand-column p,
  .site-footer__handwritten,
  .site-footer__links,
  .site-footer__contact,
  .site-footer__newsletter,
  .site-footer__stamp { display: none; }
  .site-footer__socials { margin-top: 20px; }
  .site-footer__socials a { width: 38px; height: 38px; }
  .site-footer__signature {
    position: static;
    display: block;
    width: 150px;
    justify-self: end;
  }
  .site-footer__bottom {
    width: calc(100% - 40px);
    min-height: 76px;
    flex-direction: column-reverse;
    justify-content: center;
    gap: 8px;
    padding: 13px 0 15px;
    text-align: center;
  }
  .site-footer__bottom nav { gap: 8px; font-size: 10px; }
}

@media (max-width: 600px) {
  .site-header__actions { gap: 0; }
  .menu-toggle {
    width: 44px;
    height: 44px;
    background: transparent;
    border-color: transparent;
  }
  .menu-toggle__icon { width: 26px !important; height: 26px !important; }
  .mobile-menu {
    width: min(91vw, 390px);
    padding: 17px 21px 18px;
  }
  .mobile-menu__brand { width: 112px; }
  .mobile-menu__top { min-height: 61px; }
  .mobile-menu__cart,
  .mobile-menu__close { width: 41px; height: 41px; }
  .mobile-menu__link { min-height: 52px; font-size: 16px; }
  .mobile-menu__support a { min-height: 41px; font-size: 14px; }
  .mobile-menu__signature { width: 136px; }

  .delivery-cta { min-height: 950px; }
  .delivery-cta__storefront { width: 68%; height: 225px; left: -13%; }
  .delivery-cta__store-note { right: -2%; top: 22px; width: 120px; }
  .delivery-cta__content { top: 148px; width: calc(100% - 28px); }
  .delivery-cta__eyebrow { margin-bottom: 7px; font-size: 10px; }
  .delivery-cta__title { font-size: clamp(40px, 12.7vw, 56px); }
  .delivery-cta__copy { width: min(95%, 440px); margin-top: 15px; font-size: 13px; line-height: 1.42; }
  .delivery-cta__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; width: min(100%, 440px); }
  .delivery-button { min-height: 50px; font-size: 14px; }
  .order-platforms { margin-top: 17px; }
  .order-platforms > p { font-size: 12px; margin-bottom: 9px; }
  .order-platforms__grid { gap: 6px; flex-wrap: nowrap; }
  .order-platform { width: auto; flex: 1 1 0; min-width: 0; min-height: 45px; padding: 5px 4px; font-size: clamp(9px, 2.8vw, 12px); border-radius: 6px; }
  .delivery-cta__route { height: 31%; }
  .delivery-cta__courier { left: -8%; bottom: -4%; width: min(71vw, 330px); }
  .delivery-cta__smoke { left: -10%; bottom: -4%; width: 66%; }
  .delivery-cta__speed { left: -2%; bottom: 19%; width: 64%; }
  .delivery-cta__road { left: -22%; bottom: 1%; width: 140%; }
  .delivery-cta__destination { right: -12%; bottom: 34px; width: 60%; height: 300px; }
  .delivery-cta__kapina { left: -39%; top: 4%; width: 91%; }
  .delivery-cta__pin { right: 43%; bottom: 13%; width: 33%; }
  .delivery-cta__chicken { right: -14%; bottom: 3%; width: 72%; }
  .delivery-cta__bucket { right: -9%; bottom: -19%; width: 47%; }
  .delivery-cta__checker { height: 26px; }
  .delivery-cta__checker img { width: 1260px; }

  .site-footer__inner { width: calc(100% - 30px); min-height: 190px; padding-top: 27px; gap: 10px; }
  .site-footer__logo { width: 132px; }
  .site-footer__socials { gap: 7px; margin-top: 17px; }
  .site-footer__socials a { width: 34px; height: 34px; }
  .site-footer__socials .footer-icon { width: 16px; height: 16px; }
  .site-footer__signature { width: 126px; margin-right: -6px; }
  .site-footer__bottom { width: calc(100% - 30px); }
  .site-footer__bottom nav { flex-wrap: wrap; justify-content: center; }
}

@media (max-width: 359px) {
  .mobile-menu { width: 94vw; padding-inline: 17px; }
  .mobile-menu__brand { width: 100px; }
  .mobile-menu__link { grid-template-columns: 25px 1fr 17px; gap: 11px; font-size: 15px; }
  .delivery-cta { min-height: 910px; }
  .delivery-cta__storefront { height: 202px; }
  .delivery-cta__store-note { width: 102px; }
  .delivery-cta__content { top: 130px; width: calc(100% - 22px); }
  .delivery-cta__title { font-size: 39px; }
  .delivery-cta__copy { font-size: 12.5px; }
  .delivery-button { min-height: 47px; font-size: 13px; }
  .order-platform { font-size: 9px; }
  .delivery-cta__destination { width: 63%; }
  .site-footer__inner { grid-template-columns: 1fr; text-align: center; }
  .site-footer__logo { margin: 0 auto; }
  .site-footer__socials { justify-content: center; }
  .site-footer__signature { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-menu,
  .mobile-menu-backdrop { transition: none !important; }
  .delivery-cta__courier,
  .delivery-cta__smoke,
  .delivery-cta.has-entered .delivery-cta__courier,
  .delivery-cta.has-entered .delivery-cta__smoke {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* QA hotfix: preserve asset aspect ratios when HTML width/height hints are present. */
.delivery-cta__store-note img,
.delivery-cta__kapina,
.delivery-cta__pin,
.delivery-cta__chicken,
.delivery-cta__bucket,
.delivery-cta__road,
.delivery-cta__speed,
.delivery-cta__smoke,
.delivery-cta__courier,
.delivery-cta__checker img,
.site-footer__handwritten img,
.site-footer__stamp,
.site-footer__signature,
.mobile-menu__signature img {
  height: auto;
}
@media (max-width: 900px) {
  .mobile-menu .mobile-menu__link:last-child,
  .mobile-menu .mobile-menu__support a:last-child { color: #fff; }
}

/* Desktop composition fine-tuning after visual QA. */
@media (min-width: 901px) {
  .delivery-cta__courier { left: 18%; bottom: -2%; width: clamp(315px, 25.5vw, 465px); }
  .delivery-cta__smoke { left: 14%; bottom: -3%; width: 29%; }
  .delivery-cta__speed { left: 18%; bottom: 13%; width: 30%; }
  .delivery-cta__pin { right: 43%; bottom: 15%; width: 29%; }
  .delivery-cta__chicken { right: -5%; bottom: 2%; width: 68%; }
  .delivery-cta__bucket { right: -3%; bottom: -10%; width: 46%; }
}

/* ==========================================================================
   V13 / CTA cinematic composition refinement
   Footer is intentionally untouched in this revision.
   ========================================================================== */
.delivery-cta {
  min-height: clamp(620px, 37.2vw, 670px);
  background:
    radial-gradient(circle at 49% 27%, rgba(255,255,255,.99) 0%, rgba(255,255,255,.72) 26%, rgba(255,255,255,0) 53%),
    radial-gradient(circle at 8% 53%, rgba(255,180,110,.16), rgba(255,180,110,0) 28%),
    radial-gradient(circle at 92% 46%, rgba(225,64,42,.075), rgba(225,64,42,0) 25%),
    linear-gradient(180deg, #fff9f0 0%, #fff3e4 73%, #fdebd8 100%);
  box-shadow: inset 0 -18px 38px rgba(190,67,38,.045);
}
.delivery-cta__glow {
  z-index: -3;
  background:
    radial-gradient(ellipse at 17% 54%, rgba(255,123,54,.13), transparent 30%),
    radial-gradient(ellipse at 87% 62%, rgba(var(--joul-red-rgb),.075), transparent 28%);
}
.delivery-cta__atmosphere {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  pointer-events: none;
}
.delivery-cta__horizon {
  position: absolute;
  right: -3%;
  bottom: 42px;
  width: 78%;
  height: auto;
  opacity: .82;
  filter: saturate(.96);
}
.delivery-cta__storefront {
  z-index: 5;
  left: -2.6%;
  bottom: 25px;
  width: clamp(430px, 30.5vw, 555px);
  filter: drop-shadow(18px 18px 26px rgba(89,25,11,.13));
}
.delivery-cta__storefront::after {
  content: "";
  position: absolute;
  inset: 12% -2% 0 3%;
  z-index: -1;
  border-radius: 48%;
  background: radial-gradient(ellipse at 35% 58%, rgba(255,95,32,.22), rgba(255,95,32,0) 66%);
  filter: blur(18px);
}
.delivery-cta__storefront img { filter: saturate(1.12) contrast(1.035) brightness(1.015); }
.delivery-cta__store-note {
  z-index: 10;
  left: 24.2%;
  top: 7.2%;
  width: clamp(118px, 8.9vw, 158px);
  transform: rotate(-1.5deg);
}
.delivery-cta__store-arrow {
  position: absolute;
  z-index: 10;
  left: 27.6%;
  top: 20.2%;
  width: clamp(66px, 4.9vw, 88px);
  height: auto;
  transform: rotate(4deg);
  opacity: .95;
  pointer-events: none;
}
.delivery-cta__content {
  z-index: 11;
  left: 36.1%;
  top: clamp(34px, 2.65vw, 48px);
  width: min(35.3%, 620px);
}
.delivery-cta__eyebrow {
  margin-bottom: 9px;
  font-size: clamp(12px, .84vw, 15px);
  letter-spacing: .42em;
}
.delivery-cta__title {
  font-size: clamp(51px, 3.85vw, 69px);
  line-height: .91;
  letter-spacing: -.052em;
  text-shadow: 0 2px 0 rgba(255,255,255,.7);
}
.delivery-cta__title strong { text-shadow: 0 6px 20px rgba(var(--joul-red-rgb),.08); }
.delivery-cta__title-burst {
  position: absolute;
  left: -7.2%;
  top: 31.5%;
  width: clamp(30px, 2.6vw, 45px);
  height: auto;
  transform: rotate(-13deg);
  pointer-events: none;
}
.delivery-cta__copy {
  width: min(98%, 600px);
  margin-top: 18px;
  font-size: clamp(14px, 1.03vw, 18px);
  line-height: 1.4;
  font-weight: 540;
}
.delivery-cta__actions { gap: 14px; margin-top: 20px; }
.delivery-button {
  min-width: 222px;
  min-height: 56px;
  padding-inline: 24px;
  box-shadow: 0 11px 28px rgba(103,33,18,.06);
}
.delivery-button--primary {
  box-shadow: 0 12px 30px rgba(var(--joul-red-rgb),.22), inset 0 1px 0 rgba(255,255,255,.18);
}
.delivery-button--ghost {
  background: rgba(255,250,244,.66);
  backdrop-filter: blur(5px);
  box-shadow: 0 10px 24px rgba(108,45,24,.045), inset 0 1px 0 rgba(255,255,255,.85);
}
.order-platforms { margin-top: 18px; }
.order-platforms > p {
  margin-bottom: 9px;
  color: rgba(24,19,18,.72);
  font-size: 13px;
}
.order-platforms__grid { gap: 8px; }
.order-platform {
  width: 108px;
  min-height: 49px;
  border-radius: 7px;
  box-shadow: 0 7px 18px rgba(86,31,15,.095);
}
.delivery-cta__near-note {
  position: absolute;
  z-index: 9;
  right: 3.6%;
  top: 5.7%;
  width: clamp(95px, 7.3vw, 128px);
  color: #171110;
  text-align: center;
  font-family: "Caveat Brush", "Caveat", cursive;
  line-height: .86;
  transform: rotate(-3deg);
  pointer-events: none;
}
.delivery-cta__near-note span,
.delivery-cta__near-note strong { display: block; font: inherit; }
.delivery-cta__near-note span { font-size: clamp(16px, 1.22vw, 22px); }
.delivery-cta__near-note strong { font-size: clamp(21px, 1.58vw, 28px); font-weight: 700; }
.delivery-cta__near-note::after {
  content: "";
  display: block;
  width: 66%;
  height: 4px;
  margin: 5px auto 0;
  border-radius: 999px;
  background: var(--joul-red);
  transform: rotate(-6deg);
}
.delivery-cta__near-note img {
  position: absolute;
  right: -23%;
  top: 78%;
  width: clamp(45px, 3.8vw, 68px);
  height: auto;
  transform: scaleX(-1) rotate(-2deg);
}
.delivery-cta__destination {
  z-index: 8;
  right: -1.2%;
  top: 23.2%;
  width: 28.8%;
  height: 74%;
}
.delivery-cta__kapina {
  top: -2%;
  left: -8%;
  width: 72%;
  filter: drop-shadow(0 5px 10px rgba(var(--joul-red-rgb),.05));
}
.delivery-cta__pin {
  right: 34%;
  bottom: 12%;
  width: 32%;
  filter: drop-shadow(0 14px 15px rgba(120,19,8,.18));
}
.delivery-cta__chicken {
  right: -11%;
  bottom: 1%;
  width: 77%;
  filter: drop-shadow(-10px 14px 18px rgba(130,56,13,.08));
}
.delivery-cta__bucket {
  right: -5%;
  bottom: -17%;
  width: 46%;
  filter: drop-shadow(-8px 14px 18px rgba(95,31,10,.09));
}
.delivery-cta__route { z-index: 6; height: 47%; }
.delivery-cta__route::before {
  content: "";
  position: absolute;
  left: 2%;
  right: 1%;
  bottom: 1.2%;
  height: 32%;
  border-radius: 50%;
  background: radial-gradient(ellipse at center, rgba(204,34,20,.10), rgba(204,34,20,0) 68%);
  filter: blur(8px);
}
.delivery-cta__road {
  left: -3.5%;
  bottom: -8%;
  width: 108%;
  filter: drop-shadow(0 7px 9px rgba(151,18,9,.07));
}
.delivery-cta__speed { left: 23.5%; bottom: 15%; width: 24%; opacity: .92; }
.delivery-cta__smoke {
  left: 9.2%;
  bottom: -1%;
  width: 29.5%;
  filter: saturate(.9) drop-shadow(0 6px 8px rgba(69,41,25,.08));
}
.delivery-cta__courier {
  left: 16.2%;
  bottom: -1.8%;
  width: clamp(315px, 24.8vw, 440px);
  filter: drop-shadow(0 15px 14px rgba(73,10,5,.18));
}
.delivery-cta__checker { height: 30px; background: rgba(255,255,255,.42); }
.delivery-cta__checker img { width: max(100%, 1760px); filter: saturate(1.04); }

@keyframes joulCourierSmoke {
  0% { opacity: 0; transform: translate3d(-20%,8px,0) scale(.9); }
  50% { opacity: .9; }
  100% { opacity: .78; transform: translate3d(0,0,0) scale(1.02); }
}

@media (min-width: 901px) {
  .delivery-cta__content { top: clamp(42px, 3.1vw, 56px); }
  .delivery-cta__title-burst { left: -8.5%; top: 40%; width: clamp(29px, 2.3vw, 40px); }
  .delivery-cta__road {
    left: -4%;
    bottom: 17px;
    width: 109%;
    height: clamp(118px, 7.8vw, 142px);
    object-fit: fill;
  }
  .delivery-cta__courier { left: 16.4%; bottom: 1.6%; width: clamp(300px, 23.8vw, 425px); }
  .delivery-cta__smoke { left: 8.5%; bottom: 1.5%; width: 28%; }
  .delivery-cta__speed { left: 29.2%; bottom: 18.5%; width: clamp(108px, 8.2vw, 145px); }
  .delivery-cta__destination { top: 25.5%; }
  .delivery-cta__kapina { left: -5%; top: 0; width: 64%; }
  .delivery-cta__pin { z-index: 5; right: 35%; bottom: 10%; width: 30%; }
  .delivery-cta__chicken { z-index: 2; right: -12%; bottom: 0; width: 75%; }
  .delivery-cta__bucket { z-index: 4; right: -4%; bottom: -15%; width: 44%; }
  .delivery-cta__checker { height: 28px; }
}

@media (min-width: 1500px) {
  .delivery-cta__storefront { left: -1.6%; width: clamp(450px, 29.2vw, 530px); }
  .delivery-cta__store-note { left: 24.7%; }
  .delivery-cta__store-arrow { left: 28.1%; }
  .delivery-cta__content { left: 36.4%; width: min(34.1%, 610px); }
  .delivery-cta__destination { right: -1.1%; width: 28.7%; }
}

@media (min-width: 1290px) {
  .delivery-cta__road {
    bottom: -2px;
    height: clamp(154px, 9.6vw, 172px);
    filter:
      drop-shadow(0 8px 0 rgba(207,18,22,.72))
      drop-shadow(0 15px 10px rgba(151,18,9,.08));
  }
  .delivery-cta__courier { left: 16.8%; bottom: 13.5%; width: clamp(300px, 23.2vw, 410px); }
  .delivery-cta__smoke { left: 8.8%; bottom: 12.5%; width: 27.5%; }
  .delivery-cta__speed { left: 28.6%; bottom: 29%; width: clamp(104px, 7.8vw, 136px); }
  .delivery-cta__kapina { left: -2%; width: 59%; }
  .delivery-cta__pin { right: 35%; bottom: 23%; width: 31%; }
  .delivery-cta__chicken { right: -15%; bottom: 0; width: 88%; }
  .delivery-cta__bucket { right: -5%; bottom: -15%; width: 45%; }
}

@media (min-width: 901px) and (max-width: 1280px) {
  .delivery-cta { min-height: 610px; }
  .delivery-cta__storefront { left: -6%; width: 35vw; }
  .delivery-cta__store-note { left: 22%; width: 118px; }
  .delivery-cta__store-arrow { left: 26%; top: 19%; width: 60px; }
  .delivery-cta__content { left: 29%; top: 40px; width: 46%; }
  .delivery-cta__title { font-size: 51px; }
  .delivery-cta__title-burst { left: -4%; }
  .delivery-cta__copy { max-width: 560px; font-size: 14px; }
  .delivery-button { min-width: 188px; }
  .order-platform { width: 96px; }
  .delivery-cta__near-note { display: none; }
  .delivery-cta__destination { right: -6%; top: 28%; width: 31%; }
  .delivery-cta__kapina { left: -15%; width: 68%; }
  .delivery-cta__courier { left: 14.5%; bottom: 1%; width: min(30vw, 375px); }
  .delivery-cta__smoke { left: 8%; width: 34%; }
  .delivery-cta__speed { left: 27%; bottom: 18%; width: 108px; }
  .delivery-cta__road { left: -8%; bottom: 13px; width: 118%; height: 118px; }
  .delivery-cta__horizon { width: 88%; }
}

@media (max-width: 900px) {
  .delivery-cta {
    min-height: 1015px;
    background:
      radial-gradient(circle at 50% 25%, rgba(255,255,255,.98), rgba(255,255,255,0) 47%),
      linear-gradient(180deg, #fff8ed 0%, #fff0dd 100%);
  }
  .delivery-cta__atmosphere { opacity: .7; }
  .delivery-cta__horizon { right: -14%; bottom: 36px; width: 118%; opacity: .52; }
  .delivery-cta__storefront { left: -9%; top: 0; bottom: auto; width: 62%; filter: drop-shadow(12px 13px 18px rgba(89,25,11,.12)); }
  .delivery-cta__storefront::after { display: none; }
  .delivery-cta__store-note { left: auto; right: 3%; top: 22px; width: 132px; }
  .delivery-cta__store-arrow { right: 13%; left: auto; top: 122px; width: 58px; transform: rotate(18deg); }
  .delivery-cta__content { left: 50%; top: 180px; width: min(calc(100% - 44px), 620px); transform: translateX(-50%); }
  .delivery-cta__title { font-size: clamp(46px, 9.4vw, 66px); }
  .delivery-cta__title-burst { display: none; }
  .delivery-cta__copy { max-width: 520px; margin-top: 18px; font-size: 15px; }
  .delivery-cta__actions { max-width: 530px; margin: 22px auto 0; }
  .delivery-button { flex: 1 1 0; min-width: 0; }
  .order-platforms { margin-top: 20px; }
  .order-platform { width: 108px; }
  .delivery-cta__near-note { display: none; }
  .delivery-cta__destination { right: -6%; top: auto; bottom: 35px; width: 47%; height: 365px; }
  .delivery-cta__kapina { left: -38%; top: 7%; width: 88%; }
  .delivery-cta__pin { right: 44%; bottom: 13%; width: 36%; }
  .delivery-cta__chicken { right: -14%; bottom: 2%; width: 78%; }
  .delivery-cta__bucket { right: -8%; bottom: -16%; width: 48%; }
  .delivery-cta__route { height: 34%; }
  .delivery-cta__road { left: -5%; bottom: -1%; width: 112%; height: auto; object-fit: contain; }
  .delivery-cta__speed { left: 5%; bottom: 20%; width: 52%; }
  .delivery-cta__smoke { left: -4%; bottom: -7%; width: 55%; }
  .delivery-cta__courier { left: -3%; bottom: -6%; width: min(58vw, 430px); }
  .delivery-cta__checker { height: 32px; }
  .delivery-cta__checker img { width: 1600px; }
}

@media (max-width: 600px) {
  .delivery-cta { min-height: 1020px; }
  .delivery-cta__horizon { bottom: 26px; width: 145%; opacity: .42; }
  .delivery-cta__storefront { width: 68%; height: 205px; left: -13%; }
  .delivery-cta__store-note { right: -2%; top: 20px; width: 112px; }
  .delivery-cta__store-arrow { right: 11%; top: 104px; width: 46px; }
  .delivery-cta__content { top: 205px; width: calc(100% - 28px); }
  .delivery-cta__eyebrow { margin-bottom: 7px; font-size: 10px; }
  .delivery-cta__title { font-size: clamp(40px, 12.7vw, 56px); }
  .delivery-cta__copy { width: min(95%, 440px); margin-top: 15px; font-size: 13px; line-height: 1.42; }
  .delivery-cta__actions { display: grid; grid-template-columns: 1fr; gap: 10px; margin-top: 18px; width: min(100%, 440px); }
  .delivery-button { min-height: 50px; font-size: 14px; }
  .order-platforms { margin-top: 17px; }
  .order-platforms > p { font-size: 12px; margin-bottom: 9px; }
  .order-platforms__grid { gap: 6px; flex-wrap: nowrap; }
  .order-platform { width: auto; flex: 1 1 0; min-width: 0; min-height: 45px; padding: 5px 4px; font-size: clamp(9px, 2.8vw, 12px); border-radius: 6px; }
  .delivery-cta__route { height: 31%; }
  .delivery-cta__courier { left: -8%; bottom: -4%; width: min(71vw, 330px); }
  .delivery-cta__smoke { left: -10%; bottom: -4%; width: 66%; }
  .delivery-cta__speed { left: -2%; bottom: 19%; width: 64%; }
  .delivery-cta__road { left: -22%; bottom: 1%; width: 140%; }
  .delivery-cta__destination { right: -12%; bottom: 30px; width: 60%; height: 300px; }
  .delivery-cta__kapina { left: -39%; top: 4%; width: 91%; }
  .delivery-cta__pin { right: 43%; bottom: 13%; width: 33%; }
  .delivery-cta__chicken { right: -14%; bottom: 3%; width: 72%; }
  .delivery-cta__bucket { right: -9%; bottom: -19%; width: 47%; }
  .delivery-cta__checker { height: 26px; }
  .delivery-cta__checker img { width: 1260px; }
}

@media (max-width: 359px) {
  .delivery-cta { min-height: 995px; }
  .delivery-cta__storefront { height: 188px; }
  .delivery-cta__store-note { width: 102px; }
  .delivery-cta__store-arrow { top: 98px; width: 43px; }
  .delivery-cta__content { top: 190px; width: calc(100% - 22px); }
  .delivery-cta__title { font-size: 39px; }
  .delivery-cta__copy { font-size: 12.5px; }
  .delivery-button { min-height: 47px; font-size: 13px; }
  .order-platform { font-size: 9px; }
  .delivery-cta__destination { width: 63%; }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-cta__store-arrow,
  .delivery-cta__near-note img { transition: none !important; }
}

/* ==========================================================================
   V14 / CTA reference-lock composition
   Goal: match approved desktop/mobile CTA reference while keeping footer intact.
   ========================================================================== */

/* ---- V17 CTA declutter + pin motion ---- */
.delivery-cta__store-note,
.delivery-cta__store-arrow,
.delivery-cta__near-note {
  display: none !important;
}

.delivery-cta__pin {
  animation: deliveryPinFloat 3.8s ease-in-out infinite;
  transform-origin: 50% 88%;
  will-change: transform;
}

@keyframes deliveryPinFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-10px); }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-cta__pin {
    animation: none !important;
    transform: none !important;
  }
}

/* ---- Shared CTA scene polish ---- */
.delivery-cta {
  overflow: hidden;
  background:
    radial-gradient(circle at 52% 24%, rgba(255,255,255,.98) 0%, rgba(255,255,255,.62) 31%, rgba(255,255,255,0) 57%),
    radial-gradient(circle at 8% 48%, rgba(255,149,74,.105), rgba(255,149,74,0) 28%),
    radial-gradient(circle at 94% 48%, rgba(var(--joul-red-rgb),.055), rgba(var(--joul-red-rgb),0) 24%),
    linear-gradient(180deg, #fffaf2 0%, #fff5e8 70%, #fcebd7 100%);
  box-shadow: inset 0 -14px 28px rgba(156,50,24,.035);
}
.delivery-cta__atmosphere { opacity: 1; }
.delivery-cta__horizon {
  bottom: 35px;
  width: 88%;
  opacity: .62;
  filter: saturate(.95) contrast(.96);
}
.delivery-cta__storefront {
  overflow: visible;
}
.delivery-cta__storefront img {
  position: relative;
  z-index: 0;
  display: block;
  width: 100%;
  height: auto;
  filter: saturate(1.13) contrast(1.045) brightness(1.02);
}
/* Soft edge integration instead of a hard rectangular crop. */
.delivery-cta__storefront::before,
.delivery-cta__storefront::after {
  content: "";
  position: absolute;
  z-index: 3;
  pointer-events: none;
}
.delivery-cta__storefront::before {
  top: 0;
  right: -2px;
  bottom: 0;
  width: 23%;
  background: linear-gradient(90deg, rgba(255,247,236,0), rgba(255,247,236,.94) 88%, #fff7ec 100%);
}
.delivery-cta__storefront::after {
  left: 0;
  right: 0;
  bottom: -2px;
  height: 12%;
  border-radius: 0;
  background: linear-gradient(180deg, rgba(255,244,228,0), rgba(255,240,221,.86) 82%, #ffefdc 100%);
  filter: none;
}
.delivery-cta__route::before {
  left: 5%;
  right: 3%;
  bottom: 10px;
  height: 28%;
  opacity: .75;
}
.delivery-cta__road {
  filter: drop-shadow(0 8px 9px rgba(151,18,9,.07));
}
.delivery-cta__checker {
  z-index: 18;
  background: transparent;
}
.delivery-cta__checker::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -9px;
  height: 10px;
  background: linear-gradient(180deg, rgba(255,238,218,0), rgba(255,238,218,.94));
  pointer-events: none;
}

/* ---- Desktop art direction: one horizontal cinematic scene ---- */
@media (min-width: 1024px) {
  .delivery-cta {
    min-height: 0;
    height: clamp(560px, 34vw, 620px);
  }
  .delivery-cta__horizon {
    right: -2%;
    bottom: 40px;
    width: 84%;
  }
  .delivery-cta__storefront {
    z-index: 5;
    left: -1.7%;
    top: auto;
    bottom: 24px;
    width: clamp(390px, 26.2vw, 470px);
    height: auto;
    filter: drop-shadow(15px 16px 23px rgba(89,25,11,.12));
  }
  .delivery-cta__store-note {
    z-index: 11;
    left: 24.2%;
    top: 6.7%;
    width: clamp(105px, 7.8vw, 142px);
  }
  .delivery-cta__store-arrow {
    z-index: 11;
    left: 27.3%;
    top: 18.4%;
    width: clamp(56px, 4vw, 72px);
  }
  .delivery-cta__content {
    z-index: 12;
    left: 36.2%;
    top: clamp(34px, 2.45vw, 45px);
    width: min(35.2%, 610px);
    transform: none;
  }
  .delivery-cta__eyebrow {
    margin-bottom: 8px;
    font-size: clamp(11px, .8vw, 14px);
    letter-spacing: .42em;
  }
  .delivery-cta__title {
    font-size: clamp(49px, 3.72vw, 67px);
    line-height: .9;
  }
  .delivery-cta__title-burst {
    left: -7.5%;
    top: 39%;
    width: clamp(28px, 2.2vw, 38px);
  }
  .delivery-cta__copy {
    width: min(97%, 585px);
    margin-top: 16px;
    font-size: clamp(13px, .95vw, 17px);
    line-height: 1.38;
  }
  .delivery-cta__actions {
    gap: 13px;
    margin-top: 18px;
  }
  .delivery-button {
    min-width: clamp(184px, 13.1vw, 226px);
    min-height: 54px;
    padding-inline: 21px;
    font-size: 15px;
  }
  .order-platforms { margin-top: 16px; }
  .order-platforms > p { margin-bottom: 8px; font-size: 13px; }
  .order-platforms__grid { gap: 8px; flex-wrap: nowrap; }
  .order-platform { width: clamp(92px, 6.4vw, 111px); min-height: 48px; }

  .delivery-cta__near-note {
    display: block;
    right: 3.7%;
    top: 5.5%;
    width: clamp(88px, 6.6vw, 116px);
  }
  .delivery-cta__near-note span { font-size: clamp(14px, 1.05vw, 19px); }
  .delivery-cta__near-note strong { font-size: clamp(19px, 1.38vw, 25px); }
  .delivery-cta__near-note img { right: -21%; top: 80%; width: clamp(42px, 3.2vw, 58px); }

  .delivery-cta__destination {
    z-index: 9;
    right: -1.2%;
    top: 21%;
    bottom: auto;
    width: 27.2%;
    height: 75%;
  }
  .delivery-cta__kapina {
    left: -7%;
    top: 0;
    width: 63%;
  }
  .delivery-cta__pin {
    z-index: 6;
    right: 36%;
    bottom: 14%;
    width: 28%;
  }
  .delivery-cta__chicken {
    z-index: 3;
    right: -10%;
    bottom: 3.5%;
    width: 69%;
  }
  .delivery-cta__bucket {
    z-index: 5;
    right: -3%;
    bottom: -4%;
    width: 37%;
  }

  .delivery-cta__route {
    z-index: 7;
    inset: auto 0 0;
    height: 47%;
  }
  .delivery-cta__road {
    left: -3.5%;
    bottom: 25px;
    width: 108%;
    height: clamp(118px, 7.3vw, 136px);
    object-fit: fill;
  }
  .delivery-cta__courier {
    left: 17.3%;
    bottom: 39px;
    width: clamp(285px, 20.2vw, 360px);
  }
  .delivery-cta__smoke {
    left: 8.4%;
    bottom: 39px;
    width: 26.5%;
  }
  .delivery-cta__speed {
    left: 27.8%;
    bottom: 29%;
    width: clamp(88px, 6.5vw, 116px);
  }
  .delivery-cta__checker {
    height: 27px;
  }
  .delivery-cta__checker img { width: max(100%, 1720px); }
}

/* Mid desktop keeps the same composition, only scales it down. */
@media (min-width: 1024px) and (max-width: 1280px) {
  .delivery-cta { height: 565px; }
  .delivery-cta__storefront { left: -3%; width: 30%; }
  .delivery-cta__store-note { left: 23.3%; width: 105px; }
  .delivery-cta__store-arrow { left: 26.4%; width: 54px; }
  .delivery-cta__content { left: 31.2%; width: 43.5%; top: 36px; }
  .delivery-cta__title { font-size: 52px; }
  .delivery-cta__copy { max-width: 530px; font-size: 13.5px; }
  .delivery-button { min-width: 185px; min-height: 51px; }
  .order-platform { width: 94px; min-height: 45px; }
  .delivery-cta__near-note { display: none; }
  .delivery-cta__destination { right: -5%; top: 24%; width: 31%; }
  .delivery-cta__kapina { left: -12%; width: 65%; }
  .delivery-cta__pin { right: 37%; bottom: 17%; width: 29%; }
  .delivery-cta__chicken { right: -9%; width: 69%; }
  .delivery-cta__bucket { right: -2%; bottom: -2%; width: 37%; }
  .delivery-cta__road { bottom: 25px; height: 118px; }
  .delivery-cta__courier { left: 15.5%; bottom: 38px; width: min(25vw, 320px); }
  .delivery-cta__smoke { left: 6.6%; bottom: 38px; width: 31%; }
  .delivery-cta__speed { left: 25.4%; bottom: 28%; width: 90px; }
}

/* ---- Tablet art direction, not a squeezed desktop ---- */
@media (min-width: 768px) and (max-width: 1023px) {
  .delivery-cta {
    min-height: 0;
    height: 760px;
  }
  .delivery-cta__horizon { right: -18%; bottom: 34px; width: 130%; opacity: .48; }
  .delivery-cta__storefront {
    left: -4%;
    top: 0;
    bottom: auto;
    width: 43%;
    height: 250px;
    overflow: hidden;
  }
  .delivery-cta__storefront::before {
    top: 0; right: -2px; bottom: 0; width: 27%;
  }
  .delivery-cta__storefront::after { height: 35%; }
  .delivery-cta__storefront img { width: 104%; }
  .delivery-cta__store-note { left: auto; right: 4%; top: 28px; width: 120px; }
  .delivery-cta__store-arrow { left: auto; right: 13%; top: 125px; width: 55px; transform: rotate(17deg); }
  .delivery-cta__content {
    left: 50%;
    top: 116px;
    width: min(calc(100% - 64px), 570px);
    transform: translateX(-50%);
  }
  .delivery-cta__title { font-size: 58px; }
  .delivery-cta__copy { max-width: 520px; font-size: 14px; margin-top: 15px; }
  .delivery-cta__actions { max-width: 510px; margin: 18px auto 0; }
  .delivery-button { flex: 1 1 0; min-width: 0; min-height: 51px; }
  .order-platforms { margin-top: 15px; }
  .order-platform { width: 102px; min-height: 46px; }
  .delivery-cta__near-note { display: none; }
  .delivery-cta__route { height: 31%; }
  .delivery-cta__road { left: -8%; bottom: 24px; width: 118%; height: 110px; object-fit: fill; }
  .delivery-cta__courier { left: 3%; bottom: 37px; width: min(40vw, 360px); }
  .delivery-cta__smoke { left: -7%; bottom: 38px; width: 46%; }
  .delivery-cta__speed { left: 22%; bottom: 30%; width: 100px; }
  .delivery-cta__destination { right: -5%; top: auto; bottom: 28px; width: 46%; height: 280px; }
  .delivery-cta__kapina { left: -38%; top: -8%; width: 76%; }
  .delivery-cta__pin { right: 40%; bottom: 18%; width: 29%; }
  .delivery-cta__chicken { right: -10%; bottom: 4%; width: 65%; }
  .delivery-cta__bucket { right: -3%; bottom: -3%; width: 34%; }
  .delivery-cta__checker { height: 25px; }
}

/* ---- Mobile: deliberately separate vertical composition ---- */
@media (max-width: 767px) {
  .delivery-cta {
    min-height: 0;
    height: clamp(790px, 205vw, 860px);
    background:
      radial-gradient(circle at 50% 28%, rgba(255,255,255,.99), rgba(255,255,255,.54) 39%, rgba(255,255,255,0) 60%),
      linear-gradient(180deg, #fffaf1 0%, #fff4e6 72%, #fce9d4 100%);
  }
  .delivery-cta__glow { opacity: .58; }
  .delivery-cta__horizon { right: -34%; bottom: 27px; width: 180%; opacity: .35; }

  /* Storefront becomes a wide top atmosphere crop with a soft bottom fade. */
  .delivery-cta__storefront {
    z-index: 2;
    left: -5%;
    top: 0;
    bottom: auto;
    width: 92%;
    height: 178px;
    overflow: hidden;
    filter: drop-shadow(8px 10px 16px rgba(89,25,11,.08));
  }
  .delivery-cta__storefront img {
    width: 82%;
    transform: translate3d(-2%, -4.5%, 0) scale(1.05);
    transform-origin: 0 0;
  }
  .delivery-cta__storefront::before {
    top: 0;
    right: 0;
    bottom: 0;
    width: 38%;
    background: linear-gradient(90deg, rgba(255,248,238,0), #fff8ee 89%);
  }
  .delivery-cta__storefront::after {
    left: 0;
    right: 0;
    bottom: -1px;
    height: 44%;
    background: linear-gradient(180deg, rgba(255,248,238,0), #fff8ee 91%);
  }
  .delivery-cta__store-note {
    z-index: 8;
    left: auto;
    right: 3.5%;
    top: 17px;
    width: 108px;
  }
  .delivery-cta__store-arrow {
    z-index: 8;
    left: auto;
    right: 10.5%;
    top: 93px;
    width: 43px;
    transform: rotate(18deg);
  }

  .delivery-cta__content {
    z-index: 10;
    left: 50%;
    top: 124px;
    width: calc(100% - 24px);
    max-width: 470px;
    transform: translateX(-50%);
  }
  .delivery-cta__eyebrow {
    margin-bottom: 5px;
    font-size: 9px;
    letter-spacing: .32em;
  }
  .delivery-cta__title {
    font-size: clamp(38px, 11.5vw, 50px);
    line-height: .88;
  }
  .delivery-cta__copy {
    width: min(94%, 410px);
    margin-top: 11px;
    font-size: clamp(11.5px, 3.05vw, 13px);
    line-height: 1.37;
  }
  .delivery-cta__actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    width: min(100%, 430px);
    margin: 14px auto 0;
  }
  .delivery-button {
    width: 100%;
    min-width: 0;
    min-height: 45px;
    padding-inline: 16px;
    font-size: 12.5px;
  }
  .delivery-button__scooter { width: 18px; height: 18px; }
  .order-platforms { margin-top: 12px; }
  .order-platforms > p { margin-bottom: 7px; font-size: 10.5px; }
  .order-platforms__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 5px;
    width: 100%;
  }
  .order-platform {
    width: 100%;
    min-width: 0;
    min-height: 44px;
    padding: 4px 3px;
    border-radius: 5px;
    font-size: clamp(8.5px, 2.45vw, 10.5px);
  }

  .delivery-cta__near-note { display: none; }

  /* Destination is a compact story layer directly above the route scene. */
  .delivery-cta__destination {
    z-index: 8;
    right: -6%;
    top: auto;
    bottom: 26px;
    width: 64%;
    height: 270px;
  }
  .delivery-cta__kapina {
    left: -56%;
    top: -6%;
    width: 88%;
  }
  .delivery-cta__pin {
    z-index: 5;
    right: 46%;
    bottom: 17%;
    width: 28%;
  }
  .delivery-cta__chicken {
    z-index: 2;
    right: -10%;
    bottom: 3%;
    width: 61%;
  }
  .delivery-cta__bucket {
    z-index: 4;
    right: -1%;
    bottom: -1%;
    width: 31%;
  }

  .delivery-cta__route {
    z-index: 7;
    inset: auto 0 0;
    height: 245px;
  }
  .delivery-cta__road {
    left: -18%;
    bottom: 23px;
    width: 138%;
    height: 76px;
    object-fit: fill;
  }
  .delivery-cta__courier {
    left: -4%;
    bottom: 36px;
    width: min(56vw, 235px);
  }
  .delivery-cta__smoke {
    left: -15%;
    bottom: 36px;
    width: 61%;
  }
  .delivery-cta__speed {
    left: 17%;
    bottom: 36%;
    width: 34%;
  }
  .delivery-cta__checker {
    height: 20px;
  }
  .delivery-cta__checker img { width: 1040px; }

  .delivery-cta.has-entered .delivery-cta__courier {
    animation: joulCourierArrivalMobile .72s cubic-bezier(.18,.84,.22,1) .05s both;
  }
  .delivery-cta.has-entered .delivery-cta__smoke {
    animation: joulCourierSmokeMobile .78s ease-out .12s both;
  }
}

@keyframes joulCourierArrivalMobile {
  0% { opacity: 0; transform: translate3d(-32%, 5px, 0) rotate(-1.2deg); }
  72% { opacity: 1; transform: translate3d(1.5%, 0, 0) rotate(.35deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) rotate(0); }
}
@keyframes joulCourierSmokeMobile {
  0% { opacity: 0; transform: translate3d(-15%, 4px, 0) scale(.94); }
  65% { opacity: .75; }
  100% { opacity: .6; transform: translate3d(0, 0, 0) scale(1); }
}

@media (max-width: 430px) {
  .delivery-cta { height: 810px; }
  .delivery-cta__storefront { width: 98%; height: 166px; left: -8%; }
  .delivery-cta__storefront img { width: 84%; }
  .delivery-cta__store-note { width: 98px; top: 15px; right: 1%; }
  .delivery-cta__store-arrow { top: 86px; right: 9%; width: 40px; }
  .delivery-cta__content { top: 116px; width: calc(100% - 18px); }
  .delivery-cta__title { font-size: clamp(36px, 11.2vw, 45px); }
  .delivery-cta__copy { width: 94%; margin-top: 9px; font-size: 11.5px; }
  .delivery-cta__actions { margin-top: 12px; gap: 7px; }
  .delivery-button { min-height: 44px; font-size: 12px; }
  .order-platforms { margin-top: 10px; }
  .order-platforms > p { margin-bottom: 6px; font-size: 10px; }
  .order-platform { min-height: 44px; font-size: clamp(8px, 2.3vw, 9.5px); }
  .delivery-cta__destination { bottom: 20px; width: 66%; height: 250px; }
  .delivery-cta__kapina { left: -55%; top: -3%; width: 86%; }
  .delivery-cta__pin { right: 45%; bottom: 18%; width: 28%; }
  .delivery-cta__chicken { right: -11%; bottom: 4%; width: 61%; }
  .delivery-cta__bucket { right: -1%; bottom: 0; width: 31%; }
  .delivery-cta__route { height: 224px; }
  .delivery-cta__road { bottom: 20px; height: 70px; }
  .delivery-cta__courier { left: -5%; bottom: 32px; width: min(57vw, 225px); }
  .delivery-cta__smoke { left: -16%; bottom: 31px; width: 62%; }
  .delivery-cta__speed { left: 16%; bottom: 37%; width: 34%; }
  .delivery-cta__checker { height: 18px; }
}

@media (max-width: 380px) {
  .delivery-cta { height: 795px; }
  .delivery-cta__storefront { height: 154px; }
  .delivery-cta__store-note { width: 90px; }
  .delivery-cta__store-arrow { top: 79px; width: 37px; }
  .delivery-cta__content { top: 108px; }
  .delivery-cta__eyebrow { font-size: 8.4px; }
  .delivery-cta__title { font-size: 39px; }
  .delivery-cta__copy { font-size: 10.8px; }
  .delivery-button { min-height: 43px; }
  .order-platform { font-size: 8px; }
  .delivery-cta__destination { width: 68%; height: 238px; }
  .delivery-cta__kapina { left: -52%; width: 84%; }
  .delivery-cta__route { height: 212px; }
  .delivery-cta__road { left: -20%; width: 142%; height: 66px; }
  .delivery-cta__courier { width: 57vw; bottom: 30px; }
  .delivery-cta__smoke { bottom: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .delivery-cta.has-entered .delivery-cta__courier,
  .delivery-cta.has-entered .delivery-cta__smoke {
    animation: none !important;
    opacity: 1;
    transform: none;
  }
}

/* V14 visual-QA corrections: remove inherited pseudo inset and refine mobile stack. */
.delivery-cta__storefront::after { top: auto; }

@media (max-width: 767px) {
  .delivery-cta__content { top: 158px; }
  .delivery-cta__destination { width: 63%; height: 258px; bottom: 20px; }
  .delivery-cta__kapina { left: -48%; top: -2%; width: 76%; }
  .delivery-cta__pin { right: 45%; bottom: 18%; width: 30%; }
  .delivery-cta__chicken { right: -10%; bottom: 4%; width: 65%; }
  .delivery-cta__bucket { right: -1%; bottom: 0; width: 35%; }
  .delivery-cta__courier { left: -3%; bottom: 33px; width: min(54vw, 218px); }
  .delivery-cta__smoke { left: -14%; bottom: 33px; width: 58%; }
  .delivery-cta__speed { left: 17%; bottom: 36%; width: 32%; }
}
@media (max-width: 430px) {
  .delivery-cta__content { top: 150px; }
  .delivery-cta__destination { width: 65%; height: 248px; bottom: 18px; }
  .delivery-cta__kapina { left: -47%; width: 75%; }
  .delivery-cta__courier { left: -4%; bottom: 31px; width: min(54vw, 212px); }
  .delivery-cta__smoke { left: -15%; bottom: 31px; width: 59%; }
}
@media (max-width: 380px) {
  .delivery-cta__content { top: 143px; }
  .delivery-cta__destination { width: 67%; height: 236px; }
  .delivery-cta__kapina { left: -46%; width: 74%; }
  .delivery-cta__courier { width: 53vw; bottom: 29px; }
  .delivery-cta__smoke { bottom: 29px; }
}

/* V14 breakpoint QA corrections. */
@media (min-width: 1024px) and (max-width: 1280px) {
  .delivery-cta__destination { right: -8%; width: 29%; top: 24%; }
  .delivery-cta__kapina { left: 0; width: 61%; }
  .delivery-cta__pin { right: 36%; bottom: 17%; width: 30%; }
  .delivery-cta__chicken { right: -11%; width: 72%; }
  .delivery-cta__bucket { right: -4%; width: 38%; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  .delivery-cta__storefront { width: 31%; height: 215px; left: -2%; }
  .delivery-cta__storefront img { width: 108%; }
  .delivery-cta__content { top: 122px; }
}
@media (max-width: 767px) {
  .delivery-cta__content { top: 172px; }
  .delivery-cta__kapina { left: -18%; top: -15%; width: 70%; }
}
@media (max-width: 430px) {
  .delivery-cta__content { top: 165px; }
  .delivery-cta__kapina { left: -17%; top: -14%; width: 69%; }
}
@media (max-width: 380px) {
  .delivery-cta__content { top: 157px; }
  .delivery-cta__kapina { left: -16%; top: -13%; width: 68%; }
}

@media (max-width: 767px) {
  .delivery-cta__storefront::after {
    height: 64%;
    background: linear-gradient(180deg, rgba(255,248,238,0) 0%, rgba(255,248,238,.28) 34%, rgba(255,248,238,.82) 72%, #fff8ee 100%);
  }
}

/* ==========================================================================
   V15 / CTA scene asset integration
   New soft-edge storefront + road/city atmosphere. Footer remains untouched.
   ========================================================================== */
.delivery-cta__horizon { display: none; }
.delivery-cta__storefront::before,
.delivery-cta__storefront::after { display: none !important; }
.delivery-cta__storefront img {
  width: 100%;
  height: auto;
  filter: saturate(1.08) contrast(1.035) brightness(1.015);
}
.delivery-cta__road {
  filter: drop-shadow(0 10px 12px rgba(151,18,9,.06));
}
.delivery-cta__route::before { display: none; }

@media (min-width: 1281px) {
  .delivery-cta {
    height: clamp(565px, 34.2vw, 625px);
  }
  .delivery-cta__storefront {
    left: -2.2%;
    bottom: 18px;
    width: clamp(435px, 30.2vw, 548px);
    filter: drop-shadow(18px 18px 26px rgba(89,25,11,.11));
  }
  .delivery-cta__store-note {
    left: 24.7%;
    top: 7.2%;
  }
  .delivery-cta__store-arrow {
    left: 27.5%;
    top: 19.3%;
  }
  .delivery-cta__route {
    z-index: 6;
    height: 45%;
  }
  .delivery-cta__road {
    z-index: 1;
    left: -1.8%;
    bottom: 24px;
    width: 104%;
    height: clamp(175px, 11.4vw, 205px);
    object-fit: fill;
  }
  .delivery-cta__courier {
    z-index: 6;
    left: 17.1%;
    bottom: 40px;
    width: clamp(290px, 20.4vw, 365px);
  }
  .delivery-cta__smoke {
    z-index: 5;
    left: 8.1%;
    bottom: 38px;
    width: 27%;
  }
  .delivery-cta__speed {
    z-index: 5;
    left: 27.5%;
    bottom: 31%;
    width: clamp(90px, 6.2vw, 112px);
  }
  .delivery-cta__destination {
    right: -1.8%;
    top: 20.5%;
    width: 27.8%;
    height: 76%;
  }
  .delivery-cta__pin {
    right: 37%;
    bottom: 13%;
    width: 27%;
  }
  .delivery-cta__chicken {
    right: -9%;
    bottom: 3%;
    width: 67%;
  }
  .delivery-cta__bucket {
    right: -2.5%;
    bottom: -3%;
    width: 36%;
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .delivery-cta__storefront {
    left: -3.5%;
    bottom: 19px;
    width: 32.5%;
  }
  .delivery-cta__route { height: 44%; }
  .delivery-cta__road {
    left: -3%;
    bottom: 24px;
    width: 106%;
    height: 165px;
    object-fit: fill;
  }
  .delivery-cta__courier { left: 15.7%; bottom: 39px; }
  .delivery-cta__smoke { left: 7%; bottom: 38px; }
  .delivery-cta__speed { left: 25.4%; bottom: 31%; }
  .delivery-cta__destination { right: -7.2%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .delivery-cta__storefront {
    left: -5%;
    top: -9px;
    width: 40%;
    height: 235px;
    overflow: hidden;
  }
  .delivery-cta__storefront img {
    width: 100%;
    transform: translate3d(-1%, -2%, 0) scale(1.02);
    transform-origin: 0 0;
  }
  .delivery-cta__route { height: 32%; }
  .delivery-cta__road {
    left: -9%;
    bottom: 24px;
    width: 119%;
    height: 150px;
    object-fit: fill;
  }
  .delivery-cta__courier { left: 2%; bottom: 39px; }
  .delivery-cta__smoke { left: -8%; bottom: 38px; }
  .delivery-cta__speed { left: 20.5%; bottom: 33%; }
  .delivery-cta__destination { right: -5%; bottom: 28px; }
}

@media (max-width: 767px) {
  .delivery-cta {
    height: clamp(790px, 202vw, 850px);
  }
  .delivery-cta__storefront {
    left: -8%;
    top: -10px;
    width: 88%;
    height: 190px;
    overflow: hidden;
    filter: drop-shadow(8px 10px 16px rgba(89,25,11,.07));
  }
  .delivery-cta__storefront img {
    width: 73%;
    transform: translate3d(0, -2%, 0) scale(1.03);
    transform-origin: 0 0;
  }
  .delivery-cta__content { top: 166px; }
  .delivery-cta__route {
    height: 230px;
  }
  .delivery-cta__road {
    z-index: 1;
    left: -18%;
    bottom: 21px;
    width: 140%;
    height: 136px;
    object-fit: fill;
  }
  .delivery-cta__courier {
    z-index: 6;
    left: -3%;
    bottom: 33px;
    width: min(54vw, 218px);
  }
  .delivery-cta__smoke {
    z-index: 5;
    left: -14%;
    bottom: 32px;
    width: 58%;
  }
  .delivery-cta__speed {
    z-index: 5;
    left: 17%;
    bottom: 40%;
    width: 31%;
  }
  .delivery-cta__destination {
    z-index: 8;
    right: -7%;
    bottom: 21px;
    width: 63%;
    height: 258px;
  }
  .delivery-cta__kapina {
    left: -18%;
    top: -15%;
    width: 70%;
  }
  .delivery-cta__pin { right: 45%; bottom: 19%; width: 29%; }
  .delivery-cta__chicken { right: -10%; bottom: 4%; width: 63%; }
  .delivery-cta__bucket { right: -1%; bottom: 0; width: 34%; }
}

@media (max-width: 430px) {
  .delivery-cta { height: 810px; }
  .delivery-cta__storefront {
    left: -9%;
    width: 92%;
    height: 180px;
  }
  .delivery-cta__storefront img { width: 75%; }
  .delivery-cta__content { top: 160px; }
  .delivery-cta__route { height: 220px; }
  .delivery-cta__road {
    left: -20%;
    bottom: 18px;
    width: 144%;
    height: 126px;
  }
  .delivery-cta__destination { bottom: 18px; width: 65%; height: 248px; }
  .delivery-cta__courier { left: -4%; bottom: 30px; width: min(54vw, 212px); }
  .delivery-cta__smoke { left: -15%; bottom: 30px; width: 59%; }
  .delivery-cta__speed { left: 16%; bottom: 41%; width: 31%; }
}

@media (max-width: 380px) {
  .delivery-cta { height: 790px; }
  .delivery-cta__storefront { height: 169px; }
  .delivery-cta__content { top: 151px; }
  .delivery-cta__route { height: 210px; }
  .delivery-cta__road { height: 118px; }
  .delivery-cta__courier { width: 53vw; bottom: 28px; }
  .delivery-cta__smoke { bottom: 28px; }
}

/* V15 final visual-QA corrections. */
@media (min-width: 1024px) and (max-width: 1280px) {
  .delivery-cta__store-note,
  .delivery-cta__store-arrow { display: none; }
}

@media (max-width: 767px) {
  .delivery-cta__storefront {
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,.86) 66%, rgba(0,0,0,.42) 82%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 54%, rgba(0,0,0,.86) 66%, rgba(0,0,0,.42) 82%, transparent 100%);
  }
  .delivery-cta__courier {
    left: 1%;
    width: min(51vw, 205px);
  }
  .delivery-cta__smoke {
    left: -10%;
    width: 54%;
  }
  .delivery-cta__speed { left: 19%; }
}

@media (max-width: 430px) {
  .delivery-cta__courier { left: 1%; width: min(51vw, 200px); }
  .delivery-cta__smoke { left: -11%; width: 55%; }
}

@media (max-width: 380px) {
  .delivery-cta__courier { left: 0; width: 50vw; }
}

/* ========================================================================== 
   V16 / CTA scale rebalance
   V15 scene composition is preserved; only visual weight is restored.
   Footer remains untouched.
   ========================================================================== */
@media (min-width: 1281px) {
  .delivery-cta__content {
    left: 35.7%;
    width: min(36%, 640px);
  }
  .delivery-cta__eyebrow {
    font-size: clamp(12px, .86vw, 15px);
  }
  .delivery-cta__title {
    font-size: clamp(53px, 4.05vw, 73px);
  }
  .delivery-cta__copy {
    width: min(98%, 610px);
    font-size: clamp(14px, 1.02vw, 18px);
  }
  .delivery-button {
    min-width: clamp(195px, 13.7vw, 236px);
    min-height: 57px;
    font-size: 16px;
  }
  .order-platforms > p { font-size: 13.5px; }
  .order-platform { width: clamp(96px, 6.7vw, 116px); min-height: 50px; }
  .delivery-cta__courier {
    left: 16.4%;
    bottom: 38px;
    width: clamp(315px, 22.2vw, 398px);
  }
  .delivery-cta__smoke {
    left: 7.2%;
    bottom: 37px;
    width: 29%;
  }
  .delivery-cta__speed {
    left: 28%;
    width: clamp(96px, 6.7vw, 121px);
  }
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .delivery-cta__title { font-size: 55px; }
  .delivery-cta__copy { font-size: 14px; }
  .delivery-button { min-width: 192px; min-height: 53px; font-size: 15.5px; }
  .order-platform { width: 98px; min-height: 47px; }
  .delivery-cta__courier {
    left: 15%;
    bottom: 37px;
    width: min(27vw, 345px);
  }
  .delivery-cta__smoke { left: 6%; width: 33%; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .delivery-cta__title { font-size: 61px; }
  .delivery-cta__copy { font-size: 14.5px; }
  .delivery-button { min-height: 53px; font-size: 15px; }
  .delivery-cta__courier {
    left: 1.5%;
    width: min(42vw, 380px);
  }
  .delivery-cta__smoke { width: 48%; }
}

@media (max-width: 767px) {
  .delivery-cta__title { font-size: clamp(39px, 11.9vw, 52px); }
  .delivery-cta__copy { font-size: clamp(11.8px, 3.1vw, 13.2px); }
  .delivery-button { min-height: 46px; font-size: 13px; }
  .delivery-cta__courier {
    left: 0;
    width: min(53vw, 214px);
  }
  .delivery-cta__smoke {
    left: -11%;
    width: 56%;
  }
}

@media (max-width: 430px) {
  .delivery-cta__title { font-size: clamp(37px, 11.6vw, 47px); }
  .delivery-cta__courier { left: 0; width: min(53vw, 208px); }
}

@media (max-width: 380px) {
  .delivery-cta__title { font-size: 40px; }
  .delivery-cta__courier { width: 52vw; }
}

/* ========================================================================== 
   V18 / Homepage Joul Hakkında preview
   Reference-led composition using supplied package assets.
   ========================================================================== */
.about-preview {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(760px, 58vw, 980px);
  color: #fff;
  background-color: #1d1d1d;
  background-image: url("../images/about-preview/about-bg-anthracite-texture.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

.about-preview::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(circle at 75% 18%, rgba(255,255,255,.055), transparent 27%),
    linear-gradient(90deg, rgba(0,0,0,.18), rgba(0,0,0,0) 42%, rgba(0,0,0,.08));
}

.about-preview__inner {
  position: relative;
  width: min(100%, 1920px);
  min-height: inherit;
  margin-inline: auto;
}

.about-preview__collage {
  position: absolute;
  z-index: 4;
  left: 0;
  top: 0;
  width: 43%;
  height: 76%;
  pointer-events: none;
}

.about-preview__store-polaroid,
.about-preview__kitchen-polaroid,
.about-preview__chicken-foreground,
.about-preview__handwriting,
.about-preview__checker-paper,
.about-preview__feature-panel {
  display: block;
  max-width: none;
  user-select: none;
  -webkit-user-drag: none;
}

.about-preview__store-polaroid {
  position: absolute;
  left: 2.3%;
  top: 1.2%;
  width: min(31vw, 510px);
  height: auto;
  transform: rotate(-5.6deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(14px 20px 25px rgba(0,0,0,.34));
}

.about-preview__kitchen-polaroid {
  position: absolute;
  z-index: 3;
  left: 32%;
  top: 31%;
  width: min(27vw, 430px);
  height: auto;
  transform: rotate(4.9deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(12px 18px 24px rgba(0,0,0,.32));
}

.about-preview__chicken-foreground {
  position: absolute;
  z-index: 5;
  left: -7.5%;
  bottom: -25%;
  width: min(37vw, 610px);
  height: auto;
  filter: drop-shadow(8px 18px 22px rgba(0,0,0,.28));
}

.about-preview__content {
  position: absolute;
  z-index: 8;
  left: 45.3%;
  top: 10.7%;
  width: min(42.8%, 720px);
}

.about-preview__eyebrow {
  margin: 0 0 13px;
  color: var(--joul-red);
  font-size: clamp(12px, .9vw, 15px);
  font-weight: 800;
  letter-spacing: .39em;
  text-transform: uppercase;
}

.about-preview__title {
  display: grid;
  width: max-content;
  max-width: 100%;
  margin: 0;
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(55px, 4.6vw, 78px);
  font-weight: 900;
  line-height: .97;
  letter-spacing: -.055em;
}

.about-preview__title span,
.about-preview__title strong {
  display: block;
}

.about-preview__title span { color: #fff; }
.about-preview__title strong { color: var(--joul-red); }

.about-preview__title strong::after {
  content: "";
  display: inline-block;
  width: .52em;
  height: .42em;
  margin-left: .16em;
  background:
    linear-gradient(var(--joul-red),var(--joul-red)) 0 75%/70% 11% no-repeat,
    linear-gradient(var(--joul-red),var(--joul-red)) 80% 26%/53% 11% no-repeat;
  transform: rotate(-23deg) translateY(-.05em);
  transform-origin: center;
}

.about-preview__copy {
  width: min(100%, 690px);
  margin-top: clamp(20px, 1.7vw, 28px);
  color: rgba(255,255,255,.9);
  font-size: clamp(15px, 1.12vw, 19px);
  font-weight: 450;
  line-height: 1.55;
}

.about-preview__copy p { margin: 0; }
.about-preview__copy p + p { margin-top: 14px; }
.about-preview__copy strong { color: #fff; font-weight: 800; }

.about-preview__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  min-width: 266px;
  min-height: 58px;
  margin-top: 24px;
  padding: 0 26px 0 30px;
  border-radius: 999px;
  background: linear-gradient(135deg, var(--joul-red) 0%, var(--joul-red) 100%);
  color: #fff;
  box-shadow: 0 14px 28px rgba(var(--joul-red-rgb),.24), inset 0 1px 0 rgba(255,255,255,.16);
  font-size: 17px;
  font-weight: 800;
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}

.about-preview__button:hover {
  transform: translateY(-2px);
  background: linear-gradient(135deg, var(--joul-red) 0%, #e20613 100%);
  box-shadow: 0 18px 34px rgba(var(--joul-red-rgb),.3), inset 0 1px 0 rgba(255,255,255,.18);
}

.about-preview__handwriting--top {
  position: absolute;
  z-index: 7;
  right: 6.8%;
  top: 4.3%;
  width: clamp(110px, 9.7vw, 160px);
  height: auto;
  transform: rotate(2deg);
  pointer-events: none;
}

.about-preview__features {
  position: absolute;
  z-index: 9;
  left: 22.2%;
  right: 13.1%;
  bottom: 2.7%;
  min-height: clamp(205px, 15.8vw, 272px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  align-items: center;
  padding: clamp(32px, 2.55vw, 46px) clamp(45px, 4.7vw, 84px) clamp(26px, 2.1vw, 38px);
}

.about-preview__feature-panel {
  position: absolute;
  z-index: -1;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: drop-shadow(0 13px 28px rgba(0,0,0,.3));
}

.about-preview__feature {
  position: relative;
  min-width: 0;
  padding: 0 clamp(14px, 1.7vw, 30px);
  text-align: center;
}

.about-preview__feature + .about-preview__feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12%;
  bottom: 6%;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgba(255,255,255,.13) 18%, rgba(255,255,255,.13) 82%, transparent);
}

.about-preview__feature-icon {
  width: clamp(36px, 2.8vw, 48px);
  height: auto;
  margin: 0 auto 13px;
  fill: none;
  stroke: var(--joul-red);
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.about-preview__feature h3 {
  margin: 0;
  color: #fff;
  font-size: clamp(17px, 1.25vw, 21px);
  font-weight: 800;
  line-height: 1.2;
}

.about-preview__feature p {
  max-width: 255px;
  margin: 10px auto 0;
  color: rgba(255,255,255,.82);
  font-size: clamp(13px, .96vw, 16px);
  line-height: 1.43;
}

.about-preview__bottom-decor {
  position: absolute;
  z-index: 6;
  right: -2.5%;
  bottom: -6.2%;
  width: min(31vw, 520px);
  aspect-ratio: 1.64;
  pointer-events: none;
}

.about-preview__checker-paper {
  position: absolute;
  inset: auto 0 0 auto;
  width: 100%;
  height: auto;
}

.about-preview__handwriting--bottom {
  position: absolute;
  z-index: 2;
  right: 7%;
  bottom: 7%;
  width: 46%;
  height: auto;
  transform: rotate(-1deg);
}

@media (min-width: 1024px) and (max-width: 1280px) {
  .about-preview { min-height: 790px; }
  .about-preview__collage { width: 43%; height: 74%; }
  .about-preview__store-polaroid { width: 355px; left: 0; top: 18px; }
  .about-preview__kitchen-polaroid { width: 310px; left: 30%; top: 34%; }
  .about-preview__chicken-foreground { width: 435px; left: -8%; bottom: -21%; }
  .about-preview__content { left: 43.8%; top: 9%; width: 47%; }
  .about-preview__title { font-size: 59px; }
  .about-preview__copy { font-size: 15px; line-height: 1.48; }
  .about-preview__button { min-width: 235px; min-height: 54px; margin-top: 18px; font-size: 15px; }
  .about-preview__handwriting--top { right: 3.5%; width: 116px; }
  .about-preview__features { left: 18%; right: 7%; min-height: 205px; }
  .about-preview__bottom-decor { right: -4%; width: 390px; }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .about-preview {
    min-height: 1010px;
    background-position: 56% center;
  }
  .about-preview__content {
    left: 42%;
    top: 6%;
    width: 53%;
  }
  .about-preview__eyebrow { font-size: 11px; }
  .about-preview__title { font-size: clamp(48px, 6.3vw, 62px); }
  .about-preview__copy { font-size: 14px; line-height: 1.47; }
  .about-preview__button { min-width: 220px; min-height: 50px; font-size: 14px; margin-top: 18px; }
  .about-preview__collage { width: 46%; height: 66%; }
  .about-preview__store-polaroid { left: -5%; top: 6%; width: min(38vw, 340px); }
  .about-preview__kitchen-polaroid { left: 33%; top: 37%; width: min(34vw, 300px); }
  .about-preview__chicken-foreground { left: -14%; bottom: -12%; width: min(47vw, 410px); }
  .about-preview__handwriting--top { top: 3%; right: 1%; width: 102px; opacity: .82; }
  .about-preview__features {
    left: 6%;
    right: 6%;
    bottom: 3%;
    min-height: 210px;
    padding-inline: 40px;
  }
  .about-preview__feature h3 { font-size: 16px; }
  .about-preview__feature p { font-size: 12.5px; }
  .about-preview__bottom-decor { width: 345px; right: -8%; bottom: -2.5%; opacity: .95; }
}

@media (max-width: 767px) {
  .about-preview {
    min-height: 0;
    padding: 58px 20px 0;
    background-position: 52% top;
    background-size: auto 100%;
  }

  .about-preview__inner {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
  }

  .about-preview__content {
    position: relative;
    z-index: 8;
    order: 1;
    left: auto;
    top: auto;
    width: 100%;
    text-align: left;
  }

  .about-preview__eyebrow {
    margin-bottom: 10px;
    font-size: 11px;
    letter-spacing: .32em;
  }

  .about-preview__title {
    width: auto;
    font-size: clamp(36px, 11vw, 44px);
    line-height: .96;
  }

  .about-preview__copy {
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.52;
  }

  .about-preview__copy p + p { margin-top: 12px; }

  .about-preview__button {
    min-width: 0;
    width: min(100%, 260px);
    min-height: 50px;
    margin-top: 20px;
    padding-inline: 24px;
    font-size: 14px;
  }

  .about-preview__collage {
    position: relative;
    z-index: 5;
    order: 2;
    left: auto;
    top: auto;
    width: 100%;
    height: clamp(380px, 105vw, 470px);
    margin-top: 30px;
  }

  .about-preview__store-polaroid {
    left: -13%;
    top: 0;
    width: min(68vw, 292px);
  }

  .about-preview__kitchen-polaroid {
    left: 39%;
    top: 20%;
    width: min(58vw, 248px);
  }

  .about-preview__chicken-foreground {
    left: -20%;
    bottom: -5%;
    width: min(88vw, 365px);
  }

  .about-preview__handwriting--top {
    z-index: 7;
    right: -3px;
    top: auto;
    bottom: 35%;
    width: 84px;
    opacity: .84;
  }

  .about-preview__features {
    position: relative;
    z-index: 9;
    order: 3;
    left: auto;
    right: auto;
    bottom: auto;
    min-height: 0;
    margin: 12px -6px 0;
    padding: 34px 28px 30px;
    grid-template-columns: 1fr;
    gap: 0;
  }

  .about-preview__feature-panel {
    border-radius: 22px;
    object-fit: cover;
  }

  .about-preview__feature {
    padding: 20px 0;
  }

  .about-preview__feature:first-of-type { padding-top: 4px; }
  .about-preview__feature:last-of-type { padding-bottom: 4px; }

  .about-preview__feature + .about-preview__feature::before {
    left: 15%;
    right: 15%;
    top: 0;
    bottom: auto;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,.13), transparent);
  }

  .about-preview__feature-icon { width: 40px; margin-bottom: 10px; }
  .about-preview__feature h3 { font-size: 17px; }
  .about-preview__feature p { font-size: 13px; margin-top: 7px; }

  .about-preview__bottom-decor {
    position: relative;
    z-index: 6;
    order: 4;
    right: auto;
    bottom: auto;
    align-self: flex-end;
    width: calc(100% + 40px);
    max-width: 420px;
    margin: -4px -20px 0 0;
    aspect-ratio: 1.7;
    opacity: .96;
  }

  .about-preview__handwriting--bottom {
    right: 8%;
    bottom: 10%;
    width: 46%;
  }
}

@media (max-width: 430px) {
  .about-preview { padding-top: 50px; }
  .about-preview__collage { height: 400px; margin-top: 26px; }
  .about-preview__store-polaroid { left: -14%; width: 70vw; }
  .about-preview__kitchen-polaroid { left: 41%; top: 21%; width: 57vw; }
  .about-preview__chicken-foreground { left: -23%; bottom: 0; width: 91vw; }
}

@media (max-width: 380px) {
  .about-preview { padding-inline: 18px; }
  .about-preview__title { font-size: 37px; }
  .about-preview__copy { font-size: 13px; }
  .about-preview__collage { height: 372px; }
  .about-preview__bottom-decor { width: calc(100% + 36px); margin-right: -18px; }
}

@media (prefers-reduced-motion: reduce) {
  .about-preview__button { transition: none !important; }
}

/* V18 QA corrections */
@media (min-width: 768px) and (max-width: 1023px) {
  .about-preview__content { left: 43.5%; width: 52%; }
  .about-preview__collage { width: 42%; }
  .about-preview__store-polaroid { left: -6%; width: min(36vw, 320px); }
  .about-preview__kitchen-polaroid { left: 18%; top: 36%; width: min(28vw, 245px); }
  .about-preview__chicken-foreground { left: -13%; bottom: -10%; width: min(43vw, 375px); }
}

@media (max-width: 767px) {
  .about-preview__handwriting--top { display: none; }
  .about-preview__features {
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 24px;
    background: rgba(20,20,20,.9);
    box-shadow: 0 16px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.035);
  }
  .about-preview__feature-panel {
    opacity: .72;
    object-fit: cover;
  }
}

/* ==========================================================================
   V19 / Featured showcase reference blend + typography breathing room
   Goal: turn the upper featured area into one continuous composition instead
   of a left text block + separate rounded image card.
   ========================================================================== */

@media (min-width: 1024px) {
  .featured-showcase {
    padding-top: 0;
  }

  .featured-showcase__inner {
    width: min(calc(100% - 96px), 1540px);
  }

  .featured-showcase__top {
    position: relative;
    isolation: isolate;
    grid-template-columns: minmax(365px, .74fr) minmax(0, 1.62fr);
    gap: 0;
    min-height: clamp(430px, 30.5vw, 500px);
    align-items: stretch;
  }

  .featured-heading {
    position: relative;
    z-index: 5;
    align-self: stretch;
    max-width: 470px;
    padding: clamp(68px, 5.2vw, 88px) 12px 30px 4px;
  }

  .featured-heading__eyebrow {
    margin-bottom: 12px;
    font-size: clamp(27px, 1.85vw, 34px);
    line-height: 1;
  }

  .featured-heading__title {
    width: max-content;
    max-width: 100%;
    font-size: clamp(72px, 5.55vw, 98px);
    line-height: .84;
    letter-spacing: -.038em;
    transform: rotate(-.7deg);
  }

  .featured-heading__title span,
  .featured-heading__title strong {
    line-height: .84;
  }

  .featured-heading__title strong {
    margin-top: .09em;
    margin-left: -.015em;
    font-size: 1.06em;
    line-height: .82;
    transform: rotate(-1.5deg);
  }

  .featured-heading__underline {
    width: clamp(205px, 16.7vw, 270px);
    margin: 11px 0 0 clamp(95px, 7.5vw, 126px);
  }

  .featured-heading__copy {
    max-width: 455px;
    margin-top: 24px;
    font-size: clamp(17px, 1.15vw, 20px);
    line-height: 1.5;
  }

  .featured-hero {
    position: relative;
    z-index: 2;
    width: calc(100% + clamp(90px, 7vw, 125px));
    min-height: 100%;
    margin-left: calc(-1 * clamp(90px, 7vw, 125px));
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: hidden;
  }

  .featured-hero::before {
    background:
      linear-gradient(180deg, rgba(255,255,255,.015), transparent 22%),
      linear-gradient(90deg, transparent 0%, rgba(0,0,0,.025) 20%, transparent 43%, transparent 82%, rgba(0,0,0,.10));
    pointer-events: none;
  }

  .featured-hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0 auto 0 0;
    width: 31%;
    pointer-events: none;
    background: linear-gradient(90deg,
      #fff8ee 0%,
      rgba(255,248,238,.98) 14%,
      rgba(255,248,238,.80) 36%,
      rgba(255,248,238,.40) 61%,
      rgba(255,248,238,.10) 84%,
      rgba(255,248,238,0) 100%);
  }

  .featured-hero__backdrop {
    inset: 0;
    -webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 7%, #000 25%, #000 100%);
    mask-image: linear-gradient(90deg, transparent 0%, rgba(0,0,0,.14) 7%, #000 25%, #000 100%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    background-position: center center;
  }

  .featured-hero__backdrop::before {
    background:
      radial-gradient(ellipse at 58% 48%, rgba(var(--joul-red-rgb),.14), transparent 40%),
      linear-gradient(180deg, rgba(0,0,0,.05), transparent 30%, transparent 76%, rgba(0,0,0,.11));
  }

  .featured-hero__halo {
    left: 60%;
    width: 43%;
  }

  .featured-hero__product {
    left: 60.5%;
    bottom: -2%;
    width: clamp(305px, 35.5%, 360px);
  }

  .featured-hero__crumbs {
    left: 60%;
    top: 7%;
    width: min(69%, 675px);
  }

  .featured-hero__steam {
    left: 60%;
    bottom: 45%;
  }

  .featured-hero__steam--two {
    left: 59%;
  }

  .featured-hero__discover {
    z-index: 5;
    left: clamp(108px, 12.5%, 152px);
    top: clamp(50px, 10.5%, 66px);
    width: clamp(135px, 15%, 170px);
  }

  .featured-hero__discover span {
    font-size: clamp(31px, 2.45vw, 42px);
    line-height: .84;
  }

  .featured-hero__badge {
    right: clamp(18px, 2.5%, 30px);
    bottom: clamp(18px, 4%, 30px);
    width: clamp(105px, 12.5%, 138px);
  }

  .featured-hero__burst {
    right: clamp(120px, 15%, 170px);
    top: 41%;
  }

  .featured-hero__cta {
    top: clamp(28px, 5.5%, 42px);
    right: clamp(24px, 3%, 38px);
    min-width: 230px;
    min-height: 58px;
  }

  .featured-cards {
    margin-top: 10px;
    gap: clamp(16px, 1.25vw, 20px);
  }

  .featured-card {
    height: clamp(284px, 18.2vw, 314px);
    border-radius: 18px;
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .featured-showcase__top {
    grid-template-columns: minmax(330px, .72fr) minmax(0, 1.52fr);
    min-height: 420px;
  }

  .featured-heading {
    max-width: 410px;
    padding-top: 58px;
  }

  .featured-heading__title {
    font-size: clamp(62px, 6vw, 77px);
  }

  .featured-heading__copy {
    max-width: 390px;
    font-size: 16px;
  }

  .featured-hero {
    width: calc(100% + 78px);
    margin-left: -78px;
  }

  .featured-hero::after { width: 29%; }
  .featured-hero__product { left: 61%; width: clamp(278px, 37%, 325px); }
  .featured-hero__crumbs { left: 60%; }
  .featured-hero__steam { left: 60%; }
  .featured-hero__discover { left: 86px; }
}

@media (max-width: 1023px) {
  .featured-heading__eyebrow {
    margin-bottom: 10px;
  }

  .featured-heading__title {
    line-height: .82;
    letter-spacing: -.03em;
  }

  .featured-heading__title span,
  .featured-heading__title strong {
    line-height: .82;
  }

  .featured-heading__title strong {
    margin-top: .08em;
  }

  .featured-heading__copy {
    margin-top: 22px;
  }
}

@media (max-width: 767px) {
  .featured-showcase {
    padding-top: 44px;
  }

  .featured-heading__eyebrow {
    margin-bottom: 9px;
  }

  .featured-heading__title {
    width: max-content;
    max-width: 100%;
    font-size: clamp(54px, 16vw, 70px);
    line-height: .83;
  }

  .featured-heading__title strong {
    margin-top: .08em;
    font-size: 1.04em;
    line-height: .82;
  }

  .featured-heading__underline {
    margin-top: 9px;
  }

  .featured-heading__copy {
    margin-top: 20px;
    line-height: 1.5;
  }
}


/* ==========================================================================
   V22 / Featured showcase hard seam fix
   Rollback V20/V21 fade experiments; keep V19 composition and remove the
   clipped overlay boundary that created the visible vertical seam.
   ========================================================================== */
@media (min-width: 1024px) {
  .featured-hero::after {
    content: "";
    position: absolute;
    z-index: 2;
    inset: 0;
    width: auto;
    pointer-events: none;
    border-radius: 0;
    box-shadow: none;
    background:
      radial-gradient(ellipse 35% 126% at 12.5% 50%,
        rgba(255,248,238,.995) 0%,
        rgba(255,248,238,.98) 15%,
        rgba(255,248,238,.90) 31%,
        rgba(255,248,238,.68) 47%,
        rgba(255,248,238,.36) 61%,
        rgba(255,248,238,.12) 72%,
        rgba(255,248,238,0) 82%),
      radial-gradient(ellipse 15% 104% at 99.5% 50%,
        rgba(255,248,238,.05) 0%,
        rgba(255,248,238,.015) 44%,
        rgba(255,248,238,0) 100%);
  }

  .featured-hero__backdrop {
    -webkit-mask-image: radial-gradient(ellipse 40% 160% at 10% 50%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.06) 16%,
      rgba(0,0,0,.28) 31%,
      rgba(0,0,0,.60) 45%,
      rgba(0,0,0,.88) 56%,
      rgba(0,0,0,1) 63%);
    mask-image: radial-gradient(ellipse 40% 160% at 10% 50%,
      rgba(0,0,0,0) 0%,
      rgba(0,0,0,.06) 16%,
      rgba(0,0,0,.28) 31%,
      rgba(0,0,0,.60) 45%,
      rgba(0,0,0,.88) 56%,
      rgba(0,0,0,1) 63%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }
}


/* ==========================================================================
   V25 / Featured showcase unified reference composition
   Rebuild desktop top scene as one composition instead of two visible boxes.
   ========================================================================== */
@media (min-width: 1024px) {
  .featured-showcase {
    padding-top: 0;
  }

  .featured-showcase__inner {
    width: min(calc(100% - 72px), 1540px);
  }

  .featured-showcase__top {
    position: relative;
    display: block;
    min-height: clamp(455px, 31.2vw, 520px);
    isolation: isolate;
    overflow: visible;
  }

  .featured-heading {
    position: relative;
    z-index: 8;
    width: min(35.5%, 500px);
    max-width: 500px;
    padding: clamp(72px, 5.3vw, 90px) 0 28px 4px;
  }

  .featured-heading__eyebrow {
    margin-bottom: 13px;
    font-size: clamp(28px, 1.8vw, 34px);
    line-height: .98;
  }

  .featured-heading__title {
    width: max-content;
    max-width: 100%;
    font-size: clamp(74px, 5.55vw, 98px);
    line-height: .83;
    letter-spacing: -.037em;
    transform: rotate(-.6deg);
  }

  .featured-heading__title span,
  .featured-heading__title strong {
    line-height: .83;
  }

  .featured-heading__title strong {
    margin-top: .085em;
    margin-left: -.012em;
    font-size: 1.06em;
    line-height: .81;
    transform: rotate(-1.35deg);
  }

  .featured-heading__underline {
    width: clamp(210px, 16.6vw, 274px);
    margin: 11px 0 0 clamp(96px, 7.4vw, 124px);
  }

  .featured-heading__copy {
    max-width: 455px;
    margin-top: 25px;
    font-size: clamp(17px, 1.12vw, 20px);
    line-height: 1.5;
  }

  .featured-hero {
    position: absolute;
    z-index: 2;
    inset: 0 0 0 20.5%;
    width: auto;
    min-height: 0;
    margin: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
    isolation: isolate;
  }

  .featured-hero::before,
  .featured-hero::after {
    content: none;
  }

  .featured-hero__backdrop {
    inset: 0;
    overflow: hidden;
    background:
      linear-gradient(180deg, rgba(10,0,0,.025) 0%, rgba(16,0,0,.01) 55%, rgba(16,0,0,.08) 100%),
      url("../images/featured/animation/joul-featured-stage-bg.webp") center center / cover no-repeat;
    -webkit-mask-image: radial-gradient(ellipse 94% 142% at 100% 50%,
      #000 0%,
      #000 67%,
      rgba(0,0,0,.96) 72%,
      rgba(0,0,0,.78) 78%,
      rgba(0,0,0,.48) 84%,
      rgba(0,0,0,.20) 89%,
      rgba(0,0,0,.05) 92%,
      transparent 95%);
    mask-image: radial-gradient(ellipse 94% 142% at 100% 50%,
      #000 0%,
      #000 67%,
      rgba(0,0,0,.96) 72%,
      rgba(0,0,0,.78) 78%,
      rgba(0,0,0,.48) 84%,
      rgba(0,0,0,.20) 89%,
      rgba(0,0,0,.05) 92%,
      transparent 95%);
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
  }

  .featured-hero__backdrop::before {
    inset: 0;
    opacity: 1;
    background:
      radial-gradient(ellipse at 59% 48%, rgba(var(--joul-red-rgb),.13), transparent 39%),
      linear-gradient(180deg, rgba(0,0,0,.05), transparent 29%, transparent 76%, rgba(0,0,0,.11));
    filter: none;
  }

  .featured-hero__halo {
    left: 59.5%;
    bottom: -21%;
    width: 43%;
  }

  .featured-hero__product {
    left: 59.5%;
    bottom: -2%;
    width: clamp(310px, 34%, 362px);
  }

  .featured-hero__crumbs {
    left: 59%;
    top: 7%;
    width: min(68%, 680px);
  }

  .featured-hero__steam {
    left: 59.5%;
    bottom: 45%;
  }

  .featured-hero__steam--two {
    left: 58.5%;
  }

  .featured-hero__discover {
    z-index: 5;
    left: 17.5%;
    top: clamp(49px, 10%, 64px);
    width: clamp(136px, 14.5%, 170px);
  }

  .featured-hero__discover span {
    font-size: clamp(31px, 2.35vw, 42px);
    line-height: .84;
  }

  .featured-hero__badge {
    right: clamp(18px, 2.3%, 30px);
    bottom: clamp(17px, 3.5%, 28px);
    width: clamp(105px, 11.8%, 138px);
  }

  .featured-hero__burst {
    right: clamp(118px, 14.5%, 166px);
    top: 41%;
  }

  .featured-hero__cta {
    top: clamp(28px, 5.3%, 40px);
    right: clamp(24px, 2.9%, 38px);
    min-width: 230px;
    min-height: 58px;
  }

  .featured-cards {
    margin-top: 10px;
    gap: clamp(16px, 1.25vw, 20px);
  }

  .featured-card {
    height: clamp(284px, 18.2vw, 314px);
  }
}

@media (min-width: 1024px) and (max-width: 1279px) {
  .featured-showcase__inner {
    width: calc(100% - 48px);
  }

  .featured-showcase__top {
    min-height: 425px;
  }

  .featured-heading {
    width: 36.5%;
    max-width: 410px;
    padding-top: 58px;
  }

  .featured-heading__title {
    font-size: clamp(62px, 6vw, 77px);
  }

  .featured-heading__copy {
    max-width: 390px;
    font-size: 16px;
  }

  .featured-hero {
    left: 20%;
  }

  .featured-hero__backdrop {
    -webkit-mask-image: radial-gradient(ellipse 96% 142% at 100% 50%,
      #000 0%, #000 64%, rgba(0,0,0,.93) 71%, rgba(0,0,0,.68) 79%, rgba(0,0,0,.34) 86%, rgba(0,0,0,.10) 91%, transparent 95%);
    mask-image: radial-gradient(ellipse 96% 142% at 100% 50%,
      #000 0%, #000 64%, rgba(0,0,0,.93) 71%, rgba(0,0,0,.68) 79%, rgba(0,0,0,.34) 86%, rgba(0,0,0,.10) 91%, transparent 95%);
  }

  .featured-hero__product { left: 60.5%; width: clamp(282px, 36%, 326px); }
  .featured-hero__crumbs { left: 60%; }
  .featured-hero__steam { left: 60%; }
  .featured-hero__discover { left: 17%; }
}

/* V25 final: use physically feathered transparent stage asset; no rectangular fade layer. */
@media (min-width: 1024px) {
  .featured-hero__backdrop {
    background: url("../images/featured/animation/joul-featured-stage-bg-v25.webp") center center / cover no-repeat;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }

  .featured-hero__backdrop::before {
    inset: 0;
    opacity: .76;
    background: radial-gradient(ellipse at 59% 48%, rgba(var(--joul-red-rgb),.12), transparent 40%);
  }
}


/* ========================================================================== */
/* V26 / Marka, ikon, SEO ve medya kalite revizyonu                           */
/* ========================================================================== */
.icon-button .ui-icon { width: 24px; height: 24px; }

.mobile-menu__order {
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  margin: 2px 0 14px;
  padding: 0 18px;
  border-radius: 999px;
  color: #fff;
  background: var(--joul-red);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.mobile-menu__order:hover { color: #fff; transform: translateY(-1px); }
.mobile-menu__close { width: 44px; height: 44px; }

@media (max-width: 900px) {
  .mobile-order {
    min-height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 16px;
    border-radius: 999px;
    color: #fff;
    background: var(--joul-red);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -.01em;
    box-shadow: 0 8px 20px rgba(var(--joul-red-rgb),.18);
  }
  .hero__background { filter: brightness(.68) saturate(.90); }
  .site-header__actions { gap: 7px; }
}

@media (max-width: 600px) {
  .brand { width: 104px; }
  .mobile-order { min-height: 40px; padding-inline: 13px; font-size: 11.5px; }
  .site-footer__logo { width: 138px; }
}

/* ========================================================================== 
   V29 / Menu page hero — layered, responsive, animation-ready
   Reference: references/menu/00-menu-page-reference.png
   ========================================================================== */
.menu-page {
  min-height: 100vh;
  background: #fff8ef;
}

.menu-page .site-header {
  position: relative;
  inset: auto;
  height: 104px;
  background: rgba(255, 251, 245, .98);
  border-bottom: 1px solid rgba(80, 44, 24, .055);
  box-shadow: 0 7px 24px rgba(77, 38, 17, .035);
}

.menu-page .site-header__inner {
  width: min(calc(100% - 72px), 1540px);
  height: 100%;
  grid-template-columns: 205px minmax(500px, 1fr) auto;
  align-items: center;
  gap: clamp(20px, 2.6vw, 46px);
  padding-top: 0;
}

.menu-page .brand {
  width: 164px;
}

.menu-page .site-nav {
  justify-self: center;
  width: auto;
  height: 100%;
  gap: clamp(34px, 3.3vw, 58px);
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

.menu-page .site-nav a {
  position: relative;
  height: 100%;
  display: inline-flex;
  align-items: center;
  color: #211b18;
  font-size: 14px;
  font-weight: 600;
}

.menu-page .site-nav a:hover,
.menu-page .site-nav a.is-current {
  color: var(--joul-red);
  opacity: 1;
  transform: none;
}

.menu-page .site-nav a.is-current::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 18px;
  height: 2px;
  border-radius: 999px;
  background: var(--joul-red);
}

.menu-page .site-header__actions { gap: 14px; }
.menu-page .icon-button {
  width: 44px;
  height: 44px;
  color: #1d1815;
  background: transparent;
  box-shadow: none;
}
.menu-page .icon-button:hover { background: rgba(226,6,19,.055); }
.menu-page .button--header {
  min-width: 166px;
  min-height: 50px;
  padding-inline: 24px;
  gap: 22px;
  font-size: 14px;
}

.menu-page-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 410px;
  height: clamp(410px, 27vw, 520px);
  background: #fff6ea;
}

.menu-page-hero__paper {
  position: absolute;
  inset: 0;
  z-index: -4;
  pointer-events: none;
  background:
    radial-gradient(circle at 76% 22%, rgba(236, 145, 91, .095), transparent 23%),
    radial-gradient(circle at 25% 54%, rgba(255,255,255,.8), transparent 34%),
    linear-gradient(96deg, #fff9f0 0%, #fff6ea 50%, #fff0df 100%);
}
.menu-page-hero__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: .18;
  background-image:
    radial-gradient(circle at 30% 30%, rgba(110,74,50,.17) 0 .7px, transparent .8px),
    radial-gradient(circle at 72% 62%, rgba(110,74,50,.12) 0 .7px, transparent .8px);
  background-size: 11px 11px, 14px 14px;
  mix-blend-mode: multiply;
}

.menu-page-hero__inner {
  position: relative;
  width: min(calc(100% - 64px), 1600px);
  height: 100%;
  margin: 0 auto;
}

.menu-page-hero__content {
  position: absolute;
  z-index: 8;
  left: clamp(112px, 9.4vw, 178px);
  top: 18.5%;
  width: min(43%, 690px);
}

.menu-page-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(23px, 2vw, 34px);
  color: #2a2521;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}
.menu-page-hero__breadcrumb a { transition: color .18s ease; }
.menu-page-hero__breadcrumb a:hover { color: var(--joul-red); }
.menu-page-hero__breadcrumb span[aria-hidden="true"] {
  color: #5c514a;
  font-size: 22px;
  font-weight: 400;
  transform: translateY(-1px);
}

.menu-page-hero__title-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.menu-page-hero h1 {
  margin: 0;
  color: var(--joul-red);
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(86px, 8.1vw, 138px);
  font-weight: 900;
  line-height: .72;
  letter-spacing: -.075em;
}

.menu-page-hero__burst {
  position: absolute;
  left: calc(100% + 16px);
  top: 50%;
  width: 52px;
  height: 72px;
  transform: translateY(-45%);
}
.menu-page-hero__burst i {
  position: absolute;
  left: 0;
  top: 50%;
  width: 35px;
  height: 7px;
  border-radius: 999px;
  background: var(--joul-red);
  transform-origin: left center;
}
.menu-page-hero__burst i:nth-child(1) { transform: rotate(-47deg) translateX(2px); }
.menu-page-hero__burst i:nth-child(2) { transform: rotate(-10deg) translateX(8px); }
.menu-page-hero__burst i:nth-child(3) { transform: rotate(27deg) translateX(5px); }

.menu-page-hero__content > p {
  max-width: 590px;
  margin: 28px 0 0;
  color: #1f1a17;
  font-size: clamp(17px, 1.2vw, 21px);
  font-weight: 600;
  line-height: 1.35;
  letter-spacing: -.02em;
}

.menu-page-hero__note {
  position: absolute;
  z-index: 7;
  left: -5px;
  top: 34%;
  width: clamp(88px, 7.6vw, 122px);
  transform: rotate(-3deg);
  filter: drop-shadow(0 7px 8px rgba(154,32,17,.05));
}
.menu-page-hero__note img { width: 100%; height: auto; }

.menu-page-hero__stage {
  position: absolute;
  z-index: 4;
  top: 0;
  right: -2.5%;
  width: 60%;
  height: 100%;
  pointer-events: none;
}

.menu-page-hero__halo {
  position: absolute;
  left: 46%;
  bottom: -27%;
  width: 64%;
  aspect-ratio: 1.5;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(226,6,19,.10), rgba(218,105,47,.05) 44%, transparent 72%);
  filter: blur(28px);
}

.menu-page-hero__burger,
.menu-page-hero__chicken,
.menu-page-hero__slogan,
.menu-page-hero__stamp,
.menu-page-hero__steam {
  position: absolute;
  max-width: none;
}

.menu-page-hero__burger {
  z-index: 6;
  right: 3%;
  bottom: -4.5%;
  width: clamp(470px, 40.5vw, 675px);
  height: auto;
  filter: drop-shadow(0 21px 26px rgba(98,42,15,.19));
  transform-origin: 55% 100%;
}

.menu-page-hero__chicken {
  z-index: 4;
  right: -10%;
  bottom: -12%;
  width: clamp(220px, 19vw, 335px);
  height: auto;
  filter: drop-shadow(0 16px 20px rgba(116,55,18,.11));
}

.menu-page-hero__slogan {
  z-index: 8;
  left: 4%;
  top: 14%;
  width: clamp(172px, 15vw, 242px);
  height: auto;
  transform: rotate(-2.5deg);
  transform-origin: 55% 65%;
}

.menu-page-hero__stamp {
  z-index: 3;
  right: 0;
  top: 8%;
  width: clamp(110px, 9.3vw, 150px);
  height: auto;
  opacity: .62;
  transform-origin: 50% 50%;
}

.menu-page-hero__steam {
  z-index: 7;
  right: 14%;
  bottom: 48%;
  width: clamp(200px, 18vw, 300px);
  height: auto;
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(.35px) brightness(1.04);
  transform-origin: 50% 100%;
}
.menu-page-hero__steam--two {
  right: 25%;
  bottom: 43%;
  width: clamp(160px, 14.5vw, 235px);
}

.menu-page-hero__checker {
  position: absolute;
  z-index: 2;
  pointer-events: none;
  background-color: rgba(255,247,236,.92);
  background-image:
    linear-gradient(45deg, var(--joul-red) 25%, transparent 25%, transparent 75%, var(--joul-red) 75%),
    linear-gradient(45deg, var(--joul-red) 25%, transparent 25%, transparent 75%, var(--joul-red) 75%);
  background-size: 54px 54px;
  background-position: 0 0, 27px 27px;
}
.menu-page-hero__checker--left {
  left: 0;
  top: 0;
  width: clamp(72px, 6.3vw, 112px);
  height: 100%;
  -webkit-mask-image: linear-gradient(90deg, #000 0 64%, rgba(0,0,0,.9) 72%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0 64%, rgba(0,0,0,.9) 72%, transparent 100%);
}
.menu-page-hero__checker--right {
  right: -12px;
  bottom: -4px;
  width: clamp(180px, 18vw, 320px);
  height: clamp(48px, 4.3vw, 72px);
  background-size: 46px 46px;
  background-position: 0 0, 23px 23px;
  -webkit-mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
  mask-image: linear-gradient(90deg, transparent 0%, #000 24%, #000 100%);
}

/* Progressive-enhancement entrance: every layer stays visible without JS. */
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__checker--left,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__note,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__breadcrumb,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__title-wrap,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__content > p,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__chicken,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__slogan,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__stamp,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__checker--right {
  opacity: 0;
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__checker--left { transform: translate3d(-72px,0,0); }
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__note { transform: translate3d(-40px,10px,0) rotate(-7deg); }
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__breadcrumb,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__title-wrap,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__content > p { transform: translate3d(-34px,12px,0); }
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger { transform: translate3d(150px,8px,0) scale(.975); }
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__chicken { transform: translate3d(100px,18px,0) scale(.97); }
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__slogan { transform: translate3d(18px,-12px,0) scale(.9) rotate(-5deg); }
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__stamp { transform: scale(.84) rotate(-14deg); }
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__checker--right { transform: translate3d(70px,0,0); }

.menu-page-hero.has-entered .menu-page-hero__checker--left { animation: menuHeroLeftChecker .68s var(--ease-out) both; }
.menu-page-hero.has-entered .menu-page-hero__note { animation: menuHeroNote .62s var(--ease-out) .18s both; }
.menu-page-hero.has-entered .menu-page-hero__breadcrumb { animation: menuHeroText .52s var(--ease-out) .20s both; }
.menu-page-hero.has-entered .menu-page-hero__title-wrap { animation: menuHeroText .68s var(--ease-out) .32s both; }
.menu-page-hero.has-entered .menu-page-hero__content > p { animation: menuHeroText .58s var(--ease-out) .48s both; }
.menu-page-hero.has-entered .menu-page-hero__burger { animation: menuHeroBurgerIn 1.02s cubic-bezier(.16,.84,.20,1) .50s both; }
.menu-page-hero.has-entered .menu-page-hero__chicken { animation: menuHeroChickenIn .82s var(--ease-out) .78s both; }
.menu-page-hero.has-entered .menu-page-hero__slogan { animation: menuHeroSloganIn .64s cubic-bezier(.2,.86,.22,1.15) 1.02s both; }
.menu-page-hero.has-entered .menu-page-hero__stamp { animation: menuHeroStampIn .68s var(--ease-out) 1.14s both; }
.menu-page-hero.has-entered .menu-page-hero__checker--right { animation: menuHeroRightChecker .66s var(--ease-out) .96s both; }

.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--one {
  animation: menuHeroSteam 4.5s ease-out 1.48s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--two {
  animation: menuHeroSteamAlt 5.2s ease-out 2.18s infinite;
}

@keyframes menuHeroLeftChecker {
  from { opacity: 0; transform: translate3d(-72px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes menuHeroRightChecker {
  from { opacity: 0; transform: translate3d(70px,0,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes menuHeroNote {
  from { opacity: 0; transform: translate3d(-40px,10px,0) rotate(-7deg); }
  to { opacity: 1; transform: translate3d(0,0,0) rotate(-3deg); }
}
@keyframes menuHeroText {
  from { opacity: 0; transform: translate3d(-34px,12px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes menuHeroBurgerIn {
  0% { opacity: 0; transform: translate3d(150px,8px,0) scale(.975); }
  70% { opacity: 1; transform: translate3d(-5px,0,0) scale(1.005); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes menuHeroChickenIn {
  from { opacity: 0; transform: translate3d(100px,18px,0) scale(.97); }
  to { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes menuHeroSloganIn {
  0% { opacity: 0; transform: translate3d(18px,-12px,0) scale(.9) rotate(-5deg); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1) rotate(-2.5deg); }
}
@keyframes menuHeroStampIn {
  0% { opacity: 0; transform: scale(.84) rotate(-14deg); }
  100% { opacity: .62; transform: scale(1) rotate(0deg); }
}
@keyframes menuHeroSteam {
  0%, 100% { opacity: 0; transform: translate3d(0,22px,0) scale(.93) rotate(-2deg); }
  20% { opacity: .20; }
  55% { opacity: .32; transform: translate3d(-8px,-20px,0) scale(1.015) rotate(1deg); }
  82% { opacity: .13; }
  100% { opacity: 0; transform: translate3d(4px,-62px,0) scale(1.07) rotate(2deg); }
}
@keyframes menuHeroSteamAlt {
  0%, 100% { opacity: 0; transform: translate3d(0,18px,0) scale(.92) rotate(2deg); }
  18% { opacity: .13; }
  52% { opacity: .24; transform: translate3d(10px,-17px,0) scale(1.01) rotate(-2deg); }
  82% { opacity: .09; }
  100% { opacity: 0; transform: translate3d(-2px,-54px,0) scale(1.06) rotate(-1deg); }
}

@media (max-width: 1260px) and (min-width: 901px) {
  .menu-page .site-header__inner { width: calc(100% - 48px); grid-template-columns: 170px 1fr auto; }
  .menu-page .brand { width: 145px; }
  .menu-page .site-nav { gap: 27px; }
  .menu-page .site-nav a { font-size: 13px; }
  .menu-page .button--header { min-width: 150px; padding-inline: 20px; }
  .menu-page-hero__inner { width: calc(100% - 44px); }
  .menu-page-hero__content { left: 102px; width: 45%; }
  .menu-page-hero__note { width: 84px; }
  .menu-page-hero h1 { font-size: clamp(82px, 8.5vw, 112px); }
  .menu-page-hero__stage { right: -5%; width: 61%; }
  .menu-page-hero__burger { width: clamp(430px, 43vw, 560px); }
  .menu-page-hero__slogan { left: 0; top: 13%; width: 178px; }
  .menu-page-hero__stamp { right: 1%; width: 114px; }
}

@media (max-width: 900px) {
  .menu-page .site-header {
    height: 82px;
    background: #fffaf3;
  }
  .menu-page .site-header__inner {
    width: calc(100% - 36px);
    height: 82px;
    grid-template-columns: 1fr auto;
    align-items: center;
    padding-top: 0;
  }
  .menu-page .brand { width: 112px; }
  .menu-page .site-nav { display: none; }
  .menu-page .mobile-order {
    color: #fff;
    background: var(--joul-red);
    border-color: var(--joul-red);
  }
  .menu-page .menu-toggle {
    color: #171310;
    background: #fff0df;
  }
  .menu-page .mobile-menu { top: 82px; }

  .menu-page-hero {
    height: auto;
    min-height: 0;
    padding-top: 0;
  }
  .menu-page-hero__inner {
    width: calc(100% - 36px);
    height: auto;
    min-height: 720px;
    display: flex;
    flex-direction: column;
    padding: 34px 0 0;
  }
  .menu-page-hero__content {
    position: relative;
    inset: auto;
    z-index: 10;
    width: min(100%, 650px);
    padding-left: clamp(46px, 8vw, 68px);
  }
  .menu-page-hero__breadcrumb { margin-bottom: 22px; font-size: 12px; }
  .menu-page-hero h1 { font-size: clamp(74px, 14vw, 112px); line-height: .78; }
  .menu-page-hero__content > p { max-width: 520px; margin-top: 22px; font-size: clamp(16px, 2.4vw, 19px); }
  .menu-page-hero__burst { left: calc(100% + 12px); transform: translateY(-48%) scale(.8); transform-origin: left center; }
  .menu-page-hero__note { left: 0; top: 122px; width: 74px; }

  .menu-page-hero__stage {
    position: relative;
    inset: auto;
    flex: 0 0 auto;
    width: calc(100% + 36px);
    height: 430px;
    margin: 18px -18px 0;
  }
  .menu-page-hero__burger {
    right: 50%;
    bottom: -3%;
    width: min(76vw, 555px);
    transform: translateX(50%);
  }
  .menu-page-hero__chicken { right: -4%; bottom: -7%; width: min(31vw, 240px); }
  .menu-page-hero__slogan { left: 8%; top: 3%; width: min(27vw, 190px); }
  .menu-page-hero__stamp { right: 7%; top: 4%; width: min(17vw, 125px); }
  .menu-page-hero__steam { right: 37%; bottom: 45%; width: min(31vw, 225px); }
  .menu-page-hero__steam--two { right: 48%; bottom: 42%; width: min(24vw, 180px); }
  .menu-page-hero__checker--left { width: 70px; height: 56%; background-size: 42px 42px; background-position: 0 0, 21px 21px; }
  .menu-page-hero__checker--right { width: 200px; height: 52px; background-size: 38px 38px; background-position: 0 0, 19px 19px; }

  .menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger { transform: translate3d(80px,8px,0) translateX(50%) scale(.98); }
  @keyframes menuHeroBurgerIn {
    0% { opacity: 0; transform: translate3d(80px,8px,0) translateX(50%) scale(.98); }
    70% { opacity: 1; transform: translate3d(-4px,0,0) translateX(50%) scale(1.004); }
    100% { opacity: 1; transform: translate3d(0,0,0) translateX(50%) scale(1); }
  }
}

@media (max-width: 600px) {
  .menu-page .site-header { height: 72px; }
  .menu-page .site-header__inner { width: calc(100% - 28px); height: 72px; }
  .menu-page .brand { width: 100px; }
  .menu-page .mobile-menu { top: 72px; }

  .menu-page-hero__inner {
    width: calc(100% - 28px);
    min-height: 620px;
    padding-top: 26px;
  }
  .menu-page-hero__content { padding-left: 25px; }
  .menu-page-hero__breadcrumb { margin-bottom: 18px; font-size: 11px; }
  .menu-page-hero h1 { font-size: clamp(64px, 21vw, 90px); }
  .menu-page-hero__content > p { max-width: 320px; margin-top: 18px; font-size: 15px; line-height: 1.38; }
  .menu-page-hero__burst { left: calc(100% + 8px); top: 51%; transform: translateY(-50%) scale(.62); }
  .menu-page-hero__note { display: none; }
  .menu-page-hero__stage { width: calc(100% + 28px); height: 350px; margin: 12px -14px 0; }
  .menu-page-hero__burger { width: min(101vw, 470px); bottom: -1%; }
  .menu-page-hero__chicken { right: -13%; bottom: -8%; width: 180px; }
  .menu-page-hero__slogan { left: 3%; top: 7%; width: 132px; }
  .menu-page-hero__stamp { right: 2%; top: 4%; width: 88px; opacity: .50; }
  .menu-page-hero__steam { right: 30%; bottom: 45%; width: 170px; }
  .menu-page-hero__steam--two { display: none; }
  .menu-page-hero__checker--left { width: 46px; height: 45%; background-size: 32px 32px; background-position: 0 0, 16px 16px; opacity: .9; }
  .menu-page-hero__checker--right { width: 145px; height: 42px; background-size: 30px 30px; background-position: 0 0, 15px 15px; }
}

@media (max-width: 380px) {
  .menu-page-hero__inner { min-height: 585px; }
  .menu-page-hero__content { padding-left: 20px; }
  .menu-page-hero h1 { font-size: 63px; }
  .menu-page-hero__content > p { max-width: 270px; font-size: 14px; }
  .menu-page-hero__stage { height: 335px; }
  .menu-page-hero__burger { width: 108vw; }
  .menu-page-hero__slogan { width: 118px; }
  .menu-page-hero__stamp { width: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-page-hero .menu-page-hero__checker--left,
  .menu-page-hero .menu-page-hero__note,
  .menu-page-hero .menu-page-hero__breadcrumb,
  .menu-page-hero .menu-page-hero__title-wrap,
  .menu-page-hero .menu-page-hero__content > p,
  .menu-page-hero .menu-page-hero__burger,
  .menu-page-hero .menu-page-hero__chicken,
  .menu-page-hero .menu-page-hero__slogan,
  .menu-page-hero .menu-page-hero__stamp,
  .menu-page-hero .menu-page-hero__checker--right {
    opacity: 1 !important;
    animation: none !important;
  }
  .menu-page-hero .menu-page-hero__steam {
    opacity: .08 !important;
    animation: none !important;
  }
  .menu-page-hero__note { transform: rotate(-3deg) !important; }
  .menu-page-hero__slogan { transform: rotate(-2.5deg) !important; }
  .menu-page-hero__stamp { transform: none !important; }
}

/* V29 mobile hero overlap polish */
@media (max-width: 600px) {
  .menu-page-hero__content { padding-left: 50px; }
  .menu-page-hero__content > p { max-width: 300px; }
  .menu-page-hero__checker--left {
    width: 36px;
    height: 154px;
    opacity: .88;
    background-size: 28px 28px;
    background-position: 0 0, 14px 14px;
  }
  .menu-page-hero__stage {
    height: 330px;
    margin-top: 22px;
  }
  .menu-page-hero__burger {
    width: min(92vw, 395px);
    bottom: 1%;
  }
  .menu-page-hero__chicken { display: none; }
  .menu-page-hero__slogan { left: 6%; top: 5%; width: 122px; }
  .menu-page-hero__stamp { right: 4%; top: 2%; width: 78px; }
  .menu-page-hero__steam { right: 31%; bottom: 47%; width: 150px; }
}

@media (max-width: 380px) {
  .menu-page-hero__content { padding-left: 42px; }
  .menu-page-hero__content > p { max-width: 270px; }
  .menu-page-hero__stage { height: 315px; }
  .menu-page-hero__burger { width: 94vw; }
  .menu-page-hero__slogan { width: 112px; }
}

/* Light hero smoke needs normal compositing; the same steam assets were tuned for the dark homepage stage. */
.menu-page-hero__steam {
  mix-blend-mode: normal;
  filter: blur(.35px) saturate(.55) brightness(1.18);
}

/* =========================================================
   V30 — MENU HERO / compact premium art direction
   ========================================================= */
.menu-page-hero {
  min-height: 276px;
  height: clamp(276px, 18.7vw, 310px);
  background: #fff5e9;
  border-bottom: 1px solid rgba(97, 59, 31, .055);
}

.menu-page-hero__paper {
  inset: 0;
  background: url("../images/menu/hero/menu-hero-premium-bg.webp") center center / cover no-repeat;
}
.menu-page-hero__paper::after {
  opacity: 0;
  background: none;
}

/* Checker detayları artık özel hero arkaplanına işlendi. */
.menu-page-hero__checker { display: none; }

.menu-page-hero__inner {
  width: min(calc(100% - 72px), 1540px);
}

.menu-page-hero__content {
  left: clamp(88px, 7.2vw, 124px);
  top: 15.5%;
  width: min(43%, 610px);
}

.menu-page-hero__breadcrumb {
  gap: 8px;
  margin-bottom: clamp(17px, 1.35vw, 22px);
  font-size: 12px;
  font-weight: 600;
}
.menu-page-hero__breadcrumb span[aria-hidden="true"] { font-size: 18px; }

.menu-page-hero h1 {
  font-size: clamp(68px, 5.2vw, 88px);
  line-height: .76;
  letter-spacing: -.07em;
}

.menu-page-hero__burst {
  left: calc(100% + 12px);
  width: 42px;
  height: 50px;
}
.menu-page-hero__burst i {
  width: 29px;
  height: 6px;
}

.menu-page-hero__content > p {
  max-width: 520px;
  margin-top: 20px;
  font-size: clamp(15px, 1.02vw, 18px);
  line-height: 1.34;
}

.menu-page-hero__note {
  left: 14px;
  top: auto;
  bottom: 18%;
  width: clamp(60px, 4.8vw, 76px);
  opacity: .9;
  transform: rotate(-4deg);
  filter: drop-shadow(0 7px 10px rgba(154,32,17,.035));
}

.menu-page-hero__stage {
  top: 0;
  right: 1%;
  width: 53%;
  height: 100%;
}

.menu-page-hero__halo {
  left: 41%;
  bottom: -45%;
  width: 58%;
  background: radial-gradient(ellipse, rgba(226,6,19,.08), rgba(218,105,47,.04) 44%, transparent 72%);
  filter: blur(32px);
}

.menu-page-hero__burger {
  right: 16%;
  bottom: -4.5%;
  width: clamp(305px, 23vw, 385px);
  filter: drop-shadow(0 17px 23px rgba(98,42,15,.16));
}

.menu-page-hero__slogan {
  left: 6%;
  top: 19%;
  width: clamp(108px, 8.7vw, 142px);
  opacity: .96;
}

.menu-page-hero__stamp-wrap {
  position: absolute;
  z-index: 7;
  right: 2.5%;
  top: 17%;
  width: clamp(76px, 6.6vw, 98px);
  aspect-ratio: 323 / 300;
  transform-origin: 50% 50%;
}
.menu-page-hero__stamp {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  opacity: .68;
  transform: none;
  transform-origin: 50% 50%;
}

.menu-page-hero__steam {
  right: 32%;
  bottom: 50%;
  width: clamp(116px, 9vw, 150px);
  filter: blur(.45px) brightness(1.02);
}
.menu-page-hero__steam--two {
  right: 40%;
  bottom: 46%;
  width: clamp(94px, 7.6vw, 126px);
}

/* V30 entrance sırası: içerik -> slogan -> burger -> dönen damga -> duman. */
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__stamp {
  opacity: .68;
  transform: none;
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__stamp-wrap {
  opacity: 0;
  transform: scale(.82) rotate(-10deg);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger {
  transform: translate3d(110px, 8px, 0) scale(.98);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__note {
  transform: translate3d(-24px, 6px, 0) rotate(-7deg);
}

.menu-page-hero.has-entered .menu-page-hero__burger {
  animation: menuHeroBurgerInV30 .92s cubic-bezier(.16,.84,.20,1) .42s both;
}
.menu-page-hero.has-entered .menu-page-hero__slogan {
  animation: menuHeroSloganIn .58s cubic-bezier(.2,.86,.22,1.15) .72s both;
}
.menu-page-hero.has-entered .menu-page-hero__stamp-wrap {
  animation: menuHeroStampWrapIn .55s cubic-bezier(.2,.86,.22,1.12) .88s both;
}
.menu-page-hero.has-entered .menu-page-hero__stamp {
  animation: menuHeroStampSpin 15s linear 1.42s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--one {
  animation: menuHeroSteam 4.7s ease-out 1.18s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--two {
  animation: menuHeroSteamAlt 5.4s ease-out 1.78s infinite;
}

@keyframes menuHeroBurgerInV30 {
  0% { opacity: 0; transform: translate3d(110px,8px,0) scale(.98); }
  72% { opacity: 1; transform: translate3d(-4px,0,0) scale(1.004); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes menuHeroStampWrapIn {
  0% { opacity: 0; transform: scale(.82) rotate(-10deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes menuHeroStampSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1260px) and (min-width: 901px) {
  .menu-page-hero { height: clamp(268px, 21vw, 290px); min-height: 268px; }
  .menu-page-hero__inner { width: calc(100% - 46px); }
  .menu-page-hero__content { left: 84px; width: 44%; top: 16%; }
  .menu-page-hero__note { left: 4px; width: 58px; }
  .menu-page-hero h1 { font-size: clamp(70px, 7vw, 88px); }
  .menu-page-hero__stage { right: -1%; width: 55%; }
  .menu-page-hero__burger { right: 13%; width: clamp(275px, 26vw, 330px); }
  .menu-page-hero__slogan { left: 2%; top: 17%; width: 118px; }
  .menu-page-hero__stamp-wrap { right: 1%; width: 82px; }
}

@media (max-width: 900px) {
  .menu-page-hero {
    height: 382px;
    min-height: 382px;
    padding: 0;
  }
  .menu-page-hero__paper { background-position: 43% center; }
  .menu-page-hero__inner {
    width: calc(100% - 32px);
    height: 100%;
    min-height: 0;
    display: block;
    padding: 0;
  }
  .menu-page-hero__content {
    position: absolute;
    left: 18px;
    top: 32px;
    width: calc(100% - 36px);
    padding: 0;
  }
  .menu-page-hero__breadcrumb { margin-bottom: 18px; font-size: 11px; }
  .menu-page-hero h1 { font-size: clamp(62px, 16vw, 82px); line-height: .78; }
  .menu-page-hero__content > p {
    max-width: min(72%, 340px);
    margin-top: 16px;
    font-size: 15px;
  }
  .menu-page-hero__burst {
    left: calc(100% + 9px);
    transform: translateY(-48%) scale(.7);
  }
  .menu-page-hero__note { display: none; }

  .menu-page-hero__stage {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
  }
  .menu-page-hero__burger {
    right: -26px;
    bottom: -6px;
    width: min(60vw, 270px);
    transform: none;
  }
  .menu-page-hero__slogan {
    left: 18px;
    top: auto;
    bottom: 66px;
    width: min(29vw, 118px);
  }
  .menu-page-hero__stamp-wrap {
    right: 12px;
    top: 33px;
    width: 70px;
  }
  .menu-page-hero__steam { right: 18%; bottom: 37%; width: 120px; }
  .menu-page-hero__steam--two { right: 34%; bottom: 34%; width: 96px; }

  .menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger {
    transform: translate3d(70px,8px,0) scale(.98);
  }
  @keyframes menuHeroBurgerInV30 {
    0% { opacity: 0; transform: translate3d(70px,8px,0) scale(.98); }
    72% { opacity: 1; transform: translate3d(-3px,0,0) scale(1.003); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  }
}

@media (max-width: 520px) {
  .menu-page-hero { height: 352px; min-height: 352px; }
  .menu-page-hero__content { left: 12px; top: 26px; width: calc(100% - 24px); }
  .menu-page-hero__breadcrumb { margin-bottom: 15px; }
  .menu-page-hero h1 { font-size: clamp(58px, 17vw, 72px); }
  .menu-page-hero__content > p { max-width: 68%; margin-top: 13px; font-size: 14px; line-height: 1.35; }
  .menu-page-hero__burger { right: -10px; bottom: 0; width: min(61vw, 238px); }
  .menu-page-hero__slogan { left: 10px; bottom: 42px; width: 86px; }
  .menu-page-hero__stamp-wrap { right: 4px; top: 24px; width: 62px; }
  .menu-page-hero__steam { right: 10%; bottom: 31%; width: 92px; }
  .menu-page-hero__steam--two { right: 27%; bottom: 29%; width: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-page-hero__stamp { animation: none !important; }
}

/* =========================================================
   V31 — MENU HERO / reference-matched layered premium scene
   Background and product scene are prepared as separate web assets so
   the product, stamp and steam can animate independently.
   ========================================================= */
.menu-page-hero {
  height: clamp(345px, 19.4vw, 388px);
  min-height: 345px;
  overflow: hidden;
  background: #f7eadc;
  border-bottom: 1px solid rgba(104, 61, 25, .06);
}
.menu-page-hero__paper {
  inset: 0;
  background: url("../images/menu/hero/menu-hero-reference-bg-v31.webp") center center / 100% 100% no-repeat;
}
.menu-page-hero__inner {
  width: min(100%, 2048px);
  height: 100%;
}
.menu-page-hero__content {
  left: clamp(248px, 14.45vw, 300px);
  top: 14.5%;
  width: min(44%, 700px);
  padding: 0;
  z-index: 9;
}
.menu-page-hero__breadcrumb {
  margin-bottom: clamp(18px, 1.25vw, 25px);
  font-size: clamp(12px, .72vw, 14px);
  font-weight: 600;
  color: #2a2623;
}
.menu-page-hero h1 {
  font-size: clamp(86px, 5.55vw, 112px);
  line-height: .78;
  letter-spacing: -.072em;
}
.menu-page-hero__burst {
  left: calc(100% + 15px);
  width: 50px;
  height: 58px;
}
.menu-page-hero__burst i {
  width: 34px;
  height: 7px;
}
.menu-page-hero__content > p {
  max-width: 650px;
  margin-top: 22px;
  font-size: clamp(16px, 1.02vw, 20px);
  line-height: 1.25;
  font-weight: 600;
  letter-spacing: -.018em;
}
.menu-page-hero__script {
  display: block;
  width: clamp(145px, 10.2vw, 194px);
  height: auto;
  margin-top: 14px;
  margin-left: 5px;
  object-fit: contain;
  filter: drop-shadow(0 5px 8px rgba(181, 30, 21, .035));
  transform: rotate(-3deg);
}
.menu-page-hero__note,
.menu-page-hero__slogan,
.menu-page-hero__burger { display: none !important; }

.menu-page-hero__stage {
  position: absolute;
  top: 0;
  right: 0;
  width: 57%;
  height: 100%;
  margin: 0;
  z-index: 5;
}
.menu-page-hero__halo {
  left: 29%;
  bottom: -22%;
  width: 62%;
  height: 58%;
  opacity: .75;
  background: radial-gradient(ellipse, rgba(113, 55, 21, .14) 0%, rgba(208, 113, 49, .05) 44%, transparent 72%);
  filter: blur(30px);
}
.menu-page-hero__product {
  position: absolute;
  z-index: 5;
  right: -1.5%;
  bottom: -5px;
  width: clamp(650px, 42vw, 820px);
  height: auto;
  object-fit: contain;
  pointer-events: none;
  transform-origin: 58% 82%;
  filter: drop-shadow(0 13px 16px rgba(86, 42, 19, .055));
}
.menu-page-hero__leaf {
  position: absolute;
  z-index: 4;
  left: 4.5%;
  top: 25%;
  width: clamp(74px, 5.7vw, 108px);
  height: auto;
  opacity: .82;
  filter: blur(.2px) drop-shadow(0 9px 9px rgba(38, 54, 17, .08));
  transform: rotate(-8deg);
}
.menu-page-hero__stamp-wrap {
  right: 14%;
  top: 14%;
  width: clamp(104px, 7.3vw, 138px);
  aspect-ratio: 282 / 278;
  z-index: 8;
}
.menu-page-hero__stamp {
  width: 100%;
  height: auto;
  opacity: .72;
  filter: saturate(.96) contrast(.98);
}
.menu-page-hero__steam {
  z-index: 7;
  right: 31.5%;
  bottom: 52%;
  width: clamp(126px, 8.4vw, 158px);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(.55px) saturate(.25) brightness(1.3);
}
.menu-page-hero__steam--two {
  right: 38.5%;
  bottom: 48%;
  width: clamp(98px, 6.8vw, 128px);
}

/* Layered entrance: copy -> handwritten accent -> product scene -> stamp -> steam. */
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__breadcrumb,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__title-wrap,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__content > p,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__script {
  opacity: 0;
  transform: translate3d(0, 13px, 0);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__script {
  transform: translate3d(-10px, 18px, 0) rotate(-7deg);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__product {
  opacity: 0;
  transform: translate3d(86px, 7px, 0) scale(.965);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__leaf {
  opacity: 0;
  transform: translate3d(35px, -18px, 0) rotate(8deg) scale(.86);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__stamp-wrap {
  opacity: 0;
  transform: scale(.82) rotate(-14deg);
}
.menu-page-hero.has-entered .menu-page-hero__breadcrumb {
  animation: menuHeroCopyInV31 .45s ease-out .06s both;
}
.menu-page-hero.has-entered .menu-page-hero__title-wrap {
  animation: menuHeroCopyInV31 .58s cubic-bezier(.16,.84,.2,1) .13s both;
}
.menu-page-hero.has-entered .menu-page-hero__content > p {
  animation: menuHeroCopyInV31 .48s ease-out .25s both;
}
.menu-page-hero.has-entered .menu-page-hero__script {
  animation: menuHeroScriptInV31 .62s cubic-bezier(.16,.84,.2,1.08) .36s both;
}
.menu-page-hero.has-entered .menu-page-hero__leaf {
  animation: menuHeroLeafInV31 .72s cubic-bezier(.16,.84,.2,1.08) .42s both,
             menuHeroLeafFloatV31 5.6s ease-in-out 1.2s infinite;
}
.menu-page-hero.has-entered .menu-page-hero__product {
  animation: menuHeroProductInV31 .92s cubic-bezier(.14,.86,.18,1) .43s both;
}
.menu-page-hero.has-entered .menu-page-hero__stamp-wrap {
  animation: menuHeroStampWrapIn .58s cubic-bezier(.2,.86,.22,1.12) 1.03s both;
}
.menu-page-hero.has-entered .menu-page-hero__stamp {
  animation: menuHeroStampSpin 16s linear 1.55s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--one {
  animation: menuHeroSteam 4.8s ease-out 1.12s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--two {
  animation: menuHeroSteamAlt 5.5s ease-out 1.68s infinite;
}
@keyframes menuHeroCopyInV31 {
  from { opacity: 0; transform: translate3d(0,13px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes menuHeroScriptInV31 {
  from { opacity: 0; transform: translate3d(-10px,18px,0) rotate(-7deg); }
  to { opacity: 1; transform: translate3d(0,0,0) rotate(-3deg); }
}
@keyframes menuHeroProductInV31 {
  0% { opacity: 0; transform: translate3d(86px,7px,0) scale(.965); }
  72% { opacity: 1; transform: translate3d(-5px,0,0) scale(1.004); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes menuHeroLeafInV31 {
  from { opacity: 0; transform: translate3d(35px,-18px,0) rotate(8deg) scale(.86); }
  to { opacity: .82; transform: translate3d(0,0,0) rotate(-8deg) scale(1); }
}
@keyframes menuHeroLeafFloatV31 {
  0%,100% { transform: translate3d(0,0,0) rotate(-8deg); }
  50% { transform: translate3d(-7px,8px,0) rotate(-3deg); }
}

@media (max-width: 1500px) and (min-width: 901px) {
  .menu-page-hero { height: clamp(325px, 20.5vw, 356px); min-height: 325px; }
  .menu-page-hero__content { left: clamp(170px, 10.5vw, 220px); top: 15%; width: 46%; }
  .menu-page-hero h1 { font-size: clamp(78px, 6.1vw, 96px); }
  .menu-page-hero__content > p { font-size: clamp(15px, 1.05vw, 17px); margin-top: 19px; }
  .menu-page-hero__script { width: clamp(132px, 10vw, 160px); margin-top: 10px; }
  .menu-page-hero__stage { width: 59%; }
  .menu-page-hero__product { right: -5%; width: clamp(560px, 45vw, 690px); }
  .menu-page-hero__stamp-wrap { right: 11%; top: 15%; width: 100px; }
  .menu-page-hero__leaf { left: 3%; width: 78px; }
  .menu-page-hero__steam { right: 30%; bottom: 50%; width: 126px; }
  .menu-page-hero__steam--two { right: 38%; width: 102px; }
}

@media (max-width: 900px) {
  .menu-page-hero {
    height: 400px;
    min-height: 400px;
  }
  .menu-page-hero__paper {
    background-size: auto 100%;
    background-position: 42% center;
  }
  .menu-page-hero__inner { width: 100%; }
  .menu-page-hero__content {
    left: 28px;
    top: 30px;
    width: calc(100% - 56px);
    z-index: 10;
  }
  .menu-page-hero__breadcrumb { margin-bottom: 17px; font-size: 11px; }
  .menu-page-hero h1 { font-size: clamp(64px, 16.5vw, 82px); }
  .menu-page-hero__content > p {
    max-width: min(72%, 360px);
    margin-top: 15px;
    font-size: 14px;
    line-height: 1.32;
  }
  .menu-page-hero__script { width: 94px; margin-top: 10px; }
  .menu-page-hero__stage { width: 100%; }
  .menu-page-hero__product {
    right: -104px;
    bottom: -4px;
    width: min(122vw, 500px);
  }
  .menu-page-hero__leaf { display: none; }
  .menu-page-hero__stamp-wrap { right: 12px; top: 29px; width: 70px; }
  .menu-page-hero__steam { right: 12%; bottom: 31%; width: 94px; }
  .menu-page-hero__steam--two { right: 27%; bottom: 29%; width: 76px; }
  .menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__product {
    transform: translate3d(62px,6px,0) scale(.97);
  }
  @keyframes menuHeroProductInV31 {
    0% { opacity: 0; transform: translate3d(62px,6px,0) scale(.97); }
    72% { opacity: 1; transform: translate3d(-3px,0,0) scale(1.003); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  }
}

@media (max-width: 520px) {
  .menu-page-hero { height: 372px; min-height: 372px; }
  .menu-page-hero__content { left: 18px; top: 24px; width: calc(100% - 36px); }
  .menu-page-hero__breadcrumb { margin-bottom: 14px; }
  .menu-page-hero h1 { font-size: clamp(58px, 17vw, 70px); }
  .menu-page-hero__content > p { max-width: 67%; font-size: 13.5px; margin-top: 12px; }
  .menu-page-hero__script { width: 82px; margin-top: 8px; }
  .menu-page-hero__product { right: -90px; bottom: -1px; width: min(128vw, 470px); }
  .menu-page-hero__stamp-wrap { right: 6px; top: 24px; width: 61px; }
  .menu-page-hero__steam { right: 7%; bottom: 29%; width: 82px; }
  .menu-page-hero__steam--two { right: 24%; bottom: 27%; width: 66px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-page-hero__product,
  .menu-page-hero__leaf,
  .menu-page-hero__script,
  .menu-page-hero__stamp,
  .menu-page-hero__stamp-wrap,
  .menu-page-hero__steam { animation: none !important; }
}

/* V31 cleanup: no duplicate floating leaf; the reference product scene already contains the leaf accent. */
.menu-page-hero__leaf{display:none!important;}

/* =========================================================
   V32 — MENU HERO / premium background + fully separated motion layers
   Burger, Always Joul stamp and right chicken buckets are independent
   assets so each can animate without dragging the scene with it.
   ========================================================= */
.menu-page-hero {
  height: clamp(360px, 23vw, 430px);
  min-height: 360px;
  overflow: hidden;
  background: #f7eadc;
  border-bottom: 1px solid rgba(104,61,25,.065);
}
.menu-page-hero__paper {
  inset: 0;
  background: url("../images/menu/hero/menu-hero-premium-bg-v32.webp") center center / cover no-repeat;
}
.menu-page-hero__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,249,241,.09) 0%, transparent 43%, rgba(112,52,22,.025) 100%),
    radial-gradient(circle at 68% 42%, rgba(255,255,255,.12), transparent 30%);
}
.menu-page-hero__inner {
  width: min(100%, 2048px);
  height: 100%;
}
.menu-page-hero__content {
  left: clamp(246px, 14.2vw, 296px);
  top: 13.5%;
  width: min(43%, 690px);
  padding: 0;
  z-index: 12;
}
.menu-page-hero__breadcrumb {
  margin-bottom: clamp(18px, 1.15vw, 24px);
  font-size: clamp(12px, .72vw, 14px);
}
.menu-page-hero h1 {
  font-size: clamp(84px, 5.45vw, 108px);
  line-height: .79;
  letter-spacing: -.071em;
}
/* User-requested cleanup: no burst/three lines to the right of Menü. */
.menu-page-hero__burst { display: none !important; }
.menu-page-hero__content > p {
  max-width: 640px;
  margin-top: 22px;
  font-size: clamp(16px, 1vw, 19px);
  line-height: 1.28;
}
.menu-page-hero__script {
  width: clamp(142px, 9.5vw, 184px);
  margin-top: 13px;
  margin-left: 6px;
}

/* The left checker remains crisp while the new photographic background supplies depth. */
.menu-page-hero__checker { display: block !important; }
.menu-page-hero__checker--left {
  left: 0;
  top: 0;
  width: clamp(82px, 6.4vw, 120px);
  height: 100%;
  opacity: .96;
  background-color: rgba(255,246,234,.96);
  background-size: 58px 58px;
  background-position: 0 0, 29px 29px;
  -webkit-mask-image: linear-gradient(90deg,#000 0 66%,rgba(0,0,0,.78) 78%,transparent 100%);
  mask-image: linear-gradient(90deg,#000 0 66%,rgba(0,0,0,.78) 78%,transparent 100%);
}
.menu-page-hero__checker--right { display: none !important; }

/* One light leaf in the center, as requested. */
.menu-page-hero__leaf {
  display: block !important;
  position: absolute;
  z-index: 6;
  left: 55.2%;
  top: 31%;
  width: clamp(48px, 3.8vw, 70px);
  height: auto;
  opacity: .58;
  filter: blur(.15px) drop-shadow(0 8px 9px rgba(39,58,19,.08));
  transform: rotate(-15deg);
  pointer-events: none;
}

.menu-page-hero__stage {
  position: absolute;
  inset: 0 0 0 auto;
  width: 60%;
  height: 100%;
  z-index: 5;
  pointer-events: none;
}
.menu-page-hero__halo {
  left: 24%;
  bottom: -34%;
  width: 58%;
  height: 66%;
  opacity: .66;
  background: radial-gradient(ellipse,rgba(110,52,22,.13),rgba(213,119,50,.045) 48%,transparent 72%);
  filter: blur(31px);
}

/* Minimal stone/paper base stays static; the burger itself is fully separate. */
.menu-page-hero__plinth {
  position: absolute;
  z-index: 3;
  left: 19%;
  bottom: 5.5%;
  width: clamp(390px, 31vw, 535px);
  height: clamp(42px, 3.5vw, 58px);
  border: 1px solid rgba(111,71,42,.13);
  border-radius: 9px 12px 15px 10px;
  background: linear-gradient(180deg,#f7efe5 0%,#eadac7 76%,#d8c2a9 100%);
  box-shadow: 0 18px 26px rgba(87,48,24,.13), inset 0 1px 0 rgba(255,255,255,.8);
  transform: perspective(700px) rotateX(56deg) rotateZ(-1.25deg);
  transform-origin: 50% 100%;
}
.menu-page-hero__paper-strip {
  position: absolute;
  left: 6%;
  right: 6%;
  top: -10px;
  height: 24px;
  opacity: .92;
  transform: rotate(.8deg);
  background-color: #fff7ec;
  background-image:
    linear-gradient(45deg, rgba(226,6,19,.88) 25%, transparent 25%, transparent 75%, rgba(226,6,19,.88) 75%),
    linear-gradient(45deg, rgba(226,6,19,.88) 25%, transparent 25%, transparent 75%, rgba(226,6,19,.88) 75%);
  background-size: 24px 24px;
  background-position: 0 0, 12px 12px;
  -webkit-mask-image: linear-gradient(90deg,transparent 0,#000 9%,#000 92%,transparent 100%);
  mask-image: linear-gradient(90deg,transparent 0,#000 9%,#000 92%,transparent 100%);
}

/* Burger is deliberately shifted left compared with V31. */
.menu-page-hero__burger {
  display: block !important;
  position: absolute;
  z-index: 8;
  left: 14.5%;
  right: auto;
  bottom: 5.5%;
  width: clamp(410px, 32vw, 555px);
  height: auto;
  object-fit: contain;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 17px 19px rgba(84,41,17,.16));
}

.menu-page-hero__stamp-wrap {
  position: absolute;
  z-index: 7;
  right: 14.8%;
  top: 18%;
  width: clamp(95px, 7vw, 132px);
  aspect-ratio: 282 / 278;
  transform-origin: 50% 50%;
}
.menu-page-hero__stamp {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  height: auto;
  opacity: .64;
  filter: saturate(.90) contrast(.98);
  transform-origin: 50% 50%;
}

/* Two independent right-side buckets: clipped softly by the viewport like the reference. */
.menu-page-hero__bucket-wrap {
  position: absolute;
  z-index: 4;
  right: -5.5%;
  display: block;
  transform-origin: 50% 100%;
}
.menu-page-hero__bucket-wrap--back {
  top: 9%;
  width: clamp(118px, 9.2vw, 170px);
  opacity: .68;
  filter: blur(.55px) saturate(.92);
}
.menu-page-hero__bucket-wrap--front {
  right: -9.5%;
  bottom: -31%;
  width: clamp(195px, 15vw, 270px);
  opacity: .88;
  filter: blur(.25px) saturate(.98);
}
.menu-page-hero__bucket {
  display: block;
  width: 100%;
  height: auto;
}

.menu-page-hero__steam {
  z-index: 10;
  right: auto;
  left: 35.2%;
  bottom: 51%;
  width: clamp(120px, 8.7vw, 165px);
  opacity: 0;
  mix-blend-mode: screen;
  filter: blur(.5px) saturate(.25) brightness(1.28);
}
.menu-page-hero__steam--two {
  left: 43%;
  right: auto;
  bottom: 47%;
  width: clamp(92px, 6.6vw, 126px);
}

/* V32 entrance order: copy -> leaf -> burger -> buckets -> rotating stamp -> steam. */
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__breadcrumb,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__title-wrap,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__content > p,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__script,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__leaf,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__stamp-wrap,
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__bucket-wrap {
  opacity: 0;
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger {
  transform: translate3d(120px,8px,0) scale(.97);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__leaf {
  transform: translate3d(24px,-18px,0) rotate(5deg) scale(.84);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__bucket-wrap--back {
  transform: translate3d(88px,-5px,0) rotate(3deg) scale(.96);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__bucket-wrap--front {
  transform: translate3d(110px,12px,0) rotate(4deg) scale(.96);
}
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__stamp-wrap {
  transform: scale(.82) rotate(-13deg);
}

.menu-page-hero.has-entered .menu-page-hero__breadcrumb { animation: menuHeroCopyInV32 .42s ease-out .05s both; }
.menu-page-hero.has-entered .menu-page-hero__title-wrap { animation: menuHeroCopyInV32 .55s cubic-bezier(.16,.84,.2,1) .12s both; }
.menu-page-hero.has-entered .menu-page-hero__content > p { animation: menuHeroCopyInV32 .46s ease-out .22s both; }
.menu-page-hero.has-entered .menu-page-hero__script { animation: menuHeroScriptInV32 .58s cubic-bezier(.16,.84,.2,1.08) .32s both; }
.menu-page-hero.has-entered .menu-page-hero__leaf { animation: menuHeroLeafInV32 .72s cubic-bezier(.16,.84,.2,1.08) .38s both; }
.menu-page-hero.has-entered .menu-page-hero__burger { animation: menuHeroBurgerInV32 .94s cubic-bezier(.14,.86,.18,1) .42s both; }
.menu-page-hero.has-entered .menu-page-hero__bucket-wrap--back { animation: menuHeroBucketBackInV32 .70s cubic-bezier(.16,.84,.2,1) .72s both; }
.menu-page-hero.has-entered .menu-page-hero__bucket-wrap--front { animation: menuHeroBucketFrontInV32 .78s cubic-bezier(.16,.84,.2,1) .84s both; }
.menu-page-hero.has-entered .menu-page-hero__stamp-wrap { animation: menuHeroStampWrapInV32 .56s cubic-bezier(.2,.86,.22,1.12) .96s both; }
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__stamp { animation: menuHeroStampSpinV32 17s linear 1.42s infinite; }
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__leaf { animation: menuHeroLeafInV32 .72s cubic-bezier(.16,.84,.2,1.08) .38s both, menuHeroLeafFloatV32 5.8s ease-in-out 1.18s infinite; }
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__bucket-wrap--back .menu-page-hero__bucket { animation: menuHeroBucketFloatV32 5.4s ease-in-out 1.7s infinite; }
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__bucket-wrap--front .menu-page-hero__bucket { animation: menuHeroBucketFloatV32 6.1s ease-in-out 2.05s infinite reverse; }
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--one { animation: menuHeroSteam 4.8s ease-out 1.12s infinite; }
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--two { animation: menuHeroSteamAlt 5.5s ease-out 1.70s infinite; }

@keyframes menuHeroCopyInV32 {
  from { opacity: 0; transform: translate3d(0,13px,0); }
  to { opacity: 1; transform: translate3d(0,0,0); }
}
@keyframes menuHeroScriptInV32 {
  from { opacity: 0; transform: translate3d(-8px,15px,0) rotate(-6deg); }
  to { opacity: 1; transform: translate3d(0,0,0) rotate(-3deg); }
}
@keyframes menuHeroBurgerInV32 {
  0% { opacity: 0; transform: translate3d(120px,8px,0) scale(.97); }
  73% { opacity: 1; transform: translate3d(-6px,0,0) scale(1.006); }
  100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
}
@keyframes menuHeroLeafInV32 {
  from { opacity: 0; transform: translate3d(24px,-18px,0) rotate(5deg) scale(.84); }
  to { opacity: .58; transform: translate3d(0,0,0) rotate(-15deg) scale(1); }
}
@keyframes menuHeroLeafFloatV32 {
  0%,100% { transform: translate3d(0,0,0) rotate(-15deg); }
  50% { transform: translate3d(-8px,9px,0) rotate(-8deg); }
}
@keyframes menuHeroBucketBackInV32 {
  from { opacity: 0; transform: translate3d(88px,-5px,0) rotate(3deg) scale(.96); }
  to { opacity: .68; transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
@keyframes menuHeroBucketFrontInV32 {
  from { opacity: 0; transform: translate3d(110px,12px,0) rotate(4deg) scale(.96); }
  to { opacity: .88; transform: translate3d(0,0,0) rotate(0deg) scale(1); }
}
@keyframes menuHeroBucketFloatV32 {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(-3px,-6px,0) rotate(-.8deg); }
}
@keyframes menuHeroStampWrapInV32 {
  from { opacity: 0; transform: scale(.82) rotate(-13deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes menuHeroStampSpinV32 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1500px) and (min-width: 901px) {
  .menu-page-hero { height: clamp(340px, 23vw, 390px); min-height: 340px; }
  .menu-page-hero__content { left: clamp(170px, 10.5vw, 220px); top: 14.5%; width: 45%; }
  .menu-page-hero h1 { font-size: clamp(78px, 6vw, 94px); }
  .menu-page-hero__content > p { font-size: clamp(15px,1.04vw,17px); margin-top: 19px; }
  .menu-page-hero__script { width: clamp(128px,9.7vw,156px); margin-top: 10px; }
  .menu-page-hero__stage { width: 60%; }
  .menu-page-hero__burger { left: 12%; width: clamp(370px,32vw,470px); }
  .menu-page-hero__plinth { left: 16%; width: clamp(355px,30vw,455px); }
  .menu-page-hero__stamp-wrap { right: 13%; width: 96px; }
  .menu-page-hero__leaf { left: 53.5%; width: 54px; }
  .menu-page-hero__bucket-wrap--back { right: -7%; width: 124px; }
  .menu-page-hero__bucket-wrap--front { right: -12%; width: 205px; }
  .menu-page-hero__steam { left: 33%; width: 126px; }
  .menu-page-hero__steam--two { left: 41%; width: 100px; }
}

@media (max-width: 900px) {
  .menu-page-hero { height: 410px; min-height: 410px; }
  .menu-page-hero__paper { background-position: 49% center; }
  .menu-page-hero__inner { width: 100%; }
  .menu-page-hero__content { left: 28px; top: 28px; width: calc(100% - 56px); }
  .menu-page-hero__breadcrumb { margin-bottom: 16px; font-size: 11px; }
  .menu-page-hero h1 { font-size: clamp(62px,16vw,82px); }
  .menu-page-hero__content > p { max-width: min(72%,360px); margin-top: 14px; font-size: 14px; }
  .menu-page-hero__script { width: 92px; margin-top: 9px; }
  .menu-page-hero__stage { width: 100%; }
  .menu-page-hero__burger { left: auto; right: 12%; bottom: 3%; width: min(56vw,285px); }
  .menu-page-hero__plinth { left: auto; right: 6%; bottom: 3.5%; width: min(58vw,300px); height: 38px; }
  .menu-page-hero__stamp-wrap { right: 5.5%; top: 25%; width: 66px; }
  .menu-page-hero__leaf { left: 57%; top: 38%; width: 40px; opacity: .45; }
  .menu-page-hero__bucket-wrap--back { right: -12%; top: 17%; width: 88px; }
  .menu-page-hero__bucket-wrap--front { right: -18%; bottom: -23%; width: 142px; }
  .menu-page-hero__steam { left: auto; right: 22%; bottom: 36%; width: 94px; }
  .menu-page-hero__steam--two { left: auto; right: 34%; bottom: 33%; width: 72px; }
  .menu-page-hero__checker--left { width: 54px; background-size: 38px 38px; background-position: 0 0,19px 19px; }
  .menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__burger { transform: translate3d(72px,6px,0) scale(.97); }
  @keyframes menuHeroBurgerInV32 {
    0% { opacity: 0; transform: translate3d(72px,6px,0) scale(.97); }
    73% { opacity: 1; transform: translate3d(-3px,0,0) scale(1.004); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  }
}

@media (max-width: 520px) {
  .menu-page-hero { height: 374px; min-height: 374px; }
  .menu-page-hero__content { left: 18px; top: 23px; width: calc(100% - 36px); }
  .menu-page-hero__breadcrumb { margin-bottom: 13px; }
  .menu-page-hero h1 { font-size: clamp(56px,17vw,69px); }
  .menu-page-hero__content > p { max-width: 66%; margin-top: 11px; font-size: 13.5px; line-height: 1.34; }
  .menu-page-hero__script { width: 80px; margin-top: 7px; }
  .menu-page-hero__burger { right: 10%; bottom: 2%; width: min(59vw,230px); }
  .menu-page-hero__plinth { right: 3%; bottom: 2.5%; width: min(62vw,245px); height: 32px; }
  .menu-page-hero__stamp-wrap { right: 3%; top: 27%; width: 56px; }
  .menu-page-hero__leaf { left: 56%; top: 41%; width: 34px; }
  .menu-page-hero__bucket-wrap--back { right: -17%; top: 19%; width: 74px; }
  .menu-page-hero__bucket-wrap--front { right: -23%; bottom: -19%; width: 118px; }
  .menu-page-hero__steam { right: 21%; bottom: 34%; width: 80px; }
  .menu-page-hero__steam--two { right: 33%; bottom: 32%; width: 62px; }
  .menu-page-hero__checker--left { width: 40px; background-size: 30px 30px; background-position: 0 0,15px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-page-hero__burger,
  .menu-page-hero__leaf,
  .menu-page-hero__stamp,
  .menu-page-hero__stamp-wrap,
  .menu-page-hero__bucket-wrap,
  .menu-page-hero__bucket,
  .menu-page-hero__steam,
  .menu-page-hero__script { animation: none !important; }
  .menu-page-hero__burger { opacity: 1 !important; transform: none !important; }
  .menu-page-hero__leaf { opacity: .58 !important; transform: rotate(-15deg) !important; }
  .menu-page-hero__stamp-wrap { opacity: 1 !important; transform: none !important; }
  .menu-page-hero__bucket-wrap--back { opacity: .68 !important; transform: none !important; }
  .menu-page-hero__bucket-wrap--front { opacity: .88 !important; transform: none !important; }
  .menu-page-hero__steam { opacity: .07 !important; }
}

/* =========================================================
   V34 — MENU HERO / final layered scene
   One photographic background + independent burger/plate,
   rotating Always Joul badge, chicken-bucket group and steam.
   ========================================================= */
.menu-page-hero {
  height: clamp(350px, 22vw, 410px);
  min-height: 430px;
  overflow: hidden;
  background: #f5e5d4;
  border-bottom: 1px solid rgba(95,55,27,.06);
}
.menu-page-hero__paper {
  inset: 0;
  z-index: -3;
  background: url("../images/menu/hero/menu-hero-bg-v34.webp") center 58% / cover no-repeat;
}
.menu-page-hero__paper::after {
  content: "";
  position: absolute;
  inset: 0;
  opacity: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,249,241,.16) 0%, rgba(255,249,241,.06) 38%, transparent 57%, rgba(91,45,18,.025) 100%),
    radial-gradient(circle at 34% 42%, rgba(255,255,255,.10), transparent 34%);
}
.menu-page-hero__checker,
.menu-page-hero__leaf,
.menu-page-hero__halo,
.menu-page-hero__plinth,
.menu-page-hero__paper-strip {
  display: none !important;
}
.menu-page-hero__inner {
  width: min(100%, 2048px);
  height: 100%;
  margin: 0 auto;
}
.menu-page-hero__content {
  left: clamp(172px, 14.8vw, 300px);
  top: 14.5%;
  width: min(40%, 650px);
  padding: 0;
  z-index: 15;
}
.menu-page-hero__breadcrumb {
  margin-bottom: clamp(17px, 1.08vw, 22px);
  font-size: clamp(12px, .72vw, 14px);
}
.menu-page-hero h1 {
  font-size: clamp(78px, 5.15vw, 102px);
  line-height: .82;
  letter-spacing: -.068em;
}
.menu-page-hero__burst { display: none !important; }
.menu-page-hero__content > p {
  max-width: 610px;
  margin-top: 21px;
  font-size: clamp(15.5px, .96vw, 18.5px);
  line-height: 1.3;
}
.menu-page-hero__script {
  width: clamp(128px, 8.7vw, 170px);
  height: auto;
  margin-top: 11px;
  margin-left: 4px;
  transform: rotate(-3deg);
  transform-origin: 35% 50%;
}
.menu-page-hero__stage {
  position: absolute;
  inset: 0 0 0 auto;
  width: 58%;
  height: 100%;
  z-index: 7;
  pointer-events: none;
}
.menu-page-hero__burger {
  display: block !important;
  position: absolute;
  z-index: 9;
  left: 14%;
  right: auto;
  bottom: -3.5%;
  width: clamp(405px, 29vw, 555px);
  max-width: none;
  height: auto;
  object-fit: contain;
  transform-origin: 50% 92%;
  filter: drop-shadow(0 16px 22px rgba(91,47,20,.16));
}
.menu-page-hero__stamp-wrap {
  position: absolute;
  z-index: 8;
  right: 16.5%;
  top: 16%;
  width: clamp(90px, 6.7vw, 125px);
  aspect-ratio: 520 / 510;
  transform-origin: 50% 50%;
}
.menu-page-hero__stamp {
  position: relative;
  inset: auto;
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
  opacity: .60;
  filter: saturate(.9) contrast(.97);
  transform-origin: 50% 50%;
}
.menu-page-hero__bucket-wrap {
  position: absolute;
  display: block;
  pointer-events: none;
}
.menu-page-hero__bucket-wrap--group {
  z-index: 6;
  right: -4.5%;
  bottom: -16%;
  width: clamp(220px, 17vw, 315px);
  opacity: .86;
  filter: blur(.12px) saturate(.96);
  transform-origin: 55% 100%;
}
.menu-page-hero__bucket {
  display: block;
  width: 100%;
  max-width: none;
  height: auto;
}
.menu-page-hero__steam {
  position: absolute;
  z-index: 10;
  right: auto;
  left: 32.5%;
  bottom: 48%;
  width: clamp(115px, 8vw, 155px);
  height: auto;
  opacity: 0;
  max-width: none;
  mix-blend-mode: screen;
  filter: blur(.55px) saturate(.22) brightness(1.25);
  transform-origin: 50% 100%;
}
.menu-page-hero__steam--two {
  left: 42%;
  right: auto;
  bottom: 44%;
  width: clamp(88px, 6.2vw, 120px);
}

/* V34 entrance order: copy -> burger -> bucket group -> badge -> steam. */
.menu-page-hero.is-scene-ready:not(.has-entered) .menu-page-hero__bucket-wrap--group {
  opacity: 0;
  transform: translate3d(120px, 9px, 0) rotate(3deg) scale(.97);
}
.menu-page-hero.has-entered .menu-page-hero__burger {
  animation: menuHeroBurgerInV34 .96s cubic-bezier(.14,.86,.18,1) .40s both;
}
.menu-page-hero.has-entered .menu-page-hero__bucket-wrap--group {
  animation: menuHeroBucketsInV34 .80s cubic-bezier(.16,.84,.2,1) .72s both;
}
.menu-page-hero.has-entered .menu-page-hero__stamp-wrap {
  animation: menuHeroStampWrapInV34 .58s cubic-bezier(.2,.86,.22,1.12) .92s both;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__stamp {
  animation: menuHeroStampSpinV34 17s linear 1.45s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__bucket-wrap--group .menu-page-hero__bucket {
  animation: menuHeroBucketsFloatV34 6s ease-in-out 1.70s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--one {
  animation: menuHeroSteam 4.8s ease-out 1.18s infinite;
}
.menu-page-hero.has-entered.is-scene-active .menu-page-hero__steam--two {
  animation: menuHeroSteamAlt 5.5s ease-out 1.74s infinite;
}
@keyframes menuHeroBurgerInV34 {
  0% { opacity: 0; transform: translate3d(130px, 12px, 0) scale(.965); }
  72% { opacity: 1; transform: translate3d(-7px, 0, 0) scale(1.007); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes menuHeroBucketsInV34 {
  0% { opacity: 0; transform: translate3d(120px, 9px, 0) rotate(3deg) scale(.97); }
  100% { opacity: .86; transform: translate3d(0, 0, 0) rotate(0) scale(1); }
}
@keyframes menuHeroBucketsFloatV34 {
  0%,100% { transform: translate3d(0,0,0) rotate(0deg); }
  50% { transform: translate3d(-4px,-5px,0) rotate(-.55deg); }
}
@keyframes menuHeroStampWrapInV34 {
  from { opacity: 0; transform: scale(.82) rotate(-13deg); }
  to { opacity: 1; transform: scale(1) rotate(0deg); }
}
@keyframes menuHeroStampSpinV34 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

@media (max-width: 1500px) and (min-width: 901px) {
  .menu-page-hero { height: clamp(335px, 22.5vw, 380px); min-height: 335px; }
  .menu-page-hero__paper { background-position: center 58%; }
  .menu-page-hero__content { left: clamp(155px, 10.8vw, 205px); top: 14.5%; width: 43%; }
  .menu-page-hero h1 { font-size: clamp(72px, 5.9vw, 90px); }
  .menu-page-hero__content > p { margin-top: 18px; font-size: clamp(15px,1.04vw,17px); }
  .menu-page-hero__script { width: clamp(118px,9.2vw,148px); margin-top: 9px; }
  .menu-page-hero__stage { width: 59%; }
  .menu-page-hero__burger { left: 12.5%; bottom: -4%; width: clamp(355px,29.5vw,450px); }
  .menu-page-hero__stamp-wrap { right: 16%; top: 15%; width: 88px; }
  .menu-page-hero__bucket-wrap--group { right: -6%; bottom: -18%; width: clamp(190px,16.5vw,250px); }
  .menu-page-hero__steam { left: 31%; bottom: 47%; width: 116px; }
  .menu-page-hero__steam--two { left: 41%; bottom: 43%; width: 90px; }
}

@media (max-width: 900px) {
  .menu-page-hero { height: 410px; min-height: 410px; }
  .menu-page-hero__paper { background-position: 45% center; }
  .menu-page-hero__content { left: 26px; top: 27px; width: calc(100% - 52px); }
  .menu-page-hero__breadcrumb { margin-bottom: 15px; font-size: 11px; }
  .menu-page-hero h1 { font-size: clamp(60px,15.5vw,80px); }
  .menu-page-hero__content > p { max-width: min(70%,350px); margin-top: 13px; font-size: 14px; }
  .menu-page-hero__script { width: 90px; margin-top: 8px; }
  .menu-page-hero__stage { width: 100%; }
  .menu-page-hero__burger { left: auto; right: 12%; bottom: -1%; width: min(58vw,285px); }
  .menu-page-hero__stamp-wrap { right: 5%; top: 47%; width: 65px; }
  .menu-page-hero__bucket-wrap--group { right: -17%; bottom: -8%; width: min(34vw,165px); opacity: .72; }
  .menu-page-hero__steam { left: auto; right: 24%; bottom: 34%; width: 86px; }
  .menu-page-hero__steam--two { left: auto; right: 35%; bottom: 31%; width: 66px; }
  @keyframes menuHeroBurgerInV34 {
    0% { opacity: 0; transform: translate3d(74px,8px,0) scale(.97); }
    72% { opacity: 1; transform: translate3d(-3px,0,0) scale(1.004); }
    100% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
  }
}

@media (max-width: 520px) {
  .menu-page-hero { height: 382px; min-height: 382px; }
  .menu-page-hero__paper { background-position: 42% center; }
  .menu-page-hero__content { left: 18px; top: 22px; width: calc(100% - 36px); }
  .menu-page-hero__breadcrumb { margin-bottom: 12px; }
  .menu-page-hero h1 { font-size: clamp(54px,16.8vw,68px); }
  .menu-page-hero__content > p { max-width: 67%; margin-top: 10px; font-size: 13.25px; line-height: 1.33; }
  .menu-page-hero__script { width: 78px; margin-top: 6px; }
  .menu-page-hero__burger { right: 9%; bottom: 0; width: min(61vw,235px); }
  .menu-page-hero__stamp-wrap { right: 2.5%; top: 48%; width: 54px; }
  .menu-page-hero__bucket-wrap--group { right: -21%; bottom: -3%; width: min(36vw,138px); opacity: .68; }
  .menu-page-hero__steam { right: 21%; bottom: 31%; width: 75px; }
  .menu-page-hero__steam--two { right: 33%; bottom: 29%; width: 58px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-page-hero__burger,
  .menu-page-hero__stamp,
  .menu-page-hero__stamp-wrap,
  .menu-page-hero__bucket-wrap--group,
  .menu-page-hero__bucket,
  .menu-page-hero__steam,
  .menu-page-hero__script { animation: none !important; }
  .menu-page-hero__burger { opacity: 1 !important; transform: none !important; }
  .menu-page-hero__stamp-wrap { opacity: 1 !important; transform: none !important; }
  .menu-page-hero__bucket-wrap--group { opacity: .86 !important; transform: none !important; }
  .menu-page-hero__steam { opacity: .06 !important; }
}

/* =========================================================
   V35 / MENU CATALOG
   Brief: search + category filters + 3/2/1 responsive grid.
   ========================================================= */
.menu-catalog {
  position: relative;
  z-index: 4;
  padding: clamp(28px, 3.4vw, 54px) 0 clamp(72px, 7vw, 118px);
  background:
    radial-gradient(circle at 9% 13%, rgba(226,6,19,.035), transparent 26%),
    linear-gradient(180deg, #fffaf3 0%, #fff8ef 100%);
  border-top: 1px solid rgba(34,23,15,.07);
}

.menu-catalog__inner {
  width: min(calc(100% - 48px), 1320px);
  margin: 0 auto;
}

.menu-catalog__toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto minmax(170px, 210px);
  align-items: center;
  gap: 18px;
}

.menu-catalog__search {
  min-width: 0;
  height: 54px;
  display: grid;
  grid-template-columns: 26px minmax(0, 1fr) 36px;
  align-items: center;
  gap: 9px;
  padding: 0 12px 0 16px;
  border: 1px solid rgba(27,20,15,.12);
  border-radius: 15px;
  background: rgba(255,255,255,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.72), 0 8px 24px rgba(41,27,15,.025);
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.menu-catalog__search:focus-within {
  border-color: rgba(var(--joul-red-rgb),.45);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(var(--joul-red-rgb),.07);
}

.menu-catalog__search-icon {
  width: 18px;
  height: 18px;
  position: relative;
  display: block;
}
.menu-catalog__search-icon::before {
  content: "";
  position: absolute;
  left: 1px;
  top: 1px;
  width: 10px;
  height: 10px;
  border: 2px solid #1c1a18;
  border-radius: 50%;
}
.menu-catalog__search-icon::after {
  content: "";
  position: absolute;
  width: 7px;
  height: 2px;
  right: 0;
  bottom: 2px;
  border-radius: 99px;
  background: #1c1a18;
  transform: rotate(45deg);
  transform-origin: right center;
}

.menu-catalog__search input {
  width: 100%;
  min-width: 0;
  height: 100%;
  padding: 0;
  border: 0;
  outline: 0;
  color: #171412;
  background: transparent;
  font: inherit;
  font-size: 14px;
  font-weight: 500;
}
.menu-catalog__search input::placeholder { color: rgba(23,20,18,.47); }
.menu-catalog__search input::-webkit-search-cancel-button { display: none; }

.menu-catalog__search-clear {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  border: 0;
  border-radius: 50%;
  color: #171412;
  background: rgba(23,20,18,.055);
  cursor: pointer;
  font-size: 22px;
  line-height: 1;
  transition: background-color .18s ease, color .18s ease, transform .18s ease;
}
.menu-catalog__search-clear:hover { color: var(--joul-red); background: rgba(var(--joul-red-rgb),.08); transform: scale(1.04); }

.menu-catalog__result-count {
  margin: 0;
  color: rgba(23,20,18,.66);
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.menu-catalog__sort {
  position: relative;
  display: block;
}
.menu-catalog__sort select {
  width: 100%;
  height: 54px;
  padding: 0 42px 0 16px;
  border: 1px solid rgba(27,20,15,.12);
  border-radius: 15px;
  color: #171412;
  background: rgba(255,255,255,.76);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  outline: 0;
  appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, #29231f 50%),
    linear-gradient(135deg, #29231f 50%, transparent 50%);
  background-position:
    calc(100% - 18px) 23px,
    calc(100% - 13px) 23px;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.menu-catalog__sort select:focus-visible {
  border-color: rgba(var(--joul-red-rgb),.45);
  box-shadow: 0 0 0 4px rgba(var(--joul-red-rgb),.07);
}

.menu-catalog__category-scroller {
  margin-top: 16px;
  overflow: hidden;
}

.menu-catalog__categories {
  display: grid;
  grid-template-columns: .75fr 1.1fr .9fr 1fr 1fr .9fr .9fr;
  gap: 10px;
}

.menu-category {
  min-width: 0;
  min-height: 54px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 9px 13px;
  border: 1px solid rgba(27,20,15,.11);
  border-radius: 13px;
  color: #171412;
  background: rgba(255,255,255,.72);
  box-shadow: 0 8px 22px rgba(45,29,14,.025);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
  line-height: 1.1;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.menu-category:hover {
  transform: translateY(-1px);
  border-color: rgba(var(--joul-red-rgb),.24);
  box-shadow: 0 10px 28px rgba(56,31,14,.05);
}
.menu-category.is-active {
  color: #fff;
  border-color: var(--joul-red);
  background: var(--joul-red);
  box-shadow: 0 12px 25px rgba(var(--joul-red-rgb),.18);
}
.menu-category__icon {
  width: 21px;
  height: 21px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
}
.menu-category__icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.menu-catalog__heading {
  margin-top: clamp(42px, 5vw, 70px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(220px, 320px);
  align-items: end;
  gap: 32px;
}
.menu-catalog__eyebrow {
  margin: 0 0 10px;
  color: var(--joul-red);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .16em;
}
.menu-catalog__heading h2 {
  margin: 0;
  color: #111;
  font-size: clamp(42px, 4.7vw, 66px);
  font-weight: 900;
  line-height: .95;
  letter-spacing: -.045em;
}
.menu-catalog__heading h2::after {
  content: "";
  display: inline-block;
  width: 34px;
  height: 29px;
  margin-left: 10px;
  vertical-align: 30%;
  background:
    linear-gradient(var(--joul-red), var(--joul-red)) 3px 15px / 16px 4px no-repeat,
    linear-gradient(var(--joul-red), var(--joul-red)) 13px 3px / 4px 15px no-repeat,
    linear-gradient(var(--joul-red), var(--joul-red)) 18px 17px / 14px 4px no-repeat;
  transform: rotate(-18deg);
  border-radius: 3px;
}
.menu-catalog__lead {
  max-width: 300px;
  margin: 0 0 5px auto;
  color: rgba(23,20,18,.72);
  font-size: 15px;
  font-weight: 500;
  line-height: 1.45;
}

.menu-product-grid {
  margin-top: 26px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

.menu-product-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(31,21,14,.085);
  border-radius: 16px;
  background: rgba(255,255,255,.75);
  box-shadow: 0 9px 28px rgba(47,31,17,.045);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.menu-product-card[hidden] { display: none !important; }
.menu-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--joul-red-rgb),.16);
  box-shadow: 0 16px 36px rgba(47,31,17,.075);
}

.menu-product-card__media {
  position: relative;
  min-height: 0;
  aspect-ratio: 1.62 / 1;
  overflow: hidden;
  display: block;
  background:
    radial-gradient(circle at 51% 29%, rgba(255,255,255,.96), transparent 35%),
    linear-gradient(135deg, #f9ead7 0%, #f2dcc4 100%);
}
.menu-product-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 28%;
  background: linear-gradient(180deg, transparent, rgba(61,26,6,.055));
  pointer-events: none;
}
.menu-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s ease;
}
.menu-product-card:hover .menu-product-card__media img { transform: scale(1.035); filter: saturate(1.03) contrast(1.01); }

.menu-product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 15px 16px 16px;
}
.menu-product-card__category {
  margin: 0 0 5px;
  color: var(--joul-red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .085em;
  text-transform: uppercase;
}
.menu-product-card h3 {
  margin: 0;
  color: #141210;
  font-size: 28px;
  font-weight: 850;
  line-height: 1.08;
  letter-spacing: -.026em;
}
.menu-product-card h3 a { transition: color .18s ease; }
.menu-product-card h3 a:hover { color: var(--joul-red); }
.menu-product-card__description {
  min-height: 2.9em;
  margin: 8px 0 15px;
  color: rgba(23,20,18,.67);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1.43;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-product-card__link {
  margin-top: auto;
  min-height: 34px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  align-self: flex-start;
  color: var(--joul-red);
  font-size: 13px;
  font-weight: 800;
  transition: gap .18s ease, color .18s ease;
}
.menu-product-card__link:hover { gap: 13px; color: #bd000c; }
.menu-product-card__link span:last-child { font-size: 17px; line-height: 1; }

.menu-catalog__empty {
  margin-top: 28px;
  padding: 54px 24px;
  text-align: center;
  border: 1px dashed rgba(23,20,18,.16);
  border-radius: 18px;
  background: rgba(255,255,255,.46);
}
.menu-catalog__empty[hidden] { display: none !important; }
.menu-catalog__empty-mark {
  width: 54px;
  height: 54px;
  margin: 0 auto 13px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--joul-red);
  font-size: 28px;
  font-weight: 900;
}
.menu-catalog__empty h3 { margin: 0; font-size: 25px; font-weight: 850; letter-spacing: -.025em; }
.menu-catalog__empty p { max-width: 430px; margin: 8px auto 18px; color: rgba(23,20,18,.65); font-size: 14px; line-height: 1.5; }
.menu-catalog__empty button {
  min-height: 44px;
  padding: 0 18px;
  border: 0;
  border-radius: 10px;
  color: #fff;
  background: var(--joul-red);
  cursor: pointer;
  font-size: 13px;
  font-weight: 800;
}

.menu-catalog input:focus-visible,
.menu-catalog select:focus-visible,
.menu-catalog button:focus-visible,
.menu-product-card a:focus-visible {
  outline: 2px solid var(--joul-red);
  outline-offset: 3px;
}

/* Product detail route: intentionally compact; full design can grow in its own stage. */
.product-detail-page .site-header {
  position: relative;
  height: 112px;
  background: #fffaf2;
  border-bottom: 1px solid rgba(23,20,18,.07);
}
.product-detail-page .site-header__inner {
  height: 112px;
  padding-top: 0;
  align-items: center;
}
.product-detail-main { background: #fff8ef; }
.product-detail {
  padding: clamp(38px, 5vw, 76px) 0 clamp(70px, 8vw, 120px);
}
.product-detail__inner {
  width: min(calc(100% - 48px), 1180px);
  margin: 0 auto;
}
.product-detail__breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 9px;
  margin-bottom: 28px;
  color: rgba(23,20,18,.58);
  font-size: 12px;
  font-weight: 650;
}
.product-detail__breadcrumb a:hover { color: var(--joul-red); }
.product-detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .92fr);
  align-items: center;
  gap: clamp(34px, 6vw, 78px);
}
.product-detail__visual {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(23,20,18,.08);
  border-radius: 24px;
  background: linear-gradient(135deg, #f7e7d3, #f1d7bc);
}
.product-detail__visual-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 50% 34%, rgba(255,255,255,.75), transparent 36%);
}
.product-detail__visual img {
  position: relative;
  z-index: 1;
  width: min(78%, 520px);
  height: auto;
  border-radius: 18px;
  box-shadow: 0 22px 58px rgba(62,28,6,.14);
}
.product-detail__category { margin: 0 0 9px; color: var(--joul-red); font-size: 12px; font-weight: 900; letter-spacing: .14em; text-transform: uppercase; }
.product-detail__content h1 { margin: 0; font-size: clamp(42px, 5vw, 70px); font-weight: 900; line-height: .96; letter-spacing: -.047em; }
.product-detail__intro { margin: 20px 0 0; color: rgba(23,20,18,.72); font-size: 17px; font-weight: 500; line-height: 1.55; }
.product-detail__note { margin-top: 26px; padding: 16px 17px; display: grid; gap: 3px; border-left: 4px solid var(--joul-red); background: rgba(255,255,255,.68); }
.product-detail__note strong { font-size: 13px; }
.product-detail__note span { color: rgba(23,20,18,.62); font-size: 12px; line-height: 1.4; }
.product-detail__actions { margin-top: 28px; display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.product-detail__actions .button { min-height: 52px; padding: 0 24px; font-size: 14px; }
.product-detail__back { min-height: 44px; display: inline-flex; align-items: center; color: #29231f; font-size: 13px; font-weight: 750; }
.product-detail__back:hover { color: var(--joul-red); }

@media (max-width: 1024px) {
  .menu-catalog__inner { width: min(calc(100% - 36px), 940px); }
  .menu-catalog__toolbar { grid-template-columns: minmax(0, 1fr) auto; }
  .menu-catalog__result-count { grid-column: 1 / -1; grid-row: 2; justify-self: end; margin-top: -4px; }
  .menu-catalog__categories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .menu-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail__grid { grid-template-columns: 1fr; }
  .product-detail__visual { min-height: 380px; }
}

@media (max-width: 700px) {
  .menu-catalog { padding-top: 22px; }
  .menu-catalog__inner { width: calc(100% - 28px); }
  .menu-catalog__toolbar { grid-template-columns: 1fr 132px; gap: 10px; }
  .menu-catalog__search { height: 50px; }
  .menu-catalog__sort select { height: 50px; padding-left: 12px; font-size: 12px; }
  .menu-catalog__result-count { justify-self: start; margin-top: 0; font-size: 12px; }
  .menu-catalog__category-scroller {
    margin-right: -14px;
    padding-right: 14px;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: none;
    scroll-snap-type: x proximity;
  }
  .menu-catalog__category-scroller::-webkit-scrollbar { display: none; }
  .menu-catalog__categories {
    width: max-content;
    min-width: 100%;
    display: flex;
    gap: 9px;
    padding-bottom: 2px;
  }
  .menu-category {
    flex: 0 0 auto;
    min-height: 48px;
    padding: 8px 14px;
    scroll-snap-align: start;
  }
  .menu-catalog__heading {
    margin-top: 38px;
    grid-template-columns: 1fr;
    gap: 13px;
  }
  .menu-catalog__heading h2 { font-size: clamp(38px, 11vw, 52px); }
  .menu-catalog__lead { max-width: 430px; margin: 0; font-size: 14px; }
  .menu-product-grid { margin-top: 20px; gap: 14px; }
  .menu-product-card__body { padding: 14px 14px 15px; }
  .menu-product-card h3 { font-size: 18px; }
  .menu-product-card__description { font-size: 13px; }
  .product-detail-page .site-header { height: 72px; }
  .product-detail-page .site-header__inner { height: 72px; }
  .product-detail__inner { width: calc(100% - 28px); }
  .product-detail__visual { min-height: 330px; }
}

@media (max-width: 520px) {
  .menu-catalog__toolbar { grid-template-columns: 1fr; }
  .menu-catalog__sort { width: 100%; }
  .menu-catalog__result-count { grid-column: auto; grid-row: auto; }
  .menu-catalog__sort select { width: 100%; }
  .menu-product-grid { grid-template-columns: 1fr; }
  .menu-product-card__media { aspect-ratio: 1.52 / 1; }
  .menu-product-card__description {
    min-height: 0;
    display: block;
    overflow: visible;
  }
  .menu-catalog__heading h2::after { width: 28px; height: 24px; margin-left: 7px; transform: rotate(-18deg) scale(.82); transform-origin: left center; }
  .menu-catalog__empty { padding: 40px 18px; }
  .product-detail { padding-top: 28px; }
  .product-detail__breadcrumb { margin-bottom: 18px; }
  .product-detail__visual { min-height: 270px; border-radius: 18px; }
  .product-detail__visual img { width: 86%; }
  .product-detail__content h1 { font-size: clamp(38px, 12vw, 52px); }
  .product-detail__intro { font-size: 15px; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-category,
  .menu-product-card,
  .menu-product-card__media img,
  .menu-product-card__link,
  .menu-catalog__search-clear { transition: none !important; }
}

/* =========================================================
   V37 / MENU CATALOG UI + MOTION REFINEMENT
   - desktop 4-column product grid
   - larger, normalized category controls + SVGs
   - repaired search focus state
   - calm non-neon visual treatment
   - slower left-to-right card reveal
   - verified/editorial product badges only
   ========================================================= */
.menu-catalog {
  padding: 30px 0 92px;
  background: #fbf6ef;
  border-top: 1px solid rgba(33, 24, 19, .055);
}

.menu-catalog__inner {
  width: min(calc(100% - 56px), 1380px);
  margin-inline: auto;
}

.menu-catalog__toolbar {
  display: grid;
  grid-template-columns: minmax(360px, 720px) 1fr 178px;
  align-items: center;
  gap: 18px;
}

.menu-catalog__search {
  height: 52px;
  display: grid;
  grid-template-columns: 22px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 11px;
  padding: 0 9px 0 16px;
  border: 1px solid rgba(23, 20, 18, .12);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
  transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.menu-catalog__search:focus-within {
  border-color: rgba(23, 20, 18, .28);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(23, 20, 18, .035);
}

.menu-catalog__search-icon {
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  opacity: .92;
}
.menu-catalog__search-icon::before,
.menu-catalog__search-icon::after { content: none; }
.menu-catalog__search-icon img { width: 21px; height: 21px; display: block; }

.menu-catalog__search input {
  min-width: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
  color: #171412;
  background: transparent;
  font: inherit;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1;
  appearance: none;
  -webkit-appearance: none;
}
.menu-catalog__search input:focus,
.menu-catalog__search input:focus-visible {
  border: 0 !important;
  outline: 0 !important;
  box-shadow: none !important;
}
.menu-catalog__search input::placeholder { color: rgba(23,20,18,.44); }
.menu-catalog__search input::-webkit-search-decoration,
.menu-catalog__search input::-webkit-search-cancel-button,
.menu-catalog__search input::-webkit-search-results-button,
.menu-catalog__search input::-webkit-search-results-decoration { display: none; }

.menu-catalog__search-clear {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 10px;
  color: #171412;
  background: #f3eee8;
  cursor: pointer;
  transform: none;
  transition: background-color .16s ease, transform .16s ease;
}
.menu-catalog__search-clear img { width: 17px; height: 17px; display: block; }
.menu-catalog__search-clear:hover { color: #171412; background: #ebe4dc; transform: translateY(-1px); }

.menu-catalog__result-count {
  justify-self: end;
  margin: 0;
  color: rgba(23, 20, 18, .62);
  font-size: 13px;
  font-weight: 650;
  white-space: nowrap;
}

.menu-catalog__sort {
  position: relative;
  z-index: 20;
  width: 178px;
}

.menu-sort__trigger {
  width: 100%;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 0 14px 0 16px;
  border: 1px solid rgba(23, 20, 18, .12);
  border-radius: 14px;
  color: #171412;
  background: #fff;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 750;
  text-align: left;
  box-shadow: none;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}
.menu-sort__trigger:hover { border-color: rgba(23, 20, 18, .22); transform: translateY(-1px); }
.menu-sort__trigger img {
  width: 17px;
  height: 17px;
  flex: 0 0 auto;
  transition: transform .2s ease;
}
.menu-catalog__sort.is-open .menu-sort__trigger img { transform: rotate(180deg); }

.menu-sort__panel {
  position: absolute;
  top: calc(100% + 7px);
  right: 0;
  width: 100%;
  padding: 6px;
  border: 1px solid rgba(23, 20, 18, .1);
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 16px 34px rgba(37, 26, 18, .11);
}
.menu-sort__panel[hidden] { display: none !important; }
.menu-sort__panel button {
  width: 100%;
  min-height: 39px;
  display: flex;
  align-items: center;
  padding: 0 11px;
  border: 0;
  border-radius: 8px;
  color: #171412;
  background: transparent;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  font-weight: 650;
  text-align: left;
}
.menu-sort__panel button:hover,
.menu-sort__panel button:focus-visible { background: #f7f2ec; }
.menu-sort__panel button[aria-selected="true"] {
  color: var(--joul-red);
  background: rgba(226, 6, 19, .055);
}

.menu-catalog__category-scroller {
  margin-top: 14px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  overscroll-behavior-inline: contain;
}
.menu-catalog__category-scroller::-webkit-scrollbar { display: none; }

.menu-catalog__categories {
  width: max-content;
  min-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 9px;
}

.menu-category {
  flex: 0 0 auto;
  min-height: 50px;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 0 17px;
  border: 1px solid rgba(23, 20, 18, .105);
  border-radius: 13px;
  color: #171412;
  background: #fff;
  box-shadow: none;
  font-size: 13.5px;
  font-weight: 780;
  line-height: 1;
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, background-color .18s ease, border-color .18s ease, transform .18s ease;
}
.menu-category:hover {
  transform: translateY(-1px);
  border-color: rgba(23, 20, 18, .23);
  box-shadow: none;
}
.menu-category.is-active {
  color: #fff;
  border-color: var(--joul-red);
  background: var(--joul-red);
  box-shadow: none;
}
.menu-category__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 24px;
  display: grid;
  place-items: center;
}
.menu-category__icon img {
  width: 24px;
  height: 24px;
  display: block;
}
.menu-category.is-active .menu-category__icon img { filter: brightness(0) invert(1); }

.menu-catalog__heading {
  margin-top: 44px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 320px);
  align-items: end;
  gap: 36px;
}
.menu-catalog__eyebrow {
  margin: 0 0 8px;
  color: var(--joul-red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .155em;
  text-transform: uppercase;
}
.menu-catalog__heading h2 {
  margin: 0;
  color: #11100f;
  font-size: clamp(48px, 4.3vw, 62px);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.045em;
}
.menu-catalog__heading h2::after {
  width: 30px;
  height: 25px;
  margin-left: 8px;
  vertical-align: 25%;
  background:
    linear-gradient(var(--joul-red), var(--joul-red)) 3px 13px / 14px 3px no-repeat,
    linear-gradient(var(--joul-red), var(--joul-red)) 13px 3px / 3px 12px no-repeat,
    linear-gradient(var(--joul-red), var(--joul-red)) 17px 14px / 12px 3px no-repeat;
}
.menu-catalog__lead {
  max-width: 320px;
  margin: 0 0 3px auto;
  color: rgba(23,20,18,.72);
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.48;
}

.menu-product-grid {
  margin-top: 25px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  align-items: stretch;
}

.menu-product-card {
  min-width: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  border: 1px solid rgba(31, 21, 14, .085);
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(47, 31, 17, .038);
  transform-origin: 50% 70%;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.menu-product-card[hidden] { display: none !important; }
.menu-product-card:hover {
  transform: translateY(-3px);
  border-color: rgba(31, 21, 14, .15);
  box-shadow: 0 10px 26px rgba(47, 31, 17, .065);
}

.menu-product-card__media {
  position: relative;
  min-height: 0;
  aspect-ratio: 1.56 / 1;
  overflow: hidden;
  display: block;
  background: #f5e7d7;
}
.menu-product-card__media::after {
  content: "";
  position: absolute;
  inset: auto 0 0;
  height: 16%;
  background: linear-gradient(180deg, transparent, rgba(61, 26, 6, .045));
  pointer-events: none;
}
.menu-product-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transition: transform .34s cubic-bezier(.2,.8,.2,1);
}
.menu-product-card:hover .menu-product-card__media img {
  transform: scale(1.026);
  filter: none;
}

.menu-product-card__badge {
  position: absolute;
  top: 11px;
  left: 11px;
  z-index: 3;
  min-height: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 5px 9px;
  border: 1px solid rgba(255,255,255,.38);
  border-radius: 999px;
  color: #fff;
  background: var(--joul-red);
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .055em;
  line-height: 1;
  text-transform: uppercase;
  box-shadow: 0 4px 12px rgba(32, 20, 15, .09);
}
.menu-product-card__badge--hot {
  color: #fff;
  background: #171412;
}

.menu-product-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 14px 15px 15px;
}
.menu-product-card__category {
  margin: 0 0 5px;
  color: var(--joul-red);
  font-size: 9.8px;
  font-weight: 900;
  letter-spacing: .095em;
  text-transform: uppercase;
}
.menu-product-card h3 {
  margin: 0;
  color: #141210;
  font-size: 18.5px;
  font-weight: 850;
  line-height: 1.1;
  letter-spacing: -.025em;
}
.menu-product-card h3 a { transition: color .18s ease; }
.menu-product-card h3 a:hover { color: var(--joul-red); }
.menu-product-card__description {
  min-height: 2.9em;
  margin: 7px 0 13px;
  color: rgba(23,20,18,.68);
  font-size: 13.2px;
  font-weight: 500;
  line-height: 1.42;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.menu-product-card__link {
  margin-top: auto;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  color: var(--joul-red);
  font-size: 12.8px;
  font-weight: 850;
  transition: gap .18s ease, color .18s ease;
}
.menu-product-card__link:hover { gap: 11px; color: #bd000c; }
.menu-product-card__link span:last-child { font-size: 16px; line-height: 1; }

/* JS yalnızca hareket sistemi hazır olduğunda kartları gizler. */
.menu-catalog.is-motion-ready .menu-product-card:not(.is-visible) {
  opacity: 0;
  transform: translate3d(-18px, 15px, 0) scale(.986);
}
.menu-catalog.is-motion-ready .menu-product-card.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  transition:
    opacity .62s cubic-bezier(.18,.72,.2,1) var(--menu-card-delay, 0ms),
    transform .68s cubic-bezier(.16,.82,.2,1) var(--menu-card-delay, 0ms),
    box-shadow .2s ease,
    border-color .2s ease;
}
.menu-catalog.is-motion-ready .menu-product-card.is-visible:hover {
  transform: translate3d(0, -3px, 0) scale(1);
}
.menu-catalog.is-motion-ready .menu-product-card.is-visible .menu-product-card__media img {
  animation: menuCardImageSettle .78s cubic-bezier(.16,.82,.2,1) var(--menu-card-delay, 0ms) both;
}
@keyframes menuCardImageSettle {
  from { transform: scale(1.035); }
  to { transform: scale(1); }
}
.menu-catalog.is-motion-ready .menu-product-card.is-visible:hover .menu-product-card__media img {
  animation: none;
  transform: scale(1.026);
}

/* Search input odağını kapsayıcı gösterir; input içinde ikinci kırmızı kutu oluşmaz. */
.menu-catalog__search input:focus-visible { outline: none !important; }

@media (max-width: 1180px) {
  .menu-catalog__inner { width: min(calc(100% - 44px), 1080px); }
  .menu-catalog__toolbar { grid-template-columns: minmax(300px, 1fr) auto 168px; }
  .menu-product-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 900px) {
  .menu-catalog__inner { width: min(calc(100% - 36px), 820px); }
  .menu-catalog__toolbar { grid-template-columns: minmax(0, 1fr) 160px; gap: 10px; }
  .menu-catalog__result-count {
    grid-column: 1 / -1;
    grid-row: 2;
    justify-self: end;
    margin-top: -2px;
  }
  .menu-catalog__sort { width: 160px; }
  .menu-catalog__heading { grid-template-columns: 1fr; gap: 12px; }
  .menu-catalog__lead { max-width: 520px; margin: 0; }
  .menu-product-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .menu-catalog { padding-top: 22px; padding-bottom: 72px; }
  .menu-catalog__inner { width: calc(100% - 28px); }
  .menu-catalog__toolbar { grid-template-columns: minmax(0, 1fr) 138px; gap: 9px; }
  .menu-catalog__search { height: 48px; grid-template-columns: 20px minmax(0, 1fr) 32px; padding-left: 14px; }
  .menu-catalog__search-icon,
  .menu-catalog__search-icon img { width: 20px; height: 20px; }
  .menu-catalog__search input { font-size: 13.5px; }
  .menu-catalog__sort { width: 138px; }
  .menu-sort__trigger { height: 48px; padding-left: 12px; font-size: 12px; }
  .menu-sort__panel button { font-size: 12px; }
  .menu-catalog__result-count { justify-self: start; font-size: 12px; }
  .menu-catalog__category-scroller { margin-top: 11px; margin-right: -14px; padding-right: 14px; }
  .menu-category { min-height: 46px; gap: 9px; padding: 0 14px; font-size: 12.5px; }
  .menu-category__icon,
  .menu-category__icon img { width: 22px; height: 22px; flex-basis: 22px; }
  .menu-catalog__heading { margin-top: 34px; }
  .menu-catalog__heading h2 { font-size: clamp(40px, 11.4vw, 52px); }
  .menu-catalog__lead { max-width: 440px; font-size: 13.5px; }
  .menu-product-grid { margin-top: 18px; gap: 13px; }
  .menu-product-card__body { padding: 13px 14px 14px; }
  .menu-product-card h3 { font-size: 18px; }
  .menu-product-card__description { font-size: 13px; }
}

@media (max-width: 560px) {
  .menu-catalog__toolbar { grid-template-columns: 1fr; }
  .menu-catalog__sort { width: 100%; }
  .menu-sort__trigger { width: 100%; }
  .menu-catalog__result-count { grid-column: auto; grid-row: auto; order: 3; }
  .menu-product-grid { grid-template-columns: 1fr; }
  .menu-product-card__media { aspect-ratio: 1.62 / 1; }
  .menu-product-card__description { min-height: 0; display: block; overflow: visible; }
}

@media (prefers-reduced-motion: reduce) {
  .menu-catalog.is-motion-ready .menu-product-card,
  .menu-catalog.is-motion-ready .menu-product-card.is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  .menu-catalog.is-motion-ready .menu-product-card.is-visible .menu-product-card__media img {
    animation: none !important;
  }
  .menu-sort__trigger img,
  .menu-category,
  .menu-product-card__media img { transition: none !important; }
}

/* ============================================================
   V40 · PRODUCT DETAIL REVISION
   Master visual template rebuilt against references/product-detail/00-product-detail-reference.png
   ============================================================ */
.product-detail-page {
  --pd-cream: #fff9f1;
  --pd-paper: #fffdf9;
  --pd-line: rgba(28,22,17,.12);
  --pd-muted: #665e57;
  --pd-red: #e50b18;
  background: var(--pd-cream);
  color: #111;
}
.product-detail-page .site-header,
.product-detail-page .site-header__inner { height: 74px; }
.product-detail-page .site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255,251,246,.97);
  border-bottom: 1px solid rgba(24,18,13,.07);
  backdrop-filter: blur(12px);
}
.product-detail-page .brand img { max-height: 48px; }
.product-detail-main { background: var(--pd-cream); overflow: clip; }
.pd-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }
.pd-related .pd-shell,
.pd-menu-cta .pd-shell { width: min(1280px, calc(100% - 64px)); }

/* top product area */
.pd-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 610px;
  padding: 18px 0 28px;
  background: linear-gradient(180deg,#fffaf4 0%,#fff8ef 100%);
  border-bottom: 1px solid rgba(28,22,17,.07);
}
.pd-hero__checker {
  position: absolute;
  z-index: 0;
  left: 0;
  top: 48px;
  width: 72px;
  height: 328px;
  object-fit: cover;
  object-position: left center;
  opacity: .66;
  pointer-events: none;
}
.pd-hero__stamp {
  position: absolute;
  z-index: 0;
  right: max(22px, calc((100vw - 1280px)/2));
  top: 48px;
  width: 146px;
  height: auto;
  opacity: .72;
  pointer-events: none;
}
.pd-breadcrumb {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  min-height: 30px;
  margin: 0 0 14px;
  color: #5e5750;
  font-size: 11px;
  font-weight: 650;
}
.pd-breadcrumb a { color: inherit; }
.pd-breadcrumb a:hover { color: var(--pd-red); }
.pd-breadcrumb span[aria-hidden="true"] { color: #9f968d; font-size: 15px; }
.pd-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0,1.02fr) minmax(0,.98fr);
  align-items: start;
  gap: 42px;
}

/* product image intentionally has no card/background: reference uses an open composition */
.pd-gallery { min-width: 0; }
.pd-gallery__stage {
  position: relative;
  min-height: 430px;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: visible;
  background: transparent;
  border: 0;
  border-radius: 0;
}
.pd-gallery__stage::before,
.pd-gallery__halo { display: none !important; }
.pd-gallery__main {
  position: relative;
  z-index: 2;
  width: min(100%, 640px);
  height: 432px;
  object-fit: contain;
  object-position: center bottom;
  filter: drop-shadow(0 14px 13px rgba(67,37,17,.11));
  transform-origin: center center;
  transition: transform .42s cubic-bezier(.22,.68,0,1), object-position .36s ease;
}
.pd-gallery__thumbs {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.pd-gallery__thumb {
  width: 112px;
  height: 80px;
  padding: 0;
  border: 1px solid rgba(28,22,17,.16);
  border-radius: 12px;
  overflow: hidden;
  background: #fff;
  cursor: pointer;
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.pd-gallery__thumb:hover { transform: translateY(-2px); }
.pd-gallery__thumb.is-current { border-color: var(--pd-red); box-shadow: 0 0 0 1px var(--pd-red); }
.pd-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; }

/* right summary */
.pd-summary { min-width: 0; padding-top: 18px; }
.pd-category-pill {
  display: inline-flex;
  align-items: center;
  min-height: 29px;
  padding: 0 13px;
  border-radius: 999px;
  background: #fde3d9;
  color: #c8131c;
  font-size: 11px;
  font-weight: 850;
}
.pd-summary h1 {
  margin: 12px 0 0;
  max-width: 700px;
  font-size: clamp(48px,4.8vw,70px);
  line-height: .96;
  letter-spacing: -.055em;
  font-weight: 900;
  color: #0c0c0c;
}
.pd-tagline {
  margin: 14px 0 0;
  max-width: 680px;
  font-size: clamp(18px,1.55vw,24px);
  line-height: 1.28;
  font-weight: 850;
  color: #171411;
}
.pd-description {
  max-width: 690px;
  margin: 14px 0 0;
  color: #5f564e;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 500;
}
.pd-components { margin-top: 24px; }
.pd-section-heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 18px;
}
.pd-section-heading h2 {
  margin: 0;
  font-size: 28px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.025em;
}
.pd-section-heading > span,
.pd-section-heading__meta {
  max-width: 340px;
  color: #655d56;
  font-size: 12px;
  line-height: 1.3;
  font-weight: 650;
  text-align: right;
}
.pd-components__grid {
  display: grid;
  grid-template-columns: repeat(6,minmax(0,1fr));
  gap: 10px;
  margin-top: 14px;
}
.pd-component-card {
  min-width: 0;
  min-height: 126px;
  padding: 10px 8px 12px;
  display: grid;
  grid-template-rows: 74px auto;
  align-items: center;
  justify-items: center;
  border: 1px solid rgba(28,22,17,.12);
  border-radius: 14px;
  background: rgba(255,255,255,.84);
  box-shadow: none;
  transition: transform .18s ease,border-color .18s ease,background .18s ease;
}
.pd-component-card:hover { transform: translateY(-2px); border-color: rgba(229,11,24,.23); background: #fffdf9; }
.pd-component-card__visual {
  width: 100%;
  height: 72px;
  display: grid;
  place-items: center;
  overflow: hidden;
}
.pd-component-card__visual img { max-width: 88px; max-height: 66px; width: auto; height: auto; object-fit: contain; }
.pd-component-card p {
  margin: 6px 0 0;
  color: #211d19;
  font-size: 11px;
  line-height: 1.2;
  font-weight: 750;
  text-align: center;
}
.pd-accompaniments { margin-top: 16px; }
.pd-accompaniments__label { display:block; margin-bottom:10px; color:#171411; font-size:18px; line-height:1.08; font-weight:900; letter-spacing:-.02em; }
.pd-accompaniments__chips { display:flex; flex-wrap:wrap; gap:10px; }
.pd-accompaniments__chip { display:inline-flex; align-items:center; min-height:38px; padding:0 14px; border-radius:999px; border:1px solid rgba(28,22,17,.12); background:#fffaf5; color:#4c453e; font-size:13px; font-weight:700; }
.pd-accompaniments__chip::before { content:'✓'; display:inline-grid; place-items:center; width:18px; height:18px; margin-right:8px; border-radius:50%; background:#fdeceb; color:var(--pd-red); font-size:11px; font-weight:900; }

/* order row */
.pd-order { margin-top: 26px; }
.pd-section-heading--order { align-items: center; }
.pd-section-heading--order > span { max-width: 330px; }
.pd-order__grid {
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 12px;
  margin-top: 12px;
}
.product-order-card {
  position: relative;
  min-height: 66px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  border: 1px solid rgba(28,22,17,.12);
  border-radius: 12px;
  background: #fff;
  overflow: hidden;
  transition: transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.product-order-card:hover { transform: translateY(-2px); border-color: rgba(229,11,24,.24); box-shadow: 0 8px 18px rgba(64,39,23,.07); }
.product-order-card__logo { flex: 1; min-width: 0; display: grid; place-items: center start; }
.product-order-card__logo img { display: block; max-width: 106px; max-height: 44px; width: auto; height: auto; object-fit: contain; }
.product-order-card__arrow {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #f6f2ed;
  color: #111;
  font-size: 14px;
  font-weight: 900;
  flex: 0 0 auto;
}
/* reference crops already contain their colored card and arrow */
.product-order-card--getir-yemek,
.product-order-card--migros-yemek,
.product-order-card--yemeksepeti {
  padding: 0;
  border: 0;
  background: transparent;
}
.product-order-card--getir-yemek .product-order-card__logo,
.product-order-card--migros-yemek .product-order-card__logo,
.product-order-card--yemeksepeti .product-order-card__logo { width: 100%; height: 58px; place-items: stretch; }
.product-order-card--getir-yemek .product-order-card__logo img,
.product-order-card--migros-yemek .product-order-card__logo img,
.product-order-card--yemeksepeti .product-order-card__logo img {
  width: 100%;
  height: 58px;
  max-width: none;
  max-height: none;
  object-fit: fill;
  filter: none !important;
}
.product-order-card--getir-yemek .product-order-card__arrow,
.product-order-card--migros-yemek .product-order-card__arrow,
.product-order-card--yemeksepeti .product-order-card__arrow { display: none; }
.product-order-card--uber-eats .product-order-card__logo img { max-width: 92px; max-height: 34px; }

/* dark editorial panel */
.pd-special {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 380px;
  background: #1b1b1b;
  color: #fff;
}
.pd-special__texture {
  position: absolute;
  inset: 0;
  z-index: -2;
  background: #1b1b1b url('../images/product-detail/special/joul-ozel-kilan-charcoal-texture.webp') center/cover no-repeat;
}
.pd-special__texture::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,rgba(5,5,5,.42),rgba(5,5,5,.06) 52%,rgba(5,5,5,.34));
}
.pd-special__inner {
  min-height: 380px;
  display: grid;
  grid-template-columns: minmax(250px,.84fr) minmax(500px,1.4fr) minmax(200px,.62fr);
  gap: 26px;
  align-items: center;
  padding-block: 34px 26px;
}
.pd-special__copy { position: relative; z-index: 3; }
.pd-special__title-row {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 11px;
  align-items: start;
}
.pd-special__title-row img { width: 40px; height: 40px; }
.pd-special__title-row h2 {
  margin: 0;
  max-width: 360px;
  font-size: clamp(29px,2.35vw,38px);
  line-height: 1.02;
  letter-spacing: -.035em;
  font-weight: 900;
}
.pd-special__copy > p {
  margin: 18px 0 0 59px;
  max-width: 350px;
  color: rgba(255,255,255,.84);
  font-size: 14px;
  line-height: 1.65;
  font-weight: 470;
}
.pd-special__slogan {
  display: block;
  width: 146px;
  height: auto;
  margin: 18px 0 0 58px;
  object-fit: contain;
}
.pd-special__visual {
  position: relative;
  min-height: 332px;
  display: grid;
  place-items: end center;
}
.pd-special__visual::after {
  content: "";
  position: absolute;
  left: 15%; right: 15%; bottom: 16px;
  height: 26px;
  border-radius: 50%;
  background: rgba(0,0,0,.34);
  filter: blur(16px);
}
.pd-special__visual > img {
  position: relative;
  z-index: 2;
  width: min(100%,620px);
  height: 330px;
  object-fit: contain;
  object-position: center bottom;
  filter: saturate(.94) contrast(1.03) brightness(.96) drop-shadow(0 12px 12px rgba(0,0,0,.20));
}
.pd-special__annotation {
  position: absolute;
  z-index: 4;
  color: rgba(255,255,255,.94);
  font-family: 'Caveat',cursive;
  font-size: 21px;
  font-weight: 700;
  line-height: .95;
  white-space: nowrap;
}
.pd-special__annotation::after {
  content: "";
  position: absolute;
  width: 44px;
  height: 22px;
  border-bottom: 1.5px solid rgba(255,255,255,.82);
  border-radius: 50%;
  opacity: .9;
}
.pd-special__annotation--1 { left: 2%; top: 25%; transform: rotate(-5deg); }
.pd-special__annotation--1::after { left: 82%; top: 12px; transform: rotate(24deg); }
.pd-special__annotation--2 { right: 3%; top: 20%; transform: rotate(4deg); }
.pd-special__annotation--2::after { right: 88%; top: 12px; transform: rotate(-22deg); }
.pd-special__annotation--3 { right: 1%; bottom: 22%; transform: rotate(-4deg); }
.pd-special__annotation--3::after { right: 88%; top: 8px; transform: rotate(-14deg); }
.pd-special__annotation--4 { left: 0; bottom: 20%; transform: rotate(-6deg); }
.pd-special__annotation--4::after { left: 88%; top: 7px; transform: rotate(18deg); }
.pd-special__benefits {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.pd-special__benefits li {
  display: grid;
  grid-template-columns: 36px 1fr;
  align-items: center;
  gap: 12px;
  color: rgba(255,255,255,.92);
  font-size: 13px;
  font-weight: 650;
}
.pd-special__benefits img { width: 34px; height: 34px; object-fit: contain; }

/* recommendations */
.pd-related { padding: 38px 0 30px; background: #fffaf3; }
.pd-related__header { display: flex; align-items: center; justify-content: space-between; gap: 20px; }
.pd-related__title-wrap { display: grid; grid-template-columns: 48px 1fr; gap: 12px; align-items: center; }
.pd-related__title-wrap img { width: 42px; height: 42px; }
.pd-related__title-wrap h2 { margin: 0; font-size: 31px; line-height: 1.02; letter-spacing: -.025em; font-weight: 900; }
.pd-related__title-wrap p { margin: 5px 0 0; color: var(--pd-muted); font-size: 13px; }
.pd-related__controls { display: flex; gap: 7px; }
.pd-related__controls button { width: 42px; height: 42px; border: 1px solid var(--pd-line); border-radius: 50%; background: transparent; color: #111; font-size: 18px; cursor: pointer; transition: transform .18s ease,border-color .18s ease,background .18s ease; }
.pd-related__controls button:hover { transform: translateY(-1px); border-color: rgba(229,11,24,.24); background:#fff; }
.pd-related__track { display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 32px)/3); gap:16px; margin-top:18px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; }
.pd-related__track::-webkit-scrollbar { display:none; }
.pd-related-card { scroll-snap-align:start; min-width:0; overflow:hidden; border:1px solid var(--pd-line); border-radius:14px; background:#fff; }
.pd-related-card__image { display:block; aspect-ratio:1.65/1; overflow:hidden; background:#f7e8d9; }
.pd-related-card__image img { width:100%; height:100%; object-fit:cover; transition:transform .28s ease; }
.pd-related-card:hover .pd-related-card__image img { transform:scale(1.02); }
.pd-related-card__body { padding:14px 16px 16px; }
.pd-related-card h3 { margin:0; font-size:21px; line-height:1.08; font-weight:900; }
.pd-related-card p { margin:8px 0 0; min-height:42px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; color:var(--pd-muted); font-size:13px; line-height:1.55; }
.pd-related-card__link { margin-top:12px; display:inline-flex; align-items:center; gap:6px; color:var(--pd-red); font-size:13px; font-weight:850; }

/* bottom menu CTA */
.pd-menu-cta { padding: 0 0 28px; background:#fffaf3; }
.pd-menu-cta__inner {
  position: relative;
  min-height: 94px;
  padding: 18px 210px 18px 26px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  overflow: hidden;
  border: 1px solid rgba(28,22,17,.08);
  border-radius: 10px;
  background: linear-gradient(90deg,#fff5e8,#fffdf9 64%,#f4e0cc);
}
.pd-menu-cta__copy { display:grid; grid-template-columns:40px 1fr; gap:11px; align-items:center; }
.pd-menu-cta__copy img { width:40px; height:40px; }
.pd-menu-cta h2 { margin:0; font-size:24px; line-height:1.05; font-weight:900; }
.pd-menu-cta p { margin:5px 0 0; color:var(--pd-muted); font-size:13px; }
.pd-menu-cta .button { min-width:170px; min-height:44px; }
.pd-menu-cta__script { position:absolute; right:38px; top:50%; width:110px; height:82px; object-fit:contain; transform:translateY(-50%) rotate(-7deg); mix-blend-mode:multiply; }

/* reveal kept subtle */
.js .product-detail-page [data-pd-reveal] { opacity:0; transform:translateY(12px); transition:opacity .48s ease,transform .56s cubic-bezier(.22,.68,0,1); }
.js .product-detail-page [data-pd-reveal].is-visible { opacity:1; transform:none; }

@media (max-width: 1180px) {
  .pd-shell { width:min(100% - 40px,1100px); }
  .pd-hero__grid { grid-template-columns:minmax(0,.98fr) minmax(420px,1.02fr); gap:28px; }
  .pd-gallery__main { height:360px; }
  .pd-components__grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .pd-component-card { min-height:106px; grid-template-rows:62px auto; }
  .pd-order__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pd-special__inner { grid-template-columns:minmax(220px,.86fr) minmax(360px,1.22fr) minmax(170px,.62fr); gap:20px; }
}

@media (max-width: 900px) {
  .product-detail-page .site-header,.product-detail-page .site-header__inner { height:72px; }
  .pd-shell { width:calc(100% - 36px); max-width:740px; }
  .pd-hero { min-height:0; padding-top:12px; padding-bottom:30px; }
  .pd-hero__checker { width:62px; height:248px; top:54px; opacity:.58; }
  .pd-hero__stamp { width:110px; top:66px; right:12px; opacity:.42; }
  .pd-breadcrumb { margin-bottom:4px; }
  .pd-hero__grid { grid-template-columns:1fr; gap:8px; }
  .pd-summary { order:1; padding-top:0; }
  .pd-gallery { order:2; }
  .pd-summary h1 { font-size:clamp(42px,8vw,60px); }
  .pd-description { max-width:680px; }
  .pd-gallery__stage { min-height:380px; }
  .pd-gallery__main { height:372px; width:min(96%,560px); }
  .pd-special__inner { grid-template-columns:1fr; padding-block:28px; }
  .pd-special__copy { display:grid; grid-template-columns:auto 1fr; column-gap:10px; align-items:start; }
  .pd-special__title-row { grid-column:1 / -1; }
  .pd-special__copy > p { margin:12px 0 0 51px; max-width:620px; grid-column:1 / -1; }
  .pd-special__slogan { width:125px; margin:10px 0 0 51px; grid-column:1 / -1; }
  .pd-special__visual { min-height:330px; }
  .pd-special__visual > img { height:320px; }
  .pd-special__benefits { grid-template-columns:repeat(2,minmax(0,1fr)); padding-top:14px; border-top:1px solid rgba(255,255,255,.10); }
  .pd-related__track { grid-auto-columns:calc((100% - 16px)/2); }
  .pd-menu-cta__inner { padding-right:164px; }
  .pd-menu-cta__script { width:88px; right:28px; }
}

@media (max-width: 640px) {
  .pd-shell { width:calc(100% - 28px); }
  .pd-hero__checker { width:48px; height:194px; left:-10px; top:76px; opacity:.38; }
  .pd-hero__stamp { display:none; }
  .pd-breadcrumb { font-size:10px; gap:5px; }
  .pd-summary h1 { font-size:clamp(38px,11.5vw,52px); }
  .pd-tagline { font-size:18px; }
  .pd-description { font-size:13px; }
  .pd-gallery__stage { min-height:310px; }
  .pd-gallery__main { width:100%; height:310px; }
  .pd-gallery__thumb { width:86px; height:62px; }
  .pd-section-heading { align-items:flex-start; flex-direction:column; gap:4px; }
  .pd-section-heading > span,.pd-section-heading__meta { text-align:left; }
  .pd-components__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .pd-component-card { min-height:104px; }
  .pd-accompaniments__label { font-size:16px; }
  .pd-accompaniments__chip { min-height:36px; font-size:12px; }
  .pd-order__grid { grid-template-columns:1fr 1fr; }
  .product-order-card,.product-order-card--getir-yemek .product-order-card__logo,.product-order-card--migros-yemek .product-order-card__logo,.product-order-card--yemeksepeti .product-order-card__logo,.product-order-card--getir-yemek .product-order-card__logo img,.product-order-card--migros-yemek .product-order-card__logo img,.product-order-card--yemeksepeti .product-order-card__logo img { min-height:58px; height:58px; }
  .pd-special__title-row { grid-template-columns:38px 1fr; gap:9px; }
  .pd-special__title-row img { width:35px; height:35px; }
  .pd-special__title-row h2 { font-size:31px; }
  .pd-special__copy > p { margin-left:44px; font-size:13px; }
  .pd-special__slogan { width:116px; margin-left:44px; }
  .pd-special__visual { min-height:274px; }
  .pd-special__visual > img { height:270px; width:100%; }
  .pd-special__annotation { font-size:16px; }
  .pd-special__benefits { grid-template-columns:1fr 1fr; gap:12px 8px; }
  .pd-special__benefits li { grid-template-columns:27px 1fr; gap:7px; font-size:10px; }
  .pd-special__benefits img { width:25px; height:25px; }
  .pd-related { padding-top:24px; }
  .pd-related__title-wrap { grid-template-columns:34px 1fr; }
  .pd-related__title-wrap img { width:31px; height:31px; }
  .pd-related__title-wrap h2 { font-size:24px; }
  .pd-related__controls button { width:34px; height:34px; }
  .pd-related__track { grid-auto-columns:92%; }
  .pd-menu-cta__inner { padding:15px; padding-bottom:72px; flex-direction:column; align-items:stretch; }
  .pd-menu-cta .button { width:100%; }
  .pd-menu-cta__script { right:16px; bottom:2px; top:auto; width:96px; height:62px; transform:rotate(-7deg); }
}

@media (max-width: 390px) {
  .pd-order__grid { grid-template-columns:1fr; }
  .pd-related__track { grid-auto-columns:93%; }
}

@media (prefers-reduced-motion: reduce) {
  .js .product-detail-page [data-pd-reveal],.js .product-detail-page [data-pd-reveal].is-visible { opacity:1; transform:none; transition:none; }
  .pd-gallery__main,.pd-gallery__thumb,.product-order-card,.pd-component-card,.pd-related-card__image img { transition:none !important; }
}

/* ============================================================
   V41 · PRODUCT DETAIL PROPORTION LOCK
   Desktop proportions re-balanced against approved reference.
   ============================================================ */
@media (min-width: 1181px) {
  .product-detail-page .pd-shell { width:min(1180px, calc(100% - 72px)); }
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width:min(1240px, calc(100% - 72px)); }

  .product-detail-page .pd-hero {
    min-height:0;
    padding:10px 0 18px;
  }
  .product-detail-page .pd-hero__checker {
    top:42px;
    width:84px;
    height:340px;
    opacity:.78;
  }
  .product-detail-page .pd-hero__stamp {
    top:44px;
    width:128px;
    opacity:.62;
  }
  .product-detail-page .pd-breadcrumb { margin-bottom:8px; }
  .product-detail-page .pd-hero__grid {
    grid-template-columns:minmax(0,520px) minmax(0,1fr);
    gap:30px;
    align-items:start;
  }

  .product-detail-page .pd-gallery__stage { min-height:354px; }
  .product-detail-page .pd-gallery__main {
    width:min(100%,520px);
    height:354px;
  }
  .product-detail-page .pd-gallery__thumbs { gap:9px; margin-top:8px; }
  .product-detail-page .pd-gallery__thumb { width:92px; height:64px; border-radius:9px; }

  .product-detail-page .pd-summary { padding-top:6px; }
  .product-detail-page .pd-category-pill { min-height:25px; padding-inline:10px; font-size:10px; }
  .product-detail-page .pd-summary h1 {
    margin-top:9px;
    max-width:650px;
    font-size:clamp(48px,3.4vw,58px);
    line-height:.98;
  }
  .product-detail-page .pd-tagline {
    margin-top:10px;
    max-width:650px;
    font-size:19px;
    line-height:1.25;
  }
  .product-detail-page .pd-description {
    max-width:650px;
    margin-top:8px;
    font-size:13.5px;
    line-height:1.55;
  }
  .product-detail-page .pd-components { margin-top:14px; }
  .product-detail-page .pd-section-heading { gap:14px; }
  .product-detail-page .pd-section-heading h2 { font-size:22px; }
  .product-detail-page .pd-section-heading > span,
  .product-detail-page .pd-section-heading__meta { font-size:10px; max-width:280px; }
  .product-detail-page .pd-components__grid { gap:7px; margin-top:8px; }
  .product-detail-page .pd-component-card {
    min-height:100px;
    padding:7px 6px 8px;
    grid-template-rows:58px auto;
    border-radius:9px;
  }
  .product-detail-page .pd-component-card__visual { height:58px; }
  .product-detail-page .pd-component-card__visual img { max-width:72px; max-height:54px; }
  .product-detail-page .pd-component-card p { margin-top:3px; font-size:9.5px; line-height:1.12; }

  .product-detail-page .pd-order { margin-top:14px; }
  .product-detail-page .pd-section-heading--order h2 { font-size:22px; }
  .product-detail-page .pd-section-heading--order > span { font-size:10px; max-width:320px; }
  .product-detail-page .pd-order__grid { gap:8px; margin-top:8px; }
  .product-detail-page .product-order-card { min-height:56px; padding:7px 10px; border-radius:9px; }
  .product-detail-page .product-order-card__logo img { max-height:42px; }
  .product-detail-page .product-order-card--getir-yemek,
  .product-detail-page .product-order-card--migros-yemek,
  .product-detail-page .product-order-card--yemeksepeti { padding:0; border:0; }
  .product-detail-page .product-order-card--getir-yemek .product-order-card__logo,
  .product-detail-page .product-order-card--migros-yemek .product-order-card__logo,
  .product-detail-page .product-order-card--yemeksepeti .product-order-card__logo { height:56px; }
  .product-detail-page .product-order-card--getir-yemek .product-order-card__logo img,
  .product-detail-page .product-order-card--migros-yemek .product-order-card__logo img,
  .product-detail-page .product-order-card--yemeksepeti .product-order-card__logo img { height:56px; object-fit:contain; }
  .product-detail-page .product-order-card--uber-eats .product-order-card__logo img { max-width:112px; max-height:38px; }

  .product-detail-page .pd-special { min-height:326px; }
  .product-detail-page .pd-special__inner {
    min-height:326px;
    grid-template-columns:minmax(230px,.82fr) minmax(450px,1.38fr) minmax(180px,.60fr);
    gap:22px;
    padding-block:24px 18px;
  }
  .product-detail-page .pd-special__title-row { grid-template-columns:44px 1fr; gap:11px; }
  .product-detail-page .pd-special__title-row img { width:40px; height:40px; }
  .product-detail-page .pd-special__title-row h2 { max-width:320px; font-size:32px; }
  .product-detail-page .pd-special__copy > p {
    margin:14px 0 0 55px;
    max-width:315px;
    font-size:12.8px;
    line-height:1.52;
  }
  .product-detail-page .pd-special__slogan { width:132px; margin:12px 0 0 54px; }
  .product-detail-page .pd-special__visual { min-height:284px; }
  .product-detail-page .pd-special__visual > img { width:min(100%,545px); height:280px; }
  .product-detail-page .pd-special__annotation { font-size:18px; }
  .product-detail-page .pd-special__benefits { gap:17px; }
  .product-detail-page .pd-special__benefits li { grid-template-columns:32px 1fr; gap:9px; font-size:11.5px; }
  .product-detail-page .pd-special__benefits img { width:29px; height:29px; }

  .product-detail-page .pd-related { padding:30px 0 26px; }
  .product-detail-page .pd-related__title-wrap { grid-template-columns:44px 1fr; gap:10px; }
  .product-detail-page .pd-related__title-wrap img { width:40px; height:40px; }
  .product-detail-page .pd-related__title-wrap h2 { font-size:27px; }
  .product-detail-page .pd-related__title-wrap p { font-size:11.5px; }
  .product-detail-page .pd-related__controls button { width:39px; height:39px; }
  .product-detail-page .pd-related__track { grid-auto-columns:calc((100% - 28px)/3); gap:14px; margin-top:16px; }
  .product-detail-page .pd-related-card { border-radius:10px; }
  .product-detail-page .pd-related-card__image { aspect-ratio:1.72/1; }
  .product-detail-page .pd-related-card__body { padding:11px 13px 13px; }
  .product-detail-page .pd-related-card h3 { font-size:17px; }
  .product-detail-page .pd-related-card p { margin-top:5px; min-height:36px; font-size:11.5px; line-height:1.42; }
  .product-detail-page .pd-related-card__link { margin-top:8px; font-size:11.5px; }

  .product-detail-page .pd-menu-cta__inner { min-height:84px; padding:14px 210px 14px 22px; }
  .product-detail-page .pd-menu-cta h2 { font-size:21px; }
  .product-detail-page .pd-menu-cta p { font-size:11px; }
}

/* Platform vector cards are self-contained; never stretch them beyond their intrinsic ratio. */
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo img,
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo img,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo img {
  object-fit:cover;
}

@media (max-width:1180px) {
  .product-detail-page .pd-summary h1 { font-size:clamp(43px,5.3vw,57px); }
  .product-detail-page .pd-tagline { font-size:19px; }
  .product-detail-page .pd-description { font-size:14px; }
}

/* V41 platform cards use clean local SVG panels, so they render identically in XAMPP. */
.product-detail-page .product-order-card--getir-yemek,
.product-detail-page .product-order-card--migros-yemek,
.product-detail-page .product-order-card--uber-eats,
.product-detail-page .product-order-card--yemeksepeti {
  padding:0;
  border:0;
  background:transparent;
  box-shadow:none;
}
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo,
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo,
.product-detail-page .product-order-card--uber-eats .product-order-card__logo,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo {
  width:100%;
  height:56px;
  place-items:stretch;
}
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo img,
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo img,
.product-detail-page .product-order-card--uber-eats .product-order-card__logo img,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo img {
  width:100%;
  height:56px;
  max-width:none;
  max-height:none;
  object-fit:contain;
}
.product-detail-page .product-order-card--getir-yemek .product-order-card__arrow,
.product-detail-page .product-order-card--migros-yemek .product-order-card__arrow,
.product-detail-page .product-order-card--uber-eats .product-order-card__arrow,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__arrow { display:none; }

/* ============================================================
   V42 · CONTACT PAGE
   Hero + contact info + Google Maps. Header/footer reuse site system.
   ============================================================ */
.contact-page {
  --contact-red: #e50b18;
  --contact-ink: #11100f;
  --contact-muted: #665f58;
  --contact-cream: #fff9f1;
  --contact-paper: #fffdf9;
  --contact-line: rgba(32, 25, 20, .11);
  background: var(--contact-cream);
  color: var(--contact-ink);
}
.contact-page .site-header,
.contact-page .site-header__inner { height: 74px; }
.contact-page .site-header {
  position: sticky;
  top: 0;
  z-index: 80;
  background: rgba(255, 251, 246, .98);
  border-bottom: 1px solid rgba(24, 18, 13, .07);
  backdrop-filter: blur(12px);
}
.contact-page .brand img { max-height: 48px; }
.contact-main { background: var(--contact-cream); overflow: clip; }
.contact-shell { width: min(1240px, calc(100% - 64px)); margin-inline: auto; }

.contact-hero {
  position: relative;
  isolation: isolate;
  height: clamp(340px, 34vw, 430px);
  overflow: hidden;
  background: #f4dfc4;
}
.contact-hero__bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center;
  z-index: -3;
}
.contact-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(255, 247, 235, .97) 0%, rgba(255, 247, 235, .92) 30%, rgba(255, 247, 235, .50) 47%, rgba(255, 247, 235, .04) 66%, rgba(255, 247, 235, 0) 100%);
  pointer-events: none;
}
.contact-hero__content {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding-top: 20px;
}
.contact-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
  color: #4f4943;
  font-size: 12px;
  font-weight: 650;
}
.contact-breadcrumb a { color: inherit; }
.contact-breadcrumb a:hover { color: var(--contact-red); }
.contact-breadcrumb span:nth-child(2) { color: #9d948c; font-size: 17px; }
.contact-hero__copy { position: relative; width: min(520px, 48vw); z-index: 2; }
.contact-hero__copy h1 {
  margin: 0;
  color: var(--contact-red);
  font-size: clamp(54px, 5vw, 76px);
  line-height: .94;
  letter-spacing: -.055em;
  font-weight: 900;
}
.contact-hero__copy p {
  max-width: 520px;
  margin: 18px 0 0;
  color: #27221e;
  font-size: clamp(15px, 1.3vw, 18px);
  line-height: 1.55;
  font-weight: 560;
}
.contact-hero__script {
  display: block;
  width: 168px;
  height: 70px;
  margin-top: 18px;
  object-fit: contain;
  object-position: left center;
  mix-blend-mode: multiply;
  transform: rotate(-5deg);
}
.contact-hero__stamp {
  position: absolute;
  z-index: 3;
  left: min(49%, 575px);
  top: 76px;
  width: 110px;
  height: 110px;
  object-fit: contain;
  opacity: .78;
  animation: contactStampSpin 18s linear infinite;
  pointer-events: none;
}
@keyframes contactStampSpin { to { transform: rotate(360deg); } }

.contact-info { padding: 54px 0 38px; background: #fffaf3; }
.contact-info__top {
  display: grid;
  grid-template-columns: minmax(250px, .82fr) minmax(0, 2.48fr);
  gap: 28px;
  align-items: stretch;
}
.contact-info__intro { padding: 8px 8px 8px 0; }
.contact-eyebrow {
  display: inline-block;
  color: var(--contact-red);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .16em;
}
.contact-info__intro h2 {
  margin: 14px 0 0;
  font-size: clamp(38px, 3.8vw, 58px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 900;
}
.contact-info__intro h2 em { color: var(--contact-red); font-style: normal; }
.contact-info__intro p {
  max-width: 330px;
  margin: 18px 0 0;
  color: var(--contact-muted);
  font-size: 14px;
  line-height: 1.6;
}
.contact-info__cards {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}
.contact-card {
  min-width: 0;
  min-height: 235px;
  padding: 24px 18px 20px;
  border: 1px solid var(--contact-line);
  border-radius: 16px;
  background: rgba(255, 255, 255, .84);
  box-shadow: 0 12px 28px rgba(81, 54, 31, .045);
  transition: transform .22s ease, border-color .22s ease, background .22s ease;
}
.contact-card:hover { transform: translateY(-3px); border-color: rgba(229, 11, 24, .2); background: #fff; }
.contact-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  margin-bottom: 18px;
  border-radius: 50%;
  background: #fff0ed;
}
.contact-card__icon img { width: 27px; height: 27px; }
.contact-card h3 { margin: 0; font-size: 14px; line-height: 1.1; font-weight: 850; }
.contact-card__value,
.contact-card__hours,
.contact-card__address {
  display: block;
  margin-top: 8px;
  color: #191613;
  font-size: 17px;
  line-height: 1.25;
  font-weight: 850;
}
.contact-card__value--red { color: var(--contact-red); font-size: 15px; }
.contact-card p {
  margin: 8px 0 0;
  color: #756d65;
  font-size: 11.5px;
  line-height: 1.45;
}
.contact-card__address { font-size: 14px; font-weight: 720; }
.contact-card__map-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 38px;
  margin-top: 14px;
  padding: 0 13px;
  border: 1px solid var(--contact-red);
  border-radius: 9px;
  color: var(--contact-red);
  font-size: 12px;
  font-weight: 850;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.contact-card__map-link:hover { background: var(--contact-red); color: #fff; transform: translateY(-1px); }

.contact-map {
  position: relative;
  height: 390px;
  margin-top: 22px;
  overflow: hidden;
  border: 1px solid var(--contact-line);
  border-radius: 18px;
  background: #eee8df;
  box-shadow: 0 16px 34px rgba(72, 46, 25, .05);
}
.contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }
.contact-map__badge {
  position: absolute;
  left: 20px;
  top: 20px;
  width: min(320px, calc(100% - 40px));
  padding: 15px 17px;
  border: 1px solid rgba(24, 18, 13, .09);
  border-radius: 11px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
  pointer-events: none;
}
.contact-map__badge strong { display: block; font-size: 14px; font-weight: 900; }
.contact-map__badge span { display: block; margin-top: 4px; color: #69625b; font-size: 11px; }
.contact-map__badge a { display: inline-flex; gap: 7px; margin-top: 9px; color: var(--contact-red); font-size: 11px; font-weight: 850; pointer-events: auto; }

.contact-cta { padding: 0 0 34px; background: #fffaf3; }
.contact-cta__inner {
  position: relative;
  min-height: 196px;
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(420px, 1.15fr);
  align-items: center;
  overflow: hidden;
  border: 1px solid rgba(28,22,17,.08);
  border-radius: 18px;
  background: linear-gradient(90deg, #fff5e7 0%, #fffaf2 48%, #ead4b8 100%);
}
.contact-cta__inner::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 74px;
  height: 100%;
  opacity: .82;
  background: conic-gradient(from 90deg at 50% 50%, #e50b18 0 25%, #fff5e7 0 50%, #e50b18 0 75%, #fff5e7 0) 0 0 / 48px 48px;
  mask-image: linear-gradient(90deg, #000 0 70%, transparent 100%);
}
.contact-cta__copy { position: relative; z-index: 2; padding: 28px 24px 28px 98px; }
.contact-cta__copy h2 {
  margin: 0;
  color: var(--contact-red);
  font-size: clamp(30px, 3vw, 43px);
  line-height: 1;
  letter-spacing: -.04em;
  font-weight: 900;
}
.contact-cta__copy p { margin: 10px 0 16px; color: #3f3934; font-size: 13px; }
.contact-cta__copy .button { min-width: 166px; min-height: 44px; }
.contact-cta__visual { position: relative; height: 196px; overflow: hidden; }
.contact-cta__bucket {
  position: absolute;
  z-index: 3;
  right: 34px;
  bottom: -136px;
  width: 275px;
  height: auto;
  filter: drop-shadow(0 12px 18px rgba(62, 31, 15, .12));
}
.contact-cta__chicken {
  position: absolute;
  z-index: 2;
  right: 210px;
  bottom: -34px;
  width: 470px;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(62, 31, 15, .08));
}

@media (max-width: 1080px) {
  .contact-shell { width: min(100% - 44px, 980px); }
  .contact-hero { height: 380px; }
  .contact-hero__stamp { left: 48%; width: 96px; height: 96px; }
  .contact-info__top { grid-template-columns: 1fr; gap: 22px; }
  .contact-info__intro { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 28px; align-items: end; }
  .contact-info__intro .contact-eyebrow { grid-column: 1 / -1; }
  .contact-info__intro h2 { margin-top: 2px; }
  .contact-info__intro p { margin: 0; max-width: 480px; align-self: end; }
  .contact-info__cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-card { min-height: 205px; }
  .contact-cta__inner { grid-template-columns: 1fr 1fr; }
  .contact-cta__chicken { right: 135px; width: 390px; }
  .contact-cta__bucket { right: 8px; width: 250px; }
}

@media (max-width: 760px) {
  .contact-page .site-header,
  .contact-page .site-header__inner { height: 72px; }
  .contact-shell { width: calc(100% - 28px); }
  .contact-hero { height: 470px; }
  .contact-hero__bg { object-position: 63% center; }
  .contact-hero__overlay { background: linear-gradient(90deg, rgba(255,247,235,.97) 0%, rgba(255,247,235,.93) 52%, rgba(255,247,235,.48) 80%, rgba(255,247,235,.18) 100%); }
  .contact-hero__content { justify-content: flex-start; padding-top: 54px; }
  .contact-breadcrumb { margin-bottom: 18px; font-size: 11px; }
  .contact-hero__copy { width: min(430px, 92%); }
  .contact-hero__copy h1 { font-size: clamp(48px, 15vw, 64px); }
  .contact-hero__copy p { font-size: 14px; max-width: 390px; }
  .contact-hero__script { width: 145px; height: 58px; margin-top: 14px; }
  .contact-hero__stamp { left: auto; right: 17px; top: 58px; width: 82px; height: 82px; opacity: .72; }
  .contact-info { padding-top: 38px; }
  .contact-info__intro { display: block; }
  .contact-info__intro h2 { font-size: 42px; margin-top: 12px; }
  .contact-info__intro p { margin-top: 14px; }
  .contact-info__cards { grid-template-columns: 1fr 1fr; gap: 10px; }
  .contact-card { min-height: 196px; padding: 20px 15px; border-radius: 14px; }
  .contact-card__icon { width: 48px; height: 48px; margin-bottom: 14px; }
  .contact-card__value, .contact-card__hours { font-size: 15px; }
  .contact-map { height: 340px; border-radius: 14px; }
  .contact-map__badge { left: 12px; top: 12px; width: min(280px, calc(100% - 24px)); }
  .contact-cta__inner { min-height: 330px; grid-template-columns: 1fr; align-items: start; }
  .contact-cta__copy { padding: 26px 22px 0 82px; }
  .contact-cta__visual { height: 175px; }
  .contact-cta__chicken { right: 78px; bottom: -28px; width: 340px; }
  .contact-cta__bucket { right: -16px; bottom: -132px; width: 235px; }
}

@media (max-width: 470px) {
  .contact-hero { height: 450px; }
  .contact-hero__bg { object-position: 69% center; }
  .contact-hero__copy { width: 94%; }
  .contact-hero__copy h1 { font-size: 47px; }
  .contact-hero__stamp { width: 70px; height: 70px; top: 50px; right: 12px; }
  .contact-info__cards { grid-template-columns: 1fr; }
  .contact-card { min-height: 0; }
  .contact-map { height: 300px; }
  .contact-map__badge { padding: 12px 13px; }
  .contact-cta__copy { padding-left: 68px; }
  .contact-cta__copy h2 { font-size: 31px; }
  .contact-cta__chicken { right: 52px; width: 290px; }
  .contact-cta__bucket { width: 200px; right: -28px; bottom: -112px; }
}

@media (prefers-reduced-motion: reduce) {
  .contact-hero__stamp { animation: none; }
  .contact-card, .contact-card__map-link { transition: none; }
}

/* ============================================================
   V43 · GLOBAL CLASSIC / STICKY HEADER
   Shared visual contract: white/cream bar, active red pill,
   separate from hero imagery on every public page.
   ============================================================ */
:root {
  --global-header-h: 92px;
  --global-header-bg: #fffaf4;
  --global-header-line: rgba(36, 27, 20, .09);
  --global-header-shadow: 0 7px 22px rgba(48, 25, 12, .045);
}

body > .site-header,
.menu-page > .site-header,
.product-detail-page > .site-header,
.contact-page > .site-header {
  position: sticky !important;
  inset: auto !important;
  top: 0 !important;
  z-index: 90 !important;
  width: 100%;
  height: var(--global-header-h) !important;
  pointer-events: auto;
  background: rgba(255,250,244,.985) !important;
  border: 0 !important;
  border-bottom: 1px solid var(--global-header-line) !important;
  box-shadow: var(--global-header-shadow) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body > .site-header::after,
.menu-page > .site-header::after,
.product-detail-page > .site-header::after,
.contact-page > .site-header::after {
  content: "";
  position: absolute;
  right: clamp(22px, 3vw, 54px);
  top: 0;
  width: 118px;
  height: 100%;
  pointer-events: none;
  opacity: .18;
  background:
    linear-gradient(90deg, transparent 0 58%, rgba(226,6,19,.16) 58% 71%, transparent 71% 84%, rgba(226,6,19,.10) 84%),
    linear-gradient(0deg, transparent 0 55%, rgba(226,6,19,.12) 55% 70%, transparent 70%);
  mask-image: linear-gradient(90deg, transparent, #000 42%, #000 100%);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 42%, #000 100%);
}

body > .site-header .site-header__inner,
.menu-page > .site-header .site-header__inner,
.product-detail-page > .site-header .site-header__inner,
.contact-page > .site-header .site-header__inner {
  width: min(calc(100% - 64px), 1500px) !important;
  height: 100% !important;
  margin: 0 auto;
  padding: 0 !important;
  display: grid;
  grid-template-columns: minmax(155px, 205px) minmax(430px, 1fr) auto !important;
  align-items: center !important;
  gap: clamp(24px, 3vw, 52px) !important;
}

body > .site-header .brand,
.menu-page > .site-header .brand,
.product-detail-page > .site-header .brand,
.contact-page > .site-header .brand {
  width: 152px !important;
  justify-self: start;
  opacity: 1 !important;
  transform: none !important;
  transition: transform .22s ease, opacity .22s ease !important;
}
body > .site-header .brand:hover { transform: translateY(-1px) !important; }
body > .site-header .brand img,
.menu-page > .site-header .brand img,
.product-detail-page > .site-header .brand img,
.contact-page > .site-header .brand img {
  width: 100%;
  max-height: 58px !important;
  height: auto;
  object-fit: contain;
}

body > .site-header .site-nav,
.menu-page > .site-header .site-nav,
.product-detail-page > .site-header .site-nav,
.contact-page > .site-header .site-nav {
  justify-self: center;
  width: auto !important;
  height: 54px !important;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

body > .site-header .site-nav a,
.menu-page > .site-header .site-nav a,
.product-detail-page > .site-header .site-nav a,
.contact-page > .site-header .site-nav a {
  position: relative;
  height: 46px !important;
  min-width: 0;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 999px;
  color: #171310 !important;
  background: transparent;
  font-size: 15px !important;
  line-height: 1 !important;
  font-weight: 700 !important;
  white-space: nowrap;
  opacity: 1 !important;
  transform: none !important;
  transition: color .18s ease, background .18s ease, transform .18s ease, box-shadow .18s ease !important;
}
body > .site-header .site-nav a:hover,
.menu-page > .site-header .site-nav a:hover,
.product-detail-page > .site-header .site-nav a:hover,
.contact-page > .site-header .site-nav a:hover {
  color: var(--joul-red) !important;
  background: rgba(226,6,19,.055);
  transform: translateY(-1px) !important;
}
body > .site-header .site-nav a.is-current,
.menu-page > .site-header .site-nav a.is-current,
.product-detail-page > .site-header .site-nav a.is-current,
.contact-page > .site-header .site-nav a.is-current {
  min-width: 108px;
  padding-inline: 22px;
  color: #fff !important;
  background: var(--joul-red) !important;
  box-shadow: 0 8px 18px rgba(226,6,19,.16);
}
body > .site-header .site-nav a.is-current:hover,
.menu-page > .site-header .site-nav a.is-current:hover,
.product-detail-page > .site-header .site-nav a.is-current:hover,
.contact-page > .site-header .site-nav a.is-current:hover {
  color: #fff !important;
  background: #d80612 !important;
}
body > .site-header .site-nav a.is-current::after,
.menu-page > .site-header .site-nav a.is-current::after,
.product-detail-page > .site-header .site-nav a.is-current::after,
.contact-page > .site-header .site-nav a.is-current::after {
  display: none !important;
  content: none !important;
}

body > .site-header .site-header__actions,
.menu-page > .site-header .site-header__actions,
.product-detail-page > .site-header .site-header__actions,
.contact-page > .site-header .site-header__actions {
  position: relative;
  z-index: 2;
  justify-self: end;
  display: flex;
  align-items: center;
  gap: 12px !important;
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}
body > .site-header .icon-button,
.menu-page > .site-header .icon-button,
.product-detail-page > .site-header .icon-button,
.contact-page > .site-header .icon-button {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px;
  display: grid !important;
  place-items: center;
  border: 1px solid rgba(31,24,19,.075) !important;
  border-radius: 50%;
  color: #171310 !important;
  background: #fff6e9 !important;
  box-shadow: 0 5px 14px rgba(48,25,12,.045) !important;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease !important;
}
body > .site-header .icon-button:hover,
.menu-page > .site-header .icon-button:hover,
.product-detail-page > .site-header .icon-button:hover,
.contact-page > .site-header .icon-button:hover {
  transform: translateY(-1px);
  background: #fff0dd !important;
  border-color: rgba(226,6,19,.12) !important;
}
body > .site-header .button--header,
.menu-page > .site-header .button--header,
.product-detail-page > .site-header .button--header,
.contact-page > .site-header .button--header {
  min-width: 184px !important;
  min-height: 52px !important;
  height: 52px !important;
  padding: 0 25px !important;
  gap: 23px !important;
  border: 0 !important;
  border-radius: 999px !important;
  color: #fff !important;
  background: var(--joul-red) !important;
  box-shadow: 0 9px 21px rgba(226,6,19,.17) !important;
  font-size: 15px !important;
  font-weight: 750 !important;
}
body > .site-header .button--header:hover,
.menu-page > .site-header .button--header:hover,
.product-detail-page > .site-header .button--header:hover,
.contact-page > .site-header .button--header:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 25px rgba(226,6,19,.22) !important;
}

/* Header is now a real page row; homepage hero starts below it. */
body:not(.menu-page):not(.product-detail-page):not(.contact-page) .hero {
  height: calc(100svh - var(--global-header-h));
  min-height: 610px;
  max-height: 888px;
}

/* Focus treatment on the light global header. */
.site-header a:focus-visible,
.site-header button:focus-visible {
  outline: 2px solid var(--joul-red);
  outline-offset: 3px;
}

@media (max-width: 1180px) {
  :root { --global-header-h: 84px; }
  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner {
    width: calc(100% - 40px) !important;
    grid-template-columns: 145px minmax(390px,1fr) auto !important;
    gap: 18px !important;
  }
  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .contact-page > .site-header .brand { width: 138px !important; }
  body > .site-header .site-nav a,
  .menu-page > .site-header .site-nav a,
  .product-detail-page > .site-header .site-nav a,
  .contact-page > .site-header .site-nav a { padding-inline: 13px; font-size: 14px !important; }
  body > .site-header .site-nav a.is-current,
  .menu-page > .site-header .site-nav a.is-current,
  .product-detail-page > .site-header .site-nav a.is-current,
  .contact-page > .site-header .site-nav a.is-current { min-width: 92px; padding-inline: 17px; }
  body > .site-header .button--header,
  .menu-page > .site-header .button--header,
  .product-detail-page > .site-header .button--header,
  .contact-page > .site-header .button--header { min-width: 154px !important; height: 48px !important; min-height: 48px !important; padding-inline: 20px !important; }
  body > .site-header::after,
  .menu-page > .site-header::after,
  .product-detail-page > .site-header::after,
  .contact-page > .site-header::after { display: none; }
}

@media (max-width: 900px) {
  :root { --global-header-h: 74px; }
  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .contact-page > .site-header .brand { width: 116px !important; }
  body > .site-header .site-nav,
  .menu-page > .site-header .site-nav,
  .product-detail-page > .site-header .site-nav,
  .contact-page > .site-header .site-nav { display: none !important; }
  body > .site-header .site-header__actions,
  .menu-page > .site-header .site-header__actions,
  .product-detail-page > .site-header .site-header__actions,
  .contact-page > .site-header .site-header__actions { gap: 8px !important; }
  body > .site-header .icon-button,
  .menu-page > .site-header .icon-button,
  .product-detail-page > .site-header .icon-button,
  .contact-page > .site-header .icon-button { display: none !important; }
  body > .site-header .button--header,
  .menu-page > .site-header .button--header,
  .product-detail-page > .site-header .button--header,
  .contact-page > .site-header .button--header { display: none !important; }
  body > .site-header .mobile-order,
  .menu-page > .site-header .mobile-order,
  .product-detail-page > .site-header .mobile-order,
  .contact-page > .site-header .mobile-order {
    display: inline-flex !important;
    min-height: 42px;
    padding: 0 16px;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    color: #fff;
    background: var(--joul-red);
    font-size: 12px;
    font-weight: 800;
  }
  body > .site-header .menu-toggle,
  .menu-page > .site-header .menu-toggle,
  .product-detail-page > .site-header .menu-toggle,
  .contact-page > .site-header .menu-toggle {
    display: grid !important;
    place-items: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(31,24,19,.08);
    background: #fff6e9;
  }
  body:not(.menu-page):not(.product-detail-page):not(.contact-page) .hero {
    height: calc(100svh - var(--global-header-h));
    min-height: 600px;
  }
}

@media (max-width: 520px) {
  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner { width: calc(100% - 22px) !important; }
  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .contact-page > .site-header .brand { width: 104px !important; }
  body > .site-header .mobile-order,
  .menu-page > .site-header .mobile-order,
  .product-detail-page > .site-header .mobile-order,
  .contact-page > .site-header .mobile-order { min-height: 40px; padding-inline: 14px; font-size: 11px; }
  body > .site-header .menu-toggle,
  .menu-page > .site-header .menu-toggle,
  .product-detail-page > .site-header .menu-toggle,
  .contact-page > .site-header .menu-toggle { width: 40px; height: 40px; }
}

/* ============================================================
   V44 · JOUL HAKKINDA — HERO + İLK BÖLÜM
   Contact hero photograph is shared deliberately. The heavy
   cream wash was reduced so the source image keeps its natural
   warm tone on both Contact and About pages.
   ============================================================ */
.contact-hero__overlay {
  background: linear-gradient(
    90deg,
    rgba(255, 247, 235, .34) 0%,
    rgba(255, 247, 235, .22) 28%,
    rgba(255, 247, 235, .10) 46%,
    rgba(255, 247, 235, .02) 62%,
    rgba(255, 247, 235, 0) 100%
  );
}

.about-page {
  --about-red: #e20613;
  --about-ink: #12100e;
  --about-cream: #fff7e9;
  background: var(--about-cream);
  color: var(--about-ink);
}

.about-main {
  background: var(--about-cream);
  overflow: clip;
}

.about-hero .contact-hero__copy h1 {
  color: var(--about-red);
}

.about-intro {
  position: relative;
  isolation: isolate;
  min-height: clamp(610px, 41vw, 790px);
  overflow: hidden;
  background: #fff4df;
}

.about-intro__background {
  position: absolute;
  inset: 0;
  z-index: -3;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  object-position: center center;
}

.about-intro__veil {
  position: absolute;
  inset: 0;
  z-index: -2;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    rgba(255, 248, 235, .10) 0%,
    rgba(255, 248, 235, .04) 40%,
    rgba(255, 248, 235, 0) 56%
  );
}

.about-intro__inner {
  position: relative;
  width: min(1240px, calc(100% - 64px));
  min-height: inherit;
  margin-inline: auto;
  display: flex;
  align-items: center;
}

.about-intro__copy {
  width: min(49%, 610px);
  padding: 54px 0 58px;
}

.about-intro__eyebrow {
  display: inline-block;
  margin-bottom: 19px;
  color: var(--about-red);
  font-size: clamp(13px, .95vw, 16px);
  line-height: 1;
  font-weight: 900;
  letter-spacing: .055em;
}

.about-intro__copy h2 {
  margin: 0 0 28px;
  color: var(--about-ink);
  font-size: clamp(54px, 5.3vw, 82px);
  line-height: .94;
  font-weight: 900;
  letter-spacing: -.06em;
}

.about-intro__copy h2 span {
  color: var(--about-red);
}

.about-intro__copy p {
  max-width: 595px;
  margin: 0;
  color: #332f2a;
  font-size: clamp(15px, 1.04vw, 18px);
  line-height: 1.48;
  font-weight: 500;
  letter-spacing: -.018em;
}

.about-intro__copy p + p {
  margin-top: 22px;
}

.about-intro__copy strong {
  color: #171411;
  font-weight: 850;
}

.about-intro__button {
  min-width: 192px;
  min-height: 54px;
  margin-top: 28px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-radius: 2px;
  color: #fff;
  background: var(--about-red);
  box-shadow: 0 10px 20px rgba(226, 6, 19, .14);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: .025em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.about-intro__button:hover {
  transform: translateY(-2px);
  background: #d80612;
  box-shadow: 0 14px 26px rgba(226, 6, 19, .20);
}

.about-intro__button span:last-child {
  font-size: 20px;
  font-weight: 500;
  transform: translateY(-1px);
}

@media (max-width: 1080px) {
  .about-intro {
    min-height: 620px;
  }

  .about-intro__inner {
    width: min(100% - 44px, 980px);
  }

  .about-intro__copy {
    width: min(52%, 520px);
    padding-block: 46px;
  }

  .about-intro__copy h2 {
    font-size: clamp(52px, 7vw, 68px);
  }

  .about-intro__copy p {
    font-size: 15px;
  }
}

@media (max-width: 760px) {
  .contact-hero__overlay {
    background: linear-gradient(
      90deg,
      rgba(255, 247, 235, .58) 0%,
      rgba(255, 247, 235, .46) 44%,
      rgba(255, 247, 235, .20) 72%,
      rgba(255, 247, 235, .06) 100%
    );
  }

  .about-intro {
    min-height: 0;
    display: grid;
    grid-template-rows: minmax(210px, 58vw) auto;
    background: #fff7e9;
  }

  .about-intro__background {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 72% center;
  }

  .about-intro__veil {
    display: none;
  }

  .about-intro__inner {
    grid-row: 2;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 0 22px 46px;
    display: block;
    background: #fff7e9;
  }

  .about-intro__copy {
    width: 100%;
    max-width: 600px;
    margin: -16px auto 0;
    padding: 32px 24px 0;
    border-radius: 18px 18px 0 0;
    background: #fff7e9;
  }

  .about-intro__eyebrow {
    margin-bottom: 15px;
    font-size: 12px;
  }

  .about-intro__copy h2 {
    margin-bottom: 22px;
    font-size: clamp(46px, 13vw, 62px);
  }

  .about-intro__copy p {
    max-width: none;
    font-size: 15px;
    line-height: 1.5;
  }

  .about-intro__copy p + p {
    margin-top: 18px;
  }

  .about-intro__button {
    min-height: 52px;
    margin-top: 24px;
  }
}

@media (max-width: 470px) {
  .about-hero .contact-hero__copy h1 {
    font-size: 44px;
  }

  .about-hero .contact-hero__copy p {
    max-width: 315px;
  }

  .about-intro {
    grid-template-rows: 205px auto;
  }

  .about-intro__background {
    object-position: 70% center;
  }

  .about-intro__inner {
    padding-inline: 14px;
    padding-bottom: 38px;
  }

  .about-intro__copy {
    padding-inline: 14px;
  }

  .about-intro__copy h2 {
    font-size: 46px;
  }

  .about-intro__copy p {
    font-size: 14px;
    line-height: 1.52;
  }

  .about-intro__button {
    width: 100%;
    max-width: 220px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-intro__button { transition: none; }
}

/* ============================================================
   V45 · RESPONSIVE RHYTHM + MOBILE RECOMPOSITION
   - Adds breathing room between visually heavy sections.
   - Rebuilds shared Contact/About hero for mobile readability.
   - Reflows About intro into image + editorial copy on mobile.
   - Rebuilds homepage About preview into clear mobile blocks.
   ============================================================ */

/* Section rhythm: avoid two full-bleed visual sections touching edge-to-edge. */
.about-main .about-intro {
  margin-top: clamp(22px, 2vw, 32px);
}

.about-preview {
  margin-bottom: clamp(24px, 2.2vw, 36px);
}

@media (max-width: 760px) {
  /* Shared mobile shell */
  .contact-shell {
    width: calc(100% - 32px);
  }

  /* Shared About / Contact hero: image remains visible, copy gets one calm zone. */
  .contact-page .contact-hero,
  .about-page .contact-hero {
    height: 360px;
    min-height: 360px;
    background: #ead5b8;
  }

  .contact-page .contact-hero__bg,
  .about-page .contact-hero__bg {
    object-position: 68% center;
  }

  .contact-page .contact-hero__overlay,
  .about-page .contact-hero__overlay {
    background:
      linear-gradient(0deg,
        rgba(255,248,239,.96) 0%,
        rgba(255,248,239,.88) 23%,
        rgba(255,248,239,.60) 46%,
        rgba(255,248,239,.20) 68%,
        rgba(255,248,239,0) 100%),
      linear-gradient(90deg,
        rgba(255,248,239,.24) 0%,
        rgba(255,248,239,.08) 52%,
        rgba(255,248,239,0) 100%);
  }

  .contact-page .contact-hero__content,
  .about-page .contact-hero__content {
    justify-content: flex-end;
    align-items: flex-start;
    padding-top: 0;
    padding-bottom: 28px;
  }

  .contact-page .contact-breadcrumb,
  .about-page .contact-breadcrumb {
    margin-bottom: 10px;
    gap: 6px;
    color: #514a43;
    font-size: 10px;
    line-height: 1.2;
  }

  .contact-page .contact-breadcrumb span:nth-child(2),
  .about-page .contact-breadcrumb span:nth-child(2) {
    font-size: 14px;
  }

  .contact-page .contact-hero__copy,
  .about-page .contact-hero__copy {
    width: min(100%, 390px);
  }

  .contact-page .contact-hero__copy h1,
  .about-page .contact-hero__copy h1 {
    font-size: clamp(38px, 11.5vw, 46px);
    line-height: .93;
    letter-spacing: -.055em;
  }

  .contact-page .contact-hero__copy p,
  .about-page .contact-hero__copy p {
    max-width: 335px;
    margin-top: 11px;
    color: #2a2520;
    font-size: 13px;
    line-height: 1.45;
    font-weight: 540;
  }

  .contact-page .contact-hero__script,
  .about-page .contact-hero__script,
  .contact-page .contact-hero__stamp,
  .about-page .contact-hero__stamp {
    display: none;
  }

  /* Contact content: less oversized typography and more compact cards. */
  .contact-page .contact-info {
    margin-top: 18px;
    padding: 34px 0 30px;
    border-radius: 22px 22px 0 0;
  }

  .contact-page .contact-info__top {
    gap: 22px;
  }

  .contact-page .contact-info__intro h2 {
    margin-top: 10px;
    font-size: clamp(36px, 10.5vw, 42px);
    line-height: .94;
  }

  .contact-page .contact-info__intro p {
    max-width: 390px;
    margin-top: 13px;
    font-size: 13px;
    line-height: 1.55;
  }

  .contact-page .contact-info__cards {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .contact-page .contact-card {
    min-height: 0;
    padding: 18px;
    border-radius: 16px;
  }

  .contact-page .contact-card__icon {
    width: 44px;
    height: 44px;
    margin-bottom: 12px;
  }

  .contact-page .contact-card__icon img {
    width: 23px;
    height: 23px;
  }

  .contact-page .contact-map {
    margin-top: 18px;
  }

  /* About: real separation from the hero, no overlap trick on small screens. */
  .about-main .about-intro {
    margin-top: 18px;
  }

  .about-intro {
    display: grid;
    grid-template-rows: 228px auto;
    min-height: 0;
    padding-bottom: 36px;
    overflow: visible;
    background: #fff7e9;
  }

  .about-intro__background {
    position: relative;
    inset: auto;
    grid-row: 1;
    width: 100%;
    height: 228px;
    object-fit: cover;
    object-position: 72% center;
    border-radius: 0 0 18px 18px;
  }

  .about-intro__inner {
    grid-row: 2;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: 20px 18px 0;
    display: block;
    background: transparent;
  }

  .about-intro__copy {
    width: 100%;
    max-width: 560px;
    margin: 0 auto;
    padding: 26px 4px 0;
    border: 0;
    border-radius: 0;
    background: transparent;
  }

  .about-intro__eyebrow {
    margin-bottom: 13px;
    font-size: 11px;
    letter-spacing: .09em;
  }

  .about-intro__copy h2 {
    margin-bottom: 18px;
    font-size: clamp(38px, 11vw, 46px);
    line-height: .95;
  }

  .about-intro__copy p {
    font-size: 14px;
    line-height: 1.56;
    letter-spacing: -.012em;
  }

  .about-intro__copy p + p {
    margin-top: 16px;
  }

  .about-intro__button {
    width: min(100%, 230px);
    min-height: 50px;
    margin-top: 22px;
    padding-inline: 18px;
    border-radius: 10px;
    justify-content: space-between;
  }

  /* Homepage About preview: mobile is a new one-column composition, not desktop squeezed down. */
  .about-preview {
    margin-bottom: 18px;
    padding: 0 0 34px;
    min-height: 0;
    background-position: center top;
    background-size: cover;
  }

  .about-preview__inner {
    display: flex;
    width: 100%;
    min-height: 0;
    flex-direction: column;
  }

  .about-preview__collage {
    position: relative;
    order: 1;
    left: auto;
    top: auto;
    width: 100%;
    height: clamp(300px, 88vw, 360px);
    margin: 0;
    overflow: hidden;
    background: rgba(0,0,0,.08);
  }

  .about-preview__store-polaroid {
    left: -9%;
    top: 12px;
    width: min(66vw, 285px);
  }

  .about-preview__kitchen-polaroid {
    left: 48%;
    top: 36px;
    width: min(54vw, 230px);
  }

  .about-preview__chicken-foreground {
    left: -8%;
    bottom: -18%;
    width: min(92vw, 380px);
  }

  .about-preview__content {
    position: relative;
    order: 2;
    left: auto;
    top: auto;
    width: auto;
    margin: 0;
    padding: 34px 20px 28px;
    text-align: left;
  }

  .about-preview__eyebrow {
    margin-bottom: 10px;
    font-size: 10px;
    letter-spacing: .30em;
  }

  .about-preview__title {
    width: auto;
    font-size: clamp(38px, 11.2vw, 46px);
    line-height: .95;
  }

  .about-preview__copy {
    max-width: 540px;
    margin-top: 18px;
    font-size: 13.5px;
    line-height: 1.58;
  }

  .about-preview__copy p + p {
    margin-top: 13px;
  }

  .about-preview__button {
    width: min(100%, 230px);
    min-height: 50px;
    margin-top: 20px;
    padding-inline: 20px;
    font-size: 13px;
  }

  .about-preview__features {
    position: relative;
    order: 3;
    left: auto;
    right: auto;
    bottom: auto;
    width: auto;
    min-height: 0;
    margin: 0 16px;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 10px;
    overflow: visible;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
  }

  .about-preview__feature-panel {
    display: none;
  }

  .about-preview__feature {
    min-height: 94px;
    display: grid;
    grid-template-columns: 46px 1fr;
    grid-template-rows: auto auto;
    column-gap: 14px;
    align-content: center;
    padding: 17px 18px;
    border: 1px solid rgba(255,255,255,.08);
    border-radius: 18px;
    background: rgba(255,255,255,.045);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.025);
    text-align: left;
  }

  .about-preview__feature:first-of-type,
  .about-preview__feature:last-of-type {
    padding-block: 17px;
  }

  .about-preview__feature + .about-preview__feature::before {
    content: none;
    display: none;
  }

  .about-preview__feature-icon {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: center;
    width: 36px;
    margin: 0;
  }

  .about-preview__feature h3 {
    grid-column: 2;
    align-self: end;
    font-size: 16px;
    line-height: 1.15;
  }

  .about-preview__feature p {
    grid-column: 2;
    max-width: none;
    margin: 6px 0 0;
    font-size: 12.5px;
    line-height: 1.42;
  }

  .about-preview__bottom-decor,
  .about-preview__handwriting--top {
    display: none;
  }
}

@media (max-width: 470px) {
  .contact-page .contact-hero,
  .about-page .contact-hero {
    height: 340px;
    min-height: 340px;
  }

  .contact-page .contact-hero__bg,
  .about-page .contact-hero__bg {
    object-position: 70% center;
  }

  .contact-page .contact-hero__content,
  .about-page .contact-hero__content {
    padding-bottom: 24px;
  }

  .about-intro {
    grid-template-rows: 210px auto;
    padding-bottom: 30px;
  }

  .about-intro__background {
    height: 210px;
    object-position: 72% center;
  }

  .about-intro__inner {
    padding: 18px 16px 0;
  }

  .about-intro__copy {
    padding: 22px 0 0;
  }

  .about-intro__copy h2 {
    font-size: 40px;
  }

  .about-preview__collage {
    height: 300px;
  }

  .about-preview__store-polaroid {
    left: -11%;
    width: 69vw;
  }

  .about-preview__kitchen-polaroid {
    left: 49%;
    width: 56vw;
  }

  .about-preview__chicken-foreground {
    left: -11%;
    bottom: -12%;
    width: 96vw;
  }

  .about-preview__content {
    padding: 30px 18px 26px;
  }

  .about-preview__title {
    font-size: 40px;
  }

  .about-preview__features {
    margin-inline: 14px;
  }
}

@media (max-width: 360px) {
  .contact-shell {
    width: calc(100% - 26px);
  }

  .contact-page .contact-hero__copy h1,
  .about-page .contact-hero__copy h1 {
    font-size: 36px;
  }

  .contact-page .contact-hero__copy p,
  .about-page .contact-hero__copy p {
    font-size: 12.5px;
  }

  .about-intro__inner {
    padding-inline: 14px;
  }

  .about-intro__copy h2,
  .about-preview__title {
    font-size: 37px;
  }

  .about-preview__content {
    padding-inline: 16px;
  }

  .about-preview__feature {
    grid-template-columns: 42px 1fr;
    padding-inline: 15px;
  }
}

/* ============================================================
   V46 · SECTION BLEND TRANSITIONS
   Physical spacer bands made the visual cut more obvious.
   V46 removes those gaps and blends neighboring sections in-place.
   ============================================================ */

/* About page: hero and intro should read as one continuous composition. */
.about-main .about-intro {
  margin-top: 0 !important;
}

.about-page .about-hero {
  position: relative;
  z-index: 2;
}

.about-page .about-hero::after {
  content: "";
  position: absolute;
  z-index: 4;
  left: 0;
  right: 0;
  bottom: -1px;
  height: clamp(44px, 4.4vw, 72px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(255, 247, 233, 0) 0%,
    rgba(255, 247, 233, .20) 34%,
    rgba(255, 247, 233, .68) 72%,
    #fff7e9 100%
  );
}

.about-page .about-intro::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: -1px;
  height: clamp(48px, 4.8vw, 78px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    #fff7e9 0%,
    rgba(255, 247, 233, .82) 24%,
    rgba(255, 247, 233, .34) 60%,
    rgba(255, 247, 233, 0) 100%
  );
}

/* Homepage: replace the empty spacer with an actual dark-to-cream blend. */
.about-preview {
  margin-bottom: 0 !important;
}

.delivery-cta {
  margin-top: 0 !important;
}

.delivery-cta::before {
  content: "";
  position: absolute;
  z-index: -3;
  left: 0;
  right: 0;
  top: 0;
  height: clamp(34px, 3.2vw, 56px);
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(29, 29, 29, .72) 0%,
    rgba(90, 79, 68, .30) 38%,
    rgba(255, 248, 237, 0) 100%
  );
}

@media (max-width: 760px) {
  .about-main .about-intro {
    margin-top: 0 !important;
  }

  .about-page .about-hero::after {
    height: 42px;
    background: linear-gradient(
      180deg,
      rgba(255, 247, 233, 0) 0%,
      rgba(255, 247, 233, .42) 52%,
      #fff7e9 100%
    );
  }

  .about-page .about-intro::before {
    height: 38px;
    background: linear-gradient(
      180deg,
      #fff7e9 0%,
      rgba(255, 247, 233, .72) 36%,
      rgba(255, 247, 233, 0) 100%
    );
  }

  .about-preview {
    margin-bottom: 0 !important;
  }

  .delivery-cta::before {
    height: 30px;
    background: linear-gradient(
      180deg,
      rgba(29, 29, 29, .72) 0%,
      rgba(255, 248, 237, 0) 100%
    );
  }
}

/* ============================================================
   V47 · JOUL HAKKINDA — REFERANS UYUMLU LEZZET BÖLÜMÜ
   Hero korunur. Eski tam-arka-plan about-intro yerine, referanstaki
   iki kolonlu tabak + içerik + özellikler düzeni kullanılır.
   ============================================================ */
.about-story {
  position: relative;
  isolation: isolate;
  background: #fbfaf7;
  color: var(--about-ink, #12100e);
  overflow: hidden;
}

.about-story__inner {
  width: min(1320px, calc(100% - 72px));
  min-height: 610px;
  margin-inline: auto;
  padding: clamp(52px, 4.2vw, 72px) 0 clamp(50px, 4vw, 66px);
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(48px, 6vw, 104px);
}

.about-story__visual {
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

@media (min-width: 901px) {
  .about-story__visual {
    transform: translateY(-18px);
  }
}

.about-story__visual-scene {
  position: relative;
  width: min(100%, 690px);
  aspect-ratio: 1180 / 886;
}

.about-story__bg-garnish,
.about-story__main-burger {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  user-select: none;
  -webkit-user-drag: none;
  will-change: transform;
}

.about-story__bg-garnish {
  left: 2%;
  top: 4%;
  width: 92%;
  z-index: 1;
  opacity: .98;
  transform: rotate(-7deg) translateY(0);
  transform-origin: center center;
  animation: aboutStoryBgFloat 5.8s ease-in-out infinite;
}

.about-story__main-burger {
  left: 12%;
  bottom: 2%;
  width: 82%;
  z-index: 2;
  transform: rotate(6deg) translateY(0);
  transform-origin: center center;
  filter: drop-shadow(0 24px 26px rgba(50, 34, 19, .09));
  animation: aboutStoryMainFloat 6.6s ease-in-out infinite;
}

@keyframes aboutStoryBgFloat {
  0%, 100% { transform: rotate(-7deg) translateY(0); }
  50% { transform: rotate(-7deg) translateY(-8px); }
}

@keyframes aboutStoryMainFloat {
  0%, 100% { transform: rotate(6deg) translateY(0); }
  50% { transform: rotate(6deg) translateY(-5px); }
}

.about-story__content {
  width: min(100%, 640px);
  justify-self: start;
}

.about-story__content h2 {
  margin: 0;
  color: #11100f;
  font-size: clamp(43px, 3.55vw, 62px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.055em;
}

.about-story__content h2 span {
  color: var(--about-red, #e20613);
}

.about-story__lead {
  max-width: 630px;
  margin: 18px 0 0;
  color: #4f5258;
  font-size: clamp(15px, 1vw, 17px);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: -.012em;
}

.about-story__features {
  margin-top: 28px;
  display: grid;
  gap: 24px;
}

.about-story__feature {
  margin: 0;
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: start;
  gap: 14px;
}

.about-story__check {
  position: relative;
  width: 31px;
  height: 31px;
  margin-top: 1px;
  display: block;
  border-radius: 50%;
  background: var(--about-red, #e20613);
  box-shadow: 0 6px 14px rgba(226, 6, 19, .10);
}

.about-story__check::after {
  content: "";
  position: absolute;
  left: 9px;
  top: 7px;
  width: 10px;
  height: 6px;
  border-left: 2.5px solid #fff;
  border-bottom: 2.5px solid #fff;
  transform: rotate(-45deg);
}

.about-story__feature h3 {
  margin: 0;
  color: #171412;
  font-size: clamp(18px, 1.22vw, 21px);
  line-height: 1.15;
  font-weight: 850;
  letter-spacing: -.028em;
}

.about-story__feature p {
  max-width: 590px;
  margin: 5px 0 0;
  color: #555962;
  font-size: clamp(14px, .93vw, 16px);
  line-height: 1.48;
  font-weight: 500;
  letter-spacing: -.01em;
}

.about-story__button {
  width: fit-content;
  min-width: 210px;
  min-height: 52px;
  margin-top: 28px;
  padding: 0 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  border-radius: 999px;
  color: #fff;
  background: var(--about-red, #e20613);
  box-shadow: 0 12px 24px rgba(226, 6, 19, .14);
  font-size: 14px;
  line-height: 1;
  font-weight: 800;
  letter-spacing: -.01em;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.about-story__button:hover {
  transform: translateY(-2px);
  background: #d40712;
  box-shadow: 0 16px 30px rgba(226, 6, 19, .20);
}

.about-story__button:focus-visible {
  outline: 3px solid rgba(226, 6, 19, .24);
  outline-offset: 4px;
}

.about-story__button-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 20px;
  display: inline-block;
  background: currentColor;
  -webkit-mask: url('../icons/menu-categories/burger.svg') center / contain no-repeat;
  mask: url('../icons/menu-categories/burger.svg') center / contain no-repeat;
}

.about-story__button-arrow {
  margin-left: 12px;
  font-size: 19px;
  line-height: 1;
  font-weight: 500;
  transform: translateY(-1px);
}

/* V46'daki hero blend yeni açık bölüm rengine bağlanır. */
.about-page .about-hero::after {
  background: linear-gradient(
    180deg,
    rgba(251, 250, 247, 0) 0%,
    rgba(251, 250, 247, .18) 36%,
    rgba(251, 250, 247, .68) 74%,
    #fbfaf7 100%
  );
}

@media (max-width: 1199px) {
  .about-story__inner {
    width: min(1100px, calc(100% - 52px));
    min-height: 590px;
    gap: 42px;
  }

  .about-story__visual-scene {
    width: min(100%, 600px);
  }

  .about-story__content h2 {
    font-size: clamp(41px, 4.5vw, 54px);
  }

  .about-story__features {
    gap: 20px;
  }
}

@media (max-width: 900px) {
  .about-story__inner {
    width: min(760px, calc(100% - 40px));
    min-height: 0;
    padding: 46px 0 56px;
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .about-story__visual {
    order: 1;
  }

  .about-story__content {
    order: 2;
    width: min(100%, 660px);
    justify-self: center;
  }

  .about-story__visual-scene {
    width: min(100%, 620px);
  }

  .about-story__content h2 {
    font-size: clamp(42px, 7vw, 56px);
  }

  .about-story__lead {
    max-width: 620px;
  }
}

@media (max-width: 760px) {
  .about-page .about-hero::after {
    height: 36px;
    background: linear-gradient(
      180deg,
      rgba(251, 250, 247, 0) 0%,
      rgba(251, 250, 247, .48) 58%,
      #fbfaf7 100%
    );
  }

  .about-story__inner {
    width: 100%;
    padding: 28px 18px 48px;
    gap: 24px;
  }

  .about-story__visual {
    width: calc(100% + 12px);
    margin-left: -6px;
  }

  .about-story__bg-garnish {
    left: 0;
    top: 2%;
    width: 96%;
    animation-duration: 6.1s;
  }

  .about-story__main-burger {
    left: 8%;
    bottom: 1%;
    width: 86%;
    animation-duration: 6.9s;
  }

  .about-story__visual-scene {
    width: min(100%, 520px);
  }

  .about-story__content {
    width: 100%;
    max-width: 600px;
  }

  .about-story__content h2 {
    font-size: clamp(38px, 11.2vw, 48px);
    line-height: .96;
  }

  .about-story__lead {
    margin-top: 14px;
    font-size: 14px;
    line-height: 1.55;
  }

  .about-story__features {
    margin-top: 24px;
    gap: 19px;
  }

  .about-story__feature {
    grid-template-columns: 30px minmax(0, 1fr);
    gap: 12px;
  }

  .about-story__check {
    width: 28px;
    height: 28px;
  }

  .about-story__check::after {
    left: 8px;
    top: 6px;
  }

  .about-story__feature h3 {
    font-size: 18px;
  }

  .about-story__feature p {
    margin-top: 4px;
    font-size: 13.5px;
    line-height: 1.5;
  }

  .about-story__button {
    min-width: 198px;
    min-height: 50px;
    margin-top: 24px;
    font-size: 13px;
  }
}

@media (max-width: 430px) {
  .about-story__inner {
    padding: 24px 15px 42px;
  }

  .about-story__visual {
    width: calc(100% + 10px);
    margin-left: -5px;
  }

  .about-story__bg-garnish {
    width: 98%;
    left: -1%;
  }

  .about-story__main-burger {
    width: 88%;
    left: 6%;
  }

  .about-story__content h2 {
    font-size: clamp(36px, 10.8vw, 43px);
  }

  .about-story__lead {
    font-size: 13.5px;
  }

  .about-story__feature p {
    font-size: 13px;
  }

  .about-story__button {
    width: 100%;
    max-width: 224px;
  }
}

@media (max-width: 360px) {
  .about-story__inner {
    padding-inline: 13px;
  }

  .about-story__content h2 {
    font-size: 35px;
  }

  .about-story__feature {
    grid-template-columns: 28px minmax(0, 1fr);
    gap: 10px;
  }

  .about-story__check {
    width: 26px;
    height: 26px;
  }

  .about-story__check::after {
    left: 7px;
    top: 5px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-story__button,
  .about-story__bg-garnish,
  .about-story__main-burger {
    transition: none;
    animation: none !important;
  }
}

/* ============================================================
   V48 · BIZE ULASIN — TWO-COLUMN CONTACT + MAP
   Hero intentionally untouched. Contact content is rebuilt as a
   balanced information column + map, with restrained red accents.
   ============================================================ */
.contact-page .contact-info {
  margin-top: 0;
  padding: clamp(54px, 5vw, 78px) 0 clamp(48px, 4.5vw, 70px);
  background: #fffaf3;
}

.contact-page .contact-info > .contact-shell {
  width: min(1360px, calc(100% - 72px));
}

.contact-page .contact-info__layout {
  display: grid;
  grid-template-columns: minmax(420px, .83fr) minmax(0, 1.17fr);
  gap: clamp(34px, 4.4vw, 68px);
  align-items: stretch;
}

.contact-page .contact-info__panel {
  min-width: 0;
  display: flex;
  flex-direction: column;
}

.contact-page .contact-info__intro {
  padding: 0;
}

.contact-page .contact-eyebrow {
  color: #d80c17;
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .2em;
}

.contact-page .contact-info__intro h2 {
  max-width: 600px;
  margin: 14px 0 0;
  color: #11100f;
  font-size: clamp(42px, 3.8vw, 61px);
  line-height: .96;
  letter-spacing: -.058em;
  font-weight: 900;
}

.contact-page .contact-info__intro h2 em {
  color: #d80c17;
  font-style: normal;
}

.contact-page .contact-info__intro p {
  max-width: 560px;
  margin: 17px 0 0;
  color: #69625b;
  font-size: 14px;
  line-height: 1.6;
  font-weight: 500;
}

.contact-page .contact-info__cards {
  margin-top: 24px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 11px;
}

.contact-page .contact-card {
  min-height: 0;
  padding: 15px 17px;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 15px;
  align-items: center;
  border: 1px solid rgba(32, 25, 20, .105);
  border-radius: 14px;
  background: rgba(255,255,255,.88);
  box-shadow: 0 10px 24px rgba(64, 44, 28, .035);
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.contact-page .contact-card:hover {
  transform: translateY(-2px);
  border-color: rgba(20, 18, 16, .18);
  background: #fff;
  box-shadow: 0 13px 28px rgba(64, 44, 28, .055);
}

.contact-page .contact-card__icon {
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  margin: 0;
  border-radius: 50%;
  background: #f5efe7;
}

.contact-page .contact-card__icon img {
  width: 25px;
  height: 25px;
}

.contact-page .contact-card__body {
  min-width: 0;
}

.contact-page .contact-card h3 {
  margin: 0;
  color: #151310;
  font-size: 15px;
  line-height: 1.15;
  font-weight: 900;
}

.contact-page .contact-card__value,
.contact-page .contact-card__address {
  display: block;
  margin-top: 5px;
  color: #161310;
  font-size: 17px;
  line-height: 1.28;
  font-weight: 820;
  overflow-wrap: anywhere;
}

.contact-page .contact-card__address {
  font-style: normal;
  font-size: 14px;
  font-weight: 620;
  color: #4f4943;
}

.contact-page .contact-card__value--email {
  font-size: 15px;
  font-weight: 720;
}

.contact-page .contact-card p {
  margin: 4px 0 0;
  color: #787067;
  font-size: 11.5px;
  line-height: 1.4;
}

.contact-page .contact-card--address {
  grid-template-columns: 52px minmax(0, 1fr) auto;
}

.contact-page .contact-card__map-link {
  min-height: 40px;
  margin: 0 0 0 12px;
  padding: 0 15px;
  border: 1px solid #d80c17;
  border-radius: 10px;
  background: transparent;
  color: #d80c17;
  font-size: 12px;
  font-weight: 850;
  white-space: nowrap;
}

.contact-page .contact-card__map-link:hover {
  background: #151310;
  border-color: #151310;
  color: #fff;
  transform: translateY(-1px);
}

.contact-page .contact-card--hours {
  align-items: start;
}

.contact-page .contact-card--hours .contact-card__icon {
  margin-top: 2px;
}

.contact-page .contact-hours {
  width: min(100%, 360px);
  margin: 7px 0 0;
  display: grid;
  gap: 3px;
}

.contact-page .contact-hours > div {
  display: grid;
  grid-template-columns: minmax(126px, 1fr) auto;
  gap: 16px;
  align-items: baseline;
}

.contact-page .contact-hours dt,
.contact-page .contact-hours dd {
  margin: 0;
  color: #5b554e;
  font-size: 12px;
  line-height: 1.35;
}

.contact-page .contact-hours dd {
  color: #1a1714;
  font-weight: 720;
  white-space: nowrap;
}

.contact-page .contact-map {
  position: relative;
  height: auto;
  min-height: 590px;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(32, 25, 20, .10);
  border-radius: 18px;
  background: #eee8df;
  box-shadow: 0 16px 34px rgba(72, 46, 25, .05);
}

.contact-page .contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 590px;
  border: 0;
  display: block;
}

.contact-page .contact-map__badge {
  left: 18px;
  top: 18px;
  width: min(390px, calc(100% - 36px));
  padding: 14px 15px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  border: 1px solid rgba(24, 18, 13, .08);
  border-radius: 12px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 8px 22px rgba(0,0,0,.10);
}

.contact-page .contact-map__badge strong {
  display: block;
  color: #171411;
  font-size: 13px;
  line-height: 1.2;
  font-weight: 900;
}

.contact-page .contact-map__badge span {
  margin-top: 4px;
  color: #6d665f;
  font-size: 10.5px;
  line-height: 1.35;
}

.contact-page .contact-map__badge a {
  flex: 0 0 auto;
  margin: 0;
  color: #d80c17;
  font-size: 11px;
  font-weight: 850;
  white-space: nowrap;
}

.contact-page .contact-map__badge a:hover {
  color: #151310;
}

@media (max-width: 1120px) {
  .contact-page .contact-info > .contact-shell {
    width: min(100% - 48px, 980px);
  }

  .contact-page .contact-info__layout {
    grid-template-columns: 1fr;
    gap: 28px;
  }

  .contact-page .contact-info__intro {
    display: block;
  }

  .contact-page .contact-info__intro h2 {
    max-width: none;
  }

  .contact-page .contact-info__intro p {
    max-width: 650px;
  }

  .contact-page .contact-info__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
  }

  .contact-page .contact-card,
  .contact-page .contact-card--address {
    grid-template-columns: 48px minmax(0, 1fr);
  }

  .contact-page .contact-card__map-link {
    grid-column: 2;
    width: max-content;
    margin: 7px 0 0;
  }

  .contact-page .contact-map,
  .contact-page .contact-map iframe {
    min-height: 440px;
  }
}

@media (max-width: 760px) {
  .contact-page .contact-info {
    margin-top: 0;
    padding: 44px 0 42px;
    border-radius: 0;
  }

  .contact-page .contact-info > .contact-shell {
    width: calc(100% - 32px);
  }

  .contact-page .contact-info__layout {
    gap: 24px;
  }

  .contact-page .contact-info__intro h2 {
    margin-top: 10px;
    font-size: clamp(36px, 10vw, 43px);
    line-height: .96;
  }

  .contact-page .contact-info__intro p {
    margin-top: 13px;
    font-size: 13px;
    line-height: 1.55;
  }

  .contact-page .contact-info__cards {
    margin-top: 20px;
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .contact-page .contact-card,
  .contact-page .contact-card--address {
    min-height: 0;
    padding: 14px 15px;
    grid-template-columns: 46px minmax(0, 1fr);
    gap: 13px;
    border-radius: 14px;
  }

  .contact-page .contact-card__icon {
    width: 44px;
    height: 44px;
  }

  .contact-page .contact-card__icon img {
    width: 22px;
    height: 22px;
  }

  .contact-page .contact-card__value {
    font-size: 16px;
  }

  .contact-page .contact-card__value--email {
    font-size: 14px;
  }

  .contact-page .contact-card__map-link {
    grid-column: 2;
    min-height: 38px;
  }

  .contact-page .contact-hours {
    max-width: 330px;
  }

  .contact-page .contact-map,
  .contact-page .contact-map iframe {
    min-height: 340px;
  }

  .contact-page .contact-map {
    border-radius: 15px;
  }

  .contact-page .contact-map__badge {
    left: 12px;
    top: 12px;
    width: calc(100% - 24px);
    padding: 12px 13px;
  }
}

@media (max-width: 470px) {
  .contact-page .contact-info {
    padding-top: 38px;
  }

  .contact-page .contact-info > .contact-shell {
    width: calc(100% - 28px);
  }

  .contact-page .contact-info__intro h2 {
    font-size: 38px;
  }

  .contact-page .contact-card--address .contact-card__map-link {
    width: 100%;
    justify-self: stretch;
  }

  .contact-page .contact-hours > div {
    grid-template-columns: 1fr auto;
    gap: 10px;
  }

  .contact-page .contact-hours dt,
  .contact-page .contact-hours dd {
    font-size: 11.5px;
  }

  .contact-page .contact-map,
  .contact-page .contact-map iframe {
    min-height: 300px;
  }

  .contact-page .contact-map__badge {
    align-items: flex-start;
    gap: 10px;
  }

  .contact-page .contact-map__badge strong {
    font-size: 12px;
  }

  .contact-page .contact-map__badge a {
    font-size: 10px;
  }
}

@media (max-width: 360px) {
  .contact-page .contact-info > .contact-shell {
    width: calc(100% - 24px);
  }

  .contact-page .contact-card,
  .contact-page .contact-card--address {
    grid-template-columns: 42px minmax(0, 1fr);
    gap: 11px;
    padding-inline: 13px;
  }

  .contact-page .contact-card__icon {
    width: 40px;
    height: 40px;
  }

  .contact-page .contact-card__value--email {
    font-size: 13px;
  }

  .contact-page .contact-map__badge {
    display: block;
  }

  .contact-page .contact-map__badge a {
    display: inline-flex;
    margin-top: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .contact-page .contact-card,
  .contact-page .contact-card__map-link {
    transition: none;
  }
}


/* ============================================================
   V51 · JOUL HAKKINDA — REFERANSA YAKIN MISSION/VISION + STATS
   Ürün ayrı PNG katmanında döner; DELICIOUS, dama ve doodle katmanları
   sahnede sabit kalır. Üstteki V47 bölüm ile aynı 1320px container kullanılır.
   ============================================================ */
.about-brand {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  margin: 0;
  padding: 0 0 clamp(66px, 5vw, 86px);
  background: #fff;
  color: #12100e;
  border-top: 1px solid rgba(23, 20, 18, .05);
}

.about-brand__inner,
.about-brand__stats-wrap {
  width: min(1320px, calc(100% - 72px));
  margin-inline: auto;
}

.about-brand__inner {
  position: relative;
  z-index: 2;
  min-height: 610px;
  padding: clamp(58px, 4.6vw, 76px) 0 42px;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  align-items: center;
  gap: clamp(48px, 5.5vw, 90px);
}

.about-brand__stage {
  position: relative;
  min-width: 0;
  min-height: 510px;
  display: grid;
  place-items: center;
}

.about-brand__background-word {
  position: absolute;
  z-index: 0;
  left: -11%;
  top: 4%;
  display: grid;
  gap: 0;
  color: rgba(226, 6, 19, .12);
  font-size: clamp(78px, 6.7vw, 116px);
  line-height: .78;
  font-weight: 900;
  letter-spacing: -.075em;
  text-transform: uppercase;
  user-select: none;
  pointer-events: none;
}

.about-brand__background-word span {
  display: block;
}

.about-brand__product-orbit {
  position: relative;
  z-index: 3;
  width: min(100%, 570px);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.about-brand__product {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: 50% 50%;
  animation: aboutBrandSpin 22s linear infinite;
  filter: drop-shadow(0 24px 28px rgba(54, 35, 20, .13));
  will-change: transform;
}

@keyframes aboutBrandSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.about-brand__checker {
  position: absolute;
  z-index: 1;
  left: -2%;
  bottom: 2%;
  width: 74px;
  height: 222px;
  opacity: .78;
  background:
    conic-gradient(from 90deg, rgba(226, 6, 19, .88) 25%, transparent 0 50%, rgba(226, 6, 19, .88) 0 75%, transparent 0) 0 0 / 74px 74px;
  pointer-events: none;
}

.about-brand__doodle {
  position: absolute;
  z-index: 1;
  width: 80px;
  height: 80px;
  opacity: .22;
  background: var(--joul-red, #e20613);
  pointer-events: none;
}

.about-brand__doodle--wing {
  right: 4%;
  top: 22%;
  -webkit-mask: url('../icons/product-detail/ingredients/wing.svg') center / contain no-repeat;
  mask: url('../icons/product-detail/ingredients/wing.svg') center / contain no-repeat;
  transform: rotate(-14deg);
}

.about-brand__doodle--onion {
  right: 1%;
  bottom: 5%;
  width: 96px;
  height: 96px;
  -webkit-mask: url('../icons/product-detail/ingredients/onion.svg') center / contain no-repeat;
  mask: url('../icons/product-detail/ingredients/onion.svg') center / contain no-repeat;
  transform: rotate(9deg);
}

.about-brand__crumbs {
  position: absolute;
  z-index: 1;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(174, 103, 38, .52);
  pointer-events: none;
}

.about-brand__crumbs--top {
  right: 13%;
  top: 10%;
  box-shadow:
    18px 8px 0 2px rgba(174, 103, 38, .34),
    39px -4px 0 -1px rgba(174, 103, 38, .52),
    59px 15px 0 2px rgba(174, 103, 38, .34),
    82px 3px 0 -2px rgba(174, 103, 38, .56);
}

.about-brand__crumbs--bottom {
  left: 16%;
  bottom: 4%;
  box-shadow:
    18px -8px 0 2px rgba(174, 103, 38, .32),
    42px 3px 0 -1px rgba(174, 103, 38, .56),
    67px -13px 0 3px rgba(174, 103, 38, .30),
    89px 4px 0 -2px rgba(174, 103, 38, .50);
}

.about-brand__content {
  width: min(100%, 650px);
  justify-self: start;
}

.about-brand__eyebrow {
  margin: 0;
  color: var(--joul-red, #e20613);
  font-size: 12px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .18em;
}

.about-brand__content h2 {
  max-width: 640px;
  margin: 17px 0 0;
  color: #11100f;
  font-size: clamp(48px, 3.8vw, 62px);
  line-height: .98;
  font-weight: 900;
  letter-spacing: -.052em;
}

.about-brand__lead {
  max-width: 630px;
  margin: 19px 0 0;
  color: #545861;
  font-size: clamp(14.5px, .98vw, 16.5px);
  line-height: 1.56;
  font-weight: 500;
  letter-spacing: -.012em;
}

.about-brand__cards {
  margin-top: 27px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.about-brand__card {
  min-height: 152px;
  padding: 25px 24px 23px;
  border-radius: 9px;
  border: 1px solid rgba(25, 22, 19, .055);
  box-shadow: 0 9px 24px rgba(34, 24, 17, .025);
}

.about-brand__card--warm {
  background: #fff7ed;
  border-left: 2px solid #f2a34b;
}

.about-brand__card--sage {
  background: #f1f6ef;
  border-left: 2px solid #63a56d;
}

.about-brand__card h3 {
  margin: 0;
  color: #151311;
  font-size: 20px;
  line-height: 1.15;
  font-weight: 900;
  letter-spacing: -.028em;
}

.about-brand__card p {
  margin: 12px 0 0;
  color: #575b63;
  font-size: 13.8px;
  line-height: 1.5;
  font-weight: 500;
}

.about-brand__button {
  width: fit-content;
  min-width: 178px;
  min-height: 50px;
  margin-top: 27px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 26px;
  border-radius: 999px;
  background: var(--joul-red, #e20613);
  color: #fff;
  box-shadow: 0 12px 24px rgba(226, 6, 19, .13);
  font-size: 14px;
  font-weight: 850;
  transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}

.about-brand__button:hover {
  transform: translateY(-2px);
  background: #cf0612;
  box-shadow: 0 16px 30px rgba(226, 6, 19, .19);
}

.about-brand__button:focus-visible {
  outline: 3px solid rgba(226, 6, 19, .24);
  outline-offset: 4px;
}

.about-brand__stats-wrap {
  position: relative;
  z-index: 4;
  padding-top: 24px;
}

.about-brand__stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.about-brand__stat {
  min-height: 112px;
  padding: 20px 20px;
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: center;
  gap: 18px;
  border: 1px solid rgba(25, 22, 19, .10);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 14px 32px rgba(33, 24, 16, .055);
}

.about-brand__stat-icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(25, 22, 19, .10);
  border-radius: 50%;
  background: #fff;
  color: var(--joul-red, #e20613);
}

.about-brand__stat-icon::before {
  content: "";
  width: 26px;
  height: 26px;
  display: block;
  background: currentColor;
}

.about-brand__stat-icon--products::before {
  -webkit-mask: url('../icons/menu-categories/burger.svg') center / contain no-repeat;
  mask: url('../icons/menu-categories/burger.svg') center / contain no-repeat;
}

.about-brand__stat-icon--categories::before {
  -webkit-mask: url('../icons/menu-categories/grid.svg') center / contain no-repeat;
  mask: url('../icons/menu-categories/grid.svg') center / contain no-repeat;
}

.about-brand__stat-icon--platforms::before {
  -webkit-mask: url('../icons/mobile-menu/ui/scooter.svg') center / contain no-repeat;
  mask: url('../icons/mobile-menu/ui/scooter.svg') center / contain no-repeat;
}

.about-brand__stat-icon--rating::before {
  content: "★";
  width: auto;
  height: auto;
  background: none;
  font-size: 27px;
  line-height: 1;
  color: currentColor;
}

.about-brand__stat strong {
  display: block;
  color: #11100f;
  font-size: clamp(30px, 2.4vw, 39px);
  line-height: .95;
  font-weight: 900;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}

.about-brand__stat span:not(.about-brand__stat-icon) {
  display: block;
  margin-top: 7px;
  color: #62666e;
  font-size: 13px;
  line-height: 1.25;
  font-weight: 550;
}

@media (max-width: 1199px) {
  .about-brand__inner,
  .about-brand__stats-wrap {
    width: min(1100px, calc(100% - 52px));
  }

  .about-brand__inner {
    min-height: 570px;
    gap: 40px;
  }

  .about-brand__stage { min-height: 470px; }
  .about-brand__product-orbit { width: min(100%, 510px); }
  .about-brand__background-word { left: -9%; font-size: clamp(70px, 7vw, 102px); }
  .about-brand__content h2 { font-size: clamp(44px, 4.5vw, 56px); }
  .about-brand__card { min-height: 148px; padding: 22px 20px; }
  .about-brand__stat { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; padding: 18px 16px; }
  .about-brand__stat-icon { width: 48px; height: 48px; }
}

@media (max-width: 900px) {
  .about-brand {
    padding-bottom: 60px;
  }

  .about-brand__inner,
  .about-brand__stats-wrap {
    width: min(760px, calc(100% - 40px));
  }

  .about-brand__inner {
    min-height: 0;
    padding: 50px 0 34px;
    grid-template-columns: 1fr;
    gap: 30px;
  }

  .about-brand__stage {
    min-height: 460px;
    order: 2;
  }

  .about-brand__content {
    width: 100%;
    max-width: 690px;
    order: 1;
    justify-self: center;
  }

  .about-brand__product-orbit { width: min(100%, 480px); }
  .about-brand__background-word { left: 1%; top: 3%; font-size: 82px; }
  .about-brand__checker { left: 0; bottom: 16px; }
  .about-brand__stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .about-brand {
    padding-bottom: 48px;
  }

  .about-brand__inner,
  .about-brand__stats-wrap {
    width: 100%;
    padding-inline: 18px;
  }

  .about-brand__inner {
    padding-top: 44px;
    padding-bottom: 25px;
    gap: 24px;
  }

  .about-brand__eyebrow { font-size: 11px; letter-spacing: .16em; }
  .about-brand__content h2 { margin-top: 12px; font-size: clamp(37px, 10.3vw, 48px); line-height: .97; }
  .about-brand__lead { margin-top: 16px; font-size: 14px; line-height: 1.55; }
  .about-brand__cards { margin-top: 22px; grid-template-columns: 1fr; gap: 11px; }
  .about-brand__card { min-height: 0; padding: 19px 18px; }
  .about-brand__card h3 { font-size: 18px; }
  .about-brand__card p { margin-top: 8px; font-size: 13.2px; }
  .about-brand__button { min-height: 49px; margin-top: 22px; }

  .about-brand__stage { min-height: 390px; }
  .about-brand__product-orbit { width: min(100%, 390px); }
  .about-brand__background-word { left: 0; top: 2%; font-size: clamp(54px, 14vw, 74px); }
  .about-brand__checker { width: 54px; height: 162px; bottom: 8px; background-size: 54px 54px; }
  .about-brand__doodle--wing { width: 58px; height: 58px; top: 28%; }
  .about-brand__doodle--onion { width: 70px; height: 70px; }

  .about-brand__stats-wrap { padding-top: 18px; }
  .about-brand__stats { gap: 10px; }
  .about-brand__stat { min-height: 96px; padding: 15px 14px; grid-template-columns: 43px minmax(0, 1fr); gap: 12px; }
  .about-brand__stat-icon { width: 42px; height: 42px; }
  .about-brand__stat-icon::before { width: 21px; height: 21px; }
  .about-brand__stat strong { font-size: 29px; }
  .about-brand__stat span:not(.about-brand__stat-icon) { margin-top: 5px; font-size: 11.5px; }
}

@media (max-width: 520px) {
  .about-brand__inner,
  .about-brand__stats-wrap { padding-inline: 15px; }
  .about-brand__stage { min-height: 335px; }
  .about-brand__product-orbit { width: min(100%, 330px); }
  .about-brand__background-word { font-size: 50px; left: -2%; }
  .about-brand__checker { display: none; }
  .about-brand__crumbs { transform: scale(.8); }
  .about-brand__stats { grid-template-columns: 1fr 1fr; }
  .about-brand__stat { min-height: 90px; grid-template-columns: 40px minmax(0, 1fr); padding: 13px 12px; }
  .about-brand__stat-icon { width: 39px; height: 39px; }
  .about-brand__stat strong { font-size: 26px; }
}

@media (max-width: 360px) {
  .about-brand__inner,
  .about-brand__stats-wrap { padding-inline: 13px; }
  .about-brand__content h2 { font-size: 35px; }
  .about-brand__stage { min-height: 300px; }
  .about-brand__product-orbit { width: min(100%, 292px); }
  .about-brand__background-word { font-size: 43px; }
  .about-brand__stat { grid-template-columns: 1fr; gap: 7px; text-align: center; }
  .about-brand__stat-icon { margin-inline: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .about-brand__product { animation: none; }
  .about-brand__button { transition: none; }
}

/* ============================================================
   V54 · TWO-TIER SHARED HEADER
   Utility bar + shared classic header on every public route.
   ============================================================ */
:root {
  --global-topbar-h: 44px;
  --global-header-h: 92px;
}

.utility-bar {
  position: sticky;
  top: 0;
  z-index: 95;
  width: 100%;
  height: var(--global-topbar-h);
  color: #fff;
  background: #171310;
  border-bottom: 1px solid rgba(255,255,255,.07);
  box-shadow: 0 5px 14px rgba(24,12,7,.08);
}

.utility-bar__inner {
  width: min(calc(100% - 64px), 1500px);
  height: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.utility-bar__address {
  min-width: 0;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.94);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: -.01em;
  white-space: nowrap;
  transition: color .18s ease, opacity .18s ease;
}
.utility-bar__address:hover { color: #fff; opacity: .82; }
.utility-bar__address > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.utility-bar__address-icon {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  background: var(--joul-red);
}
.utility-bar__address-icon img { width: 15px; height: 15px; filter: brightness(0) invert(1); }

.utility-bar__platforms {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}

.utility-platform {
  position: relative;
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: transform .18s ease, opacity .18s ease, box-shadow .18s ease;
}
.utility-platform:hover { transform: translateY(-1px); opacity: .92; }
.utility-platform:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.utility-platform--wide {
  width: 102px;
  height: 29px;
  border-radius: 7px;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.utility-platform--wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.utility-platform--icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,.14);
}
.utility-platform--icon img { width: 100%; height: 100%; display: block; }

body > .site-header,
.menu-page > .site-header,
.product-detail-page > .site-header,
.contact-page > .site-header {
  top: var(--global-topbar-h) !important;
}

body > .site-header .site-header__inner,
.menu-page > .site-header .site-header__inner,
.product-detail-page > .site-header .site-header__inner,
.contact-page > .site-header .site-header__inner {
  width: min(calc(100% - 64px), 1500px) !important;
  grid-template-columns: minmax(145px, 178px) minmax(490px, 1fr) auto !important;
  gap: clamp(18px, 2vw, 34px) !important;
}

body > .site-header .site-nav,
.menu-page > .site-header .site-nav,
.product-detail-page > .site-header .site-nav,
.contact-page > .site-header .site-nav {
  gap: 2px !important;
}

body > .site-header .site-nav a,
.menu-page > .site-header .site-nav a,
.product-detail-page > .site-header .site-nav a,
.contact-page > .site-header .site-nav a {
  padding-inline: 13px;
  font-size: 14px !important;
}

body > .site-header .site-nav a.is-current,
.menu-page > .site-header .site-nav a.is-current,
.product-detail-page > .site-header .site-nav a.is-current,
.contact-page > .site-header .site-nav a.is-current {
  min-width: 96px;
  padding-inline: 17px;
}

body > .site-header .site-header__actions,
.menu-page > .site-header .site-header__actions,
.product-detail-page > .site-header .site-header__actions,
.contact-page > .site-header .site-header__actions {
  gap: 9px !important;
}

.header-phone {
  min-height: 52px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 5px 10px 5px 6px;
  border: 1px solid rgba(31,24,19,.08);
  border-radius: 999px;
  color: #171310;
  background: #fffdf9;
  box-shadow: 0 5px 14px rgba(48,25,12,.045);
  white-space: nowrap;
  transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.header-phone:hover {
  transform: translateY(-1px);
  border-color: rgba(226,6,19,.18);
  box-shadow: 0 8px 18px rgba(48,25,12,.07);
}
.header-phone__icon {
  width: 38px;
  height: 38px;
  flex: 0 0 38px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--joul-red);
}
.header-phone__icon img { width: 19px; height: 19px; filter: brightness(0) invert(1); }
.header-phone__text { display: grid; gap: 1px; line-height: 1.05; }
.header-phone__text small { color: #7f756d; font-size: 10px; font-weight: 700; }
.header-phone__text strong { color: #171310; font-size: 13px; font-weight: 850; letter-spacing: -.02em; }

body > .site-header .button--header,
.menu-page > .site-header .button--header,
.product-detail-page > .site-header .button--header,
.contact-page > .site-header .button--header {
  min-width: 154px !important;
  padding-inline: 20px !important;
  gap: 17px !important;
}

body:not(.menu-page):not(.product-detail-page):not(.contact-page) .hero {
  height: calc(100svh - var(--global-header-h) - var(--global-topbar-h));
  min-height: 590px;
}

.mobile-menu__quick {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  padding: 13px 0;
  border-top: 1px solid rgba(255,255,255,.13);
}
.mobile-menu__quick a {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 10px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 12px;
  color: #fff;
  background: rgba(255,255,255,.05);
  font-size: 12px;
  font-weight: 750;
}
.mobile-menu__quick .drawer-icon { width: 17px; height: 17px; }
.drawer-platform {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 8px;
  color: #fff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: -.02em;
}
.drawer-platform--ys { background: #fa0050; }
.drawer-platform--migros { background: #ff681d; }

@media (max-width: 1360px) {
  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner {
    width: calc(100% - 44px) !important;
    grid-template-columns: 138px minmax(450px,1fr) auto !important;
    gap: 14px !important;
  }
  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .contact-page > .site-header .brand { width: 132px !important; }
  body > .site-header .site-nav a,
  .menu-page > .site-header .site-nav a,
  .product-detail-page > .site-header .site-nav a,
  .contact-page > .site-header .site-nav a { padding-inline: 10px; font-size: 13px !important; }
  .header-phone { padding-right: 8px; }
  .header-phone__text small { display: none; }
  .header-phone__text strong { font-size: 12px; }
  body > .site-header .button--header,
  .menu-page > .site-header .button--header,
  .product-detail-page > .site-header .button--header,
  .contact-page > .site-header .button--header { min-width: 136px !important; padding-inline: 17px !important; font-size: 14px !important; }
}

@media (max-width: 1180px) {
  :root { --global-header-h: 84px; --global-topbar-h: 42px; }
  .utility-bar__inner { width: calc(100% - 40px); }
  .utility-bar__address { font-size: 12px; }
  .utility-platform--wide { width: 92px; height: 27px; }
  .utility-platform--icon { width: 28px; height: 28px; }
  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner {
    width: calc(100% - 40px) !important;
    grid-template-columns: 126px minmax(405px,1fr) auto !important;
    gap: 10px !important;
  }
  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .contact-page > .site-header .brand { width: 122px !important; }
  body > .site-header .site-nav a,
  .menu-page > .site-header .site-nav a,
  .product-detail-page > .site-header .site-nav a,
  .contact-page > .site-header .site-nav a { padding-inline: 8px; font-size: 12.5px !important; }
  body > .site-header .site-nav a.is-current,
  .menu-page > .site-header .site-nav a.is-current,
  .product-detail-page > .site-header .site-nav a.is-current,
  .contact-page > .site-header .site-nav a.is-current { min-width: 82px; padding-inline: 12px; }
  body > .site-header .icon-button,
  .menu-page > .site-header .icon-button,
  .product-detail-page > .site-header .icon-button,
  .contact-page > .site-header .icon-button { width: 44px !important; height: 44px !important; min-width: 44px; }
  .header-phone { min-height: 46px; padding: 4px 8px 4px 4px; gap: 6px; }
  .header-phone__icon { width: 34px; height: 34px; flex-basis: 34px; }
  .header-phone__text strong { font-size: 11px; }
  body > .site-header .button--header,
  .menu-page > .site-header .button--header,
  .product-detail-page > .site-header .button--header,
  .contact-page > .site-header .button--header { min-width: 120px !important; height: 46px !important; min-height: 46px !important; padding-inline: 14px !important; gap: 11px !important; font-size: 13px !important; }
}

@media (max-width: 1020px) and (min-width: 901px) {
  body > .site-header .icon-button,
  .menu-page > .site-header .icon-button,
  .product-detail-page > .site-header .icon-button,
  .contact-page > .site-header .icon-button { display: none !important; }
  .header-phone__text { display: none; }
  .header-phone { width: 42px; height: 42px; min-height: 42px; padding: 0; justify-content: center; border-radius: 50%; }
  .header-phone__icon { width: 100%; height: 100%; flex-basis: 100%; }
}

@media (max-width: 900px) {
  :root { --global-header-h: 74px; --global-topbar-h: 40px; }
  .utility-bar__inner { width: calc(100% - 28px); gap: 12px; }
  .utility-bar__address { flex: 1 1 auto; font-size: 11px; gap: 7px; }
  .utility-bar__address-icon { width: 25px; height: 25px; flex-basis: 25px; }
  .utility-bar__platforms { gap: 6px; }
  .utility-platform--wide { width: 86px; height: 26px; border-radius: 6px; }
  .utility-platform--icon { width: 27px; height: 27px; border-radius: 7px; }
  .header-phone { display: none !important; }
  body:not(.menu-page):not(.product-detail-page):not(.contact-page) .hero {
    height: calc(100svh - var(--global-header-h) - var(--global-topbar-h));
    min-height: 570px;
  }
}

@media (max-width: 640px) {
  .utility-bar__inner { width: calc(100% - 20px); gap: 8px; }
  .utility-bar__address { flex: 0 0 28px; width: 28px; }
  .utility-bar__address > span:last-child { display: none; }
  .utility-bar__address-icon { width: 28px; height: 28px; flex-basis: 28px; }
  .utility-bar__platforms { margin-left: auto; }
  .utility-platform--wide { width: 82px; height: 25px; }
  .utility-platform--icon { width: 26px; height: 26px; }
}

@media (max-width: 430px) {
  :root { --global-topbar-h: 38px; }
  .utility-bar__inner { width: calc(100% - 16px); }
  .utility-bar__platforms { gap: 4px; }
  .utility-platform--wide { width: 72px; height: 23px; }
  .utility-platform--icon { width: 24px; height: 24px; border-radius: 6px; }
  .utility-bar__address,
  .utility-bar__address-icon { width: 24px; height: 24px; flex-basis: 24px; }
  .utility-bar__address-icon img { width: 13px; height: 13px; }
}

/* V54 mobile header regression guard: later desktop overrides must not
   re-introduce the three-column grid below the drawer breakpoint. */
@media (max-width: 900px) {
  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr auto !important;
    gap: 12px !important;
  }
  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .contact-page > .site-header .brand { width: 116px !important; }
  body > .site-header .site-header__actions,
  .menu-page > .site-header .site-header__actions,
  .product-detail-page > .site-header .site-header__actions,
  .contact-page > .site-header .site-header__actions { gap: 8px !important; }
}

@media (max-width: 520px) {
  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner { width: calc(100% - 22px) !important; }
  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .contact-page > .site-header .brand { width: 104px !important; }
}

/* ============================================================
   V55 · TOPBAR PLATFORM BUTTON REFINEMENT
   Compact, consistent platform controls without ad-like tiles.
   ============================================================ */
.utility-bar__platforms {
  gap: 6px;
}

.utility-platform {
  height: 32px;
  min-width: 0;
  padding: 0 10px 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  overflow: visible;
  border: 1px solid rgba(255,255,255,.13);
  border-radius: 999px;
  color: rgba(255,255,255,.96);
  background: rgba(255,255,255,.055);
  box-shadow: none;
  font-size: 11.5px;
  font-weight: 750;
  line-height: 1;
  white-space: nowrap;
  transition: transform .18s ease, background-color .18s ease, border-color .18s ease;
}

.utility-platform:hover {
  transform: translateY(-1px);
  opacity: 1;
  color: #fff;
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.22);
}

.utility-platform__mark {
  width: 22px;
  height: 22px;
  flex: 0 0 22px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}

.utility-platform__mark--yemeksepeti {
  background: #fa0050;
  font-style: italic;
  font-family: Arial, Helvetica, sans-serif;
}

.utility-platform__mark--migros {
  background: #ff681d;
  font-family: Arial, Helvetica, sans-serif;
}

.utility-platform__mark--image {
  overflow: hidden;
  background: #fff;
  box-shadow: none;
}

.utility-platform__mark--image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.utility-platform__mark--maps img {
  width: 18px;
  height: 18px;
}

.utility-platform__label {
  display: block;
  transform: translateY(.2px);
}

.utility-platform__label--yemeksepeti {
  font-style: italic;
  font-weight: 800;
}

.utility-platform--yemeksepeti:hover {
  border-color: rgba(250,0,80,.48);
  background: rgba(250,0,80,.12);
}

.utility-platform--migros:hover {
  border-color: rgba(255,104,29,.5);
  background: rgba(255,104,29,.12);
}

@media (max-width: 1180px) {
  .utility-platform {
    height: 30px;
    padding-right: 8px;
    gap: 6px;
    font-size: 11px;
  }
  .utility-platform__mark {
    width: 21px;
    height: 21px;
    flex-basis: 21px;
  }
  .utility-platform--social .utility-platform__label { display: none; }
  .utility-platform--social { width: 30px; padding: 0; }
}

@media (max-width: 900px) {
  .utility-bar__platforms { gap: 5px; }
  .utility-platform {
    width: 28px;
    height: 28px;
    padding: 0;
    border-color: rgba(255,255,255,.10);
    background: rgba(255,255,255,.045);
  }
  .utility-platform__label { display: none; }
  .utility-platform__mark {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}

@media (max-width: 430px) {
  .utility-bar__platforms { gap: 4px; }
  .utility-platform {
    width: 26px;
    height: 26px;
  }
  .utility-platform__mark {
    width: 20px;
    height: 20px;
    flex-basis: 20px;
    font-size: 10px;
  }
  .utility-platform__mark--maps img {
    width: 16px;
    height: 16px;
  }
}

/* ========================================================================== 
   V59 / Homepage · Joul’dan Kareler
   Supplied real photography + active-card interaction from approved package.
   ========================================================================== */
.joul-gallery {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: clamp(64px, 5.2vw, 92px) 0 clamp(54px, 4.6vw, 82px);
  color: #171311;
  background:
    radial-gradient(circle at 78% 13%, rgba(226, 6, 19, .035), transparent 24%),
    radial-gradient(circle at 10% 82%, rgba(90, 45, 20, .035), transparent 20%),
    #fff8ee;
}

.joul-gallery::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  opacity: .48;
  background-image: radial-gradient(rgba(34, 24, 17, .08) .65px, transparent .65px);
  background-size: 9px 9px;
}

.joul-gallery__inner {
  position: relative;
  width: min(calc(100% - 64px), 1540px);
  margin-inline: auto;
}

.joul-gallery__header {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  gap: 34px;
  min-height: 150px;
  padding: 0 10px 26px;
}

.joul-gallery__heading {
  position: relative;
  z-index: 2;
  max-width: 760px;
}

.joul-gallery__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 2px;
  color: var(--joul-red);
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: clamp(23px, 2vw, 34px);
  font-weight: 700;
  line-height: 1;
  transform: rotate(-1.4deg);
}

.joul-gallery__eyebrow span {
  display: inline-block;
  font-family: "Red Hat Display", sans-serif;
  font-size: .58em;
  transform: translateY(1px) rotate(9deg);
}

.joul-gallery__title {
  margin: 0;
  color: #12100f;
  font-size: clamp(54px, 5vw, 86px);
  font-weight: 900;
  line-height: .92;
  letter-spacing: -.062em;
}

.joul-gallery__title strong {
  color: var(--joul-red);
  font: inherit;
}

.joul-gallery__lead {
  margin: 13px 0 0;
  color: #3c3530;
  font-size: clamp(16px, 1.24vw, 20px);
  line-height: 1.45;
  font-weight: 500;
}

.joul-gallery__ghost {
  position: absolute;
  z-index: 0;
  top: -37px;
  right: 13.5%;
  color: rgba(226, 6, 19, .045);
  font-size: clamp(150px, 16vw, 265px);
  font-weight: 900;
  line-height: .78;
  letter-spacing: -.09em;
  pointer-events: none;
  user-select: none;
}

.joul-gallery__doodle {
  position: absolute;
  z-index: 2;
  left: 53.5%;
  top: 1px;
  display: grid;
  justify-items: start;
  color: #171311;
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: clamp(22px, 1.65vw, 30px);
  font-weight: 700;
  line-height: .76;
  transform: rotate(-4deg);
  pointer-events: none;
}

.joul-gallery__doodle strong {
  color: var(--joul-red);
  font: inherit;
}

.joul-gallery__doodle::after {
  content: "";
  width: 34px;
  height: 21px;
  margin: 8px 0 0 24px;
  border-top: 4px solid var(--joul-red);
  border-right: 4px solid var(--joul-red);
  border-radius: 50%;
  transform: rotate(22deg);
}

.joul-gallery__cta {
  position: relative;
  z-index: 3;
  min-width: min(100%, 296px);
  min-height: 58px;
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 0 24px 0 28px;
  border: 1.5px solid var(--joul-red);
  border-radius: 999px;
  background: rgba(255, 248, 238, .72);
  box-shadow: 0 10px 24px rgba(104, 38, 18, .045), inset 0 1px rgba(255,255,255,.86);
  font-size: 16px;
  font-weight: 800;
  transition: transform .22s ease, color .22s ease, background .22s ease, box-shadow .22s ease;
}

.joul-gallery__cta span:last-child {
  font-size: 25px;
  line-height: 1;
  transition: transform .22s ease;
}

.joul-gallery__cta:hover {
  color: #fff;
  background: var(--joul-red);
  box-shadow: 0 14px 30px rgba(var(--joul-red-rgb), .18);
  transform: translateY(-2px);
}

.joul-gallery__cta:hover span:last-child { transform: translateX(4px); }

.joul-gallery__cards {
  position: relative;
  z-index: 4;
  display: flex;
  align-items: stretch;
  gap: clamp(10px, .9vw, 16px);
  width: 100%;
  height: clamp(330px, 25vw, 405px);
}

.joul-gallery__card {
  position: relative;
  isolation: isolate;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgba(48, 27, 17, .08);
  border-radius: clamp(18px, 1.45vw, 25px);
  background: #ead9c6;
  box-shadow: 0 14px 34px rgba(65, 31, 14, .085);
  cursor: default;
  outline: none;
  transition:
    flex-grow .44s cubic-bezier(.2,.8,.2,1),
    transform .32s ease,
    box-shadow .32s ease,
    filter .32s ease;
}

.joul-gallery__card::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0,0,0,0) 58%, rgba(0,0,0,.12) 100%);
  opacity: .68;
  transition: opacity .3s ease;
}

.joul-gallery__card img {
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  transform: scale(1.012);
  transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .35s ease;
}

.joul-gallery__card--storefront img { object-position: center 48%; }
.joul-gallery__card--seaview img { object-position: center 45%; }
.joul-gallery__card--packed img { object-position: center 52%; }
.joul-gallery__card--kitchen img { object-position: center 50%; }
.joul-gallery__card--burger img { object-position: center 48%; }
.joul-gallery__card--combo img { object-position: center 50%; }

.joul-gallery__card.is-active {
  flex-grow: 1.82;
  box-shadow: 0 19px 44px rgba(65, 31, 14, .14);
}

.joul-gallery__card.is-active::after { opacity: .32; }
.joul-gallery__card.is-active img { transform: scale(1.035); }
.joul-gallery__card:focus-visible { box-shadow: 0 0 0 3px #fff8ee, 0 0 0 6px var(--joul-red), 0 19px 44px rgba(65,31,14,.14); }

.joul-gallery__footer {
  position: relative;
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: 30px;
}

.joul-gallery__checker {
  width: min(62%, 820px);
  height: 22px;
  background-color: transparent;
  background-image:
    linear-gradient(45deg, var(--joul-red) 25%, transparent 25%, transparent 75%, var(--joul-red) 75%),
    linear-gradient(45deg, var(--joul-red) 25%, transparent 25%, transparent 75%, var(--joul-red) 75%);
  background-position: 0 0, 11px 11px;
  background-size: 22px 22px;
  filter: drop-shadow(0 2px 0 rgba(226, 6, 19, .04));
}

.joul-gallery__checker::before,
.joul-gallery__checker::after {
  content: "✦";
  position: absolute;
  top: 30px;
  color: var(--joul-red);
  font-size: 22px;
  line-height: 22px;
}

.joul-gallery__checker::before { left: 16.4%; transform: rotate(-14deg); }
.joul-gallery__checker::after { right: 16.4%; transform: rotate(13deg); }

.joul-gallery__footer-note {
  position: absolute;
  right: 1.3%;
  bottom: -6px;
  margin: 0;
  color: var(--joul-red);
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: clamp(22px, 1.75vw, 30px);
  font-weight: 700;
  line-height: .9;
  text-align: center;
  transform: rotate(-7deg);
}

/* V46 used a dark-to-cream blend because About directly touched Delivery.
   Joul’dan Kareler now owns this transition, so the old tint is disabled. */
.joul-gallery ~ .delivery-cta::before { display: none !important; }

@media (max-width: 1180px) {
  .joul-gallery__inner { width: min(calc(100% - 48px), 1540px); }
  .joul-gallery__header { min-height: 140px; padding-inline: 4px; }
  .joul-gallery__doodle { left: 55%; font-size: 23px; }
  .joul-gallery__ghost { right: 11%; top: -24px; }
  .joul-gallery__cards { height: 350px; }
}

@media (max-width: 1099px) {
  .joul-gallery { padding-block: 64px 58px; }
  .joul-gallery__header {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    min-height: 0;
    padding-bottom: 28px;
  }
  .joul-gallery__title { font-size: clamp(52px, 7vw, 72px); }
  .joul-gallery__doodle,
  .joul-gallery__ghost { display: none; }
  .joul-gallery__cards {
    height: 350px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
    padding-bottom: 3px;
  }
  .joul-gallery__cards::-webkit-scrollbar { display: none; }
  .joul-gallery__card,
  .joul-gallery__card.is-active {
    flex: 0 0 clamp(250px, 39vw, 380px);
    scroll-snap-align: start;
  }
  .joul-gallery__card img,
  .joul-gallery__card.is-active img { transform: scale(1.018); }
  .joul-gallery__footer-note { right: .3%; }
}

@media (max-width: 760px) {
  .joul-gallery {
    padding: 48px 0 44px;
  }
  .joul-gallery__inner {
    width: calc(100% - 28px);
  }
  .joul-gallery__header {
    display: block;
    padding: 0 2px 22px;
  }
  .joul-gallery__eyebrow {
    gap: 5px;
    font-size: 22px;
  }
  .joul-gallery__title {
    margin-top: 4px;
    font-size: clamp(43px, 12vw, 56px);
    line-height: .94;
  }
  .joul-gallery__lead {
    max-width: 430px;
    margin-top: 10px;
    font-size: 14px;
    line-height: 1.42;
  }
  .joul-gallery__cta {
    min-width: 0;
    min-height: 50px;
    margin-top: 20px;
    padding: 0 20px 0 22px;
    font-size: 14px;
  }
  .joul-gallery__cards {
    width: calc(100% + 14px);
    height: 315px;
    margin-right: -14px;
    gap: 10px;
  }
  .joul-gallery__card,
  .joul-gallery__card.is-active {
    flex-basis: min(78vw, 310px);
    border-radius: 19px;
  }
  .joul-gallery__footer {
    min-height: 56px;
    justify-content: flex-start;
    padding-top: 22px;
  }
  .joul-gallery__checker {
    width: 72%;
    height: 16px;
    background-position: 0 0, 8px 8px;
    background-size: 16px 16px;
  }
  .joul-gallery__checker::before,
  .joul-gallery__checker::after { display: none; }
  .joul-gallery__footer-note {
    right: 0;
    bottom: -4px;
    font-size: 21px;
  }
}

@media (max-width: 430px) {
  .joul-gallery__inner { width: calc(100% - 22px); }
  .joul-gallery__title { font-size: 43px; }
  .joul-gallery__cards { height: 292px; }
  .joul-gallery__card,
  .joul-gallery__card.is-active { flex-basis: 78vw; }
  .joul-gallery__footer-note { font-size: 19px; }
}

@media (prefers-reduced-motion: reduce) {
  .joul-gallery__card,
  .joul-gallery__card img,
  .joul-gallery__cta,
  .joul-gallery__cta span:last-child { transition: none !important; }
}


/* =========================================================
   V62 — MOTTOMUZ / Menu hero ile aynı sahne, brief metinleri
   ========================================================= */
.motto-page-hero__script {
  display: block;
  width: fit-content;
  max-width: 245px;
  margin-top: 10px;
  margin-left: 4px;
  color: #d71920;
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: clamp(27px, 1.75vw, 35px);
  font-weight: 700;
  line-height: .92;
  letter-spacing: -.025em;
  transform: rotate(-4deg);
  transform-origin: 35% 50%;
}
.motto-page-hero.is-scene-ready:not(.has-entered) .motto-page-hero__script { opacity: 0; transform: translate3d(-10px, 8px, 0) rotate(-4deg); }
.motto-page-hero.has-entered .motto-page-hero__script { animation: mottoHeroScriptInV62 .58s cubic-bezier(.16,.84,.2,1.08) .32s both; }
@keyframes mottoHeroScriptInV62 { from { opacity: 0; transform: translate3d(-10px, 8px, 0) rotate(-4deg); } to { opacity: 1; transform: translate3d(0, 0, 0) rotate(-4deg); } }
@media (max-width: 1500px) and (min-width: 901px) { .motto-page-hero__script { max-width: 210px; margin-top: 8px; font-size: clamp(25px, 1.8vw, 31px); } }
@media (max-width: 900px) { .motto-page-hero__script { max-width: 170px; margin-top: 7px; font-size: 26px; } }
@media (max-width: 520px) { .motto-page-hero__script { max-width: 145px; margin-top: 6px; font-size: 22px; } }
@media (prefers-reduced-motion: reduce) { .motto-page-hero__script { animation: none !important; } .motto-page-hero.is-scene-ready:not(.has-entered) .motto-page-hero__script { opacity: 1 !important; transform: rotate(-4deg) !important; } }

.motto-page-hero__eyebrow {
  display: block;
  margin-bottom: 14px;
  color: var(--joul-red);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .42em;
  line-height: 1;
}

.motto-page-hero__title-wrap {
  display: block;
}

.motto-page-hero__title {
  margin: 0;
  color: #111111;
  font-size: clamp(72px, 6.3vw, 118px);
  font-weight: 900;
  line-height: .86;
  letter-spacing: -.07em;
}

.motto-page-hero__title span {
  display: block;
}

.motto-page-hero__title .is-red {
  color: var(--joul-red);
}

.motto-page-hero__copy {
  max-width: 470px;
  margin: 20px 0 0;
  color: #413833;
  font-size: clamp(15px, 1.03vw, 18px);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.01em;
}

.motto-page-hero__cta {
  min-width: 264px;
  min-height: 58px;
  margin-top: 26px;
  padding-inline: 26px;
  gap: 26px;
  font-size: 16px;
}

.motto-page-hero__script {
  display: none;
}

@media (max-width: 1500px) and (min-width: 901px) {
  .motto-page-hero__title { font-size: clamp(64px, 5.9vw, 104px); }
  .motto-page-hero__copy { max-width: 445px; }
}

@media (max-width: 900px) {
  .motto-page-hero__eyebrow { margin-bottom: 11px; font-size: 11px; letter-spacing: .33em; }
  .motto-page-hero__title { font-size: clamp(54px, 11.5vw, 86px); line-height: .88; }
  .motto-page-hero__copy { max-width: 100%; margin-top: 16px; font-size: 15px; line-height: 1.42; }
  .motto-page-hero__cta { min-width: 230px; min-height: 52px; margin-top: 20px; padding-inline: 22px; gap: 22px; font-size: 14px; }
}

@media (max-width: 520px) {
  .motto-page-hero__eyebrow { margin-bottom: 10px; font-size: 10px; }
  .motto-page-hero__title { font-size: clamp(46px, 14vw, 68px); }
  .motto-page-hero__copy { font-size: 14px; line-height: 1.4; }
  .motto-page-hero__cta { width: 100%; max-width: 268px; min-height: 50px; margin-top: 18px; }
}


/* =========================================================
   V64 — Mottomuz hero dengeleme / daha küçük tipografi + daha açık alt alan
   ========================================================= */
.motto-page-hero {
  min-height: 560px;
  height: clamp(560px, 35vw, 660px);
}

.motto-page-hero .menu-page-hero__content {
  top: 16.5%;
  width: min(39%, 610px);
}

.motto-page-hero__title {
  font-size: clamp(60px, 5.45vw, 96px);
  line-height: .84;
}

.motto-page-hero__copy {
  max-width: 500px;
  margin-top: 18px;
}

.motto-page-hero__cta {
  margin-top: 22px;
}

@media (max-width: 1500px) and (min-width: 901px) {
  .motto-page-hero {
    min-height: 530px;
    height: clamp(530px, 37vw, 610px);
  }

  .motto-page-hero .menu-page-hero__content {
    top: 16.25%;
    width: min(40%, 590px);
  }

  .motto-page-hero__title {
    font-size: clamp(56px, 5.1vw, 88px);
  }
}

@media (max-width: 900px) {
  .motto-page-hero {
    min-height: 680px;
    height: auto;
    padding-bottom: 20px;
  }

  .motto-page-hero__title {
    font-size: clamp(50px, 10.5vw, 78px);
  }

  .motto-page-hero__copy {
    margin-top: 15px;
  }
}

@media (max-width: 520px) {
  .motto-page-hero {
    min-height: 620px;
    padding-bottom: 16px;
  }

  .motto-page-hero__title {
    font-size: clamp(42px, 12.8vw, 60px);
  }

  .motto-page-hero__cta {
    max-width: 248px;
  }
}


/* =========================================================
   V65 — Mottomuz hero H1 dengeleme / daha dengeli renk ve boyut
   ========================================================= */
.motto-page-hero .motto-page-hero__title {
  color: #14110f;
  font-size: clamp(54px, 4.95vw, 84px);
  line-height: .87;
  letter-spacing: -.06em;
}

.motto-page-hero .motto-page-hero__title .is-dark {
  color: #14110f;
}

.motto-page-hero .motto-page-hero__title .is-red {
  color: var(--joul-red);
}

@media (max-width: 1500px) and (min-width: 901px) {
  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(50px, 4.7vw, 78px);
  }
}

@media (max-width: 900px) {
  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(46px, 9.2vw, 70px);
    line-height: .9;
  }
}

@media (max-width: 520px) {
  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(39px, 11.8vw, 54px);
  }
}


/* =========================================================
   V66 — Mottomuz hero H1 iki satır / daha oranlı başlık
   ========================================================= */
.motto-page-hero .menu-page-hero__content {
  top: 17.2%;
  width: min(40%, 620px);
}

.motto-page-hero .motto-page-hero__title {
  width: fit-content;
  font-size: clamp(46px, 4.35vw, 72px);
  line-height: .9;
  letter-spacing: -.055em;
}

.motto-page-hero .motto-page-hero__title-line {
  display: flex;
  align-items: baseline;
  gap: .12em;
  white-space: nowrap;
}

.motto-page-hero .motto-page-hero__title-line + .motto-page-hero__title-line {
  margin-top: -.03em;
}

.motto-page-hero .motto-page-hero__copy {
  max-width: 540px;
  margin-top: 22px;
}

@media (max-width: 1500px) and (min-width: 901px) {
  .motto-page-hero .menu-page-hero__content {
    width: min(41%, 590px);
  }

  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(44px, 4.1vw, 66px);
  }
}

@media (max-width: 900px) {
  .motto-page-hero .menu-page-hero__content {
    width: calc(100% - 54px);
  }

  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(40px, 8.6vw, 60px);
    line-height: .92;
  }

  .motto-page-hero .motto-page-hero__title-line {
    gap: .1em;
  }
}

@media (max-width: 520px) {
  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(34px, 10.6vw, 48px);
  }

  .motto-page-hero .motto-page-hero__copy {
    margin-top: 18px;
  }
}


/* =========================================================
   V67 — Mottomuz hero, Menü hero ölçülerine geri dönüş
   ========================================================= */
.motto-page-hero {
  min-height: 410px;
  height: clamp(410px, 27vw, 520px);
}

.motto-page-hero .menu-page-hero__content {
  top: 14.5%;
  width: min(40%, 620px);
}

/* Nokta, iç içe span kuralı nedeniyle ayrı satıra düşmesin. */
.motto-page-hero .motto-page-hero__title .is-dark > .is-red {
  display: inline;
}

.motto-page-hero .motto-page-hero__copy {
  max-width: 540px;
  margin-top: 12px;
  font-size: clamp(14px, .9vw, 16px);
  line-height: 1.38;
}

.motto-page-hero .motto-page-hero__cta {
  min-height: 50px;
  margin-top: 16px;
  padding-inline: 23px;
  font-size: 14px;
}

@media (max-width: 1500px) and (min-width: 901px) {
  .motto-page-hero {
    height: clamp(335px, 22.5vw, 380px);
    min-height: 335px;
  }

  .motto-page-hero .menu-page-hero__content {
    left: clamp(155px, 10.8vw, 205px);
    top: 11.5%;
    width: 43%;
  }

  .motto-page-hero__eyebrow {
    margin-bottom: 8px;
    font-size: 10px;
  }

  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(39px, 3.75vw, 58px);
    line-height: .9;
  }

  .motto-page-hero .motto-page-hero__copy {
    max-width: 470px;
    margin-top: 10px;
    font-size: clamp(12.5px, .84vw, 14px);
    line-height: 1.34;
  }

  .motto-page-hero .motto-page-hero__cta {
    min-width: 210px;
    min-height: 44px;
    margin-top: 12px;
    padding-inline: 19px;
    font-size: 12.5px;
  }
}

@media (max-width: 900px) {
  .motto-page-hero {
    height: 410px;
    min-height: 410px;
    padding-bottom: 0;
  }

  .motto-page-hero .menu-page-hero__content {
    left: 26px;
    top: 27px;
    width: calc(100% - 52px);
  }

  .motto-page-hero__eyebrow {
    margin-bottom: 7px;
    font-size: 9px;
  }

  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(36px, 8.8vw, 52px);
    line-height: .92;
  }

  .motto-page-hero .motto-page-hero__copy {
    max-width: min(60%, 330px);
    margin-top: 9px;
    font-size: 12.5px;
    line-height: 1.32;
  }

  .motto-page-hero .motto-page-hero__cta {
    min-width: 190px;
    min-height: 42px;
    margin-top: 11px;
    padding-inline: 17px;
    font-size: 12px;
  }
}

@media (max-width: 520px) {
  .motto-page-hero {
    height: 382px;
    min-height: 382px;
    padding-bottom: 0;
  }

  .motto-page-hero .menu-page-hero__content {
    left: 18px;
    top: 22px;
    width: calc(100% - 36px);
  }

  .motto-page-hero .motto-page-hero__title {
    font-size: clamp(31px, 9.6vw, 42px);
  }

  .motto-page-hero .motto-page-hero__copy {
    max-width: 62%;
    margin-top: 8px;
    font-size: 11.5px;
  }

  .motto-page-hero .motto-page-hero__cta {
    width: auto;
    min-width: 172px;
    max-width: none;
    min-height: 40px;
    margin-top: 9px;
    font-size: 11.5px;
  }
}


/* =========================================================
   V70 — Mottomuz manifesto / yalnızca yan checkerboard şeritleri
   ========================================================= */
.motto-manifesto-band {
  padding: 30px 0 86px;
  background: #fff9f1;
}

.motto-manifesto-band__inner {
  width: min(100% - 48px, 1580px);
  margin: 0 auto;
  padding: 0 clamp(34px, 3.6vw, 58px);
  background: #f1d9bd url('../images/motto/motto-checkerboard-bg-v69.webp') center / cover no-repeat;
  border-radius: 38px;
  overflow: hidden;
  box-shadow: 0 22px 52px rgba(89, 31, 18, .10);
}

.motto-manifesto-band__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .92fr) 1px minmax(0, 1.34fr);
  align-items: center;
  gap: clamp(30px, 2.6vw, 44px);
  min-height: 500px;
  padding: clamp(44px, 4.1vw, 68px) clamp(34px, 3.8vw, 62px);
  color: #12100f;
  background:
    radial-gradient(circle at 18% 8%, rgba(255,255,255,.78), transparent 38%),
    linear-gradient(135deg, rgba(255,251,243,.98), rgba(250,238,220,.97));
  border: 1px solid rgba(255,255,255,.62);
  border-radius: 0;
  box-shadow:
    0 20px 42px rgba(79, 27, 15, .14),
    inset 0 1px 0 rgba(255,255,255,.88);
}

.motto-manifesto-band__content {
  max-width: 590px;
}

.motto-manifesto-band__headline {
  margin: 0;
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: clamp(54px, 4.2vw, 76px);
  line-height: .88;
  letter-spacing: -.025em;
}

.motto-manifesto-band__headline-dark,
.motto-manifesto-band__headline-red {
  display: block;
}

.motto-manifesto-band__headline-dark {
  color: #0e0e0e;
  margin-bottom: .09em;
}

.motto-manifesto-band__headline-red {
  position: relative;
  color: #e90e18;
}

.motto-manifesto-band__headline-red::after {
  content: "";
  position: absolute;
  right: 2%;
  bottom: .15em;
  width: 38px;
  height: 52px;
  background:
    linear-gradient(#e90e18, #e90e18) 8px 3px / 8px 30px no-repeat,
    linear-gradient(#e90e18, #e90e18) 28px 20px / 8px 25px no-repeat;
  border-radius: 999px;
  transform: rotate(28deg);
  opacity: .96;
}

.motto-manifesto-band__text {
  margin: 26px 0 0;
  max-width: 590px;
  color: #26211e;
  font-size: clamp(18px, 1.35vw, 22px);
  line-height: 1.48;
  letter-spacing: -.018em;
  font-weight: 500;
}

.motto-manifesto-band__divider {
  align-self: stretch;
  width: 1px;
  background: linear-gradient(to bottom, transparent, rgba(26, 20, 16, .24) 13%, rgba(26, 20, 16, .24) 87%, transparent);
}

.motto-manifesto-band__features {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  min-width: 0;
}

.motto-manifesto-band__feature {
  position: relative;
  min-width: 0;
  padding: 8px clamp(16px, 1.55vw, 26px) 4px;
  text-align: center;
}

.motto-manifesto-band__feature + .motto-manifesto-band__feature::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7%;
  width: 1px;
  height: 86%;
  background: linear-gradient(to bottom, transparent, rgba(25, 19, 16, .18) 14%, rgba(25, 19, 16, .18) 86%, transparent);
}

.motto-manifesto-band__icon {
  position: relative;
  width: clamp(92px, 7.1vw, 112px);
  aspect-ratio: 1;
  margin: 0 auto 22px;
  display: grid;
  place-items: center;
  color: #101010;
  background: linear-gradient(145deg, #fffdf9, #f6e6d2);
  border: 1px solid rgba(255,255,255,.85);
  border-radius: 50%;
  box-shadow:
    0 13px 24px rgba(72, 36, 19, .11),
    inset 0 1px 0 rgba(255,255,255,.95);
}

.motto-manifesto-band__icon::before,
.motto-manifesto-band__icon::after {
  content: "";
  position: absolute;
  right: 7px;
  top: 11px;
  width: 5px;
  height: 18px;
  background: #ef101b;
  border-radius: 99px;
  transform-origin: 50% 100%;
}

.motto-manifesto-band__icon::before {
  transform: rotate(33deg);
}

.motto-manifesto-band__icon::after {
  right: -1px;
  top: 18px;
  height: 14px;
  transform: rotate(58deg);
}

.motto-manifesto-band__icon svg {
  width: 62%;
  height: 62%;
  display: block;
  overflow: visible;
}

.motto-manifesto-band__feature h3 {
  margin: 0;
  color: #111;
  font-size: clamp(24px, 1.7vw, 31px);
  line-height: 1.04;
  letter-spacing: -.035em;
  font-weight: 900;
}

.motto-manifesto-band__accent {
  display: block;
  width: 46px;
  height: 3px;
  margin: 19px auto 17px;
  background: #ed111b;
  border-radius: 99px;
}

.motto-manifesto-band__feature p {
  max-width: 220px;
  margin: 0 auto;
  color: #312a26;
  font-size: clamp(15px, 1.05vw, 18px);
  line-height: 1.36;
  letter-spacing: -.012em;
  font-weight: 500;
}

@media (hover: hover) and (pointer: fine) {
  .motto-manifesto-band__feature {
    transition: transform .28s ease;
  }

  .motto-manifesto-band__feature:hover {
    transform: translateY(-4px);
  }
}

@media (max-width: 1240px) {
  .motto-manifesto-band__inner {
    width: min(100% - 36px, 1180px);
    padding: 0 34px;
  }

  .motto-manifesto-band__card {
    grid-template-columns: 1fr;
    gap: 30px;
    min-height: 0;
    padding: 42px 38px 44px;
  }

  .motto-manifesto-band__content {
    max-width: 760px;
  }

  .motto-manifesto-band__headline {
    font-size: clamp(48px, 6vw, 72px);
  }

  .motto-manifesto-band__headline-red::after {
    right: auto;
    left: min(96%, 575px);
  }

  .motto-manifesto-band__divider {
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(26, 20, 16, .22) 8%, rgba(26, 20, 16, .22) 92%, transparent);
  }

  .motto-manifesto-band__feature {
    padding-inline: 22px;
  }
}

@media (max-width: 820px) {
  .motto-manifesto-band {
    padding: 22px 0 68px;
  }

  .motto-manifesto-band__inner {
    width: min(100% - 28px, 780px);
    padding: 0 22px;
    border-radius: 30px;
    background-size: auto 100%;
  }

  .motto-manifesto-band__card {
    padding: 34px 26px 36px;
    border-radius: 0;
    gap: 26px;
  }

  .motto-manifesto-band__headline {
    font-size: clamp(42px, 8.6vw, 62px);
  }

  .motto-manifesto-band__text {
    margin-top: 20px;
    font-size: clamp(17px, 2.5vw, 20px);
  }

  .motto-manifesto-band__features {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .motto-manifesto-band__feature {
    display: grid;
    grid-template-columns: 90px minmax(0, 1fr);
    grid-template-areas:
      "icon title"
      "icon accent"
      "icon copy";
    align-items: center;
    column-gap: 20px;
    padding: 22px 4px;
    text-align: left;
  }

  .motto-manifesto-band__feature + .motto-manifesto-band__feature::before {
    top: 0;
    left: 0;
    width: 100%;
    height: 1px;
    background: linear-gradient(to right, transparent, rgba(25, 19, 16, .17) 8%, rgba(25, 19, 16, .17) 92%, transparent);
  }

  .motto-manifesto-band__icon {
    grid-area: icon;
    width: 82px;
    margin: 0;
  }

  .motto-manifesto-band__feature h3 {
    grid-area: title;
    font-size: 25px;
  }

  .motto-manifesto-band__accent {
    grid-area: accent;
    width: 38px;
    margin: 12px 0 10px;
  }

  .motto-manifesto-band__feature p {
    grid-area: copy;
    max-width: 480px;
    margin: 0;
    font-size: 16px;
  }
}

@media (max-width: 520px) {
  .motto-manifesto-band {
    padding: 18px 0 54px;
  }

  .motto-manifesto-band__inner {
    width: calc(100% - 20px);
    padding: 0 12px;
    border-radius: 24px;
    background-size: auto 100%;
  }

  .motto-manifesto-band__card {
    padding: 28px 18px 28px;
    border-radius: 0;
    gap: 22px;
  }

  .motto-manifesto-band__headline {
    font-size: clamp(37px, 11.7vw, 51px);
    line-height: .91;
  }

  .motto-manifesto-band__headline-red::after {
    display: none;
  }

  .motto-manifesto-band__text {
    margin-top: 18px;
    font-size: 16px;
    line-height: 1.48;
  }

  .motto-manifesto-band__feature {
    grid-template-columns: 72px minmax(0, 1fr);
    column-gap: 15px;
    padding: 18px 0;
  }

  .motto-manifesto-band__icon {
    width: 68px;
  }

  .motto-manifesto-band__icon::before {
    right: 4px;
    top: 6px;
    height: 14px;
  }

  .motto-manifesto-band__icon::after {
    right: -2px;
    top: 12px;
    height: 11px;
  }

  .motto-manifesto-band__feature h3 {
    font-size: 22px;
  }

  .motto-manifesto-band__accent {
    margin-top: 10px;
    margin-bottom: 8px;
  }

  .motto-manifesto-band__feature p {
    font-size: 14.5px;
    line-height: 1.36;
  }
}

/* ========================================================================== */
/* V71 — Mottomuz / approved full-page visual direction                       */
/* ========================================================================== */
.motto-page-v71 {
  --motto-v71-red: #ef101b;
  --motto-v71-ink: #11110f;
  --motto-v71-cream: #fff8ef;
  --motto-v71-paper: #f7ead9;
  background: var(--motto-v71-cream);
}

.motto-v71-main {
  padding: clamp(18px, 2vw, 30px) 0 clamp(38px, 5vw, 72px);
  background:
    radial-gradient(circle at 12% 18%, rgba(239, 16, 27, .035), transparent 28%),
    radial-gradient(circle at 88% 84%, rgba(127, 83, 39, .045), transparent 30%),
    var(--motto-v71-cream);
}

.motto-v71-hero,
.motto-v71-stories,
.motto-v71-cta {
  width: min(calc(100% - 48px), 1640px);
  margin-inline: auto;
}

.motto-v71-hero {
  position: relative;
  min-height: clamp(430px, 34vw, 570px);
  overflow: hidden;
  isolation: isolate;
  border-radius: 34px;
  background: var(--motto-v71-paper);
  box-shadow: 0 18px 48px rgba(45, 24, 8, .08);
}

.motto-v71-hero__checker,
.motto-v71-hero::before,
.motto-v71-hero::after {
  position: absolute;
  z-index: 3;
  top: 0;
  bottom: 0;
  width: clamp(44px, 4.7vw, 76px);
  content: "";
  background-color: #f8ead6;
  background-image:
    linear-gradient(45deg, var(--motto-v71-red) 25%, transparent 25%, transparent 75%, var(--motto-v71-red) 75%),
    linear-gradient(45deg, var(--motto-v71-red) 25%, transparent 25%, transparent 75%, var(--motto-v71-red) 75%);
  background-position: 0 0, 32px 32px;
  background-size: 64px 64px;
}

.motto-v71-hero__checker {
  display: none;
}

.motto-v71-hero::before {
  left: 0;
  border-radius: 34px 0 0 34px;
}

.motto-v71-hero::after {
  right: 0;
  border-radius: 0 34px 34px 0;
}

.motto-v71-hero__media {
  position: absolute;
  z-index: 0;
  inset: 0 clamp(44px, 4.7vw, 76px);
  overflow: hidden;
  background: #20251f;
}

.motto-v71-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 50%;
  transform: scale(1.035);
  filter: saturate(.94) contrast(1.02);
}

.motto-v71-hero__veil {
  position: absolute;
  z-index: 1;
  inset: 0 clamp(44px, 4.7vw, 76px);
  pointer-events: none;
  background:
    linear-gradient(90deg,
      rgba(255, 248, 239, 1) 0%,
      rgba(255, 248, 239, .985) 21%,
      rgba(255, 248, 239, .92) 33%,
      rgba(255, 248, 239, .58) 44%,
      rgba(255, 248, 239, .14) 55%,
      rgba(255, 248, 239, 0) 69%),
    linear-gradient(180deg, rgba(25, 15, 9, .04), rgba(25, 15, 9, .08));
}

.motto-v71-hero__content {
  position: relative;
  z-index: 4;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  width: min(55%, 760px);
  padding: clamp(52px, 5vw, 82px) clamp(42px, 5.6vw, 92px) clamp(52px, 5vw, 82px) clamp(72px, 7.2vw, 118px);
}

.motto-v71-kicker,
.motto-v71-cta__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  width: max-content;
  max-width: 100%;
  color: var(--motto-v71-red);
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(11px, .84vw, 14px);
  font-weight: 900;
  line-height: 1.15;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.motto-v71-kicker::after,
.motto-v71-cta__eyebrow::after {
  width: 54px;
  height: 2px;
  content: "";
  background: currentColor;
  opacity: .75;
}

.motto-v71-hero__title {
  display: flex;
  flex-direction: column;
  margin: 22px 0 16px;
  color: var(--motto-v71-ink);
  font-family: "Caveat Brush", cursive;
  font-size: clamp(64px, 6vw, 104px);
  font-weight: 400;
  line-height: .78;
  letter-spacing: -.025em;
}

.motto-v71-hero__title span,
.motto-v71-hero__title strong {
  display: block;
}

.motto-v71-hero__title strong {
  color: var(--motto-v71-red);
  font: inherit;
  margin-top: .12em;
}

.motto-v71-hero__copy {
  max-width: 570px;
  margin: 0;
  color: #22201d;
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(16px, 1.12vw, 19px);
  font-weight: 500;
  line-height: 1.56;
}

.motto-v71-stories {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(14px, 1.3vw, 22px);
  margin-top: clamp(14px, 1.3vw, 22px);
}

.motto-v71-story {
  position: relative;
  min-height: clamp(360px, 29vw, 490px);
  overflow: hidden;
  border-radius: 30px;
  background: #20251f;
  box-shadow: 0 16px 38px rgba(18, 14, 10, .09);
}

.motto-v71-story__image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms cubic-bezier(.2, .7, .2, 1);
}

.motto-v71-story--packaging .motto-v71-story__image {
  object-position: center 52%;
}

.motto-v71-story--purple .motto-v71-story__image {
  object-position: 57% 48%;
}

.motto-v71-story__shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 11, 9, .88) 0%, rgba(8, 11, 9, .72) 34%, rgba(8, 11, 9, .16) 74%, rgba(8, 11, 9, .08) 100%),
    linear-gradient(0deg, rgba(8, 11, 9, .42) 0%, transparent 58%);
}

.motto-v71-story__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: inherit;
  width: min(55%, 520px);
  padding: clamp(40px, 4vw, 64px);
  color: #fff;
}

.motto-v71-story h2 {
  margin: 0;
  color: #fff;
  font-family: "Caveat Brush", cursive;
  font-size: clamp(48px, 4.1vw, 72px);
  font-weight: 400;
  line-height: .87;
  letter-spacing: -.02em;
  text-wrap: balance;
}

.motto-v71-story__line {
  display: block;
  width: 50px;
  height: 4px;
  margin: 25px 0 21px;
  border-radius: 999px;
  background: var(--motto-v71-red);
}

.motto-v71-story p {
  max-width: 390px;
  margin: 0;
  color: rgba(255, 255, 255, .95);
  font-family: "Red Hat Display", sans-serif;
  font-size: clamp(15px, 1.03vw, 18px);
  font-weight: 600;
  line-height: 1.48;
}

@media (hover: hover) and (pointer: fine) {
  .motto-v71-story:hover .motto-v71-story__image {
    transform: scale(1.035);
  }
}

.motto-v71-cta {
  position: relative;
  min-height: clamp(270px, 24vw, 390px);
  margin-top: clamp(14px, 1.3vw, 22px);
  overflow: hidden;
  border-radius: 30px;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.88), rgba(255,255,255,.35) 42%, transparent 70%),
    #faeedf;
  box-shadow: 0 16px 38px rgba(45, 24, 8, .07);
}

.motto-v71-cta__checker {
  position: absolute;
  top: 0;
  bottom: 0;
  width: clamp(92px, 13vw, 220px);
  background-color: #f8ead6;
  background-image:
    linear-gradient(45deg, var(--motto-v71-red) 25%, transparent 25%, transparent 75%, var(--motto-v71-red) 75%),
    linear-gradient(45deg, var(--motto-v71-red) 25%, transparent 25%, transparent 75%, var(--motto-v71-red) 75%);
  background-position: 0 0, 32px 32px;
  background-size: 64px 64px;
  opacity: .92;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 54%, transparent 100%);
  mask-image: linear-gradient(90deg, #000 0%, #000 54%, transparent 100%);
}

.motto-v71-cta__checker--left {
  left: 0;
}

.motto-v71-cta__checker--right {
  right: 0;
  transform: scaleX(-1);
}

.motto-v71-cta__content {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: inherit;
  padding: 46px clamp(24px, 5vw, 84px);
  text-align: center;
}

.motto-v71-cta__eyebrow {
  justify-content: center;
}

.motto-v71-cta__eyebrow::after {
  display: none;
}

.motto-v71-cta h2 {
  margin: 13px 0 25px;
  color: var(--motto-v71-ink);
  font-family: "Caveat Brush", cursive;
  font-size: clamp(58px, 5.7vw, 96px);
  font-weight: 400;
  line-height: .86;
  letter-spacing: -.025em;
}

.motto-v71-cta h2 strong {
  color: var(--motto-v71-red);
  font: inherit;
}

.motto-v71-cta__button {
  min-width: 250px;
  min-height: 58px;
  justify-content: center;
  gap: 28px;
  border-radius: 17px;
  font-size: 16px;
  font-weight: 800;
}

@media (max-width: 1100px) {
  .motto-v71-hero,
  .motto-v71-stories,
  .motto-v71-cta {
    width: min(calc(100% - 36px), 1640px);
  }

  .motto-v71-hero {
    min-height: 470px;
  }

  .motto-v71-hero__content {
    width: 60%;
    padding-left: 80px;
    padding-right: 34px;
  }

  .motto-v71-hero__title {
    font-size: clamp(62px, 8vw, 88px);
  }

  .motto-v71-story__content {
    width: 62%;
    padding: 36px;
  }

  .motto-v71-story h2 {
    font-size: clamp(46px, 5.5vw, 64px);
  }
}

@media (max-width: 820px) {
  .motto-v71-main {
    padding-top: 14px;
  }

  .motto-v71-hero,
  .motto-v71-stories,
  .motto-v71-cta {
    width: min(calc(100% - 28px), 1640px);
  }

  .motto-v71-hero {
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding-top: 18px;
    border-radius: 28px;
    background-color: #f8ead6;
    background-image:
      linear-gradient(45deg, var(--motto-v71-red) 25%, transparent 25%, transparent 75%, var(--motto-v71-red) 75%),
      linear-gradient(45deg, var(--motto-v71-red) 25%, transparent 25%, transparent 75%, var(--motto-v71-red) 75%);
    background-position: 0 0, 24px 24px;
    background-size: 48px 48px;
  }

  .motto-v71-hero::before,
  .motto-v71-hero::after,
  .motto-v71-hero__veil {
    display: none;
  }

  .motto-v71-hero__media {
    position: relative;
    inset: auto;
    z-index: 1;
    width: 100%;
    height: clamp(275px, 67vw, 420px);
    border-radius: 0;
  }

  .motto-v71-hero__media img {
    object-position: 50% 50%;
    transform: none;
  }

  .motto-v71-hero__content {
    z-index: 2;
    width: 100%;
    min-height: 0;
    padding: 34px 28px 38px;
    background: var(--motto-v71-cream);
  }

  .motto-v71-kicker {
    font-size: 10px;
  }

  .motto-v71-kicker::after {
    width: 36px;
  }

  .motto-v71-hero__title {
    margin: 15px 0 15px;
    font-size: clamp(58px, 15vw, 82px);
    line-height: .82;
  }

  .motto-v71-hero__copy {
    max-width: 650px;
    font-size: 15px;
    line-height: 1.48;
  }

  .motto-v71-stories {
    grid-template-columns: 1fr;
    gap: 14px;
    margin-top: 14px;
  }

  .motto-v71-story {
    min-height: clamp(420px, 92vw, 580px);
    border-radius: 26px;
  }

  .motto-v71-story__shade {
    background:
      linear-gradient(90deg, rgba(8, 11, 9, .84) 0%, rgba(8, 11, 9, .64) 43%, rgba(8, 11, 9, .12) 100%),
      linear-gradient(0deg, rgba(8, 11, 9, .62) 0%, transparent 60%);
  }

  .motto-v71-story__content {
    width: 64%;
    padding: 34px 28px;
  }

  .motto-v71-story h2 {
    font-size: clamp(48px, 11vw, 72px);
  }

  .motto-v71-story p {
    font-size: 15px;
  }

  .motto-v71-cta {
    min-height: 390px;
    margin-top: 14px;
    border-radius: 26px;
  }

  .motto-v71-cta__checker {
    top: auto;
    bottom: 0;
    width: 50%;
    height: 86px;
    opacity: 1;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .motto-v71-cta__checker--left {
    left: 0;
  }

  .motto-v71-cta__checker--right {
    right: 0;
    transform: none;
  }

  .motto-v71-cta__content {
    justify-content: flex-start;
    padding: 76px 26px 124px;
  }

  .motto-v71-cta h2 {
    max-width: 480px;
    margin-top: 18px;
    font-size: clamp(64px, 15vw, 90px);
  }
}

@media (max-width: 560px) {
  .motto-v71-main {
    padding-top: 10px;
    padding-bottom: 36px;
  }

  .motto-v71-hero,
  .motto-v71-stories,
  .motto-v71-cta {
    width: calc(100% - 20px);
  }

  .motto-v71-hero {
    padding-top: 14px;
    border-radius: 22px;
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
  }

  .motto-v71-hero__media {
    height: clamp(250px, 70vw, 340px);
  }

  .motto-v71-hero__content {
    padding: 28px 22px 32px;
  }

  .motto-v71-kicker {
    letter-spacing: .1em;
  }

  .motto-v71-hero__title {
    font-size: clamp(52px, 15.8vw, 70px);
  }

  .motto-v71-hero__copy {
    font-size: 14px;
    line-height: 1.48;
  }

  .motto-v71-story {
    min-height: 455px;
    border-radius: 22px;
  }

  .motto-v71-story--packaging .motto-v71-story__image {
    object-position: 54% center;
  }

  .motto-v71-story--purple .motto-v71-story__image {
    object-position: 55% center;
  }

  .motto-v71-story__shade {
    background:
      linear-gradient(180deg, rgba(8, 11, 9, .22) 0%, rgba(8, 11, 9, .15) 34%, rgba(8, 11, 9, .82) 72%, rgba(8, 11, 9, .94) 100%);
  }

  .motto-v71-story__content {
    justify-content: flex-end;
    width: 100%;
    min-height: 455px;
    padding: 28px 24px 30px;
  }

  .motto-v71-story h2 {
    max-width: 90%;
    font-size: clamp(46px, 13vw, 62px);
  }

  .motto-v71-story__line {
    width: 42px;
    height: 3px;
    margin: 16px 0 15px;
  }

  .motto-v71-story p {
    max-width: 92%;
    font-size: 14px;
    line-height: 1.43;
  }

  .motto-v71-cta {
    min-height: 440px;
    border-radius: 22px;
  }

  .motto-v71-cta__checker {
    height: 90px;
    background-position: 0 0, 20px 20px;
    background-size: 40px 40px;
  }

  .motto-v71-cta__content {
    padding: 78px 22px 128px;
  }

  .motto-v71-cta__eyebrow {
    font-size: 10px;
    letter-spacing: .12em;
  }

  .motto-v71-cta h2 {
    max-width: 300px;
    margin: 20px 0 28px;
    font-size: clamp(68px, 19vw, 88px);
    line-height: .84;
  }

  .motto-v71-cta__button {
    width: min(100%, 310px);
    min-width: 0;
    min-height: 58px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .motto-v71-story__image {
    transition: none;
  }
}

/* V71 mobile alignment refinement: approved phone reference */
@media (max-width: 820px) {
  .motto-v71-cta__checker {
    left: 0;
    right: 0;
    width: 100%;
    height: 86px;
  }

  .motto-v71-cta__checker--left {
    top: 0;
    bottom: auto;
  }

  .motto-v71-cta__checker--right {
    top: auto;
    bottom: 0;
    transform: none;
  }

  .motto-v71-cta__content {
    justify-content: center;
    padding-top: 118px;
    padding-bottom: 118px;
  }
}

@media (max-width: 560px) {
  .motto-v71-story {
    min-height: 430px;
  }

  .motto-v71-story--packaging .motto-v71-story__image {
    object-position: 61% center;
  }

  .motto-v71-story--purple .motto-v71-story__image {
    object-position: 63% center;
  }

  .motto-v71-story__shade {
    background:
      linear-gradient(90deg, rgba(8, 11, 9, .90) 0%, rgba(8, 11, 9, .70) 42%, rgba(8, 11, 9, .18) 82%, rgba(8, 11, 9, .05) 100%),
      linear-gradient(0deg, rgba(8, 11, 9, .44) 0%, transparent 62%);
  }

  .motto-v71-story__content {
    justify-content: center;
    min-height: 430px;
    width: 72%;
    padding: 34px 22px;
  }

  .motto-v71-story h2 {
    max-width: 100%;
  }

  .motto-v71-story p {
    max-width: 100%;
  }

  .motto-v71-cta__checker {
    height: 84px;
  }

  .motto-v71-cta__content {
    padding-top: 112px;
    padding-bottom: 112px;
  }
}

/* ========================================================================== */
/* V72 — Mottomuz / V70 hero + manifesto restored, V71 lower sections kept    */
/* ========================================================================== */
.motto-page-v72 .motto-v71-stories {
  margin-top: 0;
}

.motto-page-v72 .motto-v71-cta {
  margin-bottom: clamp(38px, 5vw, 72px);
}

/* ========================================================================== */
/* V73 — MOBILE RESPONSIVE MASTER PASS                                         */
/* Hedef: 320–820 px aralığında masaüstü küçültmesi yerine gerçek mobil akış. */
/* Masaüstü (>820px) bilinçli olarak dokunulmadan bırakılmıştır.                */
/* ========================================================================== */

@media (max-width: 820px) {
  :root {
    --global-topbar-h: 34px;
    --global-header-h: 64px;
    --mobile-gutter: 16px;
    --mobile-radius-lg: 20px;
    --mobile-radius-md: 16px;
    --mobile-section-space: 52px;
  }

  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  body {
    -webkit-text-size-adjust: 100%;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  .button,
  .delivery-button,
  .mobile-order,
  .menu-toggle,
  .menu-category,
  .menu-sort__trigger,
  .menu-product-card__link,
  .about-story__button,
  .about-brand__button,
  .contact-card__map-link,
  .joul-gallery__cta,
  .motto-v71-cta__button {
    min-height: 44px;
  }

  /* ----------------------------------------------------------------------- */
  /* Shared header: compact, premium and predictable on every public route.  */
  /* ----------------------------------------------------------------------- */
  .utility-bar {
    height: var(--global-topbar-h) !important;
  }

  .utility-bar__inner {
    width: calc(100% - 16px) !important;
    height: var(--global-topbar-h) !important;
    min-height: var(--global-topbar-h) !important;
  }

  .utility-bar__address {
    min-width: 0;
    gap: 5px;
    font-size: 9px !important;
    line-height: 1;
  }

  .utility-bar__address > span:last-child {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .utility-bar__address-icon {
    width: 22px !important;
    height: 22px !important;
    flex: 0 0 22px;
  }

  .utility-bar__address-icon img {
    width: 12px !important;
    height: 12px !important;
  }

  .utility-bar__platforms {
    gap: 4px !important;
    flex: 0 0 auto;
  }

  .utility-platform {
    min-width: 22px !important;
    min-height: 22px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
  }

  .utility-platform__mark {
    width: 22px !important;
    height: 22px !important;
    flex-basis: 22px !important;
    font-size: 9px !important;
  }

  .utility-platform__mark--image img {
    width: 22px !important;
    height: 22px !important;
  }

  .utility-platform__label {
    display: none !important;
  }

  body > .site-header,
  .menu-page > .site-header,
  .product-detail-page > .site-header,
  .about-page > .site-header,
  .contact-page > .site-header,
  .motto-page > .site-header {
    top: var(--global-topbar-h) !important;
    height: var(--global-header-h) !important;
    min-height: var(--global-header-h) !important;
  }

  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .about-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner,
  .motto-page > .site-header .site-header__inner {
    width: calc(100% - 20px) !important;
    height: var(--global-header-h) !important;
    min-height: var(--global-header-h) !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: auto 1fr !important;
    align-items: center !important;
    gap: 10px !important;
  }

  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .about-page > .site-header .brand,
  .contact-page > .site-header .brand,
  .motto-page > .site-header .brand {
    width: 100px !important;
    height: auto !important;
    margin: 0 !important;
  }

  body > .site-header .brand img,
  .menu-page > .site-header .brand img,
  .product-detail-page > .site-header .brand img,
  .about-page > .site-header .brand img,
  .contact-page > .site-header .brand img,
  .motto-page > .site-header .brand img {
    width: 100% !important;
    height: auto !important;
  }

  body > .site-header .site-header__actions,
  .menu-page > .site-header .site-header__actions,
  .product-detail-page > .site-header .site-header__actions,
  .about-page > .site-header .site-header__actions,
  .contact-page > .site-header .site-header__actions,
  .motto-page > .site-header .site-header__actions {
    justify-self: end !important;
    gap: 6px !important;
  }

  .site-header .icon-button,
  .site-header .header-phone,
  .site-header .button--header {
    display: none !important;
  }

  .site-header .mobile-order {
    min-width: 58px !important;
    min-height: 38px !important;
    padding: 0 12px !important;
    border-radius: 999px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: 11px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
  }

  .site-header .menu-toggle {
    width: 38px !important;
    height: 38px !important;
    min-height: 38px !important;
    border-radius: 50% !important;
  }

  .site-header .menu-toggle__icon {
    width: 20px !important;
    height: 20px !important;
  }

  /* ----------------------------------------------------------------------- */
  /* HOME / HERO — mobile hero is a composed panel, not a forced 100vh crop. */
  /* ----------------------------------------------------------------------- */
  .home-page .hero {
    height: auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow: hidden !important;
  }

  .home-page .hero__background,
  .home-page .hero__vignette {
    position: absolute;
    inset: 0;
  }

  .home-page .hero__background {
    background-position: center top !important;
    background-size: cover !important;
  }

  .home-page .hero__inner {
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    margin: 0 !important;
    padding: 30px var(--mobile-gutter) 0 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .home-page .hero__content {
    position: relative !important;
    inset: auto !important;
    z-index: 6;
    width: min(100%, 520px) !important;
    max-width: none !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .home-page .hero__title {
    width: min(100%, 395px) !important;
    margin: 0 !important;
  }

  .home-page .hero__title-art {
    display: block;
    width: 100% !important;
    height: auto !important;
  }

  .home-page .hero__description {
    width: min(100%, 430px) !important;
    max-width: none !important;
    margin: 14px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.48 !important;
  }

  .home-page .hero__actions {
    width: min(100%, 430px) !important;
    margin: 16px 0 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .home-page .hero__actions .button {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 46px !important;
    padding: 0 14px !important;
    justify-content: center !important;
    gap: 9px !important;
    border-radius: 999px !important;
    font-size: 12px !important;
  }

  .home-page .hero__product {
    position: relative !important;
    inset: auto !important;
    z-index: 4;
    width: calc(100% + 32px) !important;
    max-width: 540px !important;
    height: auto !important;
    margin: 10px -16px -2px auto !important;
    align-self: center !important;
    transform: none !important;
  }

  .home-page .hero__product img {
    display: block;
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
    object-position: center bottom !important;
  }

  .home-page .hero__scribble {
    display: none !important;
  }

  /* HOME / categories: smaller cards + intentional next-card peek. */
  .home-page .category-showcase {
    padding: 40px 0 0 !important;
    overflow: hidden !important;
  }

  .home-page .category-showcase__inner {
    width: 100% !important;
    padding: 0 !important;
  }

  .home-page .category-heading {
    width: calc(100% - 32px) !important;
    margin: 0 auto !important;
  }

  .home-page .category-heading__title {
    justify-content: flex-start !important;
  }

  .home-page .category-heading__script {
    font-size: clamp(31px, 8.8vw, 39px) !important;
    line-height: .92 !important;
  }

  .home-page .category-heading__brand {
    font-size: clamp(42px, 12vw, 52px) !important;
    line-height: .85 !important;
  }

  .home-page .category-heading p,
  .home-page .category-heading > p {
    margin-top: 9px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .home-page .category-heading p br {
    display: none;
  }

  .home-page .category-note,
  .home-page .category-showcase__ghost {
    display: none !important;
  }

  .home-page .category-cards {
    width: 100% !important;
    margin: 20px 0 0 !important;
    padding: 0 16px 6px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scrollbar-width: none !important;
    overscroll-behavior-inline: contain;
  }

  .home-page .category-cards::-webkit-scrollbar {
    display: none;
  }

  .home-page .category-card {
    flex: 0 0 min(72vw, 270px) !important;
    width: min(72vw, 270px) !important;
    min-width: 0 !important;
    height: auto !important;
    aspect-ratio: 308 / 345 !important;
    border-radius: 18px !important;
    scroll-snap-align: start !important;
  }

  .home-page .category-card__body {
    left: 14px !important;
    right: 56px !important;
    bottom: 14px !important;
  }

  .home-page .category-card__body h3,
  .home-page .category-card--share .category-card__body h3 {
    font-size: 21px !important;
    line-height: 1 !important;
  }

  .home-page .category-card__body p,
  .home-page .category-card--share .category-card__body p {
    margin-top: 5px !important;
    font-size: 11px !important;
    line-height: 1.25 !important;
  }

  .home-page .category-card__arrow {
    right: 12px !important;
    bottom: 12px !important;
    width: 42px !important;
    height: 42px !important;
  }

  .home-page .category-ribbons {
    margin-top: 18px !important;
  }

  .home-page .category-ribbon {
    min-height: 34px !important;
  }

  .home-page .category-ribbon--solid {
    min-height: 42px !important;
  }

  .home-page .category-ribbon__item {
    font-size: 12px !important;
  }

  /* HOME / featured: one focal visual and carousel cards with visual peek. */
  .home-page .featured-showcase {
    padding: 42px 0 48px !important;
    overflow: hidden !important;
  }

  .home-page .featured-showcase__inner {
    width: 100% !important;
  }

  .home-page .featured-showcase__top,
  .home-page .featured-heading {
    width: calc(100% - 32px) !important;
    margin-inline: auto !important;
  }

  .home-page .featured-showcase__top {
    display: block !important;
  }

  .home-page .featured-heading__eyebrow {
    font-size: 20px !important;
    line-height: 1 !important;
  }

  .home-page .featured-heading__title {
    margin-top: 4px !important;
    font-size: clamp(43px, 12vw, 54px) !important;
    line-height: .88 !important;
  }

  .home-page .featured-heading__copy {
    max-width: 420px !important;
    margin-top: 10px !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
  }

  .home-page .featured-hero {
    width: calc(100% - 32px) !important;
    height: clamp(252px, 68vw, 300px) !important;
    min-height: 0 !important;
    margin: 22px auto 0 !important;
    border-radius: 20px !important;
    overflow: hidden !important;
  }

  .home-page .featured-hero__product img {
    max-height: 92% !important;
  }

  .home-page .featured-hero__cta {
    top: 12px !important;
    right: 12px !important;
    min-height: 42px !important;
    padding-inline: 14px !important;
    font-size: 11px !important;
  }

  .home-page .featured-hero__discover {
    transform: scale(.78) !important;
    transform-origin: left bottom !important;
  }

  .home-page .featured-cards-wrap {
    width: 100% !important;
    margin-top: 14px !important;
  }

  .home-page .featured-cards {
    width: 100% !important;
    padding: 0 16px 6px !important;
    gap: 10px !important;
    overflow-x: auto !important;
    scrollbar-width: none !important;
    scroll-snap-type: x mandatory !important;
  }

  .home-page .featured-cards::-webkit-scrollbar {
    display: none;
  }

  .home-page .featured-card {
    flex: 0 0 min(72vw, 280px) !important;
    width: min(72vw, 280px) !important;
    min-height: 0 !important;
    height: 254px !important;
    border-radius: 18px !important;
    scroll-snap-align: start !important;
  }

  .home-page .featured-card img {
    height: 100% !important;
  }

  .home-page .featured-card__body {
    left: 14px !important;
    right: 52px !important;
    bottom: 14px !important;
  }

  .home-page .featured-card__body h3 {
    font-size: 18px !important;
  }

  .home-page .featured-card__body p {
    font-size: 11px !important;
  }

  .home-page .featured-card__arrow {
    right: 12px !important;
    bottom: 12px !important;
    width: 40px !important;
    height: 40px !important;
  }

  .home-page .featured-cards-nav {
    display: none !important;
  }

  /* HOME / About preview — keep the bespoke composition, but reduce dead air. */
  .home-page .about-preview {
    padding-bottom: 30px !important;
  }

  .home-page .about-preview__collage {
    height: clamp(242px, 68vw, 300px) !important;
  }

  .home-page .about-preview__store-polaroid {
    width: min(58vw, 245px) !important;
  }

  .home-page .about-preview__kitchen-polaroid {
    width: min(47vw, 200px) !important;
  }

  .home-page .about-preview__chicken-foreground {
    width: min(80vw, 330px) !important;
  }

  .home-page .about-preview__content {
    padding: 28px 18px 24px !important;
  }

  .home-page .about-preview__title {
    font-size: clamp(36px, 10vw, 43px) !important;
  }

  .home-page .about-preview__copy {
    margin-top: 14px !important;
    font-size: 13px !important;
  }

  .home-page .about-preview__features {
    margin-inline: 14px !important;
    gap: 8px !important;
  }

  .home-page .about-preview__feature {
    min-height: 82px !important;
    grid-template-columns: 40px 1fr !important;
    column-gap: 12px !important;
    padding: 14px 15px !important;
    border-radius: 15px !important;
  }

  .home-page .about-preview__feature-icon {
    width: 38px !important;
    height: 38px !important;
  }

  .home-page .about-preview__feature h3 {
    font-size: 16px !important;
  }

  .home-page .about-preview__feature p {
    font-size: 11.5px !important;
  }

  /* HOME / real-photo gallery — tighter horizontal rhythm. */
  .home-page .joul-gallery {
    padding: 42px 0 38px !important;
  }

  .home-page .joul-gallery__inner {
    width: calc(100% - 28px) !important;
  }

  .home-page .joul-gallery__header {
    padding-bottom: 18px !important;
  }

  .home-page .joul-gallery__eyebrow {
    font-size: 18px !important;
  }

  .home-page .joul-gallery__title {
    font-size: clamp(39px, 10.8vw, 48px) !important;
  }

  .home-page .joul-gallery__lead {
    margin-top: 8px !important;
    font-size: 13px !important;
  }

  .home-page .joul-gallery__cta {
    min-height: 46px !important;
    margin-top: 16px !important;
    padding-inline: 17px !important;
    font-size: 12.5px !important;
  }

  .home-page .joul-gallery__cards {
    width: calc(100% + 14px) !important;
    height: 268px !important;
    gap: 9px !important;
  }

  .home-page .joul-gallery__card,
  .home-page .joul-gallery__card.is-active {
    flex-basis: min(72vw, 275px) !important;
    border-radius: 17px !important;
  }

  /* HOME / delivery CTA — preserve the cinematic scene but remove 950px bloat. */
  .home-page .delivery-cta {
    min-height: 760px !important;
    height: 760px !important;
    margin: 0 !important;
    overflow: hidden !important;
  }

  .home-page .delivery-cta__storefront {
    left: -9% !important;
    top: 0 !important;
    width: 55% !important;
    height: 155px !important;
    opacity: .82 !important;
  }

  .home-page .delivery-cta__store-note,
  .home-page .delivery-cta__store-arrow,
  .home-page .delivery-cta__near-note,
  .home-page .delivery-cta__speed {
    display: none !important;
  }

  .home-page .delivery-cta__content {
    top: 92px !important;
    left: 50% !important;
    width: calc(100% - 32px) !important;
    max-width: 520px !important;
    transform: translateX(-50%) !important;
  }

  .home-page .delivery-cta__eyebrow {
    margin-bottom: 7px !important;
    font-size: 9px !important;
  }

  .home-page .delivery-cta__title {
    font-size: clamp(38px, 10.5vw, 48px) !important;
    line-height: .9 !important;
  }

  .home-page .delivery-cta__copy {
    width: min(100%, 430px) !important;
    margin: 13px auto 0 !important;
    font-size: 12.5px !important;
    line-height: 1.44 !important;
  }

  .home-page .delivery-cta__actions {
    width: min(100%, 430px) !important;
    margin: 16px auto 0 !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .home-page .delivery-button {
    min-width: 0 !important;
    min-height: 46px !important;
    padding-inline: 12px !important;
    font-size: 12px !important;
  }

  .home-page .order-platforms {
    margin-top: 14px !important;
  }

  .home-page .order-platforms > p {
    margin-bottom: 7px !important;
    font-size: 10.5px !important;
  }

  .home-page .order-platforms__grid {
    gap: 5px !important;
  }

  .home-page .order-platform {
    min-height: 40px !important;
    font-size: clamp(8px, 2.2vw, 10.5px) !important;
  }

  .home-page .delivery-cta__route {
    height: 30% !important;
  }

  .home-page .delivery-cta__road {
    left: -19% !important;
    bottom: 0 !important;
    width: 138% !important;
  }

  .home-page .delivery-cta__courier {
    left: -8% !important;
    bottom: -2% !important;
    width: min(62vw, 300px) !important;
  }

  .home-page .delivery-cta__smoke {
    left: -8% !important;
    bottom: -3% !important;
    width: 58% !important;
  }

  .home-page .delivery-cta__destination {
    right: -8% !important;
    bottom: 26px !important;
    width: 52% !important;
    height: 235px !important;
  }

  .home-page .delivery-cta__kapina {
    left: -34% !important;
    top: 0 !important;
    width: 80% !important;
  }

  .home-page .delivery-cta__pin {
    right: 42% !important;
    bottom: 12% !important;
    width: 30% !important;
  }

  .home-page .delivery-cta__chicken {
    right: -12% !important;
    bottom: 3% !important;
    width: 67% !important;
  }

  .home-page .delivery-cta__bucket {
    right: -6% !important;
    bottom: -16% !important;
    width: 43% !important;
  }

  /* ----------------------------------------------------------------------- */
  /* MENU PAGE — hero becomes a real two-row mobile composition.             */
  /* ----------------------------------------------------------------------- */
  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 0 4px !important;
    overflow: hidden !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__inner {
    position: relative !important;
    width: 100% !important;
    min-height: 0 !important;
    height: auto !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto clamp(220px, 58vw, 300px) !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__content {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding: 24px 18px 4px !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__breadcrumb {
    margin-bottom: 8px !important;
    font-size: 10px !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero h1 {
    font-size: clamp(48px, 13vw, 62px) !important;
    line-height: .9 !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__content > p {
    max-width: 360px !important;
    margin-top: 8px !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__script {
    width: 70px !important;
    margin-top: 5px !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__stage {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 220px !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__burger {
    left: 50% !important;
    right: auto !important;
    bottom: -3% !important;
    width: min(74vw, 365px) !important;
    transform: translateX(-50%) !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero.has-entered .menu-page-hero__burger {
    transform: translateX(-50%) !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__stamp-wrap {
    top: 11% !important;
    right: 8% !important;
    width: 58px !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__bucket-wrap--group {
    right: -7% !important;
    bottom: -10% !important;
    width: min(29vw, 135px) !important;
    opacity: .72 !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__steam {
    left: 38% !important;
    right: auto !important;
    bottom: 42% !important;
    width: 72px !important;
  }

  .menu-page:not(.motto-page):not(.product-detail-page) .menu-page-hero__steam--two {
    left: 53% !important;
    right: auto !important;
    bottom: 39% !important;
    width: 56px !important;
  }

  /* MENU / catalog controls and cards. */
  .menu-page:not(.product-detail-page) .menu-catalog {
    padding: 24px 0 60px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__inner {
    width: calc(100% - 28px) !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__toolbar {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
    align-items: center !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__search {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: 46px !important;
    border-radius: 13px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__result-count {
    grid-column: 1 !important;
    grid-row: 2 !important;
    order: initial !important;
    justify-self: start !important;
    margin: 0 !important;
    font-size: 11px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__sort {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: auto !important;
    min-width: 122px !important;
  }

  .menu-page:not(.product-detail-page) .menu-sort__trigger {
    width: 100% !important;
    height: 40px !important;
    min-height: 40px !important;
    padding: 0 10px 0 11px !important;
    border-radius: 12px !important;
    font-size: 11px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
    margin-top: 10px !important;
    margin-right: -14px !important;
    padding-right: 14px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__categories {
    gap: 7px !important;
  }

  .menu-page:not(.product-detail-page) .menu-category {
    min-height: 42px !important;
    padding: 0 12px !important;
    gap: 7px !important;
    border-radius: 999px !important;
    font-size: 11.5px !important;
  }

  .menu-page:not(.product-detail-page) .menu-category__icon,
  .menu-page:not(.product-detail-page) .menu-category__icon img {
    width: 19px !important;
    height: 19px !important;
    flex-basis: 19px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__heading {
    margin-top: 28px !important;
    gap: 8px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__eyebrow {
    font-size: 10px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__heading h2 {
    font-size: clamp(34px, 9.5vw, 43px) !important;
    line-height: .95 !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__lead {
    max-width: 420px !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-grid {
    margin-top: 16px !important;
    gap: 12px !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card {
    border-radius: 15px !important;
    overflow: hidden !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__media {
    aspect-ratio: 1.72 / 1 !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__badge {
    top: 9px !important;
    left: 9px !important;
    min-height: 25px !important;
    padding-inline: 9px !important;
    font-size: 8.5px !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__body {
    padding: 11px 12px 12px !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__category {
    font-size: 8.5px !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card h3 {
    margin-top: 4px !important;
    font-size: 17px !important;
    line-height: 1.08 !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__description {
    min-height: 0 !important;
    margin-top: 6px !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2 !important;
    -webkit-box-orient: vertical !important;
    overflow: hidden !important;
    font-size: 11.5px !important;
    line-height: 1.42 !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__link {
    margin-top: 7px !important;
    font-size: 11px !important;
  }

  /* ----------------------------------------------------------------------- */
  /* PRODUCT DETAIL — less vertical bloat and clearer one-column hierarchy.  */
  /* ----------------------------------------------------------------------- */
  .product-detail-page .pd-shell {
    width: calc(100% - 30px) !important;
  }

  .product-detail-page .pd-hero {
    min-height: 0 !important;
    padding: 12px 0 26px !important;
  }

  .product-detail-page .pd-breadcrumb {
    margin-bottom: 8px !important;
    font-size: 10px !important;
  }

  .product-detail-page .pd-hero__grid {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .product-detail-page .pd-summary {
    order: 1 !important;
    padding-top: 0 !important;
  }

  .product-detail-page .pd-gallery {
    order: 2 !important;
  }

  .product-detail-page .pd-category-pill {
    min-height: 26px !important;
    padding-inline: 10px !important;
    font-size: 9.5px !important;
  }

  .product-detail-page .pd-summary h1 {
    margin-top: 9px !important;
    font-size: clamp(36px, 10.2vw, 46px) !important;
    line-height: .95 !important;
  }

  .product-detail-page .pd-tagline {
    margin-top: 9px !important;
    font-size: 16px !important;
    line-height: 1.28 !important;
  }

  .product-detail-page .pd-description {
    margin-top: 9px !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
  }

  .product-detail-page .pd-gallery__stage {
    min-height: 255px !important;
    height: 255px !important;
  }

  .product-detail-page .pd-gallery__main {
    width: min(100%, 390px) !important;
    height: 255px !important;
  }

  .product-detail-page .pd-gallery__thumbs {
    margin-top: 8px !important;
    gap: 8px !important;
  }

  .product-detail-page .pd-gallery__thumb {
    width: 78px !important;
    height: 56px !important;
    border-radius: 9px !important;
  }

  .product-detail-page .pd-components {
    margin-top: 18px !important;
  }

  .product-detail-page .pd-section-heading h2 {
    font-size: 22px !important;
  }

  .product-detail-page .pd-components__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    margin-top: 10px !important;
  }

  .product-detail-page .pd-component-card {
    min-height: 102px !important;
    padding: 8px 6px 9px !important;
    grid-template-rows: 58px auto !important;
    border-radius: 12px !important;
  }

  .product-detail-page .pd-component-card__visual {
    height: 56px !important;
  }

  .product-detail-page .pd-component-card__visual img {
    max-width: 70px !important;
    max-height: 54px !important;
  }

  .product-detail-page .pd-component-card p {
    margin-top: 3px !important;
    font-size: 9.5px !important;
  }

  .product-detail-page .pd-order {
    margin-top: 20px !important;
  }

  .product-detail-page .pd-order__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .product-detail-page .pd-special {
    min-height: 0 !important;
  }

  .product-detail-page .pd-special__inner {
    min-height: 0 !important;
    padding: 30px 0 28px !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .product-detail-page .pd-special__copy > p {
    margin-left: 0 !important;
  }

  .product-detail-page .pd-special__slogan {
    margin-left: 0 !important;
  }

  .product-detail-page .pd-special__visual {
    min-height: 230px !important;
  }

  .product-detail-page .pd-special__visual > img {
    height: 230px !important;
  }

  .product-detail-page .pd-special__benefits {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-detail-page .pd-related {
    padding-top: 30px !important;
  }

  .product-detail-page .pd-related__track {
    grid-auto-columns: min(78vw, 300px) !important;
    gap: 10px !important;
  }

  /* ----------------------------------------------------------------------- */
  /* ABOUT — compact editorial flow; no giant visual dead zones.             */
  /* ----------------------------------------------------------------------- */
  .about-page .contact-hero,
  .contact-page .contact-hero {
    height: 320px !important;
    min-height: 320px !important;
  }

  .about-page .contact-hero__content,
  .contact-page .contact-hero__content {
    width: calc(100% - 30px) !important;
    padding-bottom: 22px !important;
  }

  .about-page .contact-hero__copy h1,
  .contact-page .contact-hero__copy h1 {
    font-size: clamp(36px, 9.8vw, 43px) !important;
  }

  .about-page .contact-hero__copy p,
  .contact-page .contact-hero__copy p {
    font-size: 12.5px !important;
  }

  .about-page .about-story__inner {
    padding: 24px 16px 42px !important;
    gap: 18px !important;
  }

  .about-page .about-story__visual-scene {
    width: min(100%, 430px) !important;
  }

  .about-page .about-story__content h2 {
    font-size: clamp(34px, 9.8vw, 42px) !important;
  }

  .about-page .about-story__lead {
    margin-top: 12px !important;
    font-size: 13px !important;
  }

  .about-page .about-story__features {
    margin-top: 20px !important;
    gap: 14px !important;
  }

  .about-page .about-story__feature h3 {
    font-size: 16px !important;
  }

  .about-page .about-story__feature p {
    font-size: 12.5px !important;
  }

  .about-page .about-brand {
    padding-bottom: 42px !important;
  }

  .about-page .about-brand__inner,
  .about-page .about-brand__stats-wrap {
    width: 100% !important;
    padding-inline: 16px !important;
  }

  .about-page .about-brand__inner {
    padding-top: 36px !important;
    gap: 18px !important;
  }

  .about-page .about-brand__content h2 {
    font-size: clamp(34px, 9.8vw, 42px) !important;
  }

  .about-page .about-brand__lead {
    margin-top: 12px !important;
    font-size: 13px !important;
  }

  .about-page .about-brand__cards {
    margin-top: 17px !important;
    gap: 8px !important;
  }

  .about-page .about-brand__card {
    padding: 15px !important;
    border-radius: 14px !important;
  }

  .about-page .about-brand__stage {
    min-height: 290px !important;
  }

  .about-page .about-brand__product-orbit {
    width: min(100%, 300px) !important;
  }

  .about-page .about-brand__stats-wrap {
    padding-top: 10px !important;
  }

  .about-page .about-brand__stat {
    min-height: 80px !important;
    padding: 11px !important;
    border-radius: 14px !important;
  }

  .about-page .about-brand__stat strong {
    font-size: 23px !important;
  }

  /* ----------------------------------------------------------------------- */
  /* MOTTO — hero in natural flow + tighter manifesto/stories/CTA.           */
  /* ----------------------------------------------------------------------- */
  .motto-page .motto-page-hero {
    height: auto !important;
    min-height: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__inner {
    position: relative !important;
    width: 100% !important;
    height: auto !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: auto clamp(210px, 55vw, 280px) !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__content {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    padding: 22px 18px 6px !important;
  }

  .motto-page .motto-page-hero__eyebrow {
    margin-bottom: 7px !important;
    font-size: 9px !important;
    letter-spacing: .24em !important;
  }

  .motto-page .motto-page-hero .motto-page-hero__title {
    width: 100% !important;
    font-size: clamp(35px, 9.8vw, 46px) !important;
    line-height: .91 !important;
  }

  .motto-page .motto-page-hero .motto-page-hero__copy {
    max-width: 520px !important;
    margin-top: 11px !important;
    font-size: 12.5px !important;
    line-height: 1.46 !important;
  }

  .motto-page .motto-page-hero .motto-page-hero__cta {
    width: fit-content !important;
    min-width: 190px !important;
    min-height: 44px !important;
    margin-top: 13px !important;
    padding-inline: 16px !important;
    font-size: 11.5px !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__stage {
    position: relative !important;
    inset: auto !important;
    width: 100% !important;
    height: 100% !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__burger {
    left: 50% !important;
    right: auto !important;
    bottom: -5% !important;
    width: min(74vw, 360px) !important;
    transform: translateX(-50%) !important;
  }

  .motto-page .motto-page-hero.has-entered .menu-page-hero__burger {
    transform: translateX(-50%) !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__stamp-wrap {
    top: 10% !important;
    right: 8% !important;
    width: 55px !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__bucket-wrap--group {
    right: -7% !important;
    bottom: -11% !important;
    width: min(29vw, 132px) !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__steam {
    left: 37% !important;
    right: auto !important;
    bottom: 42% !important;
  }

  .motto-page .motto-page-hero .menu-page-hero__steam--two {
    left: 53% !important;
    right: auto !important;
    bottom: 39% !important;
  }

  .motto-page .motto-manifesto-band {
    padding: 16px 0 42px !important;
  }

  .motto-page .motto-manifesto-band__inner {
    width: calc(100% - 20px) !important;
    padding: 0 10px !important;
    border-radius: 20px !important;
  }

  .motto-page .motto-manifesto-band__card {
    padding: 24px 16px !important;
    gap: 18px !important;
  }

  .motto-page .motto-manifesto-band__headline {
    font-size: clamp(34px, 9.7vw, 43px) !important;
  }

  .motto-page .motto-manifesto-band__text {
    margin-top: 14px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  .motto-page .motto-manifesto-band__feature {
    grid-template-columns: 58px minmax(0, 1fr) !important;
    column-gap: 13px !important;
    padding: 14px 0 !important;
  }

  .motto-page .motto-manifesto-band__icon {
    width: 56px !important;
  }

  .motto-page .motto-manifesto-band__feature h3 {
    font-size: 19px !important;
  }

  .motto-page .motto-manifesto-band__feature p {
    font-size: 12.5px !important;
    line-height: 1.4 !important;
  }

  .motto-page .motto-v71-stories {
    width: calc(100% - 20px) !important;
    gap: 10px !important;
  }

  .motto-page .motto-v71-story {
    min-height: 345px !important;
    border-radius: 19px !important;
  }

  .motto-page .motto-v71-story__content {
    min-height: 345px !important;
    width: 74% !important;
    padding: 24px 18px !important;
  }

  .motto-page .motto-v71-story h2 {
    font-size: clamp(37px, 10.6vw, 48px) !important;
  }

  .motto-page .motto-v71-story p {
    font-size: 12.5px !important;
    line-height: 1.42 !important;
  }

  .motto-page .motto-v71-cta {
    width: calc(100% - 20px) !important;
    min-height: 330px !important;
    border-radius: 19px !important;
  }

  .motto-page .motto-v71-cta__checker {
    height: 62px !important;
  }

  .motto-page .motto-v71-cta__content {
    padding: 86px 18px !important;
  }

  .motto-page .motto-v71-cta h2 {
    max-width: 300px !important;
    margin: 13px 0 20px !important;
    font-size: clamp(50px, 14vw, 64px) !important;
    line-height: .87 !important;
  }

  .motto-page .motto-v71-cta__button {
    width: min(100%, 250px) !important;
    min-height: 48px !important;
  }

  /* ----------------------------------------------------------------------- */
  /* CONTACT — compact information + map; no oversized mobile cards.         */
  /* ----------------------------------------------------------------------- */
  .contact-page .contact-info {
    padding: 30px 0 34px !important;
  }

  .contact-page .contact-info > .contact-shell,
  .contact-page .contact-info__layout {
    width: calc(100% - 30px) !important;
  }

  .contact-page .contact-info__layout {
    margin-inline: auto !important;
    grid-template-columns: 1fr !important;
    gap: 18px !important;
  }

  .contact-page .contact-info__intro h2 {
    font-size: clamp(33px, 9.2vw, 40px) !important;
  }

  .contact-page .contact-info__intro p {
    font-size: 12.5px !important;
  }

  .contact-page .contact-info__cards {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 8px !important;
  }

  .contact-page .contact-card {
    min-height: 0 !important;
    padding: 14px !important;
    border-radius: 14px !important;
  }

  .contact-page .contact-card__icon {
    width: 38px !important;
    height: 38px !important;
    margin-bottom: 9px !important;
  }

  .contact-page .contact-card__icon img {
    width: 20px !important;
    height: 20px !important;
  }

  .contact-page .contact-card h3 {
    font-size: 14px !important;
  }

  .contact-page .contact-card__value,
  .contact-page .contact-card__address,
  .contact-page .contact-card p,
  .contact-page .contact-hours {
    font-size: 11.5px !important;
  }

  .contact-page .contact-map {
    min-height: 300px !important;
    height: 300px !important;
    margin-top: 0 !important;
    border-radius: 17px !important;
  }

  .contact-page .contact-cta {
    min-height: 0 !important;
    padding: 34px 0 !important;
  }
}

@media (max-width: 560px) {
  :root {
    --mobile-gutter: 14px;
    --mobile-section-space: 46px;
  }

  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .about-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner,
  .motto-page > .site-header .site-header__inner {
    width: calc(100% - 16px) !important;
  }

  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .about-page > .site-header .brand,
  .contact-page > .site-header .brand,
  .motto-page > .site-header .brand {
    width: 94px !important;
  }

  .home-page .hero__inner {
    padding-top: 24px !important;
    padding-inline: 14px !important;
  }

  .home-page .hero__title {
    width: min(100%, 350px) !important;
  }

  .home-page .hero__description {
    font-size: 12.5px !important;
  }

  .home-page .hero__actions {
    margin-top: 14px !important;
  }

  .home-page .hero__product {
    width: calc(100% + 28px) !important;
    margin-left: -14px !important;
    margin-right: -14px !important;
    margin-top: 6px !important;
  }

  .home-page .category-showcase {
    padding-top: 34px !important;
  }

  .home-page .category-heading {
    width: calc(100% - 28px) !important;
  }

  .home-page .category-card {
    flex-basis: min(70vw, 255px) !important;
    width: min(70vw, 255px) !important;
  }

  .home-page .featured-showcase {
    padding-top: 38px !important;
    padding-bottom: 42px !important;
  }

  .home-page .featured-showcase__top,
  .home-page .featured-heading,
  .home-page .featured-hero {
    width: calc(100% - 28px) !important;
  }

  .home-page .featured-card {
    flex-basis: min(70vw, 265px) !important;
    width: min(70vw, 265px) !important;
    height: 240px !important;
  }

  .home-page .joul-gallery__inner {
    width: calc(100% - 22px) !important;
  }

  .home-page .joul-gallery__cards {
    height: 252px !important;
  }

  .home-page .joul-gallery__card,
  .home-page .joul-gallery__card.is-active {
    flex-basis: min(70vw, 260px) !important;
  }

  .home-page .delivery-cta {
    min-height: 720px !important;
    height: 720px !important;
  }

  .home-page .delivery-cta__content {
    top: 80px !important;
    width: calc(100% - 28px) !important;
  }

  .home-page .delivery-cta__actions {
    grid-template-columns: 1fr !important;
    max-width: 330px !important;
  }

  .home-page .delivery-button {
    min-height: 44px !important;
  }

  .home-page .delivery-cta__destination {
    height: 215px !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-grid {
    grid-template-columns: 1fr !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__media {
    aspect-ratio: 1.78 / 1 !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card__body {
    padding: 10px 11px 11px !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-card h3 {
    font-size: 17px !important;
  }

  .product-detail-page .pd-components__grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  .product-detail-page .pd-order__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .about-page .about-brand__stage {
    min-height: 270px !important;
  }

  .contact-page .contact-info__cards {
    grid-template-columns: 1fr !important;
  }

  .contact-page .contact-card--address,
  .contact-page .contact-card--hours {
    grid-column: auto !important;
  }

  .contact-page .contact-map {
    min-height: 270px !important;
    height: 270px !important;
  }
}

@media (max-width: 380px) {
  :root {
    --global-topbar-h: 32px;
    --global-header-h: 60px;
  }

  .utility-bar__address > span:last-child {
    max-width: 120px;
  }

  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .about-page > .site-header .brand,
  .contact-page > .site-header .brand,
  .motto-page > .site-header .brand {
    width: 88px !important;
  }

  .site-header .mobile-order {
    min-width: 54px !important;
    min-height: 36px !important;
    padding-inline: 10px !important;
    font-size: 10.5px !important;
  }

  .site-header .menu-toggle {
    width: 36px !important;
    height: 36px !important;
    min-height: 36px !important;
  }

  .home-page .hero__actions {
    grid-template-columns: 1fr !important;
  }

  .home-page .hero__actions .button {
    min-height: 44px !important;
  }

  .home-page .category-card {
    flex-basis: 75vw !important;
    width: 75vw !important;
  }

  .home-page .featured-card,
  .home-page .joul-gallery__card,
  .home-page .joul-gallery__card.is-active {
    flex-basis: 76vw !important;
    width: 76vw !important;
  }

  .home-page .delivery-cta {
    min-height: 700px !important;
    height: 700px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__inner,
  .product-detail-page .pd-shell {
    width: calc(100% - 24px) !important;
  }

  .product-detail-page .pd-components__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .product-detail-page .pd-order__grid {
    grid-template-columns: 1fr !important;
  }

  .motto-page .motto-v71-story__content {
    width: 82% !important;
  }

  .motto-page .motto-v71-cta h2 {
    font-size: 48px !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .home-page .featured-card,
  .home-page .category-card,
  .home-page .joul-gallery__card,
  .menu-page .menu-product-card,
  .product-detail-page .pd-related-card,
  .motto-page .motto-v71-story__image {
    transition: none !important;
  }
}

/* ========================================================================== */
/* V74 — MOBILE REGRESSION HOTFIX / HOME FIRST-FOLD                           */
/* V73'te 390–430 px aralığında 820px kuralı eski <=480px tek kolon kuralını  */
/* ezdiği için hero ilk ekranda tekrar masaüstü sıkışmasına yaklaşıyordu.       */
/* Bu blok mobil header + ilk ekran + kategori girişini güvenli ölçülere kilitler. */
/* ========================================================================== */

@media (max-width: 560px) {
  :root {
    --global-topbar-h: 30px;
    --global-header-h: 58px;
    --mobile-gutter: 14px;
  }

  html,
  body,
  .home-page,
  .home-page main {
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
  }

  /* Header: never let the order button or hamburger leave the viewport. */
  .utility-bar {
    height: var(--global-topbar-h) !important;
  }

  .utility-bar__inner {
    width: calc(100% - 12px) !important;
    height: var(--global-topbar-h) !important;
    min-height: var(--global-topbar-h) !important;
    gap: 5px !important;
  }

  .utility-bar__address,
  .utility-bar__address-icon {
    width: 21px !important;
    height: 21px !important;
    flex: 0 0 21px !important;
  }

  .utility-bar__address > span:last-child {
    display: none !important;
  }

  .utility-bar__platforms {
    gap: 3px !important;
    margin-left: auto !important;
  }

  .utility-platform,
  .utility-platform__mark,
  .utility-platform__mark--image img {
    width: 21px !important;
    min-width: 21px !important;
    height: 21px !important;
    min-height: 21px !important;
    flex-basis: 21px !important;
  }

  body > .site-header,
  .menu-page > .site-header,
  .product-detail-page > .site-header,
  .about-page > .site-header,
  .contact-page > .site-header,
  .motto-page > .site-header {
    top: var(--global-topbar-h) !important;
    height: var(--global-header-h) !important;
    min-height: var(--global-header-h) !important;
  }

  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .about-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner,
  .motto-page > .site-header .site-header__inner {
    width: calc(100% - 14px) !important;
    height: var(--global-header-h) !important;
    min-height: var(--global-header-h) !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 7px !important;
    overflow: visible !important;
  }

  body > .site-header .site-header__inner > *,
  .menu-page > .site-header .site-header__inner > *,
  .product-detail-page > .site-header .site-header__inner > *,
  .about-page > .site-header .site-header__inner > *,
  .contact-page > .site-header .site-header__inner > *,
  .motto-page > .site-header .site-header__inner > * {
    min-width: 0 !important;
  }

  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .about-page > .site-header .brand,
  .contact-page > .site-header .brand,
  .motto-page > .site-header .brand {
    width: 86px !important;
    max-width: 86px !important;
  }

  body > .site-header .site-header__actions,
  .menu-page > .site-header .site-header__actions,
  .product-detail-page > .site-header .site-header__actions,
  .about-page > .site-header .site-header__actions,
  .contact-page > .site-header .site-header__actions,
  .motto-page > .site-header .site-header__actions {
    width: auto !important;
    max-width: 100% !important;
    min-width: max-content !important;
    gap: 5px !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .site-header .mobile-order {
    width: auto !important;
    min-width: 52px !important;
    min-height: 34px !important;
    height: 34px !important;
    padding: 0 9px !important;
    font-size: 10px !important;
  }

  .site-header .menu-toggle {
    width: 34px !important;
    min-width: 34px !important;
    height: 34px !important;
    min-height: 34px !important;
  }

  .site-header .menu-toggle__icon {
    width: 18px !important;
    height: 18px !important;
  }

  /* Home first fold: compact composition instead of a stacked desktop clone. */
  .home-page .hero {
    position: relative !important;
    height: clamp(490px, 60svh, 515px) !important;
    min-height: 490px !important;
    max-height: 515px !important;
    overflow: hidden !important;
  }

  .home-page .hero__inner {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    min-height: 100% !important;
    margin: 0 !important;
    padding: 20px var(--mobile-gutter) 0 !important;
    display: block !important;
  }

  .home-page .hero__content {
    position: relative !important;
    z-index: 8 !important;
    width: 100% !important;
    max-width: 360px !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .home-page .hero__title {
    width: min(100%, 315px) !important;
    max-width: 315px !important;
  }

  .home-page .hero__description {
    width: min(100%, 345px) !important;
    max-width: 345px !important;
    margin-top: 10px !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
  }

  .home-page .hero__actions {
    width: min(100%, 345px) !important;
    margin-top: 12px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 7px !important;
  }

  .home-page .hero__actions .button,
  .home-page .hero__actions .button:first-child,
  .home-page .hero__actions .button:last-child {
    width: 100% !important;
    min-width: 0 !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 10px !important;
    gap: 7px !important;
    font-size: 10.5px !important;
  }

  .home-page .hero__actions .button__arrow {
    font-size: 16px !important;
  }

  .home-page .hero__product {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: auto !important;
    bottom: -3px !important;
    width: min(108vw, 430px) !important;
    max-width: 430px !important;
    height: auto !important;
    margin: 0 !important;
    transform: translateX(-50%) !important;
    opacity: 1 !important;
  }

  .home-page .hero__product img {
    width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
  }

  /* The next section must enter the viewport cleanly and never run off-right. */
  .home-page .category-showcase {
    padding-top: 30px !important;
  }

  .home-page .category-heading {
    width: calc(100% - 28px) !important;
    max-width: 400px !important;
    margin-inline: auto !important;
    overflow: visible !important;
  }

  .home-page .category-heading__title {
    width: 100% !important;
    max-width: 100% !important;
    display: flex !important;
    align-items: baseline !important;
    justify-content: center !important;
    white-space: nowrap !important;
  }

  .home-page .category-heading__script {
    margin-right: .13em !important;
    font-size: clamp(28px, 8vw, 34px) !important;
  }

  .home-page .category-heading__brand,
  .home-page .category-heading__question {
    font-size: clamp(38px, 10.8vw, 46px) !important;
  }

  .home-page .category-heading__accent {
    display: none !important;
  }

  .home-page .category-heading p,
  .home-page .category-heading > p {
    width: 100% !important;
    max-width: 340px !important;
    margin: 8px auto 0 !important;
    padding-inline: 2px !important;
    text-align: center !important;
    font-size: 12px !important;
    line-height: 1.42 !important;
    overflow-wrap: anywhere;
  }

  .home-page .category-cards {
    padding-inline: 14px !important;
    scroll-padding-inline: 14px !important;
  }

  .home-page .category-card {
    flex-basis: min(76vw, 286px) !important;
    width: min(76vw, 286px) !important;
  }

  /* Lower-page master pass: remove the two remaining oversized mobile blocks. */
  .home-page .featured-card,
  .home-page .joul-gallery__card,
  .home-page .joul-gallery__card.is-active {
    flex-basis: min(76vw, 286px) !important;
    width: min(76vw, 286px) !important;
  }

  .home-page .delivery-cta {
    min-height: 660px !important;
    height: 660px !important;
  }

  .home-page .delivery-cta__content {
    top: 68px !important;
  }

  .home-page .delivery-cta__destination {
    height: 200px !important;
  }
}

@media (max-width: 359px) {
  :root {
    --global-topbar-h: 28px;
    --global-header-h: 56px;
    --mobile-gutter: 12px;
  }

  body > .site-header .site-header__inner,
  .menu-page > .site-header .site-header__inner,
  .product-detail-page > .site-header .site-header__inner,
  .about-page > .site-header .site-header__inner,
  .contact-page > .site-header .site-header__inner,
  .motto-page > .site-header .site-header__inner {
    width: calc(100% - 12px) !important;
    gap: 5px !important;
  }

  body > .site-header .brand,
  .menu-page > .site-header .brand,
  .product-detail-page > .site-header .brand,
  .about-page > .site-header .brand,
  .contact-page > .site-header .brand,
  .motto-page > .site-header .brand {
    width: 78px !important;
    max-width: 78px !important;
  }

  .site-header .mobile-order {
    min-width: 48px !important;
    height: 32px !important;
    min-height: 32px !important;
    padding-inline: 8px !important;
    font-size: 9.5px !important;
  }

  .site-header .menu-toggle {
    width: 32px !important;
    min-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
  }

  .home-page .hero {
    height: 500px !important;
    min-height: 500px !important;
    max-height: 500px !important;
  }

  .home-page .hero__inner {
    padding: 18px 12px 0 !important;
  }

  .home-page .hero__title {
    width: min(100%, 270px) !important;
    max-width: 270px !important;
  }

  .home-page .hero__description {
    width: 100% !important;
    max-width: 310px !important;
    font-size: 11.5px !important;
  }

  .home-page .hero__actions {
    width: 100% !important;
    max-width: 310px !important;
    grid-template-columns: 1fr !important;
    gap: 6px !important;
  }

  .home-page .hero__actions .button,
  .home-page .hero__actions .button:first-child,
  .home-page .hero__actions .button:last-child {
    height: 38px !important;
    min-height: 38px !important;
  }

  .home-page .hero__product {
    width: min(112vw, 370px) !important;
  }

  .home-page .category-heading {
    width: calc(100% - 20px) !important;
  }

  .home-page .category-heading__script {
    font-size: 27px !important;
  }

  .home-page .category-heading__brand,
  .home-page .category-heading__question {
    font-size: 36px !important;
  }

  .home-page .category-heading p,
  .home-page .category-heading > p {
    max-width: 290px !important;
    font-size: 11.5px !important;
  }

  .home-page .category-card,
  .home-page .featured-card,
  .home-page .joul-gallery__card,
  .home-page .joul-gallery__card.is-active {
    flex-basis: calc(100vw - 54px) !important;
    width: calc(100vw - 54px) !important;
  }
}


/* ========================================================================== */
/* V81 / Homepage mobile refinement pass                                      */
/* ========================================================================= */

/* Hero title optical alignment */
.hero__title {
  margin-left: -18px;
}
.hero__description {
  margin-left: 0;
}

/* Mobile menu toggle: force a visible hamburger / close icon without relying
   on external mask assets, and keep the button legible on the light header. */
.site-header .menu-toggle {
  color: #2a130f;
}
.site-header .menu-toggle__icon {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 22px !important;
  height: 16px !important;
  display: inline-block;
  background: linear-gradient(currentColor 0 0) center / 100% 2px no-repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  transform: none !important;
}
.site-header .menu-toggle__icon::before,
.site-header .menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  border-radius: 999px;
  background: currentColor;
  transition: transform .24s ease, top .24s ease, bottom .24s ease, opacity .18s ease;
}
.site-header .menu-toggle__icon::before { top: 0; }
.site-header .menu-toggle__icon::after { bottom: 0; }
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background-size: 0 0 !important;
}
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  top: 7px;
  transform: rotate(45deg);
}
.site-header .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  bottom: 7px;
  transform: rotate(-45deg);
}

@media (max-width: 900px) {
  .site-header .menu-toggle {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    color: #2a130f;
    background: #fff8ea;
    border: 1px solid rgba(58,27,18,.12);
    box-shadow: 0 10px 22px rgba(41,16,10,.08);
  }

  /* Mobile hero: keep the product hidden until the dedicated hero-enter class
     is applied so the right-to-left entrance remains visible on phones. */
  .home-page .hero__product {
    opacity: 0;
    transform: translate3d(104px, 10px, 0) scale(.986);
    transition: opacity .84s var(--ease-out) .05s, transform 1.02s var(--ease-out) .05s;
  }
  .home-page .hero.has-hero-entered .hero__product {
    opacity: 1;
    transform: translate3d(0,0,0) scale(1);
  }
}

@media (max-width: 767px) {
  .hero__title {
    margin-left: -12px;
    max-width: calc(100% + 12px);
  }

  /* Featured products: show the cards like the category rail, with the next
     cards peeking from the right so the user can swipe horizontally. */
  .home-page .featured-cards {
    gap: 14px;
    margin-inline: -16px;
    padding: 0 16px 42px;
    scroll-padding-inline: 16px;
  }
  .home-page .featured-card {
    flex: 0 0 min(74vw, 286px);
    height: 294px;
  }
}

@media (max-width: 600px) {
  .site-header .menu-toggle {
    width: 44px;
    height: 44px;
    color: #2a130f;
    background: #fff8ea;
    border: 1px solid rgba(58,27,18,.12);
    box-shadow: 0 8px 18px rgba(41,16,10,.08);
  }
  .site-header .menu-toggle__icon {
    width: 20px !important;
    height: 15px !important;
  }
  .site-header .menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
    top: 6.5px;
  }
  .site-header .menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
    bottom: 6.5px;
  }

  .hero__title {
    margin-left: -10px;
    max-width: calc(100% + 10px);
  }

  /* Delivery CTA mobile: give the courier more room, let it settle closer to
     the center, hide the large handwritten 'Kapına Kadar' copy, and keep the
     smoke trail visible after arrival. */
  .home-page .delivery-cta__kapina {
    display: none;
  }
  .home-page .delivery-cta__destination {
    right: -10%;
    bottom: 28px;
    width: 52%;
    height: 284px;
  }
  .home-page .delivery-cta__pin {
    right: 46%;
    bottom: 15%;
    width: 30%;
  }
  .home-page .delivery-cta__chicken {
    right: -10%;
    bottom: 4%;
    width: 68%;
  }
  .home-page .delivery-cta__bucket {
    right: -8%;
    bottom: -14%;
    width: 44%;
  }
  .home-page .delivery-cta__route {
    height: 33%;
    overflow: visible;
  }
  .home-page .delivery-cta__road {
    left: -20%;
    bottom: 1%;
    width: 138%;
  }
  .home-page .delivery-cta__speed {
    left: 1%;
    bottom: 17%;
    width: 59%;
  }
  .home-page .delivery-cta__smoke {
    left: -6%;
    bottom: -2%;
    width: 72%;
  }
  .home-page .delivery-cta__courier {
    left: -1%;
    bottom: -3%;
    width: min(78vw, 360px);
  }
}

@media (max-width: 430px) {
  .home-page .featured-card {
    flex-basis: min(78vw, 272px);
    height: 286px;
  }
}

@media (max-width: 360px) {
  .hero__title {
    margin-left: -8px;
    max-width: calc(100% + 8px);
  }
}


/* ========================================================================== */
/* V83 / Menu catalog hierarchy + grouped product ordering                    */
/* ========================================================================== */
.menu-page:not(.product-detail-page) .menu-catalog {
  padding-top: 40px;
}
.menu-page:not(.product-detail-page) .menu-catalog__heading {
  margin-top: 0;
  margin-bottom: 28px;
}
.menu-page:not(.product-detail-page) .menu-catalog__toolbar {
  margin-top: 0;
}
.menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
  margin-top: 14px;
}
.menu-page:not(.product-detail-page) .menu-product-grid {
  margin-top: 30px;
}

@media (max-width: 820px) {
  .menu-page:not(.product-detail-page) .menu-catalog {
    padding-top: 28px !important;
  }
  .menu-page:not(.product-detail-page) .menu-catalog__heading {
    margin-top: 0 !important;
    margin-bottom: 20px !important;
  }
  .menu-page:not(.product-detail-page) .menu-catalog__toolbar {
    margin-top: 0 !important;
  }
  .menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
    margin-top: 10px !important;
  }
  .menu-page:not(.product-detail-page) .menu-product-grid {
    margin-top: 22px !important;
  }
}

@media (max-width: 520px) {
  .menu-page:not(.product-detail-page) .menu-catalog {
    padding-top: 24px !important;
  }
  .menu-page:not(.product-detail-page) .menu-catalog__heading {
    margin-bottom: 18px !important;
  }
}

/* ========================================================================== */
/* V84 / Menu category cards + centered product copy                          */
/* ========================================================================== */
.menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
  display: flex;
  justify-content: center;
  margin-top: 22px;
  padding: 4px 0 8px;
}

.menu-page:not(.product-detail-page) .menu-catalog__categories {
  width: auto;
  min-width: 0;
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 18px;
}

.menu-page:not(.product-detail-page) .menu-category {
  width: 154px;
  min-width: 154px;
  min-height: 108px;
  padding: 16px 14px 15px;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  border-radius: 10px;
  border: 1px solid rgba(23,20,18,.13);
  background: #fff;
  color: #171412;
  box-shadow: 0 10px 28px rgba(47,31,17,.04);
  font-size: 14px;
  font-weight: 850;
  line-height: 1.15;
  text-align: center;
  transition:
    transform .2s ease,
    box-shadow .2s ease,
    background-color .2s ease,
    border-color .2s ease,
    color .2s ease;
}

.menu-page:not(.product-detail-page) .menu-category:hover {
  transform: translateY(-3px);
  border-color: rgba(226,6,19,.36);
  box-shadow: 0 14px 32px rgba(47,31,17,.08);
}

.menu-page:not(.product-detail-page) .menu-category.is-active {
  color: #fff;
  border-color: var(--joul-red);
  background: var(--joul-red);
  box-shadow: 0 14px 28px rgba(226,6,19,.18);
}

.menu-page:not(.product-detail-page) .menu-category__icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
}

.menu-page:not(.product-detail-page) .menu-category__icon img {
  width: 34px;
  height: 34px;
}

.menu-page:not(.product-detail-page) .menu-product-card__body {
  align-items: center;
  text-align: center;
  transition: background-color .22s ease, color .22s ease;
}

.menu-page:not(.product-detail-page) .menu-product-card__category,
.menu-page:not(.product-detail-page) .menu-product-card h3,
.menu-page:not(.product-detail-page) .menu-product-card__description {
  width: 100%;
  text-align: center;
}

.menu-page:not(.product-detail-page) .menu-product-card__link {
  align-self: center;
  justify-content: center;
}

@media (hover: hover) and (pointer: fine) {
  .menu-page:not(.product-detail-page) .menu-product-card:hover .menu-product-card__body {
    background: #11100f;
  }

  .menu-page:not(.product-detail-page) .menu-product-card:hover .menu-product-card__category {
    color: #ff3340;
  }

  .menu-page:not(.product-detail-page) .menu-product-card:hover h3,
  .menu-page:not(.product-detail-page) .menu-product-card:hover h3 a,
  .menu-page:not(.product-detail-page) .menu-product-card:hover h3 a:hover {
    color: #fff;
  }

  .menu-page:not(.product-detail-page) .menu-product-card:hover .menu-product-card__description {
    color: rgba(255,255,255,.74);
  }

  .menu-page:not(.product-detail-page) .menu-product-card:hover .menu-product-card__link,
  .menu-page:not(.product-detail-page) .menu-product-card:hover .menu-product-card__link:hover {
    color: #fff;
  }
}

@media (max-width: 1100px) {
  .menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
    justify-content: flex-start;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__category-scroller::-webkit-scrollbar {
    display: none;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__categories {
    width: max-content;
    min-width: max-content;
    justify-content: flex-start;
    gap: 12px;
    margin: 0 auto;
  }

  .menu-page:not(.product-detail-page) .menu-category {
    width: 138px;
    min-width: 138px;
    min-height: 98px;
    padding: 14px 12px;
  }
}

@media (max-width: 820px) {
  .menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
    margin-top: 14px !important;
    margin-right: -14px !important;
    padding: 3px 14px 8px 0 !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__categories {
    gap: 10px !important;
    margin: 0 !important;
  }

  .menu-page:not(.product-detail-page) .menu-category {
    width: 118px !important;
    min-width: 118px !important;
    min-height: 88px !important;
    padding: 12px 10px !important;
    flex-direction: column !important;
    gap: 7px !important;
    border-radius: 10px !important;
    font-size: 11.5px !important;
  }

  .menu-page:not(.product-detail-page) .menu-category__icon,
  .menu-page:not(.product-detail-page) .menu-category__icon img {
    width: 27px !important;
    height: 27px !important;
    flex-basis: 27px !important;
  }
}

@media (max-width: 520px) {
  .menu-page:not(.product-detail-page) .menu-category {
    width: 112px !important;
    min-width: 112px !important;
    min-height: 84px !important;
    font-size: 11px !important;
  }
}

/* ========================================================================== */
/* V85 / Menu discovery strip: compact hierarchy from approved visual         */
/* Scope: heading + categories + search/sort only. Hero and product cards     */
/* intentionally remain untouched.                                            */
/* ========================================================================== */
.menu-page:not(.product-detail-page) .menu-catalog {
  padding-top: 34px;
}

.menu-page:not(.product-detail-page) .menu-catalog__heading {
  margin: 0 0 22px;
  grid-template-columns: minmax(0, 1fr) minmax(250px, 310px);
  align-items: center;
  gap: 34px;
}

.menu-page:not(.product-detail-page) .menu-catalog__eyebrow {
  margin-bottom: 7px;
  font-size: 10.5px;
  letter-spacing: .16em;
}

.menu-page:not(.product-detail-page) .menu-catalog__heading h2 {
  font-size: clamp(46px, 3.8vw, 54px);
  line-height: .96;
  letter-spacing: -.045em;
}

.menu-page:not(.product-detail-page) .menu-catalog__heading h2::after {
  width: 27px;
  height: 22px;
  margin-left: 7px;
  vertical-align: 22%;
  transform: rotate(-18deg) scale(.9);
  transform-origin: left center;
}

.menu-page:not(.product-detail-page) .menu-catalog__lead {
  max-width: 310px;
  margin: 0 0 1px auto;
  font-size: 14px;
  line-height: 1.48;
}

.menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
  display: flex;
  justify-content: center;
  margin-top: 0;
  padding: 2px 0 6px;
  overflow-x: visible;
}

.menu-page:not(.product-detail-page) .menu-catalog__categories {
  width: auto;
  min-width: 0;
  justify-content: center;
  align-items: stretch;
  gap: 14px;
  margin-inline: auto;
}

.menu-page:not(.product-detail-page) .menu-category {
  width: 140px;
  min-width: 140px;
  min-height: 88px;
  padding: 12px 12px 11px;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  border-radius: 9px;
  font-size: 12.8px;
  font-weight: 850;
  line-height: 1.1;
  box-shadow: 0 8px 22px rgba(47,31,17,.035);
}

.menu-page:not(.product-detail-page) .menu-category__icon,
.menu-page:not(.product-detail-page) .menu-category__icon img {
  width: 29px;
  height: 29px;
  flex-basis: 29px;
}

.menu-page:not(.product-detail-page) .menu-category.is-active {
  box-shadow: 0 10px 22px rgba(226,6,19,.13);
}

.menu-page:not(.product-detail-page) .menu-catalog__toolbar {
  margin-top: 24px;
  grid-template-columns: minmax(360px, 1fr) auto 168px;
  gap: 18px;
}

.menu-page:not(.product-detail-page) .menu-catalog__search,
.menu-page:not(.product-detail-page) .menu-sort__trigger {
  height: 50px;
}

.menu-page:not(.product-detail-page) .menu-catalog__sort {
  width: 168px;
}

.menu-page:not(.product-detail-page) .menu-catalog__result-count {
  font-size: 12.5px;
}

.menu-page:not(.product-detail-page) .menu-product-grid {
  margin-top: 26px;
}

@media (max-width: 1100px) {
  .menu-page:not(.product-detail-page) .menu-catalog__heading {
    grid-template-columns: minmax(0, 1fr) minmax(220px, 280px);
    gap: 24px;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__heading h2 {
    font-size: clamp(43px, 5vw, 51px);
  }

  .menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
    justify-content: center;
    overflow-x: auto;
    scrollbar-width: none;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__categories {
    width: max-content;
    min-width: max-content;
    justify-content: center;
    gap: 11px;
  }

  .menu-page:not(.product-detail-page) .menu-category {
    width: 128px;
    min-width: 128px;
    min-height: 84px;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__toolbar {
    grid-template-columns: minmax(280px, 1fr) auto 158px;
    gap: 12px;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__sort {
    width: 158px;
  }
}

@media (max-width: 820px) {
  .menu-page:not(.product-detail-page) .menu-catalog {
    padding-top: 26px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__heading {
    margin-bottom: 17px !important;
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__heading h2 {
    font-size: clamp(36px, 9.6vw, 45px) !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__lead {
    max-width: 480px !important;
    margin: 0 !important;
    font-size: 12.5px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__category-scroller {
    justify-content: flex-start !important;
    margin: 0 -14px 0 0 !important;
    padding: 2px 14px 7px 0 !important;
    overflow-x: auto !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__categories {
    justify-content: flex-start !important;
    gap: 9px !important;
    margin: 0 !important;
  }

  .menu-page:not(.product-detail-page) .menu-category {
    width: 112px !important;
    min-width: 112px !important;
    min-height: 78px !important;
    padding: 10px 9px !important;
    gap: 6px !important;
    border-radius: 9px !important;
    font-size: 11px !important;
  }

  .menu-page:not(.product-detail-page) .menu-category__icon,
  .menu-page:not(.product-detail-page) .menu-category__icon img {
    width: 25px !important;
    height: 25px !important;
    flex-basis: 25px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__toolbar {
    margin-top: 18px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    gap: 8px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__search {
    grid-column: 1 / -1 !important;
    grid-row: 1 !important;
    height: 46px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__result-count {
    grid-column: 1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
    font-size: 11px !important;
  }

  .menu-page:not(.product-detail-page) .menu-catalog__sort {
    grid-column: 2 !important;
    grid-row: 2 !important;
    width: 132px !important;
  }

  .menu-page:not(.product-detail-page) .menu-sort__trigger {
    height: 40px !important;
    min-height: 40px !important;
    font-size: 11px !important;
  }

  .menu-page:not(.product-detail-page) .menu-product-grid {
    margin-top: 20px !important;
  }
}

@media (max-width: 520px) {
  .menu-page:not(.product-detail-page) .menu-catalog__heading h2 {
    font-size: clamp(34px, 10.4vw, 41px) !important;
  }

  .menu-page:not(.product-detail-page) .menu-category {
    width: 106px !important;
    min-width: 106px !important;
    min-height: 74px !important;
    font-size: 10.5px !important;
  }
}


/* ========================================================================== */
/* V86 / Mobile menu minimalist premium pass                                  */
/* ========================================================================== */
@media (max-width: 900px) {
  .mobile-menu {
    width: min(92vw, 390px);
    padding: 24px 24px 28px;
    grid-template-rows: auto auto auto auto 1fr;
    color: #fff;
    background: #4a0709;
    box-shadow: -18px 0 44px rgba(0,0,0,.22);
  }
  .mobile-menu::before { display: none !important; }

  .mobile-menu__top {
    min-height: 72px;
    padding-bottom: 18px;
    border-bottom: 1px solid rgba(255,255,255,.18);
  }
  .mobile-menu__brand { width: 126px; }
  .mobile-menu__close {
    width: 44px;
    height: 44px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.28);
    background: transparent;
    box-shadow: none;
  }
  .mobile-menu__close:hover {
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.46);
    transform: none;
  }

  .mobile-menu__nav {
    padding: 14px 0 12px;
  }
  .mobile-menu__link {
    min-height: 58px;
    grid-template-columns: 28px 1fr;
    gap: 16px;
    padding: 0 4px;
    border-bottom: 1px solid rgba(255,255,255,.16);
    color: rgba(255,255,255,.97);
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.015em;
  }
  .mobile-menu__link:hover,
  .mobile-menu__link.is-current {
    color: #fff;
    padding-left: 4px;
  }
  .mobile-menu__link > .drawer-icon:last-child { display: none !important; }

  .mobile-menu__menu-group {
    border-bottom: 1px solid rgba(255,255,255,.16);
  }
  .mobile-menu__menu-row {
    display: grid;
    grid-template-columns: 1fr 46px;
    align-items: stretch;
  }
  .mobile-menu__menu-row .mobile-menu__link {
    border-bottom: 0;
  }
  .mobile-menu__submenu-toggle {
    display: grid;
    place-items: center;
    padding: 0;
    color: #fff;
    border: 0;
    background: transparent;
    cursor: pointer;
  }
  .mobile-menu__submenu-toggle .drawer-icon {
    width: 18px;
    height: 18px;
    transition: transform .22s ease;
  }
  .mobile-menu__submenu-toggle[aria-expanded="true"] .drawer-icon {
    transform: rotate(90deg);
  }

  .mobile-menu__submenu {
    display: grid;
    gap: 8px;
    padding: 0 0 14px 42px;
  }
  .mobile-menu__submenu[hidden] { display: none !important; }
  .mobile-menu__submenu a {
    min-height: 46px;
    display: grid;
    grid-template-columns: 24px 1fr;
    align-items: center;
    gap: 13px;
    padding: 0 14px;
    color: rgba(255,255,255,.92);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 10px;
    background: rgba(255,255,255,.045);
    font-size: 14px;
    font-weight: 600;
  }
  .mobile-menu__submenu a:hover {
    color: #fff;
    background: rgba(255,255,255,.075);
    border-color: rgba(255,255,255,.20);
  }
  .drawer-category-icon {
    width: 22px;
    height: 22px;
    display: block;
    background: currentColor;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
  }
  .drawer-category-icon--all { -webkit-mask-image: url('../icons/menu-categories/grid.svg'); mask-image: url('../icons/menu-categories/grid.svg'); }
  .drawer-category-icon--burger { -webkit-mask-image: url('../icons/menu-categories/burger.svg'); mask-image: url('../icons/menu-categories/burger.svg'); }
  .drawer-category-icon--extras { -webkit-mask-image: url('../icons/menu-categories/extras.svg'); mask-image: url('../icons/menu-categories/extras.svg'); }
  .drawer-category-icon--drinks { -webkit-mask-image: url('../icons/menu-categories/drinks.svg'); mask-image: url('../icons/menu-categories/drinks.svg'); }

  .mobile-menu__order {
    min-height: 54px;
    margin-top: 6px;
    padding: 0 18px;
    border-radius: 999px;
    background: var(--joul-red);
    box-shadow: none;
    font-size: 16px;
    font-weight: 800;
  }
  .mobile-menu__order:hover { transform: none; }

  .mobile-menu__quick {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 14px;
  }
  .mobile-menu__quick a {
    min-height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 10px;
    color: #fff;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 14px;
    background: transparent;
    font-size: 12px;
    font-weight: 700;
  }
  .mobile-menu__quick .drawer-icon {
    width: 18px;
    height: 18px;
  }

  .mobile-menu__socials {
    align-self: start;
    gap: 10px;
    padding-top: 18px;
    border-top: 0;
  }
  .mobile-menu__socials a {
    width: 48px;
    height: 48px;
    padding: 0;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 50%;
    background: transparent;
    box-shadow: none;
  }
  .mobile-menu__socials a:hover {
    background: transparent;
    border-color: rgba(255,255,255,.42);
    transform: none;
  }
  .mobile-menu__socials .utility-platform__mark {
    width: 31px;
    height: 31px;
    margin: 0;
    flex: 0 0 31px;
    font-size: 12px;
    box-shadow: none;
  }
  .mobile-menu__socials .utility-platform__mark--image img {
    width: 31px;
    height: 31px;
    display: block;
  }
}

@media (max-width: 430px) {
  .mobile-menu {
    width: 94vw;
    padding-inline: 20px;
  }
  .mobile-menu__brand { width: 112px; }
  .mobile-menu__link { min-height: 54px; font-size: 16px; }
  .mobile-menu__submenu { padding-left: 36px; }
  .mobile-menu__submenu a { min-height: 44px; font-size: 13px; }
}

/* ========================================================================== */
/* V87 / Shared simple mobile navigation                                      */
/* One component / one geometry on every public page                          */
/* ========================================================================== */
@media (max-width: 900px) {
  body .mobile-menu {
    display: grid !important;
    position: fixed !important;
    inset: 0 0 0 auto !important;
    width: min(100vw, 420px) !important;
    max-width: 100vw !important;
    height: 100dvh !important;
    min-height: 100dvh !important;
    box-sizing: border-box !important;
    grid-template-rows: auto auto auto 1fr !important;
    align-content: start !important;
    gap: 0 !important;
    padding: 18px 22px 24px !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    color: #171717 !important;
    background: #fffdf8 !important;
    border: 0 !important;
    box-shadow: -18px 0 46px rgba(25,18,14,.16) !important;
    transform: translate3d(102%,0,0);
  }
  body .mobile-menu.is-open { transform: translate3d(0,0,0) !important; }
  body .mobile-menu::before { display: none !important; }

  body .mobile-menu__top {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) auto auto !important;
    align-items: center !important;
    gap: 10px !important;
    min-height: 68px !important;
    padding: 0 0 16px !important;
    border-bottom: 1px solid #ece7df !important;
  }
  body .mobile-menu__brand {
    width: 108px !important;
    min-width: 108px !important;
    display: block !important;
  }
  body .mobile-menu__brand img { width: 100% !important; height: auto !important; display: block !important; }
  body .mobile-menu__order-top {
    min-height: 42px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    padding: 0 15px !important;
    color: #fff !important;
    background: #e30613 !important;
    border-radius: 999px !important;
    font-size: 13px !important;
    line-height: 1 !important;
    font-weight: 800 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    box-shadow: none !important;
  }
  body .mobile-menu__order-top span:last-child { font-size: 18px !important; font-weight: 500 !important; }
  body .mobile-menu__close {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    color: #171717 !important;
    background: #f3f0eb !important;
    border: 0 !important;
    border-radius: 50% !important;
    box-shadow: none !important;
  }
  body .mobile-menu__close .drawer-icon { width: 20px !important; height: 20px !important; }

  body .mobile-menu__nav {
    display: grid !important;
    padding: 12px 0 0 !important;
    margin: 0 !important;
  }
  body .mobile-menu__link,
  body .mobile-menu__menu-row {
    min-height: 58px !important;
    box-sizing: border-box !important;
    border-bottom: 1px solid #ece7df !important;
  }
  body .mobile-menu__link {
    display: grid !important;
    grid-template-columns: 26px minmax(0,1fr) !important;
    align-items: center !important;
    gap: 14px !important;
    padding: 0 6px !important;
    color: #1b1b1b !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-size: 15px !important;
    line-height: 1.2 !important;
    font-weight: 600 !important;
    letter-spacing: -.01em !important;
    text-decoration: none !important;
  }
  body .mobile-menu__link:hover { padding-left: 6px !important; color: #e30613 !important; }
  body .mobile-menu__link.is-current { color: #e30613 !important; }
  body .mobile-menu__link > .drawer-icon:first-child {
    width: 22px !important;
    height: 22px !important;
    color: currentColor !important;
  }

  body .mobile-menu__menu-group { border: 0 !important; }
  body .mobile-menu__menu-row {
    display: grid !important;
    grid-template-columns: minmax(0,1fr) 46px !important;
    align-items: stretch !important;
  }
  body .mobile-menu__menu-row .mobile-menu__link { border-bottom: 0 !important; min-height: 58px !important; }
  body .mobile-menu__submenu-toggle {
    display: grid !important;
    place-items: center !important;
    width: 46px !important;
    min-width: 46px !important;
    height: 58px !important;
    padding: 0 !important;
    color: #1b1b1b !important;
    background: transparent !important;
    border: 0 !important;
    cursor: pointer !important;
  }
  body .mobile-menu__menu-group.is-current .mobile-menu__submenu-toggle,
  body .mobile-menu__submenu-toggle[aria-expanded="true"] { color: #e30613 !important; }
  body .mobile-menu__submenu-toggle .drawer-icon { width: 17px !important; height: 17px !important; transition: transform .2s ease !important; }
  body .mobile-menu__submenu-toggle[aria-expanded="true"] .drawer-icon { transform: rotate(90deg) !important; }

  body .mobile-menu__submenu {
    display: grid !important;
    gap: 0 !important;
    margin: 0 0 0 38px !important;
    padding: 2px 0 10px 18px !important;
    border-left: 1px solid #ded8cf !important;
  }
  body .mobile-menu__submenu[hidden] { display: none !important; }
  body .mobile-menu__submenu a {
    min-height: 42px !important;
    display: flex !important;
    align-items: center !important;
    padding: 0 4px !important;
    color: #252525 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 14px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
  }
  body .mobile-menu__submenu a:hover { color: #e30613 !important; background: transparent !important; }

  body .mobile-menu__search {
    grid-template-columns: 26px minmax(0,1fr) 18px !important;
  }
  body .mobile-menu__search-arrow {
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    color: #1b1b1b !important;
    opacity: .9 !important;
  }

  body .mobile-menu__quick {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 10px 0 0 !important;
    border-bottom: 1px solid #ece7df !important;
  }
  body .mobile-menu__quick a {
    min-height: 68px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0,1fr) !important;
    align-items: center !important;
    column-gap: 12px !important;
    padding: 8px 10px !important;
    color: #1b1b1b !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
  }
  body .mobile-menu__quick a + a { border-left: 1px solid #ece7df !important; }
  body .mobile-menu__quick .drawer-icon { width: 22px !important; height: 22px !important; color: #e30613 !important; }
  body .mobile-menu__quick-copy { display: grid !important; gap: 3px !important; min-width: 0 !important; }
  body .mobile-menu__quick-copy small { color: #3a3a3a !important; font-size: 12px !important; line-height: 1.05 !important; font-weight: 700 !important; }
  body .mobile-menu__quick-copy strong { overflow: hidden !important; color: #8d8d8d !important; font-size: 11px !important; line-height: 1.1 !important; font-weight: 500 !important; text-overflow: ellipsis !important; white-space: nowrap !important; }
  body .mobile-menu__quick-arrow { display: none !important; }

  body .mobile-menu__socials {
    min-height: 58px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 20px !important;
    align-self: start !important;
    padding: 14px 6px 0 !important;
    margin: 0 !important;
    border: 0 !important;
  }
  body .mobile-menu__socials a {
    width: 26px !important;
    height: 26px !important;
    display: grid !important;
    place-items: center !important;
    padding: 0 !important;
    color: #161616 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
  }
  body .mobile-menu__socials a:hover { transform: none !important; background: transparent !important; }
  body .mobile-menu__socials img { width: 22px !important; height: 22px !important; display: block !important; }

  body .drawer-icon--mail { -webkit-mask-image: url('../icons/contact/mail.svg') !important; mask-image: url('../icons/contact/mail.svg') !important; }
  body .drawer-icon--search { -webkit-mask-image: url('../icons/mobile-menu/ui/search.svg') !important; mask-image: url('../icons/mobile-menu/ui/search.svg') !important; }

  /* All public page wrappers use the exact same drawer geometry. */
  .home-page .mobile-menu,
  .menu-page .mobile-menu,
  .product-detail-page .mobile-menu,
  .about-page .mobile-menu,
  .motto-page .mobile-menu,
  .contact-page .mobile-menu {
    width: min(100vw, 420px) !important;
    padding: 18px 22px 24px !important;
    font-size: 16px !important;
  }
}

@media (max-width: 430px) {
  body .mobile-menu,
  .home-page .mobile-menu,
  .menu-page .mobile-menu,
  .product-detail-page .mobile-menu,
  .about-page .mobile-menu,
  .motto-page .mobile-menu,
  .contact-page .mobile-menu {
    width: 100vw !important;
    padding: 14px 16px 20px !important;
  }
  body .mobile-menu__top { min-height: 62px !important; padding-bottom: 12px !important; }
  body .mobile-menu__brand { width: 96px !important; min-width: 96px !important; }
  body .mobile-menu__order-top { min-height: 38px !important; padding-inline: 12px !important; font-size: 12px !important; }
  body .mobile-menu__close { width: 38px !important; height: 38px !important; }
  body .mobile-menu__link,
  body .mobile-menu__menu-row,
  body .mobile-menu__menu-row .mobile-menu__link,
  body .mobile-menu__submenu-toggle { min-height: 52px !important; height: 52px !important; }
  body .mobile-menu__link { font-size: 14px !important; }
  body .mobile-menu__submenu a { min-height: 38px !important; font-size: 13px !important; }
  body .mobile-menu__quick a { min-height: 62px !important; }
}

@media (max-width: 900px) {
  body .site-header .site-header__inner {
    width: calc(100% - 28px) !important;
    grid-template-columns: 1fr auto !important;
    gap: 8px !important;
  }
  body .site-header .brand { width: 116px !important; }
  body .site-header .mobile-order {
    display: inline-flex !important;
    min-height: 42px !important;
    height: 42px !important;
    padding: 0 16px !important;
    font-size: 12px !important;
  }
  body .site-header .menu-toggle {
    display: grid !important;
    place-items: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
  }
}
@media (max-width: 520px) {
  body .site-header .site-header__inner { width: calc(100% - 22px) !important; }
  body .site-header .brand { width: 104px !important; }
  body .site-header .mobile-order { min-height: 40px !important; height: 40px !important; padding-inline: 14px !important; font-size: 11px !important; }
  body .site-header .menu-toggle { width: 40px !important; height: 40px !important; min-width: 40px !important; min-height: 40px !important; }
}

/* ============================================================
   V88 · PRODUCT DETAIL — SADE / CMS DOSTU / RESPONSIVE
   - Gerçek görseller dışında sahte galeri kırpımı yok
   - İçerikler ayrı fotoğraf yerine ortak ikon sistemiyle gösterilir
   - Mobil akış: başlık -> ürün -> içerik -> sipariş
   ============================================================ */
.product-detail-page {
  --pd88-red: #e20613;
  --pd88-ink: #171412;
  --pd88-muted: #6b625b;
  --pd88-paper: #fffdf9;
  --pd88-cream: #fff9f2;
  --pd88-soft: #fff4e8;
  --pd88-line: rgba(28, 22, 17, .12);
}
.product-detail-page .product-detail-main {
  overflow: clip;
  background: var(--pd88-cream);
}
.product-detail-page .pd-shell,
.product-detail-page .pd-related .pd-shell,
.product-detail-page .pd-menu-cta .pd-shell {
  width: min(1280px, calc(100% - 72px));
  margin-inline: auto;
}
.product-detail-page .pd-hero {
  min-height: 0;
  padding: 12px 0 32px;
  overflow: hidden;
  background: linear-gradient(180deg, #fffdf9 0%, #fff9f2 100%);
  border-bottom: 0;
}
.product-detail-page .pd-hero__checker {
  top: 86px;
  left: 0;
  width: 58px;
  height: 310px;
  object-fit: cover;
  object-position: left center;
  opacity: .82;
}
.product-detail-page .pd-hero__stamp {
  top: 74px;
  right: max(24px, calc((100vw - 1320px) / 2));
  width: 122px;
  opacity: .40;
}
.product-detail-page .pd-breadcrumb {
  margin: 0 0 12px;
  min-height: 28px;
  font-size: 11px;
}
.product-detail-page .pd-hero__grid {
  display: grid;
  grid-template-columns: minmax(420px, 520px) minmax(0, 1fr);
  grid-template-areas:
    "gallery intro"
    "gallery details";
  grid-template-rows: auto 1fr;
  align-items: start;
  column-gap: 42px;
  row-gap: 16px;
}
.product-detail-page .pd-gallery {
  grid-area: gallery;
  min-width: 0;
}
.product-detail-page .pd-gallery__stage {
  width: 100%;
  min-height: 0;
  aspect-ratio: 1.13 / 1;
  display: block;
  overflow: hidden;
  border: 1px solid var(--pd88-line);
  border-radius: 15px;
  background: #efe1d1;
}
.product-detail-page .pd-gallery__main {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  filter: none;
  transform: none;
  transition: opacity .18s ease;
}
.product-detail-page .pd-gallery__thumbs {
  justify-content: flex-start;
  gap: 10px;
  margin-top: 10px;
}
.product-detail-page .pd-gallery__thumb {
  width: 112px;
  height: 76px;
  border-radius: 10px;
  border: 1px solid var(--pd88-line);
  background: #fff;
}
.product-detail-page .pd-gallery__thumb.is-current {
  border-color: var(--pd88-red);
  box-shadow: 0 0 0 1px var(--pd88-red);
}
.product-detail-page .pd-gallery__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.product-detail-page .pd-summary--intro {
  grid-area: intro;
  min-width: 0;
  padding: 8px 0 0;
}
.product-detail-page .pd-category-pill {
  min-height: 27px;
  padding: 0 11px;
  background: #fde8df;
  color: #cc1019;
  font-size: 10px;
  font-weight: 850;
}
.product-detail-page .pd-summary h1 {
  max-width: 760px;
  margin: 11px 0 0;
  color: #0d0c0b;
  font-size: clamp(44px, 4vw, 62px);
  line-height: .98;
  letter-spacing: -.05em;
  font-weight: 900;
}
.product-detail-page .pd-tagline {
  max-width: 720px;
  margin: 11px 0 0;
  color: var(--pd88-ink);
  font-size: clamp(18px, 1.55vw, 22px);
  line-height: 1.26;
  font-weight: 850;
}
.product-detail-page .pd-description {
  max-width: 720px;
  margin: 10px 0 0;
  color: var(--pd88-muted);
  font-size: 14px;
  line-height: 1.62;
  font-weight: 500;
}
.product-detail-page .pd-detail-stack {
  grid-area: details;
  min-width: 0;
  display: grid;
  align-content: start;
  gap: 16px;
}
.product-detail-page .pd-components {
  margin: 0;
  padding: 18px 20px 16px;
  border: 1px solid var(--pd88-line);
  border-radius: 14px;
  background: rgba(255, 255, 255, .68);
}
.product-detail-page .pd-section-heading {
  display: block;
}
.product-detail-page .pd-section-heading h2,
.product-detail-page .pd-accompaniments h2 {
  margin: 0;
  color: var(--pd88-ink);
  font-size: 23px;
  line-height: 1.08;
  letter-spacing: -.025em;
  font-weight: 900;
}
.product-detail-page .pd-section-heading p,
.product-detail-page .pd-section-heading--order p {
  margin: 5px 0 0;
  color: #81766d;
  font-size: 11.5px;
  line-height: 1.45;
  font-weight: 600;
}
.product-detail-page .pd-components__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 28px;
  margin-top: 12px;
}
.product-detail-page .pd-component-item {
  min-width: 0;
  min-height: 56px;
  display: grid;
  grid-template-columns: 38px minmax(0, 1fr);
  gap: 11px;
  align-items: center;
  padding: 8px 0;
  border-top: 1px solid rgba(28, 22, 17, .08);
  color: #2c2723;
  font-size: 13px;
  line-height: 1.3;
  font-weight: 800;
}
.product-detail-page .pd-component-item:nth-child(-n+2) {
  border-top: 0;
}
.product-detail-page .pd-component-item__icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #fff4ef;
}
.product-detail-page .pd-component-item__icon img {
  width: 27px;
  height: 27px;
  object-fit: contain;
}
.product-detail-page .pd-accompaniments {
  margin: 0;
  padding: 16px 18px;
  border: 1px solid var(--pd88-line);
  border-radius: 13px;
  background: rgba(255, 255, 255, .58);
}
.product-detail-page .pd-accompaniments__chips {
  margin-top: 10px;
  gap: 8px;
}
.product-detail-page .pd-accompaniments__chip {
  min-height: 36px;
  padding: 0 12px;
  background: #fff;
  font-size: 12px;
}
.product-detail-page .pd-order {
  margin: 0;
}
.product-detail-page .pd-section-heading--order {
  display: block;
}
.product-detail-page .pd-order__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin-top: 10px;
}
.product-detail-page .product-order-card {
  min-height: 58px;
  border-radius: 11px;
}
.product-detail-page .product-order-card--getir-yemek,
.product-detail-page .product-order-card--migros-yemek,
.product-detail-page .product-order-card--uber-eats,
.product-detail-page .product-order-card--yemeksepeti {
  border-radius: 11px;
  overflow: hidden;
}
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo,
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo,
.product-detail-page .product-order-card--uber-eats .product-order-card__logo,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo,
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo img,
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo img,
.product-detail-page .product-order-card--uber-eats .product-order-card__logo img,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo img {
  height: 58px;
}

/* old large dark story area is replaced by this concise optional band */
.product-detail-page .pd-touch {
  padding: 0 0 18px;
  background: var(--pd88-cream);
}
.product-detail-page .pd-touch__inner {
  min-height: 78px;
  display: grid;
  grid-template-columns: 44px auto 1fr;
  align-items: center;
  gap: 18px;
  padding: 14px 28px;
  border: 1px solid rgba(226, 6, 19, .10);
  border-radius: 13px;
  background: linear-gradient(90deg, #fffaf6 0%, #fff2e5 100%);
}
.product-detail-page .pd-touch__inner > img {
  width: 38px;
  height: 38px;
}
.product-detail-page .pd-touch__title {
  padding-right: 18px;
  border-right: 1px solid rgba(226, 6, 19, .32);
}
.product-detail-page .pd-touch h2 {
  margin: 0;
  white-space: nowrap;
  font-size: 22px;
  line-height: 1.05;
  font-weight: 900;
  letter-spacing: -.025em;
}
.product-detail-page .pd-touch p {
  margin: 0;
  max-width: 820px;
  color: #6b6159;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 550;
}

.product-detail-page .pd-related {
  padding: 24px 0 26px;
  background: #fffaf4;
}
.product-detail-page .pd-related__title-wrap {
  grid-template-columns: 42px 1fr;
  gap: 10px;
}
.product-detail-page .pd-related__title-wrap img {
  width: 38px;
  height: 38px;
}
.product-detail-page .pd-related__title-wrap h2 {
  font-size: 27px;
}
.product-detail-page .pd-related__track {
  grid-auto-columns: calc((100% - 28px) / 3);
  gap: 14px;
  margin-top: 16px;
}
.product-detail-page .pd-related-card {
  min-height: 178px;
  display: grid;
  grid-template-columns: 47% 1fr;
  border-radius: 12px;
}
.product-detail-page .pd-related-card__image {
  min-height: 176px;
  aspect-ratio: auto;
}
.product-detail-page .pd-related-card__body {
  display: flex;
  flex-direction: column;
  padding: 18px 16px 15px;
}
.product-detail-page .pd-related-card h3 {
  font-size: 18px;
}
.product-detail-page .pd-related-card p {
  min-height: 0;
  margin-top: 7px;
  font-size: 11.5px;
  line-height: 1.45;
}
.product-detail-page .pd-related-card__link {
  margin-top: auto;
  padding-top: 10px;
  font-size: 12px;
}
.product-detail-page .pd-menu-cta {
  padding: 0 0 30px;
  background: #fffaf4;
}
.product-detail-page .pd-menu-cta__inner {
  min-height: 86px;
  padding: 15px 210px 15px 24px;
  border-radius: 13px;
}
.product-detail-page .pd-menu-cta h2 { font-size: 22px; }
.product-detail-page .pd-menu-cta p { font-size: 11.5px; }

@media (max-width: 1199px) and (min-width: 901px) {
  .product-detail-page .pd-shell,
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width: min(1120px, calc(100% - 48px)); }
  .product-detail-page .pd-hero__grid {
    grid-template-columns: minmax(360px, 44%) minmax(0, 1fr);
    column-gap: 28px;
  }
  .product-detail-page .pd-summary h1 { font-size: clamp(40px, 4.5vw, 52px); }
  .product-detail-page .pd-components { padding: 16px; }
  .product-detail-page .pd-components__grid { gap-inline: 18px; }
  .product-detail-page .pd-related-card { grid-template-columns: 44% 1fr; }
}

@media (max-width: 900px) {
  .product-detail-page .pd-shell,
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width: calc(100% - 40px); }
  .product-detail-page .pd-hero { padding: 8px 0 24px; }
  .product-detail-page .pd-hero__checker,
  .product-detail-page .pd-hero__stamp { display: none; }
  .product-detail-page .pd-breadcrumb {
    margin-bottom: 8px;
    font-size: 10.5px;
  }
  .product-detail-page .pd-hero__grid {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas:
      "intro"
      "gallery"
      "details";
    grid-template-rows: auto;
    gap: 16px;
  }
  .product-detail-page .pd-summary--intro { padding-top: 0; }
  .product-detail-page .pd-summary h1 {
    margin-top: 9px;
    font-size: clamp(37px, 7.2vw, 52px);
    line-height: 1;
  }
  .product-detail-page .pd-tagline { margin-top: 9px; font-size: 18px; }
  .product-detail-page .pd-description { margin-top: 8px; font-size: 14px; line-height: 1.58; }
  .product-detail-page .pd-gallery__stage {
    aspect-ratio: 1.34 / 1;
    border-radius: 14px;
  }
  .product-detail-page .pd-gallery__thumb { width: 96px; height: 66px; }
  .product-detail-page .pd-detail-stack { gap: 14px; }
  .product-detail-page .pd-components { padding: 17px 18px 15px; }
  .product-detail-page .pd-order__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .product-detail-page .pd-touch__inner {
    grid-template-columns: 38px 1fr;
    gap: 10px 14px;
    padding: 15px 18px;
  }
  .product-detail-page .pd-touch__title { padding-right: 0; border-right: 0; }
  .product-detail-page .pd-touch p { grid-column: 2; }
  .product-detail-page .pd-related__track { grid-auto-columns: 72%; }
  .product-detail-page .pd-related-card {
    min-height: 0;
    grid-template-columns: 1fr;
  }
  .product-detail-page .pd-related-card__image { min-height: 0; aspect-ratio: 1.55 / 1; }
  .product-detail-page .pd-related-card__body { min-height: 126px; }
}

@media (max-width: 600px) {
  .product-detail-page .pd-shell,
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width: calc(100% - 32px); }
  .product-detail-page .pd-hero { padding-bottom: 20px; }
  .product-detail-page .pd-breadcrumb {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .product-detail-page .pd-breadcrumb::-webkit-scrollbar { display: none; }
  .product-detail-page .pd-category-pill { min-height: 25px; font-size: 10px; }
  .product-detail-page .pd-summary h1 { font-size: clamp(34px, 10.5vw, 43px); letter-spacing: -.045em; }
  .product-detail-page .pd-tagline { font-size: 16.5px; }
  .product-detail-page .pd-description { font-size: 13.5px; }
  .product-detail-page .pd-gallery__stage { aspect-ratio: 1.08 / 1; border-radius: 12px; }
  .product-detail-page .pd-gallery__thumbs { gap: 8px; }
  .product-detail-page .pd-gallery__thumb { width: 84px; height: 58px; }
  .product-detail-page .pd-components { padding: 15px 14px 12px; border-radius: 12px; }
  .product-detail-page .pd-section-heading h2,
  .product-detail-page .pd-accompaniments h2 { font-size: 21px; }
  .product-detail-page .pd-components__grid { grid-template-columns: 1fr; margin-top: 9px; }
  .product-detail-page .pd-component-item,
  .product-detail-page .pd-component-item:nth-child(-n+2) { border-top: 1px solid rgba(28,22,17,.08); }
  .product-detail-page .pd-component-item:first-child { border-top: 0; }
  .product-detail-page .pd-component-item { min-height: 51px; padding: 7px 0; }
  .product-detail-page .pd-order__grid { grid-template-columns: 1fr; }
  .product-detail-page .product-order-card { min-height: 56px; }
  .product-detail-page .pd-touch { padding-bottom: 14px; }
  .product-detail-page .pd-touch__inner {
    min-height: 0;
    grid-template-columns: 32px 1fr;
    padding: 14px;
    border-radius: 12px;
  }
  .product-detail-page .pd-touch__inner > img { width: 30px; height: 30px; }
  .product-detail-page .pd-touch h2 { font-size: 20px; }
  .product-detail-page .pd-touch p { font-size: 12.5px; }
  .product-detail-page .pd-related { padding: 20px 0 22px; }
  .product-detail-page .pd-related__title-wrap { grid-template-columns: 34px 1fr; }
  .product-detail-page .pd-related__title-wrap img { width: 31px; height: 31px; }
  .product-detail-page .pd-related__title-wrap h2 { font-size: 23px; }
  .product-detail-page .pd-related__controls button { width: 36px; height: 36px; }
  .product-detail-page .pd-related__track { grid-auto-columns: 86%; gap: 12px; }
  .product-detail-page .pd-related-card__body { min-height: 118px; padding: 13px 14px 14px; }
  .product-detail-page .pd-menu-cta__inner {
    min-height: 0;
    padding: 16px;
    padding-bottom: 68px;
    align-items: stretch;
  }
  .product-detail-page .pd-menu-cta__copy { grid-template-columns: 34px 1fr; }
  .product-detail-page .pd-menu-cta__copy img { width: 32px; height: 32px; }
  .product-detail-page .pd-menu-cta h2 { font-size: 20px; }
  .product-detail-page .pd-menu-cta .button { width: 100%; min-height: 46px; margin-top: 12px; }
}

@media (max-width: 359px) {
  .product-detail-page .pd-shell,
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width: calc(100% - 24px); }
  .product-detail-page .pd-summary h1 { font-size: 32px; }
  .product-detail-page .pd-tagline { font-size: 15.5px; }
  .product-detail-page .pd-components { padding-inline: 12px; }
  .product-detail-page .pd-related__track { grid-auto-columns: 91%; }
}

@media (prefers-reduced-motion: reduce) {
  .product-detail-page .pd-gallery__main { transition: none !important; }
}

/* ============================================================
   V91 · PRODUCT DETAIL / ORIGINAL ORDER PLATFORM LOGOS
   Use real brand artwork without raster stretching or opacity loss.
   ============================================================ */
.product-detail-page .pd-order__grid {
  grid-template-columns: repeat(2, minmax(180px, 240px));
  justify-content: start;
  gap: 12px;
}
.product-detail-page .product-order-card--yemeksepeti,
.product-detail-page .product-order-card--getir-yemek {
  min-height: 62px;
  height: 62px;
  padding: 0 18px;
  border-radius: 12px;
  box-shadow: none;
}
.product-detail-page .product-order-card--yemeksepeti {
  background: #fff;
  border: 1px solid rgba(28,22,17,.12);
}
.product-detail-page .product-order-card--getir-yemek {
  background: #5b3cc4;
  border: 1px solid #5b3cc4;
}
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo,
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo {
  width: 100%;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo img,
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo img {
  display: block;
  width: auto !important;
  height: auto !important;
  max-width: 180px !important;
  max-height: 38px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  image-rendering: auto;
  transform: none !important;
}
.product-detail-page .product-order-card--yemeksepeti:hover,
.product-detail-page .product-order-card--getir-yemek:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 18px rgba(64,39,23,.07);
}
@media (max-width: 600px) {
  .product-detail-page .pd-order__grid { grid-template-columns: 1fr; }
  .product-detail-page .product-order-card--yemeksepeti,
  .product-detail-page .product-order-card--getir-yemek { width: 100%; }
}

/* ============================================================
   V94 · PRODUCT DETAIL / USER-SUPPLIED PLATFORM CARD ARTWORK
   The supplied Yemeksepeti/Getir images are complete card artwork,
   not standalone transparent logos. Fill the whole platform card.
   ============================================================ */
.product-detail-page .product-order-card--yemeksepeti,
.product-detail-page .product-order-card--getir-yemek {
  width: 240px;
  min-height: 62px;
  height: 62px;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 12px;
  background: transparent !important;
  overflow: hidden;
}
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo,
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo {
  width: 100% !important;
  height: 100% !important;
  display: block !important;
}
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo img,
.product-detail-page .product-order-card--getir-yemek .product-order-card__logo img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 1 !important;
  filter: none !important;
  transform: none !important;
}
@media (max-width: 600px) {
  .product-detail-page .product-order-card--yemeksepeti,
  .product-detail-page .product-order-card--getir-yemek {
    width: 100%;
    height: 60px;
    min-height: 60px;
  }
}

/* ============================================================
   V95 · ABOUT/HOME SECTION SWAP + HERO PARITY
   - The light "Joul lezzetiyle tanış" composition now lives on home.
   - The dark brand-story composition now lives on the About page.
   - About hero no longer has the legacy bottom fade; it matches Contact.
   ============================================================ */
.about-page .about-hero::after {
  content: none !important;
  display: none !important;
}

.about-page .about-page-story {
  margin-top: 0 !important;
}

.home-page .home-about-story {
  margin: 0 !important;
}

@media (max-width: 760px) {
  .home-page .home-about-story .about-story__inner {
    padding: 24px 16px 42px !important;
    gap: 18px !important;
  }

  .home-page .home-about-story .about-story__visual-scene {
    width: min(100%, 430px) !important;
  }

  .home-page .home-about-story .about-story__content h2 {
    font-size: clamp(34px, 9.8vw, 42px) !important;
  }

  .home-page .home-about-story .about-story__lead {
    margin-top: 12px !important;
    font-size: 13px !important;
  }

  .home-page .home-about-story .about-story__features {
    margin-top: 20px !important;
    gap: 14px !important;
  }

  .home-page .home-about-story .about-story__feature h3 {
    font-size: 16px !important;
  }

  .home-page .home-about-story .about-story__feature p {
    font-size: 12.5px !important;
  }
}


/* V96 — CMS controlled section order + legal pages + footer legal/agency row */
.cms-section-stack{display:flex;flex-direction:column;min-width:0}
.admin-preview-banner{position:sticky;top:0;z-index:99999;background:#17120f;color:#fff;padding:10px 18px;text-align:center;font:700 13px/1.4 'Red Hat Display',sans-serif;border-bottom:3px solid #e20613}.admin-preview-banner a{color:#fff;text-decoration:underline;margin-left:8px}
.legal-page{background:#fffaf4;color:#17120f}.legal-main{background:#fffaf4}.legal-shell{width:min(1120px,calc(100% - 48px));margin:0 auto}.legal-hero{position:relative;overflow:hidden;padding:82px 0 72px;background:linear-gradient(135deg,#fff8ef 0%,#fff 58%,#fff1ec 100%);border-bottom:1px solid rgba(30,20,15,.08)}.legal-hero:before{content:"";position:absolute;left:-70px;top:-120px;width:360px;height:360px;border-radius:50%;background:radial-gradient(circle,rgba(226,6,19,.13),rgba(226,6,19,0) 70%)}.legal-breadcrumb{display:flex;gap:10px;align-items:center;margin-bottom:30px;font-size:13px;font-weight:700;color:#736760}.legal-breadcrumb a{color:inherit;text-decoration:none}.legal-eyebrow{display:block;margin-bottom:12px;color:#e20613;font-size:12px;font-weight:900;letter-spacing:.22em}.legal-hero h1{max-width:900px;margin:0;font-size:clamp(44px,6vw,78px);line-height:.97;letter-spacing:-.055em}.legal-hero p{max-width:760px;margin:22px 0 0;color:#5f554f;font-size:18px;line-height:1.65}.legal-section{background:#fffaf4}.legal-section:nth-of-type(even){background:#fff}.legal-section__inner{padding:58px 0;border-bottom:1px solid rgba(30,20,15,.08)}.legal-section h2{margin:0 0 20px;font-size:clamp(25px,3vw,36px);letter-spacing:-.035em}.legal-prose{max-width:940px;color:#4d4540;font-size:16px;line-height:1.85;white-space:normal}.legal-contact-note{background:#17120f;color:#fff}.legal-contact-note .legal-shell{padding:42px 0;display:grid;grid-template-columns:auto 1fr auto;gap:18px 28px;align-items:center}.legal-contact-note strong{font-size:20px}.legal-contact-note p{margin:0;color:rgba(255,255,255,.72);line-height:1.6}.legal-contact-note a{display:inline-flex;align-items:center;gap:12px;padding:13px 19px;border-radius:999px;background:#e20613;color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}
.site-footer__credit{display:flex;align-items:center;gap:8px;flex-wrap:wrap;color:rgba(255,255,255,.72);font-size:12px;line-height:1.4}.site-footer__medyahors{display:inline-flex;align-items:center}.site-footer__medyahors img{display:block;width:76px;height:auto;max-height:25px;object-fit:contain}.site-footer__agency-link{color:rgba(255,255,255,.58)!important;text-decoration:none}.site-footer__agency-link:hover{color:#fff!important}.site-footer__bottom nav{display:flex;align-items:center;justify-content:flex-end;gap:10px;flex-wrap:wrap}
@media(max-width:900px){.legal-hero{padding:60px 0 54px}.legal-contact-note .legal-shell{grid-template-columns:1fr}.legal-contact-note a{justify-self:start}.site-footer__bottom{align-items:flex-start}.site-footer__bottom nav{justify-content:flex-start}}
@media(max-width:600px){.legal-shell{width:min(100% - 30px,1120px)}.legal-hero{padding:46px 0 40px}.legal-hero h1{font-size:42px}.legal-hero p{font-size:15px}.legal-section__inner{padding:38px 0}.legal-prose{font-size:14px;line-height:1.75}.site-footer__credit{font-size:10.5px}.site-footer__bottom nav{gap:7px;font-size:10px}}

/* ======================================================================
   REV97 · Homepage / shared CTA polish
   ====================================================================== */

/* Shared Mottomuz CTA placements (Mottomuz + Joul Hakkında + Bize Ulaşın) */
.shared-motto-cta{
  width:min(1680px,calc(100% - 56px));
  margin:clamp(34px,4.2vw,58px) auto 0;
}
.shared-motto-cta--contact,
.shared-motto-cta--about{
  margin-top:clamp(28px,4vw,52px);
}
@media (max-width: 767px){
  .shared-motto-cta{
    width:min(calc(100% - 28px), 720px);
    margin-top:26px;
  }
}

/* Featured products: keep every extra card on the same row and let the rail
   continue horizontally with left / right controls on desktop. */
.home-page .featured-cards-wrap{
  position:relative;
}
.home-page .featured-cards{
  display:flex !important;
  flex-wrap:nowrap !important;
  align-items:stretch;
  overflow-x:auto;
  overflow-y:hidden;
  width:100%;
  padding-bottom:18px;
  scroll-behavior:smooth;
  scrollbar-width:none;
  scroll-snap-type:x proximity;
}
.home-page .featured-cards::-webkit-scrollbar{display:none;}
.home-page .featured-card{
  flex:0 0 calc((100% - (clamp(14px, 1.15vw, 18px) * 3)) / 4);
  min-width:calc((100% - (clamp(14px, 1.15vw, 18px) * 3)) / 4);
  scroll-snap-align:start;
}
.home-page .featured-cards-nav{
  display:grid;
}
.home-page .featured-cards-nav[hidden]{display:none !important;}
@media (max-width: 1023px){
  .home-page .featured-card{
    flex:0 0 min(78vw, 320px);
    min-width:min(78vw, 320px);
  }
}
@media (max-width: 767px){
  .home-page .featured-cards-wrap{
    margin-top:14px !important;
  }
  .home-page .featured-cards{
    padding:0 16px 8px !important;
  }
  .home-page .featured-card{
    flex:0 0 min(72vw, 280px) !important;
    min-width:min(72vw, 280px) !important;
  }
  .home-page .featured-cards-nav{
    display:none !important;
  }
}

/* About story title / tick alignment polish */
.home-page .home-about-story .about-story__content h2{
  font-family:"Red Hat Display", sans-serif;
  font-weight:900;
  letter-spacing:-.06em;
  line-height:.92;
}
.home-page .home-about-story .about-story__feature{
  grid-template-columns:44px minmax(0,1fr);
  align-items:flex-start;
  column-gap:16px;
}
.home-page .home-about-story .about-story__check{
  margin-top:3px;
}
.home-page .home-about-story .about-story__feature h3,
.home-page .home-about-story .about-story__feature p{
  margin-left:0;
}

/* Gallery title balance */
.home-page .joul-gallery__title{
  font-size:clamp(44px,4.25vw,68px) !important;
  line-height:.94 !important;
}
@media (max-width: 767px){
  .home-page .joul-gallery__title{
    font-size:clamp(36px,10vw,50px) !important;
  }
}

/* Remove strong neon-glow hover language from site-wide buttons */
.button:hover,
.button:focus-visible,
.site-order:hover,
.site-order:focus-visible,
.about-preview__button:hover,
.about-preview__button:focus-visible,
.about-brand__button:hover,
.about-brand__button:focus-visible,
.motto-v71-cta__button:hover,
.motto-v71-cta__button:focus-visible,
.contact-card__map-link:hover,
.contact-card__map-link:focus-visible,
.contact-links__action:hover,
.contact-links__action:focus-visible,
.featured-hero__cta:hover,
.featured-hero__cta:focus-visible,
.delivery-cta .button:hover,
.delivery-cta .button:focus-visible{
  box-shadow:none !important;
  filter:none !important;
  text-shadow:none !important;
}
.button,
.site-order,
.about-preview__button,
.about-brand__button,
.motto-v71-cta__button,
.featured-hero__cta,
.delivery-cta .button,
.contact-card__map-link,
.contact-links__action{
  transition:transform .18s ease, background-color .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease !important;
}
.button:hover,
.site-order:hover,
.about-preview__button:hover,
.about-brand__button:hover,
.motto-v71-cta__button:hover,
.featured-hero__cta:hover,
.delivery-cta .button:hover,
.contact-card__map-link:hover,
.contact-links__action:hover{
  transform:translateY(-1px);
}

/* Delivery CTA mobile composition: bring the courier scene back toward the
   center and keep the smoke trail visible. */
@media (max-width: 767px){
  .home-page .delivery-cta__destination{
    right:-3% !important;
    width:48% !important;
    height:272px !important;
  }
  .home-page .delivery-cta__pin{
    right:41% !important;
    bottom:16% !important;
    width:28% !important;
  }
  .home-page .delivery-cta__chicken{
    right:-4% !important;
    bottom:5% !important;
    width:60% !important;
  }
  .home-page .delivery-cta__bucket{
    right:-2% !important;
    bottom:-9% !important;
    width:39% !important;
  }
  .home-page .delivery-cta__road{
    left:-8% !important;
    width:118% !important;
  }
  .home-page .delivery-cta__speed{
    left:8% !important;
    bottom:17% !important;
    width:52% !important;
  }
  .home-page .delivery-cta__smoke{
    left:3% !important;
    bottom:7% !important;
    width:60% !important;
    opacity:.78 !important;
  }
  .home-page .delivery-cta__courier{
    left:8% !important;
    bottom:3% !important;
    width:min(72vw, 318px) !important;
  }
}
@media (max-width: 430px){
  .home-page .delivery-cta__courier{left:3% !important; width:min(76vw, 304px) !important;}
  .home-page .delivery-cta__smoke{left:-1% !important; width:66% !important;}
}

/* Home about-story art: keep a clean base position. Motion is defined in
   the REV103 block below; do not lock transform with !important here because
   that would suppress keyframe transforms. */
.home-page .home-about-story .about-story__visual-scene{
  width:min(100%, 664px);
}
.home-page .home-about-story .about-story__bg-garnish{
  left:2% !important;
  top:3% !important;
  width:93% !important;
}
.home-page .home-about-story .about-story__main-burger{
  left:9% !important;
  bottom:1% !important;
  width:83% !important;
}
@media (max-width: 1023px){
  .home-page .home-about-story .about-story__visual-scene{
    width:min(100%, 620px);
  }
}
@media (max-width: 767px){
  .home-page .home-about-story .about-story__bg-garnish{
    left:1% !important;
    top:2% !important;
    width:98% !important;
  }
  .home-page .home-about-story .about-story__main-burger{
    left:6% !important;
    width:88% !important;
  }
}


/* ======================================================================
   REV99 · Final delivery visual parity + media fallback hardening
   ====================================================================== */

/* Mottomuz CTA is a reusable component. Its palette used to be scoped only
   to .motto-page-v71, causing checker/color declarations to become invalid
   on About and Contact. Give shared instances the exact component context. */
.shared-motto-cta {
  --motto-v71-red: #ef101b;
  --motto-v71-ink: #11110f;
  --motto-v71-cream: #fff8ef;
  --motto-v71-paper: #f7ead9;
  width: min(calc(100% - 48px), 1640px) !important;
  margin-inline: auto !important;
  min-height: clamp(270px, 24vw, 390px) !important;
  border-radius: 30px !important;
  background:
    radial-gradient(circle at 50% 52%, rgba(255,255,255,.88), rgba(255,255,255,.35) 42%, transparent 70%),
    #faeedf !important;
}
.shared-motto-cta .motto-v71-cta__checker {
  display: block !important;
  background-color: #f8ead6 !important;
  background-image:
    linear-gradient(45deg, #ef101b 25%, transparent 25%, transparent 75%, #ef101b 75%),
    linear-gradient(45deg, #ef101b 25%, transparent 25%, transparent 75%, #ef101b 75%) !important;
}
.shared-motto-cta .motto-v71-cta__eyebrow { color: #ef101b !important; }
.shared-motto-cta h2 {
  color: #11110f !important;
  font-family: "Caveat Brush", "Caveat", cursive !important;
  font-weight: 400 !important;
  line-height: .86 !important;
  letter-spacing: -.025em !important;
}
.shared-motto-cta h2 strong {
  color: #ef101b !important;
  font: inherit !important;
}
.shared-motto-cta .motto-v71-cta__button {
  min-width: 250px !important;
  min-height: 58px !important;
  border-radius: 17px !important;
}
@media (max-width: 1100px) {
  .shared-motto-cta { width: min(calc(100% - 36px), 1640px) !important; }
}
@media (max-width: 820px) {
  .shared-motto-cta {
    width: min(calc(100% - 28px), 1640px) !important;
    min-height: 390px !important;
    border-radius: 26px !important;
  }
  .shared-motto-cta .motto-v71-cta__checker {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    height: 86px !important;
    opacity: 1 !important;
    -webkit-mask-image: none !important;
    mask-image: none !important;
  }
  .shared-motto-cta .motto-v71-cta__checker--left { top: 0 !important; bottom: auto !important; }
  .shared-motto-cta .motto-v71-cta__checker--right { top: auto !important; bottom: 0 !important; transform: none !important; }
  .shared-motto-cta .motto-v71-cta__content { justify-content: center !important; padding: 118px 26px !important; }
}
@media (max-width: 560px) {
  .shared-motto-cta {
    width: calc(100% - 20px) !important;
    min-height: 440px !important;
    border-radius: 22px !important;
  }
  .shared-motto-cta .motto-v71-cta__checker {
    height: 84px !important;
    background-position: 0 0, 20px 20px !important;
    background-size: 40px 40px !important;
  }
  .shared-motto-cta .motto-v71-cta__content { padding: 112px 22px !important; }
  .shared-motto-cta h2 {
    max-width: 300px !important;
    margin: 20px 0 28px !important;
    font-size: clamp(68px, 19vw, 88px) !important;
  }
  .shared-motto-cta .motto-v71-cta__button { width: min(100%, 310px) !important; min-width: 0 !important; }
}

/* Homepage "Joul lezzetiyle tanış" heading now uses the exact handwritten
   family used by the Featured Flavours H2, as requested. */
.home-page .home-about-story .about-story__content h2 {
  font-family: "Caveat Brush", "Caveat", cursive !important;
  font-size: clamp(58px, 5.15vw, 88px) !important;
  font-weight: 400 !important;
  line-height: .82 !important;
  letter-spacing: -.04em !important;
}
.home-page .home-about-story .about-story__content h2 span {
  font: inherit !important;
  color: var(--joul-red) !important;
}
.home-page .home-about-story .about-story__feature {
  grid-template-columns: 34px minmax(0,1fr) !important;
  align-items: start !important;
  gap: 14px !important;
}
.home-page .home-about-story .about-story__check {
  margin-top: 2px !important;
  align-self: start !important;
}

/* The background art stays straight, stable and contained. */
.home-page .home-about-story .about-story__visual-scene {
  width: min(100%, 650px) !important;
}
.home-page .home-about-story .about-story__bg-garnish {
  left: 3% !important;
  top: 5% !important;
  width: 91% !important;
  height: auto !important;
  object-fit: contain !important;
  transform: none !important;
  animation: none !important;
}
.home-page .home-about-story .about-story__main-burger {
  left: 10% !important;
  bottom: 2% !important;
  width: 82% !important;
  transform: none !important;
  animation: none !important;
}
@media (max-width: 900px) {
  .home-page .home-about-story .about-story__content h2 {
    font-size: clamp(52px, 9vw, 72px) !important;
  }
}
@media (max-width: 760px) {
  .home-page .home-about-story .about-story__content h2 {
    font-size: clamp(44px, 13vw, 60px) !important;
  }
  .home-page .home-about-story .about-story__bg-garnish { left: 1% !important; width: 98% !important; }
  .home-page .home-about-story .about-story__main-burger { left: 6% !important; width: 88% !important; }
}

/* ======================================================================
   REV100 · Product detail channel parity
   Only the approved Yemeksepeti + Migros Yemek channels are rendered here.
   ====================================================================== */
.product-detail-page .product-order-card--migros-yemek{
  width:240px;
  min-height:62px;
  height:62px;
  padding:0 !important;
  border:0 !important;
  border-radius:12px;
  background:#ff671d !important;
  overflow:hidden;
  box-shadow:none;
}
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo{
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo img{
  display:block;
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  object-fit:cover !important;
  object-position:center !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}
.product-detail-page .product-order-card--migros-yemek:hover{
  transform:translateY(-1px);
  box-shadow:none;
}
@media(max-width:600px){
  .product-detail-page .product-order-card--migros-yemek{
    width:100%;
    height:60px;
    min-height:60px;
  }
}

/* ======================================================================
   REV101 · delivery polish, adaptive categories, search & about motion
   ====================================================================== */

/* Give the reusable CTA a deliberate breathing zone before the footer. */
.about-page .shared-motto-cta--about,
.contact-page .shared-motto-cta--contact {
  margin-bottom: clamp(44px, 5.2vw, 78px) !important;
}
@media (max-width: 760px) {
  .about-page .shared-motto-cta--about,
  .contact-page .shared-motto-cta--contact {
    margin-bottom: 38px !important;
  }
}

/* Desktop category rail adapts to the number actually published. Missing one
   category no longer leaves a fifth empty column. */
@media (min-width: 1024px) {
  .home-page .category-cards {
    grid-template-columns: repeat(var(--category-count, 5), minmax(0, 1fr)) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .home-page .category-cards--count-4 { max-width: 1260px; }
  .home-page .category-cards--count-3 { max-width: 950px; }
  .home-page .category-cards--count-2 { max-width: 640px; }
  .home-page .category-cards--count-1 { max-width: 320px; }
}

/* Global menu search: lightweight, appetising and action-oriented. */
.site-search-dialog {
  width: min(720px, calc(100vw - 32px));
  max-width: 720px;
  padding: 0;
  border: 0;
  border-radius: 28px;
  background: transparent;
  overflow: visible;
  box-shadow: 0 28px 90px rgba(35, 12, 6, .28);
}
.site-search-dialog::backdrop {
  background: rgba(24, 12, 8, .56);
  backdrop-filter: blur(6px);
}
.site-search-dialog__panel {
  position: relative;
  padding: clamp(30px, 5vw, 50px);
  overflow: hidden;
  border-radius: inherit;
  background:
    radial-gradient(circle at 92% 6%, rgba(226, 6, 19, .11), transparent 30%),
    radial-gradient(circle at 7% 95%, rgba(226, 6, 19, .06), transparent 26%),
    #fff8ee;
}
.site-search-dialog__panel::after {
  content: "";
  position: absolute;
  right: -34px;
  bottom: -40px;
  width: 150px;
  height: 150px;
  opacity: .07;
  background-image:
    linear-gradient(45deg, var(--joul-red) 25%, transparent 25%, transparent 75%, var(--joul-red) 75%),
    linear-gradient(45deg, var(--joul-red) 25%, transparent 25%, transparent 75%, var(--joul-red) 75%);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
  transform: rotate(8deg);
  pointer-events: none;
}
.site-search-dialog__close {
  position: absolute;
  z-index: 4;
  top: 16px;
  right: 16px;
  width: 42px;
  height: 42px;
  border: 1px solid rgba(35, 20, 14, .11);
  border-radius: 50%;
  background: rgba(255,255,255,.82);
  color: #171412;
  font: 400 27px/1 "Red Hat Display", sans-serif;
  cursor: pointer;
}
.site-search-dialog__eyebrow {
  display: block;
  margin-bottom: 8px;
  color: var(--joul-red);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .22em;
}
.site-search-dialog h2 {
  position: relative;
  z-index: 2;
  margin: 0;
  color: #111;
  font-family: "Caveat Brush", "Caveat", cursive;
  font-size: clamp(48px, 7vw, 72px);
  font-weight: 400;
  line-height: .88;
}
.site-search-dialog h2 strong { color: var(--joul-red); font: inherit; }
.site-search-dialog__panel > p {
  position: relative;
  z-index: 2;
  max-width: 600px;
  margin: 15px 0 22px;
  color: #4a413b;
  font-size: 15px;
  line-height: 1.5;
}
.site-search-dialog__form {
  position: relative;
  z-index: 3;
  display: grid;
  grid-template-columns: 24px minmax(0,1fr) auto;
  align-items: center;
  gap: 10px;
  min-height: 62px;
  padding: 7px 8px 7px 18px;
  border: 1px solid rgba(50, 27, 18, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 12px 30px rgba(50, 22, 12, .06);
}
.site-search-dialog__form .ui-icon { width: 21px; height: 21px; }
.site-search-dialog__form input {
  width: 100%;
  min-width: 0;
  height: 44px;
  border: 0;
  outline: 0;
  background: transparent;
  color: #171412;
  font: 650 15px/1.2 "Red Hat Display", sans-serif;
}
.site-search-dialog__form input::placeholder { color: #8a7d75; font-weight: 500; }
.site-search-dialog__form button {
  min-width: 110px;
  height: 48px;
  border: 0;
  border-radius: 13px;
  background: var(--joul-red);
  color: #fff;
  font: 800 14px/1 "Red Hat Display", sans-serif;
  cursor: pointer;
}
.site-search-dialog__quick {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 16px;
}
.site-search-dialog__quick > span { margin-right: 3px; color: #766a63; font-size: 11px; font-weight: 800; }
.site-search-dialog__quick a {
  display: inline-flex;
  min-height: 34px;
  align-items: center;
  padding: 0 12px;
  border: 1px solid rgba(34, 20, 14, .11);
  border-radius: 999px;
  background: rgba(255,255,255,.72);
  color: #1e1916;
  font-size: 11px;
  font-weight: 800;
}
.site-search-dialog__quick a:hover { border-color: var(--joul-red); color: var(--joul-red); }
@media (max-width: 560px) {
  .site-search-dialog { width: calc(100vw - 20px); border-radius: 22px; }
  .site-search-dialog__panel { padding: 34px 18px 24px; }
  .site-search-dialog h2 { font-size: clamp(46px, 15vw, 62px); }
  .site-search-dialog__panel > p { margin-top: 12px; font-size: 13px; }
  .site-search-dialog__form { grid-template-columns: 20px minmax(0,1fr); padding: 8px 11px 8px 15px; border-radius: 15px; }
  .site-search-dialog__form button { grid-column: 1 / -1; width: 100%; min-width: 0; }
  .site-search-dialog__quick { gap: 6px; }
}

/* About preview: plate rotates in place, background garnish has a controlled
   subtle vertical float. */
.home-page .home-about-story .about-story__main-burger {
  transform-origin: 50% 50% !important;
  animation: joulPlateSpin 18s linear infinite !important;
  will-change: transform;
}
.home-page .home-about-story .about-story__bg-garnish {
  transform-origin: 50% 50% !important;
  animation: joulGarnishFloat 5.8s ease-in-out infinite !important;
  will-change: transform;
}
@keyframes joulPlateSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes joulGarnishFloat {
  0%,100% { transform: translate3d(0,0,0); }
  50% { transform: translate3d(0,-7px,0); }
}
.home-page .home-about-story .about-story__check::after {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -58%) rotate(-45deg) !important;
  transform-origin: center !important;
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-about-story .about-story__main-burger,
  .home-page .home-about-story .about-story__bg-garnish {
    animation: none !important;
    transform: none !important;
  }
}

/* Uploaded CMS images can have portrait/square ratios. On product detail keep
   the whole uploaded image visible instead of aggressively cropping it. */
.product-detail-page .pd-gallery__main--uploaded {
  object-fit: contain !important;
  background: #f7eee5;
}
.product-detail-page .pd-gallery__thumb img.pd-gallery__thumb-image--uploaded {
  object-fit: contain !important;
  background: #f7eee5;
}

/* ======================================================================
   REV103 · Joul lezzetiyle tanış / motion cascade fix
   Previous transform:none!important declarations prevented keyframe
   transforms from becoming visible. The visual layers now animate directly.
   ====================================================================== */
.home-page .home-about-story .about-story__visual {
  overflow: visible;
}
.home-page .home-about-story .about-story__visual-scene {
  overflow: visible;
}
.home-page .home-about-story .about-story__main-burger {
  transform-origin: 50% 58%;
  animation: joulPlateSpinRev103 10s linear infinite !important;
  animation-play-state: running !important;
  will-change: transform;
  backface-visibility: hidden;
}
.home-page .home-about-story .about-story__bg-garnish {
  transform-origin: 50% 50%;
  animation: joulGarnishFloatRev103 4.2s ease-in-out infinite !important;
  animation-play-state: running !important;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes joulPlateSpinRev103 {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}
@keyframes joulGarnishFloatRev103 {
  0%, 100% { transform: translate3d(0, 5px, 0); }
  50% { transform: translate3d(0, -11px, 0); }
}
.home-page .home-about-story .about-story__check {
  display: grid !important;
  place-items: center !important;
  padding: 0 !important;
  overflow: hidden;
}
.home-page .home-about-story .about-story__check::after {
  display: none !important;
  content: none !important;
}
.home-page .home-about-story .about-story__check svg {
  display: block;
  width: 17px;
  height: 17px;
  overflow: visible;
  transform: translateY(0) !important;
}
.home-page .home-about-story .about-story__check svg path {
  fill: none;
  stroke: #fff;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
@media (max-width: 760px) {
  .home-page .home-about-story .about-story__check svg {
    width: 15px;
    height: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-about-story .about-story__main-burger,
  .home-page .home-about-story .about-story__bg-garnish {
    animation: none !important;
    transform: none !important;
  }
}

/* ======================================================================
   REV104 · PRODUCT DETAIL PREMIUM MERGE ON REV103
   Approved reference transferred onto the latest REV103 base.
   - Ingredients stay plain text: no card / no icons.
   - Repeated checker/pixel marks removed from product-detail sections.
   - Joul touch copy moved under order channels in the right column.
   - H1 scale reduced for better balance with the product image.
   ====================================================================== */
.product-detail-page {
  --pd104-red:#e30617;
  --pd104-ink:#0c0b0a;
  --pd104-copy:#68605a;
  --pd104-paper:#fffaf4;
  --pd104-paper-2:#fffdf8;
  --pd104-line:rgba(36,25,18,.12);
}
.product-detail-page .product-detail-main { background:var(--pd104-paper); }
.product-detail-page .pd-shell,
.product-detail-page .pd-related .pd-shell,
.product-detail-page .pd-menu-cta .pd-shell {
  width:min(1440px,calc(100% - 88px));
  margin-inline:auto;
}
.product-detail-page .pd-hero {
  min-height:0;
  padding:22px 0 42px;
  overflow:hidden;
  background:
    radial-gradient(circle at 98% 38%,rgba(226,6,19,.035),transparent 24%),
    linear-gradient(180deg,#fffdf9 0%,#fffaf4 100%);
  border:0;
}
.product-detail-page .pd-breadcrumb {
  min-height:auto;
  margin:0 0 20px;
  display:flex;
  align-items:center;
  gap:10px;
  color:#70675f;
  font-size:12px;
  line-height:1.4;
  font-weight:650;
}
.product-detail-page .pd-breadcrumb a { color:inherit; }
.product-detail-page .pd-breadcrumb a:hover { color:var(--pd104-red); }
.product-detail-page .pd-breadcrumb span[aria-hidden="true"] { color:#a79d94; }

.product-detail-page .pd-hero__grid {
  display:grid;
  grid-template-columns:minmax(480px,.96fr) minmax(500px,1.04fr);
  grid-template-areas:"gallery intro" "gallery details";
  grid-template-rows:auto 1fr;
  column-gap:clamp(40px,4vw,72px);
  row-gap:0;
  align-items:start;
}
.product-detail-page .pd-gallery { grid-area:gallery; min-width:0; }
.product-detail-page .pd-gallery__stage {
  width:100%;
  min-height:0;
  aspect-ratio:1 / 1.035;
  display:block;
  overflow:hidden;
  border:0;
  border-radius:18px;
  background:#24170f;
  box-shadow:0 18px 42px rgba(55,31,18,.08);
}
.product-detail-page .pd-gallery__main {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center;
  filter:none;
  transform:none;
}
.product-detail-page .pd-gallery__thumbs { margin-top:10px; gap:9px; }
.product-detail-page .pd-gallery__thumb { width:88px; height:60px; border-radius:9px; }

.product-detail-page .pd-summary--intro {
  grid-area:intro;
  min-width:0;
  padding:18px 0 0;
}
.product-detail-page .pd-category-pill {
  min-height:29px;
  padding:0 13px;
  border:0;
  border-radius:999px;
  background:#fde8df;
  color:#d20b18;
  font-size:10px;
  line-height:29px;
  font-weight:900;
  letter-spacing:.035em;
  text-transform:uppercase;
}
/* Intentionally smaller than the first premium draft. */
.product-detail-page .pd-summary h1 {
  max-width:650px;
  margin:16px 0 0;
  color:var(--pd104-ink);
  font-size:clamp(44px,3.25vw,58px);
  line-height:.96;
  letter-spacing:-.052em;
  font-weight:900;
  text-wrap:balance;
}
.product-detail-page .pd-tagline {
  max-width:650px;
  margin:16px 0 0;
  color:var(--pd104-ink);
  font-size:clamp(20px,1.5vw,25px);
  line-height:1.18;
  letter-spacing:-.025em;
  font-weight:850;
}
.product-detail-page .pd-description {
  max-width:665px;
  margin:15px 0 0;
  color:var(--pd104-copy);
  font-size:15px;
  line-height:1.68;
  font-weight:500;
}
.product-detail-page .pd-detail-stack {
  grid-area:details;
  min-width:0;
  display:grid;
  align-content:start;
  gap:15px;
  padding-top:20px;
}

/* Ingredients: plain editorial line only. */
.product-detail-page .pd-components {
  margin:0;
  padding:18px 0 0;
  border:0;
  border-top:1px solid rgba(31,22,16,.15);
  border-radius:0;
  background:transparent;
}
.product-detail-page .pd-components h2,
.product-detail-page .pd-accompaniments h2 {
  margin:0;
  color:var(--pd104-red);
  font-size:13px;
  line-height:1.2;
  font-weight:900;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.product-detail-page .pd-components__line {
  margin-top:11px;
  display:flex;
  flex-wrap:wrap;
  align-items:center;
  gap:7px 0;
  color:#4e4742;
  font-size:14px;
  line-height:1.55;
  font-weight:600;
}
.product-detail-page .pd-component-item {
  min-width:0;
  min-height:0;
  display:inline-flex;
  align-items:center;
  gap:0;
  padding:0;
  border:0 !important;
  background:transparent;
  color:inherit;
  font:inherit;
}
.product-detail-page .pd-component-item:not(:last-child)::after {
  content:"•";
  margin:0 10px;
  color:#b3a69d;
  font-size:11px;
}
.product-detail-page .pd-component-item__icon { display:none !important; }
.product-detail-page .pd-accompaniments {
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  display:flex;
  align-items:baseline;
  gap:14px;
}
.product-detail-page .pd-accompaniments__chips {
  margin:0;
  display:flex;
  flex-wrap:wrap;
  gap:0;
  color:#655d57;
}
.product-detail-page .pd-accompaniments__chip {
  min-height:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  color:inherit;
  font-size:13px;
  line-height:1.5;
  font-weight:650;
}
.product-detail-page .pd-accompaniments__chip:not(:last-child)::after {
  content:"•";
  margin:0 9px;
  color:#b3a69d;
}

.product-detail-page .pd-order { margin:10px 0 0; }
.product-detail-page .pd-order__grid {
  display:grid;
  grid-template-columns:repeat(2,minmax(0,230px));
  justify-content:start;
  gap:12px;
  margin:0;
}
.product-detail-page .product-order-card,
.product-detail-page .product-order-card--yemeksepeti,
.product-detail-page .product-order-card--migros-yemek,
.product-detail-page .product-order-card--getir-yemek {
  width:100%;
  min-height:62px;
  height:62px;
  padding:0 !important;
  overflow:hidden;
  border:0 !important;
  border-radius:11px;
  background:transparent !important;
  box-shadow:0 10px 24px rgba(52,27,12,.06);
  transition:transform .2s ease,box-shadow .2s ease;
}
.product-detail-page .product-order-card:hover {
  transform:translateY(-2px);
  box-shadow:0 14px 28px rgba(52,27,12,.10);
}
.product-detail-page .product-order-card__logo,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo,
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo {
  width:100% !important;
  height:100% !important;
  display:block !important;
}
.product-detail-page .product-order-card__logo img,
.product-detail-page .product-order-card--yemeksepeti .product-order-card__logo img,
.product-detail-page .product-order-card--migros-yemek .product-order-card__logo img {
  width:100% !important;
  height:100% !important;
  max-width:none !important;
  max-height:none !important;
  display:block;
  object-fit:cover !important;
  object-position:center !important;
  opacity:1 !important;
  filter:none !important;
  transform:none !important;
}
.product-detail-page .product-order-card__arrow { display:none !important; }

/* Joul touch now belongs to the product summary instead of being a second band. */
.product-detail-page .pd-inline-touch {
  margin:4px 0 0;
  padding:20px 0 0;
  border-top:1px solid rgba(31,22,16,.15);
  display:grid;
  grid-template-columns:132px minmax(0,1fr);
  align-items:center;
  gap:24px;
}
.product-detail-page .pd-inline-touch__brand {
  min-height:78px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  padding-right:20px;
  border-right:1px solid rgba(226,6,23,.22);
  line-height:.82;
}
.product-detail-page .pd-inline-touch__brand span {
  margin:0 0 -2px 2px;
  color:var(--pd104-red);
  font-family:'Caveat',cursive;
  font-size:40px;
  font-weight:700;
  transform:rotate(-4deg);
}
.product-detail-page .pd-inline-touch__brand strong {
  color:#17120f;
  font-size:18px;
  line-height:.9;
  letter-spacing:-.035em;
  font-weight:900;
}
.product-detail-page .pd-inline-touch__copy { min-width:0; }
.product-detail-page .pd-inline-touch__copy h2 {
  margin:0;
  color:#17120f;
  font-size:16px;
  line-height:1.22;
  letter-spacing:-.015em;
  font-weight:850;
}
.product-detail-page .pd-inline-touch__copy p {
  max-width:560px;
  margin:7px 0 0;
  color:#6c635c;
  font-size:13px;
  line-height:1.55;
  font-weight:550;
}
.product-detail-page .pd-touch { display:none !important; }

/* Related products: vertical cards, no repeated checker mark. */
.product-detail-page .pd-related {
  padding:42px 0 34px;
  background:#fffaf4;
}
.product-detail-page .pd-related__header { align-items:end; }
.product-detail-page .pd-related__title-wrap {
  display:block;
  grid-template-columns:none;
}
.product-detail-page .pd-related__title-wrap > img { display:none !important; }
.product-detail-page .pd-related__title-wrap h2 {
  margin:0;
  color:var(--pd104-ink);
  font-size:clamp(29px,2.45vw,38px);
  line-height:1;
  letter-spacing:-.045em;
  font-weight:900;
}
.product-detail-page .pd-related__title-wrap p {
  margin:8px 0 0;
  color:#796f68;
  font-size:13px;
  line-height:1.45;
}
.product-detail-page .pd-related__controls { display:flex; gap:9px; }
.product-detail-page .pd-related__controls button {
  width:42px;
  height:42px;
  border:1px solid rgba(31,22,16,.14);
  border-radius:50%;
  background:rgba(255,255,255,.42);
  color:#17120f;
}
.product-detail-page .pd-related__track {
  display:grid;
  grid-auto-flow:column;
  grid-auto-columns:calc((100% - 32px)/3);
  gap:16px;
  margin-top:20px;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scrollbar-width:none;
}
.product-detail-page .pd-related-card {
  min-height:0;
  display:block;
  overflow:hidden;
  border:1px solid rgba(31,22,16,.11);
  border-radius:12px;
  background:rgba(255,255,255,.78);
  box-shadow:none;
}
.product-detail-page .pd-related-card__image {
  min-height:0;
  display:block;
  aspect-ratio:1.48 / 1;
  overflow:hidden;
  background:#ead7c5;
}
.product-detail-page .pd-related-card__image img {
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .28s ease;
}
.product-detail-page .pd-related-card:hover .pd-related-card__image img { transform:scale(1.025); }
.product-detail-page .pd-related-card__body {
  min-height:168px;
  display:flex;
  flex-direction:column;
  padding:17px 18px 18px;
}
.product-detail-page .pd-related-card h3 {
  margin:0;
  color:var(--pd104-ink);
  font-size:20px;
  line-height:1.12;
  letter-spacing:-.025em;
  font-weight:900;
}
.product-detail-page .pd-related-card p {
  min-height:0;
  margin:8px 0 0;
  color:#766d66;
  font-size:12.5px;
  line-height:1.55;
}
.product-detail-page .pd-related-card__link {
  margin-top:auto;
  padding-top:14px;
  color:var(--pd104-red);
  font-size:12.5px;
  font-weight:850;
}

/* Clean CTA; no repeated checker mark. */
.product-detail-page .pd-menu-cta { padding:0 0 38px; background:#fffaf4; }
.product-detail-page .pd-menu-cta__inner {
  min-height:112px;
  overflow:hidden;
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  align-items:center;
  gap:32px;
  padding:22px 235px 22px 34px;
  border:1px solid rgba(213,111,67,.20);
  border-radius:14px;
  background:linear-gradient(110deg,#fff9f0 0%,#fff5e8 70%,#fff1df 100%);
}
.product-detail-page .pd-menu-cta__copy { display:block; grid-template-columns:none; }
.product-detail-page .pd-menu-cta__copy > img { display:none !important; }
.product-detail-page .pd-menu-cta h2 {
  margin:0;
  color:var(--pd104-ink);
  font-size:26px;
  line-height:1.04;
  letter-spacing:-.035em;
  font-weight:900;
}
.product-detail-page .pd-menu-cta p {
  margin:7px 0 0;
  color:#746a62;
  font-size:12.5px;
  line-height:1.45;
}
.product-detail-page .pd-menu-cta .button {
  min-width:248px;
  min-height:52px;
  padding-inline:30px;
  position:relative;
  z-index:3;
  border-radius:999px;
  box-shadow:0 12px 24px rgba(226,6,19,.14);
}
.product-detail-page .pd-menu-cta__script { display:none !important; }
.product-detail-page .pd-menu-cta__food {
  width:230px;
  height:150px;
  position:absolute;
  right:-16px;
  bottom:-45px;
  z-index:1;
  object-fit:cover;
  object-position:center;
  border-radius:55% 0 0 0;
  transform:rotate(-4deg);
  filter:saturate(1.05);
  -webkit-mask-image:linear-gradient(130deg,transparent 0 8%,#000 34% 100%);
  mask-image:linear-gradient(130deg,transparent 0 8%,#000 34% 100%);
}
.product-detail-page .pd-menu-cta__inner::after {
  content:"";
  position:absolute;
  right:170px;
  bottom:11px;
  width:88px;
  height:13px;
  border-top:4px solid var(--pd104-red);
  border-radius:50%;
  transform:rotate(-14deg);
  opacity:.9;
}

@media (max-width:1199px) {
  .product-detail-page .pd-shell,
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width:min(1120px,calc(100% - 48px)); }
  .product-detail-page .pd-hero__grid {
    grid-template-columns:minmax(390px,46%) minmax(0,1fr);
    column-gap:34px;
  }
  .product-detail-page .pd-summary h1 { font-size:clamp(42px,4.5vw,54px); }
  .product-detail-page .pd-tagline { font-size:clamp(19px,2vw,23px); }
  .product-detail-page .pd-description { font-size:14px; }
  .product-detail-page .pd-inline-touch { grid-template-columns:118px minmax(0,1fr); gap:20px; }
  .product-detail-page .pd-inline-touch__brand { padding-right:16px; }
  .product-detail-page .pd-menu-cta__inner { padding-right:210px; }
}

@media (max-width:900px) {
  .product-detail-page .pd-shell,
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width:calc(100% - 40px); }
  .product-detail-page .pd-hero { padding:14px 0 30px; }
  .product-detail-page .pd-breadcrumb { margin-bottom:12px; font-size:10.5px; }
  .product-detail-page .pd-hero__grid {
    grid-template-columns:1fr;
    grid-template-areas:"intro" "gallery" "details";
    grid-template-rows:auto;
    gap:18px;
  }
  .product-detail-page .pd-summary--intro { padding-top:0; }
  .product-detail-page .pd-summary h1 {
    max-width:680px;
    margin-top:12px;
    font-size:clamp(39px,7.4vw,52px);
  }
  .product-detail-page .pd-tagline { max-width:680px; margin-top:12px; font-size:20px; }
  .product-detail-page .pd-description { max-width:720px; margin-top:10px; }
  .product-detail-page .pd-gallery__stage { aspect-ratio:1.34 / 1; }
  .product-detail-page .pd-detail-stack { padding-top:0; gap:14px; }
  .product-detail-page .pd-order__grid { grid-template-columns:repeat(2,minmax(0,230px)); }
  .product-detail-page .pd-related__track { grid-auto-columns:58%; }
  .product-detail-page .pd-menu-cta__inner { padding-right:180px; }
  .product-detail-page .pd-menu-cta__food { width:190px; }
}

@media (max-width:600px) {
  .product-detail-page .pd-shell,
  .product-detail-page .pd-related .pd-shell,
  .product-detail-page .pd-menu-cta .pd-shell { width:calc(100% - 30px); }
  .product-detail-page .pd-hero { padding-bottom:24px; }
  .product-detail-page .pd-breadcrumb {
    flex-wrap:nowrap;
    overflow-x:auto;
    white-space:nowrap;
    scrollbar-width:none;
  }
  .product-detail-page .pd-breadcrumb::-webkit-scrollbar { display:none; }
  .product-detail-page .pd-category-pill { min-height:26px; line-height:26px; font-size:9px; }
  .product-detail-page .pd-summary h1 {
    margin-top:10px;
    font-size:clamp(34px,9.7vw,43px);
    line-height:.96;
  }
  .product-detail-page .pd-tagline { margin-top:11px; font-size:17px; line-height:1.2; }
  .product-detail-page .pd-description { font-size:13.5px; line-height:1.62; }
  .product-detail-page .pd-gallery__stage { aspect-ratio:1.03 / 1; border-radius:13px; }
  .product-detail-page .pd-components { padding-top:16px; }
  .product-detail-page .pd-components h2,
  .product-detail-page .pd-accompaniments h2 { font-size:11px; }
  .product-detail-page .pd-components__line { margin-top:9px; font-size:13px; }
  .product-detail-page .pd-component-item:not(:last-child)::after { margin-inline:7px; }
  .product-detail-page .pd-accompaniments { align-items:flex-start; gap:8px; flex-direction:column; }
  .product-detail-page .pd-accompaniments__chip { font-size:12px; }
  .product-detail-page .pd-order { margin-top:8px; }
  .product-detail-page .pd-order__grid { grid-template-columns:1fr; gap:9px; }
  .product-detail-page .product-order-card,
  .product-detail-page .product-order-card--yemeksepeti,
  .product-detail-page .product-order-card--migros-yemek { height:58px; min-height:58px; }
  .product-detail-page .pd-inline-touch {
    grid-template-columns:1fr;
    gap:12px;
    padding-top:17px;
  }
  .product-detail-page .pd-inline-touch__brand {
    min-height:0;
    padding:0 0 11px;
    border-right:0;
    border-bottom:1px solid rgba(226,6,23,.18);
    flex-direction:row;
    align-items:baseline;
    justify-content:flex-start;
    gap:8px;
  }
  .product-detail-page .pd-inline-touch__brand span { margin:0; font-size:34px; }
  .product-detail-page .pd-inline-touch__brand strong { font-size:16px; }
  .product-detail-page .pd-inline-touch__copy h2 { font-size:15px; }
  .product-detail-page .pd-inline-touch__copy p { font-size:12.5px; }
  .product-detail-page .pd-related { padding:30px 0 26px; }
  .product-detail-page .pd-related__header { align-items:center; gap:12px; }
  .product-detail-page .pd-related__title-wrap h2 { font-size:26px; }
  .product-detail-page .pd-related__title-wrap p { font-size:12px; }
  .product-detail-page .pd-related__controls button { width:36px; height:36px; }
  .product-detail-page .pd-related__track { grid-auto-columns:86%; gap:12px; margin-top:16px; }
  .product-detail-page .pd-related-card__body { min-height:145px; padding:14px 15px 15px; }
  .product-detail-page .pd-related-card h3 { font-size:18px; }
  .product-detail-page .pd-related-card p { font-size:12px; }
  .product-detail-page .pd-menu-cta { padding-bottom:28px; }
  .product-detail-page .pd-menu-cta__inner {
    min-height:0;
    display:block;
    padding:20px 18px 95px;
  }
  .product-detail-page .pd-menu-cta h2 { font-size:23px; }
  .product-detail-page .pd-menu-cta p { max-width:290px; font-size:12px; }
  .product-detail-page .pd-menu-cta .button {
    width:100%;
    min-width:0;
    min-height:48px;
    margin-top:17px;
  }
  .product-detail-page .pd-menu-cta__food {
    width:170px;
    height:105px;
    right:-12px;
    bottom:-31px;
  }
  .product-detail-page .pd-menu-cta__inner::after { right:115px; bottom:22px; width:65px; }
}

@media (prefers-reduced-motion:reduce) {
  .product-detail-page .product-order-card,
  .product-detail-page .pd-related-card__image img { transition:none !important; }
}

/* REV105 - product detail ratio and 4-card related row refinement */
.product-detail-page .pd-hero__grid {
  grid-template-columns: minmax(360px, 420px) minmax(0, 1fr);
  column-gap: clamp(28px, 3vw, 52px);
}
.product-detail-page .pd-gallery {
  width: 100%;
  max-width: 420px;
}
.product-detail-page .pd-gallery__stage {
  aspect-ratio: 1.03 / 1;
}
.product-detail-page .pd-summary h1 {
  max-width: 700px;
}
.product-detail-page .pd-description {
  max-width: 760px;
}
.product-detail-page .pd-related__track {
  grid-auto-columns: calc((100% - 48px) / 4);
}
.product-detail-page .pd-related-card__image {
  aspect-ratio: 1.16 / 1;
}
.product-detail-page .pd-related-card__body {
  min-height: 154px;
  padding: 15px 16px 16px;
}
.product-detail-page .pd-related-card h3 {
  font-size: 18px;
}
.product-detail-page .pd-related-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 1199px) {
  .product-detail-page .pd-hero__grid {
    grid-template-columns: minmax(320px, 370px) minmax(0, 1fr);
    column-gap: 30px;
  }
  .product-detail-page .pd-gallery {
    max-width: 370px;
  }
  .product-detail-page .pd-related__track {
    grid-auto-columns: calc((100% - 32px) / 3);
  }
}
@media (max-width: 900px) {
  .product-detail-page .pd-gallery {
    max-width: none;
  }
  .product-detail-page .pd-gallery__stage {
    aspect-ratio: 1.25 / 1;
  }
  .product-detail-page .pd-related__track {
    grid-auto-columns: calc((100% - 14px) / 2);
  }
}
@media (max-width: 600px) {
  .product-detail-page .pd-related__track {
    grid-auto-columns: 86%;
  }
}

/* ======================================================================
   REV106 · Homepage about-story premium 360 turntable motion
   Existing homepage product art keeps the garnish/background stable while
   the plate scene performs a slower, perspective-aware 360° rotation.
   ====================================================================== */
.home-page .home-about-story .about-story__visual {
  perspective: 1600px;
  perspective-origin: 50% 48%;
}
.home-page .home-about-story .about-story__visual-scene {
  transform-style: preserve-3d;
}
.home-page .home-about-story .about-story__main-burger {
  transform-origin: 50% 56% !important;
  transform-style: preserve-3d;
  backface-visibility: visible;
  filter: drop-shadow(0 18px 26px rgba(43, 24, 12, .15));
  animation: joulPlateTurntableRev106 13.5s linear infinite !important;
  will-change: transform;
}
.home-page .home-about-story .about-story__bg-garnish {
  animation: joulGarnishFloatRev106 5.6s ease-in-out infinite !important;
}
@keyframes joulPlateTurntableRev106 {
  0%   { transform: perspective(1600px) rotateY(0deg) translate3d(0, 0, 0); }
  12.5%{ transform: perspective(1600px) rotateY(45deg) translate3d(0, -2px, 0); }
  25%  { transform: perspective(1600px) rotateY(90deg) translate3d(0, 0, 0); }
  37.5%{ transform: perspective(1600px) rotateY(135deg) translate3d(0, 2px, 0); }
  50%  { transform: perspective(1600px) rotateY(180deg) translate3d(0, 0, 0); }
  62.5%{ transform: perspective(1600px) rotateY(225deg) translate3d(0, -2px, 0); }
  75%  { transform: perspective(1600px) rotateY(270deg) translate3d(0, 0, 0); }
  87.5%{ transform: perspective(1600px) rotateY(315deg) translate3d(0, 2px, 0); }
  100% { transform: perspective(1600px) rotateY(360deg) translate3d(0, 0, 0); }
}
@keyframes joulGarnishFloatRev106 {
  0%, 100% { transform: translate3d(0, 4px, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
.home-page .home-about-story .about-story__visual:hover .about-story__main-burger,
.home-page .home-about-story .about-story__visual:focus-within .about-story__main-burger {
  animation-play-state: paused;
}
@media (max-width: 760px) {
  .home-page .home-about-story .about-story__main-burger {
    animation-duration: 11.5s !important;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .home-about-story .about-story__main-burger,
  .home-page .home-about-story .about-story__bg-garnish {
    animation: none !important;
    transform: none !important;
    filter: none !important;
  }
}

/* ======================================================================
   REV107 · Homepage category rail alignment + checker marquee refinement
   The 4-card category row now spans the same visual width as the red ribbon
   below. The old outlined text band is replaced by a clean, textless checker
   marquee to match the approved brand language.
   ====================================================================== */
@media (min-width: 1024px) {
  .home-page .category-cards--count-4 {
    max-width: none !important;
  }
  .home-page .category-cards--count-4 .category-card {
    min-width: 0;
  }
}
.home-page .category-ribbons {
  width: min(calc(100% - 90px), 1582px);
}
.home-page .category-ribbon--checker {
  height: clamp(38px, 2.8vw, 48px);
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-bottom: 10px;
  border-radius: 999px;
  background: transparent;
}
.home-page .category-ribbon__track--checker {
  animation: category-copy-marquee 24s linear infinite;
}
.home-page .category-ribbon__checker-set {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
  gap: 10px;
  padding-inline: 14px;
}
.home-page .category-ribbon__checker {
  width: clamp(20px, 1.4vw, 26px);
  height: clamp(20px, 1.4vw, 26px);
  flex: 0 0 auto;
  border-radius: 4px;
  border: 1px solid rgba(239, 7, 17, .14);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.home-page .category-ribbon__checker.is-red {
  background: linear-gradient(180deg, #ff2130 0%, var(--joul-red) 100%);
  border-color: rgba(210, 4, 14, .28);
}
.home-page .category-ribbon__checker.is-cream {
  background: #fff8ef;
  border-color: rgba(239, 7, 17, .16);
}
@media (max-width: 1023px) {
  .home-page .category-ribbons {
    width: calc(100% - 64px);
  }
}
@media (max-width: 767px) {
  .home-page .category-ribbon--checker {
    height: 32px;
    margin-bottom: 8px;
  }
  .home-page .category-ribbon__checker-set {
    gap: 8px;
    padding-inline: 12px;
  }
  .home-page .category-ribbon__checker {
    width: 17px;
    height: 17px;
    border-radius: 3px;
  }
}
@media (max-width: 430px) {
  .home-page .category-ribbons {
    width: calc(100% - 28px);
  }
  .home-page .category-ribbon--checker {
    height: 28px;
    margin-bottom: 7px;
  }
  .home-page .category-ribbon__checker-set {
    gap: 7px;
    padding-inline: 10px;
  }
  .home-page .category-ribbon__checker {
    width: 15px;
    height: 15px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .category-ribbon__track--checker {
    animation-play-state: paused;
  }
}

/* ======================================================================
   REV108 · Homepage checker band corrected to brief language
   The top band now uses a true checker tile motif instead of isolated pills.
   Top checker and bottom red slogan ribbons intentionally move in opposite
   directions.
   ====================================================================== */
.home-page .category-ribbon--checker {
  height: clamp(34px, 2.55vw, 42px);
  margin-bottom: 12px;
  border-radius: 999px;
}
.home-page .category-ribbon__track--checker {
  animation: category-copy-marquee-reverse 22s linear infinite;
}
.home-page .category-ribbon--solid .category-ribbon__track--solid {
  animation: category-copy-marquee 25s linear infinite;
}
.home-page .category-ribbon__checker-set {
  gap: 12px;
  padding-inline: 16px;
}
.home-page .category-ribbon__checker-tile {
  width: clamp(34px, 2.45vw, 40px);
  height: clamp(34px, 2.45vw, 40px);
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 0;
  flex: 0 0 auto;
  overflow: hidden;
  border-radius: 4px;
  box-shadow: inset 0 0 0 1px rgba(225, 16, 24, .11);
}
.home-page .category-ribbon__checker-cell {
  display: block;
  width: 100%;
  height: 100%;
}
.home-page .category-ribbon__checker-cell.is-red {
  background: linear-gradient(180deg, #ff2534 0%, #ef101b 100%);
}
.home-page .category-ribbon__checker-cell.is-cream {
  background: #fff8ef;
}
@media (max-width: 767px) {
  .home-page .category-ribbon--checker {
    height: 28px;
    margin-bottom: 10px;
  }
  .home-page .category-ribbon__checker-set {
    gap: 10px;
    padding-inline: 12px;
  }
  .home-page .category-ribbon__checker-tile {
    width: 28px;
    height: 28px;
    border-radius: 3px;
  }
}
@media (max-width: 430px) {
  .home-page .category-ribbon--checker {
    height: 24px;
    margin-bottom: 8px;
  }
  .home-page .category-ribbon__checker-set {
    gap: 8px;
    padding-inline: 10px;
  }
  .home-page .category-ribbon__checker-tile {
    width: 24px;
    height: 24px;
  }
}
@media (prefers-reduced-motion: reduce) {
  .home-page .category-ribbon--checker .category-ribbon__track--checker,
  .home-page .category-ribbon--solid .category-ribbon__track--solid {
    animation-play-state: paused;
  }
}

/* ======================================================================
   REV109 · Homepage marquee continuity fix
   Both moving bands now use three repeated sets and shift by exactly one set
   width, removing clipped endings and making the loop feel continuous.
   ====================================================================== */
@keyframes category-copy-marquee-third {
  from { transform: translate3d(0,0,0); }
  to   { transform: translate3d(-33.333333%,0,0); }
}
@keyframes category-copy-marquee-third-reverse {
  from { transform: translate3d(-33.333333%,0,0); }
  to   { transform: translate3d(0,0,0); }
}
.home-page .category-ribbon__track--checker {
  animation: category-copy-marquee-third-reverse 18s linear infinite !important;
}
.home-page .category-ribbon--solid .category-ribbon__track--solid {
  animation: category-copy-marquee-third 20s linear infinite !important;
}

/* ======================================================================
   REV110 · Homepage checker band restyled to match approved CTA language
   The previous tiny checker row is replaced with wider masked checker panels
   that visually echo the CTA side checker treatment shown in the reference.
   ====================================================================== */
.home-page .category-ribbon--checker {
  height: clamp(44px, 3.1vw, 58px) !important;
  margin-bottom: 10px;
  border-radius: 0 !important;
  background: transparent !important;
}
.home-page .category-ribbon__track--checker {
  animation: category-copy-marquee-third-reverse 19s linear infinite !important;
}
.home-page .category-ribbon__checker-set {
  display: flex;
  flex: 0 0 auto;
  align-items: stretch;
  gap: clamp(14px, 1vw, 18px) !important;
  padding-inline: 0 !important;
}
.home-page .category-ribbon__checker-panel {
  position: relative;
  flex: 0 0 auto;
  width: clamp(110px, 8vw, 142px);
  height: 100%;
  opacity: .98;
  background-color: #f8ead6;
  background-image:
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%),
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%);
  background-position: 0 0, 18px 18px;
  background-size: 36px 36px;
  -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 54%, rgba(0,0,0,.26) 76%, transparent 100%);
  mask-image: linear-gradient(90deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 54%, rgba(0,0,0,.26) 76%, transparent 100%);
}
.home-page .category-ribbon__checker-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,0));
  pointer-events: none;
}
@media (max-width: 767px) {
  .home-page .category-ribbon--checker {
    height: 36px !important;
    margin-bottom: 8px;
  }
  .home-page .category-ribbon__checker-set {
    gap: 10px !important;
  }
  .home-page .category-ribbon__checker-panel {
    width: 82px;
    background-position: 0 0, 14px 14px;
    background-size: 28px 28px;
  }
}
@media (max-width: 430px) {
  .home-page .category-ribbon--checker {
    height: 30px !important;
    margin-bottom: 7px;
  }
  .home-page .category-ribbon__checker-panel {
    width: 68px;
    background-position: 0 0, 12px 12px;
    background-size: 24px 24px;
  }
}

/* ======================================================================
   REV111 · Homepage checker band visibility fix
   Previous masked panels could disappear visually. This override makes the
   checker unmistakably visible while keeping the CTA-inspired language.
   ====================================================================== */
.home-page .category-ribbon--checker {
  height: clamp(42px, 2.9vw, 54px) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.home-page .category-ribbon__track--checker {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  animation: category-copy-marquee-third-reverse 20s linear infinite !important;
}
.home-page .category-ribbon__checker-set {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  gap: 16px !important;
  padding-inline: 0 !important;
}
.home-page .category-ribbon__checker-panel {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(112px, 8.1vw, 146px) !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 4px !important;
  background-color: #f8ead6 !important;
  background-image:
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%),
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%) !important;
  background-position: 0 0, 18px 18px !important;
  background-size: 36px 36px !important;
  background-repeat: repeat !important;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  box-shadow: inset 0 0 0 1px rgba(226, 22, 31, .08) !important;
}
.home-page .category-ribbon__checker-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, transparent 58%, rgba(248,234,214,.18) 72%, #f8ead6 100%);
  pointer-events: none;
}
.home-page .category-ribbon__checker-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,0));
  pointer-events: none;
}
@media (max-width: 767px) {
  .home-page .category-ribbon--checker {
    height: 34px !important;
    margin-bottom: 10px !important;
  }
  .home-page .category-ribbon__checker-set {
    gap: 10px !important;
  }
  .home-page .category-ribbon__checker-panel {
    width: 84px !important;
    background-position: 0 0, 14px 14px !important;
    background-size: 28px 28px !important;
  }
}
@media (max-width: 430px) {
  .home-page .category-ribbon--checker {
    height: 28px !important;
    margin-bottom: 8px !important;
  }
  .home-page .category-ribbon__checker-panel {
    width: 70px !important;
    background-position: 0 0, 12px 12px !important;
    background-size: 24px 24px !important;
  }
}

/* ======================================================================
   REV112 · Homepage checker band continuity fix
   The checker marquee is now a continuous strip per repeated set, removing
   the broken / fragmented panel look while preserving the CTA-like fade.
   ====================================================================== */
.home-page .category-ribbon--checker {
  height: clamp(42px, 2.9vw, 54px) !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
  margin-bottom: 12px !important;
}
.home-page .category-ribbon__track--checker {
  display: flex !important;
  align-items: center !important;
  height: 100% !important;
  animation: category-copy-marquee-third-reverse 20s linear infinite !important;
}
.home-page .category-ribbon__checker-set {
  display: flex !important;
  align-items: center !important;
  flex: 0 0 auto !important;
  height: 100% !important;
  padding-right: 16px !important;
}
.home-page .category-ribbon__checker-strip {
  position: relative !important;
  display: block !important;
  flex: 0 0 auto !important;
  width: clamp(520px, 33vw, 640px) !important;
  height: 100% !important;
  overflow: hidden !important;
  background-color: #f8ead6 !important;
  background-image:
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%),
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%) !important;
  background-position: 0 0, 18px 18px !important;
  background-size: 36px 36px !important;
  background-repeat: repeat !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.42) 82%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 62%, rgba(0,0,0,.42) 82%, transparent 100%) !important;
}
.home-page .category-ribbon__checker-strip::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,0));
  pointer-events: none;
}
@media (max-width: 767px) {
  .home-page .category-ribbon--checker {
    height: 34px !important;
    margin-bottom: 10px !important;
  }
  .home-page .category-ribbon__checker-set {
    padding-right: 10px !important;
  }
  .home-page .category-ribbon__checker-strip {
    width: 300px !important;
    background-position: 0 0, 14px 14px !important;
    background-size: 28px 28px !important;
  }
}
@media (max-width: 430px) {
  .home-page .category-ribbon--checker {
    height: 28px !important;
    margin-bottom: 8px !important;
  }
  .home-page .category-ribbon__checker-set {
    padding-right: 8px !important;
  }
  .home-page .category-ribbon__checker-strip {
    width: 228px !important;
    background-position: 0 0, 12px 12px !important;
    background-size: 24px 24px !important;
  }
}

/* ======================================================================
   REV113 · Homepage checker band redesigned for a cleaner full-width look
   Instead of short fragmented blocks, each repeated set now spans the full
   ribbon width as one continuous checker strip, creating a more premium rail.
   ====================================================================== */
.home-page .category-ribbon--checker {
  position: relative;
  height: clamp(38px, 2.55vw, 46px) !important;
  margin-bottom: 14px !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background: transparent !important;
}
.home-page .category-ribbon__track--checker {
  display: flex !important;
  align-items: stretch !important;
  height: 100% !important;
  width: max-content !important;
  animation: category-copy-marquee-third-reverse 23s linear infinite !important;
}
.home-page .category-ribbon__checker-set {
  display: block !important;
  flex: 0 0 100% !important;
  min-width: 100% !important;
  height: 100% !important;
  padding-right: 0 !important;
}
.home-page .category-ribbon__checker-strip {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 100% !important;
  overflow: hidden !important;
  border-radius: 0 !important;
  background-color: #f8ead6 !important;
  background-image:
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%),
    linear-gradient(45deg, #ff1724 25%, transparent 25%, transparent 75%, #ff1724 75%) !important;
  background-position: 0 0, 20px 20px !important;
  background-size: 40px 40px !important;
  background-repeat: repeat !important;
  -webkit-mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,.30) 88%, transparent 100%) !important;
  mask-image: linear-gradient(90deg, #000 0%, #000 72%, rgba(0,0,0,.30) 88%, transparent 100%) !important;
}
.home-page .category-ribbon__checker-strip::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 55%);
  pointer-events: none;
}
@media (max-width: 767px) {
  .home-page .category-ribbon--checker {
    height: 30px !important;
    margin-bottom: 10px !important;
  }
  .home-page .category-ribbon__checker-strip {
    background-position: 0 0, 14px 14px !important;
    background-size: 28px 28px !important;
  }
}
@media (max-width: 430px) {
  .home-page .category-ribbon--checker {
    height: 26px !important;
    margin-bottom: 8px !important;
  }
  .home-page .category-ribbon__checker-strip {
    background-position: 0 0, 12px 12px !important;
    background-size: 24px 24px !important;
  }
}

/* ======================================================================
   REV114 · Homepage checker ribbon — brief-accurate, continuous + seamless
   The checker rail above the red slogan ribbon uses the Joul red/white
   identity as one uninterrupted two-row band. Background-position animation
   avoids repeated DOM-panel seams and moves opposite the slogan marquee.
   ====================================================================== */
.home-page .category-ribbon--checker {
  position: relative !important;
  display: block !important;
  width: 100% !important;
  height: 48px !important;
  margin-bottom: 10px !important;
  overflow: hidden !important;
  border-radius: clamp(14px, 1.05vw, 18px) !important;
  background: #fff !important;
  box-shadow: 0 8px 20px rgba(105, 13, 16, .08) !important;
  isolation: isolate;
}

.home-page .category-ribbon--checker::before {
  content: "";
  position: absolute;
  z-index: 0;
  inset: 0;
  background-color: #fff;
  background-image: conic-gradient(
    from 90deg,
    var(--joul-red) 25%,
    #fff 0 50%,
    var(--joul-red) 0 75%,
    #fff 0
  );
  background-size: 48px 48px;
  background-position: 0 0;
  background-repeat: repeat;
  animation: joul-home-checker-scroll 2.4s linear infinite;
  will-change: background-position;
}

/* Keep the old repeated checker markup out of layout; the pseudo-element
   above provides a mathematically seamless repeat with no clipped end. */
.home-page .category-ribbon--checker .category-ribbon__track--checker {
  display: none !important;
}

@keyframes joul-home-checker-scroll {
  from { background-position: 0 0; }
  to   { background-position: 48px 0; }
}

@media (max-width: 767px) {
  .home-page .category-ribbon--checker {
    height: 36px !important;
    margin-bottom: 8px !important;
    border-radius: 12px !important;
  }
  .home-page .category-ribbon--checker::before {
    background-size: 36px 36px;
    background-position: 0 0;
    animation-name: joul-home-checker-scroll-tablet;
    animation-duration: 2.2s;
  }
  @keyframes joul-home-checker-scroll-tablet {
    from { background-position: 0 0; }
    to   { background-position: 36px 0; }
  }
}

@media (max-width: 430px) {
  .home-page .category-ribbon--checker {
    height: 32px !important;
    margin-bottom: 7px !important;
    border-radius: 10px !important;
  }
  .home-page .category-ribbon--checker::before {
    background-size: 32px 32px;
    background-position: 0 0;
    animation-name: joul-home-checker-scroll-mobile;
    animation-duration: 2s;
  }
  @keyframes joul-home-checker-scroll-mobile {
    from { background-position: 0 0; }
    to   { background-position: 32px 0; }
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .category-ribbon--checker::before {
    animation: none !important;
  }
}

/* ======================================================================
   REV116 · Product detail hero visual enlargement
   User requested the product image on product-detail pages to feel a bit
   larger both horizontally and vertically without breaking the approved
   premium layout balance.
   ====================================================================== */
.product-detail-page .pd-hero__grid {
  grid-template-columns: minmax(400px, 468px) minmax(0, 1fr);
  column-gap: clamp(26px, 2.8vw, 48px);
}
.product-detail-page .pd-gallery {
  max-width: 468px;
}
.product-detail-page .pd-gallery__stage {
  aspect-ratio: 0.96 / 1;
}

@media (max-width: 1199px) {
  .product-detail-page .pd-hero__grid {
    grid-template-columns: minmax(340px, 410px) minmax(0, 1fr);
    column-gap: 28px;
  }
  .product-detail-page .pd-gallery {
    max-width: 410px;
  }
  .product-detail-page .pd-gallery__stage {
    aspect-ratio: 0.98 / 1;
  }
}

@media (max-width: 900px) {
  .product-detail-page .pd-gallery__stage {
    aspect-ratio: 1.16 / 1;
  }
}

@media (max-width: 600px) {
  .product-detail-page .pd-gallery__stage {
    aspect-ratio: 1 / 1.04;
  }
}

/* ======================================================================
   REV117 · Homepage twin ribbons parity
   User requested the checker ribbon to be a bit larger and for both homepage
   ribbons to share the same visual height, rounded shape and motion speed.
   The red slogan band is used as the master reference.
   ====================================================================== */
.home-page .category-ribbons {
  --home-ribbon-height: clamp(66px, 5vw, 86px);
  --home-ribbon-radius: clamp(16px, 1.25vw, 22px);
  --home-ribbon-gap: 12px;
  --home-ribbon-speed: 25s;
  --home-checker-step: 72px;
}

.home-page .category-ribbon--checker,
.home-page .category-ribbon--solid {
  height: var(--home-ribbon-height) !important;
  border-radius: var(--home-ribbon-radius) !important;
}

.home-page .category-ribbon--checker {
  margin-bottom: var(--home-ribbon-gap) !important;
  background: #fff !important;
  box-shadow: 0 11px 25px rgba(105, 13, 16, .12) !important;
}

.home-page .category-ribbon--checker::before {
  inset: 0 !important;
  background-size: var(--home-checker-step) var(--home-checker-step) !important;
  animation-name: joul-home-checker-scroll-sync !important;
  animation-duration: var(--home-ribbon-speed) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.home-page .category-ribbon--solid .category-ribbon__track--solid {
  animation-duration: var(--home-ribbon-speed) !important;
}

.home-page .category-ribbon--solid {
  box-shadow: 0 11px 25px rgba(105, 13, 16, .14) !important;
}

@keyframes joul-home-checker-scroll-sync {
  from { background-position: calc(var(--home-checker-step) * -1) 0; }
  to   { background-position: 0 0; }
}

@media (max-width: 767px) {
  .home-page .category-ribbons {
    --home-ribbon-height: 58px;
    --home-ribbon-radius: 16px;
    --home-ribbon-gap: 10px;
    --home-checker-step: 58px;
  }
}

@media (max-width: 430px) {
  .home-page .category-ribbons {
    --home-ribbon-height: 50px;
    --home-ribbon-radius: 14px;
    --home-ribbon-gap: 8px;
    --home-checker-step: 50px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .category-ribbon--checker::before,
  .home-page .category-ribbon--solid .category-ribbon__track--solid {
    animation: none !important;
  }
}

/* ======================================================================
   REV118 · Homepage ribbon re-balance after parity attempt
   The previous version made the checker ribbon too tall/heavy. This pass
   keeps the shared system language with the red ribbon, but returns the
   checker band to a slimmer, more premium proportion while preserving
   equal width, matching radius language and synchronized motion speed.
   ====================================================================== */
.home-page .category-ribbons {
  --home-ribbon-speed: 25s;
  --home-ribbon-radius: clamp(16px, 1.25vw, 22px);
  --home-checker-height: clamp(44px, 3.55vw, 58px);
  --home-checker-gap: 12px;
  --home-checker-tile: clamp(44px, 3.55vw, 58px);
}

.home-page .category-ribbon--checker {
  height: var(--home-checker-height) !important;
  margin-bottom: var(--home-checker-gap) !important;
  border-radius: var(--home-ribbon-radius) !important;
  box-shadow: 0 9px 22px rgba(105, 13, 16, .09) !important;
}

.home-page .category-ribbon--checker::before {
  background-size: var(--home-checker-tile) var(--home-checker-tile) !important;
  animation-name: joul-home-checker-scroll-refined !important;
  animation-duration: var(--home-ribbon-speed) !important;
  animation-timing-function: linear !important;
  animation-iteration-count: infinite !important;
}

.home-page .category-ribbon--solid {
  border-radius: var(--home-ribbon-radius) !important;
}

.home-page .category-ribbon--solid .category-ribbon__track--solid {
  animation-duration: var(--home-ribbon-speed) !important;
}

@keyframes joul-home-checker-scroll-refined {
  from { background-position: calc(var(--home-checker-tile) * -1) 0; }
  to   { background-position: 0 0; }
}

@media (max-width: 767px) {
  .home-page .category-ribbons {
    --home-checker-height: 48px;
    --home-checker-gap: 10px;
    --home-checker-tile: 48px;
  }
}

@media (max-width: 430px) {
  .home-page .category-ribbons {
    --home-ribbon-radius: 14px;
    --home-checker-height: 42px;
    --home-checker-gap: 8px;
    --home-checker-tile: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .category-ribbon--checker::before,
  .home-page .category-ribbon--solid .category-ribbon__track--solid {
    animation: none !important;
  }
}

/* ======================================================================
   REV119 · Product-detail CTA cleanup + footer social follow + header IG fix
   + homepage ribbon speed sync
   Requested revisions:
   1) remove fries visual from product-detail CTA and right-anchor the button,
   2) convert footer newsletter area into social/order follow area,
   3) speed up top checker ribbon so it matches the lower ribbon better,
   4) eliminate white padding feel around the header Instagram icon.
   ====================================================================== */

/* 1) Product detail CTA: clean right-aligned CTA with no fries artwork. */
.product-detail-page .pd-menu-cta__inner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 22px 34px;
}
.product-detail-page .pd-menu-cta .button {
  justify-self: end;
}
.product-detail-page .pd-menu-cta__food,
.product-detail-page .pd-menu-cta__inner::after {
  display: none !important;
}
@media (max-width: 1199px) {
  .product-detail-page .pd-menu-cta__inner { padding: 20px 26px; }
}
@media (max-width: 900px) {
  .product-detail-page .pd-menu-cta__inner { padding: 18px 22px; }
}
@media (max-width: 600px) {
  .product-detail-page .pd-menu-cta__inner {
    min-height: 0;
    display: block;
    padding: 20px 18px;
  }
  .product-detail-page .pd-menu-cta .button {
    width: 100%;
    margin-top: 17px;
  }
}

/* 2) Footer newsletter zone becomes social follow zone. */
.site-footer__social-follow p {
  max-width: 360px;
}
.site-footer__follow-grid {
  display: grid;
  gap: 10px;
  margin-top: 16px;
}
.footer-follow-pill {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 0 14px 0 8px;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px;
  color: #fff;
  background: rgba(255,255,255,.05);
  transition: transform .18s ease, border-color .18s ease, background-color .18s ease;
}
.footer-follow-pill:hover {
  transform: translateY(-2px);
  color: #fff;
  border-color: rgba(255,255,255,.28);
  background: rgba(255,255,255,.10);
}
.footer-follow-pill__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  overflow: hidden;
  background: #fff;
}
.footer-follow-pill__mark img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}
.footer-follow-pill__label {
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  transform: translateY(.3px);
}
.footer-follow-pill--instagram .footer-follow-pill__mark {
  background: transparent;
}
.footer-follow-pill--instagram .footer-follow-pill__mark img {
  object-fit: cover;
  transform: scale(1.08);
}
.footer-follow-pill--yemeksepeti:hover {
  border-color: rgba(250,0,80,.42);
  background: rgba(250,0,80,.12);
}
.footer-follow-pill--migros:hover {
  border-color: rgba(255,104,29,.46);
  background: rgba(255,104,29,.13);
}
.footer-follow-pill--instagram:hover {
  border-color: rgba(255,255,255,.32);
  background: rgba(255,255,255,.10);
}

/* 3) Header utility Instagram icon: remove white-space feeling. */
.utility-platform--instagram .utility-platform__mark--image {
  background: transparent;
  box-shadow: none;
}
.utility-platform--instagram .utility-platform__mark--image img {
  object-fit: cover;
  transform: scale(1.08);
}

/* 4) Homepage upper checker ribbon: perceptual speed sync with lower band. */
.home-page .category-ribbon--checker::before {
  animation-duration: 2.2s !important;
}
@media (max-width: 767px) {
  .home-page .category-ribbon--checker::before {
    animation-duration: 2.05s !important;
  }
}
@media (max-width: 430px) {
  .home-page .category-ribbon--checker::before {
    animation-duration: 1.9s !important;
  }
}

/* ======================================================================
   REV120 · Footer mobile completion + featured mobile restructure
   Requested revisions:
   1) remove small social icon under footer brand copy and lengthen copy,
   2) make mobile footer complete instead of overly collapsed,
   3) on mobile, place featured cards as a compact right-side rail next to
      the featured cover/hero, add subtle arrows, center heading,
      and let the checker ribbons fill the corners.
   ====================================================================== */

/* Footer brand column: no small social row anymore. */
.site-footer__brand-column p {
  max-width: 255px;
}
.site-footer__socials {
  display: none !important;
}

/* Mobile / tablet footer should remain complete and readable. */
@media (max-width: 900px) {
  .site-footer__inner {
    width: calc(100% - 32px) !important;
    min-height: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    align-items: start !important;
    gap: 18px !important;
    padding: 28px 0 20px !important;
    text-align: left !important;
  }
  .site-footer__brand-column {
    align-self: start !important;
  }
  .site-footer__logo {
    margin: 0 !important;
  }
  .site-footer__brand-column p {
    display: block !important;
    max-width: 100% !important;
    margin: 16px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.56 !important;
  }
  .site-footer__handwritten,
  .site-footer__stamp {
    display: none !important;
  }
  .site-footer__links,
  .site-footer__contact,
  .site-footer__newsletter {
    display: grid !important;
    padding-left: 0 !important;
    padding-top: 16px !important;
    border-left: 0 !important;
    border-top: 1px solid rgba(255,255,255,.12) !important;
  }
  .site-footer__newsletter {
    grid-column: auto !important;
  }
  .site-footer__signature {
    position: static !important;
    display: block !important;
    width: 132px !important;
    margin-left: auto !important;
    margin-right: 0 !important;
  }
  .site-footer__follow-grid {
    gap: 9px;
  }
  .footer-follow-pill {
    min-height: 44px;
  }
  .site-footer__bottom {
    width: calc(100% - 32px) !important;
    min-height: 0 !important;
    padding: 14px 0 16px !important;
    flex-direction: column-reverse !important;
    align-items: flex-start !important;
    gap: 10px !important;
    text-align: left !important;
  }
  .site-footer__bottom nav {
    justify-content: flex-start !important;
  }
}

@media (max-width: 600px) {
  .site-footer__inner,
  .site-footer__bottom {
    width: calc(100% - 28px) !important;
  }
  .site-footer__bottom nav {
    justify-content: flex-start !important;
    font-size: 10px !important;
  }
}


/* ======================================================================
   REV123 · Featured mobile rail, desktop-safe
   Desktop/tablet markup and layout stay on the approved original structure.
   At <=767px JavaScript temporarily moves the hero + featured cards into one
   horizontal rail; on wider screens the nodes are restored to their original
   parents. This keeps desktop untouched and gives mobile working swipe/arrows.
   ====================================================================== */
@media (max-width: 767px) {
  .home-page .featured-showcase__inner {
    width: calc(100% - 28px) !important;
  }

  .home-page .featured-showcase__top {
    display: block !important;
    min-height: 0 !important;
  }

  .home-page .featured-heading {
    width: 100% !important;
    max-width: none !important;
    margin: 0 auto 18px !important;
    padding-left: 0 !important;
    text-align: center !important;
  }
  .home-page .featured-heading__eyebrow,
  .home-page .featured-heading__title,
  .home-page .featured-heading__copy {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .home-page .featured-heading__title {
    width: max-content !important;
    max-width: 100% !important;
  }
  .home-page .featured-heading__underline {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .home-page .featured-heading__copy {
    max-width: 390px !important;
  }

  /* Mobile request: the hero CTA is omitted. */
  .home-page .featured-hero__cta {
    display: none !important;
  }

  /* Source card row is temporarily emptied by REV123 JS on mobile. */
  .home-page .featured-cards-wrap.is-mobile-rail-source {
    display: none !important;
  }

  .home-page .featured-mobile-rail-shell {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0 0 42px;
  }

  .home-page .featured-mobile-rail {
    width: 100%;
    display: flex;
    align-items: stretch;
    gap: 12px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 0;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    overscroll-behavior-x: contain;
    touch-action: pan-x pan-y;
    -webkit-overflow-scrolling: touch;
  }
  .home-page .featured-mobile-rail::-webkit-scrollbar {
    display: none;
  }

  /* Main cover keeps the approved full mobile size. */
  .home-page .featured-mobile-rail > .featured-hero {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    height: 320px !important;
    min-height: 320px !important;
    margin: 0 !important;
    border-radius: 22px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }

  /* The other featured products are listed to the right of the cover. */
  .home-page .featured-mobile-rail > .featured-card {
    flex: 0 0 min(72vw, 280px) !important;
    width: min(72vw, 280px) !important;
    min-width: min(72vw, 280px) !important;
    height: 320px !important;
    margin: 0 !important;
    border-radius: 20px !important;
    scroll-snap-align: start;
    scroll-snap-stop: always;
  }
  .home-page .featured-mobile-rail > .featured-card .featured-card__body {
    left: 16px !important;
    right: 62px !important;
    bottom: 16px !important;
  }
  .home-page .featured-mobile-rail > .featured-card .featured-card__body h3 {
    font-size: 20px !important;
  }
  .home-page .featured-mobile-rail > .featured-card .featured-card__body p {
    display: block !important;
    font-size: 12.5px !important;
  }
  .home-page .featured-mobile-rail > .featured-card .featured-card__arrow {
    width: 44px !important;
    height: 44px !important;
    right: 12px !important;
    bottom: 13px !important;
    font-size: 24px !important;
  }

  .home-page .featured-mobile-rail-nav {
    position: absolute;
    z-index: 15;
    bottom: 4px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0 0 2px;
    border: 1px solid rgba(58,27,18,.10);
    border-radius: 50%;
    color: #2b160f;
    background: rgba(255,250,241,.96);
    box-shadow: 0 7px 18px rgba(48,16,7,.10);
    font: 400 22px/1 "Red Hat Display", sans-serif;
    cursor: pointer;
    transition: opacity .18s ease, transform .18s ease;
  }
  .home-page .featured-mobile-rail-nav--prev { left: 4px; }
  .home-page .featured-mobile-rail-nav--next { right: 4px; }
  .home-page .featured-mobile-rail-nav:disabled {
    opacity: .30;
    cursor: default;
  }

  /* Both ribbons meet the mobile viewport edges cleanly. */
  .home-page .category-ribbons {
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .home-page .category-ribbon--checker,
  .home-page .category-ribbon--solid {
    border-radius: 0 !important;
  }
}

@media (max-width: 430px) {
  .home-page .featured-mobile-rail > .featured-hero,
  .home-page .featured-mobile-rail > .featured-card {
    height: 300px !important;
    min-height: 300px !important;
  }
  .home-page .featured-mobile-rail > .featured-card {
    flex-basis: min(74vw, 250px) !important;
    width: min(74vw, 250px) !important;
    min-width: min(74vw, 250px) !important;
  }
}

/* ======================================================================
   REV124 · Footer order-channel icon parity + brand copy extension
   Yemeksepeti / Migros marks in the footer now reuse the exact circular
   Y / M mark language used in the top utility header. The brand copy area
   is also allowed a little more width for the extended Joul description.
   ====================================================================== */
.site-footer__brand-column p {
  max-width: 290px;
}
.site-footer__social-follow .footer-follow-pill__mark.utility-platform__mark {
  width: 30px;
  height: 30px;
  flex: 0 0 30px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  line-height: 1;
  overflow: hidden;
}
.site-footer__social-follow .footer-follow-pill__mark.utility-platform__mark--yemeksepeti {
  background: #fa0050;
  font-style: italic;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
.site-footer__social-follow .footer-follow-pill__mark.utility-platform__mark--migros {
  background: #ff681d;
  font-family: Arial, Helvetica, sans-serif;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.14);
}
@media (max-width: 900px) {
  .site-footer__brand-column p {
    max-width: 480px !important;
  }
}

/* ======================================================================
   REV125 · Footer brand copy depth + agency label dimming
   - Keep the CMS-managed brand copy intact, then always append a short
     Joul-specific supporting sentence so the left footer column feels full.
   - Keep the "Reklam Ajansı" link in DOM/layout but make it visually absent,
     as requested.
   ====================================================================== */
.site-footer__brand-copy {
  max-width: 320px !important;
}
.site-footer__brand-extra {
  display: block;
  margin-top: 9px;
  color: rgba(255,255,255,.68);
  font-size: 12.5px;
  line-height: 1.52;
}
.site-footer__agency-link {
  opacity: 0 !important;
}
@media (max-width: 900px) {
  .site-footer__brand-copy {
    max-width: 520px !important;
  }
  .site-footer__brand-extra {
    margin-top: 8px;
    font-size: 12.5px;
  }
}

/* ======================================================================
   REV126 · Hidden agency label remains selectable/copyable
   Opacity:0 made the link visually absent but also caused the label to be
   skipped in the user's drag/copy flow. Keep the real text and link in the
   normal document flow at full opacity, and hide only its glyph paint.
   ====================================================================== */
.site-footer__agency-link,
.site-footer__agency-link:hover,
.site-footer__agency-link:focus,
.site-footer__agency-link:active {
  opacity: 1 !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !important;
  text-shadow: none !important;
}

/* ======================================================================
   REV127 · Featured arrows removed + About dual CTA
   ====================================================================== */
.home-page .featured-card__arrow {
  display: none !important;
}
.home-page .featured-card__body {
  right: 22px;
}

.home-page .home-about-story .about-story__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 26px;
}
.home-page .home-about-story .about-story__actions .about-story__button {
  margin-top: 0;
}
.home-page .home-about-story .about-story__button--secondary {
  min-width: 178px;
  color: #191512;
  border: 1px solid rgba(25,21,18,.18);
  background: #fff;
  box-shadow: none;
}
.home-page .home-about-story .about-story__button--secondary:hover {
  color: var(--joul-red);
  border-color: rgba(var(--joul-red-rgb),.34);
  background: #fffaf4;
  box-shadow: 0 10px 22px rgba(60,20,10,.08);
}
.home-page .home-about-story .about-story__button--secondary .about-story__button-arrow {
  color: var(--joul-red);
}

@media (max-width: 600px) {
  .home-page .home-about-story .about-story__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
    margin-top: 20px;
  }
  .home-page .home-about-story .about-story__actions .about-story__button {
    min-width: 0;
    width: 100%;
    padding-inline: 14px;
  }
  .home-page .featured-card__body {
    right: 18px !important;
  }
}

/* ======================================================================
   REV129 · Mobile drawer contact / channel hub
   Replaces the lone Instagram icon with a structured contact CTA and four
   compact branded channel buttons: Yemeksepeti, GetirYemek, Instagram,
   WhatsApp. Desktop header / navigation is untouched.
   ====================================================================== */
@media (max-width: 900px) {
  body .mobile-menu__socials { display: none !important; }

  body .mobile-menu__connect {
    display: grid !important;
    gap: 12px !important;
    margin: 0 !important;
    padding: 16px 0 0 !important;
    border: 0 !important;
  }

  body .mobile-menu__contact-cta {
    min-height: 50px !important;
    display: grid !important;
    grid-template-columns: 24px minmax(0,1fr) 24px !important;
    align-items: center !important;
    gap: 11px !important;
    padding: 0 16px !important;
    color: #fff !important;
    background: #e30613 !important;
    border: 1px solid #e30613 !important;
    border-radius: 13px !important;
    box-shadow: 0 9px 20px rgba(227,6,19,.14) !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    line-height: 1 !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }
  body .mobile-menu__contact-cta:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 12px 24px rgba(227,6,19,.20) !important;
  }
  body .mobile-menu__contact-cta .drawer-icon {
    width: 21px !important;
    height: 21px !important;
    color: #fff !important;
  }
  body .mobile-menu__contact-arrow {
    justify-self: end !important;
    font-size: 18px !important;
    font-weight: 500 !important;
  }

  body .mobile-menu__channel-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0,1fr)) !important;
    gap: 9px !important;
  }

  body .mobile-menu__channel {
    min-height: 48px !important;
    display: flex !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 7px 10px !important;
    color: #1a1a1a !important;
    background: #fff !important;
    border: 1px solid #e8e2da !important;
    border-radius: 12px !important;
    box-shadow: 0 5px 14px rgba(39,24,15,.035) !important;
    font-size: 12px !important;
    font-weight: 750 !important;
    line-height: 1 !important;
    white-space: nowrap !important;
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease !important;
  }
  body .mobile-menu__channel:hover {
    transform: translateY(-1px) !important;
    border-color: #d8d0c7 !important;
    box-shadow: 0 7px 18px rgba(39,24,15,.07) !important;
  }
  body .mobile-menu__channel > span:last-child {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }

  body .mobile-menu__channel-mark {
    width: 28px !important;
    height: 28px !important;
    flex: 0 0 28px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 13px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
  }
  body .mobile-menu__channel-mark--yemeksepeti {
    background: #fa0050 !important;
    font-style: italic !important;
  }
  body .mobile-menu__channel-mark--getir {
    color: #ffd33d !important;
    background: #5d3fd3 !important;
    font-size: 17px !important;
    text-transform: lowercase !important;
  }
  body .mobile-menu__channel-mark--instagram {
    background: transparent !important;
  }
  body .mobile-menu__channel-mark--instagram img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    transform: scale(1.04) !important;
  }
  body .mobile-menu__channel-mark--whatsapp {
    background: #25d366 !important;
  }
  body .mobile-menu__channel-mark--whatsapp img {
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    filter: brightness(0) invert(1) !important;
  }

  body .mobile-menu__channel--yemeksepeti:hover { border-color: rgba(250,0,80,.30) !important; }
  body .mobile-menu__channel--getir:hover { border-color: rgba(93,63,211,.34) !important; }
  body .mobile-menu__channel--instagram:hover { border-color: rgba(220,40,120,.28) !important; }
  body .mobile-menu__channel--whatsapp:hover { border-color: rgba(37,211,102,.36) !important; }
}

@media (max-width: 430px) {
  body .mobile-menu__connect { padding-top: 14px !important; }
  body .mobile-menu__contact-cta { min-height: 48px !important; border-radius: 12px !important; }
  body .mobile-menu__channel-grid { gap: 8px !important; }
  body .mobile-menu__channel {
    min-height: 46px !important;
    padding-inline: 9px !important;
    font-size: 11.5px !important;
  }
  body .mobile-menu__channel-mark {
    width: 26px !important;
    height: 26px !important;
    flex-basis: 26px !important;
  }
}

/* ======================================================================
   REV130 · Approved premium mobile drawer contact hub
   Visual implementation of the approved concept: section heading + helper
   copy, a premium primary contact CTA, and four compact branded cards with
   title/subtitle/chevron hierarchy. Desktop remains untouched.
   ====================================================================== */
@media (max-width: 900px) {
  body .mobile-menu__connect {
    display: grid !important;
    gap: 14px !important;
    margin: 0 !important;
    padding: 20px 0 2px !important;
    border: 0 !important;
  }

  body .mobile-menu__connect-head {
    display: grid !important;
    justify-items: start !important;
    gap: 0 !important;
    padding: 0 6px !important;
  }
  body .mobile-menu__connect-head h3 {
    margin: 0 !important;
    color: #171717 !important;
    font-size: 22px !important;
    line-height: 1.05 !important;
    font-weight: 900 !important;
    letter-spacing: -.035em !important;
  }
  body .mobile-menu__connect-line {
    width: 38px !important;
    height: 3px !important;
    margin-top: 8px !important;
    border-radius: 999px !important;
    background: #e30613 !important;
  }
  body .mobile-menu__connect-head p {
    max-width: 350px !important;
    margin: 9px 0 0 !important;
    color: #7d7d7d !important;
    font-size: 12.5px !important;
    line-height: 1.45 !important;
    font-weight: 500 !important;
  }

  body .mobile-menu__contact-cta {
    min-height: 70px !important;
    display: grid !important;
    grid-template-columns: 44px minmax(0,1fr) 24px !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 10px 14px 10px 10px !important;
    color: #fff !important;
    background: linear-gradient(135deg,#ef0715 0%,#e30613 62%,#c9000d 100%) !important;
    border: 1px solid rgba(187,0,11,.16) !important;
    border-radius: 16px !important;
    box-shadow: 0 12px 28px rgba(227,6,19,.16) !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease !important;
  }
  body .mobile-menu__contact-cta:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 15px 32px rgba(227,6,19,.22) !important;
  }
  body .mobile-menu__contact-icon {
    width: 42px !important;
    height: 42px !important;
    display: grid !important;
    place-items: center !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,.13) !important;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.08) !important;
  }
  body .mobile-menu__contact-icon .drawer-icon {
    width: 20px !important;
    height: 20px !important;
    color: #fff !important;
  }
  body .mobile-menu__contact-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  body .mobile-menu__contact-copy strong {
    color: #fff !important;
    font-size: 14px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
  }
  body .mobile-menu__contact-copy small {
    overflow: hidden !important;
    color: rgba(255,255,255,.78) !important;
    font-size: 10.5px !important;
    line-height: 1.2 !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body .mobile-menu__contact-arrow {
    justify-self: end !important;
    color: #fff !important;
    font-size: 22px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }

  body .mobile-menu__channel-grid {
    display: grid !important;
    grid-template-columns: repeat(2,minmax(0,1fr)) !important;
    gap: 10px !important;
  }
  body .mobile-menu__channel {
    min-height: 72px !important;
    display: grid !important;
    grid-template-columns: 38px minmax(0,1fr) 14px !important;
    align-items: center !important;
    gap: 9px !important;
    min-width: 0 !important;
    padding: 10px 10px !important;
    color: #171717 !important;
    border-radius: 15px !important;
    box-shadow: 0 7px 20px rgba(35,24,17,.045) !important;
    text-decoration: none !important;
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease !important;
  }
  body .mobile-menu__channel:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 10px 24px rgba(35,24,17,.075) !important;
  }
  body .mobile-menu__channel--yemeksepeti {
    background: linear-gradient(135deg,#fffafb,#fff6f9) !important;
    border: 1px solid rgba(250,0,80,.15) !important;
  }
  body .mobile-menu__channel--getir {
    background: linear-gradient(135deg,#fcfbff,#f7f5ff) !important;
    border: 1px solid rgba(93,63,211,.16) !important;
  }
  body .mobile-menu__channel--instagram {
    background: linear-gradient(135deg,#fffafb,#fff7fb) !important;
    border: 1px solid rgba(220,40,120,.14) !important;
  }
  body .mobile-menu__channel--whatsapp {
    background: linear-gradient(135deg,#fbfffc,#f5fff8) !important;
    border: 1px solid rgba(37,211,102,.18) !important;
  }

  body .mobile-menu__channel-mark {
    width: 38px !important;
    height: 38px !important;
    flex: 0 0 38px !important;
    display: grid !important;
    place-items: center !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    color: #fff !important;
    font-family: Arial, Helvetica, sans-serif !important;
    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1 !important;
    box-shadow: 0 5px 12px rgba(0,0,0,.08) !important;
  }
  body .mobile-menu__channel-mark--yemeksepeti {
    background: #fa0050 !important;
    font-style: italic !important;
  }
  body .mobile-menu__channel-mark--getir {
    color: #ffd72e !important;
    background: #5d3fd3 !important;
    font-size: 22px !important;
    text-transform: lowercase !important;
  }
  body .mobile-menu__channel-mark--instagram {
    background: transparent !important;
    box-shadow: none !important;
  }
  body .mobile-menu__channel-mark--instagram img {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    object-fit: cover !important;
    transform: scale(1.03) !important;
  }
  body .mobile-menu__channel-mark--whatsapp {
    background: #25d366 !important;
  }
  body .mobile-menu__channel-mark--whatsapp svg {
    width: 21px !important;
    height: 21px !important;
    display: block !important;
    fill: #fff !important;
  }

  body .mobile-menu__channel-copy {
    min-width: 0 !important;
    display: grid !important;
    gap: 4px !important;
  }
  body .mobile-menu__channel-copy strong {
    overflow: hidden !important;
    color: #171717 !important;
    font-size: 12px !important;
    line-height: 1.05 !important;
    font-weight: 850 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body .mobile-menu__channel-copy small {
    overflow: hidden !important;
    color: #909090 !important;
    font-size: 9.5px !important;
    line-height: 1.05 !important;
    font-weight: 500 !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
  body .mobile-menu__channel-arrow {
    justify-self: end !important;
    color: #1e1e1e !important;
    font-size: 21px !important;
    line-height: 1 !important;
    font-weight: 400 !important;
  }
  body .mobile-menu__channel--yemeksepeti .mobile-menu__channel-arrow { color: #a80036 !important; }
  body .mobile-menu__channel--getir .mobile-menu__channel-arrow { color: #4f36b9 !important; }
  body .mobile-menu__channel--instagram .mobile-menu__channel-arrow { color: #a51c64 !important; }
  body .mobile-menu__channel--whatsapp .mobile-menu__channel-arrow { color: #148c42 !important; }
}

@media (max-width: 430px) {
  body .mobile-menu__connect {
    gap: 12px !important;
    padding-top: 17px !important;
  }
  body .mobile-menu__connect-head { padding-inline: 4px !important; }
  body .mobile-menu__connect-head h3 { font-size: 20px !important; }
  body .mobile-menu__connect-head p { font-size: 11.5px !important; }
  body .mobile-menu__contact-cta {
    min-height: 66px !important;
    grid-template-columns: 40px minmax(0,1fr) 20px !important;
    gap: 10px !important;
    border-radius: 15px !important;
  }
  body .mobile-menu__contact-icon { width: 38px !important; height: 38px !important; }
  body .mobile-menu__contact-copy strong { font-size: 13.5px !important; }
  body .mobile-menu__contact-copy small { font-size: 9.5px !important; }
  body .mobile-menu__channel-grid { gap: 8px !important; }
  body .mobile-menu__channel {
    min-height: 66px !important;
    grid-template-columns: 34px minmax(0,1fr) 12px !important;
    gap: 8px !important;
    padding: 9px 8px !important;
    border-radius: 13px !important;
  }
  body .mobile-menu__channel-mark {
    width: 34px !important;
    height: 34px !important;
    flex-basis: 34px !important;
    font-size: 14px !important;
  }
  body .mobile-menu__channel-mark--getir { font-size: 20px !important; }
  body .mobile-menu__channel-mark--whatsapp svg { width: 19px !important; height: 19px !important; }
  body .mobile-menu__channel-copy strong { font-size: 11px !important; }
  body .mobile-menu__channel-copy small { font-size: 8.75px !important; }
  body .mobile-menu__channel-arrow { font-size: 18px !important; }
}


/* ========================================================================== */
/* V131 · LIVE POLISH / MOBILE HERO + CTA + ABOUT COLLAGE                     */
/* ========================================================================== */

/* Mobile hero: preserve the desktop right-to-left product entrance. V73/V74
   had later !important positioning rules that made the product visible before
   the dedicated hero-enter state could run. */
@media (min-width: 561px) and (max-width: 820px) {
  .home-page .hero .hero__product {
    opacity: 0 !important;
    transform: translate3d(104px, 6px, 0) scale(.986) !important;
    transition: opacity .78s var(--ease-out) .08s, transform 1.02s var(--ease-out) .08s !important;
    will-change: transform, opacity;
  }
  .home-page .hero.has-hero-entered .hero__product {
    opacity: 1 !important;
    transform: translate3d(0, 0, 0) scale(1) !important;
  }
}

@media (max-width: 560px) {
  .home-page .hero .hero__product {
    opacity: 0 !important;
    transform: translate3d(calc(-50% + 86px), 5px, 0) scale(.986) !important;
    transition: opacity .78s var(--ease-out) .08s, transform 1.02s var(--ease-out) .08s !important;
    will-change: transform, opacity;
  }
  .home-page .hero.has-hero-entered .hero__product {
    opacity: 1 !important;
    transform: translate3d(-50%, 0, 0) scale(1) !important;
  }
}

/* Homepage delivery CTA: channel buttons follow the content's left edge
   instead of centering inside the available row. */
@media (max-width: 820px) {
  .home-page .order-platforms {
    width: min(100%, 430px) !important;
    margin-left: 0 !important;
    margin-right: auto !important;
    text-align: left !important;
  }
  .home-page .order-platforms__grid {
    justify-content: flex-start !important;
    align-items: center !important;
  }
}

/* About page mobile collage: the foreground chicken is intentionally allowed
   to pass the collage boundary into the dark content field, removing the hard
   horizontal crop visible below the image. */
@media (max-width: 760px) {
  .about-page .about-page-story .about-preview__collage {
    overflow: visible !important;
    z-index: 4 !important;
  }
  .about-page .about-page-story .about-preview__content {
    padding-top: 58px !important;
    z-index: 6 !important;
  }
}
@media (max-width: 470px) {
  .about-page .about-page-story .about-preview__content {
    padding-top: 54px !important;
  }
}

@media (prefers-reduced-motion: reduce) and (max-width: 820px) {
  .home-page .hero .hero__product,
  .home-page .hero.has-hero-entered .hero__product {
    opacity: 1 !important;
    transition: none !important;
  }
  .home-page .hero .hero__product {
    transform: none !important;
  }
}
@media (prefers-reduced-motion: reduce) and (max-width: 560px) {
  .home-page .hero .hero__product,
  .home-page .hero.has-hero-entered .hero__product {
    transform: translate3d(-50%, 0, 0) scale(1) !important;
  }
}

/* ========================================================================== */
/* V132 · MOBILE CTA ALIGNMENT / LATE COURIER TRIGGER / ABOUT PLATE FLOAT     */
/* ========================================================================== */

/* Mobile delivery CTA: the channel heading and both platform buttons are a
   centered group. This intentionally supersedes the V131 left-align pass. */
@media (max-width: 820px) {
  .home-page .order-platforms {
    width: min(100%, 430px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
    text-align: center !important;
  }
  .home-page .order-platforms__grid {
    justify-content: center !important;
    align-items: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Joul lezzetiyle tanış: replace the old turntable/360° motion with a gentle
   in-place vertical float so the plate stays readable and feels alive. */
.home-page .home-about-story .about-story__main-burger {
  transform-origin: 50% 56% !important;
  animation: joulPlateSoftFloatV132 4.8s ease-in-out infinite !important;
  will-change: transform;
  backface-visibility: hidden;
}
@keyframes joulPlateSoftFloatV132 {
  0%, 100% { transform: translate3d(0, 4px, 0); }
  50% { transform: translate3d(0, -8px, 0); }
}
.home-page .home-about-story .about-story__visual:hover .about-story__main-burger,
.home-page .home-about-story .about-story__visual:focus-within .about-story__main-burger {
  animation-play-state: running !important;
}

@media (max-width: 760px) {
  .home-page .home-about-story .about-story__main-burger {
    animation-duration: 4.4s !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .home-page .home-about-story .about-story__main-burger {
    animation: none !important;
    transform: none !important;
  }
}