/* Cart + Checkout shared styles */
.ek-cart, .ek-checkout { padding: 20px 0 60px; }

.ek-cart-head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 4px;
}

.ek-min-order-banner {
  margin-top: 12px; padding: 12px 14px;
  background: var(--ek-amber-pale);
  border: 1px solid #E8D2A8;
  border-radius: var(--ek-radius);
  color: var(--ek-amber);
  font-size: 13px;
}

.ek-cart-grid {
  display: grid; grid-template-columns: 1fr 360px;
  gap: 24px; margin-top: 20px;
}

.ek-cart-lines {
  border: 1px solid var(--ek-border);
  background: var(--ek-paper-2);
}
.ek-cart-lines__head {
  padding: 10px 14px;
  display: flex; align-items: center; gap: 12px;
  border-bottom: 1px solid var(--ek-border);
}
.ek-cart-lines__head-actions { margin-left: auto; display: flex; gap: 6px; }

.ek-cart-line {
  display: grid;
  grid-template-columns: 24px 64px 1fr 160px 120px 120px 30px;
  align-items: center; gap: 14px; padding: 14px;
  border-bottom: 1px solid var(--ek-border);
}
.ek-cart-line:last-of-type { border-bottom: none; }
.ek-cart-line__thumb { width: 64px; height: 64px; font-size: 8px; }
.ek-cart-line__info { min-width: 0; }
.ek-cart-line__meta { font-size: 10px; color: var(--ek-muted); }
.ek-cart-line__name { font-size: 13.5px; font-weight: 500; line-height: 1.3; }
.ek-cart-line__unit { text-align: right; font-size: 13px; }
.ek-cart-line__total { text-align: right; font-size: 14px; font-weight: 600; }

.ek-bulk-add { padding: 14px; border-top: 1px solid var(--ek-border); background: var(--ek-paper); }
.ek-bulk-add summary { font-size: 12px; font-weight: 500; cursor: pointer; }
.ek-bulk-add textarea { margin-top: 8px; }
.ek-bulk-add button { margin-top: 8px; }

.ek-cart-summary__inner {
  border: 1px solid var(--ek-border);
  background: var(--ek-paper-2);
  position: sticky; top: 16px;
}
.ek-cart-summary__inner > div { padding: 16px; }
.ek-cart-summary__inner > div + div { border-top: 1px solid var(--ek-border); }
.ek-cart-summary__totals table { width: 100%; font-size: 12px; }
.ek-cart-summary__totals td { padding: 3px 0; }
.ek-cart-summary__totals td:last-child { text-align: right; }
.ek-cart-summary__cta { display: flex; flex-direction: column; gap: 8px; }

@media (max-width: 1024px) {
  .ek-cart-grid { grid-template-columns: 1fr; }
  .ek-cart-line { grid-template-columns: 24px 1fr; }
  .ek-cart-line > *:not(.ek-cart-line__info):not(input) { grid-column: 1 / -1; }
}

/* Checkout */
.ek-checkout-grid { display: grid; grid-template-columns: 1fr 320px; gap: 24px; }
.ek-checkout-steps {
  display: flex; align-items: center; gap: 0;
  margin: 20px 0 28px;
  border-top: 1px solid var(--ek-border);
  border-bottom: 1px solid var(--ek-border);
}
.ek-checkout-step {
  flex: 1; padding: 14px 16px;
  border-right: 1px solid var(--ek-border);
  display: flex; align-items: center; gap: 10px;
  color: var(--ek-muted);
}
.ek-checkout-step:last-child { border-right: none; }
.ek-checkout-step.is-active { background: var(--ek-paper-2); color: var(--ek-text); font-weight: 500; }
.ek-checkout-step__num {
  width: 20px; height: 20px;
  border: 1px solid var(--ek-border-2);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-family: var(--ek-mono);
}
.ek-checkout-step.is-active .ek-checkout-step__num,
.ek-checkout-step.is-done   .ek-checkout-step__num {
  background: var(--ek-graphite); color: #fff;
}

