/* R7.3 — User-approved dish detail layout and home-only language selector.
   No original images or menu data are changed. Loaded after R7.2 styles. */
:root{--dish-hero-navy:#061b28;--gh-bottom-nav-height:68px}

/* Home language chooser only: readable options without adding a selector elsewhere. */
.home-brand .lang-switch{min-height:38px;flex:none;background:#082c3ddd;border:1px solid #adc3caaa}
.home-brand .lang-switch .language-select{min-width:55px;max-width:91px;font-size:11px;font-weight:650;cursor:pointer}

/* Both detail flows share ONE photographic hero, including title and the saved-heart. */
.dish-detail-hero{
  position:relative;isolation:isolate;width:100%;
  height:clamp(282px,calc((100dvh - var(--gh-bottom-nav-height) - env(safe-area-inset-bottom) - env(safe-area-inset-top)) * .55),560px);
  overflow:hidden;background:var(--dish-hero-navy);color:#fcf7ee;
}
.dish-detail-hero-photo{
  position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;
  object-fit:cover;object-position:50% 48%;z-index:0;
}
/* Only extreme image proportions use the original photo, uncropped, on a blurred same-photo backdrop. */
.dish-detail-blurred-backdrop{
  position:absolute;inset:-17px;background-position:center;background-size:cover;
  filter:blur(17px) brightness(.60);z-index:0;transform:scale(1.05);
}
.dish-hero-exception .dish-detail-hero-photo{object-fit:contain;z-index:1}
/* Transparent above food, merging continuously to exactly the info panel's navy at the bottom. */
.dish-detail-hero::after{
  content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(6,27,40,.05) 0%,rgba(6,27,40,0) 36%,rgba(6,27,40,.10) 56%,rgba(6,27,40,.54) 78%,#061b28 100%);
}
.dish-detail-hero::before{
  content:"";position:absolute;inset:0 0 auto;height:94px;z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(4,17,26,.60),transparent);
}
.dish-detail-nav{
  position:absolute;z-index:4;top:max(12px,env(safe-area-inset-top));left:15px;right:15px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.dish-detail-nav>.icon-btn{
  width:43px;height:43px;min-width:43px;flex:none;display:grid;place-items:center;
  background:rgba(5,27,39,.76);border:1px solid #e9d9b18c;color:#fff3e4;
  box-shadow:0 3px 13px #0004;
}
.dish-detail-zoom{
  position:absolute;z-index:4;right:16px;top:max(68px,calc(env(safe-area-inset-top) + 60px));
  width:38px;height:38px;display:grid;place-items:center;border-radius:50%;
  border:1px solid #e1d6bd92;background:#082b3dc9;color:#f9f3e8;
}
.dish-detail-caption{
  position:absolute;z-index:4;left:17px;right:17px;bottom:17px;
  display:flex;align-items:flex-end;justify-content:space-between;gap:13px;
}
.dish-detail-caption .dish-detail-name{
  margin:0;min-width:0;flex:1;overflow-wrap:break-word;
  font:600 clamp(21px,5.3vw,27px)/1.27 var(--serif);color:#fbf7ef;
  text-shadow:0 2px 16px #0006;
}
.dish-detail-caption .save-btn{
  width:47px;height:47px;min-width:47px;flex:0 0 47px;
  border:1px solid #e8d3acb8;background:#082633d6;color:#efcc9a;
  box-shadow:0 3px 14px #0004;
}
.dish-detail-caption .save-btn .icon{width:24px;height:24px}
.dish-detail-caption .save-btn.is-saved{background:#edc999;color:#092531;border-color:#fff0d0}

/* Compact, naturally scrolling information on the same navy canvas, no forced empty 45% panel. */
.page-portion-detail,.page-cooked-detail{background:var(--dish-hero-navy);color:#f8f3e9}
.page-portion-detail .portion-detail,.page-cooked-detail .cooked-detail-r73{
  margin:0;border:0;border-radius:0;background:var(--dish-hero-navy);
  padding:7px 17px 27px;min-height:0;color:#f8f3e9;
}
.page-portion-detail .portion-detail .kicker{
  color:#e5bf86;font-size:12px;line-height:1.55;margin:0 0 5px;
}
.page-portion-detail .portion-detail .big-price{
  color:#f4d098;font:650 20px/1.45 var(--font);margin:4px 0 4px;
}
.page-portion-detail .portion-detail .unit{margin:2px 0 9px;color:#c4d3d7;font-size:13px}
.page-portion-detail .detail-field{margin-top:16px;padding-top:14px;border-top:1px solid #2b4855}
.page-portion-detail .detail-field h2{font:600 18px/1.4 var(--serif);margin:0 0 7px;color:#fbf4e7}
.page-portion-detail .detail-field p{font:400 14px/1.65 var(--font);color:#ccd8dd;margin:0 0 5px}
.page-portion-detail .detail-field.allergy-note{margin-top:17px}
.page-portion-detail .portion-detail .price-vat{margin:15px 0 3px;color:#afc2c9;font-size:12px}
.page-portion-detail .price-table{margin-top:9px}
/* No-photo portion meals still have an honest compact detail header. */
.dish-detail-nohero{position:relative;height:65px;background:var(--dish-hero-navy)}
.dish-detail-nohero .dish-detail-nav{top:12px}
.page-portion-detail .portion-detail.without-photo{padding-top:13px;min-height:0}
.page-portion-detail .without-photo .portion-detail-heading{align-items:center}
.page-portion-detail .without-photo .name{font:600 24px/1.3 var(--serif)}
/* Cooked seafood detail: same hero composition, no duplicate large title or heart below. */
.page-cooked-detail .cooked-detail-r73{padding-top:10px;padding-bottom:31px}
.page-cooked-detail .cooked-price-line{display:flex;align-items:center;min-height:36px;margin-bottom:7px}
.page-cooked-detail .cooked-price-line .detail-price{color:#f4cd94;font:650 19px/1.45 var(--font)}
.page-cooked-detail .cooked-detail-r73 .rule{margin:13px 0 16px;border-color:#35505e}
.page-cooked-detail .cooked-detail-r73 .detail-desc{font:400 14px/1.65 var(--font);color:#cdd7db}
.page-cooked-detail .cooked-detail-r73 .mini-header h2{font-size:18px;color:#f8f3e9}
.page-cooked-detail .cooked-detail-r73 .price-vat{margin:18px 0 0}
/* Content is not covered by the persistent bottom navigation, incl. device safe-area. */
.page-portion-detail,.page-cooked-detail{padding-bottom:calc(10px + env(safe-area-inset-bottom))}
@media(max-width:360px){
  .dish-detail-hero{height:clamp(275px,calc((100dvh - 68px - env(safe-area-inset-bottom)) * .55),500px)}
  .dish-detail-caption{left:13px;right:13px;bottom:15px;gap:8px}
  .dish-detail-caption .dish-detail-name{font-size:21px}
  .dish-detail-caption .save-btn{width:43px;min-width:43px;height:43px;flex-basis:43px}
  .dish-detail-nav{left:12px;right:12px}
  .page-portion-detail .portion-detail,.page-cooked-detail .cooked-detail-r73{padding-left:14px;padding-right:14px}
}
@media(min-width:430px){
  .dish-detail-caption .dish-detail-name{font-size:26px}
}
@media(prefers-reduced-motion:reduce){.dish-detail-hero{scroll-behavior:auto}}