/* Client-facing storefront — the 4-step order flow, in the C2 theme's
   visual language (see style.css for the shared tokens): edge-to-edge,
   sections and cards split by 1px ink lines, touching product cards,
   everything square, Poppins 800 uppercase headings, small uppercase
   labels. Values copied from c2-product.css / c2-cards.css /
   c2-collection.css / c2-page.css so the app reads like bigstuffed.com. */

/* Our own display:flex/grid rules on .sf-product-card etc. are author
   styles that override the browser's default [hidden]{display:none} —
   author rules always beat user-agent rules regardless of specificity.
   Reasserting it with !important is what makes catalog_tag_filter.js's
   `element.hidden = true` actually hide anything. */
[hidden] { display: none !important; }

/* ---------- header + step bar ---------- */
.sf-header {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 64px; padding: 0 var(--pad); border-bottom: 1px solid var(--c2-ink);
}
.sf-brand { display: block; }
.sf-logo { height: 26px; width: auto; display: block; }
.sf-header-label {
  padding: 6px 10px; border: 1px solid var(--c2-ink);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
@media (min-width: 990px) { .sf-header { min-height: 72px; } .sf-logo { height: 30px; } }

.sf-steps {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border-bottom: 1px solid var(--c2-ink);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.sf-step {
  display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 48px; padding: 0 16px;
  border-right: 1px solid var(--c2-ink); color: var(--c2-soft);
}
.sf-step:first-child { padding-left: var(--pad); }
.sf-step:last-child { border-right: 0; }
.sf-step-n { font-weight: 700; }
.sf-step-label { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-step.done { color: var(--c2-ink); }
.sf-step.active { background: var(--c2-ink); color: var(--c2-paper); }
@media (max-width: 749px) {
  .sf-step { justify-content: center; padding: 0 8px; }
  .sf-step:first-child { padding-left: 8px; }
  .sf-step:not(.active) .sf-step-label { display: none; }
  .sf-steps { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .sf-step.active { grid-column: span 1; }
}

/* ---------- page frame ---------- */
.sf-shell { padding: 0 0 96px; }
.sf-page-head { display: flex; flex-direction: column; gap: 14px; padding: 36px var(--pad) 28px; border-bottom: 1px solid var(--c2-ink); }
@media (min-width: 990px) { .sf-page-head { padding: 48px var(--pad) 36px; } }

.sf-eyebrow { margin: 0; font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c2-soft); }
.sf-soft { color: var(--c2-soft); }
.sf-title {
  margin: 0; font-size: 40px; font-weight: 800; line-height: 0.95; letter-spacing: -0.03em; text-transform: uppercase;
}
@media (min-width: 990px) { .sf-title { font-size: 64px; } }
.sf-subtitle { margin: 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--c2-soft); }
.sf-subtitle strong { color: var(--c2-ink); }

/* Split page (Steps 1 and 3) — C2 · Contact form's layout: info on the
   left, sticky on desktop; form on the right behind an ink line. */
.sf-split { display: grid; border-bottom: 1px solid var(--c2-ink); }
.sf-split-info { display: flex; flex-direction: column; align-items: flex-start; gap: 18px; padding: 36px var(--pad); }
.sf-split-form { padding: 36px var(--pad) 44px; border-top: 1px solid var(--c2-ink); }
@media (min-width: 990px) {
  .sf-split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); min-height: calc(100vh - 122px); }
  .sf-split-info { padding: 56px 64px 56px var(--pad); position: sticky; top: 0; align-self: start; }
  .sf-split-form { padding: 56px var(--pad) 64px 64px; border-top: 0; border-left: 1px solid var(--c2-ink); }
}

.sf-form-section { padding: 0 0 28px; }
.sf-form-section + .sf-form-section, .sf-checkbox-row + .sf-form-section { padding-top: 28px; border-top: 1px solid var(--c2-ink); }
.sf-section-title {
  margin: 0 0 22px; font-size: 22px; font-weight: 800; line-height: 1.1; letter-spacing: -0.02em; text-transform: uppercase;
}
@media (min-width: 990px) { .sf-section-title { font-size: 28px; } }

