/* ============================================================
   Richvell Pets — checkout
   Rides on ../styles.css for the brand tokens and .logo.
   ============================================================ */

body{ background:var(--paper); }

.co-hdr{ border-bottom:1px solid var(--line); background:var(--cream); }
/* the inner wrap carries the max-width; .logo must stay fit-content or its
   absolutely-positioned paw detaches and drifts to the right edge */
.co-hdr-in{ max-width:1180px; margin:0 auto; padding:16px 30px; display:flex; }
@media (max-width:900px){ .co-hdr-in{ justify-content:center; padding:16px 18px; } }

/* two-column checkout, summary on the right */
.co-grid{ max-width:1180px; margin:0 auto; display:grid; grid-template-columns:1fr 1fr; min-height:70vh; }
.pay{ padding:34px 30px 60px; }
.sum{ background:var(--sand); border-left:1px solid var(--line); padding:30px 30px 60px; }
.sum-toggle{ display:none; }

#whop{ min-height:420px; }

.tos{ margin-top:20px; font-size:12.5px; color:var(--muted); line-height:1.55; }
.tos a{ text-decoration:underline; text-underline-offset:2px; }

/* Mobile: the summary collapses behind a bar so the payment form is first on
   screen. `display:contents` dissolves the column so its three parts can be
   ordered independently — otherwise the trust bullets get dragged above the
   form with the cart, or buried inside the collapse. */
@media (max-width:900px){
  /* minmax(0,1fr) + min-width:0 so the Whop iframe can never widen the page
     past the viewport. */
  .co-grid{ grid-template-columns:minmax(0,1fr); min-height:0; }
  .co-grid > *{ min-width:0; }
  .sum{ display:contents; }
  .sum-toggle{ order:1 } .sum-body{ order:2 } .pay{ order:3 } .sum-extra{ order:4 }

  .sum-toggle{
    display:flex; width:100%; align-items:center; justify-content:space-between; gap:12px;
    padding:16px 18px; background:var(--gold-tint); border:0;
    border-bottom:1px solid rgba(201,162,39,.4);
    font:inherit; color:var(--gold-dp); text-align:left;
  }
  .sum-toggle .lbl{ font-size:14.5px; font-weight:700; }
  .sum-toggle b{ color:var(--ink); font-size:17px; font-weight:800; letter-spacing:-.02em; }
  .sum-toggle .chev{ display:inline-block; transition:transform .18s; font-size:11px; }
  .sum-toggle[aria-expanded="true"] .chev{ transform:rotate(180deg); }
  .sum-body{ display:none; background:var(--sand); border-bottom:1px solid var(--line); padding:6px 18px 24px; }
  .sum-body.open{ display:block; }
  .sum-extra{ background:var(--sand); border-top:1px solid var(--line); padding:24px 18px 44px; }
  .pay{ padding:24px 18px 44px; }
}

.ship-note{
  text-align:center; font-size:13px; font-weight:700; color:var(--ink-2);
  background:var(--gold-tint); border:1px solid rgba(201,162,39,.4);
  border-radius:var(--r-sm); padding:11px 14px; margin-bottom:20px;
}
.ship-note b{ color:var(--gold-dp); }

