/* GÀNH HÀO R7.4 — Separate authentic sunset welcome from existing explore home.
   Original sunset file media/home-cover.webp contains embedded gold wordmark,
   two original brand lines and handwritten white slogan; do not redraw or edit. */
.app-shell.welcome-active{padding-bottom:0;min-height:100dvh;overflow:hidden}
.page-welcome{position:relative;isolation:isolate;width:100%;height:100dvh;min-height:380px;overflow:hidden;background:#092530;color:#fff}
.welcome-backdrop{position:absolute;inset:-18px;z-index:-1;
  background:url('media/home-cover.webp') center center/cover no-repeat;
  filter:blur(15px) brightness(.70);transform:scale(1.03)}
.welcome-cover{position:absolute;inset:0;display:block;width:100%;height:100%;
  max-width:none;object-fit:contain;object-position:center center;z-index:0}
/* Protect CTA legibility without darkening the original seafood slogan area. */
.page-welcome:after{content:"";position:absolute;z-index:1;left:0;right:0;bottom:0;height:17%;
  background:linear-gradient(to bottom,transparent,rgba(2,17,27,.25) 45%,rgba(2,16,27,.66));pointer-events:none}
.welcome-language{position:absolute;top:calc(9px + env(safe-area-inset-top));right:12px;
  z-index:3;display:flex;align-items:center;gap:3px;padding:4px;
  background:rgba(3,28,42,.77);border:1px solid rgba(241,210,155,.74);
  border-radius:999px;box-shadow:0 4px 15px rgba(0,0,0,.24)}
.welcome-language-option{display:grid;place-items:center;border:0;border-radius:999px;
  min-width:34px;min-height:33px;padding:6px 6px;color:#f7efdf;font:700 11px/1 var(--font);
  background:transparent;letter-spacing:.015em}
.welcome-language-option.active{background:#e8c99b;color:#082632}
.welcome-start-wrap{position:absolute;left:clamp(16px,5vw,28px);right:clamp(16px,5vw,28px);
  bottom:calc(22px + env(safe-area-inset-bottom));z-index:3}
.welcome-start{display:flex;align-items:center;justify-content:center;gap:11px;width:100%;min-height:54px;
  padding:13px 14px;border:1px solid #ecd0a0;border-radius:12px;
  background:rgba(5,30,46,.92);color:#fff0d9;
  font:700 clamp(12px,3.7vw,15px)/1.3 var(--font);letter-spacing:.10em;
  box-shadow:0 6px 18px rgba(0,0,0,.32)}
.welcome-start .icon{stroke-width:1.8}
.welcome-start:active{background:#0d3a4c}
/* Reuse the actual fish and cloche illustrations shown in owner's reference.
   Assets are transparent crops of the owner-supplied design-board screenshot,
   NOT falsely attributed to an original vector asset. */
.path-icon .path-icon-reference{display:block;width:100%;height:100%;max-width:53px;max-height:53px;
  object-fit:contain;filter:none}
.path-card.blue .path-icon,.path-card.gold .path-icon{padding:0;border:0;background:transparent}
/* The rest of R7.3 layouts, colors, dish/video behaviour and bottom navigation remain untouched. */
@media(max-width:360px){
  .welcome-language{right:9px;top:calc(7px + env(safe-area-inset-top))}
  .welcome-language-option{min-width:31px;min-height:31px;font-size:10px}
  .welcome-start-wrap{bottom:calc(14px + env(safe-area-inset-bottom))}
  .welcome-start{min-height:49px}
}
@media(max-height:610px){
  .welcome-start-wrap{bottom:calc(11px + env(safe-area-inset-bottom))}
  .welcome-start{min-height:47px}
}
@media(prefers-reduced-motion:reduce){.page-welcome{animation:none}}

/* R7.4 incremental fix — owner-supplied sunset artwork is intact. Phone ratios
   that can preserve embedded Gành Hào wordmark and slogan are full-bleed. */
@media (max-aspect-ratio: 68/100) and (orientation:portrait) {
  .page-welcome>.welcome-cover{object-fit:cover;object-position:50% 27%}
}
/* On unusually wide/short screens retaining the embedded lettering takes
   precedence over cutting it; original-photo backdrop still fills the sides. */
/* Thumbnails: photograph fills when crop is small; extreme aspect ratios stay
   uncropped over a same-photo background rather than empty dark side bands. */
.portion-row-main .portion-row-media{position:relative;display:block;overflow:hidden;flex:0 0 82px;
  width:82px;height:auto;max-width:82px;border-radius:9px;background:#123a47;
  border:1px solid #34515d;isolation:isolate}
.portion-row-media:before{content:'';position:absolute;inset:-6px;z-index:-1;
  background-image:var(--gh-thumb-background);background-size:cover;background-position:center;
  filter:blur(5px) saturate(.85);opacity:.92}
.portion-row-main .portion-row-media>.portion-row-photo{display:block;width:100%;height:auto;max-height:100px;max-width:none;
  border:0;border-radius:0;object-fit:contain;background:transparent;position:relative;z-index:1}
.portion-row-main .portion-row-media.thumb-safe-cover>.portion-row-photo{object-fit:cover}
.portion-row-main .portion-row-media>.photo-absent.portion-row-photo{height:82px;max-height:none;background:#173746}
/* Additional source-approved pictures never replace an existing hero/thumbnail. */
.zcx-extra-gallery{display:flex;justify-content:flex-start;margin:13px 0 5px}
.zcx-extra-open{position:relative;display:block;border:1px solid #415c66;border-radius:10px;
  padding:0;background:#143746;color:#f7f3ec;overflow:hidden;max-width:190px;text-align:left}
.zcx-extra-img{display:block;width:180px;height:126px;max-width:100%;object-fit:contain}
.zcx-extra-open>span{display:flex;align-items:center;gap:5px;padding:6px 8px;font-size:11px}
@media(max-width:360px){.portion-row-main .portion-row-media{flex-basis:70px;width:70px;max-width:70px}.portion-row-main .portion-row-media>.portion-row-photo{max-height:86px}.portion-row-main .portion-row-media>.photo-absent.portion-row-photo{height:70px}}
/* When a short/wide phone would otherwise place the embedded slogan behind the
   unchanged CTA, maintain the artwork within a ~0.58-width/height safe frame.
   The exact same photo fills both side edges; no empty dark gutters are drawn. */
@media (min-aspect-ratio: 58/100) {
  .page-welcome>.welcome-cover{
    width:min(100%,54dvh);left:50%;right:auto;
    transform:translateX(-50%);object-fit:cover;object-position:50% 27%;
    -webkit-mask-image:linear-gradient(to right,transparent,black 7%,black 93%,transparent);
    mask-image:linear-gradient(to right,transparent,black 7%,black 93%,transparent);
  }
  .welcome-backdrop{filter:blur(8px) brightness(.97)}
}

/* R7.4 icon replacement: owner-supplied PNGs for bottom navigation only. */
.bottom-nav .nav-btn .icon.icon-image{display:block;width:21px;height:21px;flex:0 0 21px;
  background-color:currentColor;background-repeat:no-repeat;background-position:center;background-size:contain;
  -webkit-mask-repeat:no-repeat;-webkit-mask-position:center;-webkit-mask-size:contain;
  mask-repeat:no-repeat;mask-position:center;mask-size:contain}
.bottom-nav .nav-btn .icon-image.nav-icon-fish{-webkit-mask-image:url('brand/nav-fish-chatgpt-tight.png');mask-image:url('brand/nav-fish-chatgpt-tight.png')}
.bottom-nav .nav-btn .icon-image.nav-icon-cloche{-webkit-mask-image:url('brand/nav-cloche-chatgpt-tight.png');mask-image:url('brand/nav-cloche-chatgpt-tight.png')}

/* R79: transparent whitespace removed from masks (source PNGs retained). 2 NAV icons only. */
.bottom-nav .nav-btn .icon.icon-image {width:26px;height:24px;flex:0 0 24px;}
/* Decorative icons were removed from markup only in category and prep components. */
.portion-cat .category-top {gap:0;}
.prep-chip {gap:0;}