/* ============================================================
   JJ Stuff — Checkout (minimal, mobile-first)
   ============================================================ */

/* Slim header (fewer distractions at checkout) */
.checkout-nav{
  background:var(--navy);height:58px;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(16px,4vw,32px);position:sticky;top:0;z-index:100;
}
.checkout-nav .nav-logo span{font-size:22px;color:var(--coral-lt)}
.checkout-nav__secure{font-size:12px;color:rgba(255,255,255,.7);font-weight:600;display:flex;align-items:center;gap:6px}

.checkout{max-width:960px;margin:0 auto;padding:28px clamp(16px,4vw,24px) 64px;display:grid;grid-template-columns:1fr 360px;gap:40px;align-items:start}
.checkout h1{font-family:var(--font-head);font-size:28px;font-weight:600;margin-bottom:20px}

/* Form sections */
.co-section{margin-bottom:26px}
.co-section__title{display:flex;align-items:center;gap:10px;font-family:var(--font-head);font-size:18px;font-weight:600;margin-bottom:14px}
.co-step{width:24px;height:24px;border-radius:50%;background:var(--coral);color:#fff;font-family:var(--font-body);font-size:13px;font-weight:700;display:flex;align-items:center;justify-content:center}
.co-field{margin-bottom:12px}
.co-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.co-label{display:block;font-size:12px;font-weight:700;color:var(--navy);margin-bottom:5px}
.co-input{
  width:100%;border:2px solid var(--cream);border-radius:var(--radius-sm);padding:0 14px;height:46px;
  font-family:var(--font-body);font-size:15px;background:var(--warm-white);color:var(--navy);
}
.co-input:focus-visible{border-color:var(--coral)}
select.co-input{appearance:none;background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%231C2E47' d='M0 0l5 6 5-6z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}

/* Payment methods */
.pay-opts{display:flex;flex-direction:column;gap:10px;margin-bottom:14px}
.pay-opt{display:flex;align-items:center;gap:12px;border:2px solid var(--cream);border-radius:var(--radius-sm);padding:14px;cursor:pointer;background:var(--warm-white)}
.pay-opt input{accent-color:var(--coral);width:18px;height:18px}
.pay-opt:has(input:checked){border-color:var(--coral);background:var(--coral-pale)}
.pay-opt__label{font-size:14px;font-weight:700;color:var(--navy)}
.pay-opt__brands{margin-left:auto;font-size:18px;letter-spacing:2px}
.pay-note{background:var(--linen);border-radius:var(--radius-sm);padding:12px 14px;font-size:12.5px;color:var(--muted);line-height:1.6}

.co-place{margin-top:8px}
.co-trust{display:flex;justify-content:center;gap:20px;margin-top:18px;flex-wrap:wrap}
.co-trust > span{font-size:12px;color:var(--muted);font-weight:600;display:flex;align-items:center;gap:6px}

/* Order summary rail */
.co-summary{background:var(--warm-white);border:1px solid var(--cream);border-radius:var(--radius);padding:22px;position:sticky;top:78px}
.co-summary h2{font-family:var(--font-head);font-size:18px;font-weight:600;margin-bottom:16px}
.co-line{display:flex;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--cream)}
.co-line__img{width:52px;height:52px;border-radius:8px;flex:none;position:relative;display:flex;align-items:center;justify-content:center}
.co-line__qty{position:absolute;top:-6px;right:-6px;background:var(--navy);color:#fff;font-size:11px;font-weight:700;width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center}
.co-line__title{font-size:13px;font-weight:700;color:var(--navy);line-height:1.3}
.co-line__meta{font-size:11px;color:var(--muted)}
.co-line__price{margin-left:auto;font-size:13px;font-weight:700;color:var(--navy)}
.co-summary__row{display:flex;justify-content:space-between;font-size:13px;color:var(--muted);padding:6px 0}
.co-summary__row strong{color:var(--navy)}
.co-summary__total{display:flex;justify-content:space-between;align-items:baseline;border-top:2px solid var(--cream);margin-top:6px;padding-top:12px}
.co-summary__total b{font-family:var(--font-head);font-size:22px;color:var(--navy)}
.co-summary__total span{font-family:var(--font-head);font-size:16px}
.co-summary__note{font-family:var(--font-hand);font-size:15px;color:var(--gold-text);text-align:center;margin-top:14px}

@media (max-width:820px){
  .checkout{grid-template-columns:1fr;gap:24px}
  .co-summary{position:static;order:-1}
}
@media (max-width:440px){
  .co-row{grid-template-columns:1fr}
}

/* Thank-you / order-received page (moved here from the old thankyou.php
   inline <style> block when it was ported to a real WooCommerce template —
   see woocommerce/checkout/thankyou.php) */
.ty{max-width:620px;margin:0 auto;padding:48px clamp(16px,4vw,24px) 64px;text-align:center}
.ty__check{width:76px;height:76px;border-radius:50%;background:var(--success);color:#fff;font-size:38px;display:flex;align-items:center;justify-content:center;margin:0 auto 22px;box-shadow:0 6px 20px rgba(61,139,78,.3)}
.ty__eyebrow{font-family:var(--font-hand);font-size:24px;color:var(--gold)}
.ty__title{font-family:var(--font-head);font-size:clamp(28px,5vw,38px);font-weight:600;margin:2px 0 10px}
.ty__order{display:inline-block;background:var(--coral-pale);color:var(--coral-dark);font-weight:700;font-size:13px;padding:6px 16px;border-radius:20px;margin-bottom:24px}
.ty__note{background:var(--warm-white);border:1px solid var(--cream);border-radius:var(--radius);padding:28px 26px;text-align:left;margin-bottom:24px;position:relative}
.ty__note p{font-family:var(--font-editorial);font-size:15.5px;color:var(--muted);line-height:1.8;margin-bottom:12px}
.ty__sig{font-family:var(--font-hand);font-size:26px;color:var(--coral);margin-top:6px}
.ty__meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:28px;text-align:left}
.ty__meta-card{background:var(--warm-white);border:1px solid var(--cream);border-radius:var(--radius-sm);padding:14px 16px}
.ty__meta-card h3{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);margin-bottom:6px}
.ty__meta-card p{font-size:13px;color:var(--navy);line-height:1.5}
.ty__actions{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}
.ty__mto{background:var(--coral-pale);border-left:3px solid var(--coral);border-radius:0 8px 8px 0;padding:12px 16px;text-align:left;margin-bottom:24px;font-size:13px;color:var(--muted)}
.ty__mto strong{color:var(--coral);display:block;margin-bottom:2px}
@media (max-width:440px){.ty__meta{grid-template-columns:1fr}.ty__actions .btn{width:100%}}