/* ---------- form fields (C2 · Contact form) ---------- */
.sf-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; margin-bottom: 18px; }
.sf-field label { font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sf-field input, .sf-field select {
  width: 100%; min-height: 52px; padding: 14px; border: 1px solid var(--c2-ink); border-radius: 0; background-color: var(--c2-field);
  color: var(--c2-ink); font: 400 15px/1.4 var(--font); -webkit-appearance: none; appearance: none; box-shadow: none;
}
.sf-field select {
  padding-right: 40px; cursor: pointer;
  background: var(--c2-field) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231A1816' stroke-width='1.4'/%3E%3C/svg%3E") no-repeat right 16px center;
}
.sf-field input:focus, .sf-field select:focus { outline: 2px solid var(--c2-ink); outline-offset: -2px; }
.sf-row { display: grid; grid-template-columns: minmax(0, 1fr); column-gap: 18px; }
@media (min-width: 750px) { .sf-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }

.sf-error { color: var(--c2-bad); font-size: 12px; }
.sf-form-error {
  margin: 0; padding: 14px var(--pad); border-bottom: 1px solid var(--c2-ink);
  background: var(--c2-bad); color: #fff; font-size: 14px; line-height: 1.5;
}
.sf-split-form .sf-form-error { margin-bottom: 20px; border: 0; padding: 14px 16px; }
.sf-shipping-estimate-note {
  margin: 0; padding: 12px 14px; border: 1px solid var(--c2-ink);
  font-size: 12px; line-height: 1.5;
}

.sf-checkbox-row { display: flex; align-items: center; gap: 10px; margin: 0 0 28px; font-size: 14px; cursor: pointer; }
.sf-checkbox-row input { width: 16px; height: 16px; margin: 0; accent-color: var(--c2-ink); }

/* ---------- buttons (.c2-btn) ---------- */
.sf-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-top: 8px; }
.sf-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 56px; padding: 0 28px;
  border: 1px solid var(--c2-ink); border-radius: 0; background: var(--c2-ink); color: var(--c2-paper);
  font-family: var(--font); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  text-decoration: none; cursor: pointer; transition: opacity 0.2s ease;
}
.sf-btn:hover { opacity: 0.85; }
.sf-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.sf-btn-secondary { background: transparent; color: var(--c2-ink); }
.sf-split-form .sf-actions .sf-btn:last-child { min-width: 220px; }

/* Admin-authored rich text (see admin/settings.html's editor) rendered
   unescaped — styled generically by tag, like C2's .c2-rte. */
.sf-conditions-card { align-self: stretch; display: flex; flex-direction: column; gap: 12px; margin-top: 10px; padding: 18px 16px; border: 1px solid var(--c2-ink); }
.sf-rte { font-size: 13px; line-height: 1.6; }
.sf-rte p, .sf-rte ul, .sf-rte ol { margin: 0 0 8px; }
.sf-rte > :last-child { margin-bottom: 0; }
.sf-rte ul, .sf-rte ol { list-style: none; padding: 0; }
.sf-rte li { position: relative; margin: 0 0 4px; padding-left: 22px; }
.sf-rte li::before { content: "—"; position: absolute; left: 0; color: var(--c2-soft); }
.sf-rte a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.sf-rte b, .sf-rte strong { font-weight: 700; }

.sf-admin-link { margin: 0; padding: 28px var(--pad); text-align: center; }
.sf-admin-link a { color: var(--c2-soft); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; }
.sf-admin-link a:hover { color: var(--c2-ink); }
.sf-admin-link { color: var(--c2-soft); font-size: 10px; }

