/* ============================================================================
   Pretty as Pie — Checkout stylesheet
   ----------------------------------------------------------------------------
   All rules are namespaced with .co- so nothing here can collide with
   styles.css. Uses the site's design tokens (CSS variables from :root in
   styles.css). Mobile-first: single column by default, two columns with a
   sticky summary from 900px up.
   ========================================================================== */

/* ---------- Hero tweak ---------- */
.co-hero p{
  color:var(--text-muted);
  margin-top:8px;
}

/* ---------- Progress steps ---------- */
.co-steps-bar{
  background:var(--bg-blush);
  border-bottom:1px solid var(--border-soft);
  padding:14px 0;
}
.co-steps{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:14px;
}
.co-step{
  display:flex;
  align-items:center;
  gap:8px;
  opacity:.45;
  transition:opacity .25s ease;
}
.co-step.active{opacity:1;}
.co-step.done{opacity:.8;}
.co-step-num{
  width:26px; height:26px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:600;
  background:var(--white);
  border:1.5px solid var(--rose-btn);
  color:var(--rose-btn);
}
.co-step.active .co-step-num,
.co-step.done .co-step-num{
  background:var(--rose-btn);
  color:var(--white);
}
.co-step.done .co-step-num::before{content:"\2713";}
.co-step.done .co-step-num{font-size:0;}
.co-step.done .co-step-num::before{font-size:13px;}
.co-step-label{
  font-size:14px;
  font-weight:500;
}
.co-step-divider{
  width:46px; height:1.5px;
  background:var(--border-soft);
}

/* ---------- Layout ---------- */
.co-layout{
  display:grid;
  grid-template-columns:1fr;
  gap:26px;
  align-items:start;
}
@media (min-width:900px){
  .co-layout{grid-template-columns:1.6fr 1fr;}
  .co-summary{position:sticky; top:90px;}
  /* On desktop the summary sits beside the form; on mobile it renders
     first in source order below — flip it visually above the form so
     customers always see what they're paying for before the form. */
}
@media (max-width:899px){
  .co-summary{order:-1;}
}

.co-card{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:26px;
  animation:fadeInUp .45s ease both;
}
.co-card h3{
  color:var(--rose-heading);
  font-size:22px;
  margin-bottom:18px;
}

/* ---------- Empty / stale state ---------- */
.co-empty{
  background:var(--white);
  border:1px solid var(--border-soft);
  border-radius:16px;
  padding:56px 26px;
  text-align:center;
  animation:fadeInUp .45s ease both;
}
.co-empty h3{
  color:var(--rose-heading);
  font-size:24px;
  margin-bottom:10px;
}
.co-empty p{
  color:var(--text-muted);
  max-width:440px;
  margin:0 auto 22px;
}
.co-empty-actions{
  display:flex;
  gap:12px;
  justify-content:center;
  flex-wrap:wrap;
}

/* ---------- Form ---------- */
.co-field{margin-bottom:16px;}
.co-field label{
  display:block;
  font-size:14px;
  font-weight:500;
  margin-bottom:6px;
}
.co-field input,
.co-field textarea{
  width:100%;
  padding:12px 14px;
  border:1px solid var(--border-soft);
  border-radius:10px;
  font-family:inherit;
  font-size:15px;
  color:var(--text-dark);
  background:var(--bg-cream);
  transition:border-color .2s ease, box-shadow .2s ease;
}
.co-field input:focus,
.co-field textarea:focus{
  outline:none;
  border-color:var(--rose-btn);
  box-shadow:0 0 0 3px rgba(195,128,124,.15);
}
.co-field input.co-invalid,
.co-field textarea.co-invalid{
  border-color:#c0564f;
  background:#fdf3f2;
}
.co-field-note{
  font-size:12.5px;
  color:var(--text-muted);
  margin-top:5px;
}
.co-field-error{
  font-size:13px;
  color:#c0564f;
  margin-top:5px;
}

.co-continue{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:6px;
}
.co-continue svg{width:17px; height:17px;}

.co-guest-note{
  font-size:13px;
  color:var(--text-muted);
  text-align:center;
  margin-top:14px;
}
.co-guest-note a{
  color:var(--rose-btn);
  font-weight:500;
  text-decoration:underline;
}

/* ---------- Alerts ---------- */
.co-alert{
  background:#fdf3f2;
  border:1px solid #ecc4c0;
  color:#a4453e;
  border-radius:10px;
  padding:12px 14px;
  font-size:14px;
  line-height:1.5;
  margin:14px 0;
}

/* ---------- Payment panel ---------- */
.co-back{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  border:none;
  color:var(--text-muted);
  font-family:inherit;
  font-size:14px;
  cursor:pointer;
  padding:0;
  margin-bottom:16px;
  transition:color .2s ease;
}
.co-back:hover{color:var(--rose-btn);}
.co-back svg{width:16px; height:16px;}

.co-recap{
  background:var(--bg-cream);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:14px 16px;
  font-size:14px;
  line-height:1.7;
  color:var(--text-muted);
  margin-bottom:18px;
}
.co-recap strong{
  display:block;
  color:var(--text-dark);
  font-size:13px;
  text-transform:uppercase;
  letter-spacing:.06em;
  margin-bottom:6px;
}

