.upsells-9h .pc-body > .pc-cta { grid-column: 3 !important; }

/* --- Isolation & stacking: ensure nothing else bleeds into navbar --- */
.sa-nav { position: sticky; top: 0; z-index: 100; isolation: isolate; }
.sa-nav--hidden { transform: translateY(-100%); opacity: 0; pointer-events: none; transition: transform .3s ease, opacity .3s ease; }

/* --- Outer shell with animated glow around only --- */
.sa-shell { position: relative; max-width: 80rem; margin: .5rem auto 0; padding: 0 0; }
.sa-glow {
  position: absolute; inset: 0; border-radius: 1rem; pointer-events: none;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #ef4444);
  background-size: 300% 100%;
  animation: saGlowSlide 8s linear infinite;
  filter: blur(12px);
  opacity: .45;
}
@keyframes saGlowSlide {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* --- Clean solid interior card (gray transparent + glass blur) --- */
.sa-card {
  position: relative; border-radius: 1rem;
  background: rgba(15, 15, 19, 0.456);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.05);
}

/* --- Fixed row height so it's identical on every page --- */
.sa-row {
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  height: 3.25rem;
  padding: 0 .75rem;
}
@media (min-width: 1024px) {
  .sa-row { height: 3.75rem; padding: 0 1.25rem; }
}

