/* WB Rich Text Editor - front-office block styles (loaded via actionFrontControllerSetMedia) */

/* Columns: the block's own CSS grid, also in Bootstrap mode (1.21.0). --wb-inner-gap is the gap
   between the columns; the block's "Gap between columns" sets it on the block itself. */
/* Space between blocks: every block's own margin. "Default spacing between blocks"
   in the module configuration writes ":root{--wb-block-gap:0}" into the global stylesheet,
   which switches them all off — the spacing then comes from Block settings > Spacing.
   Spacing properties (docs/SPACING.md), set for the shop, for a page or for one block:
     --wb-block-mt / --wb-block-mb   space above / below a block
     --wb-inner-pad                  padding of the boxes inside a block (hero content, cards)
     --wb-inner-gap                  gap between the items of a block (columns, grids) */
.wb-editor-columns{margin-top:var(--wb-block-mt,var(--wb-block-gap,1rem));margin-bottom:var(--wb-block-mb,var(--wb-block-gap,1rem))}
.wb-editor-columns{display:grid;gap:var(--wb-inner-gap,1.5rem)}
.wb-editor-columns__col{min-width:0}
.wb-editor-columns--v-top{align-items:start}.wb-editor-columns--v-center{align-items:center}.wb-editor-columns--v-bottom{align-items:end}
.wb-editor-columns__col>:first-child{margin-top:0}
.wb-editor-columns__col>:last-child{margin-bottom:0}
.wb-editor-columns--1-1{grid-template-columns:1fr 1fr}
.wb-editor-columns--1-1-1{grid-template-columns:1fr 1fr 1fr}
.wb-editor-columns--2-1{grid-template-columns:2fr 1fr}
.wb-editor-columns--1-2{grid-template-columns:1fr 2fr}
.wb-editor-columns--1-1-1-1{grid-template-columns:1fr 1fr 1fr 1fr}
.wb-editor-columns--1-2-1{grid-template-columns:1fr 2fr 1fr}
@media (max-width:767px){.wb-editor-columns{grid-template-columns:1fr}.wb-editor-columns--1-1-1-1{grid-template-columns:1fr 1fr}}
/* Pages saved before 1.21.0 carry Bootstrap's .row / .col-* here until they are saved again.
   The same grid, twelve tracks wide, lays that markup out: the .col-* classes say how many
   tracks a column spans, and the theme's gutters (margins, paddings, widths) are taken off. */
.wb-editor-columns.row{grid-template-columns:repeat(12,minmax(0,1fr));--bs-gutter-x:0px;--bs-gutter-y:0px}
.wb-editor-columns.row:not(.wb-full-bleed){margin-left:0;margin-right:0}
.wb-editor-columns.row>.wb-editor-columns__col{width:auto;max-width:none;margin-top:0;padding-left:0;padding-right:0;grid-column:span 12}
.wb-editor-columns.row>.col-6{grid-column:span 6}
@media (min-width:768px){.wb-editor-columns.row>.col-md-3{grid-column:span 3}.wb-editor-columns.row>.col-md-4{grid-column:span 4}.wb-editor-columns.row>.col-md-6{grid-column:span 6}.wb-editor-columns.row>.col-md-8{grid-column:span 8}}

/* Responsive columns shared by products, gallery, features and categories:
   --xl-N desktop (1200px+), --lg-N laptop, --md-N tablet, --sm-N mobile (1-12 each).
   The module's own CSS grid, independent of Bootstrap. --wb-n = columns in effect now. */
