/* Ways to add it, the Ways Mix (founder, 18 Oct 2026; Figma "Web 2026-10 Merchants", ways 1440 and 390), on the
 * approved merchant parts (setup.css: hero, heading type, bands, models, sticky side column). This file adds what
 * the showroom has and the other merchant pages do not: the sticky pill switcher, the two-column section heads,
 * the example cards with their sample-shop stages, the banner settings cards, the state switches, the code blocks
 * with their Copy buttons, and the placements beside the sticky intro with the deal-ticket model.
 *
 * The stages are the sample shop, not the site: .wy-shop carries the shop's own tokens (--bg, --ink, --brand and
 * the rest, the names the setting lines and banner colours refer to) and the .button classes a Shopify theme gives
 * an app block, so every mount renders the way the real widget renders in a theme. The shop is a light theme, so
 * its stages stay light in the site's dark mode, like a window onto the shop.
 * Loaded after setup.css, before company-theme.css.
 */

/* ---------- the sample shop ---------- */
.ls .wy-shop {
  --bg: #FFFFFF; --bg-alt: #F7F4EF; --bg-deep: #141412;
  --ink: #141412; --ink-2: #55504A; --ink-3: #6B6660; --ink-4: #938D84;
  --line: #E4DED5; --line-soft: #F0ECE5;
  --brand: #FF5C26; --brand-dark: #C93F12; --brand-tint: #FFF3EC;
  --font: 'Outfit', ui-sans-serif, system-ui, sans-serif; --font-num: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px;
  --r-xs: 2px; --r-sm: 4px; --r-pill: 999px;
  color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.5; color-scheme: light;
}
.ls .wy-shop :is(p, h3, h4) { margin: 0; }
.ls .wy-shop a { color: var(--brand-dark); font-weight: 700; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.ls .wy-shop a:focus-visible, .ls .wy-shop button:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
/* The class names Shopify theme app blocks reach for when a merchant picks "Theme primary button". */
.ls .wy-shop .button { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 12px 26px; border: 1.5px solid var(--ink); border-radius: var(--r-pill); color: #FFFFFF; background: var(--ink); font-family: var(--font); font-size: 16px; font-weight: 700; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; transition: background-color 140ms var(--ls-ease), color 140ms var(--ls-ease), border-color 140ms var(--ls-ease); }
.ls .wy-shop .button:hover { border-color: #2E2B27; background: #2E2B27; }
.ls .wy-shop .button--secondary { color: var(--ink); background: transparent; }
.ls .wy-shop .button--secondary:hover { color: #FFFFFF; background: var(--ink); border-color: var(--ink); }
.ls .wy-shop .ps-btn--wide { width: 100%; }
.ls .wy-shop [data-tud-trigger] { max-width: 100%; }
/* The SDK swaps these with the native hidden property. */
.ls .wy-shop [data-tud-trigger][hidden], .ls .wy-shop .tud-applied[hidden] { display: none !important; }
.ls .wy-shop .tud-powered { color: var(--ink-2); }
.ls .wy-shop-title { font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.ls .wy-shop .wy-shop-title a { color: var(--ink); text-decoration: none; }
.ls .wy-shop .wy-shop-title a:hover { text-decoration: underline; }
.ls .wy-shop-price { margin-top: 6px !important; font-family: var(--font-num); font-size: 17px; font-weight: 600; }
.ls .wy-shop-note { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.ls .wy-shop-num { font-family: var(--font-num); }
.ls .wy-shop-heading { font-size: 26px; font-weight: 800; line-height: 1.15; letter-spacing: -0.025em; }
.ls .wy-shop-heading--sm { font-size: 22px; }

/* ---------- section switcher: pills under the hero, held under the header on desktop ---------- */
.ls .wy-tabs { z-index: 20; border-block: 1px solid var(--ls-line); background: rgba(250, 247, 242, .94); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); }
.ls .wy-tabs-track { position: relative; display: flex; gap: 8px; padding: 14px 0; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain; }
.ls .wy-tabs-track::-webkit-scrollbar { display: none; }
.ls .wy-tabs a { display: inline-flex; flex: none; align-items: center; min-height: 40px; padding: 0 16px; border-radius: 999px; color: var(--ls-ink); background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); font-size: 15px; font-weight: 600; line-height: 1.2; white-space: nowrap; text-decoration: none; transition: background-color 160ms var(--ls-ease), color 160ms var(--ls-ease), box-shadow 160ms var(--ls-ease); }
.ls .wy-tabs a:hover { box-shadow: inset 0 0 0 1.5px var(--ls-ink); }
.ls .wy-tabs a[aria-current="true"] { color: var(--ls-canvas); background: var(--ls-ink); box-shadow: inset 0 0 0 1px var(--ls-ink); }
.ls .wy-tabs a:focus-visible { outline: 3px solid var(--ls-accent-text); outline-offset: 2px; }
/* The page already keeps 88 px clear of the header (site.css scroll-padding-top); the switcher adds its own height. */
@media (min-width: 900px) {
  .ls .wy-tabs { position: sticky; top: 77px; }
  .ls .wy-band { scroll-margin-top: 57px; }
}
@media (prefers-reduced-motion: reduce) { .ls .wy-tabs a { transition: none; } }

/* ---------- hero and section heads ---------- */
.ls .wy-hero { padding-bottom: 80px; }
.ls .wy-hero .su-title { text-wrap: balance; }
.ls .wy-head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 16px 80px; align-items: end; margin-bottom: 48px; }
.ls .wy-head .su-h2 { max-width: 600px; }

/* ---------- example cards: the parts in one order, lined up across a row ---------- */
.ls .wy-grid { display: grid; gap: 20px; }
.ls .wy-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ls .wy-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ls .wy-card { display: grid; align-content: start; gap: 14px; min-width: 0; padding: 23px; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .wy-grid > .wy-card { grid-row: span var(--wy-parts, 3); grid-template-rows: subgrid; }
.ls .wy-grid--buttons, .ls .wy-grid--states { --wy-parts: 4; }
.ls .wy-card--full { grid-column: 1 / -1; }
.ls .wy-main :is(h3, h4, p):is(.wy-card-title, .wy-sub, .wy-note, .wy-set, .wy-kv-head) { margin: 0; }
.ls .wy-card-title { color: var(--ls-ink); font-size: 20px; font-weight: 700; line-height: 1.25; letter-spacing: -0.015em; }
.ls .wy-note { color: var(--ls-soft); font-size: 15px; font-weight: 500; line-height: 1.55; }
.ls .wy-set { color: var(--ls-muted); font-size: 13px; font-weight: 600; line-height: 1.6; overflow-wrap: anywhere; }
.ls .wy-sub { color: var(--ls-ink); font-size: 22px; font-weight: 800; line-height: 1.2; letter-spacing: -0.02em; }
.ls .wy-defaults { max-width: 820px; margin-top: 32px; color: var(--ls-soft); font-size: 15px; font-weight: 500; line-height: 1.6; }
/* The stage is the shop's own surface; the example sits in it the way it sits in a theme. */
.ls .wy-stage { display: flex; flex-direction: column; justify-content: center; min-width: 0; min-height: 124px; padding: 24px; border-radius: 12px; background: var(--bg-alt); box-shadow: inset 0 0 0 1px var(--line); }

/* ---------- pick a button: the product page beside the hoodie ---------- */
.ls .wy-product-row { display: grid; grid-template-columns: minmax(0, 600px) minmax(0, 1fr); gap: 40px; margin-bottom: 20px; }
.ls .wy-product-stage { justify-content: flex-start; gap: 4px; }
.ls .wy-product-stage .ps-ways-product__form { margin-top: 18px; }
.ls .wy-product-mount { margin-top: 14px; }
.ls .wy-product-media { position: relative; min-width: 0; min-height: 320px; overflow: hidden; border-radius: 18px; background: #E6E6E4; }
/* The photo fills whatever height the product card sets, never the other way round. */
.ls .wy-product-media img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; }

/* ---------- banners and their settings ---------- */
.ls .wy-banner-col { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 16px; min-width: 0; }
.ls .wy-banner-col > .wy-card { grid-row: span 3; grid-template-rows: subgrid; }
.ls .wy-grid--banners { row-gap: 0; }
.ls .wy-stage--banner { min-height: 0; }
.ls .wy-kv { padding: 18px 24px 4px; border-radius: 18px; background: var(--ls-paper); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .wy-kv-head { padding-bottom: 6px; color: var(--ls-muted); font-size: 14px; font-weight: 700; line-height: 1.2; }
.ls .wy-kv-rows { margin: 0; }
.ls .wy-kv-rows > div { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; 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 .wy-kv-rows > div:last-child { border-bottom: 0; }
.ls .wy-kv-rows dt { flex: none; color: var(--ls-muted); font-size: 15px; font-weight: 600; }
.ls .wy-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 .wy-kv-rows code { font-family: var(--tud-font-secondary); font-size: 15px; font-weight: 700; }

/* ---------- finishing touches: the state previews ---------- */
.ls .wy-applied { display: grid; gap: 28px; margin-top: 56px; }
.ls .wy-applied-head { display: grid; gap: 8px; max-width: 720px; }
.ls .wy-state .tud-applied { font-size: 15px; }
.ls .wy-state .wy-stage { min-height: 108px; }
/* One switch, two named states, one selected. It sits under the stage it controls. */
.ls .wy-pick { display: inline-flex; justify-self: start; align-self: start; gap: 2px; padding: 3px; border-radius: 999px; background: var(--ls-canvas); box-shadow: inset 0 0 0 1px var(--ls-line-2); }
.ls .wy-pick-opt { min-height: 40px; padding: 0 16px; border: 0; border-radius: 999px; color: var(--ls-soft); background: transparent; font: inherit; font-size: 14px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 160ms var(--ls-ease), color 160ms var(--ls-ease); }
.ls .wy-pick-opt:hover { color: var(--ls-ink); }
.ls .wy-pick-opt[aria-pressed="true"] { color: var(--ls-canvas); background: var(--ls-ink); }
.ls .wy-pick-opt:focus-visible { outline: 3px solid var(--ls-accent-text); outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .ls .wy-pick-opt { transition: none; } }

/* ---------- code blocks ---------- */
.ls .wy-code { min-width: 0; border-radius: 16px; color: #F6EFE4; background: #141412; }
.ls .wy-code-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 16px 0 20px; }
.ls .wy-code-lang { color: #FFFFFF; font-size: 14px; font-weight: 700; line-height: 1.2; }
.ls .wy-copy { min-width: 76px; min-height: 40px; padding: 0 18px; border: 1.5px solid rgba(246, 239, 228, .82); border-radius: 999px; color: #FFFFFF; background: transparent; font: inherit; font-size: 15px; font-weight: 700; line-height: 1; cursor: pointer; transition: background-color 160ms var(--ls-ease), color 160ms var(--ls-ease), border-color 160ms var(--ls-ease); }
.ls .wy-copy:hover { border-color: #FFFFFF; background: rgba(255, 255, 255, .1); }
.ls .wy-copy.is-done { border-color: var(--ls-orange); color: #141412; background: var(--ls-orange); }
.ls .wy-copy:focus-visible { outline: 3px solid #FF8A5C; outline-offset: 2px; }
.ls .wy-code pre { margin: 0; padding: 14px 20px 22px; color: #F6EFE4; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13.5px; line-height: 1.65; white-space: pre-wrap; overflow-wrap: anywhere; tab-size: 2; }
.ls .wy-code pre::selection, .ls .wy-code code::selection { color: #141412; background: #FFB899; }
@media (prefers-reduced-motion: reduce) { .ls .wy-copy { transition: none; } }

/* ---------- make it entirely yours ---------- */
.ls .wy-custom { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.ls .wy-stage--custom { min-height: 160px; }
.ls .wy-stage--custom > [data-tud-widget] { font-size: 20px; line-height: 1.5; }
.ls .wy-custom-source { display: grid; gap: 16px; min-width: 0; }
.ls .wy-custom-source .wy-code + .wy-sub { margin-top: 16px; }

/* ---------- what custom CSS can reach: each card over its rule ---------- */
.ls .wy-cssdemo { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 16px; min-width: 0; }
.ls .wy-cssdemo > .wy-card { grid-row: span 3; grid-template-rows: subgrid; }
.ls .wy-grid--css { row-gap: 0; }
.ls .wy-cssdemo .wy-stage { min-height: 110px; }

/* ---------- placements: the intro and ticket held still beside the three places ---------- */
.ls .wy-where { grid-template-columns: 360px minmax(0, 1fr); }
.ls .wy-model-box { margin-top: 36px; }
.ls .wy-model-box .su-model { width: 320px; max-width: 100%; }
@media (min-width: 900px) and (min-height: 760px) {
  .ls .wy-where-side.su-side--sticky { top: 169px; }
}
.ls .wy-places { display: grid; gap: 56px; min-width: 0; }
.ls .wy-places > .wy-defaults { margin-top: 0; }
.ls .wy-place { display: grid; gap: 18px; min-width: 0; }
.ls .wy-place-say { display: grid; gap: 8px; max-width: 600px; }
.ls .wy-place-stage { justify-content: flex-start; gap: 16px; padding: 28px; }
.ls .wy-place-stage--home { background: var(--bg); }
.ls .wy-place-stage--home > .wy-shop-note { margin-top: -8px; }
.ls .wy-place-stage--cart { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 24px; }
.ls .wy-place-stage--cart .wy-shop-note { margin-top: 10px; }
.ls .wy-shop-note--tag { color: var(--ink-3); font-size: 13px; font-weight: 600; }
.ls .wy-cart-actions { display: grid; gap: 14px; }
.ls .wy-icon { display: block; flex: none; }
.ls .wy-products { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.ls .wy-shop .wy-products a { display: grid; gap: 2px; min-width: 0; padding: 10px; border-radius: 12px; color: var(--ink); background: var(--bg); box-shadow: inset 0 0 0 1px var(--line); font-size: 14px; font-weight: 700; line-height: 1.35; text-decoration: none; }
.ls .wy-shop .wy-products a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.ls .wy-products img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; margin-bottom: 8px; border-radius: 8px; object-fit: cover; }
.ls .wy-products .wy-shop-num { font-size: 13px; font-weight: 600; }

/* ---------- narrower screens ---------- */
@media (max-width: 1100px) {
  .ls .wy-head { column-gap: 48px; }
  .ls .wy-where { grid-template-columns: 300px minmax(0, 1fr); column-gap: 48px; }
  .ls .wy-model-box .su-model { width: 280px; }
  .ls .wy-place-stage--cart { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ls .wy-head { grid-template-columns: minmax(0, 1fr); margin-bottom: 32px; }
  .ls .wy-product-row { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .ls .wy-product-media { height: 360px; }
  .ls .wy-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .ls .wy-grid--3 > .wy-card, .ls .wy-grid--3 > .wy-cssdemo { grid-row: auto; grid-template-rows: none; }
  .ls .wy-grid--css { row-gap: 28px; }
  .ls .wy-grid--3 .wy-cssdemo > .wy-card { grid-row: auto; grid-template-rows: none; }
  .ls .wy-cssdemo { grid-template-rows: none; grid-row: auto; }
  .ls .wy-custom { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ls .wy-where { grid-template-columns: minmax(0, 1fr); }
  .ls .wy-model-box { margin: 28px 0 8px; }
  .ls .wy-model-box .su-model { width: 260px; }
  .ls .wy-places { margin-top: 32px; gap: 48px; }
}
@media (max-width: 700px) {
  .ls .wy-grid--2 { grid-template-columns: minmax(0, 1fr); }
  .ls .wy-grid--2 > .wy-card, .ls .wy-banner-col, .ls .wy-banner-col > .wy-card { grid-row: auto; grid-template-rows: none; }
  .ls .wy-grid--banners { row-gap: 28px; }
}
@media (max-width: 600px) {
  .ls .wy-hero { padding-bottom: 48px; }
  .ls .wy-tabs-track { margin-inline: calc(var(--ls-gutter) * -1); padding: 12px var(--ls-gutter); scroll-padding-inline: var(--ls-gutter); }
  .ls .wy-tabs a { min-height: 44px; font-size: 14px; }
  .ls .wy-head { margin-bottom: 28px; }
  .ls .wy-card { padding: 19px; }
  .ls .wy-stage { padding: 20px; }
  .ls .wy-product-media { height: 300px; }
  .ls .wy-kv { padding: 16px 19px 2px; }
  .ls .wy-kv-rows > div { flex-direction: column; gap: 2px; }
  .ls .wy-kv-rows dd { text-align: left; }
  .ls .wy-applied { margin-top: 44px; }
  .ls .wy-stage--custom > [data-tud-widget] { font-size: 18px; }
  .ls .wy-place-stage { padding: 20px; }
  .ls .wy-shop-heading { font-size: 22px; }
  .ls .wy-shop-heading--sm { font-size: 20px; }
  .ls .wy-products { gap: 8px; }
  .ls .wy-shop .wy-products a { padding: 6px; font-size: 12px; }
  .ls .wy-products .wy-shop-num { font-size: 12px; }
  .ls .wy-model-box .su-model { width: 240px; }
}

/* ---------- dark ---------- */
/* The switcher takes the dark header's glass; cards rise to the paper on the ground and to the raised surface on
   the tint bands (as on Setup); the code blocks drop to the band colour with a hairline so they read as their own
   surface. The shop stages keep the shop's light theme. */
:root[data-theme="dark"] .ls .wy-tabs { background: rgba(26, 22, 19, .94); }
:root[data-theme="dark"] .ls .su-band--tint :is(.wy-card, .wy-kv) { background: var(--ls-raised); }
:root[data-theme="dark"] .ls .wy-code { background: var(--ls-band); box-shadow: inset 0 0 0 1px #443B32; }
:root[data-theme="dark"] .ls .wy-pick { background: var(--ls-canvas); }
:root[data-theme="dark"] .ls .wy-product-media { background: #2E2822; }