/* --- Left (brand) --- */
.sa-brand { display: inline-flex; align-items: center; gap: .75rem; min-width: 0; text-decoration: none; }
.sa-logoBox { display: inline-flex; padding: .25rem; border-radius: .5rem; background: rgba(255,255,255,.00); outline: 0px solid rgba(255,255,255,.10); }
.sa-logoImg { height: 2.5rem; object-fit: contain; }
@media (min-width: 1424px){ .sa-logoImg { height: 2.5rem; } }
.sa-shopName { color: #fff; font-weight: 800; font-size: 1rem; letter-spacing: -.01em; white-space: nowrap; }
@media (min-width: 1024px){ .sa-shopName { font-size: 1.125rem; } }

/* --- Center links (desktop only) --- */
.sa-center { display: none; align-items: center; gap: 2rem; }
@media (min-width: 1024px){ .sa-center { display: flex !important; } }
.sa-center { flex-wrap: wrap; min-width: 0; }
.sa-link {
  color: rgba(255,255,255,.8); font-weight: 700; font-size: .95rem; text-decoration: none;
  transition: transform .2s ease, color .2s ease;
  white-space: nowrap;
}
.sa-link:hover { color: #fff; transform: scale(1.06); }
.sa-link.is-active { color: #fff; }

/* --- Right side --- */
/* --- Right side --- */
.sa-right { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }

/* --- Buttons (square) --- */
.sa-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.25rem; height: 2.25rem; border-radius: .75rem;
  color: rgba(255,255,255,.9);
  border: 1px solid rgba(236,72,153,.4);
  background: transparent;
  transition: transform .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease, width .35s ease;
  box-shadow: none;
  overflow: hidden;
}
.sa-btn:hover {
  color: #fff; border-color: rgba(236,72,153,.7);
  transform: scale(1.05);
  box-shadow: 0 2px 12px -4px rgba(236,72,153,.25);
}

/* --- Badge (cart) --- */
.sa-btn--badge { position: relative; }
.sa-badge {
  position: absolute; top: -0.5rem; right: -0.5rem;
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; border-radius: 999px;
  background: #ec4899; color: #fff; font-size: 10px; line-height: 1;
}

/* --- Restore button (fixed) --- */
.sa-restore { position: fixed; top: .5rem; right: 1rem; z-index: 150; }

@keyframes marquee {
  0%   { transform: translateX(0%); }
  100% { transform: translateX(-50%); }
}
.animate-marquee {
  display: flex;
  width: max-content;
  animation: marquee 30s linear infinite;
}

/* ================================
   Discord CTA (card + glow + slash)
   ================================ */
.sa-discordBtn{
  position:relative;
  display:inline-flex;align-items:center;justify-content:center;
  height:2.25rem;border-radius:.75rem;
  text-decoration:none;transition:transform .3s ease;
}
.sa-discordBtn:hover{ transform:translateY(-2px) scale(1.06); }

/* Rainbow glow behind (lighter than navbar) */
.sa-discordGlow{
  position:absolute;inset:0;border-radius:.75rem;pointer-events:none;
  background:linear-gradient(90deg,#7c3aed,#ec4899,#ef4444);
  background-size:300% 100%;animation:saGlowSlide 8s linear infinite;
  filter:blur(8px);opacity:.45;
}

/* Card body (like your logo box) */
.sa-discordCard{
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;gap:.5rem;
  height:100%;padding:0 .9rem;border-radius:.75rem;
  background:rgba(255,255,255,.06);
  outline:1px solid rgba(255,255,255,.10);
  border:1px solid rgba(236,72,153,.28);
  color:#fff;
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
  transition:background-position .3s ease, box-shadow .3s ease;
  background-image:linear-gradient(45deg,#6366f1,#8b5cf6,#a855f7);
  background-size:200% 200%;
}
.sa-discordBtn:hover .sa-discordCard{
  background-position:100% 100%;
  box-shadow:0 18px 36px rgba(99,102,241,.35);
}

/* The sheen — 45° white fade sweep */
.sa-discordCard::before{
  content:"";
  position:absolute;top:0;left:-120%;
  width:30%;height:100%;
  background:linear-gradient(45deg,transparent,rgba(255,255,255,.6),transparent);
  transform:skewX(-45deg);
  transition:left .7s ease;
  pointer-events:none;
}
.sa-discordBtn:hover .sa-discordCard::before{ left:120%; }

/* Discord text/icon */
.sa-discordCard i.fa-brands.fa-discord{ font-size:1rem; line-height:1; }
.sa-discordText{ font-weight:800;font-size:.9rem;letter-spacing:-.01em;white-space:nowrap; }

/* Base product card */
.product-card {
  position: relative;
  border-radius: 1rem;
  transition: transform 0.3s ease, box-shadow 0.4s ease;
}
.product-card::after {
  content: "";
  position: absolute; inset: 0; border-radius: 1rem; padding: 2px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #ef4444);
  background-size: 300% 100%;
  filter: blur(6px);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: -1;
}
.product-card:hover::after { opacity: 1; animation: productGlowSlide 6s linear infinite; }
@keyframes productGlowSlide { 0%{background-position:0% 50%} 50%{background-position:100% 50%} 100%{background-position:0% 50%} }

/* ================================
   Navbar search — round & expands left
   ================================ */
.sa-searchWrap{
  position: relative;
  display: inline-flex; align-items: center; gap: .5rem;
  width: 2.25rem; height: 2.25rem; border-radius: 999px;
  color: rgba(255,255,255,.9);
  background: transparent;
  border: 1px solid rgba(236,72,153,.4);
  outline: 1px solid rgba(255,255,255,.10);
  padding: 0 .6rem; overflow: hidden;
  transform-origin: right center;           /* expand to the LEFT */
  flex-direction: row-reverse;              /* icon at right */
  justify-content: flex-end;
  transition: width .35s ease, box-shadow .25s ease, border-color .25s ease, transform .2s ease, background .25s ease;
  box-shadow: none; cursor: text;
}
.sa-searchWrap::after{
  content: ""; position: absolute; inset: -10px; border-radius: inherit;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #ef4444);
  background-size: 300% 100%; filter: blur(16px); opacity: 0; z-index: -1;
  transition: opacity .4s ease, background-position 6s linear;
}
.sa-searchWrap:hover,
.sa-searchWrap:focus-within{
  width: clamp(14rem, 28vw, 24rem);
  background: rgba(255,255,255,.06);
  border-color: rgba(236,72,153,.7);
  box-shadow: 0 2px 12px -4px rgba(236,72,153,.25);
}
.sa-searchWrap:hover::after,
.sa-searchWrap:focus-within::after{ opacity: .55; animation: saGlowSlide 8s linear infinite; }

/* SEARCH icon fix: keep crisp & centered vertically */
.sa-searchIcon{
  width: 1rem; height: 1rem;
  display: block;             /* avoid inline SVG baseline weirdness */
  opacity: .95; flex: 0 0 auto;
  pointer-events: none;
}

/* Input (collapsed → expanded) */
.sa-searchInput{
  flex: 1 1 auto; min-width: 0; width: 0; opacity: 0;
  background: transparent; border: none; outline: none;
  color: #fff; font-weight: 700; letter-spacing: -.01em; font-size: .95rem; caret-color: #fff;
  transition: width .35s ease, opacity .2s ease .08s;
}
.sa-searchWrap:hover .sa-searchInput,
.sa-searchWrap:focus-within .sa-searchInput{ width: 100%; opacity: 1; }
.sa-searchInput::placeholder{ color: rgba(255,255,255,.6); font-weight: 600; }

/* Small screens: slightly smaller expansion to avoid crowding */
@media (max-width: 420px){
  .sa-searchWrap:hover,
  .sa-searchWrap:focus-within{
    width: clamp(11rem, 70vw, 16rem);
  }
}

/* ================================
   EXPANDING RIGHT-SIDE BUTTON LABELS
   (Cart, Login/Account, Hide navbar)
   ================================ */

/* Base for expandable right-group buttons */
.sa-right .sa-btn[title],
.sa-right a.sa-btn[title]{
  position: relative;
  transform-origin: right center;     /* grow to the LEFT */
  justify-content: flex-end;          /* keep icon on the right edge when expanded */
  padding: 0 .6rem;
}

/* Shared label pseudo-element (hidden by default) */
.sa-right .sa-btn[title]::before{
  content: attr(title);
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-weight: 800;
  font-size: .85rem;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
}

/* Default collapsed width */
.sa-right .sa-btn[title]{
  width: 2.25rem;
}

/* Expand on hover/focus */
.sa-right .sa-btn[title]:hover,
.sa-right .sa-btn[title]:focus-visible{
  width: clamp(5.25rem, 8.5vw, 5rem);
}

/* Reveal label on hover */
.sa-right .sa-btn[title]:hover::before,
.sa-right .sa-btn[title]:focus-visible::before{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Specific text overrides (shorter labels) */
.sa-right .sa-btn[title="Hide navbar"]::before { content: "Hide"; }
.sa-right .sa-btn[title="Cart"]::before        { content: "Cart"; }
.sa-right .sa-btn[title="Login"]::before       { content: "Login"; }
.sa-right .sa-btn[title="Account"]::before     { content: "Account"; }

/* Keep the cart badge in view when the button expands */
.sa-right .sa-btn--badge .sa-badge { right: -0.5rem; }

/* Make sure the “Hide navbar” button is clearly visible */
.sa-right .sa-btn[title="Hide navbar"]{
  border-color: rgba(236,72,153,.6);
  box-shadow: 0 2px 12px -6px rgba(236,72,153,.35);
}

/* ================================
   Reduced motion
   ================================ */
@media (prefers-reduced-motion: reduce){
  .sa-searchWrap,
  .sa-searchWrap::after,
  .sa-searchInput,
  .sa-btn { transition: none !important; animation: none !important; }
}

/* --- Ensure the center nav links are visible and don't get squeezed --- */
.sa-row > .flex { flex: 1 1 auto; min-width: 0; }       /* allow center to grow */
@media (min-width: 750px){
  .sa-center { display: flex !important; flex: 1 1 auto; gap: 2rem; min-width: 0; flex-wrap: wrap; }
}
.sa-right { flex-shrink: 0; }                            /* right-side buttons don't steal width */

/* Optional: on very small screens, allow horizontal scroll for links */
@media (max-width: 768px){
  .sa-center { overflow-x: auto; -webkit-overflow-scrolling: touch; gap: 1rem; }
  .sa-center::-webkit-scrollbar { display: none; }
}

/* Make nav link text a touch brighter for readability */
.sa-link { color: rgba(255,255,255,.85); }
.sa-link:hover, .sa-link.is-active { color: #fff; }

/* --- Search button/icon polish (round, expand-left already set) --- */
.sa-searchWrap { line-height: 0; }       /* prevents input/inline baseline wobble */
.sa-searchIcon{
  width: 1rem; height: 1rem;
  display: block;                         /* crisp render */
  opacity: .95; flex: 0 0 auto;
  color: currentColor; fill: currentColor; /* ensure it takes text color */
}

/* When expanded, keep the input text aligned and readable */
.sa-searchInput{
  line-height: 1.2;
  padding-inline-start: .2rem;            /* tiny breathing room to the left of text */
}

/* --- Right-side expandable buttons: Cart / Login / Account / Hide --- */
.sa-right .sa-btn[title],
.sa-right a.sa-btn[title]{
  position: relative;
  transform-origin: right center;         /* expand to the LEFT */
  justify-content: flex-end;
  padding: 0 .6rem;
  width: 2.25rem;                         /* collapsed */
  overflow: hidden;
  transition: width .30s ease, border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}

/* Label (hidden → visible on hover/focus) */
.sa-right .sa-btn[title]::before{
  content: attr(title);
  position: absolute;
  left: .6rem;
  top: 50%;
  transform: translateY(-50%) translateX(8px);
  font-weight: 800;
  font-size: .82rem;
  color: #fff;
  opacity: 0;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease;
}

/* Expand LESS than before */
.sa-right .sa-btn[title]:hover,
.sa-right .sa-btn[title]:focus-visible{
  width: clamp(4.75rem, 9vw, 6rem);       /* compact reveal */
}
.sa-right .sa-btn[title]:hover::before,
.sa-right .sa-btn[title]:focus-visible::before{
  opacity: 1;
  transform: translateY(-50%) translateX(0);
}

/* Short label text overrides (ensures concise text) */
.sa-right .sa-btn[title="Hide navbar"]::before { content: "Hide"; }
.sa-right .sa-btn[title="Cart"]::before        { content: "Cart"; }
.sa-right .sa-btn[title="Login"]::before       { content: "Login"; }
.sa-right .sa-btn[title="Account"]::before     { content: "Account"; }

/* Keep the cart badge visible while expanding */
.sa-right .sa-btn--badge .sa-badge { right: -0.5rem; }

/* Make the Hide button clearly visible even when collapsed */
.sa-right .sa-btn[title="Hide navbar"]{
  border-color: rgba(236,72,153,.65);
  color: #fff;
  box-shadow: 0 2px 12px -6px rgba(236,72,153,.35);
}

/* Safety: prevent the big Discord button from crushing links on narrower desktops */
@media (max-width: 1200px){
  .sa-discordBtn .sa-discordText { display: none; }  /* keep icon only */
  .sa-discordBtn { width: 2.25rem; padding: 0; }
  .sa-discordCard { padding: 0; width: 100%; justify-content: center; }
}

/* === Search button: match .sa-btn when NOT hovering === */
.sa-searchWrap{
  /* match the other buttons' shape & size */
  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;             /* was 999px */
  background: transparent;           /* no glass until hover */
  border: 1px solid rgba(236,72,153,.4);
  box-shadow: none;
  color: rgba(255,255,255,.9);
}

/* keep icon crisp & centered like others */
.sa-searchIcon{
  width: 1rem;
  height: 1rem;
  display: block;
  opacity: .95;
  color: currentColor;
  fill: currentColor;
}

/* still expand to the LEFT on hover/focus (unchanged) */
.sa-searchWrap:hover,
.sa-searchWrap:focus-within{
  width: clamp(14rem, 28vw, 24rem);
  background: rgba(255,255,255,.06);
  border-color: rgba(236,72,153,.7);
  box-shadow: 0 2px 12px -4px rgba(236,72,153,.25);
}

.sa-searchWrap::after{
  opacity: 0;                         /* idle = no halo */
}
.sa-searchWrap:hover::after,
.sa-searchWrap:focus-within::after{
  opacity: .55;
}

/* === Search icon: match other .sa-btn icons === */
.sa-searchIcon{
  width: 1rem;
  height: 1rem;
  display: block;                 /* crisp, no baseline gap */
  line-height: 1;
  flex: 0 0 auto;
  color: rgba(255,255,255,.9);
  fill: currentColor;             /* SVG path uses the text color */
  transition: transform .2s ease, color .2s ease, filter .2s ease;
  transform: translateZ(0);       /* sharper rendering */
  pointer-events: none;           /* clicks focus the input */
}

.sa-searchWrap:hover .sa-searchIcon,
.sa-searchWrap:focus-within .sa-searchIcon{
  color: #fff;                    /* same hover brighten as .sa-btn */
  transform: scale(1.1);          /* subtle pop like other buttons */
  filter: drop-shadow(0 2px 12px rgba(236,72,153,.25));
}

/* Center the search icon when collapsed; only add padding when expanded */
.sa-searchWrap{
  justify-content: center;   /* centered icon */
  padding: 0;                /* no horizontal offset in collapsed state */
}

/* Expanded state: input grows left, icon stays on right */
.sa-searchWrap:hover,
.sa-searchWrap:focus-within{
  justify-content: flex-end; /* icon to right edge */
  padding: 0 .6rem;          /* breathing room for input text */
}

/* Hide legacy inline SVG if any remains (safety) */
.sa-searchWrap .sa-searchIcon { display: none !important; }

/* Font Awesome magnifier: match the other buttons exactly */
.sa-searchIconFa{
  font-size: 1rem;           /* same as other .sa-btn icons */
  line-height: 1;
  display: block;
  color: rgba(255,255,255,.9);
  transition: transform .2s ease, color .2s ease, filter .2s ease;
  pointer-events: none;      /* clicks focus input */
}

/* Hover/focus polish like the other buttons */
.sa-searchWrap:hover .sa-searchIconFa,
.sa-searchWrap:focus-within .sa-searchIconFa{
  color: #fff;
  transform: scale(1.1);
  filter: drop-shadow(0 2px 12px rgba(236,72,153,.25));
}

/* ===== Search: perfectly centered when collapsed, rides to RIGHT while expanding LEFT ===== */

/* Keep row-reverse so the input grows to the LEFT; keep icon on the visual right. */
.sa-searchWrap{
  display: inline-flex;
  align-items: center;
  gap: .5rem;

  width: 2.25rem;
  height: 2.25rem;
  border-radius: .75rem;
  border: 1px solid rgba(236,72,153,.4);
  outline: 1px solid rgba(255,255,255,.10);
  background: transparent;
  color: rgba(255,255,255,.9);

  /* expand to the LEFT */
  transform-origin: right center;
  flex-direction: row-reverse;   /* [input][icon] visually */

  /* Trick: pad-right so the icon APPEARS centered in the square when collapsed.
     50% (1.125rem) - 0.5rem (icon half) = 0.625rem */
  padding-right: calc(50% - .5rem);
  padding-left: 0;

  justify-content: flex-end;     /* icon stays at the rightmost "edge" */
  overflow: hidden;
  cursor: text;

  transition:
    width .35s ease,
    padding .35s ease,
    box-shadow .25s ease,
    border-color .25s ease,
    background .25s ease,
    transform .2s ease;
}

/* Expanded state: reduce right padding so icon slides to the real right edge */
.sa-searchWrap:hover,
.sa-searchWrap:focus-within{
  width: clamp(14rem, 28vw, 24rem);
  padding-right: .6rem;          /* smooth slide to right edge */
  background: rgba(255,255,255,.06);
  border-color: rgba(236,72,153,.7);
  box-shadow: 0 2px 12px -4px rgba(236,72,153,.25);
}

/* Halo control (keep idle clean) */
.sa-searchWrap::after{ opacity: 0; }
.sa-searchWrap:hover::after,
.sa-searchWrap:focus-within::after{ opacity: .55; }

/* Font Awesome icon (same look/weight/behavior as other buttons) */
.sa-searchIconFa{
  font-size: 1rem;
  line-height: 1;
  display: block;
  color: rgba(255,255,255,.9);
  pointer-events: none;
  transition: transform .2s ease, color .2s ease, filter .2s ease;
}
.sa-searchWrap:hover .sa-searchIconFa,
.sa-searchWrap:focus-within .sa-searchIconFa{
  color: #fff;
  transform: scale(1.1);
  filter: drop-shadow(0 2px 12px rgba(236,72,153,.25));
}

/* Input stays collapsed (width:0) until expand; then fills the left side */
.sa-searchInput{
  flex: 1 1 auto;
  min-width: 0;
  width: 0;
  opacity: 0;
  background: transparent;
  border: none; outline: none;
  color: #fff; font-weight: 700; letter-spacing: -.01em; font-size: .95rem; caret-color: #fff;
  transition: width .35s ease, opacity .2s ease .08s, padding .35s ease;
}
.sa-searchWrap:hover .sa-searchInput,
.sa-searchWrap:focus-within .sa-searchInput{
  width: 100%;
  opacity: 1;
  padding-left: .1rem;
}

/* Safety: if the old inline SVG still exists, hide it */
.sa-searchWrap .sa-searchIcon { display: none !important; }

/* Cart badge should sit above the button and not be clipped */
.sa-right .sa-btn.sa-btn--badge{
  position: relative;          /* create stacking context */
  overflow: visible !important;/* allow the badge to protrude */
  z-index: 3;                  /* above neighbors */
}
.sa-right .sa-btn.sa-btn--badge:hover{ z-index: 4; }

/* Make the badge float over the corner + keep it clickable-friendly */
.sa-right .sa-btn.sa-btn--badge .sa-badge{
  position: absolute;
  top: -0.6rem;                /* slightly higher than before */
  right: -0.6rem;              /* outside the rounded corner */
  z-index: 10;                 /* above label/hover effects */
  pointer-events: none;        /* clicks still hit the button */
  box-shadow: 0 6px 16px rgba(236,72,153,.35);
  transform: translateZ(0);    /* crisp render */
}

/* If your expanding label uses overflow hidden on all buttons, ensure only Cart can overflow */
.sa-right .sa-btn{
  overflow: hidden;
}
.sa-right .sa-btn.sa-btn--badge{
  overflow: visible !important; /* re-allow the badge to show */
}

/* Always show the right button row */
.sa-right { display: flex !important; align-items: center; gap: .5rem; }

/* Keep Hide button at far right + visible */
.sa-btn--hide { order: 999; position: relative; z-index: 5; }

/* Make sure nothing is clipping it */
.sa-card, .sa-row, .sa-right { overflow: visible; }

.sa-right { display: flex !important; align-items: center; gap: .5rem; }
.sa-btn--hide { order: 999; position: relative; z-index: 5; }
.sa-card, .sa-row, .sa-right { overflow: visible; }

/* The hiding transition */
.sa-nav { transition: transform .3s ease, opacity .3s ease; }
.sa-nav--hidden { transform: translateY(-110%); opacity: 0; pointer-events: none; }

/* === Restore (Show) button — expand left, left-aligned label, glass blur === */
.sa-restore{
  position: fixed;
  top: .5rem;
  right: 1rem;
  z-index: 150;
  isolation: isolate; /* keep glow nicely scoped */
}

/* Animated glow halo like navbar */
.sa-restore::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:.9rem;
  pointer-events:none;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #ef4444);
  background-size:300% 100%;
  filter: blur(12px);
  opacity:.45;
  animation: saGlowSlide 8s linear infinite;
  transition: opacity .25s ease;
  z-index:-1;
}
.sa-restore:hover::before{ opacity:.6; }

/* Base square (same footprint as other buttons) + NAVBAR GLASS BLUR */
.sa-restore .sa-btn{
  display:inline-flex; align-items:center; justify-content:flex-end;
  gap:.5rem;
  width:2.25rem; height:2.25rem;
  border-radius:.75rem;
  color: rgba(255,255,255,.9);

  /* glass like .sa-card */
  background: rgba(15, 15, 19, 0.456);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.05);

  outline: 1px solid rgba(255,255,255,.10);
  box-shadow: none;
  cursor: pointer;
  overflow: visible;
  position: relative;
  z-index: 1;

  transform-origin: right center;       /* expand to the LEFT */
  /* center icon when collapsed: 50% minus ~0.5rem icon half-width */
  padding-right: calc(50% - .5rem);
  padding-left: 0;

  transition:
    width .35s ease,
    padding .35s ease,
    border-color .25s ease,
    box-shadow .25s ease,
    background .25s ease,
    transform .2s ease;
}

/* Left-aligned label inside the button */
.sa-restore .sa-btn::after{
  content:"Show";
  position:absolute;
  top:50%;
  left: .65rem;          /* <-- label sits on the LEFT */
  right: auto;
  transform: translateY(-50%);
  opacity:0;
  color:#fff;
  font-weight:800;
  font-size:.95rem;
  letter-spacing:.01em;
  white-space:nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.35);
  pointer-events:none;
  transition: opacity .2s ease .05s;
}

/* Hover/focus: expand to the left and reveal label */
.sa-restore .sa-btn:hover,
.sa-restore .sa-btn:focus-visible{
  width: 7rem;                  /* expands left */
  padding-right: .6rem;         /* icon rides to the right edge */
  /* keep same glass bg; optionally add a subtle accent shadow */
  box-shadow: 0 2px 12px -4px rgba(236,72,153,.25);
  border-color: rgba(255,255,255,.08);
}
.sa-restore .sa-btn:hover::after,
.sa-restore .sa-btn:focus-visible::after{ opacity:1; }

/* Icon subtle pop (match the others) */
.sa-restore .sa-btn i{
  position: relative; z-index: 2;
  transition: transform .2s ease, color .2s ease, filter .2s ease;
}
.sa-restore .sa-btn:hover i,
.sa-restore .sa-btn:focus-visible i{
  color:#fff;
  transform: scale(1.1);
  filter: drop-shadow(0 2px 12px rgba(236,72,153,.25));
}

/* ==== NAV MULTI-LINE OVERRIDES (paste AFTER custom.css) ==== */

/* Let the navbar row grow vertically (no clipping) */
/* Navbar row: fixed height + centered items */
.sa-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  height: 3.25rem;
  padding: 0 .75rem;
}
@media (min-width: 1024px){
  .sa-row { height: 3.75rem; padding: 0 1.25rem; }
}
/* Allow dropdowns to overflow out of the row/card without clipping */
.sa-card, .sa-row, .sa-right { overflow: visible; }


/* Center links wrapper: allow wrapping + measurement */
.sa-center--wrapping{ display: flex; min-width: 0; }
.sa-center-wrap{
  display: flex; flex-wrap: wrap;
  column-gap: 2rem; row-gap: .25rem;
  min-width: 0; max-width: 100%;
}

/* Right-side wrapper: same wrapping behavior as center */
.sa-right-inner{
  display: flex; align-items: center; gap: .5rem;
  flex-wrap: wrap;
  max-width: 100%;
}

#sa-right-wrap{
  display: flex; flex-wrap: wrap;
  column-gap: .5rem; row-gap: .25rem;
  min-width: 0; max-width: 100%;
}

/* Keep “Hide” button always on the far right and visible */
.sa-btn--hide{ order: 999; }

/* ===== Responsive collapse to a 3-row dropdown ===== */
.sa-mobileMenu { display: none; position: relative; }

/* Show Menu + hide original nav blocks below 1280px */
@media (max-width: 750px){
  /* hide center links and right-side actions (keep the Hide button visible) */
  .sa-center { display: none !important; }
  .sa-right > *:not(.sa-btn--hide) { display: none !important; }

  /* show the Menu trigger */
  .sa-mobileMenu { display: inline-block; margin-left: .5rem; }

  .sa-mobileMenu__btn{
    display: inline-flex; align-items: center; gap: .4rem;
    padding: .35rem .6rem; border-radius: .6rem; cursor: pointer;
    border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.06); color: #fff; font-weight: 700;
  }
  .sa-mobileMenu[open] .sa-mobileMenu__btn i{ transform: rotate(180deg); transition: transform .15s ease; }

  /* dropdown panel */
  .sa-mobileMenu__panel{
    position: absolute; top: calc(100% + .5rem); left: 0; right: auto; z-index: 60;
    min-width: 16rem; max-width: min(90vw, 48rem);
    padding: .5rem;
    background: rgba(17,17,22,.96);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: .9rem;
    box-shadow: 0 14px 40px rgba(0,0,0,.35);
  }

  /* 3-row grid that fills across columns */
  .sa-mobileGrid{
    display: grid;
    grid-template-rows: repeat(3, auto);  /* <= exactly 3 rows */
    grid-auto-flow: column;                /* fill columns top→bottom */
    grid-auto-columns: max-content;        /* column width fits items */
    gap: .35rem .9rem;
    align-items: center;
  }

  /* make button-like items compact inside the panel */
  .sa-mobileGrid .sa-btn,
  .sa-mobileGrid .sa-btn--badge,
  .sa-mobileGrid .sa-btn.button.sa-btn{
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .45rem .6rem; border-radius: .6rem; width: auto;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    color: #fff;
  }

  .sa-mobileGrid .sa-link{
    display: inline-flex; align-items: center;
    padding: .35rem .2rem; border-radius: .4rem;
    color: rgba(255,255,255,.9); font-weight: 700; text-decoration: none;
  }

  /* keep cart badge visible */
  .sa-mobileGrid .sa-btn--badge{ position: relative; overflow: visible; }
  .sa-mobileGrid .sa-btn--badge .sa-badge{ position: absolute; top: -.5rem; right: -.5rem; }
}

