/* ============================================================
   Shopify-pattern layer — PDP, cart drawer, cart page, checkout.

   Loaded AFTER style.css. Adds only new component classes and
   reuses the existing tokens (--bg, --text, --border, --blue…),
   so nothing in style.css needs to change.

   Patterns follow Shopify's conventional storefront layout:
   sticky media gallery + info column on the PDP, a slide-in cart
   drawer, and the two-column checkout with a sticky order summary.
============================================================ */

:root {
  --sf-gutter: 24px;
  --sf-drawer-w: 400px;
  --sf-summary-w: 420px;
  --sf-ease: cubic-bezier(.4, 0, .2, 1);
}

/* ============================================================
   1. PDP — media gallery + sticky info column
============================================================ */

.sf-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
  gap: 64px;
  align-items: start;
  padding: 32px 0 72px;
}

/* ---- Media column ---- */
.sf-gallery { position: sticky; top: 88px; }

/* Plain white media on every product page — the product PNGs are
   transparent cutouts, so a white tile lets them sit cleanly inside the
   border rather than on a grey panel. Border kept for definition. */
.sf-gallery-main {
  position: relative;
  background: #fff;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-l);
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.sf-gallery-main .product-photo,
.sf-gallery-main .art-wrap-inner {
  width: 78% !important;
  height: 78% !important;
  object-fit: contain;
  transition: transform .5s var(--sf-ease);
}

.sf-gallery-main:hover .product-photo { transform: scale(1.04); }

/* Slide track — one .sf-slide per gallery image */
.sf-slides { display: grid; width: 100%; height: 100%; }
.sf-slide {
  grid-area: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity .32s var(--sf-ease);
}
.sf-slide.active { opacity: 1; visibility: visible; }

.sf-gallery-badge {
  position: absolute;
  top: 16px;
  left: 16px;
  background: var(--text);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  padding: 6px 10px;
  border-radius: 100px;
  z-index: 2;
}

/* Prev / next arrows */
.sf-gallery-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .92);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text);
  z-index: 2;
  opacity: 0;
  transition: opacity .2s var(--sf-ease), background .2s;
}
.sf-gallery-main:hover .sf-gallery-nav { opacity: 1; }
.sf-gallery-nav:hover { background: #fff; }
.sf-gallery-nav:disabled { opacity: 0 !important; pointer-events: none; }
.sf-gallery-nav.prev { left: 14px; }
.sf-gallery-nav.next { right: 14px; }

/* Thumbnail rail */
.sf-thumbs {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  overflow-x: auto;
  scrollbar-width: none;
  padding-bottom: 2px;
}
.sf-thumbs::-webkit-scrollbar { display: none; }

.sf-thumb {
  flex: 0 0 78px;
  width: 78px;
  height: 78px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-strong);
  background: #fff;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color .18s, box-shadow .18s;
}
.sf-thumb .product-photo,
.sf-thumb .art-wrap-inner { width: 72% !important; height: 72% !important; object-fit: contain; }
.sf-thumb:hover { border-color: var(--border-strong); }
.sf-thumb.active {
  border-color: var(--text);
  box-shadow: 0 0 0 1px var(--text);
}

/* ---- Info column ---- */
.sf-info { padding-top: 8px; }

.sf-vendor {
  font-size: 13px;
  color: var(--text-dim);
  letter-spacing: .02em;
  margin-bottom: 10px;
}

.sf-title {
  font-size: 40px;
  line-height: 1.08;
  letter-spacing: -.022em;
  font-weight: 600;
  margin-bottom: 12px;
}

.sf-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.sf-price { font-size: 26px; font-weight: 600; letter-spacing: -.01em; }
.sf-price-compare {
  font-size: 17px;
  color: var(--text-faint);
  text-decoration: line-through;
}
.sf-price-save {
  font-size: 12px;
  font-weight: 600;
  color: var(--success);
  background: rgba(26, 157, 84, .10);
  padding: 4px 9px;
  border-radius: 100px;
}
/* Says where the struck-through figure comes from, so "was" is never
   an unexplained number sitting next to the price. */