/* Free-shipping progress bar (cart.php) */
.free-ship-bar{background:var(--warm-white);border:1px solid var(--cream);border-radius:var(--radius-sm);padding:14px 16px;margin-bottom:20px}
.free-ship-bar p{margin:0 0 8px;font-size:13px;font-weight:600;color:var(--navy)}
.free-ship-bar__track{height:6px;border-radius:3px;background:var(--cream)}
.free-ship-bar__fill{height:100%;border-radius:3px;background:var(--coral);transition:width .3s ease}
.free-ship-bar--done p{color:var(--success);margin:0}

/* ============================================================
   Escape the prose wrapper — same defect the cart had.

   Checkout and order-received render through a shortcode inside page.php,
   so they land in `.page-content > .story__inner`: an 820px column built
   for About/Contact text. `.checkout` asks for 960px and a 1fr/360px
   grid, so it was being squeezed into ~772px, and `.page-content` (32px)
   + `.story__inner` (56px) stacked ~88px of dead space above it.

   Scoped to the WooCommerce body classes so no other page is touched.
   Specificity matters: CSS is glob-enqueued alphabetically, so
   checkout.css loads before pages.css and theme.css and would otherwise
   lose ties to them.
   ============================================================ */

body.woocommerce-checkout .page-content,
body.woocommerce-checkout .page-content .story__inner,
body.woocommerce-order-received .page-content,
body.woocommerce-order-received .page-content .story__inner {
  max-width: none;
  padding: 0;
}

body.woocommerce-checkout .checkout-nav {
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 12px clamp(16px, 4vw, 24px) 0;
}