/* The dish stage scales within a readable canvas instead of stretching edge to edge. */
.header-hero-wrapper { height: auto !important; min-height: 0 !important; background-image: url('BG.png'); overflow: hidden !important; }
.header-hero-wrapper main { height: auto !important; min-height: 0 !important; flex: none !important; }
.header-hero-wrapper .hero { display: grid !important; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); align-items: center; gap: clamp(20px, 3vw, 48px); width: 100%; max-width: 1440px; margin-inline: auto; padding: 40px clamp(20px, 3vw, 48px) !important; height: auto !important; min-height: clamp(460px, 65svh, 740px) !important; max-height: none !important; box-sizing: border-box; }
.header-hero-wrapper .hero-copy { display: flex !important; order: initial; width: 100%; max-width: 100%; max-height: none; padding: clamp(18px, 2vw, 28px); margin: 0; transform: none; box-sizing: border-box; }
.hero-copy .hero-dish-title { font-size: clamp(24px, 2vw, 30px); line-height: 1.2; }
.hero-copy .hero-dish-desc { font-size: clamp(16px, 1.2vw, 18px); line-height: 1.5; margin: 12px 0 18px; }
.hero-copy .orange-underline { width: min(100%, 190px); margin: 8px 0 12px; }
.header-hero-wrapper .hero-visual { display: grid !important; grid-template-columns: minmax(0, 1fr) clamp(156px, 14vw, 194px); gap: clamp(16px, 2vw, 28px); align-items: center; order: initial; width: 100% !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0; }
.header-hero-wrapper .circular-hero-wrapper { width: 100%; height: clamp(320px, 48svh, 580px) !important; min-height: 0; max-height: none; overflow: visible; }
.header-hero-wrapper .circular-wheel { width: min(100%, 580px) !important; height: auto !important; aspect-ratio: 1; right: auto; margin: auto; }
.header-hero-wrapper .wheel-slide.active img { transform: scale(1) !important; }
.header-hero-wrapper .wheel-slide[data-index='4'].active img { transform: scale(1.08) !important; }
.header-hero-wrapper .wheel-slide[data-index='6'].active img { transform: scale(.76) !important; }
.header-hero-wrapper .hero-ingredient-note { display: block !important; position: relative; inset: auto; width: 100%; max-width: none; max-height: none; margin: 0; padding: 16px; box-sizing: border-box; transform: rotate(2deg) !important; animation: none !important; }
.header-hero-wrapper .hero-ingredient-note h3 { font-size: 18px; margin-bottom: 8px; }
.header-hero-wrapper .hero-ingredient-list { font-size: 14px; line-height: 1.45; gap: 4px; }
.header-hero-wrapper .hero-ingredient-note-tip { font-size: 12px; line-height: 1.4; margin-top: 8px; }
.header-hero-wrapper .category-strip { flex: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; margin: 0 !important; padding: 14px clamp(16px, 3vw, 40px) 18px !important; }
.header-hero-wrapper .category-list { display: grid !important; grid-template-columns: repeat(6, minmax(0, 1fr)); width: 100%; max-width: 1360px; min-height: 0 !important; gap: 12px; margin-inline: auto; padding: 6px 0 0 !important; overflow: visible !important; }
.header-hero-wrapper .category { width: auto !important; min-width: 0; min-height: 76px !important; padding: 6px !important; box-sizing: border-box; }
.header-hero-wrapper .category b { white-space: normal; text-align: center; }
.header-hero-wrapper .category-strip .round-arrow { display: none; }