.sf-price-basis { font-size: 12px; color: var(--text-faint); margin: -2px 0 8px; }
.sf-tax-note { font-size: 13px; color: var(--text-dim); margin-bottom: 26px; }

/* Variant pickers */
.sf-variant { margin-bottom: 24px; }
.sf-variant-label {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 10px;
}
.sf-variant-label .val { font-weight: 400; color: var(--text-dim); }

.sf-swatches { display: flex; flex-wrap: wrap; gap: 10px; }
.sf-swatch {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1px solid var(--border-strong);
  padding: 0;
  position: relative;
  transition: box-shadow .16s var(--sf-ease);
}
.sf-swatch.selected { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); }

.sf-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-pill {
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--text);
  border-radius: var(--radius-s);
  padding: 11px 16px;
  font-size: 14px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color .16s, background .16s, color .16s;
}
.sf-pill:hover { border-color: var(--text-dim); }
.sf-pill.selected {
  border-color: var(--text);
  background: var(--text);
  color: #fff;
}
.sf-pill .delta { font-size: 12px; opacity: .68; }

/* Quantity + actions */
.sf-qty-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }

.sf-stepper {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  height: 48px;
  overflow: hidden;
}
.sf-stepper button {
  width: 44px;
  height: 100%;
  background: none;
  border: none;
  font-size: 17px;
  color: var(--text);
  transition: background .15s;
}
.sf-stepper button:hover:not(:disabled) { background: var(--surface-2); }
.sf-stepper button:disabled { color: var(--text-faint); cursor: not-allowed; }
.sf-stepper .val {
  min-width: 44px;
  text-align: center;
  font-size: 15px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}

.sf-actions { display: grid; gap: 10px; margin-bottom: 26px; }

.sf-btn {
  height: 52px;
  border-radius: var(--radius-s);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  cursor: pointer;
  transition: transform .18s cubic-bezier(.2,.8,.3,1),
              box-shadow .18s cubic-bezier(.2,.8,.3,1),
              background .18s ease,
              border-color .18s ease;
}
.sf-btn:active { transform: translateY(0) scale(.99); transition-duration: .06s; }

.sf-btn-add {
  background: var(--surface);
  color: var(--text);
  border-color: var(--text);
  box-shadow: 0 1px 1px rgba(22, 24, 28, .05), 0 3px 10px rgba(22, 24, 28, .08);
}
.sf-btn-add:hover {
  background: var(--surface-2);
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(22, 24, 28, .07), 0 10px 22px rgba(22, 24, 28, .12);
}
.sf-btn-add:active { box-shadow: 0 1px 2px rgba(22, 24, 28, .08), 0 2px 5px rgba(22, 24, 28, .07); }

/* The primary commit button — the strongest lift on the page, because
   it's the one action every flow is driving toward. */
.sf-btn-buy {
  background: var(--blue);
  color: #fff;
  box-shadow: 0 1px 1px rgba(6, 48, 40, .2), 0 5px 14px rgba(14, 110, 91, .3);
}
.sf-btn-buy:hover {
  background: var(--blue-hover);
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(6, 48, 40, .22), 0 12px 28px rgba(14, 110, 91, .36);
}
.sf-btn-buy:active { box-shadow: 0 1px 2px rgba(6, 48, 40, .26), 0 3px 8px rgba(14, 110, 91, .24); }

.sf-btn-add.added { background: var(--text); color: #fff; border-color: var(--text); }

.sf-btn:disabled,
.sf-btn[disabled] {
  opacity: .5;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* Trust / meta strip */
.sf-meta-list { display: grid; gap: 11px; padding: 20px 0; border-top: 1px solid var(--border); }
.sf-meta-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13.5px;
  color: var(--text-dim);
}
.sf-meta-item svg { flex: 0 0 auto; color: var(--text); }

/* Accordion (description / shipping / returns) */
.sf-accordion { border-top: 1px solid var(--border); }
.sf-acc-item { border-bottom: 1px solid var(--border); }
.sf-acc-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 18px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
}
.sf-acc-icon { transition: transform .24s var(--sf-ease); flex: 0 0 auto; }
.sf-acc-item.open .sf-acc-icon { transform: rotate(45deg); }
.sf-acc-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .28s var(--sf-ease);
}
.sf-acc-item.open .sf-acc-panel { grid-template-rows: 1fr; }
.sf-acc-panel > div { overflow: hidden; }
.sf-acc-panel p {
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--text-dim);
  padding-bottom: 20px;
}

