/* Shared directional controls. Module layouts own positioning; this file owns appearance. */
body.sibo-site button.sibo-carousel-button {
    --sibo-control-anchor: 0px;
    --sibo-control-lift: 0px;
    --sibo-control-scale: 1;
    box-sizing: border-box;
    display: grid; place-items: center; flex: 0 0 52px;
    width: 52px; min-width: 52px; max-width: 52px;
    height: 52px; min-height: 52px; max-height: 52px;
    margin: 0; padding: 0; border: 1px solid rgb(255 255 255 / .11);
    border-radius: 50%; background: #252a2f; background-image: none;
    color: #e5e9eb; line-height: 1; cursor: pointer; touch-action: manipulation;
    box-shadow: inset 0 1px 0 rgb(255 255 255 / .045), 0 2px 4px rgb(0 0 0 / .16);
    transform: translateY(calc(var(--sibo-control-anchor) + var(--sibo-control-lift))) scale(var(--sibo-control-scale));
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
    -webkit-tap-highlight-color: transparent;
}
body.sibo-site button.sibo-carousel-button .sibo-carousel-icon {
    display: block; width: 24px; height: 24px; fill: none;
    stroke: currentColor; stroke-width: 1.5; pointer-events: none;
    transform: none; transition: none;
}
body.sibo-site button.sibo-carousel-button:focus-visible {
    color: var(--sibo-accent, #21c4b8); border-color: var(--sibo-accent, #21c4b8);
    background-color: #2d3339; outline: 2px solid var(--sibo-accent, #21c4b8); outline-offset: 4px;
}
/* Avoid sticky hover feedback on touch devices. */
@media (hover: hover) {
    body.sibo-site button.sibo-carousel-button:hover:not(:disabled) {
        --sibo-control-lift: -1px;
        color: var(--sibo-accent, #21c4b8); border-color: var(--sibo-accent, #21c4b8);
        background-color: #2d3339;
    }
}
body.sibo-site button.sibo-carousel-button:active:not(:disabled) {
    --sibo-control-lift: 0px; --sibo-control-scale: .96;
    color: var(--sibo-accent, #21c4b8); border-color: var(--sibo-accent, #21c4b8);
    background-color: #2d3339;
}
body.sibo-site button.sibo-carousel-button:disabled {
    --sibo-control-lift: 0px; --sibo-control-scale: 1;
    opacity: .35; color: #e5e9eb; border-color: rgb(255 255 255 / .08);
    background-color: #252a2f; cursor: default;
}
body.sibo-site button.sibo-carousel-button[hidden] { display: none !important; }
/* Reserve a real gutter, then account for the coverflow's scaled outside documents. */
body.sibo-home .sibo-qualifications-ready .sibo-qualifications-carousel { padding-inline: 80px; }
body.sibo-site button.sibo-carousel-button:is(.sibo-qualifications-prev,.sibo-qualifications-next) {
    --sibo-control-anchor: -50%; top: calc(50% - 42px);
}
body.sibo-home .sibo-qualifications-prev { left: var(--sibo-control-inset, 0px); }
body.sibo-home .sibo-qualifications-next { right: var(--sibo-control-inset, 0px); }
/* Application related products: use the full track width and overlap its edges. */
body.sibo-site .sibo-related-carousel { padding-inline: 0; margin-inline: 12px; }
body.sibo-site .sibo-related-controls {
    /* Exclude the track's 2px/12px focus/scroll clearance from card centering. */
    position: absolute; inset: 2px 0 12px; margin: 0; min-height: 0;
    pointer-events: none;
}
body.sibo-site button.sibo-carousel-button.sibo-related-button {
    --sibo-control-anchor: -50%;
    position: absolute; top: 50%; pointer-events: auto;
    opacity: .55;
    transition: opacity .18s ease, color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}
/* Overlay controls stay quiet until the user interacts with them. */
body.sibo-site button.sibo-carousel-button.sibo-related-button:is(:focus-visible,:active):not(:disabled) { opacity: 1; }
@media (hover: hover) {
    body.sibo-site button.sibo-carousel-button.sibo-related-button:hover:not(:disabled) { opacity: 1; }
}
body.sibo-site .sibo-related-prev { left: -36px; }
body.sibo-site .sibo-related-next { right: -36px; }
body.sibo-site .sibo-pdp-gallery-nav { gap: 24px; }
/* The image viewer's close control retains its original size and treatment. */
body.sibo-site .sibo-image-viewer { grid-template-rows: 44px minmax(0, 1fr) 52px; }
@media (max-width: 599px) {
    body.sibo-home .sibo-qualifications-ready .sibo-qualifications-carousel { padding-inline: 76px; }
    body.sibo-site button.sibo-carousel-button:is(.sibo-qualifications-prev,.sibo-qualifications-next) { top: calc(50% - 36px); }
}
/* Large screens have enough outer space; retain the full four-card width. */
@media (min-width: 1680px) {
    body.sibo-site .sibo-related-carousel { margin-inline: 0; }
}
/* Narrow layouts show partial cards: keep the controls entirely outside the track. */
@media (max-width: 1100px) {
    body.sibo-site .sibo-related-carousel { margin-inline: 36px; }
    body.sibo-site .sibo-related-prev { left: -56px; }
    body.sibo-site .sibo-related-next { right: -56px; }
}
@media (hover: none) {
    body.sibo-site button.sibo-carousel-button:hover:not(:disabled):not(:focus-visible):not(:active) {
        color: #e5e9eb; border-color: rgb(255 255 255 / .11); background-color: #252a2f;
    }
}
@media (prefers-reduced-motion: reduce) {
    body.sibo-site button.sibo-carousel-button { transition: none; }
    body.sibo-site button.sibo-carousel-button:hover:not(:disabled) { --sibo-control-lift: 0px; }
}

/* Qualifications and product thumbnails share compact controls; desktop stays unchanged. */
@media (max-width: 1100px) {
    body.sibo-home .sibo-qualifications-ready .sibo-qualifications-carousel { padding-inline: 68px; }
    body.sibo-home button.sibo-carousel-button:is(.sibo-qualifications-prev, .sibo-qualifications-next),
    body.sibo-site button.sibo-carousel-button.sibo-pdp-gallery-arrow {
        flex-basis: 40px;
        width: 40px; min-width: 40px; max-width: 40px;
        height: 40px; min-height: 40px; max-height: 40px;
    }
    body.sibo-home button.sibo-carousel-button:is(.sibo-qualifications-prev, .sibo-qualifications-next) .sibo-carousel-icon,
    body.sibo-site button.sibo-carousel-button.sibo-pdp-gallery-arrow .sibo-carousel-icon {
        width: 20px; height: 20px;
    }
    body.sibo-site button.sibo-carousel-button.sibo-pdp-gallery-arrow { position: relative; }
    /* Keep a 44px touch target without enlarging the visible circle. */
    body.sibo-home button.sibo-carousel-button:is(.sibo-qualifications-prev, .sibo-qualifications-next)::before,
    body.sibo-site button.sibo-carousel-button.sibo-pdp-gallery-arrow::before {
        content: ''; position: absolute; inset: -2px; border-radius: 50%;
    }
}
@media (max-width: 599px) {
    body.sibo-home .sibo-qualifications-ready .sibo-qualifications-carousel { padding-inline: 60px; }
    body.sibo-home button.sibo-carousel-button:is(.sibo-qualifications-prev, .sibo-qualifications-next),
    body.sibo-site button.sibo-carousel-button.sibo-pdp-gallery-arrow {
        flex-basis: 36px;
        width: 36px; min-width: 36px; max-width: 36px;
        height: 36px; min-height: 36px; max-height: 36px;
    }
    body.sibo-home button.sibo-carousel-button:is(.sibo-qualifications-prev, .sibo-qualifications-next) .sibo-carousel-icon,
    body.sibo-site button.sibo-carousel-button.sibo-pdp-gallery-arrow .sibo-carousel-icon {
        width: 18px; height: 18px;
    }
    body.sibo-home button.sibo-carousel-button:is(.sibo-qualifications-prev, .sibo-qualifications-next)::before,
    body.sibo-site button.sibo-carousel-button.sibo-pdp-gallery-arrow::before { inset: -4px; }
}