/* Home page (Index_EG): moved out of the view (A12). The old-theme overrides that were here (.heading_seo_title,
   .theme_1 / .theme_3 / .brands-section corners, .site-content margin) are gone with the old theme. */
.seo-home-links a {
    padding: 5px;
    background-color: #1a1d22;
    border-radius: 6px;
}

h1 {
    font-size: 18px;
}

#page_rest_content {
    min-height: 800px !important;
}

/* Below the fold: the browser skips laying out and drawing these sections until they come near the viewport
   (they look the same; "auto" remembers each one's real height once drawn). Not the hero, not the intro, not
   the first section under it. */
.g2-home > .g2-sec ~ .g2-sec,
#page_rest_content .g2-sec {
    content-visibility: auto;
    contain-intrinsic-size: auto 600px;
}

@media (max-width: 575px) {
    .g2-home > .g2-sec ~ .g2-sec,
    #page_rest_content .g2-sec {
        contain-intrinsic-size: auto 540px;
    }
}

/* Skeleton of the lower half while it loads: four rails sized like the real ones (theme 4 rail:
   ~1.5 cards of 240×392 at 390px, ~4.5 of 273×501 at 1440px, 20px apart). */
.hp-skel__rail {
    padding: 16px;
    margin-bottom: 16px;
}

.hp-skel__bar {
    display: block;
    border-radius: 6px;
    background-color: #262d40;
}

.hp-skel__bar--title {
    width: min(40%, 280px);
    height: 18px;
    margin-bottom: 8px;
}

.hp-skel__bar--sub {
    width: min(65%, 460px);
    height: 12px;
    margin-bottom: 16px;
    opacity: .7;
}

.hp-skel__row {
    display: flex;
    gap: 20px;
    overflow: hidden;
}

.hp-skel__card {
    position: relative;
    flex: 0 0 240px;
    height: 392px;
    padding: 10px;
    border-radius: 10px;
    background-color: #191e2c;
    overflow: hidden;
}

.hp-skel__art {
    display: block;
    height: calc(100% - 62px);
    margin-bottom: 14px;
    border-radius: 8px;
    background-color: #20263a;
}

.hp-skel__bar--line {
    width: 85%;
    height: 12px;
    margin-bottom: 8px;
}

.hp-skel__bar--short {
    width: 45%;
    height: 12px;
}

.hp-skel__card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .05), transparent);
    transform: translateX(-100%);
    animation: hp-skel-shimmer 1.6s ease-in-out infinite;
}

@keyframes hp-skel-shimmer {
    to {
        transform: translateX(100%);
    }
}

@media (min-width: 576px) {
    .hp-skel__rail {
        padding-inline: 0;
    }

    .hp-skel__card {
        flex-basis: 250px;
        height: 440px;
    }
}

@media (min-width: 992px) {
    .hp-skel__card {
        flex-basis: 273px;
        height: 501px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hp-skel__card::after {
        animation: none;
        opacity: 0;
    }
}

@media (max-width: 991px) {
    h1 {
        font-size: 14px;
        font-weight: 500;
    }
}

/* The hero row and the page body (were .site-content > .container > .row > .col-12 px-2 + an hr spacer: the row's
   -8px and the column's 8px cancel out). .hp-wrap = that container: the site width tokens on wide screens, full
   width with no gutter below 992px (the sections keep their own 16px). */
.hp-hero-row { padding-top: 8px; }
.hp-hero-row > .hp-wrap { padding-bottom: 16px; }
.hp-body { padding-bottom: 15px; }

@media (max-width: 991px) {
    .hp-body { padding-bottom: 0; }
}

@media (max-width: 767px) {
    .hp-hero-row > .hp-wrap { padding-bottom: 0; }
}

@media (max-width: 575px) {
    .hp-hero-row { padding-top: 4px; }
}

/* No live slide: the component renders nothing, and the row takes no space. */
.hp-hero-row:not(:has(.hs)) { display: none; }

.hp-wrap { width: 100%; max-width: var(--g2-wrap-max); margin-inline: auto; padding-inline: var(--g2-wrap-pad); }

@media (max-width: 991px) {
    .hp-wrap { padding-inline: 0; }
}