/* ============================================================
   2. Cart drawer — slide-in from the right
============================================================ */

.sf-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .34);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s var(--sf-ease), visibility .3s;
  z-index: 90;
}
.sf-drawer-overlay.open { opacity: 1; visibility: visible; }

.sf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  width: min(var(--sf-drawer-w), 100vw);
  background: var(--bg);
  border-left: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  transform: translateX(100%);
  transition: transform .34s var(--sf-ease);
  z-index: 91;
  display: flex;
  flex-direction: column;
}
.sf-drawer.open { transform: translateX(0); }

.sf-drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px var(--sf-gutter);
  border-bottom: 1px solid var(--border);
  flex: 0 0 auto;
}
.sf-drawer-head h2 { font-size: 17px; font-weight: 600; letter-spacing: -.01em; }
.sf-drawer-close {
  background: none;
  border: none;
  color: var(--text-dim);
  padding: 4px;
  display: flex;
  transition: color .15s;
}
.sf-drawer-close:hover { color: var(--text); }

.sf-drawer-body { flex: 1 1 auto; overflow-y: auto; padding: 8px var(--sf-gutter); }

.sf-drawer-line {
  display: grid;
  grid-template-columns: 72px 1fr auto;
  gap: 14px;
  padding: 18px 0;
  border-bottom: 1px solid var(--border);
}
.sf-drawer-line:last-child { border-bottom: none; }

.sf-line-media {
  width: 72px;
  height: 72px;
  border-radius: var(--radius-s);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sf-line-media .product-photo,
.sf-line-media .art-wrap-inner { width: 76% !important; height: 76% !important; object-fit: contain; }

.sf-line-name { font-size: 14px; font-weight: 600; line-height: 1.35; }
.sf-line-variant { font-size: 12.5px; color: var(--text-dim); margin-top: 3px; }

.sf-stepper-sm { height: 34px; margin-top: 10px; }
.sf-stepper-sm button { width: 32px; font-size: 15px; }
.sf-stepper-sm .val { min-width: 34px; font-size: 13.5px; }

.sf-line-price { font-size: 14px; font-weight: 600; white-space: nowrap; }

.sf-line-remove {
  background: none;
  border: none;
  padding: 0;
  margin-top: 8px;
  font-size: 12.5px;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color .15s;
}
.sf-line-remove:hover { color: var(--danger); }

.sf-drawer-foot {
  flex: 0 0 auto;
  border-top: 1px solid var(--border);
  padding: 20px var(--sf-gutter) 24px;
  background: var(--bg);
}
.sf-drawer-subtotal {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 6px;
}
.sf-drawer-note { font-size: 12.5px; color: var(--text-dim); margin-bottom: 16px; }
.sf-drawer-foot .sf-btn { margin-bottom: 10px; }
.sf-drawer-continue {
  display: block;
  text-align: center;
  font-size: 13.5px;
  color: var(--text-dim);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.sf-drawer-empty { text-align: center; padding: 64px 20px; }
.sf-drawer-empty .icon { font-size: 40px; margin-bottom: 14px; }
.sf-drawer-empty h3 { font-size: 17px; margin-bottom: 6px; }
.sf-drawer-empty p { font-size: 14px; color: var(--text-dim); margin-bottom: 20px; }

/* Free-shipping progress meter */
.sf-ship-meter { padding: 16px 0 4px; }
.sf-ship-meter-text { font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; }
.sf-ship-meter-text strong { color: var(--text); font-weight: 600; }
.sf-ship-bar {
  height: 4px;
  border-radius: 100px;
  background: var(--border);
  overflow: hidden;
}
.sf-ship-bar span {
  display: block;
  height: 100%;
  background: var(--success);
  border-radius: 100px;
  transition: width .45s var(--sf-ease);
}

/* ============================================================
   3. Cart page
============================================================ */

.sf-cart-page { padding: 40px 0 80px; }

.sf-cart-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 32px;
  flex-wrap: wrap;
  gap: 12px;
}
.sf-cart-head h1 { font-size: 36px; letter-spacing: -.02em; font-weight: 600; }

.sf-cart-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sf-summary-w);
  gap: 56px;
  align-items: start;
}

