/* ===========================================================================
   ShipShopity — the dashboard, shaped like the one sellers already know.
   ===========================================================================

   A seller testing this said it did not work like Shopify, and they were
   right: the bridge wore the marketing site's clothes — heavy borders, hard
   shadows, a row of tabs across the top — which is a good poster and a poor
   working surface. Somebody who runs a shop opens this every morning and knows
   where everything is on the other one.

   The shape here is the same as lucy-commerce/apps/admin, the Shopify-shaped
   admin already in this repository: a quiet left sidebar whose sections open
   only when you are inside them, a thin top bar carrying the shop, and a grey
   page of white cards. The tokens are that admin's, warmed to this brand.

   IT RE-SKINS RATHER THAN REWRITES. Every bridge page already speaks in
   ss-panel, ss-btn, ss-field, ss-stat, ss-row and ss-money, so this file
   restates those inside .ss-admin instead of asking fifteen pages to be
   rewritten. The storefront is untouched: nothing here escapes the dashboard.
   =========================================================================== */

/* The tokens sit on the root, because the body carries the page colour and the
   grid sits on the wrapper inside it. Putting both on one class made the body a
   grid as well, and the work column collapsed to the width of its own text. */
:root {
  --ad-bg: #F6F6F7;
  --ad-surface: #FFFFFF;
  --ad-surface-2: #FAFAFB;
  --ad-border: #E3E3E6;
  --ad-border-strong: #CFCFD4;
  --ad-ink: #17171A;
  --ad-ink-2: #55555E;
  --ad-ink-3: #86868F;
  --ad-accent: #0F2E43;
  --ad-accent-soft: #E9EEF3;
  --ad-warn: #8A5A00;
  --ad-warn-soft: #FDF3E2;
  --ad-danger: #B3261E;
  --ad-good: #1A7F4B;
  --ad-radius: 10px;
  --ad-radius-sm: 7px;
  --ad-shadow: 0 1px 2px rgb(0 0 0 / 6%), 0 4px 12px rgb(0 0 0 / 4%);
  --ad-side: 236px;
}

.ss-admin-page {
  background: var(--ad-bg);
  color: var(--ad-ink);
}

.ss-admin {
  display: grid;
  grid-template-columns: var(--ad-side) 1fr;
  min-height: 100vh;
  background: var(--ad-bg);
  color: var(--ad-ink);
  font-size: 14.5px;
}

/* ── The sidebar ──────────────────────────────────────────────────────── */
/* Sections open only when you are inside one, so the menu stays short. A
   shop owner opens this every morning; eighteen equal links make them read the
   whole list every time to find the two things they came for. */

