/* web-home.css — home web (hero Netflix-style, preview on-hover, frecce
   rail). Caricato dalla shell web, quindi anche dentro l'app Capacitor.
   L'hero usa lo STESSO markup ovunque (web-hero.js): sopra i 992px il
   layout e' la card cinematografica panoramica, sotto quello dell'app
   Netflix (locandina verticale + azioni sotto l'artwork). */

@media (min-width: 992px) {

    /* ---------------- HERO ---------------- */
    .ty-hero-wrap {
        position: relative;
        max-width: 1400px;
        margin: 0 auto 34px;
        padding: 0 24px;
    }
    .ty-hero-wrap.ty-hero-first { margin-top: 0; padding-top: 4px; }

    /* cinema light: glow ambientale dietro la card (immagine di fallback +
       doppio canvas che campiona il trailer, crossfade gestito dal JS) */
    .ty-hero-glow,
    .ty-hero-glow-canvas {
        position: absolute;
        top: -4%;
        left: 0;
        width: 100%;
        height: 108%;
        object-fit: cover;
        filter: blur(100px);
        opacity: .45;
        z-index: 0;
        pointer-events: none;
        transition: opacity 1.4s ease;
    }
    .ty-hero,
    .ty-hero-slider .swiffy-slider {
        position: relative;
        z-index: 1;
    }

    .ty-hero {
        position: relative;
        width: 100%;
        aspect-ratio: 21 / 9;
        max-height: 74vh;
        border-radius: 18px;
        overflow: hidden;
        background: #000;
        cursor: pointer;
        box-shadow: 0 18px 48px rgba(0, 0, 0, .45);
    }

    .ty-hero-media,
    .ty-hero-media img.ty-hero-backdrop,
    .ty-hero iframe.ty-hero-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
    }
    .ty-hero-media img.ty-hero-backdrop {
        object-fit: cover;
        transition: opacity .6s ease;
    }
    /* le etichette dei soft button appartengono al layout mobile: qui i
       bottoni secondari restano icone */
    .ty-hero-btn-label { display: none; }
    .ty-hero iframe.ty-hero-frame {
        border: 0;
        pointer-events: none;   /* click sull'hero, controlli propri sopra */
        opacity: 0;
        transition: opacity .6s ease;
    }
    .ty-hero.ty-hero-playing iframe.ty-hero-frame { opacity: 1; }
    .ty-hero.ty-hero-playing img.ty-hero-backdrop { opacity: 0; }

    .ty-hero-scrim {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(to top, rgba(0, 0, 0, .88) 0%, rgba(0, 0, 0, .25) 38%, rgba(0, 0, 0, 0) 60%),
            linear-gradient(to right, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, 0) 55%);
        pointer-events: none;
    }

    .ty-hero-info {
        position: absolute;
        left: 44px;
        bottom: 40px;
        max-width: 46%;
        z-index: 2;
        color: #fff;
    }
    .ty-hero-logo {
        max-height: 120px;
        max-width: 380px;
        display: block;
        margin-bottom: 14px;
        filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .5));
    }
    .ty-hero-title {
        color: #fff;
        font-size: 44px;
        font-weight: 800;
        line-height: 1.05;
        margin: 0 0 12px;
        text-shadow: 0 3px 16px rgba(0, 0, 0, .6);
    }
    .ty-hero-meta {
        margin-bottom: 10px;
        font-size: 14px;
        opacity: .95;
    }
    .ty-hero-meta * { color: #fff; }
    .ty-hero-desc {
        color: #fff;
        font-size: 15.5px;
        line-height: 1.5;
        opacity: .92;
        margin: 0 0 18px;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-shadow: 0 2px 10px rgba(0, 0, 0, .5);
    }

    .ty-hero-actions {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .ty-hero-btn {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        height: 44px;
        padding: 0 22px;
        border-radius: 10px;
        font-size: 15.5px;
        font-weight: 700;
        cursor: pointer;
        white-space: nowrap;
        transition: transform .12s ease, background .15s ease;
        width: auto !important;
    }
    .ty-hero-btn:hover { transform: scale(1.03); }
    .ty-hero-btn-play {
        background: #fff;
        color: #000 !important;
    }
    .ty-hero-btn-play i { font-size: 22px; }
    .ty-hero-btn-soft {
        background: rgba(90, 90, 90, .55);
        color: #fff !important;
        backdrop-filter: blur(4px);
    }
    .ty-hero-btn-soft:hover { background: rgba(110, 110, 110, .65); }

    .ty-hero-controls {
        position: absolute;
        right: 26px;
        bottom: 36px;
        z-index: 3;
        display: flex;
        gap: 10px;
    }
    /* stesso vetro liquido dei bottoni circolari del mobile
       (.header-back-liquid / .button-round di mobile.css): niente bordo
       disegnato, il contorno è il bordo-luce interno del vetro */
    .ty-hero-ctrl {
        width: 42px;
        height: 42px;
        border-radius: 50%;
        border: 0;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 19px;
        cursor: pointer;
        background: rgba(30, 30, 34, .55);
        backdrop-filter: blur(36px) saturate(160%);
        -webkit-backdrop-filter: blur(36px) saturate(160%);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .08),
            inset 0 1px 0 -0.5px rgba(255, 255, 255, .18),
            0 6px 18px -8px rgba(0, 0, 0, .6);
        transition: background .2s ease, transform .18s ease;
    }
    .ty-hero-ctrl:hover { background: rgba(60, 60, 66, .62); }
    .ty-hero-ctrl:active { transform: scale(.9); }

    /* slideshow: una slide per volta, indicatori in basso */
    .ty-hero-slider .swiffy-slider { --swiffy-slider-item-count: 1; }
    .ty-hero-slider .slider-container { gap: 24px; }
    .ty-hero-slider .ty-hero-slide { overflow: visible; }
    .ty-hero-slider .slider-indicators {
        bottom: 8px;
    }

    /* ---------------- FRECCE RAIL ---------------- */
    /* le frecce sono iniettate da web-hero.js. Sulle rail stanno FUORI
       dalle card (gutter laterale dedicato) e compaiono solo all'hover
       del carousel; sull'hero restano interne ai bordi. */
    /* frecce moderne: hit-area a TUTTA ALTEZZA (com'era), ma visivamente
       solo un chip circolare scuro attorno alla freccia, centrato in
       verticale (disegnato con un radial-gradient sul bottone) */
    .sectionContainer .swiffy-slider .slider-nav {
        opacity: 0 !important;
        transition: opacity .2s ease;
        z-index: 5;
        top: 0 !important;
        bottom: 0 !important;
        transform: none !important;
        width: 44px !important;
        border-radius: 0;
        border: none;
        background:
            radial-gradient(circle at center,
                rgba(15, 15, 15, .68) 0 18px,
                rgba(255, 255, 255, .25) 18px 19px,
                transparent 19.5px) !important;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0 !important;
        margin: 0 !important;
        filter: none !important;
    }
    .sectionContainer .swiffy-slider .slider-nav::before,
    .sectionContainer .swiffy-slider .slider-nav::after {
        width: 18px !important;
        height: 18px !important;
    }
    .sectionContainer .swiffy-slider .slider-nav:hover {
        background:
            radial-gradient(circle at center,
                rgba(50, 50, 50, .95) 0 18px,
                rgba(255, 255, 255, .5) 18px 19px,
                transparent 19.5px) !important;
    }
    .sectionContainer .swiffy-slider:hover .slider-nav {
        opacity: 1 !important;
    }

    /* rail: chip nel gutter interno del 3% (fuori dalle card, a schermo) */
    .liveHorizontalListVideo .swiffy-slider .slider-nav,
    .sectionHomeListCategories .swiffy-slider .slider-nav {
        left: 4px;
        right: auto;
    }
    .liveHorizontalListVideo .swiffy-slider .slider-nav.slider-nav-next,
    .sectionHomeListCategories .swiffy-slider .slider-nav.slider-nav-next {
        left: auto;
        right: 4px;
    }

    /* hero slideshow: frecce a cavallo del bordo della card, dentro il
       padding del wrap (24px) così restano sempre visibili */
    .ty-hero-slider .swiffy-slider {
        overflow: visible;
    }
    .ty-hero-slider .swiffy-slider .slider-nav {
        left: -14px;
        right: auto;
        width: 40px;
        justify-content: center;
    }
    .ty-hero-slider .swiffy-slider .slider-nav.slider-nav-next {
        left: auto;
        right: -14px;
    }

    /* ---------------- PREVIEW ON-HOVER (TyPeek) ---------------- */
    #ty-peek {
        position: fixed;
        z-index: 1500;
    }
    .ty-peek-card {
        border-radius: 12px;
        overflow: hidden;
        background: #181818;
        box-shadow: 0 18px 50px rgba(0, 0, 0, .65);
        cursor: pointer;
        animation: tyPeekIn .16s ease-out;
        transform-origin: center bottom;
    }
    @keyframes tyPeekIn {
        from { transform: scale(.86); opacity: 0; }
        to   { transform: scale(1); opacity: 1; }
    }
    .ty-peek-media {
        position: relative;
        aspect-ratio: 16 / 9;
        background: #000;
    }
    .ty-peek-media img {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ty-peek-media img.ty-peek-logo {
        inset: auto 12px 10px auto;
        left: 14px;
        width: auto;
        height: auto;
        max-height: 42px;
        max-width: 55%;
        object-fit: contain;
        filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .6));
    }
    .ty-peek-media iframe.ty-peek-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        border: 0;
        pointer-events: none;
    }
    .ty-peek-body {
        padding: 13px 15px 15px;
        color: #fff;
    }
    .ty-peek-actions {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-bottom: 10px;
    }
    .ty-peek-btn {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 1.5px solid rgba(255, 255, 255, .5);
        color: #fff;
        background: rgba(30, 30, 30, .8);
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        cursor: pointer;
        transition: border-color .15s ease, background .15s ease;
    }
    .ty-peek-btn:hover { border-color: #fff; }
    .ty-peek-btn-play {
        background: #fff;
        color: #000;
        border-color: #fff;
    }
    .ty-peek-vol { margin-left: auto; }
    .ty-peek-title {
        color: #fff;
        font-weight: 700;
        font-size: 15.5px;
        margin: 0 0 6px;
    }
    .ty-peek-meta { font-size: 12.5px; }
    .ty-peek-meta * { color: #fff; opacity: .9; }
}

/* Conteggi elementi delle rail "featured" su desktop: parità con la
   webapp. Il !important è necessario: questo css è iniettato PRIMA di
   main.css, la cui regola min-width:0 (1 elemento, per il mobile)
   vincerebbe a parità di specificità. */
@media (min-width: 992px) {
    .swiffy-slider.responsive-slide-movie-featured {
        --swiffy-slider-item-count: 3 !important;
    }
    .swiffy-slider.responsive-slide-movie-featured.slider-item-vertical {
        --swiffy-slider-item-count: 3 !important;
    }
}

@media (min-width: 1350px) {
    .swiffy-slider.responsive-slide-movie-featured {
        --swiffy-slider-item-count: 3 !important;
    }
    .swiffy-slider.responsive-slide-movie-featured.slider-item-vertical {
        --swiffy-slider-item-count: 4 !important;
    }
}

/* ============ CTA email landing guest: pillola unica moderna ============
   Un solo box arrotondato glass con l'input a sinistra e il bottone a
   pillola DENTRO il box, a destra. */
body.ty-web .start-with-email form {
    display: flex;
    align-items: center;
    max-width: 540px;
    margin: 20px auto 0;
    padding: 6px 6px 6px 24px;
    border-radius: 999px;
    background: rgba(16, 18, 26, .55);
    border: 1px solid rgba(255, 255, 255, .16);
    backdrop-filter: blur(18px) saturate(1.25);
    -webkit-backdrop-filter: blur(18px) saturate(1.25);
    box-shadow: 0 12px 44px rgba(0, 0, 0, .38);
}
body.ty-web .start-with-email[style*="unset"] form { margin-left: 0; }
body.ty-web .start-with-email .start-email-form-input {
    flex: 1;
    min-width: 0;
}
body.ty-web .start-with-email input.input-from-send-group {
    width: 100%;
    height: 48px;
    padding: 0 !important;
    background: transparent !important;
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
    color: #fff !important;
    font-size: 16px;
}
body.ty-web .start-with-email input.input-from-send-group::placeholder {
    color: rgba(255, 255, 255, .55);
}
body.ty-web .start-with-email .start-email-form-button { flex: 0 0 auto; }
body.ty-web .start-with-email .btn-form-send-group {
    width: auto !important;
    height: 48px;
    padding: 0 28px !important;
    border: 0 !important;
    border-radius: 999px !important;
    font-weight: 700;
    font-size: 15px;
    white-space: nowrap;
    cursor: pointer;
    transition: transform .15s ease, filter .15s ease;
}
body.ty-web .start-with-email .btn-form-send-group:hover {
    filter: brightness(1.08);
    transform: scale(1.02);
}
@media (max-width: 576px) {
    body.ty-web .start-with-email form {
        padding-left: 16px;
        max-width: 100%;
    }
    body.ty-web .start-with-email .btn-form-send-group {
        padding: 0 18px !important;
        font-size: 14px;
    }
}

/* slider senza nulla da scorrere: niente puntini/frecce, elementi centrati */
.ty-slider-static .slider-indicators,
.ty-slider-static .slider-nav {
    display: none !important;
}
.ty-slider-static .slider-container {
    justify-content: center !important;
}
/* la variante indicators-outside riserva un padding sotto per i puntini:
   senza puntini resterebbe una banda vuota in fondo alla sezione */
.ty-slider-static.slider-indicators-outside {
    padding-bottom: 0 !important;
}

/* ============ FAQ: righe morbide come gli input (details/summary) ====== */
body.ty-web .faqs-reviews-contents .container {
    max-width: 780px;
}
body.ty-web .ty-faq-item {
    background: rgba(255, 255, 255, .07);
    border-radius: 12px;
    margin-bottom: 10px;
    overflow: hidden;
    transition: background .15s ease;
}
body.ty-web .ty-faq-item:hover {
    background: rgba(255, 255, 255, .1);
}
body.ty-web .ty-faq-item summary {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 16px 20px;
    cursor: pointer;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}
body.ty-web .ty-faq-item summary::-webkit-details-marker { display: none; }
body.ty-web .ty-faq-item summary i {
    flex: 0 0 auto;
    width: 32px;
    height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: rgba(255, 255, 255, .09);
    font-size: 18px;
    transition: transform .25s ease;
}
body.ty-web .ty-faq-item[open] summary i {
    transform: rotate(180deg);
}
body.ty-web .ty-faq-body {
    padding: 0 20px 18px;
}
body.ty-web .ty-faq-body p {
    margin: 0;
    color: #fff;
    opacity: .75;
    font-size: 14.5px;
    line-height: 1.65;
}


/* ==================================================================
   HERO MOBILE / APP (<992px)
   Stesso markup del desktop, layout in stile app Netflix: locandina
   verticale arrotondata che sfuma nello sfondo, logo del titolo a
   cavallo dell'artwork, meta e azioni sotto, glow ambientale sfocato
   dietro (come sul web). Le regole desktop stanno tutte dentro il media
   query >=992px, quindi qui va definito tutto da zero.
   ================================================================== */
@media (max-width: 991.98px) {

    .ty-hero-wrap {
        position: relative;
        margin: 0 0 26px;
        /* stesso gutter delle rail list_serie/list_video, che usano
           .slider-container { padding-inline: 3% } */
        padding: 0 3%;
        /* altezza FISSA dell'artwork, uguale per ogni hero (come il 21/9
           del desktop): quadrata, con un tetto sui viewport bassi.
           Serve anche a posizionare i controlli del trailer sul bordo
           inferiore dell'immagine. */
        --ty-hero-art: min(94vw, 56vh);
    }
    /* prima sezione: l'artwork sale sotto l'header trasparente, come
       faceva .top-position-custom nel renderer nativo */
    .ty-hero-wrap.ty-hero-first { margin-top: -55px; }

    /* cinema light: immagine sfocata + i due canvas che campionano il
       trailer (stessa ricetta di .home-ambient-glow) */
    .ty-hero-glow,
    .ty-hero-glow-canvas {
        position: absolute;
        top: -10px;
        left: 0;
        width: 100%;
        height: 88%;
        object-fit: cover;
        filter: blur(100px);
        /* piu' presente del desktop: qui l'artwork occupa quasi tutta la
           larghezza e il glow si vede solo ai lati e sotto */
        opacity: .58;
        z-index: 0;
        pointer-events: none;
        transition: opacity 1.4s ease;
        -webkit-mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
        mask-image: linear-gradient(to bottom, #000 45%, transparent 98%);
    }

    .ty-hero,
    .ty-hero-slider .swiffy-slider {
        position: relative;
        z-index: 1;
    }

    /* niente box a proporzione fissa: artwork sopra, blocco info sotto */
    .ty-hero {
        display: block;
        width: 100%;
        color: #fff;
        cursor: pointer;
    }

    .ty-hero-media {
        position: relative;
        width: 100%;
        height: var(--ty-hero-art);
        border-radius: 16px;
        overflow: hidden;
        /* l'artwork sfuma nello sfondo: niente bordo netto sotto */
        -webkit-mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
        mask-image: linear-gradient(to bottom, #000 66%, transparent 100%);
    }
    .ty-hero-media img,
    .ty-hero iframe.ty-hero-frame {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
    .ty-hero-media img { transition: opacity .6s ease; }
    .ty-hero iframe.ty-hero-frame {
        border: 0;
        pointer-events: none;   /* il tap va all'hero, i controlli stanno sopra */
        opacity: 0;
        z-index: 2;
        transition: opacity .6s ease;
    }
    .ty-hero.ty-hero-playing iframe.ty-hero-frame { opacity: 1; }
    .ty-hero.ty-hero-playing .ty-hero-media img { opacity: 0; }

    /* lo scrim del desktop coprirebbe anche il blocco info: qui la
       sfumatura la fa gia' la mask dell'artwork */
    .ty-hero-scrim { display: none; }

    .ty-hero-info {
        position: static;
        max-width: none;
        margin-top: -13%;
        padding: 0 6px;
        text-align: center;
        color: #fff;
    }
    /* selettore doppio: web-home.css e' iniettato in cima all'head, quindi
       .collectionLogoTitle di collection.css arriva dopo a pari peso */
    .ty-hero .ty-hero-logo {
        display: block;
        max-height: 86px;
        max-width: 74%;
        margin: 0 auto 12px;
        filter: drop-shadow(0 4px 14px rgba(0, 0, 0, .55));
    }
    .ty-hero-title {
        color: #fff;
        font-size: 26px;
        font-weight: 800;
        line-height: 1.1;
        margin: 0 0 10px;
        text-shadow: 0 3px 16px rgba(0, 0, 0, .6);
    }

    /* riga meta centrata con separatori a pallino (stile app Netflix) */
    .ty-hero-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
        gap: 8px;
        margin: 0 0 14px;
        font-size: 13px;
        opacity: .95;
    }
    .ty-hero-meta * { color: #fff; }
    .ty-hero-meta .infoCollectionTextMargin { margin-right: 0 !important; }
    .ty-hero-meta > span:not(.label_extra_info) + span:not(.label_extra_info)::before {
        content: "\2022";
        margin-right: 8px;
        opacity: .55;
    }

    /* la descrizione appartiene alla scheda collection, non all'hero */
    .ty-hero-desc { display: none; }

    .ty-hero-actions {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
    }
    .ty-hero-btn {
        flex: 1 1 0;
        min-width: 0;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        height: 46px;
        padding: 0 12px;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 700;
        white-space: nowrap;
        cursor: pointer;
        width: auto !important;
    }
    .ty-hero-btn i { font-size: 20px; }
    .ty-hero-btn-play {
        background: #fff;
        color: #000 !important;
    }
    .ty-hero-btn-play i { font-size: 22px; }
    .ty-hero-btn-soft {
        background: rgba(90, 90, 90, .55);
        color: #fff !important;
        backdrop-filter: blur(4px);
        -webkit-backdrop-filter: blur(4px);
    }
    /* il tap sull'artwork apre gia' la scheda: il bottone info e' di troppo */
    .ty-hero-btn-info { display: none; }

    /* controlli del trailer: solo il muto, sul bordo BASSO dell'artwork.
       In alto a destra finirebbe sotto l'header (logo canale e avatar),
       visto che la prima sezione scorre sotto la barra trasparente. */
    .ty-hero-controls {
        position: absolute;
        top: calc(var(--ty-hero-art) - 96px);
        right: 5%;
        z-index: 3;
        display: flex;
        gap: 8px;
    }
    .ty-hero-ctrl {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        border: 0;
        color: #fff;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        font-size: 17px;
        cursor: pointer;
        background: rgba(30, 30, 34, .55);
        backdrop-filter: blur(36px) saturate(160%);
        -webkit-backdrop-filter: blur(36px) saturate(160%);
        box-shadow:
            inset 0 0 0 1px rgba(255, 255, 255, .08),
            inset 0 1px 0 -0.5px rgba(255, 255, 255, .18),
            0 6px 18px -8px rgba(0, 0, 0, .6);
    }
    .ty-hero-ctrl:active { transform: scale(.9); }
    .ty-hero-replay { display: none; }

    /* slideshow: una slide per volta, si scorre col dito (niente frecce) */
    .ty-hero-slider .swiffy-slider { --swiffy-slider-item-count: 1; }
    .ty-hero-slider .slider-container { gap: 0; }
    .ty-hero-slider .ty-hero-slide { overflow: visible; }
    .ty-hero-slider .slider-nav { display: none !important; }
    .ty-hero-slider .slider-indicators {
        position: static;
        right: auto;
        left: auto;
        margin: 16px 0 0;
    }

    /* Native app only: reserve the same slots in every slide so title/logo,
       metadata and actions never move when their content has a different
       height. The artwork already has a shared fixed frame above. */
    html.ty-native .ty-hero-media img,
    html.ty-native .ty-hero iframe.ty-hero-frame {
        object-position: center center;
    }
    html.ty-native .ty-hero-info {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: 86px 36px 46px;
        height: 168px;
    }
    html.ty-native .ty-hero .ty-hero-logo,
    html.ty-native .ty-hero-title {
        grid-row: 1;
        align-self: center;
        justify-self: center;
        margin: 0;
    }
    html.ty-native .ty-hero-title {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 100%;
    }
    html.ty-native .ty-hero-meta {
        grid-row: 2;
        align-content: center;
        height: 36px;
        margin: 0;
        overflow: hidden;
    }
    html.ty-native .ty-hero-actions {
        grid-row: 3;
        align-self: end;
    }
}