.sf-cart-table-head {
  display: grid;
  grid-template-columns: 1fr 150px 120px;
  gap: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--border);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
}
.sf-cart-table-head span:nth-child(2) { text-align: center; }
.sf-cart-table-head span:nth-child(3) { text-align: right; }

.sf-cart-row {
  display: grid;
  grid-template-columns: 1fr 150px 120px;
  gap: 16px;
  align-items: center;
  padding: 24px 0;
  border-bottom: 1px solid var(--border);
}
.sf-cart-product { display: grid; grid-template-columns: 96px 1fr; gap: 18px; align-items: center; }
.sf-cart-media {
  width: 96px;
  height: 96px;
  border-radius: var(--radius-m);
  background: var(--surface-2);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sf-cart-media .product-photo,
.sf-cart-media .art-wrap-inner { width: 76% !important; height: 76% !important; object-fit: contain; }

.sf-cart-name { font-size: 15.5px; font-weight: 600; }
.sf-cart-name:hover { text-decoration: underline; text-underline-offset: 2px; }
.sf-cart-variant { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.sf-cart-unit { font-size: 13px; color: var(--text-dim); margin-top: 4px; }
.sf-cart-qty { display: flex; justify-content: center; }
.sf-cart-total { text-align: right; font-size: 15.5px; font-weight: 600; }

/* Sticky summary card */
.sf-summary {
  position: sticky;
  top: 88px;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 26px;
}
.sf-summary h2 { font-size: 17px; font-weight: 600; margin-bottom: 20px; }
.sf-summary-row {
  display: flex;
  justify-content: space-between;
  font-size: 14.5px;
  color: var(--text-dim);
  padding: 9px 0;
}
.sf-summary-row .free { color: var(--success); font-weight: 600; }
.sf-summary-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-size: 19px;
  font-weight: 600;
  color: var(--text);
  padding-top: 16px;
  margin-top: 10px;
  border-top: 1px solid var(--border);
}
.sf-summary-note {
  font-size: 12.5px;
  color: var(--text-faint);
  line-height: 1.55;
  margin-top: 14px;
}
.sf-summary .sf-btn { margin-top: 18px; }

/* Discount code */
.sf-discount { display: flex; gap: 8px; margin: 18px 0 4px; }
.sf-discount input {
  flex: 1 1 auto;
  min-width: 0;
  height: 44px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 0 13px;
  font-family: inherit;
  font-size: 14px;
  background: var(--surface);
  color: var(--text);
}
.sf-discount input:focus { outline: none; border-color: var(--text); }
.sf-discount button {
  flex: 0 0 auto;
  height: 44px;
  padding: 0 18px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  transition: background .15s;
}
.sf-discount button:hover { background: var(--surface-2); }
.sf-discount-msg { font-size: 12.5px; margin-top: 8px; }
.sf-discount-msg.ok { color: var(--success); }
.sf-discount-msg.err { color: var(--danger); }

/* ============================================================
   4. Checkout — two column, sticky summary
============================================================ */

/* Centred, not edge-to-edge. The form used to be pushed right with
   margin-left:auto while the summary bled off the right edge, which
   left a wide dead gap down the left of the page. The whole checkout
   now sits in one centred container with the columns balanced inside. */
.sf-checkout-wrap {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--sf-summary-w);
  gap: 48px;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 32px;
  align-items: start;
}

.sf-checkout-main { padding: 40px 0 80px; width: 100%; }

/* A contained panel rather than a full-height bleed — a background that
   stopped mid-page would look like a rendering fault. */