/* Preserve the laptop composition at every size: copy | dish | ingredients. */
.header-hero-wrapper .hero-copy,
.header-hero-wrapper .hero-visual,
.header-hero-wrapper .hero-ingredient-note { min-width: 0; }
.header-hero-wrapper .hero-copy { overflow-wrap: anywhere; }
.header-hero-wrapper .hero-ingredient-note { overflow-wrap: anywhere; }
@media (min-width: 1101px) {
 .header-hero-wrapper .circular-wheel { width: min(100%, 48svh, 580px) !important; }
}
@media (max-width: 1100px) {
 .header-hero-wrapper .hero { display: grid !important; grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); align-items: center; gap: clamp(8px, 1.8vw, 20px); min-height: clamp(310px, 52vw, 540px) !important; padding: clamp(22px, 4vw, 40px) clamp(10px, 2.4vw, 26px) !important; }
 .header-hero-wrapper .hero-copy { order: initial; width: 100%; max-width: none; padding: clamp(8px, 1.7vw, 18px); border-radius: clamp(9px, 1.5vw, 16px); }
 .hero-copy .hero-dish-title { font-size: clamp(14px, 2.5vw, 25px); line-height: 1.15; }
 .hero-copy .hero-dish-desc { font-size: clamp(11px, 1.7vw, 17px); line-height: 1.35; margin: clamp(6px, 1vw, 12px) 0; }
 .hero-copy .orange-underline { width: 85%; margin: 5px 0 8px; border-top-width: 2px; }
 .hero-copy .hero-dish-action { gap: clamp(3px, .8vw, 10px); flex-wrap: wrap; }
 .hero-copy .hero-cart-btn { font-size: clamp(10px, 1.5vw, 15px); padding: 4px 6px; gap: 3px; }
 .hero-copy .hero-cart-svg { width: clamp(14px, 2vw, 22px); height: clamp(14px, 2vw, 22px); }
 .hero-copy .heart-doodle { font-size: clamp(18px, 2.8vw, 28px); margin: 0; }
 .hero-copy:before { width: clamp(30px, 6vw, 65px); height: 12px; left: 14px; top: -6px; }
 .header-hero-wrapper .hero-visual { display: grid !important; grid-template-columns: minmax(0, 68fr) minmax(0, 32fr); gap: clamp(5px, 1.3vw, 14px); width: 100% !important; height: auto !important; min-height: 0 !important; align-items: center; }
 .header-hero-wrapper .circular-hero-wrapper { order: initial; width: 100%; height: auto !important; aspect-ratio: 1; }
 .header-hero-wrapper .circular-wheel { width: 100% !important; height: auto !important; aspect-ratio: 1; }
 .header-hero-wrapper .hero-ingredient-note { order: initial; grid-row: auto; width: 100%; max-width: none; margin: 0; padding: clamp(7px, 1.2vw, 14px); transform: none !important; }
 .header-hero-wrapper .hero.show-dish .hero-ingredient-note { visibility: visible !important; }
 .header-hero-wrapper .hero-ingredient-note h3 { font-size: clamp(10px, 1.7vw, 17px); line-height: 1.2; margin-bottom: 5px; }
 .header-hero-wrapper .hero-ingredient-list { display: flex; flex-direction: column; font-size: clamp(9px, 1.35vw, 14px); line-height: 1.35; gap: 3px; }
 .header-hero-wrapper .hero-ingredient-note-tip { font-size: clamp(8px, 1.1vw, 11px); line-height: 1.3; margin-top: 6px; }
 .header-hero-wrapper .hero-ingredient-note .tape { width: 45%; left: 15%; height: 12px; top: -7px; }
 .header-hero-wrapper .category-strip { padding: 10px clamp(8px, 2vw, 20px) 12px !important; }
 .header-hero-wrapper .category-list { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(3px, 1vw, 10px) !important; }
 .header-hero-wrapper .category { min-height: clamp(54px, 9vw, 76px) !important; padding: 4px 2px !important; border-radius: 9px !important; }
 .header-hero-wrapper .category .doodle-icon { width: clamp(24px, 5vw, 48px) !important; height: clamp(25px, 4.5vw, 44px) !important; }
 .header-hero-wrapper .category b { font-size: clamp(8px, 1.4vw, 13px) !important; line-height: 1.2 !important; }
 .header-hero-wrapper .category-strip h2 { font-size: clamp(13px, 2vw, 18px) !important; line-height: 1.2 !important; }
}
.header-hero-wrapper .category-strip .round-arrow { display: none !important; }
/* Phones retain the centered composition with only the dish name and price. */
@media (max-width: 767px) {
 .header-hero-wrapper .hero { grid-template-columns: minmax(0, 30fr) minmax(0, 70fr); min-height: clamp(230px, 58vw, 360px) !important; }
 .header-hero-wrapper .hero-visual { grid-template-columns: minmax(0, 1fr); }
 .header-hero-wrapper .hero-dish-desc,
 .header-hero-wrapper .hero-copy .orange-underline,
 .header-hero-wrapper .hero-copy .heart-doodle,
 .header-hero-wrapper .hero-ingredient-note { display: none !important; }
 .header-hero-wrapper .hero-copy .hero-dish-title { margin-bottom: 12px; }
}