/* Savonia_CategoryBanners (2026-11-05): banner box on top of the category pages, in place of the old
   <p class="category-image"> (same place, same bottom gap). Own file, category pages only (layout savonia/catbanners.xml).
   One banner per view, CSS scroll-snap; arrows on desktop with a mouse, dots under it, 44 px tap areas on touch screens.
   Box shape = the module's desktop / phone image size (--sv-cb-ar / --sv-cb-ar-m, set by the template).
   Tokens: --sv-* (savonia-rail.css), with fallbacks. */
.sv-cb { position: relative; margin: 0 0 24px; }
.sv-cb__track {
    display: flex; gap: 0; margin: 0; padding: 0; align-items: stretch;
    overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; scrollbar-width: none; outline: 0;
}
.sv-cb__track::-webkit-scrollbar { display: none; }
.sv-cb--single .sv-cb__track { overflow: hidden; }
.sv-cb--moving .sv-cb__track { scroll-snap-type: none; }
.sv-cb__track:focus-visible { box-shadow: 0 0 0 2px var(--sv-green, #a9cf45); border-radius: var(--sv-radius, 10px); }
.sv-cb__slide {
    flex: 0 0 100%; min-width: 0; scroll-snap-align: start; overflow: hidden;
    border-radius: var(--sv-radius, 10px); background: #f3f3ee;
}
.sv-cb__slide a { display: block; }
.sv-cb__slide picture { display: block; }
.sv-cb__slide img {
    display: block; width: 100%; max-width: 100%; height: auto; margin: 0;
    aspect-ratio: var(--sv-cb-ar, 3 / 1); object-fit: cover;
}
.sv-cb__slide a:focus-visible { outline: 3px solid var(--sv-green, #a9cf45); outline-offset: -3px; }

/* arrows (sv-catbanners.js adds them): desktop with a mouse only; translucent white circle, Savonia green chevron */
.sv-cb__nav {
    position: absolute; top: 50%; z-index: 2; display: none; align-items: center; justify-content: center;
    width: 44px; height: 44px; margin-top: -34px; padding: 0; border: 1px solid rgba(255, 255, 255, .75); border-radius: 50%;
    background: rgba(255, 255, 255, .6); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
    box-shadow: 0 2px 12px rgba(0, 0, 0, .12); color: #4a6214; cursor: pointer; opacity: .9;
    transition: background-color .2s, color .2s, opacity .2s, transform .2s;
}
.sv-cb__nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.sv-cb__nav--prev { left: 14px; }
.sv-cb__nav--next { right: 14px; }
.sv-cb__nav:hover, .sv-cb__nav:focus-visible { background: rgba(169, 207, 69, .92); border-color: rgba(169, 207, 69, .92); color: #fff; opacity: 1; outline: 0; }
.sv-cb__nav:active { transform: scale(.94); }

.sv-cb__dots { display: flex; justify-content: center; gap: 8px; padding: 10px 0 0; }
.sv-cb__dots button { width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%; background: #d5d5d5; cursor: pointer; }
.sv-cb__dots button[aria-current="true"] { width: 22px; border-radius: 5px; background: var(--sv-green, #a9cf45); }
.sv-cb__dots button:focus-visible { outline: 2px solid #4a6214; outline-offset: 2px; }

@media (min-width: 992px) and (hover: hover) and (pointer: fine) {
    .sv-cb__nav { display: flex; }
}
@media (max-width: 991px) {
    /* dots: same look, 44 px tall tap area */
    .sv-cb__dots { padding: 0; }
    .sv-cb__dots button { position: relative; margin: 17px 0 13px; }
    .sv-cb__dots button::after { content: ""; position: absolute; inset: -17px -4px -13px; }
    .sv-cb { margin-bottom: 18px; }
    .sv-cb--single { margin-bottom: 22px; }
}
@media (max-width: 767px) {
    .sv-cb__track { gap: 12px; }
    .sv-cb__slide img { aspect-ratio: var(--sv-cb-ar-m, 2 / 1); }
}
@media (prefers-reduced-motion: reduce) {
    .sv-cb__track { scroll-behavior: auto; }
    .sv-cb__nav { transition: none; }
}