/* Container geometry matched to aclind.com source CSS (2026-10-23).
   The maximum is the content width, without a second inner gutter. */
:root {
    --actorein-container: 1180px;
    --actorein-gutter: clamp(1.1rem, 2.4vw, 2rem);
    --nc-container: var(--actorein-container);
    --eds-container: var(--actorein-container);
}

@media (max-width: 1376px) {
    :root { --actorein-gutter: 1rem; }
}

@media (min-width: 1800px) {
    :root { --actorein-container: min(1440px, calc(100vw - 80px)); }
}

body .nc-container,
body .af-footer .af-container,
body .eds-container:not(.acto-tabpanel),
body .actorein-corporate-pages .ac-corporate-pages-nav > .eds-container,
body .actorein-corporate-pages .ac-corporate-content > .eds-container:not(.acto-tabpanel),
body.single-product .acto-tabs > .eds-container,
body.single-product .acto-subnav--product .eds-container,
body .actorein-catalog .acto-page-hero .eds-container,
body .actorein-catalog .acto-products .eds-container {
    box-sizing: border-box;
    width: min(calc(100% - var(--actorein-gutter) * 2), var(--actorein-container)) !important;
    max-width: var(--actorein-container) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* Embedded tab panels use the outer container's full content area. */
body .actorein-corporate-pages .ac-corporate-content .eds-container.acto-tabpanel {
    width: 100% !important;
    max-width: none !important;
    margin-inline: 0 !important;
    padding-inline: 0 !important;
}

/* The promo background spans the viewport; only its own layout controls its edge. */
body .acto-promo .nc-container {
    width: 100% !important;
    max-width: none !important;
}

/* ============================================================
   UNIFORM BODY WIDTH
   Every non-slider section uses exactly the header container's
   content box. The exported homepage sections ship their own
   1180px + 40px values, so this normalization is intentionally
   !important. The hero slider keeps its own full-bleed geometry.
   ============================================================ */
body :is(.rh-categories__wrap, .rh-products__wrap, .rh-areas__wrap) {
    box-sizing: border-box;
    width: min(calc(100% - var(--actorein-gutter) * 2), var(--actorein-container)) !important;
    max-width: var(--actorein-container) !important;
    margin-inline: auto !important;
    padding-inline: 0 !important;
}

/* Swipe rows still bleed to the viewport edge, while their first card
   starts on the shared content edge. */
@media (max-width: 700px) {
    body .rh-categories .rh-categories__stack,
    body .rh-areas .rh-areas__directory {
        margin-inline: calc(var(--actorein-gutter) * -1) !important;
        padding-inline: var(--actorein-gutter) !important;
        scroll-padding-inline: var(--actorein-gutter) !important;
    }
}

/* Section containers that add their own gutter on top of the shared one. */
body .actorein-catalog .ac-catalog-toolbar,
body .acto-sectors .nc-container {
    padding-inline: 0 !important;
}

@media (min-width: 992px) {
    body .acto-carousel__detail {
        padding-left: max(var(--actorein-gutter), calc((100% - var(--actorein-container)) / 2)) !important;
    }
    body .acto-carousel__thumbs {
        left: max(var(--actorein-gutter), calc((100% - var(--actorein-container)) / 2)) !important;
    }
    body .acto-carousel__nav--next {
        right: max(var(--actorein-gutter), calc((100% - var(--actorein-container)) / 2)) !important;
    }
    body .acto-carousel__nav--prev {
        right: calc(max(var(--actorein-gutter), calc((100% - var(--actorein-container)) / 2)) + 66px) !important;
    }
}

/* Brand logos: the row must fill the header container even when the
   exported markup ships five logos inside a six-column grid. */
body .acto-brands__row {
    display: flex;
    gap: 16px;
}

body .acto-brands__row > .acto-brands__item {
    flex: 1 1 0;
    min-width: 0;
}

body .acto-brands__item > img {
    max-width: 100%;
    height: auto;
}

@media (max-width: 991px) {
    body .acto-brands__row {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 560px) {
    body .acto-brands__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}