.ek-checkout-section {
  margin-bottom: 22px;
  border: 1px solid var(--ek-border);
  background: var(--ek-paper-2);
}
.ek-checkout-section__head {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ek-border);
  display: flex; align-items: center; justify-content: space-between;
}
.ek-checkout-section__head-title { font-size: 13px; font-weight: 500; }
.ek-checkout-section__body { padding: 16px; }
.ek-field { display: block; }
.ek-field + .ek-field { margin-top: 12px; }
.ek-field .ek-eyebrow { margin-bottom: 6px; display: block; }

.ek-pay-grid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.ek-pay-option {
  padding: 12px;
  border: 1px solid var(--ek-border-2);
  background: var(--ek-paper);
  cursor: pointer;
}
.ek-pay-option.is-on {
  border-color: var(--ek-graphite);
  background: var(--ek-paper-2);
}

.ek-checkout-summary { position: sticky; top: 16px; border: 1px solid var(--ek-border); background: var(--ek-paper-2); }
.ek-checkout-summary > div { padding: 14px; }
.ek-checkout-summary > div + div { border-top: 1px solid var(--ek-border); }

@media (max-width: 1024px) {
  .ek-checkout-grid { grid-template-columns: 1fr; }
  .ek-pay-grid { grid-template-columns: 1fr; }
}

/* ============================================================
   PageCart split-basket layout (SPEC.md §6.4)
   ============================================================ */
.fp-cart { padding: 18px 0 36px; }
.fp-cart__head {
  display: flex; align-items: baseline; justify-content: space-between;
  margin: 8px 0 14px;
}
.fp-cart__title { font-size: 32px; margin: 0; }
.fp-cart__counts { font-size: 13px; }

.fp-cart__min {
  padding: 12px 16px;
  background: var(--amber-pale); border: 1px solid var(--amber-border);
  color: var(--amber);
  border-radius: var(--r);
  margin-bottom: 16px;
}

.fp-cart__empty {
  padding: 40px 24px; text-align: center;
}

.fp-cart__grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 24px;
  align-items: start;
}
@media (max-width: 980px) {
  .fp-cart__grid { grid-template-columns: 1fr; }
}

.fp-cart__section { padding: 20px 22px; margin-bottom: 18px; }
.fp-cart__section-head {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 14px; margin-bottom: 14px;
  border-bottom: 1px solid var(--line);
}
.fp-cart__section-title { font-size: 22px; margin: 0; }
.fp-cart__section-total { font-size: 15px; font-weight: 700; }
.fp-cart__section--quote .fp-cart__section-total { color: var(--quote); font-weight: 600; }

.fp-cart__lines { display: flex; flex-direction: column; gap: 12px; }
.fp-cart__line {
  display: grid;
  grid-template-columns: 64px 1fr 90px 110px 110px 36px;
  gap: 14px; align-items: center;
  padding: 12px 0;
  border-bottom: 1px dashed var(--line);
}
.fp-cart__line:last-child { border-bottom: 0; }
.fp-cart__line-thumb { width: 64px; height: 64px; border-radius: 8px; }
.fp-cart__line-name { font-weight: 600; font-size: 14px; }
.fp-cart__line-meta { font-size: 11.5px; margin-top: 3px; }
.fp-cart__line-qty { font-size: 13.5px; font-weight: 700; text-align: right; }
.fp-cart__line-unit { font-size: 13px; text-align: right; }
.fp-cart__line-total { font-size: 15px; text-align: right; }
.fp-cart__line-remove { padding: 6px 10px; font-size: 16px; line-height: 1; }
.fp-cart__line--quote .fp-cart__line-unit,
.fp-cart__line--quote .fp-cart__line-total { color: var(--quote); }

