:root{
  --bg:#fff;
  --bg-elevated:#F4F6F9;
  --border:rgba(11,15,25,.10);
  --border-soft:rgba(11,15,25,.06);
  --text:#0B0F19;
  --text-muted:#5B6472;
  --accent:#2563EB;
  --star:#f6c945;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;}
button{font-family:inherit;}

.page{
  max-width:1180px;
  margin:0 auto;
  padding:0 0 40px;
}

.desktop-only{display:none;}

/* ---------- Header ---------- */
.top-bar{
  display:flex;
  align-items:center;
  justify-content:center;
  position:relative;
  padding:20px 20px 24px;
}
.top-bar-spacer{width:32px;}
.brand-icon{width:46px;height:46px;object-fit:contain;}
.icon-btn{
  background:none;
  border:none;
  color:var(--text);
  padding:6px;
  display:flex;
}
.icon-btn svg{width:24px;height:24px;display:block;}
.back-btn{position:absolute;left:16px;top:50%;transform:translateY(-50%);text-decoration:none;}

/* ---------- Order summary collapsed (mobile) ---------- */
.order-summary-collapsed{
  display:flex;
  align-items:center;
  justify-content:space-between;
  background:var(--bg-elevated);
  border-top:1px solid var(--border-soft);
  border-bottom:1px solid var(--border-soft);
  padding:16px 20px;
}
.order-summary-toggle{
  background:none;
  border:none;
  color:var(--text);
  font-size:16px;
  display:flex;
  align-items:center;
  gap:6px;
  padding:0;
  cursor:pointer;
}
.order-summary-toggle .chev{width:16px;height:16px;transition:transform .2s ease;}
.order-summary-price{font-size:19px;font-weight:700;}

.order-summary-detail{
  display:none;
  background:var(--bg-elevated);
  border-bottom:1px solid var(--border-soft);
}
.order-summary-detail.open{
  display:block;
  padding:16px 20px 20px;
}

/* ---------- Checkout embed ---------- */
.checkout-embed-section{padding:24px 20px 0;}
.checkout-error{
  color:#B42318;
  background:#FEF2F2;
  border:1px solid rgba(180,35,24,.25);
  border-radius:14px;
  padding:16px;
  font-size:14px;
  line-height:1.5;
}

/* ---------- Rating row ---------- */
.rating-row{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:22px 20px;
  flex-wrap:wrap;
}
.rule{flex:1;max-width:28px;height:1px;background:var(--border);}
.stars{color:var(--star);letter-spacing:2px;font-size:14px;}
.rating-text{color:var(--text-muted);font-size:13px;white-space:nowrap;}

/* ---------- Footer ---------- */
.footer{
  border-top:1px solid var(--border-soft);
  padding:20px 20px 0;
  display:flex;
  flex-wrap:wrap;
  gap:8px 18px;
  justify-content:center;
}
.footer a{
  font-size:12.5px;
  color:var(--text-muted);
  text-decoration:underline;
  white-space:nowrap;
}

/* ---------- Order summary (shared between mobile detail + desktop sidebar) ---------- */
.summary-product{
  display:flex;
  align-items:flex-start;
  gap:14px;
  padding-bottom:16px;
  border-bottom:1px solid var(--border-soft);
  margin-bottom:16px;
}
.summary-thumb{
  width:58px;height:58px;
  border-radius:10px;
  background:var(--bg-elevated) center/cover no-repeat;
  position:relative;
  flex-shrink:0;
}
.summary-thumb-qty{
  position:absolute;
  top:-8px;right:-8px;
  background:var(--accent);
  color:#fff;
  font-size:11px;
  font-weight:700;
  width:20px;height:20px;
  border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.summary-product-copy{display:flex;flex-direction:column;gap:3px;flex:1;padding-top:4px;}
.summary-product-name{font-weight:600;font-size:14.5px;}
.summary-product-price{font-size:14.5px;padding-top:4px;}

.summary-line{
  display:flex;
  justify-content:space-between;
  font-size:14.5px;
  padding:8px 0;
  color:var(--text);
}
.summary-line .muted{color:var(--text-muted);}
.summary-total{
  border-top:1px solid var(--border-soft);
  margin-top:8px;
  padding-top:16px;
  font-size:16px;
  font-weight:700;
}

/* gracias.html reuses .page/.main-col for the shared header+footer chrome, but
   has no .summary-col — cancel the two-column desktop grid those rules assume. */
.gracias-body .page{grid-template-columns:1fr;}
.gracias-body .main-col{border-right:none;}

/* ---------- Gracias (confirmation) page — Poppins + blue gradient CTA,
   scoped to body.gracias-body so the rest of the checkout (still system-ui)
   is untouched. ---------- */
body.gracias-body{
  font-family:'Poppins',var(--font);
}
.gracias-page{
  max-width:480px;
  margin:0 auto;
  padding:64px 24px 48px;
  text-align:center;
}
.gracias-page .brand-icon{margin-bottom:24px;}
.gracias-page h1{font-size:26px;font-weight:700;margin:0 0 12px;}
.gracias-page p{color:var(--text-muted);font-size:15px;line-height:1.5;margin:0 0 8px;}
.gracias-receipt{font-size:13px;color:var(--text-muted);margin-top:16px;}

.gracias-downloads{
  margin-top:32px;
  padding:24px 20px;
  border:1px solid var(--border-soft);
  border-radius:16px;
  background:var(--bg-elevated);
}
.gracias-downloads h2{font-size:17px;font-weight:700;margin:0 0 6px;}
.gracias-downloads p{margin:0 0 16px;}
.gracias-download-list{display:flex;flex-direction:column;gap:10px;}
.gracias-download-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  text-decoration:none;
  color:#fff;
  font-weight:700;
  font-size:14px;
  border-radius:999px;
  padding:14px 20px;
  background:linear-gradient(180deg,#3B82F6 0%,#2563EB 45%,#1D4ED8 100%);
  box-shadow:0 14px 30px -12px rgba(37,99,235,.45), inset 0 1px 0 rgba(255,255,255,.35);
  transition:filter .2s ease;
}
.gracias-download-btn:hover{filter:brightness(1.08);}
.gracias-downloads-status{
  margin-top:24px;
  font-size:13px;
  color:var(--text-muted);
  line-height:1.5;
}

.gracias-cta{
  display:inline-flex;
  margin-top:28px;
  background:transparent;
  color:var(--text);
  text-decoration:none;
  border:1px solid var(--border);
  border-radius:999px;
  padding:13px 32px;
  font-weight:600;
  font-size:14px;
}

/* ================= Desktop layout ================= */
@media (min-width:880px){
  .mobile-only{display:none;}
  .desktop-only{display:block;}
  .order-summary-detail{display:none !important;}

  body{padding:0;}
  .page{
    display:grid;
    grid-template-columns:1fr 420px;
    padding:0;
    max-width:1180px;
  }

  .main-col{
    grid-column:1;
    border-right:1px solid var(--border-soft);
    padding-bottom:20px;
  }
  .top-bar{justify-content:flex-start;padding:32px 48px 8px;}
  .top-bar-spacer{display:none;}
  .back-btn{left:48px;}

  .checkout-embed-section,.footer{padding-left:48px;padding-right:48px;}
  .rating-row{padding-left:48px;padding-right:48px;}
  .footer{justify-content:flex-start;padding-top:28px;margin-top:8px;}

  .summary-col{
    grid-column:2;
    background:var(--bg-elevated);
    min-height:100vh;
    padding:32px 40px;
  }
  .summary-sticky{position:sticky;top:32px;}
}

@media (min-width:1180px){
  .page{margin:0 auto;}
}