/* ── Line items ─────────────────────────────────────────── */
.li{ display:flex; gap:14px; padding:16px 0; border-bottom:1px solid var(--line); }
.li:last-of-type{ border-bottom:0; }
.li .thumb{ position:relative; flex:0 0 64px; }
.li .thumb img{
  width:64px; height:64px; border-radius:10px; object-fit:contain;
  background:var(--paper); border:1px solid var(--line); mix-blend-mode:multiply;
}
.li .thumb .q{
  position:absolute; top:-7px; left:-7px; min-width:22px; height:22px; padding:0 6px;
  background:var(--ink); color:var(--gold-lt); border-radius:99px;
  font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center;
}
.li .body{ flex:1; min-width:0; }
.li .nm{ font-size:14.5px; font-weight:800; letter-spacing:-.02em; line-height:1.3; }
.li .cad{ font-size:12.5px; color:var(--muted); font-style:italic; margin-top:3px; }
.li .tg{
  display:inline-block; margin-top:8px; background:var(--foil); color:var(--ink);
  border-radius:5px; padding:3px 9px; font-size:11px; font-weight:800;
  letter-spacing:.03em; text-transform:uppercase;
}
.li .mod{
  display:block; margin-top:9px; background:none; border:0; padding:0;
  font-size:12.5px; color:var(--ink-3); text-decoration:underline; text-underline-offset:3px;
}
.li .mod:hover{ color:var(--gold-dp); }
.li .amt{ text-align:right; white-space:nowrap; }
.li .amt b{ font-size:15px; font-weight:800; letter-spacing:-.02em; }
.li .amt s{ display:block; font-size:12.5px; color:#B4483C; }

/* ── Discount + totals ──────────────────────────────────── */
.disc{ display:flex; gap:8px; margin:20px 0 18px; }
.disc input{
  flex:1; min-width:0; border:1px solid var(--line); border-radius:9px;
  padding:12px 13px; font:inherit; font-size:13.5px; background:var(--paper); color:var(--ink);
}
.disc button{
  border:1px solid var(--line); background:var(--paper); border-radius:9px;
  padding:12px 18px; font-size:13.5px; font-weight:700; color:var(--ink-2);
}
.disc button:hover{ border-color:var(--gold); color:var(--gold-dp); }

.tot{ border-top:1px solid var(--line); padding-top:14px; font-size:14px; }
.tot .r{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; color:var(--ink-3); }
.tot .r b{ color:var(--ink); font-weight:750; }
.tot .r b.sv{ color:var(--gold-dp); }
.tot .big{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding-top:12px; margin-top:8px; border-top:1px solid var(--line);
  font-size:16px; font-weight:800; letter-spacing:-.02em;
}
.tot .big .v{ font-size:24px; }
.tot .recur{ margin-top:10px; font-size:12px; color:var(--muted); line-height:1.5; }
.tot .recur:empty{ display:none; }

/* ── Trust + proof ──────────────────────────────────────── */
.trust{ margin-top:24px; display:grid; gap:16px; }
.trust .t{ display:flex; gap:13px; }
.trust .ic{ width:32px; height:32px; border-radius:50%; background:var(--foil); flex:none; display:grid; place-items:center; }
.trust .ic svg{ width:16px; height:16px; stroke:var(--ink); }
.trust .tt{ font-size:13.5px; font-weight:800; letter-spacing:-.02em; }
.trust .td{ font-size:12.5px; color:var(--ink-3); line-height:1.5; margin-top:3px; }

.proof{ background:var(--paper); border:1px solid var(--line-2); border-radius:var(--r); padding:15px; }
.proof .row{ display:flex; gap:11px; }
.proof .row img{ width:34px; height:34px; border-radius:50%; object-fit:cover; flex:none; }
.proof .bub{ background:var(--sand); border-radius:12px; padding:11px 13px; font-size:12.5px; line-height:1.5; color:var(--ink-2); }
.proof .bub b{ color:var(--ink); }
.proof .rs{ color:var(--gold); letter-spacing:1px; }
.proof .meta{ display:flex; gap:12px; margin-top:6px; font-size:11.5px; color:var(--muted); }

/* ── Footer links ───────────────────────────────────────── */
.flinks{
  max-width:1180px; margin:0 auto; padding:26px 30px 44px;
  display:flex; flex-wrap:wrap; gap:20px; border-top:1px solid var(--line);
  font-size:13px; color:var(--ink-3);
}
.flinks a:hover{ color:var(--gold-dp); text-decoration:underline; }
@media (max-width:900px){ .flinks{ padding:22px 18px 40px; } }