/* WooCommerce, Mix B: the sister of the approved Shopify build (Figma "Web 2026-10 Merchants", Mix B: woocommerce
 * 1440 and 390). It wears the Setup parts (setup.css) and the Shopify parts (shopify.css: storefront beside the
 * numbered steps, the deal-ticket short list, the shopkeeper under the questions intro); this file adds only the
 * install band: the download and five numbered steps on the left, placing, requirement cards and the Report orders
 * setting on the right, all on the tint.
 * Loaded after shopify.css, before company-theme.css.
 */

/* ---------- hero: the title breaks after "for" as drawn ---------- */
.ls .wc-hero .su-title { text-wrap: wrap; }

/* ---------- the short list: the note starts level with the three-line lede, as drawn ---------- */
.ls .wc-list { grid-template-areas: "head ." "lede note" "model card" ". foot"; }
.ls .wc-list-lede { grid-area: lede; margin-top: 16px; }
.ls .wc-list .shp-list-note { align-self: start; margin-top: 16px; }

/* ---------- install band ---------- */
.ls .wc-install .ls-wrap { display: flex; flex-direction: column; gap: 48px; }
.ls .wc-install-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 80px; align-items: start; }
.ls .wc-install-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ls .wc-download { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 8px; }
.ls .wc-download .btn { min-height: 52px; padding-inline: 24px; overflow-wrap: anywhere; }
.ls .wc-block { display: flex; flex-direction: column; gap: 16px; }
.ls .wc-h3 { font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; }
.ls .wc-copy { color: var(--ls-soft); font-size: 16px; font-weight: 500; line-height: 1.6; }
.ls .wc-fine { color: var(--ls-soft); font-size: 15px; font-weight: 500; line-height: 1.6; }
.ls .wc-copy code { padding: 1px 6px; border-radius: 6px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); font-family: var(--tud-font-secondary); font-size: .92em; overflow-wrap: anywhere; }
/* The install steps take the steps' look with their titles one level down. */
.ls .shp-step h4 { margin: 0; font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.ls .wc-checks { margin: 0; }

/* ---------- narrower screens ---------- */
@media (max-width: 900px) {
  .ls .wc-list { grid-template-areas: "head" "lede" "note" "model" "card" "foot"; }
  .ls .wc-install-cols { grid-template-columns: minmax(0, 1fr); row-gap: 32px; }
}
@media (max-width: 600px) {
  .ls .wc-install .ls-wrap { gap: 28px; }
}

/* ---------- dark ---------- */
/* On the dark tint the requirement cards and the shortcode chip rise to the raised surface with the hairline, like
   the Setup cards on the same band (soft text 8.0:1). */
:root[data-theme="dark"] .ls .su-band--tint :is(.su-check, .wc-copy code) { background: var(--ls-raised); box-shadow: inset 0 0 0 1px var(--ls-line-2); }