.wb-cols{--wb-gap:var(--wb-inner-gap,1.5rem);display:grid;gap:var(--wb-gap);grid-template-columns:repeat(var(--wb-n,1),minmax(0,1fr))}
.wb-cols--xl-1{--wb-xl:1}.wb-cols--xl-2{--wb-xl:2}.wb-cols--xl-3{--wb-xl:3}.wb-cols--xl-4{--wb-xl:4}.wb-cols--xl-5{--wb-xl:5}.wb-cols--xl-6{--wb-xl:6}.wb-cols--xl-7{--wb-xl:7}.wb-cols--xl-8{--wb-xl:8}.wb-cols--xl-9{--wb-xl:9}.wb-cols--xl-10{--wb-xl:10}.wb-cols--xl-11{--wb-xl:11}.wb-cols--xl-12{--wb-xl:12}
.wb-cols--lg-1{--wb-lg:1}.wb-cols--lg-2{--wb-lg:2}.wb-cols--lg-3{--wb-lg:3}.wb-cols--lg-4{--wb-lg:4}.wb-cols--lg-5{--wb-lg:5}.wb-cols--lg-6{--wb-lg:6}.wb-cols--lg-7{--wb-lg:7}.wb-cols--lg-8{--wb-lg:8}.wb-cols--lg-9{--wb-lg:9}.wb-cols--lg-10{--wb-lg:10}.wb-cols--lg-11{--wb-lg:11}.wb-cols--lg-12{--wb-lg:12}
.wb-cols--md-1{--wb-md:1}.wb-cols--md-2{--wb-md:2}.wb-cols--md-3{--wb-md:3}.wb-cols--md-4{--wb-md:4}.wb-cols--md-5{--wb-md:5}.wb-cols--md-6{--wb-md:6}.wb-cols--md-7{--wb-md:7}.wb-cols--md-8{--wb-md:8}.wb-cols--md-9{--wb-md:9}.wb-cols--md-10{--wb-md:10}.wb-cols--md-11{--wb-md:11}.wb-cols--md-12{--wb-md:12}
.wb-cols--sm-1{--wb-sm:1}.wb-cols--sm-2{--wb-sm:2}.wb-cols--sm-3{--wb-sm:3}.wb-cols--sm-4{--wb-sm:4}.wb-cols--sm-5{--wb-sm:5}.wb-cols--sm-6{--wb-sm:6}.wb-cols--sm-7{--wb-sm:7}.wb-cols--sm-8{--wb-sm:8}.wb-cols--sm-9{--wb-sm:9}.wb-cols--sm-10{--wb-sm:10}.wb-cols--sm-11{--wb-sm:11}.wb-cols--sm-12{--wb-sm:12}
.wb-cols{--wb-n:var(--wb-xl,1)}
@media (max-width:1199px){.wb-cols{--wb-n:var(--wb-lg,var(--wb-xl,1))}}
@media (max-width:991px){.wb-cols{--wb-n:var(--wb-md,var(--wb-xl,1));--wb-gap:var(--wb-inner-gap,1rem)}}
@media (max-width:767px){.wb-cols{--wb-n:var(--wb-sm,var(--wb-xl,1));--wb-gap:var(--wb-inner-gap,1rem)}}

/* Accessibility helpers: text for screen readers only, and a visible keyboard focus. */
.wb-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}
.wb-slider button:focus-visible,.wb-carousel button:focus-visible,.wb-lightbox button:focus-visible,.wb-gallery__link:focus-visible,.wb-feature--link:focus-visible,.wb-category-card:focus-visible,.wb-tabs__tab:focus-visible,.wb-accordion__summary:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}

/* Visibility */
@media (min-width:992px){.wb-hidden-desktop{display:none!important}}
@media (min-width:768px) and (max-width:991px){.wb-hidden-tablet{display:none!important}}
@media (max-width:767px){.wb-hidden-mobile{display:none!important}}

/* Page background (module configuration / "Page background (this page only)"): the module puts
   .wb-page-bg on <body> and the generated stylesheets carry the colour. The breadcrumb belongs
   to the page canvas, so it takes the same colour instead of the theme's own. */
body.wb-page-bg,body.wb-page-bg .breadcrumb{background-color:var(--wb-page-bg)}

/* Alignment / container */
.wb-align-left{text-align:left}
.wb-align-center{text-align:center}
.wb-align-right{text-align:right}
.wb-btn-wrap--left{text-align:left}
.wb-btn-wrap--center{text-align:center}
.wb-btn-wrap--right{text-align:right}
/* Full width: 100vw includes the scrollbar, which would add a horizontal scrollbar of its own.
   wb-blocks.js publishes the scrollbar width as --wb-sbw (0 on overlay scrollbars). */
.wb-full-bleed.wb-full-bleed{--wb-bleed-left:calc((100vw - var(--wb-sbw,0px) - 100%) / 2);width:calc(100vw - var(--wb-sbw,0px));max-width:calc(100vw - var(--wb-sbw,0px));margin-left:calc(-1 * var(--wb-bleed-left));margin-right:0}

/* Spacer */
.wb-spacer{display:block}
.wb-spacer--8{height:8px}
.wb-spacer--16{height:16px}
.wb-spacer--24{height:24px}
.wb-spacer--32{height:32px}
.wb-spacer--48{height:48px}
.wb-spacer--64{height:64px}
.wb-spacer--96{height:96px}
.wb-spacer--128{height:128px}
.wb-spacer--160{height:160px}
.wb-spacer--200{height:200px}

/* Hero */
/* The picture and the overlay are background layers, out of the flow: the content is the only
   item the hero lays out, and the grid (with its gap) lives on the content alone. */
