.sb-gx{--sb-gx:64px;width:var(--sb-gx);height:var(--sb-gx);display:block;pointer-events:none;
  color:#5cc0ff;transform:translateZ(0)}
.sb-gx svg{width:100%;height:100%;overflow:visible;display:block}

/* Disc tilt: squashed on Y and rolled slightly, so it reads as a disc seen at
   an angle instead of a flat wheel. */
.sb-gx .gx-tilt{transform:rotate(-18deg) scaleY(.62);transform-origin:50px 50px}

/* Differential rotation. Same direction, very different periods - the shear
   between them is the swirl. */
.sb-gx .gx-outer{transform-origin:50px 50px;animation:sbGxTurn 26s linear infinite}
.sb-gx .gx-mid  {transform-origin:50px 50px;animation:sbGxTurn 16s linear infinite}
.sb-gx .gx-inner{transform-origin:50px 50px;animation:sbGxTurn 9s  linear infinite}
@keyframes sbGxTurn{to{transform:rotate(360deg)}}

/* Blur is scaled off --sb-gx rather than fixed in px. A fixed 1.1px blur is
   right at 82px and completely swamps the arms at 22px, turning the whole
   thing into a smudge. These ratios reproduce the previous values at 64px and
   stay crisp all the way down. */
.sb-gx .gx-arm{fill:none;stroke:currentColor;stroke-linecap:round}
.sb-gx .gx-outer .gx-arm{stroke-width:5.5;opacity:.28;filter:blur(calc(var(--sb-gx) * .017))}
.sb-gx .gx-mid   .gx-arm{stroke-width:6.5;opacity:.45;filter:blur(calc(var(--sb-gx) * .012))}
.sb-gx .gx-inner .gx-arm{stroke-width:7.5;opacity:.7; filter:blur(calc(var(--sb-gx) * .008))}

.sb-gx .gx-halo{fill:currentColor;opacity:.10;filter:blur(calc(var(--sb-gx) * .09))}
.sb-gx .gx-bulge{fill:#cfe9ff;opacity:.55;filter:blur(calc(var(--sb-gx) * .045))}
.sb-gx .gx-core{fill:#fff;filter:blur(calc(var(--sb-gx) * .018));animation:sbGxCore 4.5s ease-in-out infinite}
@keyframes sbGxCore{0%,100%{opacity:.92;transform:scale(1)}50%{opacity:1;transform:scale(1.1)}}
.sb-gx .gx-core{transform-origin:50px 50px}

.sb-gx .gx-dust circle{fill:#fff}
.sb-gx .gx-dust{animation:sbGxTurn 34s linear infinite;transform-origin:50px 50px;opacity:.55}

/* Light theme: a white core vanishes on a white page, so the nucleus becomes
   the densest blue rather than the brightest white - the same read, inverted. */
html.sb-light .sb-gx{color:#2563eb}
html.sb-light .sb-gx .gx-halo{opacity:.14}
html.sb-light .sb-gx .gx-bulge{fill:#3b82f6;opacity:.5}
html.sb-light .sb-gx .gx-core{fill:#1e3a8a}
html.sb-light .sb-gx .gx-dust circle{fill:#1e40af}

/* ---------- host containers ---------- */
.sb-gx-host{position:relative}
.sb-gx-mount{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:5}

/* 1. block cart / checkout boot - the longest wait on the site */
.wp-block-woocommerce-cart.is-loading,
.wp-block-woocommerce-checkout.is-loading{position:relative;min-height:340px}
.wp-block-woocommerce-cart.is-loading > *,
.wp-block-woocommerce-checkout.is-loading > *{opacity:0}
.sb-gx-caption{position:absolute;left:0;right:0;top:calc(50% + 62px);text-align:center;
  font-family:var(--display,sans-serif);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim,#646f79)}

/* 2. WooCommerce blockUI overlay */
.blockUI.blockOverlay{background:rgba(7,8,11,.55)!important;opacity:1!important}
html.sb-light .blockUI.blockOverlay{background:rgba(255,255,255,.6)!important}

/* 3. cart drawer states */
.sbq.is-loading,.sb-upsell-add.is-loading,.sb-promo-apply.is-loading{position:relative}

/* 4. assistant typing */
.sb-a-typing{position:relative;min-width:58px;min-height:36px}
.sb-a-typing i{display:none}

@media (prefers-reduced-motion:reduce){
  .sb-gx .gx-outer,.sb-gx .gx-mid,.sb-gx .gx-inner,.sb-gx .gx-core,.sb-gx .gx-dust{animation:none!important}
}