/* Ensure the navbar row can grow when the panel is open */
/* Ensure the navbar row can grow when the panel is open */
.sa-row{ overflow: visible; align-items: center; }

/* Give all product cards rounded corners */
/* Force product cards to have small corner radius */
/* Outer wrapper */
/* Make the real bordered card follow the same radius */
/* =========================================================
   “Screenshot” skin for product cards (keeps your tilt + glow)
   ========================================================= */
:root {
  /* handy knobs */
  --pc-radius: 14px;
  --pc-border: rgba(255,255,255,.06);
  --pc-inner-stroke: rgba(255,255,255,.08);
  --pc-shadow: 0 10px 28px rgba(0,0,0,.35);
  --pc-shadow-hover: 0 16px 36px rgba(0,0,0,.45);
  --pc-accent: #ec4899;
}

/* ---------- Outer tilt/glow container ---------- */
.product-card {
  position: relative;
  border-radius: var(--pc-radius);
  transition: transform .3s ease, box-shadow .4s ease;
  opacity: 1; /* wrapper fully opaque */
}
.product-card::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: var(--pc-radius);
  padding: 2px;
  background: linear-gradient(90deg, #7c3aed, #ec4899, #ef4444);
  background-size: 300% 100%;
  filter: blur(6px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}
.product-card:hover::after {
  opacity: 1;
  animation: productGlowSlide 6s linear infinite;
}
@keyframes productGlowSlide {
  0% { background-position: 0% 50% }
  50% { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}

/* ---------- Grid width ---------- */
#products .products-grid {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}
@media (min-width: 1536px) {
  #products .products-grid {
    grid-template-columns: repeat(auto-fill, minmax(19rem, 1fr));
  }
}

/* ---------- GLASS CARD ---------- */
.pc-card-skin {
  position: relative;
  border-radius: var(--pc-radius);
  border: 1px solid var(--pc-border);
  box-shadow: var(--pc-shadow);
  overflow: hidden;
  isolation: isolate;
  background: rgba(39, 39, 39, 0.45) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(6px) !important;
  transition: box-shadow .25s ease, transform .25s ease, background .25s ease;
}
.product-card:hover .pc-card-skin { box-shadow: var(--pc-shadow-hover); }

/* Inner stroke */
.pc-card-skin::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 0 0 0 1px var(--pc-inner-stroke);
  opacity: .7;
  z-index: 2;
}