/* Step 1: link to the other market's order form (US <-> international) */
.sf-market-switch { margin: 0; padding: 18px var(--pad); border-top: 1px solid var(--c2-ink); border-bottom: 1px solid var(--c2-ink); text-align: center; font-size: 13px; }
.sf-market-switch a { color: var(--c2-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.sf-market-switch a:hover { color: var(--c2-orange); }

/* ---------- filters: framed square tags (C2 collection nav) ---------- */
.sf-filter-clouds { display: flex; flex-direction: column; border-bottom: 1px solid var(--c2-ink); }
.sf-tag-group { display: flex; align-items: stretch; min-width: 0; }
.sf-tag-group + .sf-tag-group { border-top: 1px solid var(--c2-ink); }
.sf-tag-group-label {
  flex: none; display: flex; align-items: center; width: 140px; margin: 0; padding: 0 16px 0 var(--pad);
  border-right: 1px solid var(--c2-ink);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c2-soft);
}
.sf-tag-cloud {
  flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 12px var(--pad) 12px 16px; overflow-x: auto; scrollbar-width: none;
}
.sf-tag-cloud::-webkit-scrollbar { display: none; }
@media (min-width: 990px) { .sf-tag-cloud { flex-wrap: wrap; overflow: visible; padding-block: 14px; } }
@media (max-width: 749px) { .sf-tag-group-label { width: auto; } }
.sf-tag-pill {
  flex: none; display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 6px 11px;
  border: 1px solid var(--c2-ink); border-radius: 0; background: transparent; color: var(--c2-ink); cursor: pointer;
  font-family: var(--font); font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; white-space: nowrap;
  transition: background 0.2s ease, color 0.2s ease;
}
.sf-tag-pill:hover, .sf-tag-pill.active { background: var(--c2-ink); color: var(--c2-paper); }
.sf-tag-emoji { font-size: 14px; line-height: 1; letter-spacing: 0; }
.sf-tag-deselect { border-color: transparent; color: var(--c2-soft); text-decoration: underline; text-underline-offset: 3px; }
.sf-tag-deselect:hover { background: transparent; color: var(--c2-ink); }

/* ---------- catalog: product grid + order panel ----------
   Desktop: the grid and a sticky ink order panel side by side, split by
   an ink line. The sidebar stretches to the grid's full height (no
   align-items:flex-start) so the sticky panel has room to stay pinned
   all the way down. Narrow screens: the panel becomes a fixed bottom
   bar. */
.sf-catalog-layout { display: flex; }
.sf-catalog-main { flex: 1; min-width: 0; }
.sf-catalog-sidebar { width: 360px; flex-shrink: 0; border-left: 1px solid var(--c2-ink); }
@media (max-width: 900px) {
  .sf-catalog-layout { flex-direction: column; }
  .sf-catalog-sidebar { width: 100%; border-left: 0; }
}

/* Touching cards: each cell draws its own right and bottom ink line, and
   the grid is pulled 1px out so the outer lines are clipped by the form
   (the same trick as C2 · Cards and the C2 collection grid). */
#catalog-form { overflow: hidden; }
.sf-catalog-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  margin: 0 -1px -1px 0;
}
@media (min-width: 700px) { .sf-catalog-main .sf-catalog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1250px) { .sf-catalog-main .sf-catalog-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 900px) { #catalog-form { padding-bottom: 120px; } }
.sf-catalog-grid > * { min-width: 0; border-right: 1px solid var(--c2-ink); border-bottom: 1px solid var(--c2-ink); }

.sf-product-card { display: flex; flex-direction: column; background: var(--c2-paper); }
/* The <a> wrapper (see step2_catalog.html) is what's clickable — opens
   the real bigstuffed.com product page in a popup. */
.sf-product-image-link { position: relative; display: block; aspect-ratio: 4 / 5; overflow: hidden; background: var(--c2-photo); }
.sf-product-card img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
  mix-blend-mode: multiply; transition: transform 0.4s ease;
}
.sf-product-image-link:hover img { transform: scale(1.03); }
.sf-product-card .no-image { aspect-ratio: 4 / 5; }
.sf-product-body { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 12px 12px 14px; container-type: inline-size; }
@media (min-width: 990px) { .sf-product-body { padding: 14px 18px 18px; } }
.sf-product-title {
  margin: 0; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
@media (min-width: 990px) { .sf-product-title { font-size: 14px; letter-spacing: 0.1em; } }
.sf-product-meta { margin: 0; font-size: 12px; color: var(--c2-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-product-sku { font-weight: 700; color: var(--c2-ink); }
.sf-stock { display: flex; align-items: center; gap: 6px; margin: 4px 0 0; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--c2-soft); }
.sf-stock::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--c2-ok); }
.sf-stock.low::before, .sf-stock.out-of-stock-label::before { background: var(--c2-bad); }
.sf-stock.low, .sf-stock.out-of-stock-label { color: var(--c2-ink); }
.sf-price-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-top: auto; padding-top: 10px; }
.sf-price-b2b { font-size: 15px; font-weight: 700; white-space: nowrap; }
.sf-price-b2c { font-size: 12px; color: var(--c2-soft); text-decoration: line-through; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (min-width: 990px) { .sf-price-b2b { font-size: 16px; } }

.sf-product-card.sf-out-of-stock .sf-product-image-link,
.sf-product-card.sf-out-of-stock .no-image { opacity: 0.45; filter: grayscale(80%); }
.sf-product-card.sf-out-of-stock .sf-qty-stepper { opacity: 0.35; cursor: not-allowed; }
.sf-product-card.sf-out-of-stock .sf-qty-stepper button,
.sf-product-card.sf-out-of-stock .sf-qty-stepper input { cursor: not-allowed; }

.sf-qty-row { margin-top: 12px; }
.sf-qty-stepper { display: flex; align-items: stretch; height: 40px; border: 1px solid var(--c2-ink); }
.sf-qty-stepper button {
  flex: none; width: 40px; border: 0; border-radius: 0; background: transparent; color: var(--c2-ink);
  font-size: 16px; font-weight: 300; cursor: pointer; transition: background 0.2s ease, color 0.2s ease;
}
.sf-qty-stepper button:first-child { border-right: 1px solid var(--c2-ink); }
.sf-qty-stepper button:last-child { border-left: 1px solid var(--c2-ink); }
.sf-qty-stepper button:hover:not(:disabled) { background: var(--c2-ink); color: var(--c2-paper); }
.sf-qty-stepper input {
  flex: 1; min-width: 0; width: 100%; border: 0; border-radius: 0; background: var(--c2-field); color: var(--c2-ink);
  text-align: center; font: 700 14px/1 var(--font); -moz-appearance: textfield;
}
.sf-qty-stepper input:focus { outline: 2px solid var(--c2-ink); outline-offset: -2px; }
.sf-qty-stepper input::-webkit-outer-spin-button, .sf-qty-stepper input::-webkit-inner-spin-button { -webkit-appearance: none; }

/* Category banner card — one photo cell at the start of each category,
   in the same grid as its products. grid-column-start:1 forces it onto
   a fresh row without spanning, so it stays the size of a product card.
   Photo with a paper tag and a white caption, as C2's photo cards. */
.sf-banner-card {
  grid-column-start: 1;
  position: relative; overflow: hidden; min-height: 260px;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 8px;
  padding: 16px; color: #fff;
  background: var(--c2-photo) no-repeat center/cover;
}
.sf-banner-card::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(0deg, rgba(26, 24, 22, 0.55) 0%, rgba(26, 24, 22, 0) 50%);
}
.sf-banner-card > * { position: relative; z-index: 1; margin: 0; }
.sf-banner-eyebrow {
  position: absolute; top: 12px; left: 12px; padding: 5px 8px;
  background: color-mix(in srgb, var(--c2-paper) 88%, transparent); color: var(--c2-ink);
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.sf-banner-heading {
  font-size: 24px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-transform: uppercase;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35);
}
.sf-banner-subtext { font-size: 12px; line-height: 1.45; text-shadow: 0 1px 8px rgba(0, 0, 0, 0.35); }
.sf-banner-cta {
  align-self: flex-start; display: inline-flex; align-items: center; height: 40px; padding: 0 16px; margin-top: 4px;
  border: 1px solid currentColor; font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
}
@media (min-width: 990px) {
  .sf-banner-card { padding: 20px 18px; }
  .sf-banner-eyebrow { top: 16px; left: 16px; }
  .sf-banner-heading { font-size: 32px; }
}

