/* ===========================================================
   STL Grillzz — Holo Card (WooCommerce)  v2 full-bleed neon
   All rules scoped under .stlg-card / .stlg-scene.
   =========================================================== */

.stlg-scene{ perspective:1400px; display:block; width:100%; }
.stlg-scene *{ box-sizing:border-box; }

.stlg-card{
  --card-r:22px; --ease:cubic-bezier(.23,1,.32,1);
  --mx:50%; --my:50%; --rx:0deg; --ry:0deg; --posx:50%; --posy:50%; --hyp:0; --o:0;
  --t-bg0:#2e1d02; --t-bg1:#140c01; --t-edge:#FFC93C; --t-edge2:#FFE89A; --t-glow:#FF9A1F; --t-neon:#FFD86B; --t-ink:#fff4d6;
  position:relative; width:100%; max-width:460px; margin-inline:auto; aspect-ratio:63/88; border-radius:var(--card-r);
  transform-style:preserve-3d; transform:rotateY(var(--rx)) rotateX(var(--ry));
  transition:transform .4s var(--ease); cursor:pointer; isolation:isolate; will-change:transform;
  font-family:system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
}
.stlg-card__frame{ position:absolute; inset:0; border-radius:var(--card-r); padding:12px;
  background:linear-gradient(160deg, color-mix(in srgb,var(--t-edge) 70%,#fff) 0%, var(--t-edge) 18%, #1a1c22 46%, var(--t-edge2) 78%, color-mix(in srgb,var(--t-edge2) 60%,#000) 100%);
  box-shadow:0 36px 70px -28px rgba(0,0,0,.85), 0 0 0 1px rgba(0,0,0,.6) inset, 0 0 46px -10px var(--t-glow); }
.stlg-card__inner{ position:relative; height:100%; border-radius:calc(var(--card-r) - 8px); overflow:hidden;
  box-shadow:0 0 0 2px rgba(0,0,0,.55) inset; background:#050507; }

/* full-bleed art */
.stlg-art{ position:absolute; inset:0; z-index:1; overflow:hidden;
  background:
    radial-gradient(58% 42% at 26% 20%, color-mix(in srgb,var(--t-edge) 62%,transparent) 0%, transparent 60%),
    radial-gradient(62% 48% at 80% 30%, color-mix(in srgb,var(--t-glow) 62%,transparent) 0%, transparent 62%),
    radial-gradient(95% 70% at 50% 104%, color-mix(in srgb,var(--t-neon) 34%,transparent) 0%, transparent 55%),
    linear-gradient(165deg, var(--t-bg0) 0%, var(--t-bg1) 64%, #050507 100%); }
.stlg-art::after{ content:""; position:absolute; inset:-45% -45% 25%; z-index:1;
  background:repeating-conic-gradient(from 0deg at 50% 38%, color-mix(in srgb,var(--t-edge) 20%,transparent) 0deg 4deg, transparent 4deg 12deg);
  opacity:.4; mix-blend-mode:screen; }
.stlg-card:hover .stlg-art::after, .stlg-card:focus-within .stlg-art::after{ animation:stlg-spin 28s linear infinite; }
@keyframes stlg-spin{ to{ transform:rotate(360deg); } }
.stlg-art-media{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 30%; z-index:1; }
.stlg-spark{ position:absolute; z-index:2; background:radial-gradient(circle, #fff 0%, rgba(255,255,255,.2) 35%, transparent 65%); filter:drop-shadow(0 0 7px #fff); }
.stlg-s1{ top:33%; left:27%; width:16px; height:16px; opacity:.95; }
.stlg-s2{ top:41%; left:66%; width:11px; height:11px; opacity:.8; }

.stlg-scrim{ position:absolute; inset:0; z-index:2; pointer-events:none;
  background:
    linear-gradient(180deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,0) 18%),
    linear-gradient(180deg, rgba(0,0,0,0) 52%, color-mix(in srgb,var(--t-bg1) 55%,transparent) 70%, color-mix(in srgb,var(--t-bg1) 90%,#000) 88%, #050507 100%); }

.stlg-content{ position:relative; z-index:4; height:100%; display:flex; flex-direction:column; }

.stlg-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; padding:13px 15px 0; }
.stlg-stage-line{ display:flex; align-items:center; gap:6px; margin-bottom:3px; }
.stlg-stage-txt{ font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:.24em; text-transform:uppercase; color:var(--t-neon); text-shadow:0 0 9px var(--t-glow), 0 1px 4px rgba(0,0,0,.95); }
.stlg-title{ font-family:'Anton',sans-serif; font-size:23px; line-height:.94; text-transform:uppercase; color:#fff;
  text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 6px rgba(0,0,0,.75);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:190px; }
.stlg-hp{ display:flex; align-items:center; gap:7px; flex-shrink:0; }
.stlg-price-wrap{ display:flex; flex-direction:column; align-items:flex-end; }
.stlg-price-kicker{ font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:8.5px; letter-spacing:.16em; text-transform:uppercase;
  color:var(--t-neon); text-shadow:0 0 8px var(--t-glow), 0 1px 3px rgba(0,0,0,.9); line-height:1; margin-bottom:2px; }
.stlg-price{ font-family:'Anton',sans-serif; font-size:26px; line-height:1; transform:skewX(-7deg); color:#fff;
  text-shadow:0 0 2px #fff, 0 0 12px var(--t-neon), 0 0 24px var(--t-glow), 0 2px 5px rgba(0,0,0,.85); white-space:nowrap; }
.stlg-energy{ width:46px; height:46px; flex-shrink:0; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle, color-mix(in srgb,var(--t-glow) 34%,transparent) 0%, transparent 68%);
  filter:drop-shadow(0 0 7px var(--t-glow)) drop-shadow(0 0 14px color-mix(in srgb,var(--t-neon) 60%,transparent)) drop-shadow(0 2px 3px rgba(0,0,0,.55)); }
.stlg-energy img.stlg-gem{ width:100%; height:100%; object-fit:contain; display:block; }

.stlg-spacer{ flex:1 1 auto; min-height:16%; }

.stlg-lower{ position:relative; padding-bottom:2px; }
.stlg-stamp-row{ padding:0 15px 5px; }
.stlg-set-stamp{ font-family:'Saira Condensed',sans-serif; font-weight:700; font-size:10px; letter-spacing:.26em; text-transform:uppercase;
  color:var(--t-neon); text-shadow:0 0 10px var(--t-glow), 0 0 18px var(--t-neon), 0 1px 3px rgba(0,0,0,.85); }
.stlg-desc{ padding:0 16px 10px; font-family:inherit; font-weight:500; font-size:12.5px; line-height:1.5; color:#eef2f9;
  text-shadow:0 1px 5px rgba(0,0,0,.95), 0 0 14px rgba(0,0,0,.6);
  display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }

.stlg-foot{ display:flex; align-items:center; justify-content:space-between; padding:4px 15px 6px; font-family:'Saira Condensed',sans-serif; }
.stlg-meta{ font-size:8px; letter-spacing:.12em; text-transform:uppercase; color:#8d96aa; line-height:1.4; }
.stlg-rarity{ display:flex; align-items:center; gap:4px; }
.stlg-stars{ color:var(--t-edge2); font-size:10px; letter-spacing:1px; text-shadow:0 0 8px var(--t-glow); }
.stlg-tier{ font-size:8px; font-weight:700; letter-spacing:.18em; color:var(--t-neon); text-shadow:0 0 8px var(--t-glow); }

/* CTA: stretched, neon, continuous shine-shimmer */
.stlg-cta{ position:relative; display:block; width:calc(100% - 24px); margin:6px 12px 15px; z-index:5; overflow:hidden; text-decoration:none;
  border:none; cursor:pointer; border-radius:12px; padding:13px 14px 11px;
  font-family:'Anton',sans-serif; font-size:18px; line-height:1; text-transform:uppercase; color:#0a0a0a;
  background:linear-gradient(180deg, color-mix(in srgb,var(--t-edge) 82%,#fff) 0%, var(--t-edge) 48%, var(--t-edge2) 100%);
  box-shadow:0 6px 20px -8px var(--t-glow), 0 0 16px -4px var(--t-glow), inset 0 1px 0 rgba(255,255,255,.75);
  transition:transform .25s var(--ease), box-shadow .25s var(--ease), filter .25s var(--ease); }
.stlg-cta-label{ position:relative; z-index:2; display:block; text-align:center; letter-spacing:.34em; padding-left:.34em; text-shadow:0 1px 0 rgba(255,255,255,.4); }
.stlg-cta-shimmer{ position:absolute; inset:0; z-index:1; border-radius:inherit; overflow:hidden; pointer-events:none; }
.stlg-cta-shimmer::before{ content:""; position:absolute; top:-20%; left:-150%; width:55%; height:140%;
  background:linear-gradient(105deg, transparent 20%, rgba(255,255,255,.9) 50%, transparent 80%);
  transform:skewX(-18deg); animation:stlg-cta-shimmer 3.2s ease-in-out infinite; }
@keyframes stlg-cta-shimmer{ 0%{ left:-150%; } 55%,100%{ left:160%; } }
.stlg-cta:hover{ transform:translateY(-2px); filter:brightness(1.14) saturate(1.1); color:#0a0a0a;
  box-shadow:0 12px 32px -6px var(--t-glow), 0 0 34px -2px var(--t-glow), inset 0 1px 0 rgba(255,255,255,.9); }
.stlg-cta:active{ transform:translateY(0); }
.stlg-cta:focus-visible{ outline:2px solid #fff; outline-offset:3px; }

/* holo */
.stlg-shine, .stlg-glare{ position:absolute; inset:0; border-radius:calc(var(--card-r) - 8px); margin:12px; pointer-events:none; z-index:7; transition:opacity .3s var(--ease); }
.stlg-shine{ opacity:calc(var(--o) * .58);
  background-image:
    repeating-linear-gradient(115deg, #ff7a7a 0%, #ffe08a 7%, #8affc0 14%, #8ad7ff 21%, #c9a3ff 28%, #ff9ad6 35%, #ff7a7a 42%),
    repeating-linear-gradient(60deg, rgba(255,255,255,.06) 0px, rgba(0,0,0,.06) 2px, rgba(255,255,255,.06) 4px),
    radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.5) 0%, rgba(255,255,255,.08) 28%, rgba(0,0,0,.5) 88%);
  background-blend-mode:color-dodge, overlay, multiply; background-size:220% 220%, 100% 100%, 200% 200%;
  background-position:calc(((50% - var(--posx)) * 1.6) + 50%) calc(((50% - var(--posy)) * 1.6) + 50%), center, center;
  mix-blend-mode:color-dodge; filter:brightness(calc(.45 + var(--hyp) * .4)) contrast(1.3) saturate(1.3); }
.stlg-glare{ opacity:calc(var(--o) * .5);
  background:radial-gradient(farthest-corner circle at var(--mx) var(--my), rgba(255,255,255,.55) 6%, rgba(255,255,255,.1) 30%, rgba(0,0,0,.3) 80%); mix-blend-mode:overlay; }

/* type themes (neon luminescence) */
.stlg-card[data-theme="gold"]      { --t-bg0:#2e1d02; --t-bg1:#140c01; --t-edge:#FFC93C; --t-edge2:#FFE89A; --t-glow:#FF9A1F; --t-neon:#FFD86B; --t-ink:#fff4d6; }
.stlg-card[data-theme="diamond"]   { --t-bg0:#04233f; --t-bg1:#020c1a; --t-edge:#5EE9FF; --t-edge2:#C9FBFF; --t-glow:#00C2FF; --t-neon:#7CF6FF; --t-ink:#eafdff; }
.stlg-card[data-theme="moissanite"]{ --t-bg0:#2a0a36; --t-bg1:#10041a; --t-edge:#FF6EE0; --t-edge2:#9CF0FF; --t-glow:#D14BFF; --t-neon:#FF8CF0; --t-ink:#ffeaff; }
.stlg-card[data-theme="opal"]      { --t-bg0:#062423; --t-bg1:#030f10; --t-edge:#5BF5C8; --t-edge2:#FFB3EC; --t-glow:#2BE0C0; --t-neon:#7CFFE0; --t-ink:#eafff8; }
.stlg-card[data-theme="silver"]    { --t-bg0:#10202c; --t-bg1:#070d12; --t-edge:#BFE6FF; --t-edge2:#FFFFFF; --t-glow:#7FC8FF; --t-neon:#DDF2FF; --t-ink:#f5fbff; }

/* mobile: let the card fill the screen and bump key text */
@media (max-width:600px){
  .stlg-card{ max-width:none; }
  .stlg-title{ font-size:26px; max-width:60vw; }
  .stlg-price{ font-size:30px; }
  .stlg-energy{ width:50px; height:50px; }
  .stlg-desc{ font-size:13.5px; }
  .stlg-cta{ font-size:20px; }
}

@media (prefers-reduced-motion: reduce){
  .stlg-card{ transition:none; transform:none !important; }
  .stlg-art::after{ animation:none; }
  .stlg-cta-shimmer::before{ animation:none; }
}