/* Gotta Custom'Em All — shared styles */

:root{
  --bg:#121216;
  --text:#f2f0eb;
  --text-65:rgba(242,240,235,.82);
  --text-55:rgba(242,240,235,.74);
  --text-45:rgba(242,240,235,.68);
  --text-35:rgba(242,240,235,.62);
  --holo:linear-gradient(110deg,#c9a7ff,#8be0ff,#ffe9a8,#ffb3c7,#c9a7ff);
  --paypal:#ffc439;
}

*{box-sizing:border-box}

html,body{margin:0;padding:0}

body{
  font-family:'Space Grotesk',sans-serif;
  color:var(--text);
  background:var(--bg);
  min-height:100vh;
  position:relative;
}

a{color:inherit}

.sr-only{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0,0,0,0)!important;
  white-space:nowrap!important;
  border:0!important;
}

:focus-visible{
  outline:3px solid #8be0ff!important;
  outline-offset:3px!important;
}

/* Older inline styles used display-only opacity levels for body-sized text.
   Raise those text colors to readable contrast without changing translucent
   borders/backgrounds that use the same palette. */
[style*="color:rgba(242,240,235,.3)"],
[style*="color:rgba(242,240,235,.35)"],
[style*="color:rgba(242,240,235,.4)"],
[style*="color:rgba(242,240,235,.45)"],
[style*="color:rgba(242,240,235,.5)"],
[style*="color:rgba(242,240,235,.55)"]{
  color:rgba(242,240,235,.72)!important;
}

canvas.dust{
  position:fixed;
  inset:0;
  width:100vw;
  height:100vh;
  pointer-events:none;
  z-index:0;
}