.sf-section-heading {
  grid-column: 1 / -1; display: flex; align-items: center; min-height: 48px; padding: 0 var(--pad);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  background: color-mix(in srgb, var(--c2-ink) 5%, var(--c2-paper));
}

/* ---------- order panel: an ink cart, sticky on desktop ----------
   Header (items / minimum), the scrollable cart list, the price
   breakdown and the Continue button; the list (flex:1, min-height:0)
   takes whatever height is left and scrolls inside the panel. */
.sf-totals-panel {
  --c2-soft: color-mix(in srgb, var(--c2-paper) 60%, var(--c2-ink));
  position: sticky; top: 0;
  height: 100vh; max-height: 100vh;
  display: flex; flex-direction: column; gap: 0;
  background: var(--c2-ink); color: var(--c2-paper);
}
.sf-totals-header {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 8px;
  padding: 18px 20px; border-bottom: 1px solid color-mix(in srgb, var(--c2-paper) 20%, transparent);
  font-size: 12px;
}
.sf-totals-top-row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 6px 16px; }
.sf-totals-items { font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sf-totals-min-ok, .sf-totals-min-warn { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; }
.sf-totals-min-ok::before, .sf-totals-min-warn::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.sf-totals-min-ok::before { background: #7CC28A; }
.sf-totals-min-warn::before { background: var(--c2-orange); }
.sf-totals-excluded { font-size: 11px; color: #F2A29C; }
.sf-totals-shipping-note { font-size: 11px; color: var(--c2-soft); }

.sf-cart-items {
  flex: 1; min-height: 0; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 0 20px;
  scrollbar-width: thin; scrollbar-color: rgba(239, 236, 230, 0.35) transparent;
}
.sf-cart-items:empty::before {
  content: "Your order is empty"; margin: auto; padding: 24px 0;
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--c2-soft);
}
.sf-cart-items::-webkit-scrollbar { width: 6px; }
.sf-cart-items::-webkit-scrollbar-track { background: transparent; }
.sf-cart-items::-webkit-scrollbar-thumb { background: rgba(239, 236, 230, 0.35); }
.sf-cart-items::-webkit-scrollbar-button { display: none; width: 0; height: 0; }
.sf-cart-row { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; }
.sf-cart-row + .sf-cart-row { border-top: 1px solid color-mix(in srgb, var(--c2-paper) 15%, transparent); }
.sf-cart-row img, .sf-cart-row-noimg {
  width: 48px; height: 60px; object-fit: cover; flex-shrink: 0; background: var(--c2-photo);
}
.sf-cart-row-info { flex: 1; min-width: 0; }
.sf-cart-row-title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cart-row-meta { margin: 1px 0 6px; font-size: 11px; color: var(--c2-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sf-cart-row-qty { display: inline-flex; align-items: stretch; height: 24px; border: 1px solid color-mix(in srgb, var(--c2-paper) 40%, transparent); }
.sf-cart-qty-btn {
  width: 24px; padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--c2-paper);
  font-size: 13px; line-height: 1; cursor: pointer;
}
.sf-cart-qty-btn:hover { background: var(--c2-paper); color: var(--c2-ink); }
.sf-cart-qty-value { display: flex; align-items: center; justify-content: center; min-width: 28px; font-size: 11px; font-weight: 700; }
.sf-cart-row-price { flex-shrink: 0; font-size: 12px; font-weight: 700; white-space: nowrap; }

.sf-totals-breakdown {
  flex-shrink: 0; display: flex; flex-direction: column; gap: 6px;
  padding: 16px 20px; border-top: 1px solid color-mix(in srgb, var(--c2-paper) 20%, transparent);
  font-size: 12px;
}
.sf-totals-breakdown:empty { display: none; }
.sf-totals-line { color: var(--c2-soft); text-align: right; }
.sf-totals-divider { width: 100%; border: 0; border-top: 1px solid color-mix(in srgb, var(--c2-paper) 20%, transparent); margin: 4px 0; }
.sf-totals-grand { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; text-align: right; }
/* Inset inside the dark panel (not edge to edge), so it reads as a button
   rather than a strip of page background. */
.sf-totals-panel .sf-btn {
  flex-shrink: 0; width: auto; height: 56px; margin: 4px 20px 20px; border: 0;
  background: var(--c2-paper); color: var(--c2-ink);
}
.sf-totals-panel .sf-btn:hover:not(:disabled) { background: var(--c2-orange); color: var(--c2-paper); }
.sf-totals-panel .sf-btn:disabled { opacity: 0.35; }

@media (max-width: 900px) {
  .sf-totals-panel {
    position: fixed; z-index: 20; left: 0; right: 0; bottom: 0; top: auto;
    height: auto; max-height: none;
    flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px;
    padding: 12px var(--pad);
  }
  /* The header/breakdown wrappers are unwrapped (their children flow in
     the bar's one row); the mini-cart is hidden — the grid's own qty
     steppers are the cart view on a phone. */
  .sf-totals-header, .sf-totals-breakdown { display: contents; }
  .sf-cart-items, .sf-totals-divider, .sf-totals-line { display: none; }
  .sf-totals-grand { font-size: 20px; }
  .sf-totals-panel .sf-btn { width: auto; height: 48px; margin: 0; border: 0; }
}

/* ---------- review + confirmation ---------- */
.sf-band-head {
  display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 var(--pad);
  border-bottom: 1px solid var(--c2-ink);
  font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.sf-table-scroll { overflow-x: auto; border-bottom: 1px solid var(--c2-ink); }
.sf-review-table { width: 100%; border-collapse: collapse; font-size: 13px; line-height: 1.4; }
.sf-review-table th, .sf-review-table td { padding: 12px 14px; text-align: left; vertical-align: top; border-top: 1px solid var(--c2-line); white-space: nowrap; }
.sf-review-table tr > :first-child { padding-left: var(--pad); white-space: normal; min-width: 200px; }
.sf-review-table tr > :last-child { padding-right: var(--pad); }
.sf-review-table th {
  border-top: 0; border-bottom: 1px solid var(--c2-ink);
  background: color-mix(in srgb, var(--c2-ink) 5%, var(--c2-paper));
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
}
.sf-review-table tr:nth-child(2) td { border-top: 0; }
.sf-review-table .num { text-align: right; }
.sf-review-table strong { font-weight: 700; }

.sf-review-bottom { display: grid; border-bottom: 1px solid var(--c2-ink); }
.sf-review-bottom > :empty { display: none; }
@media (min-width: 990px) {
  .sf-review-bottom { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .sf-review-bottom > :empty { display: block; }
  .sf-review-totals { border-left: 1px solid var(--c2-ink); }
}
.sf-address-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sf-address-block { display: flex; flex-direction: column; gap: 0; padding: 20px var(--pad) 24px; font-size: 13px; line-height: 1.7; }
.sf-address-block .sf-eyebrow { margin-bottom: 8px; }
.sf-address-block + .sf-address-block { border-left: 1px solid var(--c2-ink); padding-left: 20px; }
@media (max-width: 989px) { .sf-address-row { border-bottom: 1px solid var(--c2-ink); } }
@media (max-width: 559px) {
  .sf-address-row { grid-template-columns: minmax(0, 1fr); }
  .sf-address-block + .sf-address-block { border-left: 0; border-top: 1px solid var(--c2-ink); padding-left: var(--pad); }
}

.sf-review-totals { display: flex; flex-direction: column; gap: 0; padding: 12px var(--pad) 28px; }
.sf-review-line { display: flex; justify-content: space-between; gap: 16px; padding: 10px 0; font-size: 13px; border-bottom: 1px solid var(--c2-line); }
.sf-review-line span:first-child { color: var(--c2-soft); }
.sf-review-line.grand { align-items: baseline; padding: 16px 0 20px; border-bottom: 0; }
.sf-review-line.grand span:first-child { color: var(--c2-ink); font-size: 11px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
.sf-review-line.grand span:last-child { font-size: 32px; font-weight: 800; line-height: 1; letter-spacing: -0.02em; }
.sf-review-totals .sf-shipping-estimate-note { margin-bottom: 16px; }
.sf-review-totals .sf-actions { margin-top: 0; }
.sf-review-totals .sf-actions .sf-btn { flex: 1 1 auto; }

.sf-confirmation-hero {
  display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
  padding: 48px var(--pad) 40px; border-bottom: 1px solid var(--c2-ink);
}
.sf-confirmation-check {
  display: grid; place-items: center; width: 56px; height: 56px; margin-bottom: 8px;
  background: var(--c2-ink); color: var(--c2-paper); font-size: 24px;
}