/* Shop Motion Extra (01.11.2026). Nur transform/opacity bei Bewegung; Farb-/Rand-Uebergaenge nur fuer Hover-Zustaende. */
:root{--bbx-ease:cubic-bezier(.2,.7,.2,1)}

/* ---- Produkt-Tabs: Unterstrich gleitet (JS legt .bbx-tabs-ink an; ohne JS bleibt der Rand am aktiven Tab) ---- */
.bbx-tabs-ready ul.wc-tabs{position:relative}
.bbx-tabs-ready ul.wc-tabs>li{border-bottom-color:transparent!important}
.bbx-tabs-ink{position:absolute;left:0;top:0;width:1px;height:2px;background:var(--bb-ink,#1d1d1f);transform-origin:0 0;transform:translate(0,0) scaleX(0);pointer-events:none}
@media (prefers-reduced-motion:no-preference){
 .bbx-tabs-ink.is-moving{transition:transform .28s var(--bbx-ease)}
}
ul.wc-tabs>li>a{transition:color .2s ease,opacity .2s ease}
@media (hover:hover){ul.wc-tabs>li:not(.active)>a:hover{color:var(--bb-ink,#1d1d1f)}}

/* ---- Reveal fuer zusaetzliche Abschnitte (Startzustand NUR wenn JS die Klasse setzt; Bewegung per Web Animations) ---- */
@media (prefers-reduced-motion:no-preference){
 .bbx-rv{opacity:0}
}

/* ---- Footer-Links ---- */
.bb-footer .bb-legal-links .wp-block-navigation-item__content{transition:transform .25s var(--bbx-ease),color .2s ease}
.bb-footer__who a,.bb-footer p a{background:linear-gradient(currentColor,currentColor) 0 100%/0 1px no-repeat;transition:background-size .3s var(--bbx-ease),color .2s ease}
@media (hover:hover){
 .bb-footer .bb-legal-links .wp-block-navigation-item__content:hover{transform:translateX(3px);text-decoration:none}
 .bb-footer__who a:hover,.bb-footer p a:hover{background-size:100% 1px;text-decoration:none}
}
.bb-footer .bb-legal-links .wp-block-navigation-item__content:focus-visible{transform:translateX(3px)}
.bb-footer__who a:focus-visible,.bb-footer p a:focus-visible{background-size:100% 1px}

/* ---- Chips, Pagination, Filter-Chips: Rand-/Farbwechsel weich ---- */
.bb-chip .wp-block-button__link{transition:background-color .25s,color .25s,border-color .25s,transform .25s var(--bbx-ease),box-shadow .25s}
.wp-block-query-pagination a,.wp-block-query-pagination-numbers .page-numbers{transition:background-color .2s,color .2s,border-color .2s,transform .2s var(--bbx-ease)}
.bb-ft__chips *,.bb-ft button{transition:background-color .2s,color .2s,border-color .2s,transform .15s var(--bbx-ease),opacity .2s}

/* ---- Produktkarten: Tastaturfokus wie Hover ---- */
.bb-grid .wc-block-product:focus-within .wc-block-components-product-image img:first-child{transform:scale(1.03)}
.bb-grid .wc-block-product:focus-within .wp-block-post-title a{background-size:100% 1px}
.bb-grid .wc-block-product:active .wc-block-components-product-image img:first-child{transform:scale(1.015);transition-duration:.15s}

/* ---- Kaufknopf: aktiv/inaktiv weich (gleiche Dauern wie Theme + Opacity) ---- */
.bb-product .single_add_to_cart_button{transition:background-color .25s,transform .25s var(--bb-ease,cubic-bezier(.2,.7,.2,1)),opacity .25s}

/* ---- Variantenwahl: Haekchen poppt ein ---- */
@media (prefers-reduced-motion:no-preference){
 .bb-opt[aria-pressed=true]::before{animation:bbx-check .22s var(--bbx-ease) both}
 @keyframes bbx-check{from{opacity:0;transform:rotate(45deg) translate(-1px,-1px) scale(.4)}to{opacity:1;transform:rotate(45deg) translate(-1px,-1px) scale(1)}}
}
@media (prefers-reduced-motion:reduce){
 .bbx-tabs-ink{transition:none!important}
 .bbx-rv{opacity:1!important}
}