@develemit/commerce-admin 0.7.0 → 0.8.0

package/dist/styles.css

@@ -22,6 +22,9 @@
     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);
@@ -117,6 +120,16 @@
 .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 {
   min-height: 100vh;
   padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
@@ -204,6 +217,23 @@
   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;
 }
@@ -305,6 +335,11 @@
   .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;
   }
@@ -322,6 +357,10 @@
     box-shadow: none;
   }
 }
+
+.sfa-more__close {
+  justify-self: end;
+}
 /* Bare inline links measure ~22px; hosts cannot restyle kit internals. */
 .sfa-link--tap {
   display: inline-flex;
@@ -385,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;
@@ -436,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;
@@ -450,6 +499,12 @@
   gap: calc(var(--sf-space-unit, 0.25rem) * 3);
   margin: calc(var(--sf-space-unit, 0.25rem) * 4) 0;
 }
+.sfa-products__toolbar .sfa-filter-group {
+  flex: 1 1 100%;
+}
+.sfa-products__toolbar .sfa-search-toggle {
+  flex: none;
+}
 .sfa-thumb {
   display: inline-flex;
   align-items: center;
@@ -642,12 +697,102 @@
   gap: calc(var(--sf-space-unit, 0.25rem) * 3);
   justify-items: start;
 }
+
+.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-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(2, minmax(0, 1fr));
   gap: calc(var(--sfa-unit) * 3);
   margin: 0;
-  padding: 0;
+  padding: 0 0 calc(96px + env(safe-area-inset-bottom, 0px));
   list-style: none;
 }
 .sfa-card {
@@ -725,17 +870,35 @@
   font-size: 1.125rem;
 }
 .sfa-card__name {
-  display: block;
   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;
-  font-weight: 700;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+  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 {
@@ -776,7 +939,17 @@
 }
 .sfa-search {
   display: none;
-  flex: 1 1 12rem;
+  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;
@@ -785,8 +958,7 @@
   display: flex;
   flex-direction: column;
   gap: calc(var(--sfa-unit) * 6);
-  max-width: 40rem;
-  margin: 0 auto;
+  max-width: 720px;
 }
 .sfa-welcome__hero {
   display: flex;
@@ -823,6 +995,7 @@
 @media (min-width: 900px) {
   .sfa-grid {
     grid-template-columns: repeat(4, minmax(0, 1fr));
+    padding-bottom: 0;
   }
   .sfa-search-toggle {
     display: none;
@@ -951,6 +1124,28 @@ a.sfa-setup__action {
   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;
@@ -970,8 +1165,7 @@ a.sfa-setup__action {
   overflow-y: auto;
   padding: calc(var(--sfa-unit) * 4);
   padding-bottom: calc(env(safe-area-inset-bottom, 0px) + var(--sfa-unit) * 4);
-  border-radius: calc(var(--sf-radius, 4px) * 3) calc(var(--sf-radius, 4px) * 3)
-    0 0;
+  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;
 }
@@ -1028,6 +1222,7 @@ a.sfa-setup__action {
 }
 .sfa-sheet__name {
   margin: 0;
+  font-weight: 800;
 }
 .sfa-sheet__meta {
   display: flex;
@@ -1207,33 +1402,63 @@ a.sfa-setup__action {
 }
 .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 .sfa-btn,
+.sfa-flow__foot-actions .sfa-btn,
 .sfa-flow__desk-actions .sfa-btn {
   flex: 1;
   white-space: nowrap;
 }
-.sfa-flow__foot .sfa-btn--primary {
+.sfa-flow__foot-actions .sfa-btn--primary {
   flex: 1.4;
 }
 .sfa-flow__saved {
-  margin: calc(var(--sfa-unit) * 2) 0 0;
-  font-size: 0.8125rem;
-  text-align: center;
+  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 {
-  display: flex;
-  align-items: center;
-  justify-content: center;
   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;
@@ -1276,7 +1501,45 @@ a.sfa-setup__action {
 }
 @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 {
@@ -1293,7 +1556,7 @@ a.sfa-setup__action {
   }
   .sfa-flow__aside {
     position: sticky;
-    top: calc(var(--sfa-unit) * 4);
+    top: 88px;
   }
   .sfa-flow__desk-actions {
     display: flex;
@@ -1305,7 +1568,7 @@ a.sfa-setup__action {
   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: calc(var(--sf-radius, 4px) * 4);
+  border-radius: var(--sfa-radius-md);
   background: var(--sf-color-surface, #f6f6f6);
   color: var(--sf-color-accent, #1a1a1a);
   text-align: center;
@@ -1340,7 +1603,7 @@ a.sfa-setup__action {
   aspect-ratio: 1;
   overflow: hidden;
   border: 2px solid transparent;
-  border-radius: calc(var(--sf-radius, 4px) * 3);
+  border-radius: var(--sfa-radius-sm);
   background: var(--sf-color-surface, #f6f6f6);
   font-size: 0.75rem;
   text-align: center;
@@ -1387,14 +1650,14 @@ a.sfa-setup__action {
 .sfa-flow__tip {
   margin: 0;
   padding: calc(var(--sfa-unit) * 3) calc(var(--sfa-unit) * 3.5);
-  border-radius: calc(var(--sf-radius, 4px) * 3);
+  border-radius: var(--sfa-radius-sm);
   background: var(--sfa-accent-soft);
   font-size: 0.875rem;
 }
 .sfa-flow__preview {
-  padding: calc(var(--sfa-unit) * 3.5);
+  padding: calc(var(--sfa-unit) * 4);
   border: 1px solid var(--sf-color-border, #e0e0e0);
-  border-radius: calc(var(--sf-radius, 4px) * 5);
+  border-radius: var(--sfa-radius-lg);
   background: var(--sf-color-surface, #f6f6f6);
 }
 .sfa-flow__preview-label {
@@ -1406,14 +1669,16 @@ a.sfa-setup__action {
   color: var(--sf-color-muted, #666666);
 }
 .sfa-flow__card {
-  width: 60%;
+  width: 100%;
+  max-width: 280px;
+  margin-inline: auto;
 }
 .sfa-flow__card-photo {
   display: grid;
   place-items: center;
   aspect-ratio: 1;
   overflow: hidden;
-  border-radius: calc(var(--sf-radius, 4px) * 3);
+  border-radius: var(--sfa-radius-sm);
   background: var(--sf-color-bg, #ffffff);
   color: var(--sf-color-muted, #666666);
   font-size: 0.8125rem;
@@ -1448,7 +1713,7 @@ a.sfa-setup__action {
   width: 170px;
   height: 170px;
   overflow: hidden;
-  border-radius: calc(var(--sf-radius, 4px) * 7);
+  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)
@@ -1486,6 +1751,24 @@ a.sfa-setup__action {
     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;
@@ -1513,6 +1796,26 @@ a.sfa-setup__action {
   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;
@@ -1550,8 +1853,7 @@ a.sfa-setup__action {
 }
 .sfa-batch,
 .sfa-queue {
-  max-width: 640px;
-  margin-inline: auto;
+  max-width: 720px;
 }
 .sfa-batch__card,
 .sfa-piece {
@@ -1661,3 +1963,142 @@ a.sfa-setup__action {
   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;
+  }
+}