.fp-cart__summary {
  display: flex; flex-direction: column; gap: 16px;
  position: sticky; top: 220px;
}
.fp-cart__loadmeter { padding: 16px 18px; }
.fp-cart__loadmeter .eyebrow { margin-bottom: 12px; display: block; }

.fp-loadbar { margin-bottom: 14px; }
.fp-loadbar:last-child { margin-bottom: 0; }
.fp-loadbar__head {
  display: flex; justify-content: space-between;
  font-size: 12.5px; margin-bottom: 5px;
}
.fp-loadbar__track {
  width: 100%; height: 8px; border-radius: 999px;
  background: var(--bg-3);
  overflow: hidden;
}
.fp-loadbar__fill {
  height: 100%; border-radius: 999px;
  transition: width .4s ease, background-color .15s;
}
.fp-loadbar__fill.is-ok   { background: var(--green); }
.fp-loadbar__fill.is-warn { background: var(--amber); }
.fp-loadbar__fill.is-over { background: #C13B2E; }
.fp-loadbar.is-active .fp-loadbar__head { font-weight: 700; color: var(--ink); }
.fp-loadbar__binding {
  font-size: 10.5px; margin-top: 4px;
}

.fp-loadmeter__warn {
  margin-top: 12px;
  padding: 10px 12px;
  background: rgba(193,59,46,0.08);
  border: 1px solid rgba(193,59,46,0.30);
  color: #8B2C22;
  border-radius: 8px;
  font-size: 12.5px;
}

.fp-cart__totals { padding: 16px 18px; }
.fp-cart__totals table { width: 100%; font-size: 13px; }
.fp-cart__totals td { padding: 5px 0; }
.fp-cart__totals td:last-child { text-align: right; }

.fp-cart__ctas { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* Mobile cart lines — stack the fields instead of forcing a 6-column grid
   that overflows narrow viewports (Galaxy S26 Ultra ~412px). */
@media (max-width: 640px) {
  .fp-cart__line {
    grid-template-columns: 64px 1fr 28px;
    grid-template-rows: auto auto;
    grid-template-areas:
      "thumb info  remove"
      "thumb price price";
    row-gap: 6px;
  }
  .fp-cart__line-thumb { grid-area: thumb; }
  .fp-cart__line-info  { grid-area: info; min-width: 0; }
  .fp-cart__line-name  { white-space: normal; }
  .fp-cart__line-remove{ grid-area: remove; align-self: start; padding: 4px 6px; }
  .fp-cart__line-qty,
  .fp-cart__line-unit,
  .fp-cart__line-total {
    grid-area: price;
    display: inline-flex; align-items: baseline; gap: 6px;
    text-align: left;
  }
  .fp-cart__line-qty   { font-weight: 600; }
  .fp-cart__line-unit  { margin-left: 14px; }
  .fp-cart__line-total { margin-left: auto; }
  /* Stack all three on one row separated by · */
  .fp-cart__line { display: flex; flex-wrap: wrap; }
  .fp-cart__line-thumb { flex: 0 0 56px; height: 56px; }
  .fp-cart__line-info  { flex: 1 1 calc(100% - 90px); margin-left: 12px; }
  .fp-cart__line-remove{ flex: 0 0 24px; }
  .fp-cart__line-qty,
  .fp-cart__line-unit,
  .fp-cart__line-total {
    flex: 0 0 auto;
    margin-top: 6px; margin-right: 12px;
  }
  .fp-cart__line-total { margin-left: auto; margin-right: 0; }

  /* Summary panel inherits the column container — fix any sticky top. */
  .fp-cart__summary { position: static; }
}

/* Cart grid: at narrow viewports the desktop "1fr 360px" template would
   produce a 360px summary panel that overflows on phones. Force the grid
   children to live inside the viewport. */
@media (max-width: 980px) {
  .fp-cart__grid { display: flex; flex-direction: column; gap: 16px; }
  .fp-cart__main, .fp-cart__summary { width: 100%; max-width: 100%; min-width: 0; }
}

/* ── Registration consent block ──────────────────────────────────────────
   Consent + submit + approval note are a separate step from the field stack
   above, so they get their own bordered group. The checkbox was previously
   inline inside a bare <label>, which let the wrapping sentence flow back
   underneath it and made the control read as part of the last text field. */
.ek-consent {
  margin-top: 22px;
  padding: 18px 18px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md, 10px);
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.ek-consent__row {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  cursor: pointer;
  margin: 0;
}
.ek-consent__box {
  flex: 0 0 auto;
  width: 18px; height: 18px;
  margin: 1px 0 0;          /* optical align to the first text line */
  accent-color: var(--red);
  cursor: pointer;
}
.ek-consent__text {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--text);
}
.ek-consent__text a { color: var(--red); text-decoration: underline; }
.ek-consent__text a:hover { color: var(--red-deep); }
.ek-consent__submit { width: 100%; }
.ek-consent__note {
  margin: 0;
  padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--muted);
}
@media (max-width: 560px) {
  .ek-consent { padding: 16px 14px 14px; gap: 14px; }
}

