/* ==========================================================================
   checkout.css — Checkout_v3, measured off the S2 frames 18862:48329
   Shell: Web/Header Compact + Content pad 48/185/72 gap 28
   body 1550 gap 32 — step rail 230 · main 876 · summary 380
   ========================================================================== */

.comain { padding: 48px max(185px, var(--web-cap)) 72px !important; display: block !important; }
.co { width: 1550px; max-width: 100%; margin: 0 auto;
      display: flex; flex-direction: column; gap: 28px; }
.co__title { font: 400 36px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.co__body { display: flex; align-items: flex-start; gap: 32px; }
/* 876 is not a fixed width in the frame — it is what the FILL column
   computes to at 1550 (1550 - 230 steps - 380 summary - 2x32 gap). Pinned,
   the three columns could not fit below 1550 and the summary pushed the
   page into horizontal scroll. */
.co__main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 14px; }

/* ---- Data/Step Indicator (230) ------------------------------------------ */
.costeps { flex: 0 0 230px; width: 230px; display: flex; flex-direction: column; }
.costep { height: 44px; display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.costep__dot { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px;
               display: inline-grid; place-items: center;
               font: 600 14px/1 Inter, sans-serif; }
.costep__l { font: 500 16px/1.2 Inter, sans-serif; }
.costep.is-done .costep__dot { background: #00805f; color: #fff; }
.costep.is-done .costep__l { color: #101828; }
.costep.is-on .costep__dot { background: #fff; box-shadow: inset 0 0 0 2px #00805f; color: #00805f; }
.costep.is-on .costep__l { color: #00805f; font-weight: 600; }
.costep.is-off .costep__dot { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.15); color: #656772; }
.costep.is-off .costep__l { color: #656772; }

/* ---- section card + Web/Section Header ---------------------------------- */
/* The shipment card runs the section's full width, so its own corners and
   stroke would cut across the section's. Clip the section to its radius and
   repaint the 1px black-7% stroke above everything inside it. */
.cosec { position: relative; border-radius: 12px; background: #fff; overflow: hidden; }
.cosec::after { content: ""; position: absolute; inset: 0; border-radius: inherit;
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); pointer-events: none; }
.cosec__hd { min-height: 67px; display: flex; align-items: center; gap: 12px;
             padding: 18px 24px; }
.cosec__badge { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 999px;
                display: inline-grid; place-items: center;
                font: 600 14px/1 Inter, sans-serif; }
.cosec__hd.is-on  .cosec__badge { background: #fff; box-shadow: inset 0 0 0 2px #00805f; color: #00805f; }
/* `fig()` writes fill="currentColor" on its paths, so the tick follows the
   badge's colour — an `svg { fill }` rule never reaches it. */
.cosec__hd.is-done .cosec__badge { background: #00805f; color: #fff; }
.cosec__hd.is-off .cosec__badge { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.15); color: #656772; }
.cosec__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cosec__title { font: 400 24px/1.28 Inter, sans-serif; color: #101828; }
.cosec__hd.is-off .cosec__title { color: #656772; }
.cosec__sum { font: 500 14px/1.28 Inter, sans-serif; color: #364153; }
.cosec__change { border: 0; background: none; cursor: pointer; padding: 0;
                 font: 600 14px/1.28 Inter, sans-serif; color: #00805f; }
.cosec__change:hover { text-decoration: underline; }
.cosec__body { padding: 0 24px 20px; display: flex; flex-direction: column; gap: 12px; }
/* §Your shipment has no body inset at all — the shipment cards run the full
   width of the section and butt straight onto the header. 18930:62179 */
.cosec__body.is-flush { padding: 0; gap: 0; }
.cosec__lead { font: 400 16px/1.28 Inter, sans-serif; color: #656772; margin: 0 0 2px; }
.cosec__locked { font: 500 14px/1.28 Inter, sans-serif; color: #656772; margin: 0; }
.cosec__redo { align-self: flex-start; border: 0; background: none; cursor: pointer;
               padding: 0; font: 600 14px/1.28 Inter, sans-serif; color: #00805f; }
.cosec__redo:hover { text-decoration: underline; }
.cofoot { font: 400 12px/1.28 Inter, sans-serif; color: #656772; margin: 0; }

/* ---- Web/Choice Row ------------------------------------------------------ */
.cochoice { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            border: 0; border-radius: 8px; background: #fff; cursor: pointer;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); text-align: left; width: 100%; }
.cochoice:hover:not(.is-on) { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .3); }
.cochoice.is-on { background: rgba(0, 128, 95, .07); box-shadow: inset 0 0 0 2px #00805f; }
.cochoice[disabled] { opacity: .55; cursor: not-allowed; }
.cochoice__radio { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 999px;
                   background: #fff; box-shadow: inset 0 0 0 1.5px #000;
                   display: inline-grid; place-items: center; }
.cochoice.is-on .cochoice__radio { box-shadow: inset 0 0 0 1.5px #00805f; }
.cochoice__radio i { width: 10px; height: 10px; border-radius: 999px; background: #00805f; }
.cochoice__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cochoice__t strong { font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
.cochoice__t span   { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }
.cochoice__cost { flex: 0 0 auto; font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
/* the filled 85x18 "Closest to you" pill — pad 3/8, r6, Medium 10 */
.cochoice__pill { flex: 0 0 auto; padding: 3px 8px; border-radius: 6px; background: #00805f;
                  font: 500 10px/1.2 Inter, sans-serif; color: #fff; white-space: nowrap; }

/* ---- Web/Alert ----------------------------------------------------------- */
.coalert { display: flex; gap: 12px; padding: 14px; border-radius: 8px; }
.coalert.is-info { background: #f8f8f8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.coalert.is-success { background: rgba(0,128,95,.07); box-shadow: inset 0 0 0 1px rgba(0,128,95,.2); }
.coalert > svg { flex: 0 0 20px; fill: #364153; }
.coalert.is-success > svg { fill: #00805f; }
.coalert__t { display: flex; flex-direction: column; gap: 4px; }
.coalert__t strong { font: 600 16px/1.25 Inter, sans-serif; color: #101828; }
.coalert__t span   { font: 500 14px/1.28 Inter, sans-serif; color: #364153; }

/* ---- stranded line list -------------------------------------------------- */
.coline { display: flex; align-items: center; gap: 12px; }
.coline__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.coline__t strong { font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
.coline__t span   { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }
.coline__v { font: 600 14px/1.28 Inter, sans-serif; color: #101828; }

/* ---- Web/Shipment Header ------------------------------------------------- */
.coship { border-radius: 12px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); overflow: hidden; }
.coship__hd { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px;
              box-shadow: inset 0 -1px 0 rgba(0,0,0,.07); }
.coship__hd.is-freight  { background: #f8f8f8; }
.coship__hd.is-willcall { background: rgba(0, 128, 95, .07); }
.coship__top { display: flex; align-items: center; gap: 10px; }
.coship__badge { flex: 0 0 auto; white-space: nowrap;
                 display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px;
                 border-radius: 999px; background: #275cd3;
                 font: 500 10px/1.2 Inter, sans-serif; color: #fff; }
.coship__badge { color: #fff; }
.is-willcall .coship__badge { background: #00805f; }
.coship__origin { flex: 1 1 auto; font: 600 16px/1.25 Inter, sans-serif; color: #101828; }
.coship__cost { font: 600 16px/1.25 Inter, sans-serif; color: #101828; }
.coship__cost.is-free { color: #00805f; }
.coship__meta { font: 500 14px/1.28 Inter, sans-serif; color: #364153; }
.coship__addr { margin: 0; padding: 4px 20px 8px;
                font: 400 12px/1.28 Inter, sans-serif; color: #656772; }
.coship__toggle { width: 100%; display: flex; align-items: center; gap: 8px;
                  padding: 8px 20px; border: 0; background: #fff; cursor: pointer; }
.coship__toggle span { flex: 1 1 auto; text-align: left;
                       font: 400 12px/1.25 Inter, sans-serif; color: #656772; }
.coship__toggle svg { fill: #656772; transition: transform .15s; }
.coship.is-open .coship__toggle svg { transform: rotate(180deg); }
/* `items` — VERTICAL gap 8, pad 12/20/16/20 */
.coitems { display: none; flex-direction: column; gap: 8px; padding: 12px 20px 16px; }
.coship.is-open .coitems { display: flex; }

/* ---- plain panel (steps 1, 3, 4, 5) -------------------------------------- */
.copanel { padding: 24px; border-radius: 12px; background: #fff;
           box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
           display: flex; flex-direction: column; gap: 16px; }
.copanel__hd { display: flex; flex-direction: column; gap: 5px; }
.copanel__hd h2 { font: 400 24px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.copanel__hd p  { font: 400 16px/1.25 Inter, sans-serif; color: #656772; margin: 0; }
.copanel__note { font: 400 12px/1.28 Inter, sans-serif; color: #656772; margin: 0; }

/* ---- cart rows ----------------------------------------------------------- */
/* `Web/Cart Row` 17592:25957 — ONE horizontal flex, gap 16, padding 18/20,
   children TOP-aligned. The divider is the row's own 1px #000@7% bottom
   border, full-bleed, and the frame keeps it on the last row too.
   Columns: thumb 120 · mid FILL · qty+price 150 · actions 32.             */
.cocart { display: flex; flex-direction: column; }
.crow { display: flex; align-items: flex-start; gap: 16px; padding: 18px 20px;
        box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .07); }
.crow__thumb { flex: 0 0 120px; }

.crow__mid { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.crow__meta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.crow__mfr  { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }
.crow__cond { padding: 3px 8px; border-radius: 999px; background: #f0f0f0;
              font: 500 10px/1.2 Inter, sans-serif; color: #364153; }
.crow__t    { font: 600 15px/1.28 Inter, sans-serif; color: #101828; text-decoration: none; }
.crow__t:hover { color: #00805f; }
.crow__part { font: 500 14px/1.28 Inter, sans-serif; color: #656772; }

.crow__qp { flex: 0 0 150px; display: flex; flex-direction: column;
            align-items: flex-end; gap: 10px; }
.crow__money { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.crow__total { font: 600 24px/1.1 Inter, sans-serif; color: #101828;
               font-variant-numeric: tabular-nums; }
.crow__each  { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }

/* Two 32x32 buttons stacked at gap 8. The row authors these directly rather
   than instancing `Action/Icon Button` (that set is 30x30 with a 0/2/6 @20%
   shadow); only the hover and pressed treatments are borrowed from it —
   WRC Secondary for the swap, Destructive for the delete. fig() paints its
   paths with currentColor, so the icon follows `color`, never an svg fill. */
.crow__acts { flex: 0 0 32px; display: flex; flex-direction: column; gap: 8px; }
.crow__ib {
  width: 32px; height: 32px; border: 0; border-radius: 8px; cursor: pointer;
  display: grid; place-items: center; background: #fff; padding: 0;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15), 0 1px 3px rgba(0, 0, 0, .10);
}
.crow__ib--swap { color: #101828; }
.crow__ib--del  { color: #e55a33; }
.crow__ib--swap:hover {
  background: rgba(0, 128, 95, .07); color: #00805f;
  box-shadow: inset 0 0 0 1px rgba(0, 128, 95, .2), 0 1px 3px rgba(0, 0, 0, .10);
}
.crow__ib--swap:active {
  background: rgba(0, 128, 95, .2);
  box-shadow: inset 0 0 0 1px rgba(0, 128, 95, .2);
}
.crow__ib--del:hover { background: rgba(229, 90, 51, .07); }
.crow__ib--del:active {
  background: rgba(229, 90, 51, .2);
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
}

/* `Web/Select` 17627:24925 — label 12 #656772, control 39 r8 #fff with a 1px
   #000@15% INSIDE stroke and a 16px chevron 10 in from the right, then the
   optional helper line. */
.wsel { display: flex; flex-direction: column; gap: 6px; }
.wsel__l { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }
.wsel__box { position: relative; }
.wsel__c {
  width: 100%; height: 39px; padding: 10px 34px 10px 12px;
  border: 0; border-radius: 8px; background: #fff;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
  font: 500 16px/1.2 Inter, sans-serif; color: #101828;
  appearance: none; -webkit-appearance: none; cursor: pointer;
}
.wsel__c:focus-visible { outline: 2px solid var(--wrc-green); outline-offset: 1px; }
.wsel__c:disabled { cursor: default; color: #656772; background: #f8f8f8; }
.wsel__box > svg {
  position: absolute; right: 10px; top: 50%; margin-top: -8px;
  color: #656772; pointer-events: none;
}
.wsel__h { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }

/* ---- service options ----------------------------------------------------- */
.cooption { display: flex; align-items: center; gap: 12px; padding: 14px 16px;
            border: 0; border-radius: 8px; background: #fff; cursor: pointer;
            box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); text-align: left; }
.cooption.is-on { background: rgba(0, 128, 95, .07); box-shadow: inset 0 0 0 1.5px #00805f; }
.cooption__mark { flex: 0 0 18px; width: 18px; height: 18px; border-radius: 999px;
                  box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .15); }
.cooption.is-on .cooption__mark { box-shadow: inset 0 0 0 5px #00805f; }
.cooption__t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.cooption__t strong { font: 600 16px/1.25 Inter, sans-serif; color: #101828; }
.cooption__t span   { font: 500 14px/1.28 Inter, sans-serif; color: #656772; }
.cooption__cost { font: 600 16px/1.25 Inter, sans-serif; color: #101828; }

/* ---- Web/Field ----------------------------------------------------------- */
.cofield { display: flex; flex-direction: column; gap: 6px; }
.cofield__k { font: 500 16px/1.2 Inter, sans-serif; color: #101828; }
.cofield__box { height: 46px; display: flex; align-items: center; gap: 10px;
                padding: 0 14px; border-radius: 8px; background: #fff;
                box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cofield__box:focus-within { box-shadow: inset 0 0 0 1px #00805f; }
.cofield__box.is-disabled { background: #f8f8f8; box-shadow: inset 0 0 0 1px rgba(0,0,0,.07); }
.cofield__in { flex: 1 1 auto; min-width: 0; border: 0; background: none; outline: none;
               font: 400 16px/1.25 Inter, sans-serif; color: #101828; }
.cofield__in::placeholder { color: #656772; }
.cofield__in:disabled { color: #656772; -webkit-text-fill-color: #656772; }
/* the customer number sits beside the locked company name */
.cofield__suffix { flex: 0 0 auto; padding: 3px 9px; border-radius: 999px;
                   background: rgba(0, 128, 95, .07);
                   font: 600 12px/1.3 Inter, sans-serif; color: #00805f;
                   font-variant-numeric: tabular-nums; white-space: nowrap; }
.cofield__help { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }
/* `Web/Field` State=Error 17533:24140 — a 1.5 INSIDE #e55a33 stroke on the
   input and the helper line in the same colour. */
.cofield.is-error .cofield__box { box-shadow: inset 0 0 0 1.5px #e55a33; }
.cofield.is-error .cofield__box:focus-within { box-shadow: inset 0 0 0 1.5px #e55a33; }
.cofield.is-error .cofield__help { color: #e55a33; }

/* ---------- saved addresses ----------------------------------------------
   Figma's own `Saved addresses` panel from My Account > Account Settings
   18066:122334: a Regular 19 title over an "Add new address" secondary
   button, 48 tall, r10, #fff with a 1px INSIDE #000@15% stroke.          */
.cosub { font: 400 19px/1.28 Inter, sans-serif; color: #101828; margin: 6px 0 0; }
.coaddr { display: flex; flex-direction: column; gap: 12px; }
.coaddr__hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.coaddr__hd h3 { font: 400 19px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.coaddr__add { height: 48px; padding: 0 22px; border: 0; cursor: pointer;
               border-radius: 10px; background: #fff;
               box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
               font: 600 14px/1 Inter, sans-serif; color: #364153; }
.coaddr__add:hover { background: #f8f8f8; }
.coaddr__i { display: flex; align-items: center; gap: 12px; width: 100%;
             padding: 14px 16px; border: 0; cursor: pointer; text-align: left;
             border-radius: 8px; background: #fff;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.coaddr__i.is-on { background: rgba(0, 128, 95, .07);
                   box-shadow: inset 0 0 0 2px #00805f; }
.coaddr__radio { flex: 0 0 20px; width: 20px; height: 20px; border-radius: 999px;
                 background: #fff; box-shadow: inset 0 0 0 1.5px rgba(0,0,0,.25);
                 display: grid; place-items: center; }
.coaddr__i.is-on .coaddr__radio { box-shadow: inset 0 0 0 1.5px #00805f; }
.coaddr__radio i { width: 10px; height: 10px; border-radius: 999px; background: #00805f; }
.coaddr__t { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.coaddr__t strong { display: flex; align-items: center; gap: 8px;
                    font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
.coaddr__t span { font: 400 12px/1.28 Inter, sans-serif; color: #656772; }
.coaddr__chip { padding: 3px 8px; border-radius: 999px; background: rgba(0, 128, 95, .07);
                font: 500 10px/1.2 Inter, sans-serif; color: #00805f; }
.coaddr__x { flex: 0 0 auto; display: inline-grid; place-items: center;
             width: 32px; height: 32px; border-radius: 8px; color: #656772; cursor: pointer; }
.coaddr__x:hover { background: #f8f8f8; color: #e55a33; }
.corow { display: flex; gap: 16px; }
.corow > .cofield { flex: 1 1 0; min-width: 0; }
.cofields { display: flex; align-items: flex-end; gap: 12px; }
.cofields > .cofield { flex: 1 1 0; min-width: 0; }
.cofields__btn { flex: 0 0 auto; }

.cocheck { display: flex; align-items: center; gap: 10px; cursor: pointer; }
.cocheck input { position: absolute; opacity: 0; width: 0; height: 0; }
.cocheck__box { width: 20px; height: 20px; border-radius: 4px; background: #fff;
                box-shadow: inset 0 0 0 1.5px rgba(0, 0, 0, .25);
                display: inline-grid; place-items: center; }
.cocheck__box { color: #fff; }
.cocheck__box svg { opacity: 0; }
.cocheck input:checked + .cocheck__box { background: #00805f; box-shadow: none; }
.cocheck input:checked + .cocheck__box svg { opacity: 1; }
.cocheck > span:last-child { font: 400 16px/1.25 Inter, sans-serif; color: #101828; }

/* ---- billing ------------------------------------------------------------- */
.coexpress { display: flex; flex-direction: column; gap: 12px; }
.coexpress__k { font: 500 14px/1.28 Inter, sans-serif; color: #656772; }
.coexpress__row { display: flex; gap: 12px; }
.copay { flex: 1 1 0; height: 52px; border: 0; border-radius: 8px; cursor: pointer;
         display: inline-flex; align-items: center; justify-content: center; gap: 8px;
         font: 600 16px/1 Inter, sans-serif; }
.copay--shoppay { background: #5a31f4; color: #fff; }
.copay--paypal  { background: #ffc439; color: #003087; }
.copay--gpay    { background: #000; color: #fff; }
.coor { display: flex; align-items: center; gap: 14px; }
.coor i { flex: 1 1 auto; height: 1px; background: rgba(0, 0, 0, .15); }
.coor span { font: 400 12px/1.25 Inter, sans-serif; color: #656772; }
.copaycard { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.copaycard > span:first-child { font: 600 16px/1.5 Inter, sans-serif; color: #101828; }
.copaycard__brands { display: inline-flex; align-items: center; gap: 8.5px; }
.copaycard__brands img { display: block; height: 24px; width: auto; }
.cocard { padding: 16px; border-radius: 8px; background: #f8f8f8;
          display: flex; flex-direction: column; gap: 16px; }
.cobilladdr { display: flex; align-items: center; gap: 12px; padding: 12px 14px;
              border-radius: 8px; background: #fff;
              box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15); }
.cobilladdr__t { flex: 1 1 auto; display: flex; flex-direction: column; gap: 3px; }
.cobilladdr__t span   { font: 400 12px/1.25 Inter, sans-serif; color: #656772; }
.cobilladdr__t strong { font: 600 14px/1.28 Inter, sans-serif; color: #101828; }

.cosecure { display: flex; align-items: center; gap: 10px; padding: 12px 14px;
            border-radius: 8px; background: rgba(0, 128, 95, .07); }
.cosecure > svg { flex: 0 0 20px; fill: #00805f; }
.cosecure__t { display: flex; flex-direction: column; gap: 2px; }
.cosecure__t strong { font: 600 16px/1.25 Inter, sans-serif; color: #101828; }
.cosecure__t span   { font: 500 14px/1.28 Inter, sans-serif; color: #364153; }

/* ---- order review document ----------------------------------------------- */
.codoc { border-radius: 12px; background: #fff;
         box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); overflow: hidden; }
.codoc__parties { display: flex; gap: 24px; padding: 24px 24px 20px; }
.codoc__terms   { display: flex; gap: 24px; padding: 18px 24px; }
.codoc__f { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 5px; }
.codoc__k { font: 600 10px/1.2 Inter, sans-serif; color: #656772; letter-spacing: .04em; }
.codoc__v { font: 500 14px/1.28 Inter, sans-serif; color: #101828; white-space: pre-line; }
.codoc__rule { display: block; height: 1px; background: rgba(0, 0, 0, .07); }
.codoc__thead { display: flex; align-items: center; gap: 16px; padding: 12px 24px;
                background: #f8f8f8; }
.codoc__thead span { font: 600 10px/1.2 Inter, sans-serif; color: #656772; letter-spacing: .04em; }
.codoc__thead span:nth-child(1) { flex: 1 1 auto; }
.codoc__thead span:nth-child(2) { flex: 0 0 60px; }
.codoc__thead span:nth-child(3) { flex: 0 0 90px; }
.codoc__thead span:nth-child(4) { flex: 0 0 110px; }
.codoc__row { display: flex; align-items: center; gap: 16px; padding: 12px 24px;
              box-shadow: inset 0 -1px 0 rgba(0, 0, 0, .07); }
/* the product rows now host `Data/Item Image` itself; this is the service /
   freight row's stand-in tile, which has no photo to show */
.codoc__row > .iimg { flex: 0 0 72px; }
/* the freight / service tile matches the product photos beside it — the rows
   now host `Data/Item Image` Size=S at its native 72x54 */
.codoc__thumb { flex: 0 0 72px; width: 72px; height: 54px; border-radius: 6px;
                background: #f0f0f0 center/cover no-repeat;
                display: inline-grid; place-items: center; }
.codoc__thumb.is-svc svg { fill: #656772; }
.codoc__it { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.codoc__it strong { font: 600 14px/1.28 Inter, sans-serif; color: #101828; }
.codoc__it span   { font: 400 12px/1.25 Inter, sans-serif; color: #656772; }
.codoc__row > span:nth-last-child(3) { flex: 0 0 60px; }
.codoc__row > span:nth-last-child(2) { flex: 0 0 90px; }
.codoc__row > span:nth-last-child(1) { flex: 0 0 110px; }
.codoc__row > span:not(.codoc__thumb) { font: 500 14px/1.28 Inter, sans-serif;
                                        color: #101828; font-variant-numeric: tabular-nums; }
.codoc__foot { display: flex; align-items: flex-end; gap: 32px; padding: 20px 24px 24px; }
.codoc__note { font: 400 12px/1.25 Inter, sans-serif; color: #656772; }

.conotes { display: flex; flex-direction: column; gap: 6px; }
.conotes__k { font: 500 16px/1.2 Inter, sans-serif; color: #101828; }
.conotes__box { min-height: 96px; padding: 12px 14px; border: 0; border-radius: 8px;
                background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .15);
                resize: vertical; outline: none;
                font: 400 16px/1.35 Inter, sans-serif; color: #101828; }
.conotes__box::placeholder { color: #656772; }

.coterms { padding: 20px 24px 22px; border-radius: 12px; background: #f8f8f8;
           box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
           display: flex; flex-direction: column; gap: 10px; }
.coterms h3 { font: 600 16px/1.25 Inter, sans-serif; color: #101828; margin: 0; }
.coterms__li { display: flex; gap: 8px; }
.coterms__li i { flex: 0 0 5px; width: 5px; height: 5px; margin-top: 7px;
                 border-radius: 999px; background: #656772; }
.coterms__li span { font: 500 14px/1.28 Inter, sans-serif; color: #364153; }

/* ---- Web/Order Summary (380) --------------------------------------------- */
.osum { flex: 0 0 380px; width: 380px; padding: 24px; border-radius: 12px;
        background: #fff; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
        display: flex; flex-direction: column; gap: 14px; }
.osum__h { font: 400 24px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.osum__lines { display: flex; flex-direction: column; gap: 10px; }
.osum__r { display: flex; align-items: center; justify-content: space-between; }
.osum__r span:first-child { font: 400 16px/1.25 Inter, sans-serif; color: #364153; }
.osum__r span:last-child  { font: 400 16px/1.25 Inter, sans-serif; color: #101828;
                            font-variant-numeric: tabular-nums; }
.osum__rule { display: block; height: 1px; background: rgba(0, 0, 0, .15); }
.osum__total { display: flex; align-items: center; justify-content: space-between; }
.osum__total > span:first-child { font: 600 16px/1.25 Inter, sans-serif; color: #101828; }
.osum__tv { font: 600 24px/1.2 Inter, sans-serif; color: #101828;
            font-variant-numeric: tabular-nums; }
.osum__cta { height: 48px; border: 0; border-radius: 10px; background: #00805f;
             cursor: pointer; display: inline-flex; align-items: center;
             justify-content: center; gap: 8px;
             font: 600 16px/1 Inter, sans-serif; color: #fff; }
.osum__cta:hover { background: #006c50; }
.osum__cta.is-off { background: #f0f0f0; color: #d9d9d9; cursor: not-allowed;
                    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07); }
.osum__gate { font: 400 12px/1.3 Inter, sans-serif; color: #e55a33; margin: 0; text-align: center; }
.costep.is-done { cursor: pointer; }
.costep.is-done:hover .costep__l { color: #00805f; }

/* ---- empty cart + done --------------------------------------------------- */
.co__empty { padding: 64px 24px; border-radius: 12px; background: #fff;
             box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .07);
             display: flex; flex-direction: column; align-items: center; gap: 10px; }
.co__empty h2 { font: 600 20px/1.25 Inter, sans-serif; color: #101828; margin: 0; }
.co__empty p  { font: 400 14px/1.4 Inter, sans-serif; color: #656772; margin: 0 0 8px; }

.codone { width: 1550px; max-width: 100%; margin: 0 auto; padding: 48px 0;
          display: flex; flex-direction: column; align-items: center; gap: 22px;
          text-align: center; }
.codone__check { width: 92px; height: 92px; border-radius: 999px;
                 box-shadow: inset 0 0 0 2px #00805f;
                 display: inline-grid; place-items: center; }
.codone__check svg { fill: #00805f; }
.codone h1 { font: 400 36px/1.28 Inter, sans-serif; color: #101828; margin: 0; }
.codone__lead { font: 400 18px/1.28 Inter, sans-serif; color: #364153; margin: 0; }
.codone__sub  { font: 400 16px/1.25 Inter, sans-serif; color: #656772; margin: 0; }
.codone__cta { height: 48px; padding: 0 31px; border-radius: 10px; }
.codone__acct { width: 520px; max-width: 100%; padding: 20px 28px; border-radius: 8px;
                background: rgba(0, 128, 95, .07);
                display: flex; flex-direction: column; align-items: center; gap: 10px; }
.codone__acct strong { font: 600 16px/1.25 Inter, sans-serif; color: #101828; }
.codone__acct span   { font: 500 14px/1.28 Inter, sans-serif; color: #656772; }
.codone__note { max-width: 660px; font: 500 14px/1.4 Inter, sans-serif; color: #656772; margin: 0; }

@media (max-width: 1600px) {
  .comain { padding: 48px 40px 72px !important; }
  .co, .codone { width: 100%; }
}
@media (max-width: 1280px) {
  .co__body { flex-direction: column; }
  .costeps, .co__main, .osum { width: 100%; flex: 0 0 auto; }
  .costeps { flex-direction: row; flex-wrap: wrap; gap: 8px 20px; }
}
.costepwrap { display: contents; }
/* the phone's counter+bar indicator is built alongside the rail; only one of
   the two is ever shown. */
.costepm { display: none; }

/* The freight quote is simulated, so the money sits in a pending state for a
   beat after any choice that re-prices it. The spinner takes the place of the
   figure rather than pushing it around. */
.osum__spin { display: inline-block; width: 18px; height: 18px; vertical-align: -3px;
              border-radius: 999px; border: 2px solid rgba(0, 0, 0, .12);
              border-top-color: #00805f; animation: osumspin .7s linear infinite; }
.osum__tv .osum__spin { width: 24px; height: 24px; border-width: 3px; vertical-align: -5px; }
@keyframes osumspin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .osum__spin { animation-duration: 2s; }
}