/* Additional blur layer (kept subtle) */
.pc-card-skin::after {
  content: "";
  position: absolute; inset: 0;
  border-radius: inherit;
  background: rgba(93, 93, 109, 0.22) !important;
  backdrop-filter: blur(6px) !important;
  -webkit-backdrop-filter: blur(10px) !important;
  z-index: 1;
}

/* Content sits above blur */
.pc-card-skin > * { position: relative; z-index: 3; }

/* ---------- Media area ---------- */
.pc-card-skin .pc-media {
  position: relative;
  aspect-ratio: 16/7;
  max-height: 220px;
  border-radius: calc(var(--pc-radius) - 2px);
  overflow: hidden;
  background: transparent !important;
  padding: 0;
}
@media (min-width: 1024px) {
  .pc-card-skin .pc-media { max-height: 220px; }
}
.pc-card-skin .pc-media img {
  width: 100%; height: 90%;
  object-fit: contain;
  object-position: center;
  display: block;
  background: transparent !important;
}
.pc-card-skin .pc-media::after { display: none; } /* no divider */

/* ---------- Badges ---------- */



/* ---------- Body, title, meta ---------- */
.pc-card-skin .pc-body { padding: 1rem 1rem 1.1rem; }

.pc-card-skin .pc-title {
  color: #fff;
  font-weight: 900;
  font-size: 1rem;
  letter-spacing: -.015em;
  margin: .35rem 0 .25rem;
  text-transform: uppercase;
}

