/* ============================================================
   Ventra Sciences — COA page modal (opened from .coa-view on /coas-2/)
   All scoped under #vscCoaModal so nothing collides with theme/parent CSS.
   The one-card-per-product grid reuses the existing .coa-card classes so
   it inherits the live dark COA card styling (vsc-dark.css + Bryce's tweaks).
   ============================================================ */
#vscCoaModal{position:fixed; inset:0; z-index:99999; display:none; align-items:center; justify-content:center; padding:24px;
  background:rgba(5,9,15,.74); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
#vscCoaModal.open{display:flex}
#vscCoaModal *{box-sizing:border-box}
#vscCoaModal .vcoa-panel{background:linear-gradient(180deg,#1c2533,#161e29); border:1px solid rgba(255,255,255,.14);
  border-radius:22px; width:100%; max-width:940px; max-height:88vh; overflow:auto; box-shadow:0 30px 80px rgba(0,0,0,.6); color:#F3F6FA}
#vscCoaModal .vcoa-head{position:sticky; top:0; z-index:2; -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  background:linear-gradient(180deg,rgba(28,37,51,.97),rgba(28,37,51,.82)); border-bottom:1px solid rgba(255,255,255,.09);
  padding:22px 26px; display:flex; align-items:flex-start; justify-content:space-between; gap:16px}
#vscCoaModal .vcoa-head h2{margin:0; font-family:'Space Grotesk',Inter,sans-serif; font-size:24px; font-weight:800; letter-spacing:-.02em; color:#fff}
#vscCoaModal .vcoa-sub{color:#38BDF8; font-size:13px; margin-top:5px; display:flex; align-items:center; gap:7px}
#vscCoaModal .vcoa-sub svg{width:14px;height:14px}
#vscCoaModal .vcoa-x{flex:none; width:38px;height:38px;border-radius:100px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05); color:#fff; font-size:18px; cursor:pointer; line-height:1}
#vscCoaModal .vcoa-x:hover{background:rgba(255,255,255,.1)}
#vscCoaModal .vcoa-body{padding:24px 26px 8px}
#vscCoaModal .vcoa-sizes{display:grid; gap:18px; grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
#vscCoaModal .vcoa-sizes.one{grid-template-columns:minmax(0,460px); justify-content:center}
#vscCoaModal .vcoa-card{background:#222C3D; border:1px solid rgba(255,255,255,.09); border-radius:16px; padding:20px}
#vscCoaModal .vcoa-ctop{display:flex; align-items:center; justify-content:space-between; margin-bottom:4px}
#vscCoaModal .vcoa-size{font-family:'Space Grotesk',Inter,sans-serif; font-size:18px; font-weight:800; color:#fff}
#vscCoaModal .vcoa-lot{font-size:11px; font-weight:700; letter-spacing:.05em; color:rgba(255,255,255,.6); border:1px solid rgba(255,255,255,.14); border-radius:100px; padding:4px 10px}
#vscCoaModal .vcoa-purity{display:flex; align-items:baseline; gap:10px; margin:12px 0 2px}
#vscCoaModal .vcoa-pct{font-family:'Space Grotesk',Inter,sans-serif; font-size:40px; font-weight:800; letter-spacing:-.03em; line-height:1;
  background:linear-gradient(135deg,#7DD3FC,#0EA5E9); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
#vscCoaModal .vcoa-plabel{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.42); font-weight:700}
#vscCoaModal .vcoa-status{font-size:12.5px; margin:6px 0 16px; display:inline-flex; align-items:center; gap:7px; color:#34D399}
#vscCoaModal .vcoa-status svg{width:14px;height:14px}
#vscCoaModal .vcoa-specs{display:flex; flex-direction:column; border-top:1px solid rgba(255,255,255,.09); margin-bottom:14px}
#vscCoaModal .vcoa-row{display:flex; justify-content:space-between; padding:9px 0; border-bottom:1px solid rgba(255,255,255,.09); font-size:13.5px}
#vscCoaModal .vcoa-row .k{color:rgba(255,255,255,.6)}
#vscCoaModal .vcoa-row .v{font-weight:600; text-align:right; color:#F3F6FA}
#vscCoaModal .vcoa-row .v.up{color:#34D399}
#vscCoaModal .vcoa-comp{background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.09); border-radius:10px; padding:10px 12px; margin-bottom:16px}
#vscCoaModal .vcoa-comp .ch{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.42); font-weight:700; margin-bottom:7px}
#vscCoaModal .vcoa-comp .crow{display:flex; justify-content:space-between; font-size:13px; padding:4px 0}
#vscCoaModal .vcoa-comp .cn{color:rgba(255,255,255,.6)}
#vscCoaModal .vcoa-comp .cv{font-weight:600; color:#38BDF8}
#vscCoaModal .vcoa-qch{font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.42); font-weight:700; margin:4px 0 8px}
#vscCoaModal .vcoa-qc{display:flex; flex-direction:column; gap:7px; margin-bottom:18px}
#vscCoaModal .vcoa-qrow{display:flex; align-items:center; gap:9px; font-size:13px}
#vscCoaModal .vcoa-qrow svg{width:15px;height:15px; flex:none}
#vscCoaModal .vcoa-qrow .qn{flex:1; color:rgba(255,255,255,.6)}
#vscCoaModal .vcoa-qrow .qv{font-weight:600; color:#F3F6FA}
#vscCoaModal .vcoa-pdf{display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:14px; border-radius:100px;
  font-size:14px; font-weight:700; text-decoration:none; color:#fff; border:none; cursor:pointer; font-family:inherit;
  background:linear-gradient(135deg,#38BDF8,#0EA5E9); transition:.16s}
#vscCoaModal .vcoa-pdf:hover{box-shadow:0 6px 22px rgba(14,165,233,.4); transform:translateY(-1px)}
#vscCoaModal .vcoa-pdf svg{width:15px;height:15px}
#vscCoaModal .vcoa-ruo{color:rgba(255,255,255,.42); font-size:11.5px; text-align:center; padding:14px 26px 26px; line-height:1.5}
@media(max-width:600px){
  #vscCoaModal{padding:0; align-items:flex-end}
  #vscCoaModal .vcoa-panel{max-width:none; max-height:93vh; border-radius:22px 22px 0 0}
  #vscCoaModal .vcoa-head{padding:18px}
  #vscCoaModal .vcoa-body{padding:18px}
}