@font-face {
    font-family: 'BakeryGoods';
    src: url('res/fonts/Web-TT/BakeryGoods.woff2') format('woff2'),
         url('res/fonts/Web-TT/BakeryGoods.woff') format('woff'),
         url('res/fonts/OpenType-PS/BakeryGoods.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Mostra testo con font fallback, poi swappa quando caricato */
}

/* FAO design-system body/UI typeface (Open Sans). Declared at document level so
   the light-DOM fish-detail cards (#detail-content) resolve it — the FaoChrome
   bars self-host their own copy inside Shadow DOM. */
@font-face {
    font-family: 'Open Sans';
    font-weight: 400;
    font-display: swap;
    src: url('assets/fonts/OpenSans/OpenSans-400.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 600;
    font-display: swap;
    src: url('assets/fonts/OpenSans/OpenSans-600.woff2') format('woff2');
}
@font-face {
    font-family: 'Open Sans';
    font-weight: 700;
    font-display: swap;
    src: url('assets/fonts/OpenSans/OpenSans-700.woff2') format('woff2');
}

/* Reset and base styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html, body {
    width: 100%;
    height: 100%;
    height: 100dvh; /* Dynamic viewport height for iOS */
    overflow: hidden;
    background-color: #000000;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    -webkit-overflow-scrolling: touch;
    /* Prevent pull-to-refresh on iOS */
    overscroll-behavior: none;
    /* Prevent text selection */
    -webkit-user-select: none;
    user-select: none;
    /* Prevent touch callout */
    -webkit-touch-callout: none;
}

/* FAO chrome layout: vertical flex column — FAO header on top, #app (Pixi canvas
   + overlays) in the middle, FAO footer at the bottom. The bands are fixed-height
   (defaults below; FaoChrome.ts measures and pins the real height). */
:root {
    --fao-header-h: 64px;
    --fao-footer-h: 48px;
}

/* ===========================================================================
   DESIGN TOKENS — single source of truth for color / elevation / radius / motion.
   Consumers below reference these via var(--token, <literal-fallback>) so the
   wiring is reversible and any literal that is not yet tokenised still renders.
   Blues were 6 near-duplicates (#1e3a5f/#284b8a/#2c5aa0/#2a4a6f/#1e3a6e + the
   fish-menu pair); they now resolve to ONE luminance ramp anchored on the
   established active-tab blue #284b8a. The two accent oranges (#f39c12/#f97316)
   collapse to one accent (#f97316, matches the info-page wordmark).
   =========================================================================== */
:root {
    /* primary blue ramp (anchored on #284b8a = old active-tab blue) */
    --fao-primary-900: #15324f;
    --fao-primary-800: #1f4475;
    --fao-primary-700: #284b8a;
    --fao-primary-600: #345aa0;

    /* semantic blues consumed by surfaces (point at the ramp) */
    --fao-blue-900: var(--fao-primary-900); /* was #1e3a5f (cards, close-btn) */
    --fao-blue-800: var(--fao-primary-700); /* was #284b8a (active tab, back pill) */
    --fao-blue-700: var(--fao-primary-700); /* was #2c5aa0 (product page bg) */
    --fao-blue-600: var(--fao-primary-600); /* was #2a4a6f (card hover) */
    --fao-blue-hover: var(--fao-primary-800); /* was #1e3a6e (close-btn hover) */
    --fao-fishmenu-top: var(--fao-primary-700); /* was #2a5a6a */
    --fao-fishmenu-bot: var(--fao-primary-900); /* was #1a4a5a */

    /* single accent (collapses #f39c12 + #f97316) */
    --fao-accent-500: #f97316;
    --fao-accent-600: #ea6a0d;
    --fao-accent-tint: rgba(249, 115, 22, .28); /* was rgba(243,156,18,.3) */

    /* neutrals + light content gradient (verbatim) */
    --fao-tab-idle: #dcdde4;
    --fao-tab-idle-hover: #cfd1db;
    --fao-tab-text: #26334d;
    --fao-tab-text-hover: #1f2a44;
    --fao-content-grad-1: #f0f4f8;
    --fao-content-grad-2: #e8eef5;
    --fao-content-grad-3: #f5f7fa;

    /* elevation / radius / motion dials */
    --fao-elev-1: 0 2px 6px rgba(0, 0, 0, .08);
    --fao-elev-2: 0 4px 20px rgba(0, 0, 0, .08);
    --fao-elev-3: 0 6px 16px rgba(0, 0, 0, .18);
    --fao-radius-sm: 6px;
    --fao-radius-lg: 12px;
    --fao-radius-xl: 16px;
    --fao-radius-2xl: 20px;
    --fao-ease: cubic-bezier(.22, .61, .36, 1);
    --fao-dur-fast: 150ms;
    --fao-dur-med: 220ms;

    /* focus ring */
    --fao-focus-ring: #f97316;
    --fao-focus-contrast: #fff;
    --fao-focus-w: 3px;
    --fao-focus-off: 2px;
}

body {
    display: flex;
    flex-direction: column;
}
#fao-header-host {
    flex: 0 0 var(--fao-header-h);
    height: var(--fao-header-h);
    overflow: hidden;
}
#fao-footer-host {
    flex: 0 0 var(--fao-footer-h);
    height: var(--fao-footer-h);
    overflow: hidden;
}

/* Force landscape orientation message */
@media screen and (orientation: portrait) {
    body::before {
        content: "The Fishmonger";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 100%;
        height: auto;
        background: transparent;
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-family: 'BakeryGoods', cursive;
        font-size: clamp(2rem, 8vw, 4rem);
        z-index: 10000;
        padding: 20px;
        margin-top: -50px;
        white-space: nowrap;
    }
    
    body::after {
        content: "Please rotate your device to landscape mode";
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 90%;
        color: rgba(255, 255, 255, 0.8);
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        font-size: clamp(1rem, 3vw, 1.4rem);
        font-family: Arial, Helvetica, sans-serif;
        z-index: 10000;
        margin-top: 40px;
    }
    
    /* Background overlay. !important beats the inline white background that
       FaoChrome.mount() sets on <body>; without it the white-on-white overlay
       text is invisible in portrait. */
    body {
        position: relative;
        background: #1a3a4a !important;
    }

    body > * {
        visibility: hidden;
    }

    body > *::before,
    body > *::after {
        visibility: visible;
    }

    html {
        background: #1a3a4a;
    }
}

/* Main app container — fills the band between the FAO header/footer bars */
#app {
    width: 100%;
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    /* Safe area support for notch devices  */
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

/* Header styles - transparent overlay */
.header {
    width: 100%;
    height: 100px;
    min-height: 100px;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 20px;
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
    position: absolute;
    top: 0;
    left: 0;
    z-index: 100;
}

.header-left {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding-left: 15px;
    gap: 15px;
    height: 100%;
    /*background-color: pink;*/
}

.header-center {
    width: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /*/background-color: aqua;*/
}

.header-right {
    width: 30%;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: 15px;
    gap: 15px;
    height: 100%;
    /*background-color: pink;*/
}
.header-fishmonger {
    /*Image with this class should expand to max height\width of the container: */
    max-height: 75%;
    max-width: 75%;
    object-fit: contain;
    /* Soft drop-shadow lifts the wordmark off the busy cream wall. */
    filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.45)) drop-shadow(0 1px 1px rgba(0, 0, 0, 0.25));
}

.header-logo {
    height: 60px;
    width: auto;
    max-width: 40%;
    object-fit: contain;

}

.header-fao,
.header-who,
.header-codex {
    height: 70px;
}

.header-heart {
    height: 50px;
}

.header-codex {
    margin-right: 15px;
}

.header-title {
    color: white;
    font-size: 1.2rem;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
}

/* Fullscreen button */
.fullscreen-btn {
    background: rgba(255, 255, 255, 0.2);
    border: 2px solid rgba(255, 255, 255, 0.5);
    color: white;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.3s ease;
}

