/* site.css — forms/cart/spin helpers. Nav+hero come from design.css */
/* Curapeptix site stylesheet - navy theme matching the v64 design */
:root{
  --bg:#212938; --card:#2A3446; --card-2:#313D52;
  --gold:#ECEFF3; --gold-hi:#FFFFFF; --gold-ink:#14171D;
  --dark:#0A0C11; --dark-2:#12151C; --ink:#ECEFF3; --dim:#A8B1BE;
  --line:rgba(236,239,243,.11); --line-strong:rgba(236,239,243,.22);
  --blue:#2EA3F2; --cura:#4FC3F7; --accent:#2EA3F2;
  --paper:#F0F3F7; --fd:"Familjen Grotesk","Helvetica Neue",system-ui,sans-serif;
  --fb:"Instrument Sans","Helvetica Neue",system-ui,sans-serif;
  --fm:"IBM Plex Mono","SFMono-Regular",Consolas,monospace;
  --max:1240px; --navh:72px; --brand:#CBAA32;
}
*{box-sizing:border-box}
html{overflow-x:clip}
body{margin:0;background:var(--dark);color:var(--ink);font-family:var(--fb);line-height:1.5;min-height:100vh}
a{color:inherit;text-decoration:none}
img{max-width:100%;height:auto;display:block}
.wrap{max-width:var(--max);margin:0 auto;padding:0 20px}
.k{letter-spacing:.18em;text-transform:uppercase;font-size:11px;color:var(--cura);font-family:var(--fm)}
.d2{font-family:var(--fd);font-weight:500;font-size:clamp(1.8rem,4vw,2.8rem);margin:8px 0 12px;letter-spacing:-.02em}
.d3{font-family:var(--fd);font-weight:500;font-size:clamp(1.4rem,3vw,1.9rem);margin:0 0 10px}
.lede{color:var(--dim);max-width:54ch}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--brand);color:var(--gold-ink);border:0;border-radius:999px;padding:12px 22px;font-weight:600;font-family:var(--fb);cursor:pointer;font-size:14px}
.btn:hover{filter:brightness(1.05)}
.btn.line{background:transparent;color:var(--ink);border:1px solid var(--line-strong)}
.btn.small{padding:8px 14px;font-size:13px}
.btn:disabled{opacity:.45;cursor:not-allowed}

/* Nav */
.navdrop[open] .dd{display:block}

/* Hero */

/* Sections / cards */
.section{padding:64px 0}
.section.alt{background:var(--dark-2)}
.grid-products{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;overflow:hidden;display:flex;flex-direction:column}
.card-img{aspect-ratio:1;background:var(--dark);display:grid;place-items:center;padding:24px}
.card-img img{max-height:220px;object-fit:contain}
.card-body{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.card-name{font-family:var(--fd);font-size:1.25rem;margin:0}
.card-line{color:var(--dim);font-size:13px;margin:0}
.card-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding-top:10px}
.price{font-weight:600;font-variant-numeric:tabular-nums}
.perct{color:var(--dim);font-weight:400;font-size:12px}

/* PDP */
.pdp{padding:40px 0 80px}
.pdp-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;align-items:start}
.pdp-gallery{background:var(--card);border-radius:20px;border:1px solid var(--line);padding:28px;display:grid;place-items:center;min-height:420px}
.pdp-gallery img{max-height:380px;object-fit:contain}
.buy-row{display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin:18px 0}
.qty{display:inline-flex;align-items:center;border:1px solid var(--line-strong);border-radius:999px;overflow:hidden}
.qty button{background:transparent;border:0;color:var(--ink);width:36px;height:36px;cursor:pointer}
.qty span{min-width:28px;text-align:center}
.specs{margin-top:24px;border-top:1px solid var(--line);padding-top:16px}
.specs div{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);font-size:14px}
.specs span:first-child{color:var(--dim)}
.note{margin-top:16px;font-size:13px;color:var(--dim);border-left:3px solid var(--brand);padding-left:12px}

