@develemit/commerce-admin 0.6.0 → 0.8.0

package/dist/styles.css

@@ -1,4 +1,31 @@
 .sfa-root {
+  --sfa-accent-soft: var(
+    --sf-color-accent-soft,
+    color-mix(
+      in srgb,
+      var(--sf-color-accent, #1a1a1a) 12%,
+      var(--sf-color-bg, #ffffff)
+    )
+  );
+  --sfa-success: var(--sf-color-success, #1b7a3d);
+  --sfa-success-soft: var(
+    --sf-color-success-soft,
+    color-mix(in srgb, var(--sfa-success) 14%, var(--sf-color-bg, #ffffff))
+  );
+  --sfa-warning: var(--sf-color-warning, #b26a00);
+  --sfa-warning-soft: var(
+    --sf-color-warning-soft,
+    color-mix(in srgb, var(--sfa-warning) 14%, var(--sf-color-bg, #ffffff))
+  );
+  --sfa-shadow-raised: var(
+    --sf-shadow-raised,
+    0 6px 20px color-mix(in srgb, var(--sf-color-fg, #1a1a1a) 14%, transparent)
+  );
+  --sfa-focus: var(--sf-color-focus, var(--sf-color-accent, #1a1a1a));
+  --sfa-radius-sm: min(calc(var(--sf-radius, 4px) * 3), 12px);
+  --sfa-radius-md: min(calc(var(--sf-radius, 4px) * 4), 16px);
+  --sfa-radius-lg: min(calc(var(--sf-radius, 4px) * 5), 22px);
+  --sfa-unit: var(--sf-space-unit, 0.25rem);
   color: var(--sf-color-fg, #1a1a1a);
   background: var(--sf-color-bg, #ffffff);
   font-family: var(--sf-font-body, system-ui, sans-serif);
@@ -9,44 +36,330 @@
   background: var(--sf-color-surface, #f6f6f6);
   padding: calc(var(--sf-space-unit, 0.25rem) * 4);
 }
-.sfa-btn {
-  min-width: 44px;
-  min-height: 44px;
-  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 4);
+.sfa-root :focus-visible {
+  outline: 3px solid var(--sfa-focus);
+  outline-offset: 2px;
+}
+.sfa-btn,
+.sfa-chip {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: calc(var(--sfa-unit) * 2);
+  box-sizing: border-box;
   font: inherit;
-  font-size: 1rem;
+  font-weight: 700;
+  text-decoration: none;
   border: 1px solid var(--sf-color-border, #e0e0e0);
-  border-radius: var(--sf-radius, 4px);
-  background: var(--sf-color-bg, #ffffff);
-  color: inherit;
+  border-radius: 999px;
+  background: var(--sf-color-surface, #f6f6f6);
+  color: var(--sf-color-fg, #1a1a1a);
   cursor: pointer;
 }
+.sfa-btn {
+  min-width: 48px;
+  min-height: 48px;
+  padding: 0 calc(var(--sfa-unit) * 5);
+  font-size: 1rem;
+}
 .sfa-btn--primary {
   background: var(--sf-color-accent, #1a1a1a);
+  border-color: var(--sf-color-accent, #1a1a1a);
   color: var(--sf-color-accent-fg, #ffffff);
 }
+.sfa-btn--ghost {
+  background: transparent;
+  border-color: transparent;
+}
 .sfa-btn--danger {
   background: var(--sf-color-danger, #b00020);
+  border-color: var(--sf-color-danger, #b00020);
   color: #ffffff;
 }
+.sfa-btn:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+/* 44px, not the 40px of the design: admin-tap-targets.spec guards filters. */
+.sfa-chip {
+  min-height: 44px;
+  padding: 0 calc(var(--sfa-unit) * 4);
+  font-size: 0.875rem;
+  white-space: nowrap;
+}
+.sfa-chip[aria-pressed='true'] {
+  background: var(--sf-color-accent, #1a1a1a);
+  border-color: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+}
+.sfa-input,
+.sfa-root
+  :is(input, select, textarea):not(
+    [type='checkbox'],
+    [type='radio'],
+    [type='file'],
+    [type='hidden']
+  ) {
+  box-sizing: border-box;
+  min-height: 52px;
+  padding: 12px 14px;
+  font: inherit;
+  font-size: 1rem;
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #ffffff);
+  color: var(--sf-color-fg, #1a1a1a);
+}
+.sfa-input:focus,
+.sfa-root :is(input, select, textarea):focus {
+  border-color: var(--sf-color-accent, #1a1a1a);
+  outline: none;
+  box-shadow: 0 0 0 3px var(--sfa-accent-soft);
+}
+.sfa-root input[type='checkbox'],
+.sfa-root input[type='radio'] {
+  min-height: 24px;
+}
+.sfa-btn--quiet-danger {
+  background: transparent;
+  border-color: var(--sf-color-danger, #b00020);
+  color: var(--sf-color-danger, #b00020);
+  font-weight: 600;
+}
+.sfa-btn--icon {
+  padding: 0;
+  width: 48px;
+}
 .sfa-layout {
-  display: flex;
-  flex-direction: column;
   min-height: 100vh;
+  padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
 }
-.sfa-nav ul {
-  display: flex;
-  flex-wrap: wrap;
-  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+.sfa-layout__content {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 1120px;
+  margin: 0 auto;
+  padding: calc(var(--sfa-unit) * 4);
+}
+.sfa-sidebar {
+  display: none;
+}
+.sfa-nav ul,
+.sfa-tabbar ul,
+.sfa-more__list {
   margin: 0;
-  padding: calc(var(--sf-space-unit, 0.25rem) * 2);
+  padding: 0;
   list-style: none;
 }
-.sfa-nav__link {
+.sfa-nav__icon {
   display: inline-flex;
+}
+.sfa-nav__badge {
+  min-width: 20px;
+  padding: 0 6px;
+  border-radius: 999px;
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+  font-size: 0.75rem;
+  font-weight: 700;
+  line-height: 20px;
+  text-align: center;
+}
+.sfa-tabbar {
+  position: fixed;
+  inset: auto 0 0 0;
+  z-index: 40;
+  padding-bottom: env(safe-area-inset-bottom, 0px);
+  background: var(--sf-color-bg, #ffffff);
+  border-top: 1px solid var(--sf-color-border, #e0e0e0);
+}
+.sfa-tabbar ul {
+  display: flex;
+}
+.sfa-tabbar li {
+  flex: 1;
+  min-width: 0;
+}
+.sfa-tabbar__item {
+  position: relative;
+  display: flex;
+  flex-direction: column;
   align-items: center;
-  min-height: 44px;
-  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 3);
+  justify-content: center;
+  gap: 2px;
+  width: 100%;
+  min-height: 64px;
+  box-sizing: border-box;
+  padding: 6px 2px;
+  font: inherit;
+  font-size: 0.75rem;
+  font-weight: 700;
+  text-decoration: none;
+  color: var(--sf-color-fg, #1a1a1a);
+  background: transparent;
+  border: 0;
+  cursor: pointer;
+}
+.sfa-tabbar__item .sfa-nav__label {
+  max-width: 100%;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.sfa-tabbar__item .sfa-nav__badge {
+  position: absolute;
+  top: 6px;
+  left: calc(50% + 6px);
+}
+.sfa-nav__badge--dot {
+  min-width: 10px;
+  width: 10px;
+  height: 10px;
+  padding: 0;
+}
+.sfa-tabbar__item.is-current {
+  color: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-tabbar__item.is-current .sfa-nav__icon {
+  padding: 2px 16px;
+  border-radius: 999px;
+  background: var(--sfa-accent-soft);
+}
+.sfa-tabbar__item.is-current .sfa-nav__label {
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.sfa-more .sfa-nav__link.is-current {
+  color: var(--sf-color-accent, #1a1a1a);
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+.sfa-more[hidden] {
+  display: none;
+}
+.sfa-more {
+  position: fixed;
+  inset: auto 0 calc(64px + env(safe-area-inset-bottom, 0px)) 0;
+  z-index: 45;
+  display: grid;
+  gap: calc(var(--sfa-unit) * 3);
+  padding: calc(var(--sfa-unit) * 4);
+  background: var(--sf-color-bg, #ffffff);
+  border-radius: 20px 20px 0 0;
+  box-shadow: var(--sfa-shadow-raised);
+}
+.sfa-more__backdrop {
+  position: fixed;
+  inset: 0;
+  z-index: 42;
+  border: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+.sfa-more .sfa-nav__link {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 3);
+  min-height: 48px;
+  color: inherit;
+  text-decoration: none;
+  font-weight: 700;
+}
+.sfa-page-header {
+  margin-bottom: calc(var(--sfa-unit) * 4);
+}
+.sfa-page-header__row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sfa-unit) * 3);
+}
+.sfa-page-header__title {
+  margin: 0;
+  font-family: var(--sf-font-display, inherit);
+  font-size: 1.75rem;
+  line-height: 1.1;
+  min-width: 0;
+}
+.sfa-page-header__actions {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 2);
+  flex: none;
+}
+.sfa-fab .sfa-btn {
+  position: fixed;
+  right: calc(var(--sfa-unit) * 4);
+  bottom: calc(80px + env(safe-area-inset-bottom, 0px));
+  z-index: 35;
+  box-shadow: var(--sfa-shadow-raised);
+}
+@media (min-width: 900px) {
+  .sfa-layout {
+    display: grid;
+    grid-template-columns: 240px minmax(0, 1fr);
+    align-items: start;
+    padding-bottom: 0;
+  }
+  .sfa-tabbar,
+  .sfa-more,
+  .sfa-more__backdrop {
+    display: none;
+  }
+  .sfa-sidebar {
+    position: sticky;
+    top: 0;
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--sfa-unit) * 6);
+    box-sizing: border-box;
+    height: 100vh;
+    padding: calc(var(--sfa-unit) * 6) calc(var(--sfa-unit) * 4);
+    border-right: 1px solid var(--sf-color-border, #e0e0e0);
+    background: var(--sf-color-surface, #f6f6f6);
+  }
+  .sfa-sidebar .sfa-nav ul {
+    display: grid;
+    gap: calc(var(--sfa-unit) * 1);
+  }
+  .sfa-sidebar .sfa-nav__link {
+    display: flex;
+    align-items: center;
+    gap: calc(var(--sfa-unit) * 3);
+    min-height: 48px;
+    padding: 0 calc(var(--sfa-unit) * 3);
+    border-radius: var(--sf-radius, 8px);
+    color: inherit;
+    text-decoration: none;
+    font-weight: 600;
+  }
+  .sfa-sidebar .sfa-nav__link:hover {
+    background: var(--sfa-accent-soft);
+  }
+  .sfa-sidebar .sfa-nav__link.is-current {
+    background: var(--sfa-accent-soft);
+    color: var(--sf-color-accent, #1a1a1a);
+    font-weight: 800;
+  }
+  .sfa-sidebar .sfa-nav__badge {
+    margin-left: auto;
+  }
+  .sfa-sidebar .sfa-layout__footer {
+    margin-top: auto;
+  }
+  .sfa-layout__content {
+    padding: calc(var(--sfa-unit) * 10) calc(var(--sfa-unit) * 8);
+  }
+  .sfa-page-header__title {
+    font-size: 2rem;
+  }
+  .sfa-fab .sfa-btn {
+    position: static;
+    box-shadow: none;
+  }
+}
+
+.sfa-more__close {
+  justify-self: end;
 }
 /* Bare inline links measure ~22px; hosts cannot restyle kit internals. */
 .sfa-link--tap {
@@ -55,10 +368,6 @@
   min-height: 44px;
   padding: 0 calc(var(--sf-space-unit, 0.25rem) * 2);
 }
-.sfa-layout__content {
-  flex: 1;
-  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
-}
 .sfa-badge {
   display: inline-block;
   padding: 2px 10px;
@@ -115,6 +424,7 @@
   }
 }
 .sfa-notice {
+  scroll-margin-bottom: calc(96px + env(safe-area-inset-bottom, 0px));
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -155,12 +465,6 @@
   gap: calc(var(--sf-space-unit, 0.25rem) * 2);
   margin-top: calc(var(--sf-space-unit, 0.25rem) * 4);
 }
-.sfa-root input,
-.sfa-root select,
-.sfa-root textarea {
-  font-size: 1rem;
-  min-height: 44px;
-}
 .sfa-filter-group {
   display: flex;
   flex-wrap: nowrap;
@@ -172,6 +476,15 @@
   overflow-x: auto;
   overscroll-behavior-x: contain;
   scrollbar-width: none;
+  background:
+    linear-gradient(to right, var(--sf-color-bg, #ffffff) 30%, transparent) left
+      center / 24px 100% no-repeat local,
+    linear-gradient(to left, var(--sf-color-bg, #ffffff) 30%, transparent) right
+      center / 24px 100% no-repeat local,
+    radial-gradient(farthest-side at 0 50%, rgba(0, 0, 0, 0.3), transparent)
+      left center / 14px 100% no-repeat scroll,
+    radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, 0.3), transparent)
+      right center / 14px 100% no-repeat scroll;
 }
 .sfa-filter-group::-webkit-scrollbar {
   display: none;
@@ -180,22 +493,17 @@
   flex-shrink: 0;
   white-space: nowrap;
 }
-.sfa-products__header {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  justify-content: space-between;
-  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
-}
 .sfa-products__toolbar {
   display: flex;
   flex-wrap: wrap;
   gap: calc(var(--sf-space-unit, 0.25rem) * 3);
   margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
 }
-.sfa-filter[aria-pressed='true'] {
-  background: var(--sf-color-accent, #1a1a1a);
-  color: var(--sf-color-accent-fg, #ffffff);
+.sfa-products__toolbar .sfa-filter-group {
+  flex: 1 1 100%;
+}
+.sfa-products__toolbar .sfa-search-toggle {
+  flex: none;
 }
 .sfa-thumb {
   display: inline-flex;
@@ -389,30 +697,1408 @@
   gap: calc(var(--sf-space-unit, 0.25rem) * 3);
   justify-items: start;
 }
-.sfa-rates {
-  list-style: none;
-  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
-  padding: 0;
-  display: grid;
-  gap: calc(var(--sf-space-unit, 0.25rem) * 4);
+
+.sfa-order__section > h2,
+.sfa-order__action > h3 {
+  margin: 0 0 calc(var(--sf-space-unit, 0.25rem) * 2);
+  font-size: 1.125rem;
+  font-weight: 700;
+  line-height: 1.3;
 }
-.sfa-rate {
+.sfa-order__buttons {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-order__section dt {
+  font-size: 0.875rem;
+  opacity: 0.7;
+}
+.sfa-order__section dd {
+  margin: 0 0 calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-order__columns {
+  display: block;
+}
+@media (min-width: 900px) {
+  .sfa-order__columns {
+    display: grid;
+    grid-template-columns: minmax(0, 3fr) minmax(0, 2fr);
+    gap: calc(var(--sf-space-unit, 0.25rem) * 8);
+    align-items: start;
+  }
+}
+.sfa-orders .sfa-table--stacked tbody tr {
+  position: relative;
+}
+.sfa-orders .sfa-table--stacked td:first-child a::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+@media (max-width: 639px) {
+  .sfa-orders .sfa-table--stacked tbody tr {
+    display: grid;
+    grid-template-columns: 1fr auto;
+    gap: calc(var(--sf-space-unit, 0.25rem) * 1)
+      calc(var(--sf-space-unit, 0.25rem) * 3);
+    padding: calc(var(--sf-space-unit, 0.25rem) * 3);
+  }
+  .sfa-orders .sfa-table--stacked td {
+    padding: 0;
+    border: 0;
+  }
+  .sfa-orders .sfa-table--stacked td::before {
+    display: none;
+  }
+  .sfa-orders .sfa-table--stacked td[data-col='items'] {
+    display: none;
+  }
+}
+.sfa-order__action {
+  justify-items: stretch;
+}
+.sfa-order__action .sfa-field,
+.sfa-order__action input {
+  width: 100%;
+  box-sizing: border-box;
+}
+.sfa-order__action .sfa-order__buttons {
+  justify-self: start;
+}
+.sfa-order__refund-btn {
+  justify-self: start;
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-order__actions > * + .sfa-order__refund-btn {
+  padding-top: 0;
+}
+.sfa-link--external {
+  color: var(--sf-color-accent, #1a1a1a);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+  font-weight: 600;
+}
+.sfa-orders__toolbar input[type='search'] {
+  flex: 1 1 12rem;
+  min-width: 0;
+}
+.sfa-link--external::after {
+  content: '↗';
+  margin-left: 0.25em;
+}
+.sfa-grid {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
-  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
-  align-items: end;
-  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
-  border: 1px solid var(--sf-color-border, #d4d4d4);
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: calc(var(--sfa-unit) * 3);
+  margin: 0;
+  padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px));
+  list-style: none;
+}
+.sfa-card {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sfa-unit) * 2);
+  min-width: 0;
+  padding: calc(var(--sfa-unit) * 2);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
   border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #ffffff);
+  transition:
+    transform 0.15s ease,
+    box-shadow 0.15s ease;
 }
-.sfa-rate__active {
+.sfa-card__face {
   display: flex;
-  align-items: center;
-  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  flex-direction: column;
+  gap: calc(var(--sfa-unit) * 1);
 }
-.sfa-rate__actions,
-.sfa-shipping__actions {
+.sfa-card__name::after {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+.sfa-card__photo {
+  position: relative;
+  display: block;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sfa-accent-soft);
+}
+.sfa-card__photo img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sfa-card__nophoto {
+  position: absolute;
+  inset: 0;
   display: flex;
-  flex-wrap: wrap;
-  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  align-items: center;
+  justify-content: center;
+  font-size: 0.875rem;
+  opacity: 0.6;
+}
+.sfa-card__pill {
+  position: absolute;
+  top: calc(var(--sfa-unit) * 2);
+  left: calc(var(--sfa-unit) * 2);
+}
+.sfa-card__pill .sfa-badge {
+  background: var(--sf-color-bg, #ffffff);
+  font-size: 0.75rem;
+  font-weight: 700;
+}
+.sfa-card[data-status='active'] .sfa-badge {
+  background: var(--sfa-success-soft);
+  color: var(--sfa-success);
+  border-color: transparent;
+}
+.sfa-card[data-status='draft'] .sfa-badge {
+  background: var(--sfa-warning-soft);
+  color: var(--sfa-warning);
+  border-color: transparent;
+}
+.sfa-card__star {
+  position: absolute;
+  top: calc(var(--sfa-unit) * 2);
+  right: calc(var(--sfa-unit) * 2);
+  color: var(--sfa-warning);
+  font-size: 1.125rem;
+}
+.sfa-card__name {
+  min-width: 0;
+  padding: 0;
+  border: 0;
+  background: none;
+  appearance: none;
+  font: inherit;
+  font-weight: 700;
+  line-height: 1.3;
+  max-height: 2.6em;
+  cursor: pointer;
+  color: inherit;
+  text-decoration: none;
+  overflow: hidden;
+  text-align: left;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 2;
+  line-clamp: 2;
+  overflow-wrap: anywhere;
+}
+.sfa-card__name:focus-visible {
+  outline: none;
+}
+.sfa-card:has(.sfa-card__name:focus-visible) {
+  outline: 3px solid var(--sfa-focus);
+  outline-offset: 2px;
+}
+.sfa-card__price {
+  text-align: left;
+  font-size: 0.875rem;
+}
+.sfa-card__price.is-missing {
+  color: var(--sfa-warning);
+  font-weight: 600;
+}
+.sfa-card__actions {
+  position: relative;
+  z-index: 1;
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sfa-unit) * 2);
+}
+.sfa-card__actions .sfa-btn {
+  min-height: 44px;
+  padding: 0 calc(var(--sfa-unit) * 3);
+  font-size: 0.875rem;
+}
+.sfa-chip__count {
+  margin-left: calc(var(--sfa-unit) * 2);
+  opacity: 0.7;
+}
+.sfa-banner {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sfa-unit) * 3);
+  margin-bottom: calc(var(--sfa-unit) * 4);
+  padding: calc(var(--sfa-unit) * 3) calc(var(--sfa-unit) * 4);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sfa-warning-soft);
+  color: var(--sfa-warning);
+  font-weight: 600;
+}
+.sfa-search-toggle {
+  display: inline-flex;
+}
+.sfa-search {
+  display: none;
+  flex: 1 1 100%;
+  max-width: 24rem;
+}
+.sfa-search::-webkit-search-cancel-button {
+  appearance: none;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  background: var(--sf-color-fg, #1a1a1a);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3 3l10 10M13 3L3 13' stroke='black' stroke-width='2' stroke-linecap='round'/%3E%3C/svg%3E")
+    center / contain no-repeat;
+}
+.sfa-search.is-open {
+  display: block;
+}
+.sfa-welcome {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sfa-unit) * 6);
+  max-width: 720px;
+}
+.sfa-welcome__hero {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 3);
+  padding: calc(var(--sfa-unit) * 8) calc(var(--sfa-unit) * 4);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sfa-accent-soft);
+  text-align: center;
+}
+.sfa-welcome__art {
+  color: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-welcome__title {
+  margin: 0;
+  font-family: var(--sf-font-display, inherit);
+  font-size: 1.5rem;
+}
+.sfa-welcome__body {
+  margin: 0;
+}
+.sfa-welcome__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: calc(var(--sfa-unit) * 3);
+}
+@media (min-width: 640px) {
+  .sfa-grid {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+@media (min-width: 900px) {
+  .sfa-grid {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    padding-bottom: 0;
+  }
+  .sfa-search-toggle {
+    display: none;
+  }
+  .sfa-search {
+    display: block;
+  }
+  .sfa-card:hover {
+    transform: translateY(calc(-1 * var(--sf-card-hover-lift, 0px)));
+    box-shadow: var(--sf-card-hover-shadow, none);
+  }
+}
+@media (min-width: 1200px) {
+  .sfa-grid {
+    grid-template-columns: repeat(5, minmax(0, 1fr));
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sfa-card {
+    transition: none;
+  }
+}
+.sfa-setup {
+  margin-bottom: calc(var(--sfa-unit) * 4);
+  padding: calc(var(--sfa-unit) * 4);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #ffffff);
+}
+.sfa-setup__head,
+.sfa-setup__pill {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sfa-unit) * 3);
+}
+.sfa-setup__pill {
+  width: 100%;
+  min-height: 44px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  font-weight: 700;
+  cursor: pointer;
+}
+.sfa-setup__title {
+  margin: 0;
+  font-size: 1.125rem;
+}
+.sfa-setup__count {
+  font-size: 0.875rem;
+  font-weight: 700;
+}
+.sfa-setup__bar {
+  height: 8px;
+  margin: calc(var(--sfa-unit) * 3) 0;
+  overflow: hidden;
+  border-radius: 999px;
+  background: var(--sfa-accent-soft);
+}
+.sfa-setup__bar span {
+  display: block;
+  height: 100%;
+  background: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-setup__list {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sfa-unit) * 2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sfa-setup__action {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 3);
+  box-sizing: border-box;
+  width: 100%;
+  min-height: 48px;
+  padding: calc(var(--sfa-unit) * 2);
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  text-decoration: none;
+}
+button.sfa-setup__action,
+a.sfa-setup__action {
+  cursor: pointer;
+}
+.sfa-setup__mark {
+  display: inline-flex;
+  flex: none;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border: 2px solid var(--sf-color-border, #e0e0e0);
+  border-radius: 50%;
+  font-size: 0.875rem;
+}
+.sfa-setup__step.is-done .sfa-setup__mark {
+  background: var(--sfa-success);
+  border-color: var(--sfa-success);
+  color: #ffffff;
+}
+.sfa-setup__step.is-done .sfa-setup__name {
+  text-decoration: line-through;
+  opacity: 0.7;
+}
+.sfa-setup__step.is-locked {
+  opacity: 0.6;
+}
+.sfa-setup__text {
+  display: flex;
+  flex-direction: column;
+}
+.sfa-setup__name {
+  font-weight: 600;
+}
+.sfa-setup__detail {
+  font-size: 0.875rem;
+  opacity: 0.8;
+}
+
+.sfa-setup__chevron {
+  margin-left: auto;
+  font-size: 1.5rem;
+  line-height: 1;
+  color: var(--sf-color-muted, #666666);
+}
+a.sfa-setup__action,
+button.sfa-setup__action {
+  border-radius: var(--sf-radius, 8px);
+  background: var(--sf-color-bg, #ffffff);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+}
+a.sfa-setup__action:hover,
+button.sfa-setup__action:hover {
+  background: var(--sfa-accent-soft);
+}
+a.sfa-setup__action:active,
+button.sfa-setup__action:active {
+  background: var(--sfa-accent-soft);
+  transform: scale(0.99);
+}
+.sfa-sheet-layer {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+}
+.sfa-sheet__scrim {
+  position: absolute;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.4);
+}
+.sfa-sheet {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  max-height: 85vh;
+  overflow-y: auto;
+  padding: calc(var(--sfa-unit) * 4);
+  padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sfa-unit) * 4);
+  border-radius: var(--sfa-radius-sm) var(--sfa-radius-sm) 0 0;
+  background: var(--sf-color-bg, #ffffff);
+  animation: sfa-sheet-up 0.2s ease-out;
+}
+.sfa-sheet__grip {
+  display: block;
+  width: 40px;
+  height: 4px;
+  margin: 0 auto calc(var(--sfa-unit) * 3);
+  border-radius: 2px;
+  background: var(--sf-color-border, #e0e0e0);
+}
+.sfa-sheet__close {
+  position: absolute;
+  top: calc(var(--sfa-unit) * 3);
+  right: calc(var(--sfa-unit) * 3);
+  z-index: 1;
+}
+.sfa-sheet__body {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sfa-unit) * 3);
+}
+.sfa-sheet__photo {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 4 / 3;
+  overflow: hidden;
+  border-radius: var(--sf-radius, 4px);
+  background: var(--sf-color-surface, #f5f5f5);
+}
+.sfa-sheet__photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sfa-sheet__step {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  min-width: 44px;
+  min-height: 44px;
+  border: 0;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.85);
+  cursor: pointer;
+}
+.sfa-sheet__step--prev {
+  left: calc(var(--sfa-unit) * 2);
+}
+.sfa-sheet__step--next {
+  right: calc(var(--sfa-unit) * 2);
+}
+.sfa-sheet__name {
+  margin: 0;
+  font-weight: 800;
+}
+.sfa-sheet__meta {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 3);
+  margin: 0;
+}
+.sfa-sheet__primary {
+  width: 100%;
+  min-height: 48px;
+  text-align: center;
+}
+.sfa-sheet__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sfa-unit) * 2);
+}
+@keyframes sfa-sheet-up {
+  from {
+    transform: translateY(24px);
+    opacity: 0;
+  }
+}
+@keyframes sfa-sheet-in {
+  from {
+    transform: translateX(24px);
+    opacity: 0;
+  }
+}
+@media (min-width: 900px) {
+  .sfa-sheet-layer {
+    pointer-events: none;
+  }
+  .sfa-sheet__scrim {
+    display: none;
+  }
+  .sfa-sheet {
+    left: auto;
+    top: 0;
+    width: 420px;
+    max-height: none;
+    pointer-events: auto;
+    border-radius: 0;
+    border-left: 1px solid var(--sf-color-border, #e0e0e0);
+    animation: sfa-sheet-in 0.2s ease-out;
+  }
+  .sfa-sheet__grip {
+    display: none;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sfa-sheet {
+    animation: none;
+  }
+}
+.sfa-switch {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: calc(var(--sfa-unit) * 3);
+  min-height: 56px;
+  font-weight: 700;
+  cursor: pointer;
+}
+.sfa-root .sfa-switch input {
+  appearance: none;
+  position: relative;
+  flex: none;
+  width: 52px;
+  height: 32px;
+  min-height: 32px;
+  margin: 0;
+  border-radius: 999px;
+  background: var(--sf-color-border, #c8c8c8);
+  cursor: pointer;
+  transition: background var(--sf-motion-duration, 150ms);
+}
+.sfa-switch input::after {
+  content: '';
+  position: absolute;
+  top: 3px;
+  left: 3px;
+  width: 26px;
+  height: 26px;
+  border-radius: 999px;
+  background: #ffffff;
+  box-shadow: 0 1px 3px rgb(0 0 0 / 0.25);
+  transition: transform var(--sf-motion-duration, 150ms);
+}
+.sfa-switch input:checked {
+  background: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-switch input:checked::after {
+  transform: translateX(20px);
+}
+.sfa-flow {
+  display: flex;
+  flex-direction: column;
+  background: var(--sf-color-bg, #ffffff);
+}
+.sfa-flow__head {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 3);
+  padding: calc(var(--sfa-unit) * 2) calc(var(--sfa-unit) * 4);
+}
+.sfa-flow__title {
+  flex: 1;
+  margin: 0;
+  text-align: center;
+  font-size: 1rem;
+  font-weight: 800;
+}
+.sfa-flow__steps ol {
+  display: flex;
+  gap: calc(var(--sfa-unit) * 1.5);
+  margin: 0;
+  padding: 0 calc(var(--sfa-unit) * 5) calc(var(--sfa-unit) * 3);
+  list-style: none;
+}
+.sfa-flow__steps li {
+  flex: 1;
+}
+.sfa-flow__steps button {
+  width: 100%;
+  min-height: 44px;
+  padding: 0;
+  border: 0;
+  background: none;
+  font: inherit;
+  font-size: 0.8125rem;
+  font-weight: 700;
+  text-align: left;
+  color: var(--sf-color-muted, #666666);
+  cursor: pointer;
+}
+.sfa-flow__steps button::before {
+  content: '';
+  display: block;
+  height: 4px;
+  margin-bottom: 6px;
+  border-radius: 999px;
+  background: var(--sfa-accent-soft);
+}
+.sfa-flow__steps button[data-state='done']::before,
+.sfa-flow__steps button[aria-current='step']::before {
+  background: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-flow__steps button[aria-current='step'] {
+  color: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-flow__steps button:disabled {
+  cursor: default;
+}
+.sfa-flow__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: calc(var(--sfa-unit) * 1) calc(var(--sfa-unit) * 5)
+    calc(var(--sfa-unit) * 6);
+}
+.sfa-flow__section {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sfa-unit) * 4);
+  scroll-margin-top: calc(var(--sfa-unit) * 4);
+}
+.sfa-flow__section > h2 {
+  margin: 0;
+  font-family: var(--sf-font-display, inherit);
+  font-size: 1.625rem;
+  line-height: 1.15;
+}
+.sfa-flow__lede {
+  margin: calc(var(--sfa-unit) * -3) 0 0;
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow__foot {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 2.5);
+  padding: calc(var(--sfa-unit) * 3) calc(var(--sfa-unit) * 5)
+    calc(env(safe-area-inset-bottom, 0px) + var(--sfa-unit) * 4);
+  border-top: 1px solid var(--sfa-accent-soft);
+  background: var(--sf-color-bg, #ffffff);
+}
+.sfa-flow__foot-actions .sfa-btn,
+.sfa-flow__desk-actions .sfa-btn {
+  flex: 1;
+  white-space: nowrap;
+}
+.sfa-flow__foot-actions .sfa-btn--primary {
+  flex: 1.4;
+}
+.sfa-flow__saved {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 1.5);
+  margin: 0;
+  font-size: 0.9375rem;
+  font-weight: 700;
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow__saved.is-saved {
+  color: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-flow__saved-check {
+  display: inline-grid;
+  place-items: center;
+  width: 20px;
+  height: 20px;
+  border-radius: 999px;
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+  font-size: 0.75rem;
+}
+.sfa-flow__saved.is-error {
+  gap: calc(var(--sfa-unit) * 3);
+  color: var(--sf-color-danger, #b00020);
+}
+.sfa-flow__hint {
+  flex-basis: 100%;
+  margin: 0;
+  font-size: 0.875rem;
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow__foot-actions {
+  display: flex;
+  flex: 1;
+  gap: calc(var(--sfa-unit) * 2.5);
+}
+.sfa-flow__step-count,
+.sfa-flow__btn-text {
+  display: none;
+}
+.sfa-flow__chips {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sfa-unit) * 2);
+}
+.sfa-flow__price {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sfa-unit) * 2);
+  font-size: 1.75rem;
+  font-weight: 700;
+}
+.sfa-root .sfa-flow__price input {
+  flex: 1;
+  min-width: 0;
+  font-size: 1.75rem;
+  font-weight: 700;
+}
+.sfa-flow__alts {
+  display: flex;
+  flex-direction: column;
+  gap: calc(var(--sfa-unit) * 3);
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.sfa-flow__desk-actions {
+  display: none;
+  gap: calc(var(--sfa-unit) * 2.5);
+}
+@media (max-width: 899px) {
+  .sfa-flow:not(.sfa-flow--done) {
+    position: fixed;
+    inset: 0;
+    z-index: 55;
+  }
+  .sfa-flow__section[data-active='false'] {
+    display: none;
+  }
+}
+@media (min-width: 900px) {
+  .sfa-flow__steps,
+  .sfa-flow__foot-actions,
+  .sfa-flow__foot .sfa-flow__hint {
+    display: none;
+  }
+  .sfa-flow__head {
+    position: sticky;
+    top: 0;
+    z-index: 5;
+    min-height: 64px;
+    border-bottom: 1px solid var(--sfa-accent-soft);
+    background: var(--sf-color-bg, #ffffff);
+  }
+  .sfa-flow__title {
+    flex: none;
+    text-align: left;
+    font-size: 1.125rem;
+  }
+  .sfa-flow__step-count {
+    display: block;
+    flex: 1;
+    margin: 0;
+    font-size: 0.875rem;
+    font-weight: 700;
+    color: var(--sf-color-muted, #666666);
+  }
+  .sfa-flow__btn-text {
+    display: inline;
+    margin-left: calc(var(--sfa-unit) * 1.5);
+    font-weight: 700;
+  }
+  .sfa-flow__section {
+    scroll-margin-top: 88px;
+  }
+  .sfa-flow__foot {
+    position: sticky;
+    bottom: 0;
+    padding-block: calc(var(--sfa-unit) * 2);
+  }
+  .sfa-flow__foot:not(:has(.sfa-flow__saved)) {
+    display: none;
+  }
+  .sfa-flow__body {
+    display: grid;
+    grid-template-columns: minmax(0, 1fr) minmax(280px, 360px);
+    gap: calc(var(--sfa-unit) * 10);
+    align-items: start;
+    overflow: visible;
+  }
+  .sfa-flow__main {
+    display: flex;
+    flex-direction: column;
+    gap: calc(var(--sfa-unit) * 10);
+  }
+  .sfa-flow__aside {
+    position: sticky;
+    top: 88px;
+  }
+  .sfa-flow__desk-actions {
+    display: flex;
+  }
+}
+.sfa-flow__dropzone {
+  display: grid;
+  justify-items: center;
+  gap: calc(var(--sfa-unit) * 1.5);
+  padding: calc(var(--sfa-unit) * 7) calc(var(--sfa-unit) * 4);
+  border: 2px dashed var(--sf-color-border, #c8c8c8);
+  border-radius: var(--sfa-radius-md);
+  background: var(--sf-color-surface, #f6f6f6);
+  color: var(--sf-color-accent, #1a1a1a);
+  text-align: center;
+  cursor: pointer;
+}
+.sfa-flow__dropzone:focus-within {
+  outline: 3px solid var(--sfa-focus);
+  outline-offset: 2px;
+}
+.sfa-flow__dropzone-icon {
+  font-size: 2.5rem;
+  line-height: 1;
+}
+.sfa-flow__dropzone strong {
+  font-size: 1.0625rem;
+}
+.sfa-flow__dropzone small {
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow__thumbs {
+  display: grid;
+  grid-template-columns: repeat(3, 1fr);
+  gap: calc(var(--sfa-unit) * 2.5);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sfa-flow__thumb {
+  position: relative;
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border: 2px solid transparent;
+  border-radius: var(--sfa-radius-sm);
+  background: var(--sf-color-surface, #f6f6f6);
+  font-size: 0.75rem;
+  text-align: center;
+}
+.sfa-flow__thumb.is-cover {
+  border-color: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-flow__thumb-pick {
+  width: 100%;
+  height: 100%;
+  padding: 0;
+  border: 0;
+  background: none;
+  cursor: pointer;
+}
+.sfa-flow__thumb-pick img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sfa-flow__badge {
+  position: absolute;
+  left: 6px;
+  bottom: 6px;
+  padding: 2px 8px;
+  border-radius: 999px;
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+  font-size: 0.6875rem;
+  font-weight: 800;
+}
+.sfa-flow__thumb-remove {
+  position: absolute;
+  top: 2px;
+  right: 2px;
+  width: 44px;
+  height: 44px;
+  border: 0;
+  border-radius: 999px;
+  background: radial-gradient(circle, rgb(0 0 0 / 0.65) 14px, transparent 15px);
+  color: #ffffff;
+  cursor: pointer;
+}
+.sfa-flow__tip {
+  margin: 0;
+  padding: calc(var(--sfa-unit) * 3) calc(var(--sfa-unit) * 3.5);
+  border-radius: var(--sfa-radius-sm);
+  background: var(--sfa-accent-soft);
+  font-size: 0.875rem;
+}
+.sfa-flow__preview {
+  padding: calc(var(--sfa-unit) * 4);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sfa-radius-lg);
+  background: var(--sf-color-surface, #f6f6f6);
+}
+.sfa-flow__preview-label {
+  margin: 0 0 calc(var(--sfa-unit) * 2.5);
+  font-size: 0.75rem;
+  font-weight: 800;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow__card {
+  width: 100%;
+  max-width: 280px;
+  margin-inline: auto;
+}
+.sfa-flow__card-photo {
+  display: grid;
+  place-items: center;
+  aspect-ratio: 1;
+  overflow: hidden;
+  border-radius: var(--sfa-radius-sm);
+  background: var(--sf-color-bg, #ffffff);
+  color: var(--sf-color-muted, #666666);
+  font-size: 0.8125rem;
+}
+.sfa-flow__card-photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sfa-flow__card-name {
+  margin: calc(var(--sfa-unit) * 2) 0 0;
+  font-weight: 700;
+}
+.sfa-flow__card-price {
+  margin: 0;
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow__preview-desc {
+  margin: calc(var(--sfa-unit) * 3) 0 0;
+  font-size: 0.875rem;
+  white-space: pre-line;
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow-success {
+  display: grid;
+  justify-items: center;
+  gap: calc(var(--sfa-unit) * 2.5);
+  padding: calc(var(--sfa-unit) * 10) calc(var(--sfa-unit) * 6);
+  text-align: center;
+}
+.sfa-flow-success__photo {
+  width: 170px;
+  height: 170px;
+  overflow: hidden;
+  border-radius: var(--sfa-radius-lg);
+  background: var(--sf-color-surface, #f6f6f6);
+  box-shadow: var(--sfa-shadow-raised);
+  animation: sfa-pop calc(var(--sf-motion-duration, 150ms) * 3)
+    cubic-bezier(0.34, 1.56, 0.64, 1);
+}
+.sfa-flow-success__photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sfa-flow-success h2 {
+  margin: 0;
+  font-family: var(--sf-font-display, inherit);
+  font-size: 1.625rem;
+}
+.sfa-flow-success p {
+  margin: 0 0 calc(var(--sfa-unit) * 3);
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-flow-success .sfa-btn {
+  width: min(100%, 320px);
+}
+@keyframes sfa-pop {
+  from {
+    transform: scale(0.6) rotate(-6deg);
+    opacity: 0;
+  }
+}
+@media (prefers-reduced-motion: reduce) {
+  .sfa-flow-success__photo {
+    animation: none;
+  }
+  .sfa-switch input,
+  .sfa-switch input::after {
+    transition: none;
+  }
+}
+
+.sfa-flow__thumb--add {
+  border: 2px dashed var(--sf-color-border, #c8c8c8);
+}
+.sfa-flow__dropzone--tile {
+  width: 100%;
+  height: 100%;
+  align-content: center;
+  padding: calc(var(--sfa-unit) * 2);
+  border: 0;
+  border-radius: 0;
+}
+.sfa-flow__dropzone--tile .sfa-flow__dropzone-icon {
+  font-size: 1.75rem;
+}
+.sfa-flow__dropzone--tile strong {
+  font-size: 0.8125rem;
+}
+.sfa-rates {
+  list-style: none;
+  margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
+  padding: 0;
+  display: grid;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 4);
+}
+.sfa-rate {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  align-items: end;
+  padding: calc(var(--sf-space-unit, 0.25rem) * 4);
+  border: 1px solid var(--sf-color-border, #d4d4d4);
+  border-radius: var(--sf-radius, 4px);
+}
+.sfa-rate__active {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-rate__actions,
+.sfa-shipping__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-shipping__feedback {
+  display: grid;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  margin-top: calc(var(--sf-space-unit, 0.25rem) * 3);
+}
+.sfa-rate > .sfa-field:first-child {
+  grid-column: 1 / -1;
+}
+.sfa-rate__money {
+  display: flex;
+  align-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-rate__money input {
+  flex: 1;
+  min-width: 0;
+}
+.sfa-rate__prefix {
+  font-weight: 600;
+}
+.sfa-empty-state {
+  display: grid;
+  justify-items: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 3);
+  max-width: 28rem;
+  margin: calc(var(--sf-space-unit, 0.25rem) * 8) auto;
+  padding: 0 calc(var(--sf-space-unit, 0.25rem) * 4);
+  text-align: center;
+}
+.sfa-empty-state__icon {
+  color: var(--sf-color-muted, #737373);
+}
+.sfa-empty-state__title {
+  margin: 0;
+  font-size: 1.125rem;
+}
+.sfa-empty-state__body {
+  margin: 0;
+  color: var(--sf-color-muted, #737373);
+}
+.sfa-empty-state__action {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+}
+.sfa-empty-state__chips {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: calc(var(--sf-space-unit, 0.25rem) * 2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sfa-batch,
+.sfa-queue {
+  max-width: 720px;
+}
+.sfa-batch__card,
+.sfa-piece {
+  box-sizing: border-box;
+  min-width: 0;
+  display: grid;
+  gap: calc(var(--sfa-unit, 0.25rem) * 4);
+  padding: calc(var(--sfa-unit, 0.25rem) * 5);
+  border: 1px solid var(--sf-color-border, #e0e0e0);
+  border-radius: var(--sf-radius, 12px);
+  background: var(--sf-color-bg, #ffffff);
+}
+.sfa-batch__intro,
+.sfa-batch__result,
+.sfa-batch__progress {
+  display: grid;
+  justify-items: start;
+  gap: calc(var(--sfa-unit, 0.25rem) * 3);
+}
+.sfa-batch__intro h2,
+.sfa-batch__result h2,
+.sfa-piece h2,
+.sfa-piece p {
+  margin: 0;
+}
+.sfa-batch__progress progress,
+.sfa-piece progress {
+  width: 100%;
+}
+.sfa-batch__failed {
+  display: grid;
+  gap: calc(var(--sfa-unit, 0.25rem) * 2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sfa-batch__actions,
+.sfa-piece__actions {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: calc(var(--sfa-unit, 0.25rem) * 2);
+}
+.sfa-piece__count {
+  font-weight: 700;
+}
+.sfa-piece__body {
+  display: grid;
+  gap: calc(var(--sfa-unit, 0.25rem) * 4);
+}
+.sfa-piece__photo {
+  display: grid;
+  place-items: center;
+  min-height: 12rem;
+  overflow: hidden;
+  border-radius: var(--sf-radius, 12px);
+  background: var(--sf-color-surface, #f6f6f6);
+}
+.sfa-piece__photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sfa-piece__fields {
+  display: grid;
+  gap: calc(var(--sfa-unit, 0.25rem) * 4);
+  align-content: start;
+}
+@media (min-width: 900px) {
+  .sfa-piece__body {
+    grid-template-columns: 1fr 1fr;
+    align-items: start;
+  }
+}
+.sfa-summary__list {
+  display: grid;
+  gap: calc(var(--sfa-unit, 0.25rem) * 2);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+.sfa-summary__row {
+  display: grid;
+  grid-template-columns: 56px 1fr auto;
+  align-items: center;
+  gap: calc(var(--sfa-unit, 0.25rem) * 3);
+}
+.sfa-summary__photo {
+  width: 56px;
+  height: 56px;
+  overflow: hidden;
+  border-radius: var(--sf-radius, 8px);
+  background: var(--sf-color-surface, #f6f6f6);
+}
+.sfa-summary__photo img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.sfa-piece > *,
+.sfa-piece__body > *,
+.sfa-piece__fields > * {
+  min-width: 0;
+}
+.sfa-piece__fields input[type='text'] {
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.sfa-dropzone {
+  box-sizing: border-box;
+  display: grid;
+  justify-items: center;
+  gap: calc(var(--sfa-unit, 0.25rem) * 2);
+  width: 100%;
+  padding: calc(var(--sfa-unit, 0.25rem) * 10)
+    calc(var(--sfa-unit, 0.25rem) * 4);
+  border: 2px dashed var(--sf-color-accent, #1a1a1a);
+  border-radius: var(--sf-radius, 12px);
+  background: var(--sfa-accent-soft);
+  text-align: center;
+  cursor: pointer;
+}
+.sfa-dropzone:focus-within {
+  outline: 2px solid var(--sf-color-accent, #1a1a1a);
+  outline-offset: 2px;
+}
+.sfa-dropzone__icon {
+  display: grid;
+  place-items: center;
+  width: 48px;
+  height: 48px;
+  border-radius: 999px;
+  background: var(--sf-color-accent, #1a1a1a);
+  color: var(--sf-color-accent-fg, #ffffff);
+  font-size: 1.75rem;
+}
+.sfa-dropzone__label {
+  font-size: 1.125rem;
+  font-weight: 700;
+}
+.sfa-dropzone__hint {
+  color: var(--sf-color-muted, #666666);
+}
+.sfa-piece__heading {
+  font-family: var(--sf-font-display, inherit);
+  font-size: 1.625rem;
+  line-height: 1.15;
+}
+.sfa-piece progress {
+  height: 8px;
+  appearance: none;
+  border: 0;
+  border-radius: 999px;
+  overflow: hidden;
+  background: var(--sfa-accent-soft);
+  accent-color: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-piece progress::-webkit-progress-bar {
+  background: var(--sfa-accent-soft);
+}
+.sfa-piece progress::-webkit-progress-value {
+  background: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-piece progress::-moz-progress-bar {
+  background: var(--sf-color-accent, #1a1a1a);
+}
+.sfa-piece__foot {
+  position: sticky;
+  bottom: calc(64px + env(safe-area-inset-bottom, 0px));
+  z-index: 5;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: flex-end;
+  gap: calc(var(--sfa-unit, 0.25rem) * 2);
+  margin: 0 calc(var(--sfa-unit, 0.25rem) * -5)
+    calc(var(--sfa-unit, 0.25rem) * -5);
+  padding: calc(var(--sfa-unit, 0.25rem) * 3) calc(var(--sfa-unit, 0.25rem) * 5);
+  border-top: 1px solid var(--sfa-accent-soft);
+  border-radius: 0 0 var(--sf-radius, 12px) var(--sf-radius, 12px);
+  background: var(--sf-color-bg, #ffffff);
+}
+.sfa-piece__foot .sfa-btn {
+  flex: 1;
+  white-space: nowrap;
+}
+.sfa-piece__foot .sfa-btn--primary {
+  flex: 1.4;
+}
+.sfa-piece__photo img {
+  display: block;
+  height: min(40vh, 14rem);
+}
+.sfa-piece--celebrate {
+  justify-items: center;
+  text-align: center;
+}
+.sfa-piece__badge {
+  display: grid;
+  place-items: center;
+  width: 64px;
+  height: 64px;
+  border-radius: 999px;
+  background: var(--sfa-success-soft);
+  color: var(--sfa-success);
+  font-size: 2rem;
+  font-weight: 700;
+}
+.sfa-piece__actions--center {
+  justify-content: center;
+}
+.sfa-summary__list li {
+  min-width: 0;
+}
+.sfa-summary__row--open {
+  box-sizing: border-box;
+  grid-template-columns: 56px 1fr auto auto;
+  width: 100%;
+  min-height: 48px;
+  padding: 0;
+  border: 0;
+  background: none;
+  color: inherit;
+  font: inherit;
+  text-align: left;
+  cursor: pointer;
+}
+.sfa-summary__row--open:hover .sfa-summary__name {
+  text-decoration: underline;
+}
+.sfa-summary__row--open .sfa-summary__price {
+  font-weight: 700;
+  color: var(--sf-color-danger, #b00020);
+}
+.sfa-summary__chevron {
+  font-size: 1.5rem;
+  color: var(--sf-color-muted, #666666);
+}
+@media (min-width: 900px) {
+  .sfa-piece__foot {
+    bottom: 0;
+  }
+  .sfa-piece__photo img {
+    height: auto;
+    max-height: 24rem;
+  }
 }