.fullscreen-btn:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* Close button - squared, goes to homepage */
.close-btn {
    background: var(--fao-blue-900, #1e3a5f);
    border: none;
    color: white;
    width: 32px;
    min-width: 32px;
    height: 32px;
    min-height: 32px;
    aspect-ratio: 1 / 1;
    border-radius: 6px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
}

.close-btn:hover {
    background: var(--fao-blue-600, #2a4a6f);
    transform: scale(1.1);
}

/* Main content area - contains PixiJS canvas */
.main-content {
    width: 100%;
    /* Fill the #app band (between the FAO header/footer), NOT the full viewport.
       100dvh used to overflow #app, clipping the bancone under the footer. */
    height: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* PixiJS container */
#pixi-container {
    width: 100%;
    height: 100%;
    flex: 1;
    position: relative;
    overflow: hidden;
}

#pixi-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* Scene vignette — non-interactive corner darkening + faint bottom gradient
   seating the counter. Focuses the centre and eases the jump to the flatter
   overlays. Sits ABOVE the canvas (z-index:2) but UNDER the header (z-index:100);
   pointer-events:none so it never blocks the basket hit areas. Only covers the
   homepage canvas — the detail/product overlays are siblings, not children. */
#pixi-container::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 2;
    background:
        radial-gradient(120% 90% at 50% 42%, transparent 55%, rgba(20, 12, 6, .28)),
        linear-gradient(180deg, rgba(20, 12, 6, .10), transparent 18%, transparent 86%, rgba(20, 12, 6, .22));
}

/* Horizontal scroll menu */
.fish-menu {
    width: 100%;
    height: 140px;
    background: linear-gradient(180deg, var(--fao-fishmenu-top, #2a5a6a) 0%, var(--fao-fishmenu-bot, #1a4a5a) 100%);
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    /* >=5% lateral gutter on every screen (req: menu leaves >=5% L/R). */
    padding: 10px max(5%, 20px);
    display: none;
    flex-shrink: 0;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.fish-menu::-webkit-scrollbar {
    display: none;
}

.fish-menu.active {
    display: flex;
    gap: 15px;
    align-items: center;
}

.fish-menu-item {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-width: 100px;
    /* < menu inner height so the box + hover lift never clip at the top edge */
    height: 108px;
    /* Flat: no resting panel/shadow under the sprite — sprite sits on the menu
       gradient directly. Hover/selected still give feedback below. */
    background: transparent;
    border-radius: 10px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
}

.fish-menu-item:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-5px);
}

.fish-menu-item.selected {
    /* White selection ring (was orange accent) */
    border-color: #ffffff;
    background: rgba(255, 255, 255, 0.18);
}

.fish-menu-item img {
    width: 60px;
    height: 60px;
    object-fit: contain;
}

.fish-menu-item span {
    color: white;
    font-size: 0.8rem;
    margin-top: 5px;
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    max-width: 90px;
}

/* Detail page overlay */
.detail-page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #b8b7c2; /* Match React FishDetail background */
    z-index: 200;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* ===== FAO coherent typography tokens (match Farmyard infopage) =====
       One body font / size / leading / color, one heading blue. Mobile
       breakpoints rescale text by reassigning --fao-body-size on .detail-content. */
    --fao-body-font: "Open Sans", Arial, sans-serif;
    --fao-text: #000000; /* black */
    --fao-body-size: clamp(15px, 1.7vw, 18px);
    --fao-body-line: 1.7;
    --fao-heading: #1e40af; /* single content-heading blue (retires #3b82f6) */

    /* ===== Lateral safe-area tokens (landscape: notch/inset on either side) =====
       max(5%, min-gap, inset): a >=5% lateral gutter on every screen (req: card
       leaves >=5% L/R), never below 28px, and always clearing the notch/inset. */
    /* iOS 11.0-11.1 */
    --fao-safe-left: max(5%, 28px, constant(safe-area-inset-left));
    --fao-safe-right: max(5%, 28px, constant(safe-area-inset-right));
    /* iOS 11.2+ */
    --fao-safe-left: max(5%, 28px, env(safe-area-inset-left));
    --fao-safe-right: max(5%, 28px, env(safe-area-inset-right));

    /* Fade transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.detail-page.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Detail page header - different from main header */
.detail-page .header {
    position: relative;
    top: auto;
    left: auto;
    flex-shrink: 0;
    /* background: rgba(0, 0, 0, 0.2); */
    font-family: "BakeryGoods", sans-serif; /* Custom font for detail header */
    display: flex !important; /* Always visible, including mobile */
    height: auto;
    min-height: 60px;
    padding: 10px 20px;
    /* Margine top su desktop */
    margin-top: 20px;
    /* Safe area top (notch); lateral via shared tokens, symmetric both sides */
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
    padding-left: var(--fao-safe-left);
    padding-right: var(--fao-safe-right);
}

.detail-page .header-left,
.detail-page .header-right {
    width: 25%; /* Larghezza fissa uguale per bilanciare il centro */
    flex-shrink: 0;
}

.detail-page .header-left {
    justify-content: flex-start;
}

.detail-page .header-right {
    justify-content: flex-end;
}

/* Header fish icon - positioned to the right of the title */
.header-fish-icon {
    height: 80px; /* Dimensione più grande su desktop */
    width: auto;
    max-width: 180px;
    object-fit: contain;
    margin-left: -20px; /* Overlap negativo per sovrapporsi al titolo */
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    /* Warm drop-shadow so icon + wordmark share one light direction. */
    filter: drop-shadow(0 3px 5px rgba(120, 53, 15, 0.30));
}

/* Header center with fish name and icon */
.detail-page .header-center {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0; /* Rimuovo gap per permettere sovrapposizione */
    width: 50%; /* Larghezza fissa per il centro */
    min-width: 0;
    position: relative;
}

.detail-page .header-title {
    /* color FIRST as the fallback — if background-clip:text is unsupported the
       wordmark still renders solid orange (never invisible). */
    color: var(--fao-accent-500, #f97316); /* Orange color like React */
    background: linear-gradient(180deg, #fb923c, var(--fao-accent-500, #f97316) 60%, #ea6a0c);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: clamp(18px, 4vw, 48px); /* Dimensioni più grandi su desktop */
    font-family: "BakeryGoods", sans-serif;
    text-transform: uppercase;
    letter-spacing: 1px;
    text-shadow: 0 1px 1px rgba(120, 53, 15, 0.25);
    white-space: nowrap;
    flex-shrink: 1;
    min-width: 50px;
    position: relative;
    z-index: 2; /* Titolo sopra l'immagine */
}

/* Hide floating close button - we use the tab button now */
.detail-page .mobile-close-btn {
    display: none !important;
}

/* Product Selection Page */
.product-page {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* Was a flat #2c5aa0 slab. Radial top-highlight + vertical deepening pulls
       in the scene teal, and an inset vignette frames the cards — bridges the
       richness gap to the illustrated homepage. Same region/geometry. */
    background:
        radial-gradient(120% 90% at 50% -10%, #3a6cb8, var(--fao-blue-700, #2c5aa0) 42%, #244c8a 100%),
        linear-gradient(180deg, rgba(255, 255, 255, .04), rgba(26, 58, 74, 0) 55%, rgba(26, 58, 74, .45));
    box-shadow: inset 0 0 220px rgba(10, 28, 46, .55);
    z-index: 150;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    /* Fade transition */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.product-page.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.product-page .header {
    background: transparent;
    flex-shrink: 0;
    position: relative;
    top: auto;
    left: auto;
    padding-top: max(10px, env(safe-area-inset-top));
    padding-left: max(20px, env(safe-area-inset-left));
    padding-right: max(20px, env(safe-area-inset-right));
}

/* Product Slideshow Wrapper */
.product-slideshow-wrapper {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
    margin-top: 10px;
    /* Safe area padding for notch devices */
    /* padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right); */
}

/* Slideshow Navigation Buttons */
.slideshow-nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 50px;
    height: 50px;
    /* Frosted glass + inset highlight + soft shadow (was a flat black disc).
       Size/position/translateY preserved — JS opacity toggling still works. */
    background: rgba(20, 40, 66, .45);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.35);
    box-shadow: 0 6px 18px rgba(8, 22, 40, .45), inset 0 1px 0 rgba(255, 255, 255, .25);
    border-radius: 50%;
    color: white;
    font-size: 1.5rem;
    cursor: pointer;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.slideshow-nav:hover {
    background: rgba(245, 165, 36, .85); /* warm-accent hover matches highlighted card */
    border-color: #f5a524;
    transform: translateY(-50%) scale(1.08);
}

.slideshow-nav-left {
    left: max(15px, calc(env(safe-area-inset-left) + 10px));
}

.slideshow-nav-right {
    right: max(15px, calc(env(safe-area-inset-right) + 10px));
}

/* Hide nav buttons on touch devices (optional - they can still scroll) */
@media (hover: none) and (pointer: coarse) {
    .slideshow-nav {
        display: none;
    }

    /* No arrows on touch → feather the wrapper edges so partially-cut cards
       signal "more this way". Mask doesn't affect geometry. */
    .product-slideshow-wrapper {
        -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
        mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    }
}

/* One-time swipe nudge on touch so the carousel telegraphs swipe-ability. */
@media (prefers-reduced-motion: no-preference) and (pointer: coarse) {
    .product-page.active .product-slideshow {
        animation: pp-swipe-hint 1.1s ease .35s 1;
    }
    @keyframes pp-swipe-hint {
        0%, 100% { transform: translateX(0); }
        35% { transform: translateX(-14px); }
    }
}

/* Cards "settle in" when the page activates — final positions identical. */
@media (prefers-reduced-motion: no-preference) {
    .product-page.active .product-card {
        animation: pp-card-in .42s ease both;
    }
    @keyframes pp-card-in {
        from { opacity: 0; transform: translateY(14px) scale(.98); }
        to { opacity: 1; transform: none; }
    }
}

/* Product Slideshow */
.product-slideshow {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 30px;
    padding: 20px 80px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    height: 100%;
}

.product-slideshow::-webkit-scrollbar {
    display: none;
}

.product-card {
    flex-shrink: 0;
    width: 280px;
    height: 70%;
    min-height: 300px;
    max-height: 450px;
    /* Top-lit gradient + inset highlight lip + hairline border + ambient
       drop-shadow give the card real depth. Geometry (size/padding/radius/the
       3px transparent border slot) is unchanged. */
    background: linear-gradient(180deg, #29507f, var(--fao-blue-900, #1e3a5f) 60%, #182f4d);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 10px 24px rgba(8, 22, 40, .45);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
    scroll-snap-align: center;
    position: relative; /* paint anchor for the pedestal ::after — no box change */
}

.product-card:hover {
    background: linear-gradient(180deg, #305d92, var(--fao-blue-600, #2a4a6f) 60%, #1f3b60);
    transform: scale(1.05);
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 16px 34px rgba(8, 22, 40, .5);
}

/* Pedestal floor-glow removed — it drew an elongated contact shadow in the gap
   between the sprite and the name. No ::after. */

/* White selection ring/glow (was warm orange). */
.product-card.highlighted {
    border-color: #ffffff;
    background: linear-gradient(180deg, #305d92, var(--fao-blue-600, #2a4a6f) 60%, #1f3b60);
    transform: scale(1.08);
    box-shadow: 0 0 0 2px rgba(255, 255, 255, .65), 0 0 26px rgba(255, 255, 255, .35), 0 16px 36px rgba(8, 22, 40, .5);
}

.product-card img {
    width: 100%;
    height: 70%;
    object-fit: contain;
    margin-bottom: 15px;
    filter: drop-shadow(0 0 0.75rem rgba(0, 0, 0, 0.4));
    position: relative; /* sit above the pedestal glow */
    z-index: 1;
}

.product-card .product-name {
    color: #fdf6ec; /* warm off-white reads crisper on the new gradient */
    font-size: 1.2rem;
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    font-family: "BakeryGoods", sans-serif;
    text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
    position: relative;
    z-index: 1;
}

/* Responsive adjustments for product page */
@media screen and (max-width: 768px) {
    .header-fishmonger {
        max-height: 40%;
        max-width: 40%;
    }
    
    .product-slideshow {
        padding: 15px 60px;
        gap: 20px;
    }

    .product-card {
        width: 240px;
        min-height: 160px;
        max-height: 240px;
    }

    .product-card .product-name {
        font-size: 1rem;
    }
    
    .slideshow-nav {
        width: 40px;
        height: 40px;
        font-size: 1.2rem;
    }
    
    .slideshow-nav-left {
        left: 10px;
    }
    
    .slideshow-nav-right {
        right: 10px;
    }
}

@media screen and (max-height: 500px) {
    .product-slideshow {
        padding: 10px 60px;
        gap: 15px;
    }

    .product-card {
        width: 220px;
        min-height: 150px;
        max-height: 220px;
    }

    .product-card .product-name {
        font-size: 0.9rem;
    }
}

/* Detail content area - Match React content-display-zone */
.detail-content {
    flex: 1; 
    overflow-y: auto;
    overflow-x: hidden;
    /* Inner reading gutter stays a plain clamp; the lateral safe-area lives on
       the margin so the card clears the notch/edge without double-indenting. */
    padding: clamp(12px, 2vw, 20px) clamp(15px, 3vw, 30px);
    -webkit-overflow-scrolling: touch;
    /* Sfondo gradiente chiaro come nell'immagine di riferimento */
    background: linear-gradient(135deg, var(--fao-content-grad-1, #f0f4f8) 0%, var(--fao-content-grad-2, #e8eef5) 50%, var(--fao-content-grad-3, #f5f7fa) 100%);
    border-radius: 16px; /* Bordi arrotondati su tutti i lati */
    margin: 10px;
    /* Lateral safe-area via shared tokens, symmetric both sides */
    margin-left: var(--fao-safe-left);
    margin-right: var(--fao-safe-right);
    box-shadow: var(--fao-elev-2, 0 4px 20px rgba(0, 0, 0, 0.08));
    display: flex;
    flex-direction: column;
}

/* Tab navigation - Match React TabbedNavigation */
.tab-nav {
    display: flex;
    gap: 8px;
    /* more vertical breathing between header and card; lateral set below to the
       >=5% safe-area gutter so tabs aren't tight to the edges */
    padding: 8px 20px;
    /* Lateral safe-area via shared tokens, symmetric both sides */
    padding-left: var(--fao-safe-left);
    padding-right: var(--fao-safe-right);
    background: transparent;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-shrink: 0;
    align-items: center;
    justify-content: flex-start;
    /* Feather both edges so clipped trailing tabs hint "scroll for more"
       (scrollbar is hidden). Vertical is fully opaque → focus rings/underline
       are not clipped. Plus snap + contained overscroll. */
    -webkit-mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 16px, #000 calc(100% - 16px), transparent);
    overscroll-behavior-x: contain;
    scroll-snap-type: x proximity;
}

.tab-nav::-webkit-scrollbar {
    display: none;
}

.tab-btn {
    /* Subtle top-light gradient (was a flat #dcdde4 that read as pressed/disabled).
       Hairline via INSET box-shadow, not a real border, so the auto-width pill
       does not grow by 2px — geometry identical. */
    background: linear-gradient(180deg, #eceef4, var(--fao-tab-idle, #dcdde4));
    border: none;
    color: var(--fao-tab-text, #26334d);
    padding: 9px 18px; /* 1.5x: was 6px 12px */
    border-radius: 12px; /* 1.5x: was 8px */
    cursor: pointer;
    font-family: 'BakeryGoods', Georgia, serif;
    font-size: 21px; /* 1.5x: was 14px */
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.75px; /* 1.5x: was 0.5px */
    white-space: nowrap;
    transition: all 0.16s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.10), inset 0 0 0 1px rgba(38,51,77,0.10);
    scroll-snap-align: start;
}

.close-tab-btn {
    /* Desaturated slate gradient utility (was the SAME blue as the active tab,
       so back pill + active tab read as two selected tabs). Now clearly a
       different control. */
    background: linear-gradient(180deg, #34507e, #243a5e);
    color: white;
    margin-left: 0; /* No auto margin - positioned first */
    margin-right: 8px; /* Space after close button */
    align-self: center;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 8px 16px;
    border-radius: 20px; /* Bordi arrotondati rettangolari */
    font-size: 1rem;
    gap: 6px;
}

.close-tab-btn svg {
    width: 18px;
    height: 18px;
    transition: transform .16s ease;
}

.close-tab-btn:hover {
    background: linear-gradient(180deg, #3a578a, #284268);
    transform: scale(1.05);
}

/* Chevron nudges back on hover — reinforces "go back". */
.close-tab-btn:hover svg {
    transform: translateX(-2px);
}

.tab-btn:hover {
    background: linear-gradient(180deg, #f3f5fb, #e3e5ee);
    color: var(--fao-tab-text-hover, #1f2a44);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0,0,0,0.18), inset 0 0 0 1px rgba(40,75,138,0.30);
}

.tab-btn.active {
    background: var(--fao-blue-800, #284b8a); /* React deep blue */
    color: #ffffff;
    /* + dark-blue bottom indicator drawn INSIDE the pill: a second "you are
       here" cue beyond fill colour, and disambiguates the active tab from the
       same-blue back pill. */
    box-shadow: 0 5px 12px rgba(40,75,138,0.35), inset 0 -3px 0 var(--fao-primary-900, #15324f);
    transform: translateY(-1px);
}

/* ===========================================================================
   INTERACTION STATES & ACCESSIBILITY
   Net-new, additive rules. Outline/box-shadow paint OUTSIDE the box and
   transforms paint outside the flow, so nothing here reflows. Closes the
   missing :focus-visible (WCAG 2.4.7), reduced-motion (2.3.3) and
   forced-colors (1.4.1) gaps in one pass.
   =========================================================================== */

/* Keyboard focus ring — orange core + white halo so it reads on BOTH the dark
   product page and the light detail card. :focus-visible keeps mouse clicks clean. */
.tab-btn:focus-visible,
.close-tab-btn:focus-visible,
.close-btn:focus-visible,
.product-card:focus-visible,
.document-card:focus-visible,
.slideshow-nav:focus-visible,
.fish-menu-item:focus-visible,
.pdf-image-link:focus-visible,
.fullscreen-btn:focus-visible {
    outline: var(--fao-focus-w, 3px) solid var(--fao-focus-ring, #f97316);
    outline-offset: var(--fao-focus-off, 2px);
    box-shadow: 0 0 0 calc(var(--fao-focus-off, 2px) + var(--fao-focus-w, 3px)) var(--fao-focus-contrast, #fff);
}
.product-card:focus-visible {
    outline-offset: 4px;
}

/* Press feedback — confirms taps where :hover is unreliable (touch). Transform/
   background only; resting geometry unchanged. Preserves each control's own
   resting transform (e.g. slideshow-nav's translateY(-50%)). */
.tab-btn:active { transform: translateY(0) scale(.97); }
.close-btn:active { transform: scale(.94); }
.close-tab-btn:active { transform: scale(.96); }
.slideshow-nav:active { transform: translateY(-50%) scale(.92); }
.product-card:active { transform: scale(1.02); }
.fish-menu-item:active { transform: translateY(-2px) scale(.98); }
.document-card:active { transform: translateY(-1px) scale(.99); }

/* Reduced motion — scoped to the named interactive classes (NOT a blanket *).
   Keep color/shadow/border feedback so affordance survives; only kill movement. */
@media (prefers-reduced-motion: reduce) {
    .product-card,
    .tab-btn,
    .close-btn,
    .close-tab-btn,
    .fish-menu-item,
    .document-card,
    .slideshow-nav,
    .pdf-image-link {
        transition: background .16s ease, color .16s ease, box-shadow .16s ease, border-color .16s ease;
    }
    .product-card:hover,
    .product-card.highlighted,
    .product-card:active,
    .tab-btn:hover,
    .tab-btn:active,
    .tab-btn.active,
    .fish-menu-item:hover,
    .fish-menu-item:active,
    .document-card:hover,
    .document-card:active,
    .pdf-image-link:hover,
    .close-btn:hover,
    .close-btn:active,
    .close-tab-btn:hover,
    .close-tab-btn:active {
        transform: none;
    }
}

/* Windows High Contrast — the OS strips hand-picked fills/shadows, so state
   conveyed only by background/box-shadow vanishes. Re-express with system-color
   outlines (HCM preserves these). Outline-only → collapses into existing padding. */
@media (forced-colors: active) {
    .tab-btn:focus-visible,
    .product-card:focus-visible,
    .document-card:focus-visible,
    .fish-menu-item:focus-visible {
        outline: 3px solid Highlight;
        outline-offset: 2px;
    }
    .tab-btn.active { outline: 2px solid Highlight; outline-offset: -2px; }
    .product-card.highlighted { outline: 3px solid Highlight; outline-offset: -3px; }
    .fish-menu-item.selected { outline: 2px solid Highlight; outline-offset: -2px; }
}

/* Tap-target floor — transparent ::after grows the touch zone toward AA 24px
   while the visible button keeps its compact density. SE-capped further down so
   the overlay never overlaps neighbouring 9px tabs. */
.close-btn,
.close-tab-btn,
.tab-btn {
    position: relative;
}
.close-btn::after,
.close-tab-btn::after,
.tab-btn::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    min-width: 44px;
    min-height: 44px;
    width: 100%;
    height: 100%;
}

/* Inline links inside reading copy — JSON content is HTML-bearing and FAO copy
   hyperlinks Codex refs. Scope OUT the doc/pdf link cards. Inline paint only. */
.content-body a:not(.document-card):not(.pdf-image-link),
.tab-content a:not(.document-card):not(.pdf-image-link) {
    color: var(--fao-heading);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .18em;
    text-decoration-color: color-mix(in srgb, var(--fao-heading) 45%, transparent);
}
.content-body a:not(.document-card):not(.pdf-image-link):hover,
.tab-content a:not(.document-card):not(.pdf-image-link):hover {
    text-decoration-color: var(--fao-heading);
}
.content-body a:focus-visible,
.tab-content a:focus-visible {
    outline: 2px solid var(--fao-heading);
    outline-offset: 2px;
    border-radius: 2px;
}

/* Tab content panels - Match React content-body */
.tab-content {
    display: none;
    color: var(--fao-text);
    font-family: var(--fao-body-font);
    font-size: var(--fao-body-size);
    line-height: var(--fao-body-line);
}

.tab-content.active {
    display: block;
}

/* Heading tier 1 (section title) — BakeryGoods, single blue */
.tab-content h2 {
    font-family: 'BakeryGoods', Georgia, serif;
    color: var(--fao-heading);
    margin-bottom: 15px;
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Heading tier 2 (subsection) — BakeryGoods, single blue */
.tab-content h3 {
    font-family: 'BakeryGoods', Georgia, serif;
    color: var(--fao-heading);
    font-size: clamp(1.05rem, 2.1vw, 1.4rem);
    margin-bottom: clamp(12px, 2vh, 15px);
    margin-top: clamp(18px, 3vh, 25px);
}

.tab-content p {
    line-height: var(--fao-body-line);
    margin-bottom: clamp(12px, 2vh, 16px);
    font-size: var(--fao-body-size);
    color: var(--fao-text);
    font-family: var(--fao-body-font);
    letter-spacing: 0.01em;
}

/* Content body wrapper - Match React content-body */
.content-body {
    font-family: var(--fao-body-font);
    font-size: var(--fao-body-size);
    line-height: var(--fao-body-line);
    color: var(--fao-text);
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Heading tier 1 (section title) — matches .tab-content h2 */
.content-body h3 {
    font-family: 'BakeryGoods', Georgia, serif;
    font-size: clamp(1.3rem, 2.6vw, 1.85rem);
    color: var(--fao-heading);
    margin-bottom: clamp(15px, 2.5vh, 20px);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

/* Heading tier 2 (subsection) — matches .tab-content h3, single blue */
.content-body h4 {
    font-family: 'BakeryGoods', Georgia, serif;
    font-size: clamp(1.05rem, 2.1vw, 1.4rem);
    color: var(--fao-heading);
    margin-bottom: clamp(12px, 2vh, 15px);
    margin-top: clamp(18px, 3vh, 25px);
}

.content-body p {
    margin-bottom: clamp(12px, 2vh, 16px);
    font-size: var(--fao-body-size);
    line-height: var(--fao-body-line);
    color: var(--fao-text);
    letter-spacing: 0.01em;
}

.content-body ul,
.content-body ol {
    margin-bottom: clamp(16px, 2.5vh, 20px);
    padding-left: clamp(28px, 3.5vw, 36px);
    list-style-type: disc;
}

.content-body li {
    margin-bottom: clamp(6px, 1vh, 8px);
    font-size: var(--fao-body-size);
    line-height: var(--fao-body-line);
    color: var(--fao-text);
}

/* ===========================================================================
   READING EXPERIENCE — typography polish only. Line breaks shift; box geometry,
   the .two-column grid and column widths are untouched.
   =========================================================================== */

/* Ragged-right everywhere (guards against any JSON-sourced justify slab) + safe
   wrapping for long scientific terms (e.g. oxytetracycline). */
.tab-content,
.content-body,
.content-body p,
.tab-content p,
.two-column .left-col p,
.two-column .right-col p,
.content-body li,
.video-text-content p {
    text-align: left;
    text-wrap: pretty;
    overflow-wrap: break-word;
    hyphens: manual;
}

/* Comfortable measure on SINGLE-column bodies only — two-column cells excluded
   (already ~half width → capping would leave dead space). Left-anchored: the
   flex column just stops growing, no region moves. */
.content-body > p,
.tab-content > p,
.content-body > ul,
.content-body > ol {
    max-width: 72ch;
}
.video-text-content > p,
.video-text-content > ul {
    /* Fill the text column (desktop wraps it beside the video) — no early wrap at
       ~64ch that left the right half of the card empty. */
    max-width: none;
}

/* Paragraph rhythm + themed (heading-blue) list markers. */
.content-body > :first-child,
.tab-content > :first-child { margin-top: 0; }
.content-body > p:last-child,
.tab-content > p:last-child { margin-bottom: 0; }
.content-body p,
.tab-content p { orphans: 2; widows: 2; }
.content-body ul li::marker,
.content-body ol li::marker,
.video-text-content ul li::marker {
    color: var(--fao-heading);
    font-weight: 700;
}
.content-body li,
.video-text-content li {
    margin-bottom: clamp(8px, 1.3vh, 11px);
}

/* Standfirst lead-in on a tab's first paragraph — size (auto-rescales via the
   body-size token every breakpoint) + colour only. NO border/padding so the
   text start does not shift on the flex child. */
.tab-content > .content-body > p:first-of-type,
.tab-content > .content-body > .two-column .left-col > p:first-of-type {
    font-size: calc(var(--fao-body-size) * 1.08);
    line-height: calc(var(--fao-body-line) - .05);
    color: var(--fao-text);
}

/* Quiet on-brand scrollbar (app hides bars elsewhere; here kept-but-quiet) +
   branded selection + a focus ring following the 16px card radius. Cosmetic. */
.detail-content {
    scrollbar-width: thin;
    scrollbar-color: rgba(40, 75, 138, .35) transparent;
}
.detail-content::-webkit-scrollbar { width: 8px; }
.detail-content::-webkit-scrollbar-thumb {
    background: rgba(40, 75, 138, .35);
    border-radius: 8px;
}
.detail-content ::selection {
    background: color-mix(in srgb, var(--fao-heading) 22%, transparent);
}
.detail-content:focus-visible {
    outline: 2px solid var(--fao-heading);
    outline-offset: -2px;
    border-radius: 16px;
}

/* Video content container */
.video-content-container {
    max-width: 100%;
    margin: 0;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Two-column layout for detailed text - Match React two-col */
.two-column {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: clamp(10px, 3vw, 60px);
    align-items: start;
}

.two-column .left-col {
    flex: 1;
}

.two-column .right-col {
    flex: 1;
}

.two-column .left-col p {
    color: var(--fao-text);
    font-size: var(--fao-body-size);
    font-family: var(--fao-body-font);
    line-height: var(--fao-body-line);
}

/* "The issue" left column: ALWAYS bold across all text — paragraphs, list
   items and inline tags (not just <p>). */
.two-column .left-col,
.two-column .left-col p,
.two-column .left-col li,
.two-column .left-col b,
.two-column .left-col strong,
.two-column .left-col i,
.two-column .left-col em {
    font-weight: 700;
}

.two-column .right-col p {
    font-weight: 400;
    color: var(--fao-text);
    font-size: var(--fao-body-size);
    font-family: var(--fao-body-font);
    line-height: var(--fao-body-line);
}

/* Video content container - Layout video left, text right */
.video-content-container {
    display: flex;
    flex-direction: row;
    gap: clamp(20px, 3vw, 40px);
    align-items: flex-start;
    width: 100%;
}

.video-wrapper {
    flex: 0 0 45%;
    min-width: 280px;
    max-width: 50%;
}

.video-text-content {
    flex: 1;
    min-width: 200px;
}

.video-text-content ul {
    margin: 10px 0;
    padding-left: 20px;
    list-style-type: disc;
}

.video-text-content li {
    margin-bottom: 8px;
    line-height: var(--fao-body-line);
    color: var(--fao-text);
    font-size: var(--fao-body-size);
    font-family: var(--fao-body-font);
}

/* Keep the WHOLE video card text coherent (not just the list): same body face,
   size and leading across paragraphs, list items and inline tags. NOTE: only
   face/size/leading are set here — font-weight/font-style are left untouched so
   <b>/<strong> stay bold and <i>/<em> stay italic per the JSON data. */
.video-text-content,
.video-text-content p,
.video-text-content li,
.video-text-content b,
.video-text-content strong,
.video-text-content i,
.video-text-content em {
    font-family: var(--fao-body-font);
    font-size: var(--fao-body-size);
    line-height: var(--fao-body-line);
    letter-spacing: 0;
}

/* Video container */
.video-container {
    position: relative;
    width: 100%;
    border-radius: 8px;
    overflow: hidden;
    aspect-ratio: 16/9;
    /* Hairline frame + soft shadow + dark letterbox so a clean placeholder
       shows while the iframe loads. border-box keeps the 1px inside. */
    border: 1px solid rgba(37, 58, 69, .12);
    box-shadow: 0 6px 22px rgba(37, 58, 69, .16);
    background: #0e1a20;
}

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
    border-radius: 8px;
}

/* High-res poster facade (lite-youtube): a crisp maxresdefault thumbnail + play
   button shown until the user clicks, then swapped for the autoplay iframe.
   Replaces the bare iframe, whose YouTube-served poster was low-res/grainy. */
.video-facade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: #0e1a20;
    display: block;
}
.video-facade-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.video-facade-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(46px, 13%, 68px);
    aspect-ratio: 68 / 48;
    background: rgba(14, 26, 32, .72);
    border-radius: 16%;
    transition: background .2s ease, transform .2s ease;
}
.video-facade-play::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-35%, -50%);
    border-style: solid;
    border-width: 9px 0 9px 15px;
    border-color: transparent transparent transparent #fff;
}
.video-facade:hover .video-facade-play,
.video-facade:focus-visible .video-facade-play {
    background: #ff0000;
    transform: translate(-50%, -50%) scale(1.06);
}

/* Responsive: keep side-by-side on all screens, just adjust proportions */
@media screen and (max-width: 900px) {
    .video-content-container {
        flex-direction: row;
        gap: 15px;
    }
    
    .video-wrapper {
        flex: 0 0 40%;
        min-width: 150px;
        max-width: 45%;
    }
    
    .video-text-content {
        flex: 1;
        min-width: 0;
        /* No per-element font-size here: size comes from the shared
           --fao-body-size token (see the unified .video-text-content rule) so
           normal / <b> / <i> / <li> all render at the SAME size on mobile. */
    }

    .video-text-content li {
        margin-bottom: 5px;
    }
}

@media screen and (max-width: 500px) {
    .video-content-container {
        gap: 10px;
    }
    
    .video-wrapper {
        flex: 0 0 35%;
        min-width: 120px;
        max-width: 40%;
    }
    /* video text size intentionally left to --fao-body-size (uniform across
       normal / bold / italic / list items) — no per-element overrides here. */
}

/* PDF Viewer container - centered scrollable image */
.pdf-viewer-container {
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: auto;
    padding: 20px;
    width: 100%;
    height: 100%;
    min-height: 100%;
    /* Faint bottom scroll-shadow → long pages hint "more below". */
    background: linear-gradient(to top, rgba(37, 58, 69, .10), rgba(37, 58, 69, 0)) bottom / 100% 28px no-repeat;
}

.pdf-image-link {
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: transform 0.2s ease;
}

.pdf-image-link:hover {
    transform: scale(1.02);
}

.pdf-image {
    max-width: 100%;
    height: auto;
    max-height: 75vh;
    border-radius: 8px;
    /* Crisp paper edge + white backing + deeper shadow on hover. */
    border: 1px solid rgba(37, 58, 69, .14);
    box-shadow: 0 4px 20px rgba(37, 58, 69, .15);
    background: #fff;
    object-fit: contain;
    transition: box-shadow .2s ease;
}

.pdf-image-link:hover .pdf-image {
    box-shadow: 0 10px 30px rgba(37, 58, 69, .22);
}

@media screen and (max-width: 900px) {
    .pdf-viewer-container {
        padding: 10px;
    }
    
    .pdf-image {
        max-height: 70vh;
    }
}

@media screen and (max-width: 500px) {
    .pdf-viewer-container {
        padding: 5px;
    }
    
    .pdf-image {
        max-height: 60vh;
        border-radius: 4px;
    }
}

/* Document grid - Match React document-grid */
.document-grid {
    display: grid;
    /* Massimo 5 per riga su desktop, minimo 220px per card */
    grid-template-columns: repeat(5, 1fr);
    gap: clamp(20px, 3vw, 35px);
    margin-top: clamp(15px, 2vh, 25px);
    align-items: start; /* Align cards from top */
}

.document-card {
    /* No card chrome — QR+thumb pairs sit directly on the detail panel, just
       positioned by the grid (no white surface, border or shadow). padding kept
       so spacing/positions are unchanged. */
    background: transparent;
    border: none;
    border-radius: 14px;
    box-shadow: none;
    padding: clamp(12px, 2vw, 20px);
    cursor: pointer;
    transition: transform 0.3s ease;
    text-decoration: none;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    position: relative; /* anchor for the ↗ cue */
}

.document-card:hover {
    transform: translateY(-3px);
}

/* Quiet "opens in a new tab" cue, brightens on hover/focus. */
.document-card::after {
    content: '\2197';
    position: absolute;
    top: 8px;
    right: 10px;
    color: var(--fao-blue-800, #284b8a);
    opacity: .35;
    transition: opacity .25s ease;
    pointer-events: none;
}
.document-card:hover::after,
.document-card:focus-visible::after {
    opacity: 1;
}

.document-card-images {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    margin-bottom: 6px;
    max-width: 100%;
    overflow: hidden;
    height: 220px; /* Fixed height for alignment */
}

.document-card-images.qr-only {
    justify-content: center;
}

.document-card-images.qr-only .document-qr-code {
    /* Same size as normal QR for consistent alignment */
    width: 160px;
    height: 160px;
    max-width: 90%;
    object-fit: contain;
}

.document-qr-code {
    width: 220px;
    height: 220px;
    max-width: 45%;
    object-fit: contain;
    /* Bare image — no plaque/box/border/shadow (the QR PNG carries its own
       white quiet zone). */
}

.document-preview {
    width: 220px;
    height: 220px;
    max-width: 45%;
    object-fit: contain;
    /* Bare image — no box/border/shadow/background. */
}

.document-label {
    font-family: var(--fao-body-font);
    color: var(--fao-text);
    /* Caption tier (slightly under body, weight 600) + 2-line clamp so every
       caption occupies a predictable height — full text lives on the linked
       page. .document-grid is align-items:start, so capping height only tidies
       rows; no track/gap/column change. */
    font-size: clamp(12px, calc(var(--fao-body-size) - 2px), 15px);
    font-weight: 600;
    line-height: 1.35;
    margin-top: 8px;
    text-wrap: balance;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Responsive adjustments - Match React media queries */
@media screen and (max-width: 1200px) {
    .tab-nav {
        padding: 6px var(--fao-safe-right) 8px var(--fao-safe-left);
    }
    
    .tab-btn {
        padding: 9px 15px; /* 1.5x scaled */
        font-size: 18px; /* 1.5x scaled */
        border-radius: 12px;
    }
    
    .two-column {
        gap: clamp(16px, 3vw, 40px);
    }
    
    .detail-content {
        padding: clamp(10px, 2vw, 18px) clamp(12px, 3vw, 25px);
        margin: 8px;
    }
    
    .detail-page .header {
        margin-top: 10px; /* Margine ridotto su tablet */
    }
    
    /* 4 colonne su schermi medi */
    .document-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: clamp(15px, 2.5vw, 25px);
        /* Same as the <=768 treatment: drop the desktop top margin on tablet /
           landscape phones too — it pushed the first QR row down, opening a dead
           gap under the tabs when Find Out More opened. */
        margin-top: 0;
    }
    
    .document-card-images {
        height: 160px;
    }
    
    .document-qr-code {
        width: 160px;
        height: 160px;
    }
    
    .document-preview {
        width: 160px;
        height: 160px;
    }
    
    .document-card-images.qr-only .document-qr-code {
        width: 130px;
        height: 130px;
    }
}

@media screen and (max-width: 768px) {
    .header {
        height: 100px;
        min-height: 100px;
        padding: 0 10px;
    }
    
    /* Detail page header - no vertical padding on mobile */
    .detail-page .header {
        padding: 0 var(--fao-safe-right) 0 var(--fao-safe-left);
        min-height: 50px;
        margin-top: 5px; /* Margine minimo su mobile */
    }

    .detail-content {
        margin: 5px var(--fao-safe-right) 5px var(--fao-safe-left);
    }
    
    /* 3 colonne su tablet piccoli — modello "cella quadrata uniforme".
       Niente altezze fisse: le QR riempiono la cella, i container si adattano
       all'immagine. Prima le altezze fisse (130px) + max-width 45% rendevano la
       QR più piccola del container, centrata con spazio morto sopra → la prima
       riga appariva "troppo in basso" e le righe erano disallineate. */
    .document-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
        /* Kill the desktop top margin on mobile — it pushed the first QR row
           down for no reason (Find Out More opened cramped at the top). */
        margin-top: 0;
        align-content: start;
    }

    .document-card {
        /* No top/bottom padding or margin — grid rows pack flush on mobile */
        padding: 0 8px;
        margin-top: 0;
        margin-bottom: 0;
    }

    /* Altezza DETERMINISTICA: l'IMMAGINE ha altezza fissa (px), il container la
       avvolge (height:auto) → la cella è alta ESATTAMENTE quanto l'immagine,
       zero spazio sopra/sotto la thumbnail. (Prima aspect-ratio sul container +
       height:100% sulle immagini: in un flex la % d'altezza non si risolve come
       "definita", le immagini tornavano alla dimensione intrinseca → spazio
       morto residuo e prima riga spinta giù.) La height qui sotto è la leva. */
    .document-card-images {
        height: auto;
        gap: 8px;
        margin-bottom: 6px;
        align-items: flex-end;
        justify-content: center;
    }

    .document-card-images .document-qr-code,
    .document-card-images .document-preview {
        flex: 0 1 auto;
        min-width: 0;
        width: auto;
        height: 78px;          /* leva altezza cella — ≤768 (3 colonne) */
        max-width: 48%;
        object-fit: contain;
    }

    /* QR sola: stessa altezza (height:100%), centrata; può usare più larghezza */
    .document-card-images.qr-only .document-qr-code {
        max-width: 100%;
    }

    /* Bare QR (PNG carries its own white quiet zone) — no pad, so it fills the
       cell height like the trimmed thumbnail and the two stay aligned. */
    .document-qr-code {
        padding: 0;
        border-radius: 4px;
    }

    .document-preview {
        border-radius: 6px;
    }

    .document-label {
        font-size: 0.85rem;
    }
    
    .header-fish-icon {
        height: 80px;
        max-width: 140px;
        margin-left: 8px;
    }

    #main-header {
        height: 80px;
        min-height: 80px;
    }

    .header-logo {
        height: 40px;
    }

    .header-title {
        font-size: 0.9rem;
        /* display: none; */
    }

    .fish-menu {
        height: 120px;
    }

    .fish-menu-item {
        min-width: 80px;
        height: 88px;
        /* Slimmer box + tighter label so the sprite + 2-line name fit the content
           box. Before, content overflowed the item and the menu's overflow:hidden
           clipped the sprite's TOP edge. */
        padding: 6px;
    }

    .fish-menu-item img {
        width: 40px;
        height: 40px;
    }

    .fish-menu-item span {
        font-size: 0.7rem;
        line-height: 1.15;
        margin-top: 3px;
    }

    .two-column {
        gap: clamp(8px, 2vw, 20px);
    }

    .tab-btn {
        padding: 6px 12px; /* 1.5x scaled for mobile */
        font-size: 15px; /* 1.5x scaled */
        border-radius: 9px;
    }

    .detail-content {
        padding: 10px 8px;
        margin: 5px var(--fao-safe-right) 0 var(--fao-safe-left);
        /* Rescale ALL body text via the shared token (not just <p>) */
        --fao-body-size: 14px;
        --fao-body-line: 1.5;
    }

    /* On the tight mobile measure, allow auto-hyphenation so long terms break
       cleanly instead of forcing wide gaps. */
    .tab-content,
    .content-body,
    .video-text-content {
        hyphens: auto;
        -webkit-hyphens: auto;
    }

    .tab-content h2 {
        font-size: 1.3rem;
    }

    .video-container {
        max-width: 100%;
    }
}

@media screen and (max-width: 480px) {
    /* Smaller fish menu on phones — items were oversized for the narrow strip
       (this portrait breakpoint had no fish-menu rules, so it inherited the
       tablet-sized 88px/40px items from the <=768 block). */
    .fish-menu {
        height: 104px;
    }

    .fish-menu-item {
        min-width: 70px;
        height: 80px;
        padding: 5px;
    }

    .fish-menu-item img {
        width: 36px;
        height: 36px;
    }

    .fish-menu-item span {
        font-size: 0.64rem;
        margin-top: 3px;
    }

    .tab-nav {
        padding: 4px 8px;
        gap: 4px;
    }

    .tab-btn {
        padding: 5px 9px; /* 1.5x scaled */
        font-size: 12px; /* 1.5x scaled */
        min-width: auto;
        border-radius: 7px;
        letter-spacing: 0.3px;
    }
    
    .two-column {
        gap: 6px;
    }
    
    /* 2 colonne — eredita il modello quadrato dal blocco 768px,
       qui cambia solo numero colonne / gap / testo. */
    .document-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 10px;
    }

    .document-card-images {
        gap: 5px;
        margin-bottom: 5px;
    }

    /* Telefoni (2 colonne): cella ancora più bassa */
    .document-card-images .document-qr-code,
    .document-card-images .document-preview {
        height: 52px;
    }

    .document-label {
        font-size: 0.7rem;
        margin-top: 6px;
        -webkit-line-clamp: 3;
        line-clamp: 3;
    }
}

/* Schermi molto piccoli (iPhone SE, dispositivi compatti) */
@media screen and (max-width: 375px) {
    /* Fish menu: smallest tier for compact phones (iPhone SE etc.). */
    .fish-menu {
        height: 96px;
    }

    .fish-menu-item {
        min-width: 62px;
        height: 72px;
        padding: 4px;
    }

    .fish-menu-item img {
        width: 32px;
        height: 32px;
    }

    .fish-menu-item span {
        font-size: 0.58rem;
        margin-top: 2px;
        max-width: 64px;
    }

    /* 2 colonne strette — eredita il modello quadrato, ritocca solo gap/padding/testo. */
    .document-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }

    .document-card {
        /* No top/bottom padding or margin — pack flush on very small screens */
        padding: 0 6px;
        margin-top: 0;
        margin-bottom: 0;
    }

    .document-card-images {
        gap: 3px;
        margin-bottom: 5px;
    }

    .document-card-images .document-qr-code,
    .document-card-images .document-preview {
        height: 46px;
    }

    .document-label {
        font-size: 0.6rem;
    }
}

@media screen and (max-height: 500px) {
    .header {
        height: 55px;
        min-height: 55px;
    }

    #main-header {
        height: 55px;
        min-height: 55px;
    }

    .header-logo {
        height: 30px;
    }

    .fish-menu {
        height: 100px;
    }

    .fish-menu-item {
        min-width: 70px;
        /* was 85px > (100px menu - 20px padding = 80px inner) -> top border clipped */
        height: 70px;
    }

    .fish-menu-item img {
        width: 40px;
        height: 40px;
    }

    /* Find Out More on short landscape viewports (phones): drive the cell height
       by a small fixed IMAGE height, container wraps it (height:auto). Kills the
       fixed 160px track from the <=1200 block that made cards needlessly tall
       (req: grid items were too tall, ~509px on iPhone 14 -> lower them). */
    .document-card-images {
        height: auto;
        align-items: flex-end;
    }

    .document-card-images .document-qr-code,
    .document-card-images .document-preview {
        width: auto;
        height: 92px;
        max-width: 48%;
        object-fit: contain;
    }

    .document-card-images.qr-only .document-qr-code {
        width: auto;
        height: 92px;
        max-width: 100%;
    }

    .document-card {
        padding: 4px 8px;
    }

    .document-label {
        font-size: 0.8rem;
        margin-top: 6px;
    }
}

/* ==================================================
   DEVICE-SPECIFIC MEDIA QUERIES
   iPhone 5, iPhone 11 Pro Max, iPhone 14 Plus,
   Xiaomi 12, Google Pixel 6 Pro, OnePlus Nord 2
   ================================================== */

/* iPhone 5/SE - Very small landscape (568x320 or similar) */
@media screen and (max-width: 600px) and (max-height: 400px) and (orientation: landscape) {
    .detail-page .header {
        padding: 5px var(--fao-safe-right) 5px var(--fao-safe-left);
        min-height: 45px;
        margin-top: 0;
    }

    .detail-page .header-left,
    .detail-page .header-right {
        width: 20%;
        gap: 5px;
    }
    
    .detail-page .header-center {
        width: 60%;
    }
    
    .detail-page .header-title {
        font-size: 16px;
    }
    
    .header-fish-icon {
        height: 35px;
        max-width: 50px;
        margin-left: -10px;
    }
    
    .tab-nav {
        padding: 3px var(--fao-safe-right) 3px var(--fao-safe-left);
        gap: 3px;
    }

    .tab-btn {
        padding: 4px 7px;
        font-size: 10px;
        border-radius: 6px;
    }
    
    .close-tab-btn {
        padding: 4px 8px;
        font-size: 10px;
    }
    
    .close-tab-btn svg {
        width: 12px;
        height: 12px;
    }
    
    .detail-content {
        margin: 3px var(--fao-safe-right) 3px var(--fao-safe-left);
        padding: 8px;
        border-radius: 10px;
        /* Rescale ALL body text (p/li/columns/video) via the shared token */
        --fao-body-size: 12px;
        --fao-body-line: 1.4;
    }

    .two-column {
        gap: 10px;
    }
}

/* iPhone 11 Pro Max, iPhone 14 Plus, and similar notched devices (812-930 width in landscape) */
@media screen and (min-width: 750px) and (max-width: 950px) and (max-height: 450px) and (orientation: landscape) {
    .detail-page .header {
        padding: 5px var(--fao-safe-right) 5px var(--fao-safe-left);
        min-height: 50px;
        margin-top: 5px;
    }
    
    .detail-page .header-left,
    .detail-page .header-right {
        width: 22%;
        gap: 8px;
    }
    
    .detail-page .header-center {
        width: 56%;
    }
    
    .detail-page .header-title {
        font-size: clamp(18px, 3vw, 28px);
    }
    
    .header-fish-icon {
        height: 50px;
        max-width: 70px;
        margin-left: -15px;
    }
    
    .tab-nav {
        padding: 4px var(--fao-safe-right) 4px var(--fao-safe-left);
        gap: 5px;
        margin-top: 0;
    }
    
    .tab-btn {
        padding: 5px 10px;
        font-size: 13px;
        border-radius: 8px;
    }
    
    .close-tab-btn {
        padding: 5px 10px;
        font-size: 12px;
    }
    
    .detail-content {
        margin: 5px var(--fao-safe-right) 5px var(--fao-safe-left);
        padding: 10px 15px;
        --fao-body-size: 13px;
        --fao-body-line: 1.5;
    }

    .two-column {
        gap: 15px;
    }
}

/* Android devices: Xiaomi 12, Google Pixel 6 Pro, OnePlus Nord 2 (850-950 width in landscape) */
@media screen and (min-width: 800px) and (max-width: 1000px) and (min-height: 350px) and (max-height: 500px) and (orientation: landscape) {
    .detail-page .header {
        padding: 5px var(--fao-safe-right) 5px var(--fao-safe-left);
        min-height: 50px;
        margin-top: 3px;
    }
    
    .detail-page .header-left,
    .detail-page .header-right {
        width: 20%;
        gap: 6px;
    }
    
    .detail-page .header-center {
        width: 60%;
    }
    
    .detail-page .header-title {
        font-size: clamp(16px, 3vw, 26px);
    }
    
    .header-fish-icon {
        height: 45px;
        max-width: 65px;
        margin-left: -12px;
    }
    
    .tab-nav {
        padding: 4px var(--fao-safe-right) 4px var(--fao-safe-left);
        gap: 5px;
        margin-top: 2px;
    }
    
    .tab-btn {
        padding: 5px 10px;
        font-size: 12px;
        border-radius: 8px;
    }
    
    .close-tab-btn {
        padding: 5px 10px;
        font-size: 11px;
    }
    
    .detail-content {
        margin: 5px var(--fao-safe-right) 5px var(--fao-safe-left);
        padding: 10px;
        --fao-body-size: 13px;
        --fao-body-line: 1.5;
    }

    .two-column {
        gap: 12px;
    }
}

/* Wider Android landscape devices (e.g., tablets in landscape or large phones) */
@media screen and (min-width: 950px) and (max-width: 1200px) and (max-height: 550px) and (orientation: landscape) {
    .detail-page .header {
        padding: 8px var(--fao-safe-right) 8px var(--fao-safe-left);
        min-height: 55px;
        margin-top: 5px;
    }
    
    .detail-page .header-left,
    .detail-page .header-right {
        width: 22%;
        gap: 8px;
    }
    
    .detail-page .header-center {
        width: 56%;
    }
    
    .detail-page .header-title {
        font-size: clamp(20px, 3.5vw, 32px);
    }
    
    .header-fish-icon {
        height: 55px;
        max-width: 80px;
        margin-left: -15px;
    }
    
    .tab-nav {
        padding: 5px var(--fao-safe-right) 5px var(--fao-safe-left);
        gap: 6px;
    }

    .tab-btn {
        padding: 6px 12px;
        font-size: 14px;
    }

    .detail-content {
        margin: 8px var(--fao-safe-right) 8px var(--fao-safe-left);
        padding: 12px;
    }
}

/* Safety net: force symmetric lateral safe-area on every landscape orientation,
   regardless of which device breakpoint matched. Single source of truth = tokens. */
@supports (padding-left: env(safe-area-inset-left)) {
    @media screen and (orientation: landscape) {
        .detail-page .header {
            padding-left: var(--fao-safe-left);
            padding-right: var(--fao-safe-right);
        }

        .detail-page .header-left {
            margin-left: 0;
        }

        .tab-nav {
            padding-left: var(--fao-safe-left);
            padding-right: var(--fao-safe-right);
        }

        .detail-content {
            margin-left: var(--fao-safe-left);
            margin-right: var(--fao-safe-right);
        }
    }
}

/* Compact height landscape - reduce vertical spacing */
@media screen and (max-height: 420px) and (orientation: landscape) {
    .detail-page .header {
        margin-top: 2px;
        min-height: 45px;
        padding-top: 3px;
        padding-bottom: 3px;
    }
    
    .tab-nav {
        padding-top: 3px;
        padding-bottom: 3px;
    }
    
    .detail-content {
        margin-top: 3px;
        margin-bottom: 3px;
    }
}

/* Very compact height (iPhone SE, iPhone 5) */
@media screen and (max-height: 350px) and (orientation: landscape) {
    .detail-page .header {
        margin-top: 0;
        min-height: 40px;
        padding-top: 2px;
        padding-bottom: 2px;
    }
    
    .detail-page .header-title {
        font-size: 14px;
    }
    
    .header-fish-icon {
        height: 30px;
        max-width: 45px;
        margin-left: -8px;
    }
    
    .tab-nav {
        padding-top: 2px;
        padding-bottom: 2px;
    }
    
    .tab-btn {
        padding: 3px 6px;
        font-size: 9px;
        /* Flatten to a solid token at 9px — a gradient bands badly this small.
           Stronger text colour for the 4.5:1 floor. */
        background: #e3e4ea;
        color: #1f2a44;
        box-shadow: 0 1px 2px rgba(0, 0, 0, .12);
    }

    /* Thinner active underline so it doesn't dominate a 9px pill. */
    .tab-btn.active {
        box-shadow: 0 2px 6px rgba(40, 75, 138, .3), inset 0 -2px 0 var(--fao-primary-900, #15324f);
    }

    /* Tighten the edge feather so it doesn't eat a whole tiny tab. */
    .tab-nav {
        -webkit-mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
        mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent);
    }

    /* Cap the tap-target overlay so a 44px zone can't bleed over the 9px
       neighbouring tabs / back pill and hijack their taps. */
    .tab-btn::after,
    .close-tab-btn::after {
        min-width: 26px;
        min-height: 26px;
    }

    .close-tab-btn {
        padding: 3px 6px;
    }
    
    .close-tab-btn svg {
        width: 10px;
        height: 10px;
    }
    
    .detail-content {
        margin: 2px var(--fao-safe-right) 2px var(--fao-safe-left);
        padding: 6px;
        --fao-body-size: 11px;
        --fao-body-line: 1.3;
    }
}

/* ==================================================
   DESKTOP FISH DETAIL (>=1024px = project desktop threshold)
   - Card (.detail-content): >=5% lateral gutters + bottom gap from footer
   - Header + buttons: +10% size
   - Tab buttons share the card's 5% lateral margin
   Last in source so it wins over the @supports landscape net + max-width:1200.
   ================================================== */
@media screen and (min-width: 1024px) {
    /* Wider gutters on desktop: ~7% left/right from the page edge, a top gap below
       the tabs and a larger gap above the footer, plus roomier inner padding so
       body text (incl. the video card's right column) isn't tight to the edges. */
    .detail-content {
        margin-left: max(7%, var(--fao-safe-left));
        margin-right: max(7%, var(--fao-safe-right));
        margin-top: clamp(12px, 2vh, 24px);
        margin-bottom: clamp(20px, 3.5vh, 48px);
        padding: clamp(24px, 3vh, 40px) clamp(32px, 4vw, 64px);
    }

    /* Tab buttons aligned to the card edges (same lateral gutter) */
    .tab-nav {
        padding-left: max(7%, var(--fao-safe-left));
        padding-right: max(7%, var(--fao-safe-right));
    }

    /* Header +10% */
    .detail-page .header {
        min-height: 66px; /* 60 -> 66 */
    }

    .detail-page .header-title {
        font-size: clamp(20px, 4.4vw, 53px); /* 18/4vw/48 -> +10% */
    }

    .header-fish-icon {
        height: 88px;     /* 80 -> 88 */
        max-width: 198px; /* 180 -> 198 */
    }

    .detail-page .header-who,
    .detail-page .header-codex {
        height: 77px; /* 70 -> 77 */
    }

    .detail-page .close-btn {
        width: 35px;       /* 32 -> 35 */
        min-width: 35px;
        height: 35px;
        min-height: 35px;
        font-size: 1.32rem; /* 1.2rem -> +10% */
    }

    /* Buttons +10% */
    .tab-btn {
        font-size: 23px;   /* 21 -> 23 */
        padding: 10px 20px; /* 9px 18px -> +10% */
        border-radius: 13px;
    }

    .close-tab-btn {
        font-size: 1.1rem; /* 1rem -> +10% */
        padding: 9px 18px; /* 8px 16px -> +10% */
    }

    .close-tab-btn svg {
        width: 20px;  /* 18 -> +10% */
        height: 20px;
    }
}

/* ===========================================================================
   MOBILE LANDSCAPE (phones). The app is landscape-locked (portrait shows the
   rotate overlay), so these short-height landscape blocks are what real phones
   actually hit. Placed LAST so they win over the device width-band blocks above.
   All gated max-height:600 so tall desktop/tablet landscape is untouched.
   =========================================================================== */

/* Part 1 — Fish-detail TEXT view: larger, centered reading gutter. Scoped to the
   ACTIVE two-column tab — every fish keeps a hidden detailed_text panel in the DOM,
   so :has(.two-column) alone would also pad the QR / video / pdf tabs (and crush the
   QR grid). The :has() re-evaluates on tab switch. */
@media screen and (orientation: landscape) and (max-height: 600px) {
    .detail-content:has(.tab-content.active .two-column) {
        /* First card (detailed_text two-column) used to get oversized side gutters
           (up to 110px) that made it read very differently from the QR/video/pdf
           tabs. Brought in line with the shared mobile padding below, and trimmed
           L/R a touch more so the first card's reading column is a hair tighter. */
        padding: clamp(12px, 3.5vh, 20px) clamp(14px, 3.5vw, 22px);
    }
}

/* Part 1b — Fish-detail card + buttons polish on phones (landscape-locked).
   Placed after Part 1 and after every device width-band block, so for any phone
   (height < 600 in landscape) these win. Tablets (height >= 600) are untouched. */
@media screen and (orientation: landscape) and (max-height: 600px) {
    /* (1) Conform all tabs: one shared inner padding for the card. The first
       (two-column) tab keeps its own slightly-tighter L/R via the :has() rule
       above; QR / video / pdf tabs get this — a touch more breathing than the
       cramped per-device 8-15px they had, so every tab reads the same. */
    .detail-content {
        padding: clamp(12px, 3.5vh, 20px) clamp(16px, 4vw, 26px);
    }

    /* (3) Card + button-menu width -10%. Both the card margin and the tab-nav
       padding read the shared safe-area tokens, so widening the lateral gutter
       (5% -> 9.5% each side: card 90% -> 81% wide) narrows BOTH together, and
       keeps the header aligned to the same edges. */
    .detail-page {
        --fao-safe-left: max(9.5%, 28px, env(safe-area-inset-left));
        --fao-safe-right: max(9.5%, 28px, env(safe-area-inset-right));
    }

    /* (2) Smaller close (X) button. Base is 32px with no mobile override; the
       transparent 44px ::after tap-target keeps it comfortably tappable. */
    .detail-page .close-btn {
        width: 26px;
        min-width: 26px;
        height: 26px;
        min-height: 26px;
        font-size: 1rem;
    }

    /* (4) Tab buttons were clipped by the header: .detail-page .header inherits
       z-index:100, so the header (and its low-hanging fish icon) painted OVER the
       tab-nav row. Lift the tab-nav above the header and add a little clearance so
       the blue menu's buttons stay whole. */
    .detail-page .header {
        z-index: 1;
    }

    .tab-nav {
        position: relative;
        z-index: 2;
        margin-top: 4px;
    }
}

/* Part 2 — Fish menu: smaller items, AUTHORITATIVE (defines every prop so the desktop
   base — 60px img / 0.8rem / 10px pad — can't leak on >768-wide landscape phones and
   overflow the item box → clip the sprite top). Fit-checked for a 2-line label:
   menu inner 88-16=72 >= item 66; item content-box 66-10-4=52 >= 28+2+(9.6*1.05*2)=50.2. */
@media screen and (orientation: landscape) and (max-height: 600px) {
    .fish-menu { height: 88px; padding: 8px max(5%, 20px); }
    .fish-menu.active { gap: 10px; }
    .fish-menu-item { min-width: 60px; height: 66px; padding: 5px; }
    .fish-menu-item img { width: 28px; height: 28px; }
    .fish-menu-item span {
        font-size: 0.6rem;
        line-height: 1.05;
        margin-top: 2px;
        max-width: 64px;
    }
}

/* Very short landscape (iPhone SE / 5, ~320-375 tall) — one tier smaller.
   Fit: menu inner 74-16=58 >= item 56; content-box 56-8-4=44 >= 24+1+(8.64*1*2)=42.3. */
@media screen and (orientation: landscape) and (max-height: 380px) {
    .fish-menu { height: 74px; }
    .fish-menu-item { min-width: 54px; height: 56px; padding: 4px; }
    .fish-menu-item img { width: 24px; height: 24px; }
    .fish-menu-item span {
        font-size: 0.54rem;
        line-height: 1;
        margin-top: 1px;
        max-width: 56px;
    }
}

/* Part 3 — Floating FAO footer when the detail card OVERFLOWS (mobile only).
   main.ts updateDetailFlow() toggles body.detail-flows (SAME max-height:600 gate).
   Footer leaves the flex flow → #app reclaims its 48px and extends to the viewport
   bottom behind the fixed bar, so the card scrolls UNDER it with a squared bottom.
   Short (non-overflowing) tabs never get the class → card stays fully rounded. */
@media screen and (max-height: 600px) {
    body.detail-flows #fao-footer-host {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        height: var(--fao-footer-h);
        height: calc(var(--fao-footer-h) + env(safe-area-inset-bottom, 0px));
        padding-bottom: env(safe-area-inset-bottom, 0px);
        z-index: 300; /* above detail-page(200)/product(150)/header(100); below rotate overlay(10000) */
        background: #fff; /* guard; the real opaque .footer lives in the shadow root */
        box-shadow: 0 -2px 8px rgba(0, 0, 0, 0.18);
    }

    body.detail-flows #detail-content {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
        margin-bottom: 0;
        padding-bottom: calc(var(--fao-footer-h) + env(safe-area-inset-bottom, 0px) + 8px);
    }
}