.sf-checkout-aside {
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-m);
  padding: 26px 28px;
  margin-top: 40px;
}
.sf-checkout-aside-inner { position: sticky; top: 40px; max-width: none; }

/* Checkout header / breadcrumb */
.sf-checkout-brand {
  margin-bottom: 18px;
  display: inline-block;
}
.sf-checkout-brand img { height: 28px; width: auto; display: block; }
.sf-breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  margin-bottom: 34px;
}
.sf-breadcrumb a, .sf-breadcrumb span { color: var(--text-faint); }
.sf-breadcrumb .current { color: var(--text); font-weight: 600; }
.sf-breadcrumb .done { color: var(--blue); }
.sf-breadcrumb .done:hover { text-decoration: underline; }
.sf-breadcrumb .sep { color: var(--text-faint); }

/* Sections */
.sf-section { margin-bottom: 34px; }
.sf-section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
  gap: 12px;
}
.sf-section-head h2 { font-size: 18px; font-weight: 600; letter-spacing: -.01em; }
.sf-section-head .hint { font-size: 13px; color: var(--text-dim); }
.sf-section-head .hint a { color: var(--blue); }
.sf-section-head .hint a:hover { text-decoration: underline; }

/* Form grid */
.sf-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.sf-field { position: relative; }
.sf-field.full { grid-column: 1 / -1; }

/* Floating label input */
.sf-field input, .sf-field select {
  width: 100%;
  height: 54px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  padding: 18px 14px 4px;
  transition: border-color .16s, box-shadow .16s;
}
.sf-field select { padding-top: 16px; appearance: none; cursor: pointer; }
.sf-field input::placeholder { color: transparent; }
.sf-field input:focus, .sf-field select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 1px var(--blue);
}

.sf-field label {
  position: absolute;
  left: 14px;
  top: 17px;
  font-size: 15px;
  color: var(--text-faint);
  pointer-events: none;
  transition: transform .16s var(--sf-ease), font-size .16s var(--sf-ease);
  transform-origin: left top;
}
.sf-field input:focus + label,
.sf-field input:not(:placeholder-shown) + label,
.sf-field select:focus + label,
.sf-field select.filled + label {
  transform: translateY(-10px) scale(.74);
  color: var(--text-dim);
}

.sf-field .sf-select-arrow {
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--text-dim);
}

.sf-field .sf-error {
  display: none;
  font-size: 12.5px;
  color: var(--danger);
  margin-top: 6px;
  align-items: center;
  gap: 5px;
}
.sf-field.invalid input, .sf-field.invalid select { border-color: var(--danger); box-shadow: 0 0 0 1px var(--danger); }
.sf-field.invalid .sf-error { display: flex; }

.sf-checkbox {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13.5px;
  color: var(--text-dim);
  margin-top: 14px;
  cursor: pointer;
}
.sf-checkbox input { width: 17px; height: 17px; accent-color: var(--blue); cursor: pointer; }

/* Payment method radio blocks */
.sf-radio-group {
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  overflow: hidden;
}
.sf-radio {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 17px 16px;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background .15s;
}
.sf-radio:last-of-type { border-bottom: none; }
.sf-radio:hover { background: var(--surface-2); }
.sf-radio input { accent-color: var(--blue); width: 17px; height: 17px; cursor: pointer; }
.sf-radio .coin-mark {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
}
.sf-radio .label { font-size: 14.5px; font-weight: 500; flex: 1 1 auto; }
.sf-radio .rate { font-size: 12.5px; color: var(--text-faint); }
.sf-radio.selected { background: rgba(0, 113, 227, .05); }

.sf-radio-panel {
  background: var(--surface-2);
  border-top: 1px solid var(--border);
  padding: 22px 18px;
}

/* Crypto pay panel inside checkout */
.sf-pay-grid { display: grid; grid-template-columns: 172px 1fr; gap: 22px; align-items: start; }
.sf-qr {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sf-pay-field { margin-bottom: 14px; }
.sf-pay-field > label {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-faint);
  margin-bottom: 6px;
}
.sf-amount-due { font-size: 21px; font-weight: 600; letter-spacing: -.01em; }
.sf-amount-fiat { display: block; font-size: 12.5px; color: var(--text-dim); font-weight: 400; margin-top: 3px; }

