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

:root{
  --bg:#121216;
  --text:#f2f0eb;
  --text-65:rgba(242,240,235,.65);
  --text-55:rgba(242,240,235,.55);
  --text-45:rgba(242,240,235,.45);
  --text-35:rgba(242,240,235,.35);
  --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}

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{
  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;
}

/* ---- 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:hover{ transform:translateY(-2px); box-shadow:0 8px 24px rgba(242,240,235,.18); }
.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); }
.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;
}