/* ---------- Theme ---------- */
:root{
  --bg:#0D1915;
  --panel:#101E18;
  --text:#E8FFF3;
  --muted:#BFEADB;
  --accent:#75FBB5;
  --ring:rgba(117,251,181,.25);
}

/* ---------- Base ---------- */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji";
  color:var(--text);
  background:#0D1915;
}

/* ---------- Header ---------- */
.hero{
  text-align:center;
  padding:42px 16px 26px;
}
.hero .logo {
  width: 260px;        /* bigger Coachable logo */
  margin-bottom: 10px;
  filter: drop-shadow(0 0 25px rgba(117, 251, 181, 0.4));
}

.hero h1 {
  font-size: 2.5rem;   /* smaller “Storefront” title */
  color: #75FBB5;
  margin-top: 0.3rem;
  text-shadow: 0 0 18px rgba(117, 251, 181, 0.3);
}

.tagline{
  margin:0;
  color:var(--muted);
  font-size: clamp(14px, 2.2vw, 18px);
  opacity:.9;
}

/* ---------- Grid (compact) ---------- */
main{padding:10px 0 70px}
.product-grid{
  display:grid;
  gap:22px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  max-width: 900px;         /* caps total width, keeps 2-up nicely */
  margin: 0 auto;
  padding: 0 20px;
  justify-content:center;
}

/* ---------- Card (compact) ---------- */
/* ===========================
   PRODUCT CARD REFINEMENT
   =========================== */
.card {
  background: #101E18;
  border: 1px solid rgba(117, 251, 181, 0.12);
  border-radius: 14px;
  padding: 0 20px 25px 20px; /* no top padding */
  text-align: center;
  max-width: 360px;
  margin: 0 auto;
  box-shadow: 0 0 18px rgba(117, 251, 181, 0.1);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
}

.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 0 25px rgba(117, 251, 181, 0.25);
}
/* ===========================
   PRODUCT IMAGE — CINEMATIC EMBED
   =========================== */
.image-wrap {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* maintains that "TV" shape */
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 20px;
  background: #000; /* fallback under image */
  box-shadow:
    0 0 0 rgba(0,0,0,0), /* reset glow */
    inset 0 0 60px rgba(0, 0, 0, 0.9), /* deep inner shadow */
    0 12px 30px rgba(0, 0, 0, 0.55); /* soft outer shadow */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.image-wrap:hover {
  transform: scale(1.01);
  box-shadow:
    inset 0 0 70px rgba(0, 0, 0, 0.95),
    0 18px 35px rgba(0, 0, 0, 0.65);
}

/* Make the image behave like a screen */
.thumb {
  width: 100%;
  height: 100%;
  object-fit: cover; /* ensures full coverage, no stretch */
  display: block;
  border-radius: 0;
  filter: brightness(0.92) contrast(1.1);
  transition: filter 0.3s ease, transform 0.3s ease;
}

.thumb:hover {
  filter: brightness(1) contrast(1.15);
  transform: scale(1.02);
}

/* ---------- Text ---------- */
.card {
  background: #0b1713;
  border: 1px solid rgba(117,251,181,.12);
  border-radius: 14px;
  padding: 22px 18px 28px;
  text-align: center;
  max-width: 340px;
  margin: 0 auto;
  box-shadow: 0 0 12px rgba(117,251,181,.08);
  transition: transform .2s ease, box-shadow .2s ease;
}

.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 0 18px rgba(117,251,181,.22);
}

/* ===========================
   BUY NOW BUTTON STYLING
   =========================== */
.card .button,
.card button {
  display: inline-block;
  background: #75FBB5 !important;
  border: none;
  color: #0E1C16 !important;
  font-weight: 700;
  font-size: 1rem;
  padding: 10px 26px;
  border-radius: 8px;
  cursor: pointer;
  box-shadow: 0 0 14px rgba(117, 251, 181, 0.35);
  transition: all 0.25s ease-in-out;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card .button:hover,
.card button:hover {
  background: #98FDCB !important;
  box-shadow: 0 0 22px rgba(117, 251, 181, 0.45);
  transform: translateY(-3px);
}

/* ---------- Footer ---------- */
footer{
  border-top:1px solid rgba(117,251,181,.08);
  background: rgba(0,0,0,.18);
  padding:22px 16px;
  text-align:center;
  color:var(--muted);
}
footer a{ color:var(--accent); text-decoration:none }
footer a:hover{ text-decoration:underline }