/* Global Peptides — CSP-safe stylesheet (v18) */
:root{
  --bg:#0d0f12; --card:#151821; --text:#e7ecf0; --muted:#9aa4ae; --primary:#12cdb3;
  --stroke:#262a33; --radius:16px; --ok:#39d98a;
  --btn-bg:#1e222d; --btn-bg-primary-a:#22e0c0; --btn-bg-primary-b:#0bb6a0;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font:16px/1.55 system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif}
a{color:var(--text);text-decoration:none}
img{display:block;max-width:100%}
.container{max-width:1100px;margin:0 auto;padding:24px}
.nav{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--stroke);position:sticky;top:0;background:rgba(13,15,18,.7);-webkit-backdrop-filter: blur(12px);backdrop-filter: blur(12px);z-index:10}
.nav .spacer{flex:1}
.header-link img{height:42px;width:auto}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;gap:8px;padding:10px 16px;border:1px solid var(--stroke);border-radius:999px;background:var(--btn-bg);color:var(--text);cursor:pointer;transition:transform .12s ease, box-shadow .2s ease, border-color .2s ease;overflow:hidden}
.btn.primary{background:linear-gradient(135deg,var(--btn-bg-primary-a),var(--btn-bg-primary-b));border-color:transparent;color:#071d1a}
.btn:hover{border-color:#2f3643;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.btn.primary:hover{box-shadow:0 10px 22px rgba(18,205,179,.25), inset 0 0 0 1px rgba(255,255,255,.06)}
.btn:active{transform:translateY(1px)}
.btn::before{content:"";position:absolute;top:0;left:-150%;width:150%;height:100%;background:linear-gradient(120deg, rgba(255,255,255,.0) 0%, rgba(255,255,255,.18) 35%, rgba(255,255,255,.0) 70%);transform:skewX(-18deg);animation:gpShimmer 3.2s linear infinite;opacity:.35;pointer-events:none}
.btn.primary::before{opacity:.28}
@keyframes gpShimmer{0%{left:-150%}100%{left:120%}}
@media (prefers-reduced-motion: reduce){.btn::before{animation:none;opacity:.12}}

.badge{display:inline-flex;align-items:center;padding:2px 8px;border:1px solid var(--stroke);border-radius:999px;font-size:12px;opacity:.9;background:rgba(255,255,255,.02)}
.card{background:var(--card);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px}
.hero{display:grid;grid-template-columns:1.2fr .8fr;gap:24px;align-items:center}
h1,h2,h3{margin:.2em 0}
h1{font-size:40px} h2{font-size:26px} h3{font-size:18px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px;border:1px solid var(--stroke);text-align:left}

/* Product grid */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}

/* Product card with auto height (prevents button clipping) */
.product-card{
  display:flex;flex-direction:column;
  height:auto;
  min-height:clamp(260px, 60vw, 340px);
  border-radius:var(--radius);
  overflow:hidden;
}
.product-card .pc-media{
  flex:0 0 40%;
  max-height:40%;
  display:flex;align-items:center;justify-content:center;
  background:rgba(255,255,255,.02);
  border-bottom:1px solid var(--stroke);
  box-shadow:0 1px 0 rgba(255,255,255,.03), inset 0 -12px 18px rgba(0,0,0,.08);
  overflow:hidden;
}
.product-card .pc-media img{
  width:100%;height:100%;
  object-fit:contain;
  max-width:100%;max-height:100%;
}
.product-card .pc-body{flex:1;display:flex;flex-direction:column;padding:12px 12px;gap:8px;min-height:0;overflow:visible}
.product-card .pc-body .actions{margin-top:auto}
.product-card .price{font-weight:600}

/* Checkout two-column layout */
.kv{display:grid;grid-template-columns:1.4fr .8fr;gap:24px;align-items:start}
.kv > :first-child{order:1}
.kv > :nth-child(2){order:2}

.form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form-row .full{grid-column:1 / -1}
label{display:block;margin-bottom:6px;color:var(--muted)}
input,textarea{width:100%;padding:10px;border-radius:10px;border:1px solid var(--stroke);background:#0f1218;color:var(--text)}
.sep{border:none;border-top:1px solid var(--stroke);margin:16px 0}
.help{display:block;color:var(--muted);margin-top:8px}

.notice{padding:12px 14px;border:1px dashed var(--stroke);border-radius:12px;color:var(--muted);background:rgba(255,255,255,.02)}
.order-summary{background:rgba(255,255,255,.03);border:1px solid var(--stroke);border-radius:var(--radius);padding:16px}

.actions{display:flex;gap:10px;flex-wrap:wrap}
.btn.block{display:block;width:100%}

.mt-14{margin-top:14px}
.mt-16{margin-top:16px}
.flex{display:flex}
.flex-wrap{flex-wrap:wrap}
.items-center{align-items:center}
.gap-8{gap:8px}
.gap-10{gap:10px}
.dim{opacity:.75}
.img-fluid{width:100%;height:auto}
.rounded-12{border-radius:12px}
.opacity-95{opacity:.95}
.w-64{width:64px}
.pad-0{padding:0}
.inline-badge{display:inline-flex}

.badge-dot-ok{position:relative;padding-left:18px}
.badge-dot-ok::before{content:"";position:absolute;left:6px;top:50%;transform:translateY(-50%);width:8px;height:8px;border-radius:50%;background:var(--ok)}

.footer{border-top:1px solid var(--stroke);padding:18px 0;margin-top:30px;background:#0e1116}
.supports-blur{-webkit-backdrop-filter: blur(8px);backdrop-filter: blur(8px)}

/* Responsive */
@media (max-width:900px){
  .hero{grid-template-columns:1fr}
  .kv{grid-template-columns:1fr}
}
@media (max-width:520px){
  .product-card{min-height:clamp(300px, 72vw, 360px)} /* taller to avoid clipping */
  .product-card .pc-body{padding:10px}
  .w-64{width:56px}
}
@media (max-width:360px){
  .product-card{min-height:max(320px, 78vw)}
  .product-card .pc-body{gap:6px;padding-bottom:14px}
}