.sf-addr-row { display: flex; gap: 8px; align-items: stretch; }
.sf-addr {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: 12.5px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 10px 12px;
  word-break: break-all;
  line-height: 1.45;
}
.sf-copy {
  flex: 0 0 auto;
  padding: 0 14px;
  border-radius: var(--radius-s);
  border: 1px solid var(--border-strong);
  background: var(--surface);
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  transition: background .15s, color .15s, border-color .15s;
}
.sf-copy:hover { background: var(--surface-2); }
.sf-copy.copied { background: var(--success); border-color: var(--success); color: #fff; }

.sf-countdown-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.sf-countdown-row .lbl { font-size: 12.5px; color: var(--text-dim); }
.sf-countdown { font-family: var(--font-mono); font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sf-countdown.low { color: var(--danger); }

.sf-status {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 13px;
  color: var(--text-dim);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  margin-top: 4px;
}
.sf-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--warn);
  flex: 0 0 auto;
  animation: sf-pulse 1.6s infinite;
}
.sf-status-dot.confirmed { background: var(--success); animation: none; }
@keyframes sf-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* Demo-mode warning banner — shown when no real payment processor is wired */
/* ---------- Bitcoin payment step ---------- */
.sf-pay-header {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 15px 16px;
  font-size: 14px;
  color: var(--text);
  border-bottom: 1px solid var(--border);
}

/* The QR must sit on white with its quiet zone intact — scanners rely
   on the light margin, so no cropping or coloured backing here. */
.sf-qr {
  width: 176px;
  height: 176px;
  padding: 8px;
}
.sf-qr img { width: 100%; height: 100%; display: block; image-rendering: pixelated; }
.sf-qr-missing {
  font-size: 12px;
  color: var(--text-dim);
  text-align: center;
  padding: 20px 8px;
  line-height: 1.5;
}
.sf-wallet-link {
  display: block;
  margin-top: 10px;
  width: 176px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  color: var(--blue);
  padding: 8px 0;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
}
.sf-wallet-link {
  box-shadow: 0 1px 1px rgba(22, 24, 28, .04), 0 2px 8px rgba(22, 24, 28, .07);
  transition: transform .18s cubic-bezier(.2,.8,.3,1), box-shadow .18s, border-color .18s;
}
.sf-wallet-link:hover {
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(22, 24, 28, .06), 0 8px 18px rgba(14, 110, 91, .16);
}
.sf-wallet-link:active { transform: translateY(0) scale(.99); }

/* Once we know nothing handled the link, stop it looking clickable. */
.sf-wallet-link.is-inert {
  color: var(--text-faint);
  border-color: var(--border);
  box-shadow: none;
  pointer-events: none;
}

/* ---------- 3-coin selector ---------- */
.sf-coin-lead { font-size: 13.5px; color: var(--text-dim); margin: 4px 0 14px; }
.sf-coin-list { display: grid; gap: 10px; }
.sf-coin-opt {
  display: flex;
  align-items: center;
  gap: 13px;
  width: 100%;
  text-align: left;
  padding: 15px 16px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-m);
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.sf-coin-opt:hover {
  border-color: var(--text);
  transform: translateY(-1px);
  box-shadow: 0 2px 3px rgba(22,24,28,.05), 0 8px 18px rgba(22,24,28,.08);
}
.sf-coin-mark {
  width: 38px; height: 38px; flex: 0 0 auto;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 16px;
}
/* Coin brand logos in the selector (trial). Fixed height, auto width,
   so the three wordmarks line up regardless of their proportions. */
.sf-coin-logo { height: 26px; width: auto; flex: 0 0 auto; display: block; }
.sf-coin-logo-sm { height: 22px; }
.sf-coin-meta { display: flex; flex-direction: column; gap: 2px; }
.sf-coin-name { font-size: 15px; font-weight: 600; color: var(--text); }
.sf-coin-net { font-size: 12px; color: var(--text-faint); }