/* Forms */
.form{display:flex;flex-direction:column;gap:14px;max-width:420px}
.field label{display:block;font-size:13px;color:var(--dim);margin-bottom:6px}
.field input,.field textarea,.field select{width:100%;background:var(--dark);border:1px solid var(--line-strong);border-radius:10px;padding:12px 14px;color:var(--ink);font:inherit}
.field textarea{min-height:120px;resize:vertical}
.form-msg{font-size:14px;min-height:1.2em}
.form-msg.ok{color:#7dcea0}
.form-msg.err{color:#e08a96}
.checkrow{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--dim)}
.auth-card,.panel{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:28px;max-width:460px;margin:0 auto}

/* Cart / checkout */
.cart-layout,.checkout-layout{display:grid;grid-template-columns:1.4fr .8fr;gap:28px;align-items:start}
.cart-item{display:grid;grid-template-columns:72px 1fr auto;gap:14px;padding:16px 0;border-bottom:1px solid var(--line);align-items:center}
.cart-item img{width:72px;height:72px;object-fit:contain;background:var(--dark);border-radius:10px;padding:6px}
.summary{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:22px;position:sticky;top:calc(var(--navh) + 16px)}
.summary .row{display:flex;justify-content:space-between;padding:8px 0;font-size:14px}
.summary .row.total{font-size:18px;font-weight:600;border-top:1px solid var(--line);margin-top:8px;padding-top:14px}
.ship-note{font-size:13px;color:var(--dim);margin:8px 0}
.ship-note.ok{color:#7dcea0}
.ship-bar{height:6px;background:rgba(255,255,255,.08);border-radius:999px;overflow:hidden}
.ship-bar>i{display:block;height:100%;background:var(--cura);border-radius:999px}
#card-container{min-height:90px;margin:12px 0;background:var(--dark);border-radius:10px;padding:8px;border:1px solid var(--line-strong)}

/* Account / orders */
.order{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:16px;margin-bottom:12px}
.order-top{display:flex;justify-content:space-between;gap:10px;font-size:14px;margin-bottom:8px}
.order-id{font-family:var(--fm);color:var(--cura)}
.table{width:100%;border-collapse:collapse;font-size:14px}
.table th,.table td{padding:10px 8px;border-bottom:1px solid var(--line);text-align:left}
.flash{max-width:var(--max);margin:12px auto;padding:0 20px}
.flash>div{padding:12px 16px;border-radius:12px;font-size:14px}
.flash .ok{background:rgba(125,206,160,.12);border:1px solid rgba(125,206,160,.35)}
.flash .error{background:rgba(224,138,150,.12);border:1px solid rgba(224,138,150,.35)}

/* Footer */
.footer{border-top:1px solid var(--line);padding:48px 0 28px;margin-top:40px;background:var(--dark-2)}
.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:24px}
.footer h4{margin:0 0 12px;font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.footer a{display:block;color:var(--dim);font-size:14px;padding:4px 0}
.footer a:hover{color:var(--ink)}
.footer-bottom{margin-top:28px;padding-top:16px;border-top:1px solid var(--line);color:var(--dim);font-size:12px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap}

.inner-hero{padding:48px 0 24px}
.empty{text-align:center;padding:48px 16px;color:var(--dim)}

@media (max-width:960px){
  .grid-products{grid-template-columns:1fr 1fr}
}
@media (max-width:720px){
  .nav-links.open{display:flex}
}

/* ---- Nav dropdown: no gap, hover bridge, touch/keyboard ---- */
.nav-links .navdrop{position:relative}
.nav-links .navdrop>summary{
  list-style:none; cursor:pointer; padding:8px 12px; border-radius:8px; color:var(--dim); font-size:14px;
}
.nav-links .navdrop>summary::-webkit-details-marker{display:none}
.nav-links .navdrop>summary::after{content:" ▾"; font-size:10px; opacity:.7}
/* Invisible bridge fills any gap between summary and panel */
.nav-links .navdrop .dd{
  position:absolute; top:100%; left:0; min-width:210px;
  padding-top:10px; /* bridge: hitsummary without a dead zone */
  margin-top:0;
  background:transparent; border:0; box-shadow:none; display:none; z-index:60;
}
.nav-links .navdrop .dd-inner{
  background:var(--dark-2); border:1px solid var(--line-strong); border-radius:12px;
  padding:8px; box-shadow:0 16px 40px rgba(0,0,0,.45);
}
.nav-links .navdrop.is-open > .dd,
.nav-links .navdrop[open] > .dd{display:block}
.nav-links .navdrop .dd a{display:block; padding:8px 12px; border-radius:8px; color:var(--dim); font-size:13px}
.nav-links .navdrop .dd a:hover,
.nav-links .navdrop .dd a:focus{color:var(--ink); background:rgba(255,255,255,.05); outline:none}
@media (max-width:720px){
  .nav-links .navdrop .dd{position:static; padding-top:0; display:none}
  .nav-links .navdrop.is-open > .dd,
  .nav-links .navdrop[open] > .dd{display:block}
  .nav-links .navdrop .dd-inner{box-shadow:none; border:0; background:transparent; padding:0 0 0 8px}
}

/* ---- Drag-to-spin stages (shop cards + PDP) ---- */
.spin-stage, .card-stage.scene{
  position:relative; width:100%; aspect-ratio:1; display:grid; place-items:center;
  touch-action:pan-y; cursor:grab; user-select:none; -webkit-user-select:none;
  background:radial-gradient(ellipse at 50% 60%, rgba(79,195,247,.08), transparent 60%), var(--dark);
  border-radius:16px; overflow:hidden;
}
.spin-stage.dragging, .card-stage.scene.dragging{cursor:grabbing}
.spin-stage img.fr, .card-stage.scene img.fr,
.spin-stage img, .card-stage.scene img{
  max-width:88%; max-height:88%; object-fit:contain;
  -webkit-user-drag:none; user-select:none; pointer-events:none;
  position:absolute; opacity:0; transition:opacity .12s ease;
}
.spin-stage img.fr.on, .card-stage.scene img.fr.on{opacity:1}
.spin-stage.instant img.fr, .card-stage.scene.instant img.fr{transition:none}
.scene-hint{
  position:absolute; bottom:10px; left:50%; transform:translateX(-50%);
  font-size:11px; letter-spacing:.12em; text-transform:uppercase; color:var(--dim);
  pointer-events:none; background:rgba(10,12,17,.55); padding:4px 10px; border-radius:999px;
}
.pdp-spin{min-height:420px}
.card-stage{min-height:240px}