/* The submit confirmation reuses .fp-sheet, which is a mobile bottom-sheet.
   On desktop it should read as a centred dialog. home.css's mobile-sheet
   rules (position:fixed/bottom/transform:translateY) run through
   max-width:1023px, so this has to pick up at exactly 1024px — not 769px,
   which review caught overlapping with those rules for 769-1023px and
   producing a broken hybrid (top/left:50% with the centring transform
   getting out-specificity'd back to identity by home.css's mobile
   .fp-sheet rule, which also sets `transform`). One breakpoint, used on
   both sides, so exactly one presentation is ever active. */
.ek-appsheet { display: flex; flex-direction: column; }
@media (min-width: 1024px) {
  .ek-appsheet {
    position: fixed; inset: auto; top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: min(620px, calc(100vw - 32px));
    /* .fp-sheet's own background: #fff only exists inside home.css's
       max-width:1023px block, so above that width the panel has no
       surface of its own and the page behind (hero photo, form fields)
       shows straight through it. Give it one explicitly, from the same
       token the rest of the site uses for card/panel surfaces. */
    background: var(--ek-paper, #fff);
    border-radius: var(--r-lg, 14px);
    box-shadow: 0 24px 60px rgba(0,0,0,.22);
    z-index: 1001;
  }
  /* Unlike the max-width:1023px sheets, whose visibility is gated by
     body.fp-sheet-open + [data-fp-sheet-active] in home.css, .ek-appsheet
     above is unconditionally display:flex so it isn't stuck under
     translateY(100%) at desktop widths. That means the open/close state
     has to be re-gated here explicitly, or dismissing it (Escape, which
     only clears data-fp-sheet-active) would leave it visibly on-screen. */
  .ek-appsheet:not([data-fp-sheet-active]) { display: none; }

  /* home.css's scrim (dims the page + makes it inert to clicks) is also
     scoped to max-width:1023px — reuse the exact same visual, gated the
     same way (body.fp-sheet-open), just for our popup's scrim above that
     width instead of duplicating a new dimming pattern. */
  body.fp-sheet-open [data-fp-sheet-scrim] {
    position: fixed; inset: 0;
    background: rgba(20, 20, 24, .5);
    z-index: 1000;
    opacity: 1;
    pointer-events: auto;
    display: block;
  }
}
.ek-appsheet__addr { font-family: var(--mono); font-size: 15px; word-break: break-all; }
/* .fp-sheet already reserves env(safe-area-inset-bottom) on the sheet's own
   bottom edge, but that space lands *after* .fp-sheet__foot in the flex
   column, not as room the "Done" button itself sits in — on a phone with a
   home-indicator gesture bar the button can still end up under it. Pad the
   foot directly, scoped to this popup only so the shared .fp-sheet__foot
   rule (filters/sort/subcats) is untouched. */
.ek-appsheet .fp-sheet__foot {
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));
}