/* ---------- Selected-coin payment panel ---------- */
.sf-pay-loading { display: flex; align-items: center; gap: 10px; font-size: 13.5px; color: var(--text-dim); padding: 8px 0; }
.sf-pay-head {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: 14px;
  color: var(--text);
  margin-bottom: 12px;
}
.sf-pay-head .sf-coin-mark { width: 30px; height: 30px; font-size: 13px; }
.sf-pay-head .sf-inline-btn { margin-left: auto; }

/* Network warning — the one thing that loses funds if ignored. */
.sf-net-warning {
  background: rgba(154, 91, 18, .08);
  border: 1px solid rgba(154, 91, 18, .28);
  color: var(--warn);
  border-radius: var(--radius-s);
  padding: 10px 13px;
  font-size: 12.5px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.sf-amount-row { display: flex; align-items: center; gap: 8px; }
.sf-amount-row .sf-amount-due { flex: 1; min-width: 0; word-break: break-all; }

/* ---------- Report payment ---------- */
.sf-report { margin-top: 20px; border-top: 1px solid var(--border); padding-top: 18px; }
.sf-report-label { display: block; font-size: 12.5px; color: var(--text-dim); margin-bottom: 8px; }
.sf-txid {
  width: 100%;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-s);
  padding: 11px 13px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
  margin-bottom: 12px;
  background: var(--surface);
}
.sf-txid:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(14,110,91,.12); }
.sf-report-note { font-size: 12px; line-height: 1.55; color: var(--text-dim); margin-top: 10px; }
.sf-report-note.err { color: var(--danger); }

/* ---------- Notice banner (replaces demo banner) ---------- */
.sf-notice-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: var(--surface-2);
  border: 1px solid var(--border);
  border-radius: var(--radius-s);
  padding: 12px 14px;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--text-dim);
  margin-bottom: 22px;
}
.sf-notice-banner span:first-child { color: var(--blue); font-weight: 700; }
.sf-wallet-hint {
  width: 176px;
  margin-top: 8px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--text-dim);
}

/* Confirmation progress. The data (confirmations / required) already
   comes back from the status endpoint; this gives it somewhere to go. */
.sf-confirm-bar {
  height: 4px;
  border-radius: 2px;
  background: var(--border);
  overflow: hidden;
  margin-top: 10px;
}
.sf-confirm-fill {
  display: block;
  height: 100%;
  width: 0;
  background: var(--blue);
  transition: width .4s ease;
}

/* Status variants. Previously only a default and .confirmed existed, so
   underpaid and expired looked identical to "waiting". */
.sf-status--seen      { border-color: rgba(0, 113, 227, .35); }
.sf-status--underpaid { border-color: rgba(179, 57, 47, .4); background: rgba(179, 57, 47, .05); }
.sf-status--expired   { border-color: rgba(154, 91, 18, .4); background: rgba(154, 91, 18, .05); }
.sf-status--error     { border-color: rgba(154, 91, 18, .4); background: rgba(154, 91, 18, .05); }
.sf-status--confirmed { border-color: rgba(14, 110, 91, .4); background: rgba(14, 110, 91, .05); }
.sf-status--underpaid .sf-status-dot { background: var(--danger); }
.sf-status--expired .sf-status-dot,
.sf-status--error .sf-status-dot { background: var(--warn); animation: none; }

.sf-inline-btn {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  color: var(--blue);
  text-decoration: underline;
  cursor: pointer;
}

@media (max-width: 620px) {
  .sf-pay-grid { grid-template-columns: 1fr; }
  .sf-qr, .sf-wallet-link { margin-left: auto; margin-right: auto; }
}

/* Error banner — distinct from the demo notice, which is a different
   message with a different meaning. */
.sf-error-banner {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(179, 57, 47, .07);
  border: 1px solid rgba(179, 57, 47, .3);
  border-radius: var(--radius-s);
  padding: 13px 15px;
  font-size: 13px;
  line-height: 1.55;
  color: var(--danger);
}