.pc-card-skin .pc-meta {
  color: rgba(255,255,255,.65);
  font-size: .85rem;
  margin-bottom: .6rem;
}

/* ---------- CTA ---------- */
.pc-card-skin .pc-cta {
  display: inline-grid; place-items: center;
  width: 2.1rem; height: 2.1rem; border-radius: 999px;
  background: radial-gradient(120% 120% at 30% 30%, rgba(236,72,153,.28), rgba(236,72,153,.12) 40%, transparent 70%);
  border: 1px solid rgba(236,72,153,.35);
  color: #fff;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pc-card-skin .pc-cta i { font-size: .95rem; }
.product-card:hover .pc-card-skin .pc-cta {
  transform: scale(1.08);
  box-shadow: 0 8px 22px rgba(236,72,153,.28);
  border-color: rgba(236,72,153,.6);
}

/* Neutralize internals from frameworks */
.pc-card-skin :where(.bg-card, .bg-background) { background: transparent !important; }
.pc-card-skin :where(.border, .border-white\/5) { border-color: transparent !important; }

/* ---------- Price row wrapper ---------- */
.pc-card-skin .pc-priceRow{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
}

/* =========================================================
   PRICE PILL — match product page (pink gradient + tag icon)
   ========================================================= */
/* Use both .pc-price and .price to be safe */
.pc-card-skin .pc-price,
.pc-card-skin .price{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff8dca 0%, #ec4899 100%);
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 10px 24px rgba(236,72,153,.22),
    inset 0 0 0 1px rgba(255,255,255,.15);
  color: #0b0b0f;                /* dark text like the product page pill */
  font-weight: 900;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
}

/* Tag icon (Font Awesome solid 'tag') */
.pc-card-skin .pc-price::before,
.pc-card-skin .price::before{
  content: "\f02b";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: .9rem;
  line-height: 1;
  display: inline-block;
  color: currentColor;
}

/* Ensure any nested value inherits the pill text color */
.pc-card-skin .pc-price b,
.pc-card-skin .pc-price strong,
.pc-card-skin .pc-price .value,
.pc-card-skin .pc-price span,
.pc-card-skin .price b,
.pc-card-skin .price strong,
.pc-card-skin .price .value,
.pc-card-skin .price span{
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: none !important;
}

/* Price pill keeps just the inline <i>; kill the ::before icon */
.pc-card-skin .pc-price::before{ content:none !important; display:none !important; }

/* Tag icon spacing inside the pill */
.pc-card-skin .pc-price i.fa-tag{ font-size:.9rem; line-height:1; }

/* Old (slashed) price INSIDE the pill */
.pc-card-skin .pc-price s{
  margin-left:.45rem;
  opacity:.65;
  text-decoration-thickness: 2px;
  text-decoration-color: rgba(11,11,15,.85);
}

/* Make sure everything in the pill uses the pill text color */
.pc-card-skin .pc-price *{
  color: inherit !important;
  -webkit-text-fill-color: inherit !important;
  background: none !important;
}

/* =========================================================
   Price Slash pill — Green, transparent
   ========================================================= */

/* --- Old price (inline pill + upward popover) --------------------------- */

/* let the popover render outside the card */
.pc-card-skin{ overflow: visible; }

/* wrapper so :hover has a stable area */
.pc-old-wrap{
  position: relative;
  display: inline-flex;
  align-items: center;
}

/* inline old-price pill (slightly transparent green, black text) */
.pc-old__pill{
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  padding: .45rem .75rem;
  border-radius: 10px;
  background: linear-gradient(135deg, rgba(134,239,172,.60) 0%, rgba(52,211,153,.60) 100%);
  border: 1px solid rgba(52,211,153,.50);
  color: #0b0b0f;                 /* black-ish text */
  font-weight: 900;
  font-size: .95rem;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
}

/* diagonal slash ONLY across the numbers inside the inline pill */
.pc-old__value{ position: relative; display: inline-flex; gap: .35rem; }
.pc-old__value::after{
  content:"";
  position:absolute;
  left:-4%;
  top:50%;
  width:108%;
  height:2px;
  background: rgba(15,15,19,.8);
  transform: rotate(-18deg);
  transform-origin: center;
  pointer-events: none;
}

/* upward popover (solid green, black text, no slash) */
.pc-old__pop{
  position: absolute;
  left: 0;
  bottom: calc(100% + 8px);     /* sits above the inline pill */
  transform: translateY(8px);   /* start slightly below, animate UP */
  opacity: 0;
  visibility: hidden;
  pointer-events: none;

  display: flex;
  align-items: center;
  gap: .5rem;
  padding: .6rem .9rem;
  border-radius: 12px;

  background: linear-gradient(135deg, #86efac 0%, #34d399 100%); /* solid/lighter green */
  border: 1px solid rgba(255,255,255,.25);
  box-shadow: 0 14px 28px rgba(16,185,129,.35), 0 2px 10px rgba(0,0,0,.25);
  color: #0b0b0f;   /* black text */
  font-weight: 900;
  white-space: nowrap;

  transition: transform .26s ease, opacity .22s ease, visibility 0s .22s; /* delay visibility off */
  z-index: 10;
}

/* show popover ONLY on hover/focus of the wrap (no flicker) */
.pc-old-wrap:hover .pc-old__pop,
.pc-old-wrap:focus-within .pc-old__pop{
  opacity: 1;
  transform: translateY(0);     /* expand straight UP */
  visibility: visible;
  pointer-events: auto;
  transition: transform .26s ease, opacity .22s ease, visibility 0s; /* no delay when showing */
}


/* =========================================================
   STOCK TEXT — heavy + pink
   ========================================================= */

/*=========== =========== ========== */

/* ========== Product Form — Glass / Neon polish ========== */



/* Footer gradient glow effect */
/* ===== Footer skin ===== */
.sa-footer {
  position: relative;
  isolation: isolate;
  border-radius: 1.25rem;
  overflow: hidden;
}

.sa-footer__glow{
  position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 10% 0%, rgba(236,72,153,.25), transparent 60%),
    radial-gradient(40% 60% at 100% 20%, rgba(124,58,237,.22), transparent 60%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  filter: blur(26px);
  opacity: .9;
  z-index: -1;
}

.sa-footer__wrap{
  border: 1px solid rgba(255,255,255,.080);
  background: rgba(35, 35, 41, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius: inherit;
}

/* grid */
.sa-footer__grid{
  display: grid;
  gap: 2rem;
  grid-template-columns: 1fr;
  padding: 1.25rem 1rem 0;
}
@media (min-width: 1024px){
  .sa-footer__grid{ grid-template-columns: 1.3fr 1fr 1fr 1fr; padding: 1.75rem 1.5rem 0; }
}

/* brand */
.sa-footer__brand{ display:flex; flex-direction:column; gap:1rem; }
.sa-footer__logo{
  display:inline-flex; width:3rem; height:3rem; border-radius:1rem;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  overflow:hidden;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
}
.sa-footer__logo img{ width:100%; height:100%; object-fit:contain; }
.sa-footer__tag{
  color: rgba(255,255,255,.8);
  font-size: .95rem; line-height: 1.5;
}
.sa-footer__cta{ display:flex; gap:.6rem; flex-wrap:wrap; }

/* buttons */
.sa-btn--primary, .sa-btn--ghost{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.6rem .9rem; border-radius:.9rem;
  font-weight:800; letter-spacing:.01em;
  transition: transform .18s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.sa-btn--primary{
  background: linear-gradient(90deg,#a855f7,#ec4899);
  color:#fff; border:1px solid rgba(255,255,255,.12);
  box-shadow: 0 12px 26px rgba(168,85,247,.25);
}
.sa-btn--primary:hover{ transform: translateY(-1px) scale(1.02); }
.sa-btn--ghost{
  background: transparent; color:#fff;
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(3px);
}
.sa-btn--ghost:hover{
  border-color: rgba(236,72,153,.45);
  box-shadow: 0 10px 20px rgba(236,72,153,.18);
}

/* headings with divider */
.sa-footer__head{
  display:flex; align-items:center; gap:.75rem; color:#fff; font-weight:800; letter-spacing:.01em;
}
.sa-footer__head span{ font-size: .95rem; }
.sa-footer__head i{
  flex:1; height:1px; background: linear-gradient(90deg, rgba(255,255,255,.18), transparent);
  border-radius:999px;
}

/* link lists */
.sa-footer__links{ margin-top:.75rem; display:grid; gap:.5rem; }
.sa-footer__links a{
  color: rgba(255,255,255,.75); font-weight:600; font-size:.95rem;
  display:inline-flex; align-items:center; gap:.5rem;
  transition: color .2s ease, transform .2s ease;
}
.sa-footer__links a:hover{ color:#fff; transform: translateX(2px); }

/* bottom strip */
.sa-footer__bottom{
  display:flex; flex-direction:column; gap:1rem;
  padding: 1rem; margin-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.08);
  color: rgba(255,255,255,.7);
}
@media (min-width: 640px){
  .sa-footer__bottom{ flex-direction:row; align-items:center; justify-content:space-between; }
}
.sa-footer__bottom a{ color:#ec4899; }
.sa-footer__bottom a:hover{ text-decoration: underline; }

/* tiny link row */
.sa-footer__mini{ display:flex; flex-wrap:wrap; gap:.75rem; }
.sa-footer__mini a{
  color: rgba(255,255,255,.65);
  font-size:.9rem;
  transition: color .2s ease;
}
.sa-footer__mini a:hover{ color:#fff; }

/* Bigger logo without bg */
.sa-footer__logo-big {
  height: 70px;
  width: auto;
  object-fit: contain;
  display: block;
  transition: transform .25s ease;
}
.sa-footer__logo-big:hover {
  transform: scale(1.05);
}

/* Discord button standout */
.sa-btn--discord {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .65rem 1rem;
  border-radius: .9rem;
  font-weight: 700;
  background: #5865f2;
  color: white;
  box-shadow: 0 8px 18px rgba(88,101,242,.35);
  border: 1px solid rgba(255,255,255,.1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.sa-btn--discord:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 10px 20px rgba(88,101,242,.45);
}

.sa-btn--discord {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: linear-gradient(90deg, #5865F2, #4752C4);
  color: #fff;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.12);
  box-shadow: 0 10px 24px rgba(88,101,242,.25);
  overflow: hidden;
  isolation: isolate;
  font-size: 0.95rem;
  line-height: 1.2;

  /* transition for 3D lift */
  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;

  /* Slash variables */
  --slash-angle: 37deg;       /* tilt */
  --slash-width: 85%;         /* thicker slash */
  --slash-height: 260%;       /* tall enough to span diagonally */
  --slash-speed: 0.4s;        /* slower, smoother */
  --slash-bright: .62;        /* center brightness */
  --slash-soft: .11;          /* softer edges */
}

.sa-btn--discord i {
  transition: transform 0.35s ease;
}

.sa-btn--discord::before {
  content: "";
  position: absolute;
  top: 50%; 
  left: -40%;       /* closer starting point = no “late start” */
  width: var(--slash-width);
  height: var(--slash-height);
  transform: translate(-50%,-50%) rotate(var(--slash-angle));
  pointer-events: none;
  will-change: transform, left;

  background: linear-gradient(
    90deg,
    rgba(255,255,255,0) 0%,
    rgba(255,255,255,var(--slash-soft)) 35%,
    rgba(255,255,255,var(--slash-bright)) 50%,
    rgba(255,255,255,var(--slash-soft)) 65%,
    rgba(255,255,255,0) 100%
  );

  filter: blur(0.5px);
  transition: left var(--slash-speed) linear, transform var(--slash-speed) linear;
}

/* Hover: slash + lift effect */
.sa-btn--discord:hover,
.sa-btn--discord:focus-visible {
  transform: perspective(600px) rotateX(8deg) scale(1.05);
  box-shadow: 0 12px 28px rgba(88,101,242,.35), 0 0 12px rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}

.sa-btn--discord:hover i {
  transform: translateY(-2px);
}

.sa-btn--discord:hover::before,
.sa-btn--discord:focus-visible::before {
  left: 120%;  /* symmetric end position */
}

/* Match Discord button base size */
.sa-btn--ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;   /* same as Discord */
  border-radius: 999px;
  font-size: 0.95rem;       /* consistent text size */
  line-height: 1.2;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.25);
  transition: 
    transform 0.35s ease,
    box-shadow 0.35s ease,
    border-color 0.35s ease;
  will-change: transform, box-shadow;
}

/* Icon inside */
.sa-btn--ghost i {
  transition: transform 0.35s ease;
}

/* Hover "stand up" effect */
.sa-btn--ghost:hover,
.sa-btn--ghost:focus-visible {
  transform: perspective(600px) rotateX(8deg) scale(1.05);
  box-shadow: 0 8px 20px rgba(0,0,0,0.35), 0 0 12px rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
}

/* Icon also pops slightly */
.sa-btn--ghost:hover i {
  transform: translateY(-2px);
}

/* Discord button: forward + left tilt */
.sa-btn--discord:hover,
.sa-btn--discord:focus-visible {
  transform: perspective(600px) rotateX(8deg) rotateY(15deg) scale(1.05);
  box-shadow: 0 12px 28px rgba(88,101,242,.35), 0 0 12px rgba(255,255,255,0.15);
  border-color: rgba(255,255,255,0.4);
}

/* Products button: forward + right tilt */
.sa-btn--ghost:hover,
.sa-btn--ghost:focus-visible {
  transform: perspective(600px) rotateX(8deg) rotateY(-15deg) scale(1.05);
  box-shadow: 0 10px 24px rgba(255,255,255,.15);
  border-color: rgba(255,255,255,0.25);
}

/* Ghost button — same size as Discord button */
/* Ghost button (same size as Discord) */
/* your ghost button (unchanged size like Discord) */
/* Base ghost button */
.sa-btn--ghost {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .75rem 1.1rem;
  border-radius: 999px;
  background: transparent;
  color: #fff;
  border: 1px solid rgba(255,255,255,.2);
  box-shadow: 0 6px 18px rgba(255,255,255,.1);
  overflow: hidden;
  isolation: isolate;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

/* Hover tilt already added before */
.sa-btn--ghost:hover,
.sa-btn--ghost:focus-visible {
  transform: perspective(600px) rotateX(8deg) rotateY(-15deg) scale(1.05);
  box-shadow: 0 10px 28px rgba(255,255,255,.2);
  border-color: rgba(255,255,255,.4);
}

/* White flash outline */
.sa-btn--ghost::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  border: 2px solid transparent;
  pointer-events: none;
  z-index: 2;
}

/* Trigger the flash animation on hover */
.sa-btn--ghost:hover::before {
  animation: ghost-flash 1.2s forwards;
}

/* Keyframes for outline flash */
@keyframes ghost-flash {
  0% {
    border-color: transparent;
    clip-path: inset(0 100% 0 0);
  }
  40% {
    border-color: white;
    clip-path: inset(0 0 0 0); /* fully visible */
  }
  100% {
    border-color: transparent;
    clip-path: inset(0 0 0 100%);
  }
}

/* ====== Scoped reference skin ====== */
.ref-skin{
  /* from your reference theme variables */
  --cl-accent: 255,141,202;   /* pink accent */
  --cl-background: 5,1,5;     /* deep background */
  --cl-t-primary: 255,255,255;
  --cl-t-accent: 255,255,255;
}

/* Glass/blur card used under Price, Tabs, Form, Live stats */
.ref-skin .ref-card{
  background: rgba(var(--cl-background), 0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-radius: 16px;
}
.ref-skin .padded{ padding: 1rem; }
@media (min-width: 768px){
  .ref-skin .padded{ padding: 1.5rem; }
}

/* (Optional) subtle inner edge — keep commented if you want 0 borders */
/* .ref-skin .ref-card{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.05); } */

/* Accent utility (if needed for small labels/icons) */
.ref-skin .text-accent { color: rgb(var(--cl-accent)); }

/* ====== Scrollbar (scoped) — taken from your uploaded scrollbar CSS ====== */
.ref-skin * { scrollbar-width: thin; scrollbar-color: #FF8DCA #0e0e0e; } /* Firefox */
.ref-skin::-webkit-scrollbar{ width: 0.8vw; max-width: 14px; }
.ref-skin::-webkit-scrollbar-thumb{ background-color:#FF8DCA; border-radius:30px; border:3px solid #0c0c0c; }
.ref-skin::-webkit-scrollbar-track{ background-color:#0e0e0e; border-radius:20px; }

@media (max-width:768px){
  .ref-skin::-webkit-scrollbar{ width:4px; }
  .ref-skin::-webkit-scrollbar-thumb{ background-color:#FF8DCA; border-radius:20px; border:2px solid #0c0c0c; }
  .ref-skin::-webkit-scrollbar-track{ background-color:#0e0e0e; border-radius:20px; }
}

/* =========================================
Background styling (mesh + darkening effect)
  ========================================= */

/* ======= Full-screen background with mesh + darkening ======= */

/* ===== Background image (fixed) ===== */
.bg-image{
  position: fixed;
  inset: 0;
  z-index: -2;                 /* far back */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  transform: translateZ(0);
}

/* Dark wash UNDER the mesh (lighter than before) */
.bg-image::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:-1;                  /* stays under the mesh */
  background:
    /* softer vertical darkening */
    linear-gradient(180deg,
      rgba(8,10,16,.22) 0%,
      rgba(8,10,16,.30) 35%,
      rgba(8,10,16,.42) 60%,
      rgba(8,10,16,.48) 100%
    ),
    /* gentle color blooms */
    radial-gradient(900px 520px at 12% 55%, rgba(236,72,153,.10), transparent 65%),
    radial-gradient(1000px 600px at 85% 10%, rgba(124,58,237,.12), transparent 60%),
    /* soft vignette */
    radial-gradient(120% 120% at 50% 50%, transparent 65%, rgba(0,0,0,.12) 100%);
}

/* ===== Mesh overlay (OVER the wash, UNDER content) ===== */
.bg-mesh{
  position: fixed;
  inset: 0;
  z-index: -1;                 /* above .bg-image (-2), below everything else */
  pointer-events: none;

  /* only the big grid (64px); no small mesh */
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size: 64px 64px, 64px 64px;

  /* parallax offsets (set by JS) */
  background-position:
    0 var(--meshY, 0px),
    0 var(--meshY, 0px);  /* move straight down only */
}

/* Slightly calmer on small screens */
@media (max-width: 768px){
  .bg-mesh{ opacity: .88; }
  .bg-image::before{
    background:
      linear-gradient(180deg,
        rgba(8,10,16,.18) 0%,
        rgba(8,10,16,.26) 35%,
        rgba(8,10,16,.36) 60%,
        rgba(8,10,16,.44) 100%
      ),
      radial-gradient(900px 520px at 12% 55%, rgba(236,72,153,.08), transparent 65%),
      radial-gradient(1000px 600px at 85% 10%, rgba(124,58,237,.10), transparent 60%),
      radial-gradient(120% 120% at 50% 50%, transparent 65%, rgba(0,0,0,.10) 100%);
}

/* =========================================
Product page alt styling (title + effects)
  ========================================= */

/* --- Ink underline image used as an "underscore" --- */
:root{
  --ink-underline-img: url("https://i.imgur.com/M7czgoZ.png");
}

/* Make "Variants" heading stronger + bigger, then draw the underline image */
.variant-label .ink-underline{
  position: relative;
  display: inline-block;
  font-family: var(--bs-font-sans-serif, 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, sans-serif);
  font-weight: 900;
  letter-spacing: -.01em;
  /* size that scales nicely on mobile/desktop */
  font-size: clamp(1.05rem, 2.4vw, 1.45rem);
  line-height: 1.15;
  padding-bottom: 12px;               /* room for the underline image */
}

.variant-label .ink-underline::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);        /* center under the text */
  width: clamp(120px, 45vw, 260px);   /* responsive underline width */
  height: clamp(10px, 2.2vw, 16px);   /* responsive underline height */
  background-image: var(--ink-underline-img);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;           /* keep the image crisp */
  pointer-events: none;
  opacity: 0.95;
}

/* --- Product title underline: add class="product-title ink-underline" on the title --- */
.product-title.ink-underline{
  position: relative;
  display: inline-block;
  font-weight: 900;
  letter-spacing: -.01em;
  padding-bottom: 14px;
}

.product-title.ink-underline::after{
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: clamp(160px, 50vw, 360px);
  height: clamp(12px, 2.6vw, 20px);
  background-image: var(--ink-underline-img);
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: contain;
  opacity: 0.95;
}

/* Optional: slight glow to make the underline pop on dark backgrounds */
.product-title.ink-underline::after,
.variant-label .ink-underline::after{
  filter: drop-shadow(0 2px 6px rgba(0,0,0,.35));
}






/* === Back button: pill + glow, moved down === */
.products-back{
  top: 5.5rem;            /* moved down from top edge */
  padding: 1rem 1.45rem;
  border-radius: 999px;
  font-weight: 800;
  line-height: 1;
  border: 1px solid rgba(236,72,153,.35);
  background: rgba(255,255,255,.06);
  color: #ec4899;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow:
    0 12px 28px rgba(124,58,237,.18),
    0 6px 18px rgba(236,72,153,.18),
    inset 0 0 0 1px rgba(255,255,255,.12);
  transition: transform .18s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
  text-decoration: none;
}
.products-back:hover,
.products-back:focus-visible{
  transform: translateY(-1px);
  background: rgba(255,255,255,.10);
  border-color: rgba(236,72,153,.55);
  box-shadow:
    0 18px 40px rgba(124,58,237,.25),
    0 14px 48px rgba(236,72,153,.25),
    inset 0 0 0 1px rgba(255,255,255,.18);
  color: #f472b6;
  text-decoration: none;
}
.products-back:active{ transform: translateY(0); }

/* subtle animated glow ring behind the back pill */
.products-back::after{
  content:""; position:absolute; inset:-10px; border-radius:inherit; z-index:-1;
  background: linear-gradient(90deg,#7c3aed,#ec4899,#ef4444);
  background-size: 300% 100%;
  filter: blur(18px); opacity: 0;
  transition: opacity .35s ease, background-position 6s linear;
}
.products-back:hover::after,
.products-back:focus-visible::after{ opacity:.55; animation: productsBackGlow 6s linear infinite; }
@keyframes productsBackGlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* === Group subheading under "Products": bigger pill + glow === */
.products-subheading{
  display: inline-block;
  margin-top: .5rem;
  padding: .5rem 1rem;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .01em;
  /* bigger size */
  font-size: clamp(1.05rem, 1.2vw + .7rem, 1.6rem);
  line-height: 1.1;

  color: #0b0b0f;
  background: linear-gradient(135deg,#ffd1eb 0%,#ff9ad0 35%,#ec4899 100%);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow:
    0 10px 26px rgba(236,72,153,.22),
    0 16px 54px rgba(124,58,237,.18),
    inset 0 0 0 1px rgba(255,255,255,.18);
  transition: transform .18s ease, box-shadow .25s ease, filter .25s ease, background-position .8s ease;
  background-size: 180% 100%;
}
.products-subheading:hover,
.products-subheading:focus-visible{
  transform: translateY(-1px);
  filter: saturate(1.1);
  background-position: 100% 0;
  box-shadow:
    0 16px 38px rgba(236,72,153,.3),
    0 24px 70px rgba(124,58,237,.25),
    inset 0 0 0 1px rgba(255,255,255,.22);
}
/* glow aura behind the group title pill */
.products-subheading::after{
  content:""; position:absolute; inset: 0; border-radius: inherit; z-index:-1;
}
.position-relative .products-subheading{ position: relative; }
.products-subheading::before{
  content:""; position:absolute; inset:-12px; border-radius: inherit; z-index:-1;
  background: linear-gradient(90deg,#7c3aed,#ec4899,#ef4444);
  background-size: 300% 100%;
  filter: blur(28px); opacity:.28;
  transition: opacity .35s ease, background-position 6s linear;
}
.products-subheading:hover::before,
.products-subheading:focus-visible::before{
  opacity:.5; animation: productsTitleGlow 6s linear infinite;
}
@keyframes productsTitleGlow{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

/* ============================
   Customer Login Modal — ultra-glass sheet + custom buttons
   ============================ *
/* ====== Other Products — styles moved out of component (quirks-safe) ====== */
.sa-opm__head{ text-align:center; margin-bottom:1.25rem; color:#fff; position:relative; }
.sa-opm__pill{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem .9rem; border-radius:999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(236,72,153,.45);
  color:#fff; font-weight:800; letter-spacing:.02em; text-decoration:none;
  box-shadow: 0 6px 18px rgba(236,72,153,.18);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  transition: transform .18s ease, box-shadow .22s ease, border-color .2s ease, background .2s ease;
}
.sa-opm__pill:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(236,72,153,.65); box-shadow: 0 10px 28px rgba(236,72,153,.28); }

.sa-opm__title{
  margin:.65rem auto .2rem; font-weight:900; letter-spacing:-.02em; line-height:1.1;
  font-size: clamp(1.9rem, 3.6vw, 2.6rem); color:#fff;
  text-shadow: 0 2px 14px rgba(0,0,0,.25); display:inline-block; position:relative;
}
.sa-opm__sub{ margin:0 auto .75rem; max-width:60ch; color:rgba(255,255,255,.9); font-weight:600; letter-spacing:.01em; }

/* Curved underline (image) — no inline <svg> */
.ink-curve-title{ position:relative; display:inline-block; }
.ink-curve-text{ position:relative; display:inline-block; padding-bottom: 14px; }
.ink-curve-text::after{
  content:""; position:absolute; left:50%; bottom:2px; transform:translateX(-50%);
  width:8rem; height:10px; pointer-events:none;
  background-repeat:no-repeat; background-position:center bottom; background-size:auto 10px;
  /* same curve look as before, using an image (replace with your asset if you like) */
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 300 10" preserveAspectRatio="none"><path d="M5 6 C80 10, 220 0, 295 6" stroke="%23ec4899" stroke-width="5" fill="none" stroke-linecap="butt"/></svg>');
}

/* Card */
.sa-opm-card{
  position: relative; display:flex; align-items:stretch; gap:1rem; padding:1rem;
  border-radius: 20px; text-decoration:none; color:#fff; overflow:hidden;
  background:
    radial-gradient(120% 150% at 85% 15%, rgba(240,70,155,.35), transparent 60%),
    radial-gradient(120% 150% at 15% 85%, rgba(139,92,246,.30), transparent 55%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,.03));
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 14px 34px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.06);
  transition: transform .5s ease, box-shadow .35s ease, border-color .35s ease, background .35s ease;
  transform-origin:center;
  animation: saCardTilt 8s ease-in-out infinite alternate;
}
@keyframes saCardTilt { 0%{transform:rotate(-8deg)} 100%{transform:rotate(8deg)} }
.sa-opm-card:hover{
  transform: rotate(0deg) scale(1.02);
  border-color: #fff;
  box-shadow: 0 0 40px rgba(236,72,153,.35);
  animation-play-state: paused;
}

/* Badges floating near card edge */
.sa-opm-badges{
  position: absolute; top: .2rem; left: .2rem;
  display: flex; flex-wrap: wrap; gap: .35rem; z-index: 5;
}
.sa-opm-badge{
  padding: .25rem .5rem; font-size: .65rem; border-radius: 999px;
  background: var(--badge-bg, #ff81b5); color: #0b0b0f; font-weight: 900; text-transform: uppercase; letter-spacing: .02em;
  box-shadow: 0 6px 14px rgba(240,70,155,.25);
}

/* Thumb */
.sa-opm-thumb{ flex: 0 0 180px; max-width:180px; border-radius:12px; overflow:hidden; background: rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.18); display:grid; place-items:center; }
.sa-opm-thumb img{ width:100%; height:100%; object-fit:cover; aspect-ratio:16/9; }
.sa-opm-thumb__ph{ width:100%; aspect-ratio:16/9; background: rgba(255,255,255,.06); border:1px dashed rgba(255,255,255,.18); border-radius:12px; }

/* Body */
.sa-opm-body{ display:flex; flex-direction:column; gap:.5rem; min-width:0; flex:1 1 auto; }
.sa-opm-name{ margin:0; font-weight:900; letter-spacing:-.01em; font-size: 1rem; color:#fff; text-shadow: 0 2px 12px rgba(0,0,0,.25); }

/* Stock & Price */
.sa-opm-stock{ color:rgba(255,255,255,.9); font-weight:700; }
.sa-opm-price{
  display:flex; align-items:center; gap:.65rem; margin-top:.25rem;
  background: radial-gradient(120% 120% at 30% 30%, rgba(240,70,155,.18), rgba(240,70,155,.08) 45%, transparent 80%);
  border:1px solid rgba(240,70,155,.35);
  border-radius:12px; padding:.45rem .65rem; width:fit-content;
}
.sa-opm-price .label{ opacity:.85; font-weight:800; }
.sa-opm-price .cur{ font-weight:900; color:#fff; }
.sa-opm-price .was{ color:rgba(255,255,255,.78); text-decoration:line-through; }

/* CTA */
.sa-opm-cta{
  align-self:center; margin-left:auto; flex:0 0 auto;
  display:grid; place-items:center; width:42px; height:42px; border-radius:999px;
  background: radial-gradient(120% 120% at 30% 30%, rgba(240,70,155,.28), rgba(240,70,155,.12) 40%, transparent 70%);
  border: 2px solid rgba(255,255,255,.85);
  box-shadow: 0 8px 24px rgba(240,70,155,.25);
  transition: transform .4s ease, box-shadow .45s ease, border-color .4s ease;
}
.sa-opm-cta i{ color:#ff9ac2; font-size:1rem; transition: transform .6s cubic-bezier(.23,1,.32,1), filter .35s ease; transform-origin:center; }
.sa-opm-card:hover .sa-opm-cta{ transform: scale(1.08); border-color:#fff; box-shadow:0 6px 16px rgba(0,0,0,0.45); }
.sa-opm-card:hover .sa-opm-cta i{ color:#fff; transform: translateX(3px) rotate(8deg); filter: drop-shadow(0 2px 4px rgba(0,0,0,0.35)); }

/* Responsive */
@media (max-width:576px){ .sa-opm-thumb{ flex-basis:160px; max-width:160px; } }

/* ========= NAVBAR LAYOUT FIX (place after custom.css) ========= */

/* Desktop shows center links */
@media (min-width: 750px){
  .sa-center { display: flex !important; }
}

/* Mobile/compact hides center links and right-side (except Hide) */
@media (max-width: 750px){
  .sa-center,
  .sa-center--always {            /* safety in case the class is still present */
    display: none !important;
  }
  .sa-right > *:not(.sa-btn--hide){
    display: none !important;
  }
  .sa-mobileMenu{
    display: inline-block !important;
  }
}

/* =========================
   Product page — Upsells rail (9rem card)
   ========================= */
/* ==========================================
   UPSELLS — 9rem TALL CARDS, 2×2 GRID
   ========================================== */