.wb-hero{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;margin:var(--wb-block-mt,0) 0 var(--wb-block-mb,0);color:#fff;min-height:420px}
.wb-hero--sm{min-height:280px}
.wb-hero--md{min-height:420px}
.wb-hero--lg{min-height:600px}
.wb-hero__media,.wb-hero__overlay{position:absolute;inset:0}
.wb-hero__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.wb-hero__overlay--20{background:rgba(0,0,0,.2)}
.wb-hero__overlay--40{background:rgba(0,0,0,.4)}
.wb-hero__overlay--60{background:rgba(0,0,0,.6)}
.wb-hero__overlay--80{background:rgba(0,0,0,.8)}
.wb-hero__content{position:relative;display:grid;gap:var(--wb-inner-gap,var(--wb-hero-gap,1rem));min-width:0;padding:var(--wb-inner-pad,2rem);max-width:960px;text-align:center}
.wb-hero .wb-hero__content>*{margin:0}
.wb-hero__text>:first-child{margin-top:0}
.wb-hero__text>:last-child{margin-bottom:0}
.wb-hero--align-left{justify-content:flex-start}
.wb-hero--align-left .wb-hero__content{text-align:left}
.wb-hero--align-right{justify-content:flex-end}
.wb-hero--align-right .wb-hero__content{text-align:right}
.wb-hero__content h1,.wb-hero__content h2{color:inherit}
.wb-hero--text-dark{color:#1a1a1a}
.wb-hero__image--pos-top{object-position:center top}
.wb-hero__image--pos-bottom{object-position:center bottom}
.wb-hero__image--pos-left{object-position:left center}
.wb-hero__image--pos-right{object-position:right center}

/* Buttons — the module's own, self-contained system ("Module styles" mode).
   In "Theme / Bootstrap" mode none of these classes are emitted at all. */
.wb-btn{display:inline-block;padding:.625rem 1.25rem;border:1px solid transparent;border-radius:.375rem;font-weight:600;line-height:1.5;text-align:center;text-decoration:none;cursor:pointer;transition:opacity .15s ease-in-out}
.wb-btn:hover,.wb-btn:focus{opacity:.85;text-decoration:none}
.wb-btn--sm{padding:.375rem .75rem;font-size:.875rem}
.wb-btn--lg{padding:.875rem 1.75rem;font-size:1.125rem}
.wb-btn--primary{background:var(--wb-btn-primary-bg,#2b6cb0);color:var(--wb-btn-primary-fg,#fff)}
.wb-btn--secondary{background:var(--wb-btn-secondary-bg,#4a5568);color:var(--wb-btn-secondary-fg,#fff)}
.wb-btn--outline{background:transparent;border-color:currentColor;color:inherit}
.wb-btn--link{padding-left:0;padding-right:0;background:none;border:0;color:inherit;text-decoration:underline}

/* Products. The grid is the module's own (.wb-cols); the theme's listing class and
   Bootstrap columns are deliberately NOT reused, because themes size .products children
   with their own flex/grid rules (e.g. flex:20%) which fight the block's columns. */
.wb-products{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-products.wb-cols{display:block}
.wb-products__title{margin:0 0 1rem}
.wb-products__grid{display:grid;gap:var(--wb-gap);grid-template-columns:repeat(var(--wb-n,4),minmax(0,1fr))}
.wb-products__item{min-width:0}
/* Theme product-card wrappers size themselves for the theme's own listing grid
   (e.g. flex:0 0 50%); inside a block cell they must simply fill it. Two class
   selectors so the theme's own single-class rule does not win on load order. */
.wb-products .wb-products__item>*{width:100%;max-width:100%;height:100%;flex:0 0 100%;margin:0}
/* …and the listing gutter of such a wrapper (Falcon's .products-list__block) is not needed:
   the block's grid has its own gap. Without it the cards of a row line up to the same height. */
.wb-products .wb-products__item>.products-list__block{padding:0}
/* Theme CMS-page typography (.cms-content ul/ol …) must not reach product cards. */
.wb-products ul,.wb-products ol{padding-left:0;margin:0;list-style:none}

/* Carousel of the Products and Categories blocks (Splide). Before / without JS it is a
   sideways scroller with the same number of visible items, so nothing jumps when Splide mounts. */
.wb-carousel.splide{visibility:visible}
.wb-carousel:not(.is-initialized) .splide__list{display:flex;gap:var(--wb-gap);overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.wb-carousel:not(.is-initialized) .splide__slide{flex:0 0 calc((100% - (var(--wb-n) - 1) * var(--wb-gap)) / var(--wb-n));scroll-snap-align:start}
.wb-carousel .splide__arrow{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);box-shadow:0 1px 4px rgba(0,0,0,.25);cursor:pointer;transform:translateY(-50%)}
.wb-carousel .splide__arrow svg{width:16px;height:16px;fill:#333}
.wb-carousel .splide__arrow--prev{left:-.5rem}
.wb-carousel .splide__arrow--prev svg{transform:scaleX(-1)}
.wb-carousel .splide__arrow--next{right:-.5rem}
.wb-carousel .splide__arrow:disabled{opacity:.35;cursor:default}
.wb-carousel .splide__pagination{display:flex;justify-content:center;gap:.5rem;margin:1rem 0 0;padding:0}
.wb-carousel .splide__pagination__page{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#ccc;cursor:pointer}
.wb-carousel .splide__pagination__page.is-active{background:#333}
.wb-carousel:not(.is-overflow) .splide__arrows,.wb-carousel:not(.is-overflow) .splide__pagination{display:none}
.wb-carousel__toggle{position:absolute;top:-2.75rem;right:0;z-index:1;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:1px solid currentColor;border-radius:50%;background:transparent;color:inherit;cursor:pointer}
.wb-carousel__toggle .splide__toggle__play::before{content:"";display:block;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent currentColor}
.wb-carousel__toggle .splide__toggle__pause::before{content:"";display:block;width:10px;height:12px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.wb-carousel__toggle.is-active .splide__toggle__play,.wb-carousel__toggle:not(.is-active) .splide__toggle__pause{display:none}

/* Divider — the module styles its own <hr> so the editor preview and the
   storefront match whatever the theme does with a bare <hr>. */
.wb-editor-hr{height:0;border:0;border-top:1px solid currentColor;opacity:.25;margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}

/* Image */
.wb-editor-image{margin:var(--wb-block-mt,var(--wb-block-gap,1rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1rem));text-align:center}
.wb-editor-image img{max-width:100%;height:auto}
.wb-editor-image--stretched img{width:100%}
.wb-editor-image--bordered img{border:1px solid #e8e8eb}
.wb-editor-image--background{background:var(--wb-image-bg,#f9f9fb);padding:var(--wb-inner-pad,1rem);border-radius:4px}
.wb-editor-image__caption{margin-top:.5rem;font-size:.875rem;opacity:.75}

/* Embed */
.wb-editor-embed{position:relative;aspect-ratio:16/9;margin:var(--wb-block-mt,var(--wb-block-gap,1rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1rem))}
.wb-editor-embed--4-3{aspect-ratio:4/3}.wb-editor-embed--1-1{aspect-ratio:1/1}.wb-editor-embed--21-9{aspect-ratio:21/9}.wb-editor-embed--9-16{aspect-ratio:9/16}
.wb-editor-embed--auto{aspect-ratio:auto}.wb-editor-embed--auto iframe{position:static;height:auto;min-height:320px}
.wb-editor-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.wb-editor-embed__caption{position:absolute;top:100%;left:0;right:0;margin-top:.5rem;font-size:.875rem;opacity:.75}
.wb-editor-embed:has(.wb-editor-embed__caption){margin-bottom:2.5rem}

/* Warning */
.wb-editor-warning{background:#fff3cd;border:1px solid #ffc107;border-radius:4px;padding:var(--wb-inner-pad,1rem);margin:var(--wb-block-mt,var(--wb-block-gap,1rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1rem))}
.wb-editor-warning__title{font-weight:700;margin-bottom:.25rem}

/* Checklist */
.wb-editor-checklist{list-style:none;padding-left:0;margin:var(--wb-block-mt,var(--wb-block-gap,1rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1rem))}
.wb-editor-checklist__item--checked{text-decoration:line-through;opacity:.7}

/* Link card */
.wb-editor-link a{display:flex;border:1px solid #e8e8eb;border-radius:6px;overflow:hidden;text-decoration:none;color:inherit}
.wb-editor-link__image{flex:0 0 120px}
.wb-editor-link__image img{width:100%;height:100%;object-fit:cover}
.wb-editor-link__content{flex:1;padding:.75rem 1rem}
.wb-editor-link__title{font-weight:600}
.wb-editor-link__description,.wb-editor-link__anchor{font-size:.875rem;opacity:.75}

/* Slider */
.wb-slider{position:relative;margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-slider__track{display:flex;gap:1rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.wb-slider__track::-webkit-scrollbar{display:none}
.wb-slider__slide{position:relative;flex:0 0 100%;min-width:0;margin:0;scroll-snap-align:start}
.wb-slider__image{display:block;width:100%;height:auto}
.wb-slider--16-9 .wb-slider__image{aspect-ratio:16/9;object-fit:cover}
.wb-slider--21-9 .wb-slider__image{aspect-ratio:21/9;object-fit:cover}
.wb-slider--4-3 .wb-slider__image{aspect-ratio:4/3;object-fit:cover}
.wb-slider--1-1 .wb-slider__image{aspect-ratio:1/1;object-fit:cover}
.wb-slider__caption{position:absolute;left:0;right:0;bottom:0;padding:.75rem 1rem;background:rgba(0,0,0,.5);color:#fff}
.wb-slider__arrow{position:absolute;top:50%;z-index:1;display:flex;align-items:center;justify-content:center;width:40px;height:40px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.85);cursor:pointer;transform:translateY(-50%)}
.wb-slider__arrow::before{content:"";width:10px;height:10px;border:solid #333;border-width:0 2px 2px 0}
.wb-slider__arrow--prev{left:.5rem}
.wb-slider__arrow--prev::before{transform:translateX(2px) rotate(135deg)}
.wb-slider__arrow--next{right:.5rem}
.wb-slider__arrow--next::before{transform:translateX(-2px) rotate(-45deg)}
.wb-slider__dots{display:flex;justify-content:center;gap:.5rem;margin-top:.75rem}
.wb-slider__dot{width:10px;height:10px;padding:0;border:0;border-radius:50%;background:#ccc;cursor:pointer}
.wb-slider__dot[aria-current=true]{background:#333}
.wb-slider__pause{position:absolute;top:.5rem;right:.5rem;z-index:2;display:flex;align-items:center;justify-content:center;width:36px;height:36px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.85);cursor:pointer}
.wb-slider__pause::before{content:"";width:10px;height:12px;border-left:3px solid #333;border-right:3px solid #333}
.wb-slider__pause.is-paused::before{width:0;height:0;border-style:solid;border-width:6px 0 6px 10px;border-color:transparent transparent transparent #333}

/* Gallery */
.wb-gallery{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-gallery--gap-sm{--wb-gap:var(--wb-inner-gap,.5rem)!important}
.wb-gallery--gap-md{--wb-gap:var(--wb-inner-gap,1rem)!important}
.wb-gallery--gap-lg{--wb-gap:var(--wb-inner-gap,2rem)!important}
.wb-gallery__item{margin:0;min-width:0}
.wb-gallery__image{display:block;width:100%;height:auto}
.wb-gallery__caption{margin-top:.5rem;font-size:.875rem;opacity:.75}

/* Accordion */
.wb-accordion{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-accordion__item{border-bottom:1px solid #e8e8eb}
.wb-accordion__summary{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 0;cursor:pointer;list-style:none}
.wb-accordion__summary::-webkit-details-marker{display:none}
/* Expand icon: an SVG mask filled with the text colour (views/front/img/accordion, Lucide, ISC). */
.wb-accordion__summary::after{content:"";flex:0 0 auto;width:1.25rem;height:1.25rem;background:currentColor;-webkit-mask:url(../img/accordion/plus.svg) center/contain no-repeat;mask:url(../img/accordion/plus.svg) center/contain no-repeat}
.wb-accordion__item[open]>.wb-accordion__summary::after{-webkit-mask-image:url(../img/accordion/minus.svg);mask-image:url(../img/accordion/minus.svg)}
.wb-accordion--icon-chevron .wb-accordion__summary::after{-webkit-mask-image:url(../img/accordion/chevron-down.svg);mask-image:url(../img/accordion/chevron-down.svg)}
.wb-accordion--icon-chevron .wb-accordion__item[open]>.wb-accordion__summary::after{-webkit-mask-image:url(../img/accordion/chevron-up.svg);mask-image:url(../img/accordion/chevron-up.svg)}
.wb-accordion--icon-arrow .wb-accordion__summary::after{-webkit-mask-image:url(../img/accordion/arrow-down.svg);mask-image:url(../img/accordion/arrow-down.svg)}
.wb-accordion--icon-arrow .wb-accordion__item[open]>.wb-accordion__summary::after{-webkit-mask-image:url(../img/accordion/arrow-up.svg);mask-image:url(../img/accordion/arrow-up.svg)}
.wb-accordion--icon-none .wb-accordion__summary::after{content:none}
.wb-accordion--bold .wb-accordion__title{font-weight:700}
.wb-accordion__title{margin:0;font-size:1.125rem}
.wb-accordion__body{padding:0 0 1rem}

/* Tabs */
.wb-tabs{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-tabs__nav{display:flex;flex-wrap:wrap;gap:.25rem;border-bottom:1px solid #e8e8eb}
.wb-tabs__tab{margin-bottom:-1px;padding:.75rem 1rem;border:0;border-bottom:2px solid transparent;background:none;font:inherit;color:inherit;opacity:.7;cursor:pointer}
.wb-tabs__tab[aria-selected=true]{border-bottom-color:currentColor;font-weight:600;opacity:1}
.wb-tabs__panel{padding:1rem 0}
.wb-tabs__panel[hidden]{display:none}

/* Features */
.wb-features{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-feature{display:block;min-width:0;text-align:center;color:inherit;text-decoration:none}
.wb-features--cards .wb-feature{padding:var(--wb-inner-pad,1.5rem);border:1px solid rgba(127,127,127,.3);border-radius:.5rem;background:rgba(127,127,127,.08)}
/* "Branded card" is a card (it carries .wb-features--cards too) on the brand colour. The extra
   classes outweigh a shop's own .wb-features--cards .wb-feature rule, which would repaint it. */
.wb-features.wb-cols.wb-features--brand .wb-feature{border-color:transparent;background:var(--wb-brand-bg,#f3f9f4)}
/* Alignment of the whole feature (icon, title, text), over the style's own. */
.wb-features.wb-cols.wb-features--align-left .wb-feature{text-align:left}
.wb-features.wb-cols.wb-features--align-center .wb-feature{text-align:center}
.wb-features.wb-cols.wb-features--align-right .wb-feature{text-align:right}
.wb-features.wb-features--align-left .wb-feature__icon{justify-content:flex-start}
.wb-features.wb-features--align-center .wb-feature__icon{justify-content:center}
.wb-features.wb-features--align-right .wb-feature__icon{justify-content:flex-end}
.wb-feature__icon{display:flex;align-items:center;justify-content:center;height:48px;margin-bottom:1rem;font-size:2.5rem;line-height:1}
.wb-feature__icon img{max-height:48px;width:auto}
.wb-feature__icon svg{width:auto;height:48px;max-width:100%}
.wb-feature__title{margin:0 0 .25rem;font-size:1.125rem}
.wb-feature__subtitle{margin:0 0 .5rem;font-size:.9375rem;opacity:.75}
.wb-feature__text{margin:0}
.wb-feature__text>:last-child{margin-bottom:0}

/* Steps: the same grid, numbered. The badge inherits the card's own colours, so it
   stays readable on a light and a dark theme alike. */
.wb-features--steps{counter-reset:wb-step}
.wb-features--steps .wb-feature{counter-increment:wb-step;position:relative;padding:var(--wb-inner-pad,1.5rem 1.25rem 1.25rem);border:1px solid rgba(127,127,127,.3);border-radius:.5rem;text-align:left}
.wb-features--steps .wb-feature::before{content:counter(wb-step);position:absolute;top:-.9rem;left:1.25rem;display:flex;align-items:center;justify-content:center;width:1.8rem;height:1.8rem;box-sizing:border-box;border:1px solid currentColor;border-radius:50%;background:var(--wb-step-bg,inherit);color:inherit;font-size:.875rem;font-weight:700;line-height:1}

/* Image + text. The block's own flex layout: --wb-inner-gap is the space between the picture
   and the copy, --wb-inner-pad the padding of the copy. Pages saved before 1.20.0 still carry
   Bootstrap's .row / .col-* here; zeroing the gutters makes that markup lay out the same way. */
.wb-image-text{display:flex;flex-wrap:wrap;align-items:center;gap:var(--wb-inner-gap,2rem);margin-top:var(--wb-block-mt,var(--wb-block-gap,1.5rem));margin-bottom:var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-image-text.row{--bs-gutter-x:0px;--bs-gutter-y:0px}
.wb-image-text>.wb-image-text__media,.wb-image-text>.wb-image-text__content{flex:1 1 0;width:auto;max-width:none;min-width:0}
.wb-image-text>.wb-image-text__content{padding:var(--wb-inner-pad,0)}
.wb-image-text--1-2>.wb-image-text__content{flex-grow:2}
.wb-image-text--2-1>.wb-image-text__media{flex-grow:2}
.wb-image-text--bottom>.wb-image-text__media{order:2}
@media (min-width:768px){.wb-image-text--right>.wb-image-text__media{order:2}}
.wb-image-text--top,.wb-image-text--bottom{flex-direction:column;flex-wrap:nowrap;align-items:stretch}
.wb-image-text--top>.wb-image-text__media,.wb-image-text--top>.wb-image-text__content,.wb-image-text--bottom>.wb-image-text__media,.wb-image-text--bottom>.wb-image-text__content{flex:0 0 auto}
@media (max-width:767px){.wb-image-text>.wb-image-text__media,.wb-image-text>.wb-image-text__content{flex:0 0 100%}.wb-image-text--top>.wb-image-text__media,.wb-image-text--top>.wb-image-text__content,.wb-image-text--bottom>.wb-image-text__media,.wb-image-text--bottom>.wb-image-text__content{flex:0 0 auto}}
.wb-image-text__image{display:block;width:100%;height:auto}
.wb-image-text--img-natural .wb-image-text__image{width:auto;max-width:100%;margin-inline:auto}
.wb-image-text__heading{margin-top:0}
.wb-image-text__content>:last-child{margin-bottom:0}
/* Alignment of the copy, and of a picture that keeps its own size. */
.wb-image-text--align-left{text-align:left}.wb-image-text--align-center{text-align:center}.wb-image-text--align-right{text-align:right}
.wb-image-text--align-left.wb-image-text--img-natural .wb-image-text__image{margin-inline:0 auto}
.wb-image-text--align-right.wb-image-text--img-natural .wb-image-text__image{margin-inline:auto 0}

/* Categories */
.wb-categories{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-categories.wb-cols{display:block}
.wb-categories__title{margin:0 0 1rem}
.wb-categories__grid{display:grid;gap:var(--wb-gap);grid-template-columns:repeat(var(--wb-n,4),minmax(0,1fr))}
.wb-categories__item{min-width:0}
.wb-categories__item>.wb-category-card{height:100%}
.wb-category-card{display:flex;flex-direction:column;align-items:center;gap:.5rem;min-width:0;padding:var(--wb-inner-pad,1rem);border:1px solid rgba(127,127,127,.25);border-radius:.5rem;color:inherit;text-align:center;text-decoration:none}
.wb-category-card:hover{border-color:currentColor}
.wb-category-card__image{width:100%;height:auto;border-radius:.375rem}
.wb-category-card__name{font-weight:600}
.wb-category-card__count{font-size:.875rem;opacity:.7}
/* Team (issue #2 §6.2): photo, name, position, description. Photo size follows the column, proportions the block's aspect ratio. */
.wb-team{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-team.wb-cols{display:block}
.wb-team__title{margin:0 0 1rem}
.wb-team__grid{display:grid;gap:var(--wb-gap);grid-template-columns:repeat(var(--wb-n,4),minmax(0,1fr))}
.wb-team__item{min-width:0}
.wb-team__item>.wb-team-card{height:100%}
.wb-team-card{display:flex;flex-direction:column;gap:.25rem;min-width:0}
.wb-team--align-center .wb-team-card{align-items:center;text-align:center}
.wb-team--cards .wb-team-card{padding:var(--wb-inner-pad,1rem);border:1px solid rgba(127,127,127,.25);border-radius:.5rem}
.wb-team-card__photo{width:100%;margin-bottom:.5rem}
.wb-team-card__photo img{display:block;width:100%;height:auto}
.wb-team--rounded .wb-team-card__photo img{border-radius:.5rem}
.wb-team--circle .wb-team-card__photo{max-width:12rem}
.wb-team--circle .wb-team-card__photo img{aspect-ratio:1/1;object-fit:cover;border-radius:50%}
.wb-team-card__name{margin:0;font-size:1.125rem}
.wb-team-card__name a{color:inherit}
.wb-team-card__position{margin:0;font-size:.875rem;opacity:.75}
.wb-team-card__text{margin-top:.5rem}
.wb-team-card__text>:last-child{margin-bottom:0}

/* Listing */
.wb-listing{margin:var(--wb-block-mt,var(--wb-block-gap,1.5rem)) 0 var(--wb-block-mb,var(--wb-block-gap,1.5rem))}
.wb-listing__facets,.wb-listing__active-filters{margin-bottom:1rem}

/* Gallery lightbox */
.wb-gallery__link{display:block;cursor:zoom-in}
.wb-lightbox-open{overflow:hidden}
.wb-lightbox{position:fixed;inset:0;z-index:1050;display:flex;align-items:center;justify-content:center;padding:3rem 4rem;background:rgba(0,0,0,.88);outline:0}
.wb-lightbox__figure{display:flex;flex-direction:column;align-items:center;max-width:100%;max-height:100%;margin:0}
.wb-lightbox__image{display:block;max-width:100%;max-height:calc(100vh - 8rem);object-fit:contain}
.wb-lightbox__caption{margin-top:.75rem;color:#fff;font-size:.875rem;text-align:center}
.wb-lightbox__close,.wb-lightbox__arrow{position:absolute;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.15);cursor:pointer}
.wb-lightbox__close:hover,.wb-lightbox__arrow:hover,.wb-lightbox__close:focus-visible,.wb-lightbox__arrow:focus-visible{background:rgba(255,255,255,.35)}
.wb-lightbox__close{top:.75rem;right:.75rem}
.wb-lightbox__close::before,.wb-lightbox__close::after{content:"";position:absolute;width:20px;height:2px;background:#fff;transform:rotate(45deg)}
.wb-lightbox__close::after{transform:rotate(-45deg)}
.wb-lightbox__arrow{top:50%;transform:translateY(-50%)}
.wb-lightbox__arrow::before{content:"";width:12px;height:12px;border:solid #fff;border-width:0 2px 2px 0}
.wb-lightbox__arrow--prev{left:.75rem}
.wb-lightbox__arrow--prev::before{transform:rotate(135deg);margin-left:4px}
.wb-lightbox__arrow--next{right:.75rem}
.wb-lightbox__arrow--next::before{transform:rotate(-45deg);margin-right:4px}
@media (max-width:767px){.wb-lightbox{padding:3rem .5rem}.wb-lightbox__arrow{width:36px;height:36px}.wb-lightbox__arrow--prev{left:.25rem}.wb-lightbox__arrow--next{right:.25rem}}

/* Image proportions (AspectRatio): pictures inside are cropped to the shape. */
.wb-ratio img{object-fit:cover}
.wb-ratio--1-1 img{aspect-ratio:1/1}.wb-ratio--4-3 img{aspect-ratio:4/3}.wb-ratio--3-2 img{aspect-ratio:3/2}.wb-ratio--16-9 img{aspect-ratio:16/9}
.wb-ratio--21-9 img{aspect-ratio:21/9}.wb-ratio--3-4 img{aspect-ratio:3/4}.wb-ratio--2-3 img{aspect-ratio:2/3}
.wb-categories ul,.wb-categories ol,.wb-team .splide__list{padding-left:0;margin:0;list-style:none}

/* Tables typed into the rich-text fields (hero, image + text, features, FAQ answers). */
.wb-hero__text table,.wb-image-text__text table,.wb-feature__text table,.wb-accordion__body table{width:100%;margin:0 0 1rem;border-collapse:collapse}
.wb-hero__text :is(th,td),.wb-image-text__text :is(th,td),.wb-feature__text :is(th,td),.wb-accordion__body :is(th,td){padding:.4rem .6rem;border:1px solid rgba(127,127,127,.35);text-align:left;vertical-align:top}

/* Block settings > Spacing: one class per side that the author actually set, on the
   block's own root element (TuneMerger). !important so a component or theme rule never
   overrides what was set in the editor; the -m classes are the mobile values. */
.wb-mt{margin-top:var(--wb-mt)!important}.wb-mr{margin-right:var(--wb-mr)!important}.wb-mb{margin-bottom:var(--wb-mb)!important}.wb-ml{margin-left:var(--wb-ml)!important}.wb-pt{padding-top:var(--wb-pt)!important}.wb-pr{padding-right:var(--wb-pr)!important}.wb-pb{padding-bottom:var(--wb-pb)!important}.wb-pl{padding-left:var(--wb-pl)!important}
@media (max-width:767px){.wb-ip-m{--wb-inner-pad:var(--wb-inner-pad-m)!important}.wb-ig-m{--wb-inner-gap:var(--wb-inner-gap-m)!important}}
@media (max-width:767px){.wb-mt-m{margin-top:var(--wb-mt-m)!important}.wb-mr-m{margin-right:var(--wb-mr-m)!important}.wb-mb-m{margin-bottom:var(--wb-mb-m)!important}.wb-ml-m{margin-left:var(--wb-ml-m)!important}.wb-pt-m{padding-top:var(--wb-pt-m)!important}.wb-pr-m{padding-right:var(--wb-pr-m)!important}.wb-pb-m{padding-bottom:var(--wb-pb-m)!important}.wb-pl-m{padding-left:var(--wb-pl-m)!important}}

/* Desktop / mobile variant of the same picture (hero, image + text, slider): two <img>
   instead of <picture><source>, so a theme that wraps every image in its own <picture>
   (WebP conversion) cannot nest one inside the other and lose the mobile image. */
.wb-img--mobile{display:none}
@media (max-width:767px){.wb-img--desktop{display:none}.wb-img--mobile{display:block}}
/* …and such a wrapper must not affect the layout of the blocks. */
.wb-hero__media picture,.wb-slider__media picture,.wb-image-text__media picture,.wb-gallery__item picture,.wb-feature__icon picture,.wb-editor-image picture,.wb-category-card picture,.wb-team-card__photo picture{display:contents}