/* Shout Stool Builder. Takes the theme's fonts and button style. */
.shout-sb { --sb-ink: #1d1d1b; --sb-muted: #77736b; --sb-line: #e4e0d8; --sb-on: #1d1d1b; --sb-bg: #faf8f4; max-width: 1180px; margin: 0 auto; }
.shout-sb__step { margin: 0 0 34px; }
.shout-sb__title { margin: 0 0 14px !important; padding: 0 !important; }
.shout-sb__rail { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; padding: 4px 4px 14px; scrollbar-width: thin; -webkit-overflow-scrolling: touch; }
.shout-sb__item { flex: 0 0 auto; width: 190px; scroll-snap-align: start; appearance: none; -webkit-appearance: none; background: #fff; border: 1px solid var(--sb-line); border-radius: 14px; padding: 10px 10px 12px; cursor: pointer; font: inherit; color: var(--sb-ink); display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center; transition: border-color .15s, box-shadow .15s, opacity .15s, transform .15s; }
.shout-sb__item:hover { border-color: #bdb6a8; transform: translateY(-1px); }
.shout-sb__item:focus { outline: none; }
.shout-sb__item:focus-visible { outline: 2px solid #2457d6; outline-offset: 2px; }
.shout-sb__item.is-on { border-color: var(--sb-on); box-shadow: inset 0 0 0 1px var(--sb-on); }
.shout-sb__item.is-dim { opacity: .4; }
.shout-sb__img { width: 100%; aspect-ratio: 1 / 1; border-radius: 10px; overflow: hidden; background: var(--sb-bg); display: block; }
.shout-sb__img img { width: 100%; height: 100%; object-fit: cover; display: block; margin: 0 !important; }
.shout-sb [data-step="colour"] .shout-sb__item { width: 132px; }
.shout-sb__img--round { border-radius: 50%; }
.shout-sb__img.is-colour { box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .08); }
.shout-sb__label { font-size: .95em; line-height: 1.25; }
.shout-sb__item.is-on .shout-sb__label { font-weight: 600; }
.shout-sb__filters { display: flex; flex-wrap: wrap; gap: 8px; margin: -4px 0 12px; }
.shout-sb__chip { appearance: none; border: 1px solid var(--sb-line); background: #fff; color: var(--sb-ink); border-radius: 99px; padding: 6px 14px; font: inherit; font-size: .88em; cursor: pointer; }
.shout-sb__chip.is-on { background: var(--sb-ink); border-color: var(--sb-ink); color: #fff; }
.shout-sb__preview { margin-top: 10px; }
.shout-sb__card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 34px; align-items: center; background: var(--sb-bg); border-radius: 18px; padding: 26px; transition: opacity .2s; }
.shout-sb__card.is-loading { opacity: .45; }
.shout-sb__pic img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 14px; display: block; background: #fff; margin: 0 !important; }
.shout-sb__sub { margin: 0 0 10px !important; padding: 0 !important; font-size: 1em !important; color: var(--sb-muted); font-weight: 500; }
.shout-sb__chosen { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 4px 28px; margin: 0 0 18px; }
.shout-sb__chosen dt { font-size: .78em; letter-spacing: .06em; text-transform: uppercase; color: var(--sb-muted); }
.shout-sb__chosen dd { margin: 0; font-weight: 600; }
.shout-sb__name { margin: 0 0 6px !important; padding: 0 !important; }
.shout-sb__price { font-size: 1.15em; margin: 0 0 10px; }
.shout-sb__summary { color: var(--sb-ink); margin: 0 0 10px; }
.shout-sb__msg { color: #8a5a00; font-size: .9em; margin: 0 0 12px; min-height: 0; }
.shout-sb__msg:empty { display: none; }
.shout-sb__go { display: inline-block; background: var(--sb-ink); color: #fff !important; border: 0; border-radius: 99px; padding: 12px 26px; text-decoration: none !important; font-weight: 600; letter-spacing: .02em; transition: opacity .15s; }
.shout-sb__go:hover { opacity: .85; }
.shout-sb__go[hidden] { display: none !important; }
@media (max-width: 780px) {
  .shout-sb { padding: 0 14px; }
  .shout-sb__card { grid-template-columns: 1fr; gap: 18px; padding: 16px; }
  .shout-sb__item { width: 150px; }
  .shout-sb [data-step="colour"] .shout-sb__item { width: 104px; }
  .shout-sb__chosen { grid-template-columns: 1fr 1fr 1fr; gap: 4px 12px; }
}