.wrap{
  max-width:1400px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* ---- keyframes ---- */
@keyframes holoSweep{
  0%{background-position:0% 50%}
  100%{background-position:200% 50%}
}
@keyframes cardFloat{
  0%,100%{transform:rotate(-3deg) translateY(0)}
  50%{transform:rotate(-3deg) translateY(-10px)}
}
@keyframes cardFloat2{
  0%,100%{transform:rotate(4deg) translateY(46px)}
  50%{transform:rotate(4deg) translateY(34px)}
}

/* ---- holo text / bg helpers ---- */
.holo-text{
  background:var(--holo);
  background-size:200% 100%;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  animation:holoSweep 6s linear infinite;
}
.holo-text-hover:hover,
.holo-text-hover.is-active{
  background:linear-gradient(110deg,#c9a7ff,#8be0ff,#ffe9a8,#ffb3c7);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
}
.holo-bg{
  background:var(--holo);
  background-size:200% 100%;
  animation:holoSweep 6s linear infinite;
}

/* ---- pills ---- */
.pill{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
  border-radius:999px;
  font-weight:700;
  cursor:pointer;
  transition:transform .2s ease,box-shadow .2s ease;
  white-space:nowrap;
  border:none;
}
.pill:hover{
  transform:translateY(-2px);
}
.pill-holo{
  color:var(--bg);
}
.pill-holo:hover{
  box-shadow:0 8px 24px rgba(201,167,255,.25);
}
.pill-light{
  background:var(--text);
  color:var(--bg);
}
.pill-light:hover{
  box-shadow:0 8px 24px rgba(242,240,235,.18);
  background:var(--holo);
  background-size:200% 100%;
  animation:holoSweep 6s linear infinite;
}

/* ---- load stagger / reveal ---- */
[data-load]{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
}
[data-load].in{
  opacity:1;
  transform:none;
}
[data-reveal]{
  opacity:0;
  transform:translateY(26px);
  transition:opacity .7s ease, transform .7s cubic-bezier(.22,1,.36,1);
}
[data-reveal].in{
  opacity:1;
  transform:none;
}

/* ---- image placeholder ("image-slot" stand-in) ---- */
.image-slot{
  display:block;
  width:100%;
  height:100%;
  background:linear-gradient(135deg,#1c1c22,#232329);
  border:1px dashed rgba(242,240,235,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:rgba(242,240,235,.3);
  font-size:12px;
  padding:10px;
  overflow:hidden;
}
.image-slot img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.image-slot.is-filled{
  background:none;
  border:none;
  padding:0;
}

/* ---- protected design photos ---- */
/* Raises the bar against casual right-click-save / drag-out / iOS long-press
   "Save Image", on top of the watermark already baked into the images.
   Can't block screenshots or devtools — no web page can — this just removes
   the one-tap save affordances browsers offer by default. */
.gcea-protected{
  -webkit-user-select:none;
  user-select:none;
  -webkit-user-drag:none;
  user-drag:none;
  -webkit-touch-callout:none;
}

/* ---- interactive slab label editor ----
   Overlays real inputs on top of the actual label artwork (assets/slab-label-
   blank.png), positioned in percentages of that file's own 826×236 grid so
   it scales cleanly at any size.
   Font: the uploaded Univers Light file is corrupted (fails to parse in
   every browser — confirmed via FontFace().load(), not just a CSP/path
   issue) and its metadata suggests an unlicensed repack rather than a real
   Univers export, so there's no @font-face here yet. Falls back to Work
   Sans (Google-hosted, loaded in store.html) at a real 300 weight instead
   of relying on "Helvetica Neue"/Arial at weight 300 — most non-Mac systems
   don't ship an actual light weight for those, so the browser silently
   renders them at regular weight, which read much heavier than the real
   label's thin printed text. */
.slab-label{
  position:relative;
  width:100%;
  aspect-ratio:826/236;
  margin-top:10px;
  container-type:inline-size;
}
.slab-label-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
  user-select:none;
}
.slab-field{
  position:absolute;
  font-family:'Univers Label','Work Sans','Helvetica Neue',Arial,sans-serif;
  font-weight:300;
  color:#181818;
  text-transform:uppercase;
  letter-spacing:.01em;
  display:flex;
  align-items:center;
}
/* Font sizes are in cqw (% of the label's own width) — note this is NOT the
   same axis as the row heights below (% of label height), since the label
   is a ~3.5:1 wide rectangle. Sizing off the wrong axis was the earlier bug:
   it made every field's text ~3x too large for its row. */
/* Per the source Canva file: left-side text (Pokémon/collection) is 8.8pt,
   the "#" and card number on the right are 8.7pt — essentially the same
   size. Cross-checked by measuring the actual baked-in text pixels in
   slab-label-blank.png (title/"GEM MT"/"10" all sample to ~25-26px cap
   height at native 826px width) and solving for the font-size that
   produces the same ink height in the fallback font — 4.5cqw. */
/* Right column ("#054", "GEM MT", "10", the certification number) all share
   one right edge in the source file — positioned with `right` instead of
   `left`+`width` so every right-aligned field lines up on that same edge
   regardless of how wide its own content/box is. */
.slab-field-number{
  right:5.8%; width:26%; top:12%; height:18%;
  justify-content:flex-end;
  font-size:4.5cqw;
  background:#f3f2ef;
}
.slab-field-pokemon{ left:5.3%; width:64.5%; top:29%; height:18%; font-size:4.5cqw; }
.slab-field-collection{ left:5.3%; width:64.5%; top:47%; height:19%; font-size:4.5cqw; }
.slab-field-cert{
  right:5.8%; width:27%; top:64%; height:22%;
  justify-content:flex-end;
  font-size:4.5cqw;
}
.slab-input{
  background:transparent;
  border:none;
  border-bottom:1.5px dashed rgba(230,57,47,.6);
  outline:none;
  padding:0;
  min-width:0;
  text-align:right;
}
/* Left-aligned fields keep a hair of left padding so text doesn't touch the
   dashed underline's start; right-aligned fields get none, since even 1px
   of padding-right was visibly enough to throw off the right-column
   alignment against the baked-in "GEM MT"/"10" text. */
.slab-field-pokemon.slab-input, .slab-field-collection.slab-input{ text-align:left; padding-left:1px; }
.slab-input:focus{ border-bottom-color:#e6392f; }
.slab-input::placeholder{ color:rgba(24,24,24,.3); }
/* "CERTIFICATION NUMBER" is long for a narrow right-column box — shrink
   just the placeholder so it fits; typed digits still render at full size. */
.slab-field-number.slab-input::placeholder{ font-size:2.5cqw; letter-spacing:0; }
/* Field flagged empty when the buyer tries to add an incomplete slab to cart. */
.slab-input.slab-field-error{ border-bottom:2px solid #e6392f; }
.slab-input.slab-field-error::placeholder{ color:rgba(230,57,47,.75); }

/* Commission brief inputs (card name / description) and their empty-field flag. */
.commission-input:focus{ border-color:rgba(139,224,255,.6); }
.commission-input.field-error{ border-color:#e6392f; }
.commission-input.field-error::placeholder{ color:rgba(230,57,47,.6); }

/* ---- footer ---- */
.footer{
  display:flex;
  justify-content:space-between;
  gap:8px 20px;
  flex-wrap:wrap;
  padding:22px clamp(16px,4vw,48px);
  border-top:1px solid rgba(242,240,235,.1);
  font-size:11px;
  color:var(--text-35);
  max-width:1400px;
  margin:0 auto;
  position:relative;
  z-index:1;
}

/* ---- store page interactive hovers ---- */
.stepper-btn:hover{ transform:scale(1.9); }
.light-pill-hover{ background:#f2f0eb; color:#121216; }
.light-pill-hover:hover{ background:var(--holo); background-size:200% 100%; animation:holoSweep 6s linear infinite; transform:translateY(-2px); box-shadow:0 8px 24px rgba(242,240,235,.18); }
.add-cart-pill{ background:#f2f0eb; color:#121216; }
.add-cart-pill:hover{ background:var(--holo); background-size:200% 100%; animation:holoSweep 6s linear infinite; transform:translateY(-2px); box-shadow:0 8px 24px rgba(242,240,235,.18); }
/* Slab label still has empty fields — button stays clickable (so the click can
   explain what's missing) but reads as not-yet-ready and drops its hover holo. */
.add-cart-pill.add-cart-pill-disabled{ background:rgba(242,240,235,.35); color:rgba(18,18,22,.55); cursor:not-allowed; }
.add-cart-pill.add-cart-pill-disabled:hover{ background:rgba(242,240,235,.35); animation:none; transform:none; box-shadow:none; }
.product-card:hover{ border-color:rgba(242,240,235,.18) !important; }
.product-sheen:hover{ opacity:1; }
.product-title-row:hover .product-title{ text-decoration:underline; text-decoration-color:rgba(242,240,235,.4); }
.view-details-link:hover{ color:rgba(242,240,235,.75); }
.remove-link:hover{ color:#ff8a8a; }
.close-x:hover{ color:#f2f0eb; }
.paypal-btn:hover{ filter:brightness(1.05); }

/* ---- ember / smoke particle layer (on card photos) ---- */
.ember-layer{
  position:absolute;
  inset:0;
  overflow:hidden;
  pointer-events:none;
}
.ember{
  position:absolute;
  bottom:-8%;
  border-radius:50%;
  background:radial-gradient(circle,#fff6d8,#ffb347 40%,#ff5b2e 78%,transparent 100%);
  box-shadow:0 0 6px 1px rgba(255,140,50,.85),0 0 14px 3px rgba(255,80,30,.45);
  animation:emberRise linear infinite;
  will-change:transform,opacity;
}
@keyframes emberRise{
  0%{transform:translate(0,0) scale(.5);opacity:0}
  12%{opacity:1}
  75%{opacity:.75}
  100%{transform:translate(var(--drift,12px),-135%) scale(1);opacity:0}
}
.smoke{
  position:absolute;
  bottom:2%;
  border-radius:50%;
  background:radial-gradient(circle,rgba(130,120,118,.32),rgba(90,82,80,.14) 55%,transparent 76%);
  filter:blur(3px);
  animation:smokeRise linear infinite;
  will-change:transform,opacity;
}
@keyframes smokeRise{
  0%{transform:translate(0,10%) scale(.5);opacity:0}
  20%{opacity:.45}
  100%{transform:translate(var(--drift,18px),-145%) scale(1.7);opacity:0}
}

/* ---- live inline edit mode ---- */
#gcea-edit-toggle{
  position:fixed;
  bottom:24px;
  right:24px;
  z-index:9999;
  background:#f2f0eb;
  color:#121216;
  padding:13px 22px;
  border-radius:999px;
  font-weight:700;
  font-size:13px;
  font-family:'Space Grotesk',sans-serif;
  cursor:pointer;
  box-shadow:0 14px 40px rgba(0,0,0,.5);
  transition:transform .2s ease,box-shadow .2s ease,background .2s ease;
  user-select:none;
}
#gcea-edit-toggle:hover{ transform:translateY(-2px); }
#gcea-edit-toggle.active{
  background:linear-gradient(110deg,#c9a7ff,#8be0ff,#ffe9a8,#ffb3c7,#c9a7ff);
  background-size:200% 100%;
  animation:holoSweep 6s linear infinite;
}
body.gcea-edit-mode [data-content],
body.gcea-edit-mode .gcea-editable{
  outline:1.5px dashed rgba(139,224,255,.5);
  outline-offset:3px;
  border-radius:4px;
  cursor:text;
  transition:background .15s ease;
}
body.gcea-edit-mode [data-content]:hover,
body.gcea-edit-mode .gcea-editable:hover{
  background:rgba(139,224,255,.08);
}
body.gcea-edit-mode [data-content]:focus,
body.gcea-edit-mode .gcea-editable:focus{
  outline:1.5px solid #8be0ff;
  background:rgba(139,224,255,.12);
}
.gcea-flash-saved{ background:rgba(139,224,255,.35) !important; }
.gcea-flash-error{ background:rgba(255,138,138,.35) !important; }

.gcea-edit-only{ display:none; }
body.gcea-edit-mode .gcea-edit-only{ display:flex; }

.gcea-delete-btn{
  position:absolute;
  top:8px;
  right:8px;
  width:26px;
  height:26px;
  border-radius:50%;
  background:rgba(0,0,0,.65);
  color:#ff8a8a;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:14px;
  z-index:6;
  border:1px solid rgba(255,138,138,.4);
}
.gcea-delete-btn:hover{ background:rgba(255,138,138,.25); }

.gcea-photo-edit-btn{
  position:absolute;
  bottom:8px;
  right:8px;
  padding:6px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.65);
  color:#f2f0eb;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  font-size:11px;
  font-weight:600;
  z-index:6;
  border:1px solid rgba(242,240,235,.3);
}
.gcea-photo-edit-btn:hover{ background:rgba(242,240,235,.2); }

.gcea-add-tile{
  border:1px dashed rgba(139,224,255,.4);
  border-radius:16px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  gap:8px;
  cursor:pointer;
  color:rgba(139,224,255,.8);
  font-size:14px;
  font-weight:700;
  min-height:140px;
}
.gcea-add-tile:hover{ background:rgba(139,224,255,.08); }

/* ---- tilt / glare wrapper ---- */
.tilt-host{
  position:relative;
}
.tilt-inner{
  position:absolute;
  inset:0;
}
.glare{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s ease;
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    scroll-behavior:auto!important;
    animation-duration:.01ms!important;
    animation-iteration-count:1!important;
    transition-duration:.01ms!important;
  }
  canvas.dust,.ember-layer{display:none!important}
  [data-load],[data-reveal]{opacity:1!important;transform:none!important}
}