/* Shopify, Mix B: the build the founder approved on 18 Oct 2026 (Figma "Web 2026-10 Merchants", Mix B: shopify 1440
 * and 390), on the approved Setup page's parts (setup.css: hero, kicker and heading type, bands, models, questions,
 * dark closing band). This file adds only what Shopify has and Setup does not: the storefront model beside the
 * numbered steps, the short list with the deal-ticket model level with the key-value card, the install band's
 * layout, and the shopkeeper doodle under the questions intro.
 * Loaded after setup.css, before company-theme.css.
 */

/* ---------- hero: the copy column at the design's 600 px, so the title breaks after "for" as drawn ---------- */
.ls .shp-hero .su-hero-row { grid-template-columns: minmax(0, 600px) minmax(0, 1fr); }
.ls .shp-hero .su-title { text-wrap: wrap; }

/* ---------- steps: the storefront model left, heading and numbered steps right ---------- */
.ls .shp-steps-row { display: grid; grid-template-columns: 420px minmax(0, 1fr); gap: 0 72px; align-items: center; }
.ls .shp-model-box--store { height: 380px; }
.ls .shp-model-box--store .su-model { width: 340px; }
.ls .shp-steps-col { display: flex; flex-direction: column; gap: 32px; }
.ls .shp-steps-head { gap: 12px; }
.ls :is(.shp-steps-intro, .shp-list-head .su-line) { margin-top: 4px; }
.ls .su-line a, .ls .shp-list-note a { color: var(--ls-accent-text); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ls .su-line a:hover { color: var(--ls-ink); }
.ls .shp-steps { display: flex; flex-direction: column; gap: 28px; margin: 0; padding: 0; list-style: none; }
.ls .shp-step { display: flex; align-items: flex-start; gap: 20px; }
.ls .shp-step-num { display: grid; flex: none; place-items: center; width: 40px; height: 40px; border-radius: 999px; color: var(--ls-canvas); background: var(--ls-ink); font-family: var(--tud-font-secondary); font-size: 17px; font-weight: 700; line-height: 1; }
.ls .shp-step-text { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.ls .shp-step h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.ls .shp-step p { color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 1.55; }

/* ---------- the short list: copy and note on top, the ticket centred left and level with the card ---------- */
.ls .shp-list { display: grid; grid-template-columns: minmax(0, 560px) minmax(0, 1fr); grid-template-areas: "head note" "model card" ". foot"; gap: 0 80px; }
.ls .shp-list-head { grid-area: head; }
.ls .shp-list-note { grid-area: note; align-self: end; color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 1.6; }
.ls .shp-model-box--ticket { grid-area: model; align-self: center; margin-top: 24px; }
.ls .shp-model-box--ticket .su-model { width: 380px; max-width: 100%; }
.ls .shp-kv { grid-area: card; margin-top: 24px; padding: 18px 24px 6px; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .shp-kv-head { display: flex; justify-content: space-between; gap: 16px; padding-bottom: 12px; color: var(--ls-muted); font-size: 14px; font-weight: 700; line-height: 1.2; }
.ls .shp-kv-rows { margin: 0; }
.ls .shp-kv-rows > div { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--ls-line-2); line-height: 1.5; }
/* The card's own edge closes the list: no rule under the last row. */
.ls .shp-kv-rows > div:last-child { border-bottom: 0; }
.ls .shp-kv-rows dt { flex: none; color: var(--ls-muted); font-size: 15px; font-weight: 600; }
.ls .shp-kv-rows dd { flex: 1 1 0; min-width: 0; margin: 0; color: var(--ls-ink); font-size: 16px; font-weight: 700; text-align: right; }
.ls .shp-list-foot { grid-area: foot; margin-top: 14px; color: var(--ls-soft); font-size: 15px; font-weight: 500; line-height: 1.6; }

/* ---------- install: the dark band (Setup's closing band colours), heading over the copy ---------- */
.ls .shp-install { padding: 96px 0; }
.ls .shp-install .ls-wrap { gap: 48px; }
.ls .shp-install-head { display: flex; flex-direction: column; gap: 12px; }
:root .ls .su-cta.shp-install .shp-install-kicker { color: #FF5C26; font-size: 14px; font-weight: 700; line-height: 1.5; }
.ls .shp-install h2 { max-width: none; font-size: 40px; line-height: 1.04; letter-spacing: -0.03em; }
.ls .shp-install-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; max-width: 720px; }
.ls .shp-install-copy p { max-width: none; font-size: 17px; line-height: 1.6; }
.ls .shp-install-copy .shp-install-fine { font-size: 16px; }
.ls .shp-install-fine a { color: inherit; font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ls .shp-install-fine a:hover { text-decoration-thickness: 2.5px; }
.ls .shp-install-fine a:focus-visible { outline: 2px solid #FAF7F2; outline-offset: 3px; border-radius: 2px; }

/* ---------- questions: the shopkeeper under the intro, centred in the sticky column ---------- */
.ls .shp-faq-art { display: flex; justify-content: center; padding-top: 20px; }
.ls .shp-faq-art img { display: block; width: auto; height: 300px; max-width: 100%; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .ls .shp-steps-row { grid-template-columns: 340px minmax(0, 1fr); column-gap: 48px; }
  .ls .shp-model-box--store .su-model { width: 300px; }
  .ls .shp-list { column-gap: 48px; }
  .ls .shp-model-box--ticket .su-model { width: 340px; }
}
@media (max-width: 900px) {
  .ls .shp-hero .su-hero-row { grid-template-columns: 1fr; }
  .ls .shp-steps-row { grid-template-columns: minmax(0, 1fr); }
  .ls .shp-model-box--store { height: 250px; margin-bottom: 28px; }
  .ls .shp-model-box--store .su-model { width: 250px; }
  .ls .shp-list { grid-template-columns: minmax(0, 1fr); grid-template-areas: "head" "note" "model" "card" "foot"; }
  .ls .shp-list-note { margin-top: 16px; }
  .ls .shp-model-box--ticket { margin-top: 24px; }
  .ls .shp-model-box--ticket .su-model { width: 300px; }
  .ls .shp-faq-art img { height: 220px; }
  .ls .shp-faq-art { padding-top: 12px; }
}
@media (max-width: 600px) {
  .ls .shp-steps { gap: 22px; }
  .ls .shp-model-box--ticket .su-model { width: 270px; }
  .ls .shp-install { padding: 56px 0; }
  .ls .shp-install .ls-wrap { gap: 28px; }
  .ls .shp-install h2 { font-size: 32px; }
  .ls .shp-install-copy p { font-size: 16px; }
}