/* Public-site usability fixes; keep the original grids, typography and asymmetric composition. */
.squaredInfo .infoIcon.is-open { z-index: 5; }
.squaredInfo .infoIcon.is-open .infoPopup {
    display: block; top: 50%; right: 35px; transform: translateY(-50%);
}
@media (max-width: 1199px) {
    /* Preserve the decorative crop without moving the page when focus reaches a protruding card. */
    html, body { overflow-x: clip; }
    /* Each existing card rail keeps its own breakpoint and decorative overhang. */
    .mutual .newFundsBanner .boxesContainer {
        overflow-x: auto; justify-content: flex-start;
        overscroll-behavior-x: contain;
    }
    .mutual .newFundsBanner .boxFund { flex-shrink: 0; }
    .responsive-table { width: 100%; max-width: 100%; overflow-x: auto; overscroll-behavior-x: contain; }
    .responsive-table table { margin-bottom: 0; }
    .chartSubContainer { flex-wrap: wrap; gap: 16px; }
    .chartSubContainer .chartSubItem { flex-wrap: wrap; gap: 4px; max-width: 100%; }
    .chartSubContainer .chartSubItem button, .visioneChartButton { min-height: 44px; max-height: none; }
    .fundTabContainer .container { overflow-x: auto; overscroll-behavior-x: contain; }
    .fundTabContainer .fundTab { padding-block: 13px; }
    .fundTabContainer .fundTab.selected::after { bottom: 4px; }
    .squaredInfo { height: auto; min-height: 90px; padding-right: 48px; }
    .squaredInfo .infoText { overflow-wrap: anywhere; }
    .squaredInfo .infoIcon {
        width: 44px; height: 44px; top: 0; right: 0;
        display: grid; place-items: center;
    }
    .squaredInfo .infoIcon:hover { transform: none; }
    .squaredInfo .infoIcon:hover > img { transform: scale(1.2); }
    .squaredInfo .infoPopup,
    .squaredInfo .infoIcon:hover .infoPopup,
    .squaredInfo .infoIcon.is-open .infoPopup {
        top: calc(100% + 8px); right: 0; transform: none;
        width: min(340px, calc(100vw - 64px)); max-height: min(50vh, 350px);
        overflow-y: auto; padding: 16px; font-size: 14px;
    }
    .squaredInfo .infoPopup::after { display: none; }
    .squaredInfo .infoIcon.is-open .infoPopup { display: block; }
    .squaredInfo .infoIcon:focus-visible { outline: 2px solid #FFA800; outline-offset: -3px; }
}
@media (max-width: 767px) {
    .fundTabContainer .container { justify-content: flex-start; }
    .mutual .flessibiliSection .boxesContainer { overflow-x: auto; justify-content: flex-start; }
    .mutual .flessibiliSection .boxFund { flex-shrink: 0; }
    .fundBoxTable .text { overflow-wrap: anywhere; }
    .fundBoxTable { min-width: 0; width: 100%; gap: 12px; }
    .fundBoxTable .left, .fundBoxTable .right { min-width: 0; }
}
@media (max-width: 961px) {
    .picPac .twoColumnsDescription .bigTitle { overflow-wrap: anywhere; }
}
/* Keep the intentionally protruding cards; only inset the text that was clipped. */
@media (min-width: 992px) and (max-width: 1079px) {
    .consulenza .pianificazioni .boxWithAbsoluteArrow:nth-child(even) .smallText {
        padding-right: clamp(0px, calc((1080px - 100vw) / 2), 44px);
    }
}
@media (max-width: 359px) {
    .homepage .goals .boxesContainer .boxWithAbsoluteArrow { min-width: 0; }
    .gestioneDetail .introBg .hugeTitle { overflow-wrap: anywhere; }
}
@media (hover: none) {
    .squaredInfo .infoIcon:hover .infoPopup { display: none; }
    .squaredInfo .infoIcon.is-open .infoPopup { display: block; }
}
/* The fund rail uses native scrolling instead of translating the entire widget. */
.funds .funds-carousel .scrollWrapper {
    overflow-x: auto; transform: none; transition: none; overscroll-behavior-x: contain;
}
.funds .funds-carousel button.square {
    width: 44px; height: 44px; border: 0; background: #F4F4F9;
}
.funds .funds-carousel button.square:disabled { opacity: .4; cursor: default; }
.funds .funds-carousel button.square:focus-visible { outline: 2px solid #FFA800 !important; outline-offset: 2px; }
@media (max-width: 359px) {
    .funds .funds-carousel .boxFund { min-width: 0; width: calc(100vw - 48px); }
}
@media (prefers-reduced-motion: reduce) {
    .funds .funds-carousel .scrollWrapper { scroll-behavior: auto; }
}