:root{
  /* colours (shop + single product) */
  --sh-pill-bg:#ffffff;
  --sh-pill-color:#333333;
  --sh-pill-border:#dcdcdc;
  --sh-pill-active-color:#ffffff; /* text colour on the active pill */
  --sh-g1:#6a9c1f;                /* active gradient: start */
  --sh-g2:#b6e04a;                /* active gradient: end */
  --sh-angle:135deg;              /* gradient angle */
  --sh-glow:.6;                   /* glow strength 0-1 */
  --sh-speed:2.6s;                /* animation cycle (higher = slower) */
  --sh-pill-active-border:var(--sh-g1);

  /* shop cards */
  --sh-edge:8px;            /* gap of the pills from the image edges */
  --sh-btn-text-color:#ffffff; /* theme cart button label colour on hover (desktop) */

  /* single product page */
  --sh-single-font:14px;
  --sh-single-pad:9px 18px;
}

/* ---------- Shop / loop pills (bottom-left) ---------- */
.sh-pills{position:absolute;left:var(--sh-edge);right:var(--sh-edge);bottom:var(--sh-edge);z-index:5;
  display:flex;flex-wrap:wrap;gap:6px;justify-content:flex-start;align-items:flex-end}

.sh-pills .sh-pill,
.sh-swatches .sh-swatch{
  all:unset;box-sizing:border-box;cursor:pointer;
  line-height:1 !important;font-weight:500 !important;letter-spacing:0 !important;text-transform:none !important;
  min-height:0 !important;height:auto !important;width:auto !important;margin:0 !important;
  border-radius:999px !important;box-shadow:none !important;transition:all .15s;
  background:var(--sh-pill-bg) !important;color:var(--sh-pill-color) !important;
  border:1px solid var(--sh-pill-border) !important;
}
.sh-pills .sh-pill{font-size:12px !important;padding:6px 12px !important}
.sh-swatches .sh-swatch{font-size:var(--sh-single-font) !important;padding:var(--sh-single-pad) !important}

.sh-pills .sh-pill:hover,
.sh-swatches .sh-swatch:hover{border-color:var(--sh-pill-active-border) !important}
.sh-pills .sh-pill.is-active,
.sh-pills .sh-pill.is-active:hover,
.sh-pills .sh-pill.is-active:focus,
.sh-pills .sh-pill.is-active:active,
.sh-swatches .sh-swatch.is-active,
.sh-swatches .sh-swatch.is-active:hover,
.sh-swatches .sh-swatch.is-active:focus,
.sh-swatches .sh-swatch.is-active:active{
  background:linear-gradient(var(--sh-angle),var(--sh-g1),var(--sh-g2)) !important;
  color:var(--sh-pill-active-color) !important;
  -webkit-text-fill-color:var(--sh-pill-active-color) !important;
  border-color:var(--sh-pill-active-border) !important;
  position:relative !important;
}

/* ---------- Active pill: glow + animation ---------- */
/* glow layer: a blurred copy of the gradient behind the pill */
.sh-pills .sh-pill.is-active::before,
.sh-swatches .sh-swatch.is-active::before{
  content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:linear-gradient(var(--sh-angle),var(--sh-g1),var(--sh-g2));
  filter:blur(9px);opacity:var(--sh-glow);
}
/* ring layer: only visible in "expansion" mode */
.sh-pills .sh-pill.is-active::after,
.sh-swatches .sh-swatch.is-active::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  opacity:0;box-shadow:0 0 0 2px var(--sh-g1);
}

/* Breathing: pill scales gently while the glow swells and fades */
.sh-anim-breathing .sh-pills .sh-pill.is-active,
.sh-anim-breathing .sh-swatches .sh-swatch.is-active,
#sh-preview.sh-anim-breathing .sh-swatch.is-active{
  animation:shBreathe var(--sh-speed) ease-in-out infinite;
}
.sh-anim-breathing .sh-pills .sh-pill.is-active::before,
.sh-anim-breathing .sh-swatches .sh-swatch.is-active::before{
  animation:shGlowBreathe var(--sh-speed) ease-in-out infinite;
}
@keyframes shBreathe{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}
@keyframes shGlowBreathe{
  0%,100%{opacity:calc(var(--sh-glow) * .4);filter:blur(6px)}
  50%    {opacity:var(--sh-glow);filter:blur(13px)}
}

/* Expansion: a ring grows outward from the pill and fades */
.sh-anim-expansion .sh-pills .sh-pill.is-active::after,
.sh-anim-expansion .sh-swatches .sh-swatch.is-active::after{
  animation:shExpand var(--sh-speed) ease-out infinite;
}
@keyframes shExpand{
  0%  {inset:-1px;opacity:.75}
  100%{inset:-10px;opacity:0}
}

/* Normal (.sh-anim-none): static gradient + glow, nothing above applies */

@media (prefers-reduced-motion:reduce){
  .sh-pills .sh-pill.is-active,
  .sh-swatches .sh-swatch.is-active,
  .sh-pills .sh-pill.is-active::before,
  .sh-swatches .sh-swatch.is-active::before,
  .sh-pills .sh-pill.is-active::after,
  .sh-swatches .sh-swatch.is-active::after{animation:none !important}
}

.sh-pills.sh-shake{animation:shShake .35s}
@keyframes shShake{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}

/* Card image fade when the variation image changes */
.sh-img-t{transition:opacity .2s ease}
.sh-img-fading{opacity:.35 !important}
/* Once a variation image is showing, hide the theme's hover (second) image so it can't override it.
   If your hover image uses another class, add it here and in CFG.backImg below. */
.sh-var-img .back-img,
.sh-var-img .back-image,
.sh-var-img .nasa-product-img-second,
.sh-var-img .hover-img{opacity:0 !important;visibility:hidden !important}

/* Theme cart button label on pill products (desktop / laptop): white text.
   Only the label is coloured, the cart icon keeps the theme's colours. */
@media (min-width:992px) and (hover:hover){
  .sh-atc-theme .sh-atc-text{
    color:var(--sh-btn-text-color) !important;
    -webkit-text-fill-color:var(--sh-btn-text-color) !important;
  }
}

/* ---------- Single product / quick view pills ---------- */
.sh-native-hidden{position:absolute !important;opacity:0 !important;pointer-events:none !important;
  width:1px !important;height:1px !important;overflow:hidden !important;clip:rect(0 0 0 0) !important}
.sh-swatches{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:2px 0;isolation:isolate}
.sh-swatches .sh-swatch.is-disabled{opacity:.4;text-decoration:line-through;cursor:not-allowed;pointer-events:none}