.co-pay-row{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  margin-bottom:14px;
  font-size:15px;
}
.co-pay-amount{
  font-family:'Playfair Display', serif;
  font-size:26px;
  font-weight:700;
  color:var(--rose-heading);
}
.co-pay-btn{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
}
.co-pay-btn svg{width:18px; height:18px;}
.co-pay-btn:disabled{opacity:.6; cursor:not-allowed;}

.co-trust{
  display:flex;
  justify-content:center;
  gap:22px;
  flex-wrap:wrap;
  margin-top:20px;
  padding-top:18px;
  border-top:1px dashed var(--border-soft);
}
.co-trust-item{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12.5px;
  color:var(--text-muted);
}
.co-trust-item svg{width:16px; height:16px; color:var(--rose-btn);}
.co-secure-note{
  font-size:12.5px;
  color:var(--text-muted);
  text-align:center;
  margin-top:12px;
  line-height:1.6;
}

/* ---------- Order summary ---------- */
.co-summary-head{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
}
.co-summary-count{
  font-size:13px;
  color:var(--text-muted);
}
.co-items{margin-bottom:8px;}
.co-item{
  display:flex;
  gap:12px;
  padding:13px 0;
  border-bottom:1px solid var(--bg-blush-deep);
}
.co-item:last-child{border-bottom:none;}
.co-item-thumb{
  width:58px; height:58px;
  border-radius:10px;
  background:var(--bg-blush);
  flex-shrink:0;
}
.co-item-body{flex:1; min-width:0;}
.co-item-name{
  font-size:14px;
  font-weight:500;
  margin-bottom:2px;
}
.co-item-price{
  font-size:13px;
  color:var(--text-muted);
}
.co-item-flag{
  display:inline-block;
  background:#fdf3f2;
  border:1px solid #ecc4c0;
  color:#a4453e;
  font-size:11px;
  border-radius:6px;
  padding:1px 6px;
  margin-left:4px;
}
.co-item-line-total{
  font-size:14px;
  font-weight:600;
  color:var(--rose-heading);
  white-space:nowrap;
}
.co-item-actions{
  display:flex;
  align-items:center;
  gap:12px;
  margin-top:7px;
}
.co-qty{
  display:inline-flex;
  align-items:center;
  border:1px solid var(--border-soft);
  border-radius:8px;
  overflow:hidden;
}
.co-qty button{
  width:26px; height:26px;
  border:none;
  background:var(--bg-cream);
  color:var(--text-dark);
  font-size:15px;
  cursor:pointer;
  transition:background .15s ease;
}
.co-qty button:hover:not(:disabled){background:var(--bg-blush);}
.co-qty button:disabled{opacity:.4; cursor:not-allowed;}
.co-qty span{
  min-width:26px;
  text-align:center;
  font-size:13px;
  font-weight:500;
}
.co-remove{
  background:none;
  border:none;
  padding:0;
  font-family:inherit;
  font-size:12.5px;
  color:var(--text-muted);
  text-decoration:underline;
  cursor:pointer;
  transition:color .2s ease;
}
.co-remove:hover{color:#c0564f;}

/* ---------- Free-shipping progress ---------- */
.co-ship-progress{
  background:var(--bg-cream);
  border:1px solid var(--border-soft);
  border-radius:10px;
  padding:12px 14px;
  margin:12px 0;
}
.co-ship-hint{
  font-size:13px;
  color:var(--text-muted);
  margin-bottom:8px;
}
.co-ship-hint strong{color:var(--rose-heading);}
.co-ship-track{
  height:6px;
  background:var(--bg-blush-deep);
  border-radius:3px;
  overflow:hidden;
}
.co-ship-bar{
  height:100%;
  width:0;
  background:var(--rose-btn);
  border-radius:3px;
  transition:width .4s ease;
}

/* ---------- Totals ---------- */
.co-totals{
  border-top:1px solid var(--border-soft);
  margin-top:10px;
  padding-top:14px;
}
.co-totals-row{
  display:flex;
  justify-content:space-between;
  font-size:14px;
  color:var(--text-muted);
  padding:4px 0;
}
.co-totals-row.co-discount span:last-child{color:#3f8f5a; font-weight:500;}
.co-totals-row.co-grand{
  font-size:17px;
  font-weight:600;
  color:var(--text-dark);
  border-top:1px dashed var(--border-soft);
  margin-top:8px;
  padding-top:12px;
}
.co-totals-row.co-grand span:last-child{
  font-family:'Playfair Display', serif;
  font-size:21px;
  color:var(--rose-heading);
}
.co-ship-note{
  font-size:12px;
  color:var(--text-muted);
  margin-top:12px;
  line-height:1.6;
}

/* ---------- Small screens ---------- */
@media (max-width:520px){
  .co-card{padding:20px 16px;}
  .co-steps{gap:10px;}
  .co-step-divider{width:28px;}
  .co-trust{gap:14px;}
  /* Keep just the numbered circles on tiny screens - three text labels
     plus dividers don't fit at 360-420px without squishing. */
  .co-step-label{display:none;}
  .co-step.active .co-step-label{display:inline;}
  /* Larger touch targets for quantity controls. */
  .co-qty button{width:32px; height:32px;}
  .co-qty span{min-width:30px;}
}