/* [data-spb] lifts these above theme layout rules of one-class weight (e.g. block themes' constrained-layout
   margins), whatever order the stylesheets print in. No width of its own: the theme's width for that spot
   applies (e.g. Blocksy sizes homepage sections to 88vw on phones), unless a maximum is set. */
.spb[data-spb]{--spb-radius:0px;position:relative;box-sizing:border-box;margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:var(--spb-space,1.5rem);clear:both;direction:ltr}
.spb[data-spb].spb--max{max-width:var(--spb-max)}
.spb *,.spb *::before,.spb *::after{box-sizing:border-box}
.spb__track{display:flex;align-items:flex-start;overflow:hidden;border-radius:var(--spb-radius);outline:0}
.spb--rotate .spb__track{position:relative;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.spb--rotate .spb__track::-webkit-scrollbar{display:none}
.spb__slide{flex:0 0 100%;min-width:0;scroll-snap-align:start;scroll-snap-stop:always}
.spb .spb__link,.spb picture{display:block;text-decoration:none;border:0;box-shadow:none;background:none}
.spb .spb__img{display:block;width:100%;max-width:100%;height:auto;margin:0;padding:0;border:0;border-radius:var(--spb-radius);box-shadow:none}
.spb .spb__link:focus-visible{outline:3px solid currentColor;outline-offset:3px}
/* Controls: themes style <button> with very specific selectors (e.g. button:not(:hover):not(:active)), so the
   visual properties here are !important to look the same on every theme. */
.spb .spb__nav,.spb .spb__dot,.spb .spb__toggle{all:unset;box-sizing:border-box!important;cursor:pointer!important;margin:0!important;padding:0!important;border:0!important;min-width:0!important;min-height:0!important;max-width:none!important;line-height:1!important;font-size:0!important;text-decoration:none!important;text-transform:none!important;letter-spacing:0!important;box-shadow:none!important;-webkit-appearance:none!important;appearance:none!important;text-shadow:none!important}
.spb .spb__nav{position:absolute!important;top:50%!important;z-index:2;display:grid!important;place-items:center;width:42px!important;height:42px!important;margin-top:-21px!important;border-radius:50%!important;background:rgba(255,255,255,.92)!important;color:#111!important;box-shadow:0 1px 6px rgba(0,0,0,.3)!important;opacity:0;transition:opacity .2s}
.spb .spb__prev{left:12px!important;right:auto!important}
.spb .spb__next{right:12px!important;left:auto!important}
.spb .spb__nav svg{display:block;width:20px;height:20px}
.spb .spb__next svg{transform:scaleX(-1)}
.spb:hover .spb__nav,.spb .spb__nav:focus-visible{opacity:1}
.spb--rotate:not(.spb--dots-on):has(.spb__bar) .spb__nav{top:calc(50% - 15px)!important}
@media (hover:none){.spb .spb__nav{display:none!important}}
.spb__bar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;padding-top:10px}
.spb .spb__dot{display:block!important;width:10px!important;height:10px!important;border-radius:5px!important;background:#c3c4c7!important;transition:width .2s,background-color .2s}
.spb .spb__dot:hover{background:#8c8f94!important}
.spb .spb__dot[aria-current="true"]{width:26px!important;background:#1d2327!important}
.spb .spb__toggle{display:grid!important;place-items:center;width:26px!important;height:26px!important;border-radius:50%!important;background:transparent!important;color:#1d2327!important}
.spb .spb__toggle svg{display:block;width:14px;height:14px}
.spb .spb__toggle .spb__i-play,.spb .spb__toggle[aria-pressed="true"] .spb__i-pause{display:none}
.spb .spb__toggle[aria-pressed="true"] .spb__i-play{display:block}
.spb .spb__nav:focus-visible,.spb .spb__dot:focus-visible,.spb .spb__toggle:focus-visible{outline:3px solid #1d2327!important;outline-offset:2px!important}
/* Dots on the banner (setting): white, along the bottom edge, like most theme sliders. */
.spb--dots-on .spb__bar{position:absolute;left:0;right:0;bottom:12px;z-index:3;padding:0;pointer-events:none}
.spb--dots-on .spb__bar>*{pointer-events:auto}
.spb.spb--dots-on .spb__dot{background:rgba(255,255,255,.35)!important;box-shadow:inset 0 0 0 2px rgba(255,255,255,.85),0 1px 3px rgba(0,0,0,.35)!important}
.spb.spb--dots-on .spb__dot:hover{background:rgba(255,255,255,.7)!important}
.spb.spb--dots-on .spb__dot[aria-current="true"]{background:#fff!important}
.spb.spb--dots-on .spb__toggle{color:#fff!important;background:rgba(0,0,0,.35)!important}
@media (prefers-reduced-motion:reduce){.spb--rotate .spb__track{scroll-behavior:auto}.spb .spb__nav,.spb .spb__dot{transition:none}}