.sf-demo-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: rgba(178, 94, 0, .08);
  border: 1px solid rgba(178, 94, 0, .30);
  border-radius: var(--radius-s);
  padding: 13px 15px;
  margin-bottom: 22px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--warn);
}
.sf-demo-banner strong { display: block; margin-bottom: 2px; }

/* Checkout footer nav */
.sf-checkout-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}
.sf-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  color: var(--blue);
}
.sf-back-link:hover { text-decoration: underline; }
.sf-checkout-nav .sf-btn { width: auto; min-width: 210px; padding: 0 26px; }

.sf-policy-links {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid var(--border);
  font-size: 12.5px;
}
.sf-policy-links a { color: var(--blue); }
.sf-policy-links a:hover { text-decoration: underline; }

/* Order summary lines in checkout aside */
.sf-osum-line { display: grid; grid-template-columns: 64px 1fr auto; gap: 13px; align-items: center; padding: 11px 0; }
.sf-osum-media {
  position: relative;
  width: 64px;
  height: 64px;
  border-radius: var(--radius-s);
  background: var(--surface);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.sf-osum-media .product-photo,
.sf-osum-media .art-wrap-inner { width: 74% !important; height: 74% !important; object-fit: contain; }
.sf-osum-qty {
  position: absolute;
  top: -7px;
  right: -7px;
  min-width: 21px;
  height: 21px;
  border-radius: 50%;
  background: var(--text-dim);
  color: #fff;
  font-size: 11.5px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 5px;
  z-index: 1;
}
.sf-osum-name { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.sf-osum-variant { font-size: 12px; color: var(--text-dim); margin-top: 2px; }
.sf-osum-price { font-size: 13.5px; font-weight: 600; white-space: nowrap; }

/* Shown only while the order holds more than two lines, and only on the
   information step — see canRemoveLines() in js/checkout.js. */
.sf-osum-remove {
  margin-top: 5px;
  padding: 2px 0;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 12px;
  color: var(--text-faint);
  text-decoration: underline;
  text-underline-offset: 2px;
  cursor: pointer;
  transition: color .15s;
}
.sf-osum-remove:hover { color: var(--danger); }
.sf-osum-remove:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; }

.sf-osum-divider { border: none; border-top: 1px solid var(--border); margin: 16px 0; }

/* ============================================================
   5. Responsive
============================================================ */

@media (max-width: 1080px) {
  .sf-pdp { grid-template-columns: 1fr; gap: 40px; }
  .sf-gallery { position: static; }
  .sf-title { font-size: 32px; }

  .sf-cart-layout { grid-template-columns: 1fr; gap: 36px; }
  .sf-summary { position: static; }

  /* Single column: summary first so the customer sees what they're
     paying for before the form. */
  .sf-checkout-wrap {
    grid-template-columns: 1fr;
    gap: 0;
    max-width: 640px;
    padding: 0 var(--sf-gutter);
  }
  .sf-checkout-main { padding: 28px 0 60px; order: 2; }
  .sf-checkout-aside {
    order: 1;
    margin-top: 28px;
    padding: 22px 20px;
  }
  .sf-checkout-aside-inner { position: static; }
}

@media (max-width: 720px) {
  .sf-title { font-size: 27px; }
  .sf-price { font-size: 22px; }

  .sf-cart-table-head { display: none; }
  .sf-cart-row { grid-template-columns: 1fr auto; gap: 12px 16px; }
  .sf-cart-product { grid-column: 1 / -1; grid-template-columns: 76px 1fr; gap: 14px; }
  .sf-cart-media { width: 76px; height: 76px; }
  .sf-cart-qty { justify-content: flex-start; }
  .sf-cart-total { text-align: right; }

  .sf-field-grid { grid-template-columns: 1fr; }
  .sf-pay-grid { grid-template-columns: 1fr; }
  .sf-qr { justify-self: center; }
  .sf-checkout-nav { flex-direction: column-reverse; align-items: stretch; }
  .sf-checkout-nav .sf-btn { width: 100%; }
  .sf-back-link { justify-content: center; }
  .sf-drawer { --sf-drawer-w: 100vw; }
}