.ss-side {
  background: var(--ad-surface);
  border-right: 1px solid var(--ad-border);
  padding: 16px 12px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.ss-side__brand {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 2px 8px 0;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: -0.015em;
  color: var(--ad-ink);
  text-decoration: none;
}
.ss-side__brand:hover { text-decoration: none; }
.ss-side__mark {
  width: 26px; height: 26px; border-radius: 7px; flex-shrink: 0;
  background: var(--ss-yellow, #F2B441);
  color: #17171A;
  display: grid; place-items: center;
  font-size: 13px; font-weight: 800;
}

.ss-admin .ss-tabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 0;
  margin: 0;
}
.ss-admin .ss-tabs a {
  display: block;
  padding: 7px 10px;
  margin: 0;
  border: 0;
  border-radius: var(--ad-radius-sm);
  color: var(--ad-ink-2);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
}
.ss-admin .ss-tabs a:hover { background: var(--ad-surface-2); color: var(--ad-ink); }
.ss-admin .ss-tabs a.is-here {
  background: var(--ad-accent-soft);
  color: var(--ad-accent);
  font-weight: 700;
  box-shadow: none;
}

/* The pages inside the section you are in: detail, not peers. Giving them the
   same weight as their parent is how a sidebar becomes a wall. */
.ss-admin .ss-subtabs {
  display: flex;
  flex-direction: column;
  gap: 1px;
  margin: 2px 0 8px 10px;
  padding-left: 12px;
  border-left: 1px solid var(--ad-border);
  font-size: 13.5px;
}
.ss-admin .ss-subtabs a {
  padding: 5px 10px;
  color: var(--ad-ink-3);
  font-weight: 400;
  box-shadow: none;
  text-decoration: none;
}
.ss-admin .ss-subtabs a:hover { color: var(--ad-ink); }
.ss-admin .ss-subtabs a.is-here { color: var(--ad-ink); font-weight: 650; box-shadow: none; }

.ss-side__foot { margin-top: auto; padding: 0 10px; font-size: 12.5px; color: var(--ad-ink-3); }
.ss-side__foot a { color: var(--ad-ink-2); }

/* ── The working area ─────────────────────────────────────────────────── */

.ss-work { min-width: 0; display: flex; flex-direction: column; }

.ss-work__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: 12px 28px;
  background: var(--ad-surface);
  border-bottom: 1px solid var(--ad-border);
  position: sticky;
  top: 0;
  z-index: 10;
  font-size: 13.5px;
}
.ss-work__shop { display: flex; align-items: center; gap: 10px; min-width: 0; }
.ss-work__shop strong { font-weight: 650; }
.ss-work__shop { flex-wrap:wrap; }
.ss-website-status { position:relative; --status-color:#267047; --status-bg:#edf6ef; }
.ss-website-status [data-state="maintenance"],.ss-website-status[data-state="maintenance"] { --status-color:#915800; --status-bg:#fff5df; }
.ss-website-status [data-state="offline"],.ss-website-status[data-state="offline"] { --status-color:#ad3535; --status-bg:#fff0f0; }
.ss-website-status [data-state="online"] { --status-color:#267047; --status-bg:#edf6ef; }
.ss-website-status summary { display:flex; align-items:center; gap:8px; min-height:40px; padding:0 12px; border:1px solid var(--status-color); border-radius:8px; background:var(--status-bg); color:var(--status-color); font-weight:650; cursor:pointer; list-style:none; }
.ss-website-status summary::-webkit-details-marker { display:none; }
.ss-website-status__dot { display:inline-block; width:9px; height:9px; flex:0 0 9px; border-radius:50%; background:var(--status-color); }
.ss-admin .ss-website-status__panel { position:absolute; top:calc(100% + 8px); left:0; width:300px; max-width:calc(100vw - 28px); margin:0; padding:12px; border:1px solid var(--ad-border); border-radius:10px; background:#fff; color:var(--ad-ink); box-shadow:0 8px 28px #16384c26; z-index:20; }
.ss-website-status__panel > strong { display:block; padding:4px 8px 10px; }
.ss-admin .ss-website-status__panel button { display:flex; align-items:center; gap:10px; width:100%; padding:10px 8px; margin:4px 0 0; border:1px solid transparent; border-radius:7px; background:#fff; color:var(--ad-ink); font:inherit; text-align:left; cursor:pointer; }
.ss-admin .ss-website-status__panel button:hover,.ss-admin .ss-website-status__panel button[aria-pressed="true"] { border-color:var(--status-color); background:var(--status-bg); }
.ss-website-status__panel small { display:block; margin-top:3px; color:var(--ad-ink-2); font-size:12px; line-height:1.45; }
.ss-website-status summary:focus-visible,.ss-website-status__panel button:focus-visible { outline:3px solid #e58a29; outline-offset:2px; }
@media(max-width:600px) { .ss-admin .ss-website-status__panel { position:fixed; top:auto; left:14px; margin-top:8px; } }
.ss-work__badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--ad-surface-2);
  border: 1px solid var(--ad-border);
  color: var(--ad-ink-2);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.ss-work__bar a { color: var(--ad-ink-2); text-decoration: none; }
.ss-work__bar a:hover { color: var(--ad-ink); text-decoration: underline; }
.ss-admin .ss-storefront-link { display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:10px 14px; border:1px solid var(--ad-accent); border-radius:8px; background:var(--ad-accent); color:#fff; font-size:14px; font-weight:700; line-height:1.3; text-decoration:none; }
.ss-admin .ss-storefront-link:hover { background:#204b63; color:#fff; text-decoration:none; }
.ss-admin .ss-storefront-link:focus-visible { outline:3px solid #e58a29; outline-offset:3px; }
.ss-admin .ss-storefront-link--side { justify-content:flex-start; }
.ss-storefront-link--side > span:first-of-type { flex:1; min-width:0; overflow-wrap:anywhere; }
.ss-storefront-link--side small { display:block; margin-top:4px; font-size:11px; font-weight:400; }
.ss-storefront-link .ss-nav-icon { flex-shrink:0; }

.ss-admin .ss-bridge {
  padding: 26px 28px 60px;
  max-width: 1180px;
  width: 100%;
}
.ss-admin .ss-bridge > h2,
.ss-admin .ss-bridge > div > h2 { letter-spacing: -0.015em; }

/* ── The surfaces every page already uses ─────────────────────────────── */

.ss-admin .ss-panel,
.ss-admin .ss-empty {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  box-shadow: var(--ad-shadow);
  padding: 18px 20px;
}
.ss-admin .ss-empty { text-align: left; border-style: solid; }
.ss-admin .ss-empty h3 { margin: 0 0 6px; font-size: 1.05rem; }
.ss-admin .ss-empty p { color: var(--ad-ink-2); margin: 0; }

.ss-admin .ss-stats { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.ss-admin .ss-stat {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: var(--ad-radius);
  box-shadow: var(--ad-shadow);
  padding: 15px 17px;
}
.ss-admin .ss-stat__n {
  display: block;
  font-family: inherit;
  font-size: 26px;
  font-weight: 700;
  letter-spacing: -0.02em;
}
.ss-admin .ss-stat__t {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ad-ink-2);
}

.ss-admin .ss-rows { display: grid; gap: 0; }
.ss-admin .ss-row {
  background: var(--ad-surface);
  border: 1px solid var(--ad-border);
  border-radius: 0;
  box-shadow: none;
  margin: 0 0 -1px;
  padding: 14px 18px;
  align-items: center;
}
.ss-admin .ss-rows .ss-row:first-child { border-radius: var(--ad-radius) var(--ad-radius) 0 0; }
.ss-admin .ss-rows .ss-row:last-child  { border-radius: 0 0 var(--ad-radius) var(--ad-radius); margin-bottom: 0; }
.ss-admin .ss-rows .ss-row:only-child  { border-radius: var(--ad-radius); }
.ss-admin .ss-row:hover { background: var(--ad-surface-2); }
.ss-admin .ss-row h3 { font-size: .98rem; margin: 0 0 3px; font-weight: 650; }
.ss-admin .ss-row__meta { color: var(--ad-ink-3); font-size: 13px; margin: 0; }
.ss-admin .ss-row__act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ── Controls ─────────────────────────────────────────────────────────── */

.ss-admin .ss-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--ad-accent);
  border-radius: var(--ad-radius-sm);
  background: var(--ad-accent);
  color: #FFFFFF;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  box-shadow: none;
  transform: none;
  text-decoration: none;
  white-space: nowrap;
}
.ss-admin .ss-btn:hover { filter: brightness(1.12); transform: none; box-shadow: none; }
.ss-admin .ss-btn--quiet {
  background: var(--ad-surface);
  color: var(--ad-ink);
  border-color: var(--ad-border-strong);
}
.ss-admin .ss-btn--quiet:hover { background: var(--ad-surface-2); filter: none; }
.ss-admin .ss-btn--sm { padding: 5px 10px; font-size: 13px; }
.ss-admin .ss-btn:disabled { opacity: .5; }

.ss-admin .ss-field { margin-bottom: 15px; }
.ss-admin .ss-field label { font-size: 13px; font-weight: 600; margin-bottom: 5px; }
.ss-admin .ss-field input,
.ss-admin .ss-field select,
.ss-admin .ss-field textarea,
.ss-admin .ss-pick select,
.ss-admin .ss-pick input,
.ss-admin .ss-filters__search input {
  font: inherit;
  font-size: 14px;
  color: var(--ad-ink);
  background: var(--ad-surface);
  border: 1px solid var(--ad-border-strong);
  border-radius: var(--ad-radius-sm);
  padding: 8px 10px;
  box-shadow: none;
}
.ss-admin .ss-field input:focus,
.ss-admin .ss-field select:focus,
.ss-admin .ss-field textarea:focus {
  border-color: var(--ad-accent);
  outline: 2px solid var(--ad-accent-soft);
  box-shadow: none;
}
.ss-admin .ss-field__hint { color: var(--ad-ink-3); font-size: 12.5px; margin-top: 5px; }
.ss-admin .ss-field__prefix { border-color: var(--ad-border-strong); border-radius: var(--ad-radius-sm); }
.ss-admin .ss-pick { font-size: 12.5px; font-weight: 600; color: var(--ad-ink-2); }

/* ── Tables ───────────────────────────────────────────────────────────── */

.ss-admin table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.ss-admin thead td,
.ss-admin th {
  text-align: left;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ad-ink-2);
  padding: 10px 14px;
  border-bottom: 1px solid var(--ad-border);
  white-space: nowrap;
}
.ss-admin td { padding: 11px 14px; border-bottom: 1px solid var(--ad-border); vertical-align: middle; }
.ss-admin tbody tr:last-child td { border-bottom: none; }
.ss-admin tr.is-total td { font-weight: 700; border-top: 1px solid var(--ad-border-strong); }

/* ── Messages ─────────────────────────────────────────────────────────── */

.ss-admin .ss-notice,
.ss-admin .ss-error {
  border-radius: var(--ad-radius-sm);
  border: 1px solid var(--ad-border);
  padding: 11px 14px;
  font-size: 13.5px;
  box-shadow: none;
}
.ss-admin .ss-notice { background: var(--ad-accent-soft); border-color: #CBD9E4; color: var(--ad-ink); }
.ss-admin .ss-error  { background: #FDECEA; border-color: #F3C9C5; color: var(--ad-danger); }
.ss-admin .ss-notice--warn { background: var(--ad-warn-soft); border-color: #EAD9AE; color: var(--ad-warn); }

.ss-admin .ss-cols { gap: 6px; }
.ss-admin .ss-col {
  border: 1px solid var(--ad-border-strong);
  background: var(--ad-surface);
  color: var(--ad-ink-2);
  font-size: 13px;
  padding: 5px 12px;
}
.ss-admin .ss-col.is-on { background: var(--ad-accent); border-color: var(--ad-accent); color: #FFFFFF; }

/* ── A phone ──────────────────────────────────────────────────────────── */
/* The sidebar becomes a strip above the work, because a drawer that has to be
   opened before a seller can see where they are is a drawer they open twice a
   minute. */

@media (max-width: 900px) {
  .ss-admin { grid-template-columns: 1fr; }
  .ss-side {
    position: static;
    height: auto;
    border-right: 0;
    border-bottom: 1px solid var(--ad-border);
    gap: 10px;
  }
  .ss-admin .ss-tabs { flex-direction: row; flex-wrap: wrap; }
  .ss-admin .ss-subtabs {
    flex-direction: row;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    border-left: 0;
    gap: 4px 10px;
  }
  .ss-side__foot { margin-top: 4px; }
  .ss-work__bar { padding: 10px 16px; }
  .ss-admin .ss-bridge { padding: 18px 16px 48px; }
}

.ss-create-grid { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,1fr); gap:24px; align-items:start; }
.ss-create-prices { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.ss-create-steps { padding-left:20px; margin:24px 0; color:#3d596d; line-height:2.3; }
.ss-create-grid .ss-field { display:block; }
.ss-create-grid form { margin-top:24px; }
@media(max-width:760px) { .ss-create-grid { grid-template-columns:1fr; gap:12px; } }
/* Workspace refinement: a calm navy shell, compact controls and clear hierarchy. */
.ss-admin-page { --ad-ink-3:#626b75; --ad-bg:#f3f4f5; --ad-border:#dde1e5; --ad-radius:12px; --ad-shadow:0 1px 2px #182b3a08; --ss-ink-2:#52606c; --ss-ink-3:#626b75; --ss-line:#dde1e5; }
.ss-admin { font-size:14px; line-height:1.5; }
.ss-admin [hidden] { display:none!important; }
.ss-side { background:#f9fafb; padding:22px 14px 16px; gap:28px; }
.ss-side__brand { color:#16384c; font-size:17px; gap:10px; padding:0 6px; }
.ss-side__logo { flex-shrink:0; }
.ss-brand-orange { color:#c45c1a; }
.ss-admin .ss-tabs > a { display:flex; align-items:center; gap:11px; min-height:40px; margin:2px 0; }
.ss-admin .ss-tabs > a.is-here { background:#e4ebef; box-shadow:inset 3px 0 #16384c; }
.ss-admin .ss-subtabs > .ss-subtabs__templates { display:flex; align-items:center; gap:8px; }
.ss-admin .ss-subtabs > .ss-subtabs__templates:hover { background:#dfe9ee; }
.ss-admin .ss-subtabs > .ss-subtabs__templates.is-here { background:#dce8ee; color:#173b50; box-shadow:inset 3px 0 #16384c; }
.ss-nav-icon { width:19px; height:19px; flex-shrink:0; }
.ss-admin .ss-subtabs { margin-left:20px; padding-left:19px; }
.ss-admin .ss-subtabs a { color:#53606b; padding:6px 10px; }
.ss-admin .ss-subtabs a.is-here { background:#fff; box-shadow:0 1px 3px #16384c12; }
.ss-work__bar { min-height:68px; padding:12px 30px; gap:20px; background:#fff; }
.ss-work__badge { background:#f1f4f6; font-size:11px; }
.ss-admin-search { position:relative; flex:1 1 180px; max-width:390px; }
.ss-admin-search svg { position:absolute; width:18px; height:18px; left:12px; top:11px; color:#62727d; }
.ss-admin-search input { width:100%; border:1px solid #dce2e7; background:#f6f8f9; border-radius:8px; padding:9px 12px 9px 39px; font:inherit; color:#253c4c; }
.ss-sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.ss-menu-toggle { display:none; }
.has-menu-js .ss-menu-toggle { display:block; flex-shrink:0; min-height:44px; padding:7px 10px; border:1px solid #d0d8de; border-radius:7px; background:#fff; color:var(--ad-ink); font:inherit; cursor:pointer; }
.ss-admin.is-menu-collapsed { grid-template-columns:minmax(0,1fr); }
.ss-side.is-collapsed { display:none; }
.ss-menu-close { align-self:flex-end; min-height:40px; border:1px solid #d0d8de; border-radius:7px; padding:7px 12px; background:#fff; font:inherit; }
.ss-admin .ss-bridge { max-width:1536px; padding:30px 32px 64px; margin:0 auto; }
.ss-admin .ss-panel { padding:22px 24px; margin-bottom:20px; }
.ss-admin .ss-panel h2 { line-height:1.35; letter-spacing:-.02em; }
.ss-admin .ss-btn { min-height:36px; border-radius:8px; box-shadow:inset 0 1px #ffffff18,0 1px 2px #132c4010; transition:background .15s,border-color .15s; }
.ss-admin .ss-btn--quiet { color:#243d4f; border-color:#cbd3da; }
.ss-admin :is(a,button,input,select,textarea,summary):focus-visible { outline:3px solid #6597bc; outline-offset:3px; }
.ss-admin input[type=checkbox] { accent-color:#183e55; }
.ss-admin .ss-field input,.ss-admin .ss-field select,.ss-admin .ss-field textarea { min-height:39px; }
.ss-admin .ss-field textarea { resize:vertical; }
.ss-admin .ss-muted { color:#596772; }
.ss-admin .ss-stats { gap:16px; margin-bottom:26px; }
.ss-admin .ss-stat { border-top:3px solid #c2d4df; padding:20px; }
.ss-admin .ss-stat__n { color:#123b52; font-size:30px; font-variant-numeric:tabular-nums; }
.ss-admin .ss-stat__t { margin-top:8px; color:#596772; }
.ss-admin thead th { background:#f6f8f9; text-transform:none; font-size:12px; letter-spacing:0; }
.ss-admin tbody th { text-transform:none; letter-spacing:0; white-space:normal; }
.ss-admin tbody tr:hover { background:#f8fafb; }
.ss-table-scroll { overflow-x:auto; max-width:100%; border-radius:8px; }
.ss-page-heading { display:flex; justify-content:space-between; align-items:center; gap:20px; flex-wrap:wrap; margin-bottom:24px; }
.ss-admin .ss-page-heading h1 { font-size:28px; line-height:1.25; letter-spacing:-.035em; margin:0; color:#17384d; }
.ss-page-heading p { margin:7px 0 0; }
.ss-admin .ss-eyebrow { font-size:10px; font-weight:700; letter-spacing:.14em; color:#866744; margin:0 0 8px; }
.ss-product-filters { display:flex; align-items:end; gap:12px; flex-wrap:wrap; margin-bottom:20px; padding:16px; background:#fff; border:1px solid var(--ad-border); border-radius:12px; }
.ss-product-filters .ss-field { flex:1 1 180px; margin:0; }
.ss-product-filters .ss-muted { padding-bottom:8px; }
.ss-product-jump { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.ss-product-jump a { padding:7px 13px; background:#fff; border:1px solid #d5dfe6; border-radius:7px; color:#36546a; text-decoration:none; font-size:12px; }
.ss-product-jump a:hover { background:#eaf0f4; }
.ss-bridge [id^=product-] { scroll-margin-top:88px; }
.ss-image-actions { display:grid; gap:6px; margin-top:12px; }
.ss-image-actions .ss-field { margin:0; }
.ss-setup-progress { width:100%; height:6px; margin:16px 0 6px; accent-color:#315f72; }
.ss-setup-list { list-style:none; padding:0; margin:18px 0 0; display:grid; gap:10px; }
.ss-setup-item { display:flex; align-items:flex-start; gap:14px; flex-wrap:wrap; padding:14px; border:1px solid var(--ad-border); border-radius:9px; }
.ss-setup-item.is-done { background:#f8faf9; }
.ss-setup-state { font-size:11px; font-weight:650; color:#33566c; border-radius:6px; background:#eaf0f4; padding:4px 8px; }
.ss-setup-item.is-done .ss-setup-state { color:#286047; background:#e7f2eb; }
.ss-pagination,.ss-pagination > div { display:flex; gap:12px; align-items:center; justify-content:space-between; flex-wrap:wrap; }
.ss-pagination { margin-top:26px; color:#596772; font-size:12px; }
.ss-admin .ss-empty .ss-btn { margin-top:16px; }
@media (max-width:1100px) { .ss-work__bar { padding:12px 20px; } .ss-admin .ss-bridge { padding:24px 20px 48px; } }
@media (max-width:900px) {
  .ss-admin { display:flex; flex-direction:column; }
  .ss-side { position:relative; padding:16px; gap:14px; }
  .ss-side.is-collapsed { display:none; }
  .has-menu-js .ss-side { position:fixed; inset:12px 12px auto; max-height:calc(100vh - 24px); max-height:calc(100dvh - 24px); overflow:auto; z-index:60; border:1px solid #cbd3da; border-radius:12px; box-shadow:0 8px 32px #16384c33; }
  .ss-menu-toggle { display:block; padding:7px 10px; border:1px solid #d0d8de; border-radius:7px; background:#fff; font:inherit; }
  .ss-admin .ss-tabs > a { flex:0 0 auto; }
  .ss-admin .ss-subtabs { margin:0; padding:0; width:100%; }
  .ss-admin-search { max-width:none; }
  .ss-work__bar { gap:12px; }
}
@media (max-width:600px) {
  .ss-admin .ss-bridge { padding:22px 14px 40px; }
  .ss-admin .ss-panel { padding:18px 16px; }
  .ss-admin .ss-page-heading h1 { font-size:25px; }
  .ss-admin-search { order:3; flex-basis:100%; }
  .ss-work__bar { position:sticky; top:0; padding:10px 14px; }
  .ss-work__shop { gap:7px; font-size:12px; }
  .ss-admin .ss-stats { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .ss-admin .ss-stat { padding:14px; }
  .ss-admin .ss-stat__n { font-size:24px; }
}
@media (prefers-reduced-motion:reduce) { .ss-admin * { scroll-behavior:auto!important; transition:none!important; } }
.ss-pod-add-variant { display:flex; flex-wrap:wrap; gap:14px; align-items:end; border-top:1px solid var(--ss-line); margin-top:24px; padding-top:20px; }
.ss-pod-add-variant h3 { flex-basis:100%; font-size:16px; margin:0; }
.ss-pod-add-variant .ss-field { margin:0; }
.ss-pod-add-variant input { max-width:150px; }
.ss-art-library-page { padding:24px; border:1px solid #dce3e7; border-radius:12px; background:#fff; }
.ss-library__tools { display:flex; gap:12px; flex-wrap:wrap; margin:18px 0 8px; }
.ss-library__upload { position:relative; display:inline-flex; align-items:center; justify-content:center; padding:11px 16px; border-radius:7px; background:#193d52; color:#fff; font-size:13px; font-weight:700; cursor:pointer; }
.ss-library__upload input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:pointer; }
.ss-library__upload:focus-within { outline:3px solid #72adce; outline-offset:3px; }
.ss-library__search { flex:1; min-width:140px; padding:10px 12px; border:1px solid #c5d2da; border-radius:7px; font:inherit; font-size:13px; }
.ss-library__hint,.ss-library__status { font-size:12px; line-height:1.5; color:#536976; }
.ss-library__status.is-error { color:#a73521; }
.ss-library__grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(180px,1fr)); gap:18px; margin-top:18px; }
.ss-library__card { min-width:0; border:1px solid #d7e0e5; border-radius:9px; overflow:hidden; background:#fff; }
.ss-library__choose { display:block; width:100%; padding:12px; border:0; border-bottom:1px solid #e2e7e9; background:repeating-conic-gradient(#f0f2f3 0% 25%,#fff 0% 50%) 50% / 16px 16px; box-sizing:border-box; }
button.ss-library__choose { cursor:pointer; }
.ss-library__choose img { display:block; width:100%; height:150px; object-fit:contain; }
.ss-library__name { display:block; margin:12px 12px 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:13px; }
.ss-library__size { margin:0 12px; font-size:11px; color:#607682; }
.ss-library__actions { display:flex; flex-wrap:wrap; gap:6px; padding:10px; }
.ss-library__actions button,.ss-library__rename button,.ss-library__pager button { padding:6px 8px; border:1px solid #ccd8df; border-radius:5px; background:#fff; font:inherit; font-size:11px; color:#23495f; cursor:pointer; }
.ss-library__rename { display:flex; flex-wrap:wrap; gap:6px; padding:10px; }
.ss-library__rename input { width:100%; box-sizing:border-box; padding:7px; border:1px solid #adbfca; border-radius:5px; font:inherit; font-size:12px; }
.ss-library__pager { display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:18px; font-size:11px; }
.ss-library__pager[hidden],.ss-library__actions[hidden] { display:none; }
.ws-panel .ss-library__grid { grid-template-columns:minmax(0,1fr); gap:12px; }
.ws-panel .ss-library__tools { flex-direction:column; }
.ws-panel .ss-library__search { width:100%; min-width:0; box-sizing:border-box; }
.ws-library-manage { display:block; margin-top:18px; font-size:12px; }
#ws-open-library { border:0; padding:0; background:none; color:#236188; text-decoration:underline; font:inherit; cursor:pointer; }
/* Background previews remain usable beside ordinary editing and navigation. */
.ss-preview-job { margin: 16px 0; padding: 14px 16px; border: 2px solid var(--ss-line); border-radius: 12px; background: var(--ss-paper, #fff); overflow-wrap: anywhere; }
.ss-preview-job[hidden] { display: none; }
.ss-preview-job p { margin: 0 0 10px; }
.ss-preview-job__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.ss-preview-job__actions .ss-btn { white-space: normal; min-height: 44px; }

/* Action outcomes stay visible regardless of page or panel scrolling. */
.ss-feedback { position:fixed; z-index:100100; right:24px; bottom:24px; width:min(440px,calc(100vw - 32px)); box-sizing:border-box; display:flex; gap:16px; padding:18px 20px; border:2px solid #32627e; border-radius:12px; background:#fff; color:#173a50; box-shadow:0 8px 40px #082c4533; font:14px/1.5 Inter,system-ui,sans-serif; overflow-wrap:anywhere; }
.ss-feedback[hidden] { display:none; }
.ss-feedback > div { flex:1; min-width:0; }
.ss-feedback strong { display:block; font-size:15px; }
.ss-feedback p { margin:5px 0 0; }
.ss-feedback a { display:inline-block; margin-top:10px; color:#154e70; text-decoration:underline; font-weight:700; }
.ss-feedback a[hidden] { display:none; }
.ss-feedback > button { align-self:flex-start; min-width:32px; min-height:32px; border:0; border-radius:5px; background:#edf2f5; color:#173a50; font-size:23px; line-height:1; cursor:pointer; }
.ss-feedback[data-kind="success"] { border-color:#237344; }
.ss-feedback[data-kind="success"] strong { color:#175e35; }
.ss-feedback[data-kind="error"] { border-color:#b33525; }
.ss-feedback[data-kind="error"] strong { color:#a22d20; }
.ss-feedback[data-kind="working"] strong::before { content:''; display:inline-block; width:12px; height:12px; border:2px solid #c5d8e3; border-top-color:#245d7e; border-radius:50%; margin-right:9px; vertical-align:-2px; animation:ss-feedback-spin .8s linear infinite; }
.ss-admin .is-pending { cursor:progress; opacity:.75; }
@keyframes ss-feedback-spin { to { transform:rotate(360deg); } }
@media(max-width:600px) { .ss-feedback { right:16px; bottom:16px; padding:14px; } }
@media(prefers-reduced-motion:reduce) { .ss-feedback[data-kind="working"] strong::before { animation:none; } }
.ss-saved-designs { margin:0 0 24px; padding:22px; border:1px solid #dce3e7; border-radius:12px; background:#fff; }
.ss-saved-designs__list { display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,280px),1fr)); gap:16px; }
.ss-saved-design { padding:16px; border:1px solid #dce3e7; border-radius:9px; }
.ss-saved-design h3 { margin:0 0 6px; font-size:17px; }
.ss-saved-design p { margin:6px 0 12px; }
.ss-saved-design__actions { display:flex; align-items:center; flex-wrap:wrap; gap:10px; }
.ss-saved-design__actions form { margin:0; }
.ss-admin .ss-draft-delete { color:var(--ad-danger); }
.ws-resumed { display:flex; align-items:center; flex-wrap:wrap; gap:8px 18px; margin:8px 0 12px; padding:10px 14px; border-left:3px solid #237344; background:#edf6f0; font-size:13px; }
.ws-resumed a { color:#154e70; font-weight:700; }
.ss-nav-group{width:100%;margin:2px 0}.ss-admin .ss-nav-group>summary{display:flex;align-items:center;gap:11px;min-height:44px;padding:9px 12px;border-radius:7px;font-weight:550;color:#444e56;cursor:pointer;list-style:none;box-sizing:border-box}.ss-nav-group>summary::-webkit-details-marker{display:none}.ss-nav-group>summary>span{margin-left:auto;transition:transform .15s}.ss-nav-group[open]>summary>span{transform:rotate(180deg)}.ss-admin .ss-nav-group[open]>summary{background:#e8eef1;color:#173b50}.ss-admin .ss-nav-group>summary:hover{background:#e5ecef}.ss-nav-group>summary:focus-visible{outline:3px solid #6497b0;outline-offset:2px}.ss-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px}.ss-page-list__row{display:flex;justify-content:space-between;align-items:center;gap:20px;border-top:1px solid #e1e7ea;padding:20px 0}.ss-page-list__row h3{font-size:17px;margin:0 0 5px}.ss-page-list__row p{margin:0;color:#536672;font-size:13px}.ss-status-pill{display:inline-block;font-size:12px;font-weight:600;line-height:1.5;padding:3px 9px;background:#eaf0f3;border:1px solid #d3dfe5;border-radius:20px;color:#264959;white-space:nowrap}.ss-preview-banner{display:flex;gap:6px 20px;flex-wrap:wrap;align-items:center;padding:14px 18px;background:#e9f2f8;border-block:1px solid #c8dce7;color:#22485d;font-size:13px}.ss-preview-banner strong{flex-basis:100%}.ss-preview-banner a{margin-left:auto;font-weight:650;text-decoration:underline}.ss-admin .ss-saved-designs>h2{font-size:21px;margin:0 0 10px}.ss-saved-design{display:grid;grid-template-columns:108px minmax(0,1fr);gap:16px;align-items:start}.ss-saved-design__body{min-width:0}.ss-design-thumb{width:108px;min-height:126px;margin:0;display:grid;place-items:center;background:#f1f4f5;border-radius:7px;overflow:hidden}.ss-design-thumb img{width:108px;height:108px;object-fit:contain}.ss-design-thumb figcaption{font-size:10px;line-height:1.3;text-align:center;color:#526773;padding:4px}.ss-design-thumb__text{padding:12px;max-width:108px;box-sizing:border-box;overflow-wrap:anywhere;font-size:13px;font-weight:650}.ss-admin .ss-saved-design h3{font-size:15px}.ss-admin .ss-saved-design p{font-size:12px}.ss-saved-designs__list{grid-template-columns:repeat(auto-fit,minmax(min(100%,330px),1fr))}.aid-back-pages{display:inline-block;margin-bottom:12px;color:#245b72}.ss-help-context{padding:14px 18px;margin-top:20px;background:#edf3f5;border:1px solid #d4e1e7;border-radius:9px;font-size:13px}.ss-help-context a{font-weight:650}.ss-admin .ss-side__foot{position:static;margin-top:24px}.ss-admin .ss-tabs{display:flex;flex-direction:column}.ss-admin .ss-nav-group .ss-subtabs{width:auto;margin:3px 0 10px 20px;padding-left:14px;display:flex;flex-direction:column}
@media(max-width:600px){.ss-page-list__row{align-items:flex-start;flex-direction:column;gap:12px}.ss-preview-banner a{margin-left:0}.ss-saved-design{grid-template-columns:80px minmax(0,1fr);gap:12px}.ss-design-thumb{width:80px;min-height:98px}.ss-design-thumb img{width:80px;height:80px}}
.ss-design-picker{border:1px solid #d9e2e7;border-radius:10px;margin:16px 0;padding:12px 16px}
.ss-design-picker>summary{cursor:pointer;font-weight:650;padding:4px}
.ss-design-picker[open]>summary{margin-bottom:16px}

/* Launch and task progress, shared by the seller's main workflows. */
.ss-launch{margin-bottom:24px}.ss-launch .ss-page-heading{margin-bottom:16px}.ss-launch h2{margin:0;font-size:1.2rem}.ss-launch-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px;margin:0}.ss-launch-grid>div{border-left:3px solid #dce6eb;padding-left:14px}.ss-launch-grid dt{font-size:12px;color:var(--ss-ink-3);margin-bottom:8px}.ss-launch-grid dd{font-weight:600;margin:0 0 8px;line-height:1.5}.ss-launch-grid a{font-size:13px}.ss-launch>.ss-field__hint{margin-top:20px}
.ss-journey,.ss-creation-options{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:0 0 24px}.ss-journey>a,.ss-creation-options>a{padding:15px 18px;background:white;border:1px solid var(--ss-line);border-radius:9px;color:var(--ss-ink);text-decoration:none}.ss-journey strong,.ss-creation-options strong{display:block}.ss-journey span,.ss-creation-options span{display:block;margin-top:6px;font-size:13px;color:var(--ss-ink-3)}.ss-journey [aria-current]{border-color:#376578;background:#edf5f7}.ss-creation-options{grid-template-columns:repeat(2,minmax(0,1fr));margin:16px 0 0}.ss-shared-sections{display:flex;align-items:center;gap:24px;justify-content:space-between;margin-bottom:20px}.ss-shared-sections h2{font-size:1.1rem;margin:0}.ss-shared-sections p{max-width:720px}.ss-editor-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:12px 0}.ss-editor-toolbar>a,.ss-editor-toolbar>button{padding:8px 12px;border:1px solid var(--ss-line);background:white;border-radius:6px;color:var(--ss-ink);font-size:13px}.ss-editor-toolbar [aria-pressed=true]{background:#173d50;color:white}
.ss-readiness-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;list-style:none;margin:16px 0;padding:0}.ss-readiness-list li{padding:10px 12px;background:#f6f9fa;border-radius:6px}.ss-readiness-list strong{display:block}.ss-readiness-list a{font-size:13px}.ss-save-bar{position:sticky;top:0;z-index:40;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;padding:14px 18px;background:#173d50;color:white;border-radius:8px;margin-bottom:18px}.ss-save-bar[hidden]{display:none}.ss-section-save-state{display:block;color:#8b4b15;font-size:13px;margin:8px 0}.ss-country-picker{max-height:240px;overflow:auto;display:grid;grid-template-columns:repeat(2,minmax(170px,1fr));gap:8px;padding:12px;border:1px solid var(--ss-line);border-radius:7px}.ss-country-picker label{display:flex;gap:8px;align-items:center;font-size:14px}.ss-country-picker input{width:auto!important}.ss-country-picker [hidden]{display:none!important}#create-page,#shipping-rates,#payout-settings,#shop-status{scroll-margin-top:24px}.ss-panel>summary{cursor:pointer;font-weight:600;padding:4px 0}.ss-advanced-product{margin-top:24px}
@media(max-width:1100px){.ss-launch-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.ss-shared-sections{display:block}}
@media(max-width:600px){.ss-journey,.ss-launch-grid,.ss-creation-options,.ss-readiness-list{grid-template-columns:1fr}.ss-country-picker{grid-template-columns:1fr}.ss-save-bar{top:0}.ss-editor-toolbar>a,.ss-editor-toolbar>button{flex:1 1 auto}}
/* Template identity shares the sticky header on every website design screen. */
.ss-template-context{flex:1 0 100%;display:flex;align-items:center;justify-content:space-between;gap:12px;padding-top:12px;border-top:1px solid #dce5e9;min-width:0}
.ss-template-context__names{display:flex;flex-wrap:wrap;gap:6px 24px;min-width:0;color:#526570;font-size:13px}
.ss-template-context__names strong{color:#183e50;overflow-wrap:anywhere}
.ss-template-context__actions{display:flex;align-items:center;gap:8px;flex-shrink:0}
.ss-work__bar .ss-template-context__add{display:inline-flex;align-items:center;padding:9px 13px;border:1px solid #aac0cc;border-radius:7px;background:#edf5f8;color:#183e50;font-weight:650;min-height:40px;box-sizing:border-box;text-decoration:none;white-space:nowrap}
.ss-template-context__add:focus-visible{outline:3px solid #1476cf;outline-offset:3px}
.ss-template-choice{position:relative;flex-shrink:0}
.ss-template-choice>summary{cursor:pointer;padding:9px 13px;border:1px solid #aac0cc;border-radius:7px;background:#edf5f8;color:#183e50;font-weight:650;min-height:40px;box-sizing:border-box}
.ss-template-choice>summary:focus-visible,.ss-template-choice__options>a:focus-visible{outline:3px solid #1476cf;outline-offset:3px}
.ss-template-choice__panel{position:absolute;right:0;top:calc(100% + 8px);width:min(580px,calc(100vw - 40px));max-height:70vh;overflow:auto;box-sizing:border-box;padding:24px;background:white;border:1px solid #cbd9e0;border-radius:12px;box-shadow:0 12px 40px #173d5030;z-index:25}
.ss-template-choice__panel h2{font-size:20px;margin:0 0 8px;color:#183e50}
.ss-template-choice__panel p{font-size:14px;line-height:1.5;margin:0 0 18px;color:#526570}
.ss-template-choice__options{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:18px}
.ss-work__bar .ss-template-choice__options>a{display:block;padding:18px;border:1px solid #bed0d9;border-radius:9px;background:#f6fafb;color:#183e50;text-decoration:none}
.ss-template-choice__options>a:hover{border-color:#287291;background:#edf5f8}
.ss-template-choice__options strong,.ss-template-choice__options span{display:block}
.ss-template-choice__options strong{font-size:16px;margin-bottom:8px}
.ss-template-choice__options span{font-size:13px;line-height:1.5;color:#526570}
@media(max-width:600px){.ss-template-context{align-items:flex-start;flex-wrap:wrap;gap:8px}.ss-template-context__names{flex-direction:column;font-size:12px}.ss-template-context__actions{margin-left:auto}.ss-template-choice>summary,.ss-work__bar .ss-template-context__add{font-size:12px;padding:9px}.ss-template-choice__panel{padding:18px;width:calc(100vw - 32px);max-height:65dvh}.ss-template-choice__options{grid-template-columns:1fr}.ss-template-choice__options>a{padding:14px}}
/* Studios keep page tools and template context in one compact working bar. */
.ss-work__bar.ss-work__bar--studio{min-height:60px;padding:8px 24px;gap:16px;flex-wrap:nowrap}
.ss-work__bar--studio .ss-menu-toggle{width:40px;min-height:40px;padding:6px;font-size:20px}
.ss-work__bar--studio .ss-template-context{flex:1 1 auto;padding:0;border:0;gap:16px}
.ss-work__bar--studio .ss-template-context__names{flex-direction:column;gap:2px;font-size:12px;line-height:1.4}
.ss-work__bar--studio .ss-template-context__names>span:last-child:not(:first-child){order:-1;font-size:14px}
.ss-work__bar--studio .ss-template-context__actions{font-size:14px}
.ss-work__bar--studio .ss-template-context__pages{padding:10px 6px;white-space:nowrap}
.ss-work__bar--studio .ss-template-context__add,.ss-work__bar--studio .ss-template-choice>summary{background:#fff;font-size:14px;padding:9px 12px}
.ss-work__bar--studio .ss-studio-shop-link{flex-shrink:0;font-size:14px;white-space:nowrap;padding:10px 0 10px 16px;border-left:1px solid #dce5e9}
@media(max-width:1100px){.ss-work__bar.ss-work__bar--studio{padding:8px 14px;gap:10px}.ss-work__bar--studio .ss-template-context{gap:10px}.ss-work__bar--studio .ss-template-context__actions{gap:6px}}
@media(max-width:760px){
  .ss-work__bar.ss-work__bar--studio{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:8px 10px}
  .ss-work__bar--studio .ss-template-context{display:contents}
  .ss-work__bar--studio .ss-template-context__names{grid-column:2;grid-row:1}
  .ss-work__bar--studio .ss-template-context__actions{grid-column:1/-1;grid-row:2;margin:0;justify-content:space-between;flex-wrap:wrap}
  .ss-work__bar--studio .ss-studio-shop-link{grid-column:3;grid-row:1;padding-left:8px;border:0}
  .ss-work__bar--studio .ss-template-choice__panel{position:fixed;top:auto;right:14px;margin-top:8px;width:calc(100vw - 28px)}
}
/* Per-page visibility, independent of the website status in the top bar. */
.ss-page-status{display:flex;flex-direction:column;align-items:flex-start;gap:6px;margin:12px 0;max-width:260px}
.ss-page-status__switch{display:inline-flex;align-items:center;gap:10px;border:1px solid #b8c4bb;border-radius:999px;padding:10px 16px;background:#fff;color:#26382e;font:600 14px/1.3 system-ui,sans-serif;cursor:pointer;min-height:44px}
.ss-page-status__track{display:block;width:38px;height:22px;padding:3px;box-sizing:border-box;border-radius:99px;background:#68716b}
.ss-page-status__track:after{content:"";display:block;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .15s}
.ss-page-status__switch[aria-checked="true"] .ss-page-status__track{background:#187844}
.ss-page-status__switch[aria-checked="true"] .ss-page-status__track:after{transform:translateX(16px)}
.ss-page-status__switch:focus-visible{outline:3px solid #1476cf;outline-offset:3px}
.ss-page-status__switch:disabled{opacity:.6;cursor:wait}
.ss-page-status small{font-size:12px;line-height:1.4;color:#59635d}
/* Short, persistent orientation with optional detail for first-time builders. */
.ss-start{max-width:940px;margin:0 auto}
.ss-start p,.ss-start-banner p,.ss-page-destination p{line-height:1.6;color:#526570}
.ss-start h2,.ss-start-banner h2{font-size:21px;line-height:1.3;margin:0 0 10px}
.ss-start-first{border-top:4px solid #245d77}
.ss-start-first>p{max-width:690px}
.ss-start .ss-action-row{display:flex;align-items:center;flex-wrap:wrap;gap:12px;margin-top:20px}
.ss-start-reassurance{font-size:14px}
.ss-start-help{margin-top:22px;font-size:14px;line-height:1.6}
.ss-start-help summary{cursor:pointer;color:#183e50;font-weight:650;padding:6px 0}
.ss-start-help summary:focus-visible{outline:3px solid #1476cf;outline-offset:3px}
.ss-start-help ul{padding-left:20px}.ss-start-help li+li{margin-top:10px}
.ss-start-steps{display:grid;grid-template-columns:1fr 1fr;gap:18px;padding:0;list-style:none;counter-reset:website-step 1;margin:18px 0}
.ss-start-steps>li{counter-increment:website-step;margin:0;min-width:0}
.ss-start-steps h2:before{content:counter(website-step) '. ';color:#245d77}
.ss-start-steps p{font-size:14px;margin-bottom:0}
.ss-start-definitions dt{font-weight:700;margin-top:14px}.ss-start-definitions dd{margin:4px 0 0;color:#526570}
.ss-start-banner{display:flex;align-items:center;justify-content:space-between;gap:24px;border-left:4px solid #245d77;margin-bottom:26px}
.ss-start-banner p{margin:0}.ss-start-banner .ss-eyebrow{margin-bottom:8px}.ss-start-banner>.ss-btn{flex-shrink:0}
.ss-page-destination{border-left:4px solid #245d77;background:#edf5f9;border-radius:8px;padding:18px 20px;margin-bottom:24px;max-width:650px}
.ss-page-destination>strong,.ss-page-destination>span{display:block}.ss-page-destination>strong{font-size:20px;color:#183e50}.ss-page-destination>span{font-size:14px;margin-top:4px;color:#245d77}.ss-page-destination p{font-size:14px;margin:10px 0 0}
#create-page{max-width:820px}#create-page .ss-field{margin:0}#create-page form>.ss-field__hint{margin:0}#create-page form>.ss-btn{justify-self:start;white-space:normal}
#shop-setup{scroll-margin-top:120px}
@media(max-width:650px){.ss-start-steps{grid-template-columns:1fr}.ss-start-banner{align-items:flex-start;flex-direction:column;gap:16px}.ss-start .ss-action-row{align-items:flex-start;flex-direction:column}.ss-page-destination{padding:16px}.ss-start h2,.ss-start-banner h2{font-size:19px}}
