/* One product heading in the HTML, positioned without Vue viewport branches. */
#prod--block .product--block {
    grid-template-columns: 240px minmax(0, 1fr);
    grid-template-areas: "image title" "image details";
    grid-template-rows: auto 1fr;
    row-gap: 0;
}
#prod--block .product--block > .product--block-title {
    grid-area: title;
    margin: 0;
    min-width: 0;
    overflow-wrap: anywhere;
}
#prod--block .product--block-image { grid-area: image; min-width: 0; }
#prod--block .product--block-content { grid-area: details; min-width: 0; }
#prod--block .product--mob { display: none; }
.article--top h1.article--top-title { margin: 0; min-width: 0; overflow-wrap: anywhere; }

@media (max-width: 680px) {
    #prod--block .product--block {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "title" "image";
        grid-template-rows: auto auto;
        row-gap: 16px;
    }
    #prod--block .product--block-content { display: none; }
    #prod--block .product--mob { display: block; }
}

/* Keep expanded space in the page when toggleHeader() collapses the toolbar. */
.page--home.main-wrap,
.page--home .header,
.page--home .header .container,
.page--home .header--text,
.page--home .home-h1 { transition: none; }
.page--home .header--text { min-width: 0; }
.page--home .header--text .home-h1 { display: block; max-width: 100%; overflow-wrap: anywhere; }
@media (max-width: 991px) {
    /* Clip horizontal overflow without creating a scroll container for sticky. */
    .page--home.main-wrap { padding-top: 0; overflow-x: clip; }
    .page--home .header { position: sticky; top: 0; height: auto; z-index: 99; }
    .page--home.home-header-fixed { padding-top: var(--home-header-height); }
    .page--home.home-header-fixed .header { position: fixed; }
    .page--home .header.on { height: 60px; overflow: hidden; }
    .page--home .header .container { height: auto; }
    .page--home .header--text.dn {
        display: inline-flex;
        visibility: hidden;
        pointer-events: none;
    }
    .page--home .header--text .home-h1 {
        margin: 0;
    }
}
