/* =========================================
   Mess O' Pedals — Store CSS
   Terminal / scanline product cards
   ========================================= */

/* ---------- Store intro ---------- */
.store-intro{ text-align:left; }
.store-intro .store-intro-main{
  font-size:1.05rem;
  color:var(--ink);
  margin-top:8px;
}
.store-intro .store-intro-note{
  margin-top:12px;
  padding:14px;
  background:rgba(0,255,204,0.05);
  border:1px solid rgba(0,255,204,0.20);
  font-size:.92rem;
}
.store-intro .store-intro-note strong{ color:var(--accent); font-family:var(--font-mono); }

/* ---------- Section headings ---------- */
.store-section h2{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
}
.store-text{ color:var(--ink-dim); max-width:68ch; }

/* ---------- Product grid ---------- */
.product-grid{
  margin-top:16px;
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(230px,260px));
  justify-content:start;
  gap:18px;
  counter-reset:scan;
}
@media (max-width:540px){
  .product-grid{ grid-template-columns:1fr; }
}

/* ---------- Product card ---------- */
.product-card{
  display:flex;
  flex-direction:column;
  background:var(--bg-alt);
  border:1px solid var(--border);
  border-radius:0;
  overflow:hidden;
  transition:border-color .2s steps(4),box-shadow .2s steps(4);
}
.product-card:hover{
  border-color:var(--accent);
  box-shadow:0 0 24px rgba(0,255,204,0.08);
}

/* ---------- Media (scanline) ---------- */
/* Standard product image = square, transparent PNG, shown uncropped (contain). */
.product-media{
  position:relative;
  aspect-ratio:1/1;
  overflow:hidden;
  border-bottom:1px solid var(--border);
  counter-increment:scan;
  isolation:isolate;
}
.product-media img{
  width:100%;
  height:100%;
  object-fit:contain;
  padding:10px;
  filter:saturate(.25) contrast(1.15);
  opacity:.72;
  transition:filter .3s ease,opacity .3s ease;
}
.product-card:hover .product-media img{ filter:saturate(1) contrast(1); opacity:1; }
.product-media::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(rgba(0,0,0,0) 50%,rgba(0,0,0,0.18) 50%),
    linear-gradient(90deg,rgba(255,0,0,.04),rgba(0,255,0,.02),rgba(0,0,255,.04));
  background-size:100% 3px,3px 100%;
}
.product-media::after{
  content:"SCAN_ITEM_00" counter(scan);
  position:absolute;
  top:6px;
  right:8px;
  z-index:3;
  font-family:var(--font-mono);
  font-size:10px;
  letter-spacing:1px;
  color:var(--accent);
  opacity:.6;
}

/* ---------- Body ---------- */
.product-body{
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:8px;
  flex:1;
}
.product-title{
  margin:0;
  font-family:var(--font-mono);
  font-size:1.05rem;
  font-weight:700;
  color:var(--text);
}
.product-title a{ color:inherit; text-decoration:none; }
.product-title a:hover{ color:var(--accent); text-decoration:none; }
.blurb{
  margin:0;
  color:var(--ink-dim);
  font-size:.9rem;
  line-height:1.6;
  max-width:60ch;
}
.price{
  margin:auto 0 0;
  font-family:var(--font-mono);
  font-weight:800;
  letter-spacing:1px;
  font-size:1.15rem;
  color:var(--text);
}

/* ---------- Actions / buttons ---------- */
.product-actions{
  margin-top:6px;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  align-items:center;
}
.btn{
  position:relative;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:40px;
  padding:10px 16px;
  border-radius:0;

  font-family:var(--font-mono);
  font-weight:700;
  letter-spacing:1.5px;
  text-transform:uppercase;
  font-size:0.72rem;

  text-decoration:none;
  border:1px solid var(--border);
  background:transparent;
  color:var(--text);
  cursor:pointer;
  transition:color .2s steps(3),border-color .2s steps(3);
}

/* primary = card checkout, with sliding reveal */
.btn-primary{
  border-color:var(--accent);
  color:var(--accent);
}
.btn-primary::after{
  content:"MAKE IT MINE >";
  position:absolute;
  inset:0;
  left:-100%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:var(--accent);
  color:#000;
  transition:left .3s cubic-bezier(.86,0,.07,1);
}
.btn-primary:hover::after{ left:0; }

/* ghost = email */
.btn-ghost{
  border-color:var(--border);
  color:var(--muted);
}
.btn-ghost:hover{ border-color:var(--pink); color:var(--pink); text-decoration:none; }

/* disabled (e.g. Stripe link not added yet) */
.btn.disabled,
.btn[aria-disabled="true"],
.btn-ghost.disabled{
  opacity:0.45;
  cursor:not-allowed;
  pointer-events:none;
}
.btn.disabled::after{ display:none; }

/* ---------- Sold state ---------- */
.product-card--sold{ opacity:0.6; filter:grayscale(0.4); }
.price--sold{ color:var(--muted); }
.sold-tag{
  display:inline-flex;
  align-items:center;
  width:fit-content;
  margin-top:6px;
  padding:6px 12px;
  border-radius:0;
  font-family:var(--font-mono);
  font-size:0.68rem;
  font-weight:700;
  letter-spacing:2px;
  text-transform:uppercase;
  color:var(--pink);
  background:rgba(255,91,200,0.08);
  border:1px solid rgba(255,91,200,0.35);
}

/* ---------- Detail-page image gallery (front/top/side/back) ---------- */
.hero-gallery{ display:flex; flex-direction:column; gap:8px; }
.hero-gallery .hero-media{
  position:relative;
  border:1px solid var(--border);
  border-left:2px solid var(--border-glow);
  background:#000;
}
.hero-gallery .hero-main{ display:block; width:100%; height:auto; cursor:zoom-in; }
.hero-thumbs{ display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.hero-thumbs button{
  padding:0; margin:0;
  border:1px solid var(--border);
  background:#000; cursor:pointer;
  aspect-ratio:1/1; overflow:hidden;
  transition:border-color .15s steps(3);
}
.hero-thumbs button.active{ border-color:var(--accent); box-shadow:0 0 0 1px var(--accent); }
.hero-thumbs button:hover{ border-color:var(--pink); }
.hero-thumbs img{ width:100%; height:100%; object-fit:contain; display:block; }
.hero-thumbs button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; }

/* lightbox (full-size view on click) */
.lb-overlay{
  position:fixed; inset:0; z-index:2000;
  display:none; align-items:center; justify-content:center;
  padding:24px;
  background:rgba(4,0,7,0.92);
  backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  cursor:zoom-out; overflow:auto;
}
.lb-overlay.open{ display:flex; }
.lb-overlay img{ max-width:100%; max-height:100%; border:1px solid var(--border-glow); }
.lb-close{
  position:fixed; top:14px; right:18px;
  font-family:var(--font-mono); font-size:.8rem; letter-spacing:1px; text-transform:uppercase;
  color:var(--accent); background:rgba(8,0,12,0.7);
  border:1px solid rgba(0,255,204,0.35); padding:.4rem .7rem; cursor:pointer;
}

/* ---------- "Cursed" / as-is disclaimer ---------- */
.curse-note{
  margin:22px 0 0;
  padding:16px 18px;
  background:rgba(255,91,200,0.05);
  border:1px solid rgba(255,91,200,0.30);
  border-left:2px solid var(--pink);
}
.curse-note .curse-tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--pink); background:rgba(255,91,200,0.06);
  border:1px solid rgba(255,91,200,0.35); padding:.2rem .5rem;
}
.curse-note p{ margin:0; color:var(--ink-dim); font-size:.9rem; line-height:1.65; }

/* Repair & refund guarantee - shown in the store intro and on every listing */
.guarantee-note{
  margin:14px 0 0;
  padding:16px 18px;
  background:rgba(0,255,204,0.05);
  border:1px solid rgba(0,255,204,0.30);
  border-left:2px solid var(--accent);
}
.guarantee-note .guarantee-tag{
  display:inline-block;
  font-family:var(--font-mono); font-size:.66rem; letter-spacing:2px; text-transform:uppercase;
  color:var(--accent); background:rgba(0,255,204,0.06);
  border:1px solid rgba(0,255,204,0.35); padding:.2rem .5rem; margin-bottom:10px;
}
.guarantee-note p{ margin:0; color:var(--ink-dim); font-size:.9rem; line-height:1.65; }
.guarantee-note p + p{ margin-top:8px; }