/* Storied Wall: "Sage Upright" (the owner's pick from the theme lab, option 35, 2026-11-11; layout from "Stationer's Studio", option 19). Tokens on :root; every rule is scoped to .sw-* (see CLAUDE.md scope rule):
   the product page shares its document with #poster, so nothing here may set inherited type on body or #poster's ancestors. */
/* 'SW Spectral' and 'SW Nunito Sans': the site's faces must never share a family name with the engine's poster fonts (lib/fonts/), which load in the same document on a product page */
@font-face { font-family: 'SW Spectral'; src: url(fonts/spectral-latin-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SW Spectral'; src: url(fonts/spectral-latin-ext-500-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
/* Spectral's $ has two strokes; the owner wants one (2026-11-11), so the display face takes $ alone from Georgia, or Nunito Sans where Georgia is missing (Android). Declared after Spectral so it wins for U+0024. */
@font-face { font-family: 'SW Spectral'; src: local('Georgia'), url(fonts/nunito-sans-latin-variable-normal.woff2) format('woff2'); font-weight: 500; font-display: swap; unicode-range: U+0024; }
@font-face { font-family: 'SW Nunito Sans'; src: url(fonts/nunito-sans-latin-variable-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'SW Nunito Sans'; src: url(fonts/nunito-sans-latin-ext-variable-normal.woff2) format('woff2'); font-weight: 400 700; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --wall: #eef0e8; --rail: #e3e7da; --rail-edge: #cbd2c0; --paper: #fafbf6;
  --ink: #1f2a22; --muted: #4d5a50; --walnut: #3f5a45; --walnut-hi: #4d6c54; --on-walnut: #f6f8f0;
  --brass: #3f5a45; --error: #8f1f1a; --focus: #1d4f91; --field-edge: #848a83; --shadow: 93 101 93;
  --radius: 6px; --display-wt: 500;
  --u-tile: #f5f6f0; --u-tile-edge: #cbd2c0; --u-sel: #fff; --u-hair: #dee2d6; --u-sage: #d1d8cf; --u-sage-ink: #1f2a22; --u-faint: #4d5a50;
  --u-card-shadow: 0 1px 2px rgb(var(--shadow) / .10), 0 16px 30px -20px rgb(var(--shadow) / .42);
  --u-lift: 0 1px 2px rgb(var(--shadow) / .14), 0 8px 14px -8px rgb(var(--shadow) / .34);
  --u-ease: cubic-bezier(.23, 1, .32, 1);
  --u-art: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 46' preserveAspectRatio='none'%3E%3Crect width='36' height='46' fill='%23fafbf6'/%3E%3Crect x='8' y='7' width='20' height='3.4' rx='1' fill='%233f5a45'/%3E%3Crect x='12' y='12.5' width='12' height='1.4' fill='%233f5a45' opacity='.55'/%3E%3Crect x='8' y='18' width='20' height='21' rx='1' fill='%233f5a45' opacity='.22'/%3E%3C/svg%3E");
  --u-tick: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%233f5a45'/%3E%3Cpath d='M5.6 10.4l3 3 5.8-6.6' fill='none' stroke='%23fff' stroke-width='1.9' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --u-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%231f2a22' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 6l4.5 4.5L12.5 6'/%3E%3C/svg%3E");
  --font-display: 'SW Spectral', Georgia, serif; --font: 'SW Nunito Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --black: #1f2a22;
  --gutter: max(clamp(16px, 4vw, 56px), env(safe-area-inset-left), env(safe-area-inset-right));
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --display-style: normal;
  --wordmark-size: 26px; --wordmark-track: -.01em; --wordmark-case: none;
  --mark: url(/static/mark.svg); --mark-w: 22px;
  --u-rule: 1px solid var(--rail-edge); --u-rule-w: 1px; --u-on: var(--paper); --u-on-ink: var(--walnut); --u-rail-bg: transparent; --u-rail-ink: var(--muted); --u-canvas: var(--wall); --u-dot: transparent; --u-gap: 8px;
  color-scheme: light;
}

/* page shell */
.sw-body { background: var(--wall); margin: 0; -webkit-text-size-adjust: 100%; }
.sw-chrome { font: 400 17px/1.55 var(--font); color: var(--ink); -webkit-font-smoothing: antialiased; }
.sw-chrome a { color: var(--brass); text-underline-offset: .18em; text-decoration-thickness: 1px; }
.sw-chrome a:hover { text-decoration-thickness: 2px; }
.sw-chrome :is(a, button, label, summary) { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.sw-chrome :focus-visible, .sw-preview :focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; border-radius: 2px; }
.sw-skip { position: absolute; left: 12px; top: -60px; z-index: 20; background: var(--paper); color: var(--ink); padding: 10px 16px; font: 600 16px var(--font); }
.sw-skip:focus { top: 12px; }
.sw-visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

.sw-header { display: flex; align-items: center; justify-content: space-between; gap: 8px 24px; flex-wrap: wrap;
             padding: 16px var(--gutter); max-width: 1440px; margin: 0 auto; }
.sw-wordmark { font: var(--display-style) var(--display-wt) var(--wordmark-size)/1 var(--font-display); letter-spacing: var(--wordmark-track);
               text-transform: var(--wordmark-case); display: inline-flex; align-items: center; color: var(--ink) !important; text-decoration: none; padding: 6px 0; }
/* the word's box trimmed to cap height and baseline, so the mark centres on the capitals, not on the em box (which
   includes descender room): Chrome 133+ and Safari 18.2+; elsewhere the mark sits a pixel or two low */
.sw-wordmark > span { text-box: trim-both cap alphabetic; }
.sw-wordmark::before { content: ''; width: var(--mark-w); height: calc(var(--mark-w) * 1.2); margin-right: calc(var(--mark-w) * .4);
                       background: var(--mark) center / contain no-repeat; }
/* the header menu: see the Phase 7 block */
/* the old 10px picture rail is now a hairline under the header (theme lab, 2026-11-11) */
.sw-rail { border-top: 1px solid var(--rail-edge); }

.sw-wrap { max-width: 1440px; margin: 0 auto; padding-inline: var(--gutter); }
.sw-narrow { max-width: 720px; }
.sw-section { padding-block: clamp(48px, 7vw, 96px); }
.sw-band { background: var(--rail); border-block: 1px solid var(--rail-edge); }

/* type */
.sw-h1 { font: var(--display-style) var(--display-wt) clamp(36px, 4.6vw, 64px)/1.06 var(--font-display); letter-spacing: -.015em; text-wrap: balance; margin: 0; }
.sw-h2 { font: var(--display-style) var(--display-wt) clamp(28px, 3vw, 40px)/1.12 var(--font-display); letter-spacing: -.01em; text-wrap: balance; margin: 0 0 16px; }
.sw-h3 { font: 600 19px/1.3 var(--font); margin: 0 0 6px; }
.sw-lede { font-size: 19px; color: var(--muted); max-width: 34em; margin: 20px 0 0; text-wrap: pretty; }
.sw-muted { color: var(--muted); }
.sw-prose { max-width: 40em; }
.sw-prose h2 { font: var(--display-style) var(--display-wt) 28px/1.15 var(--font-display); margin: 40px 0 12px; }
.sw-prose h3 { font: 600 18px/1.3 var(--font); margin: 28px 0 8px; }
.sw-prose p, .sw-prose ul, .sw-prose ol { margin: 0 0 14px; }
/* Young Serif's default figures are old-style (a 2 sits lower than a 9): every display-face number uses lining figures (owner review
   2026-11-05). Never on #poster or its ancestors (the scope rule). */
:is(.sw-h1, .sw-h2, .sw-prose h2, .sw-config h1, .sw-gallery :is(h2, h3), .sw-sum-total b, .sw-mega-h, .sw-doors h3, .sw-fieldset legend) { font-variant-numeric: lining-nums; }
.sw-body #panel :is(legend, summary) { font-variant-numeric: lining-nums; }
.sw-prose li { margin-bottom: 6px; }
/* /guides/route-file: the privacy promise as a note pinned to the wall, then a jump list of apps */
.sw-guide-promise { background: var(--paper); border-left: 3px solid var(--walnut); padding: 16px 20px; margin: 28px 0 0 !important; }
.sw-prose .sw-lede { margin-top: 20px; }  /* .sw-prose p would zero the lede's gap under its heading */
.sw-guide-apps { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 22px; }
.sw-guide-apps li { margin: 0; }
.sw-guide-apps a { display: inline-flex; align-items: center; min-height: 32px; }
.sw-guide h2[id] { scroll-margin-top: 16px; }
.sw-guide code { font: 15px/1 ui-monospace, Consolas, monospace; background: var(--rail); padding: 1px 5px; border-radius: var(--radius); }

/* buttons */
.sw-btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 26px; border: 0; border-radius: var(--radius);
          background: var(--walnut); color: var(--on-walnut) !important; font: 600 17px/1.2 var(--font); text-decoration: none !important;
          cursor: pointer; touch-action: manipulation; transition: background-color .15s ease, transform .1s var(--ease-out); }
.sw-btn:hover { background: var(--walnut-hi); }
.sw-btn:active { transform: scale(.98); }
.sw-btn[disabled] { background: #8b8178; color: #fbf9f4 !important; cursor: not-allowed; transform: none; }

/* frames: moulding and shadow. No mount: the framed SKUs have none, so the print fills the frame (owner review 2, 2026-11-06).
   .sw-mount stays as the print's holder, with nothing round it. */
.sw-frame { --mould: 14px; position: relative; display: inline-block; vertical-align: top; padding: var(--mould);
            box-shadow: 0 1px 1px rgb(var(--shadow) / .25), 0 16px 30px -12px rgb(var(--shadow) / .5); }
/* The moulding is Gelato's own classic frame (marketing/gelato-frames, cut by scripts/frame_images.py), 9-sliced round the print.
   It sits in the padding, so shop.js S.fit still reads the moulding width from it. The moulding overlaps the print by 2px: the
   print's edge falls mid-pixel at 125 % zoom and border-image snaps on its own, which left a hairline of wall (or a half-lit edge pixel) showing. z-index: above #stage, which is transformed and so would paint over it. */
.sw-frame::before { content: ''; position: absolute; inset: 0; z-index: 1; border: calc(var(--mould) + 2px) solid transparent; pointer-events: none;
                    border-image: url(frames/black.webp) 28 stretch; }
.sw-frame[data-moulding="white"]::before { border-image-source: url(frames/white.webp); }
.sw-frame[data-moulding="oak"]::before { border-image-source: url(frames/oak.webp); }
.sw-frame[data-moulding="dark-wood"]::before { border-image-source: url(frames/dark-wood.webp); }
.sw-frame:is([data-format="unframed"], [data-format="digital"], [data-format="canvas"])::before { content: none; }
.sw-mount { background: #fbfaf6; display: flow-root; }  /* flow-root: holds #stage's negative margins (editor.js fitStage) without padding */
.sw-mount > img { display: block; width: 100%; height: auto; box-shadow: 0 0 0 1px rgb(0 0 0 / .08); }


/* home hero: salon hang */
.sw-hero { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: center;
           padding-block: clamp(32px, 6vw, 88px) clamp(48px, 7vw, 104px); }
.sw-hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; margin-top: 28px; }
.sw-salon { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2.4vw, 32px); align-items: start; }
.sw-salon figure { margin: 0; position: relative; }
.sw-salon .sw-frame { display: block; }
.sw-cap { margin-top: 10px; font-size: 14px; color: var(--muted); }

/* product gallery: framed prints hung in rows, not cards */
.sw-occasion { margin-top: clamp(40px, 5vw, 64px); }
.sw-occasion:first-of-type { margin-top: 0; }
.sw-occasion > h2[id] { scroll-margin-top: 16px; }  /* reached from a menu column heading */
.sw-gallery { list-style: none; padding: 0; margin: 20px 0 0; display: grid; gap: 40px clamp(20px, 3vw, 40px);
              grid-template-columns: repeat(auto-fill, minmax(min(100%, 230px), 1fr)); align-items: start; }
.sw-gallery a { display: block; color: var(--ink); text-decoration: none; }
/* each gallery frame takes its sample's own shape (5:7, 4:5, 3:4 or landscape): no mount, so no paper strips (owner review 2) */
.sw-gallery .sw-frame { --mould: 10px; display: block; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sw-gallery a:hover .sw-frame { transform: translateY(-3px); box-shadow: 0 1px 1px rgb(var(--shadow) / .25), 0 24px 36px -14px rgb(var(--shadow) / .55); }
}
.sw-gallery a:active .sw-frame { transform: scale(.99); }
/* a landscape card's frame hangs from the same bottom line as the 3:4 portraits beside it (taller prints just grow the slot); one column has no neighbours, so no slot */
@media (min-width: 560px) {
  .sw-gallery a[aria-hidden="true"] { display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 3 / 4; }
  /* a 5:7 print (birth) in the row: every slot in its gallery takes 5:7, so the bottoms still meet */
  .sw-gallery:has(a[aria-hidden="true"] img[height="840"]) a[aria-hidden="true"] { aspect-ratio: 5 / 7; }  /* ponytail: per gallery, not per row; 840 = 600 × 7/5 in POSTER_H */
}
.sw-gallery :is(h2, h3) { font: var(--display-style) var(--display-wt) 22px/1.2 var(--font-display); margin: 16px 0 4px; }
/* owner review 25: a card's look bubbles, between the print and its name */
.sw-card-looks { display: flex; justify-content: space-between; margin-top: 14px; padding-inline: 8px; }  /* first and last a small inset from the frame's edges, the rest evenly between */
.sw-card-look { flex: 0 1 26px; aspect-ratio: 1; min-width: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; box-shadow: 0 0 0 1px rgb(var(--shadow) / .3); transition: box-shadow .15s ease; }
.sw-card-look img { display: block; width: 100%; height: 100%; border-radius: 50%; }
.sw-card-look[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--wall), 0 0 0 3.5px var(--walnut); }
.sw-card-look:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.sw-card-look, .sw-body #panel .look { touch-action: manipulation; }
.sw-card-look:active, .sw-body #panel .look:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) {
  .sw-card-look:not([aria-pressed="true"]):hover { box-shadow: 0 0 0 1.5px var(--walnut); }
  .sw-body #panel .look:not([aria-pressed="true"]):hover img { box-shadow: 0 0 0 2px var(--walnut); }
}
.sw-gallery a:hover :is(h2, h3) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.sw-gallery p { margin: 0; font-size: 15px; color: var(--muted); }
.sw-gallery .sw-from { margin-top: 6px; color: var(--ink); font-weight: 600; }
/* review 46: a placeholder card, the size of a framed card, with nothing to click */

.sw-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(32px, 5vw, 80px); }

/* FAQ */
.sw-faq details { border-top: 1px solid var(--rail-edge); }
.sw-faq details:last-child { border-bottom: 1px solid var(--rail-edge); }
.sw-faq summary { cursor: pointer; font-weight: 600; padding: 16px 32px 16px 0; list-style: none; position: relative; }
.sw-faq summary::-webkit-details-marker { display: none; }
.sw-faq-q { font: inherit; margin: 0; }  /* the question is a heading (SEO audit 2026-11-14) but keeps the summary's look */
.sw-faq summary::after { content: '+'; position: absolute; right: 4px; top: 12px; font: var(--display-style) var(--display-wt) 24px/1 var(--font-display); transition: transform .2s var(--ease-out); }
.sw-faq details[open] summary::after { transform: rotate(45deg); }
.sw-faq details > div { padding: 0 0 18px; color: var(--muted); max-width: 40em; }
.sw-faq details > div p { margin: 0 0 10px; }


/* footer */
.sw-footer { padding-block: 40px 48px; font-size: 15px; }
.sw-footer nav { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-bottom: 18px; }
.sw-footer nav a { color: var(--ink); padding: 6px 0; display: inline-block; }
.sw-footer p { margin: 0 0 6px; color: var(--muted); }

/* product page: preview left (sticky), form right; on phones the preview sticks to the top while the form scrolls */
.sw-product { display: grid; grid-template-columns: minmax(0, 7fr) minmax(320px, 5fr); gap: clamp(24px, 4vw, 56px); align-items: start;
              max-width: 1440px; margin: 0 auto; padding: 24px var(--gutter) 64px; }
.sw-preview { position: sticky; top: 12px; }
.sw-fit { height: calc(100svh - 48px); min-height: 360px; display: flex; align-items: center; justify-content: center; position: relative; }
.sw-fit .sw-frame { position: relative; }
/* Until editor.js first scales the poster (shop.js S.fit sets data-fit) the frame would show it at full size, then jump:
   hidden elements don't count as layout shift. And the panel's space is held while it loads, so the button below doesn't jump. */
.sw-fit .sw-frame:not([data-fit]) { visibility: hidden; }
#panel-slot:has(> .sw-loading) { min-height: 100svh; }
.sw-loading { color: var(--muted); }
.sw-config h1 { font: var(--display-style) var(--display-wt) clamp(32px, 3.4vw, 48px)/1.08 var(--font-display); margin: 0; }

/* the engine's editor panel, restyled as a customer form (lib/editor.js builds it; ids/classes are the engine's) */
.sw-body #panel { position: static; width: auto; max-height: none; overflow: visible; background: none; padding: 0; border-radius: 0;
                  display: grid; gap: 18px; font: inherit; }
.sw-body #panel > fieldset, .sw-body #panel > details { border: 0; border-top: 1px solid var(--rail-edge); border-radius: 0; padding: 18px 0 0; margin: 0;
                  display: grid; gap: 16px; min-width: 0; }
.sw-body #panel legend, .sw-body #panel summary { font: var(--display-style) var(--display-wt) 22px/1.2 var(--font-display); padding: 0; margin-bottom: 4px; float: left; width: 100%; }
.sw-body #panel summary { cursor: pointer; float: none; font: 600 16px/1.3 var(--font); padding: 6px 0; }
.sw-body #panel .help ul { margin: 4px 0 8px; padding-left: 20px; color: var(--muted); font-size: 15px; line-height: 1.5; }
.sw-body #panel .help li + li { margin-top: 6px; }
.sw-body #panel label, .sw-body #panel .field { font-weight: 600; font-size: 15px; display: grid; gap: 6px; }
.sw-body #panel label.check { display: flex; gap: 10px; align-items: center; font-weight: 400; min-height: 32px; }
.sw-body #panel input:not([type=checkbox], [type=radio]), .sw-body #panel select, .sw-body #panel textarea {
  width: 100%; min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--paper);
  border: 1px solid var(--field-edge); border-radius: 3px; }
.sw-body #panel textarea { min-height: 120px; resize: vertical; }
/* family tree: one compact card per person (name and years, parents, partner, quick-add buttons) */
/* travel map: chosen countries as tags above the checklist */
.sw-body #panel .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.sw-body #panel .tags:empty { display: none; }
.sw-body #panel .tags button, .sw-body #panel .clearall { width: auto; min-height: 36px; padding: 6px 12px; font-weight: 400; font-size: 14px; border-radius: 18px; }
.sw-body #panel input[type=range] { accent-color: var(--walnut); border: 0; padding: 0; min-height: 24px; background: none; }
.sw-body #panel input[type=checkbox], .sw-body #panel input[type=radio] { width: 20px; height: 20px; accent-color: var(--walnut); margin: 0; }
.sw-body #panel input:focus-visible, .sw-body #panel select:focus-visible, .sw-body #panel textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-body #panel .hint { color: var(--muted); font-size: 14px; font-weight: 400; }
.sw-body #panel button { min-height: 44px; padding: 8px 14px; font: 600 15px var(--font); color: var(--ink); background: var(--paper);
                         border: 1px solid var(--field-edge); border-radius: 3px; cursor: pointer; }
.sw-body #panel form { display: flex; gap: 8px; }
.sw-body #panel form input { flex: 1; min-width: 0; }
.sw-body #panel form button { flex: none; background: var(--walnut); color: var(--on-walnut); border-color: var(--walnut); }
/* place suggestions: one list box, a divider between rows, the row under the pointer or focus shaded */
.sw-body #panel .results { display: grid; margin-top: 4px; background: var(--paper); border: 1px solid var(--field-edge); border-radius: 3px; overflow: hidden; }
.sw-body #panel .results:empty { display: none; }
.sw-body #panel .results button { text-align: left; font-weight: 400; font-size: 14px; margin: 0; border: 0; border-radius: 0; background: none; }
.sw-body #panel .results button + button { border-top: 1px solid var(--rail-edge); }
.sw-body #panel .results button:focus-visible { background: var(--rail); outline: 2px solid var(--focus); outline-offset: -2px; }
@media (hover: hover) { .sw-body #panel .results button:hover { background: var(--rail); } }
.sw-body #panel .results > .hint { padding: 10px 14px; }
/* the country combobox (editor.js f.search): the same list, with the highlighted option shaded and marked for the eye too */
.sw-body #panel .combo [role=option] { padding: 10px 14px; font-size: 14px; cursor: pointer; }
.sw-body #panel .combo [role=option] + [role=option] { border-top: 1px solid var(--rail-edge); }
.sw-body #panel .combo [aria-selected=true] { background: var(--rail); box-shadow: inset 3px 0 var(--walnut); }
@media (hover: hover) { .sw-body #panel .combo [role=option]:hover { background: var(--rail); } }
/* pins and journey stops: a card per stop under the search; on a journey, a grip to drag it */
.sw-body #panel .pinrows { display: grid; gap: 10px; margin-top: 12px; }
.sw-body #panel .pinrows:empty { display: none; }
.sw-body #panel .pinrow { background: var(--paper); border: 1px solid var(--field-edge); border-radius: 3px; padding: 12px;
                           grid-template-columns: minmax(0, 1fr); }
/* the transport menu keeps its full width ("On foot"); the place name takes what's left */
/* (!important: editor.js sets these inline for the ?edit=1 panel) */
.sw-body #panel .pinrow > div > input { width: auto !important; min-width: 0; flex: 1 1 0 !important; }
.sw-body #panel .pinrow > div > select { width: auto !important; flex: 0 0 auto !important; padding-inline: 8px; }
@media (max-width: 480px) { .sw-body #panel .pinrow { padding: 10px 8px; } .sw-body #panel .pinrow .grip { min-width: 24px; padding: 0; } }
.sw-body #panel .pinrow .grip { min-width: 32px; padding: 0 4px; border: 0; background: none; color: var(--muted); font-size: 20px; cursor: grab; touch-action: none; }
.sw-body #panel .pinrow.dragging { position: relative; z-index: 1; box-shadow: 0 8px 20px -8px rgb(var(--shadow) / .5); }
.sw-body #panel .pinrow.dragging .grip { cursor: grabbing; }
.sw-body #panel .pin { height: 220px; border-radius: 3px; }
.sw-body #panel .checklist { border: 1px solid var(--field-edge); border-radius: 3px; padding: 4px 10px; background: var(--paper); overscroll-behavior: contain; }
/* the sticky preview must never hide the field being typed in */
/* (phones only: on desktop the preview sits beside the form, and this margin made a click on a pill near the top of the window
   scroll the whole right column down: owner review 2026-11-05) */
@media (max-width: 860px) { .sw-body #panel :is(input, select, textarea, button) { scroll-margin-top: calc(40svh + 48px); } }
.sw-body #panel .errors { display: none; }
/* choice: a select with a few options, drawn as radio pills */
.sw-body #panel fieldset.choice { border: 0; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.sw-body #panel fieldset.choice legend { font: 600 15px/1.3 var(--font); float: none; margin-bottom: 8px; }
.sw-body #panel .choice label { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; font-weight: 400;
                                background: var(--paper); border: 1px solid var(--field-edge); border-radius: 3px; cursor: pointer; position: relative; }
.sw-body #panel .choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.sw-body #panel .choice label:has(input:checked) { background: var(--walnut); border-color: var(--walnut); color: var(--on-walnut); }
.sw-body #panel .choice label, .sw-body #panel button { transition: transform .1s var(--ease-out), background-color .15s ease, border-color .15s ease; }
.sw-body #panel .choice label:active, .sw-body #panel button:active { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .sw-body #panel .choice label:hover, .sw-body #panel button:hover { border-color: var(--ink); } }
.sw-body #panel .choice label:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
/* a set's locked keys (shop.js disables them, Phase 8): show they can't change, the same way as the ‹ › colour stepper */
.sw-body #panel .choice label:has(input:disabled) { cursor: not-allowed; transform: none; }
.sw-body #panel .choice label:has(input:disabled:not(:checked)) { color: var(--muted); border-style: dashed; }
.sw-body #panel :is(input, select):disabled { cursor: not-allowed; }
.sw-body #panel .choice-head { flex: 0 0 100%; grid-column: 1 / -1; margin-top: 8px; font: 600 14px/1.3 var(--font); color: var(--muted); }  /* owner review 18 */
.sw-body #panel fieldset.choice:has(.choice-head):has(.bubble) { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px 4px; }  /* owner review 20: rows of 5, also at 375px */
.sw-body #panel .choice:has(.choice-head) label:has(.bubble) { min-width: 0; }
@media (max-width: 480px) { .sw-body #panel .choice:has(.choice-head) label:has(.bubble) { font-size: 12px; } }  /* "Draughtsman" clears its neighbour */
/* map styles as round pictures of New York (owner review 4): the picture is the choice, a ring and a tick mark the chosen one */
.sw-body #panel .choice label:has(.bubble) { position: relative; flex-direction: column; gap: 6px; padding: 4px 2px; min-width: 64px;
  background: none; border-color: transparent; color: var(--ink); font-size: 13px; text-align: center; }
.sw-body #panel .choice:has(.bubble) label:not(:has(.bubble)) { width: 52px; height: 52px; min-height: 0; margin-top: 4px; padding: 0; border-radius: 50%;
  justify-content: center; text-align: center; font-size: 11px; line-height: 1.15; }  /* a choice with no picture (Toned set): a plain circle */
.sw-body #panel .bubble { display: block; width: 52px; height: 52px; border-radius: 50%; box-shadow: 0 0 0 1px rgb(var(--shadow) / .3);
  transition: box-shadow .15s ease; }
.sw-body #panel .choice label:has(.bubble):has(input:checked) { background: none; border-color: transparent; color: var(--ink); font-weight: 600; }
.sw-body #panel .choice label:has(input:checked) .bubble { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--walnut); }
.sw-body #panel .choice label:has(.bubble):has(input:checked)::after { content: '✓'; position: absolute; top: 34px; right: 8px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--walnut); color: var(--on-walnut); font-size: 12px; line-height: 20px; text-align: center; }

.sw-buy { margin-top: 24px; border-top: 1px solid var(--rail-edge); padding-top: 20px; display: grid; gap: 14px; }
.sw-price { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sw-price b { font: var(--display-style) var(--display-wt) 34px/1 var(--font-display); font-variant-numeric: lining-nums; }
.sw-price span { color: var(--muted); font-size: 15px; }
.sw-problems { color: var(--error); font-weight: 600; margin: 0; padding: 12px 14px; background: #f6e9e4; border-left: 3px solid var(--error); }
.sw-problems ul { margin: 6px 0 0; padding-left: 18px; font-weight: 400; }
.sw-buy .sw-btn { width: 100%; }
.sw-approve { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; line-height: 1.45; cursor: pointer; }
.sw-approve input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--walnut); cursor: pointer; }
/* Phase 2 formats: framed (above), print only (a bare sheet on the wall) and digital file (the design on a card). shop.js re-fits the
   poster when the format changes, because the frame's padding does. */
.sw-fit .sw-frame:is([data-format="unframed"], [data-format="digital"]) { background: none; box-shadow: none; padding: 0; }
.sw-fit .sw-frame[data-format="unframed"] .sw-mount { background: none; box-shadow: none; padding: 0; }
.sw-fit .sw-frame[data-format="unframed"] #stage { box-shadow: 0 3px 6px rgb(var(--shadow) / .25), 0 40px 70px -30px rgb(var(--shadow) / .6); }
.sw-fit .sw-frame[data-format="digital"] .sw-mount { border-radius: 10px; border: 1px solid var(--rail-edge);
  box-shadow: 0 1px 2px rgb(var(--shadow) / .15), 0 12px 24px -14px rgb(var(--shadow) / .45); }
/* D17: a faint "preview" pattern over the poster, outside #poster (a sibling, so the print is unchanged). In poster px: #stage is
   scaled down to fit, so the tiles are drawn large. */
.sw-fit #stage { position: relative; }
.sw-fit #stage::after { content: ''; position: absolute; inset: 0; z-index: 10; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='560' height='400'%3E%3Cg transform='rotate(-24 280 200)' font-family='Georgia,serif' font-size='34' text-anchor='middle'%3E%3Ctext x='280' y='210' fill='%23000' fill-opacity='.084'%3EStoried Wall %C2%B7 preview%3C/text%3E%3Ctext x='281' y='211' fill='%23fff' fill-opacity='.09'%3EStoried Wall %C2%B7 preview%3C/text%3E%3C/g%3E%3C/svg%3E") 0 0 / 560px 400px; }
.sw-sample-note { max-width: 46ch; margin: 12px auto 0; text-align: center; font: 400 14px/1.45 var(--font); color: var(--muted); }  /* review 46: the pet preview is our sample */
.sw-print-note { display: none; }  /* TODO(launch): re-check the D17 protections (print block, map pixel-ratio cap, overlay) in Chrome, Safari and Firefox. */
@media print {  /* D17: Ctrl+P prints this notice, never the design */
  .sw-fit { display: none !important; }
  .sw-print-note { display: block; font: 400 18px/1.5 var(--font); color: #000; }
}
.sw-format-note { margin: -6px 0 0; color: var(--muted); font-size: 15px; }
.sw-field { display: grid; gap: 6px; font-weight: 600; font-size: 15px; }
.sw-field select { min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--paper);
                   border: 1px solid var(--field-edge); border-radius: 3px; }
.sw-field select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-field-hint { font-weight: 400; font-size: 14px; color: var(--muted); }
.sw-notify { margin-top: 20px; display: grid; gap: 8px; }
.sw-notify[hidden] { display: none; }
.sw-notify label { font-weight: 600; font-size: 15px; }
.sw-notify-hint, .sw-notify-status { margin: 0; font-size: 14px; color: var(--muted); }
.sw-notify-row { display: flex; gap: 8px; flex-wrap: wrap; }
.sw-notify input { flex: 1 1 14em; min-width: 0; min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink);
                   background: var(--paper); border: 1px solid var(--field-edge); border-radius: 3px; }
.sw-notify input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }

.sw-credits { font-size: 14px; color: var(--muted); }
.sw-credits ul { padding-left: 18px; margin: 8px 0 0; }

@media (max-width: 600px) {  /* two prints per row on phones; the pitch is on each product page */
  .sw-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
  .sw-gallery .sw-frame { --mould: 6px; }
  .sw-card-looks { padding-inline: 4px; }
  .sw-card-look { flex-basis: 22px; }  /* WCAG 2.5.8's spacing exception: 26px or more centre to centre */
  .sw-card-look[aria-pressed="true"] { box-shadow: 0 0 0 1px var(--wall), 0 0 0 2.5px var(--walnut); }  /* six across a phone card: the ring clears its neighbours */
  .sw-gallery :is(h2, h3) { font-size: 18px; margin-top: 12px; }
  .sw-gallery p:not(.sw-from) { display: none; }
  .sw-gallery .sw-from { font-size: 14px; }
}
@media (max-width: 860px) {
  .sw-hero, .sw-split { grid-template-columns: minmax(0, 1fr); }
  .sw-product { grid-template-columns: minmax(0, 1fr); padding-top: 0; gap: 16px; }
  .sw-preview { top: 0; z-index: 5; background: var(--wall); margin-inline: calc(-1 * var(--gutter)); padding: 10px var(--gutter);
                box-shadow: 0 8px 12px -10px rgb(var(--shadow) / .5); }
  .sw-fit { height: 40svh; min-height: 240px; }
  .sw-frame { --mould: 9px; }
  }
@media (max-height: 500px) {  /* phone in landscape: no room for a sticky preview */
  .sw-preview { position: static; }
}
/* Cross-fade between pages (Chrome/Edge 126+, Safari 18.2+; others just navigate). An at-rule: nothing inherits into #poster. */
@media (prefers-reduced-motion: no-preference) { @view-transition { navigation: auto; } }
@media (prefers-reduced-motion: reduce) {
  .sw-chrome *, .sw-frame, .sw-btn { transition: none !important; }
}

/* ---- Phase 2b: basket, checkout and order review. A paper sheet on the wall, like an order slip on the framer's counter. ---- */
.sw-header-tools { display: flex; align-items: center; gap: 4px 20px; }
.sw-icon { flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* the basket: a bag icon with a count badge (owner review 2026-11-05) */
.sw-header-basket { position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px;
  color: var(--ink) !important; text-decoration: none; }
.sw-header-basket:hover .sw-icon, .sw-header-basket[aria-current] .sw-icon { stroke-width: 2.2; }
.sw-count { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px;
  background: var(--walnut); color: var(--on-walnut); font: 600 11px/18px var(--font); text-align: center; font-variant-numeric: tabular-nums; }
.sw-count[hidden] { display: none; }
/* phones: the globe and the bag share the wordmark's line (375px: 192 + 12 + 125 of 343px) */
@media (max-width: 860px) { .sw-header { column-gap: 12px; } .sw-header-tools { order: 1; gap: 4px; } .sw-header .sw-nav { order: 2; } }
.sw-basket, .sw-checkout { margin-top: 28px; }
.sw-basket { min-height: 40vh; }  /* the shell holds space while shop.js loads the lines: less layout shift */
.sw-basket-grid, .sw-checkout-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 380px); gap: 32px clamp(32px, 5vw, 72px); align-items: start; }
.sw-lines { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rail-edge); }
.sw-line { display: grid; grid-template-columns: 60px minmax(0, 1fr) auto; gap: 4px 18px; padding: 18px 0; border-bottom: 1px solid var(--rail-edge); }
.sw-line:not(:has(.sw-line-img)) > * { grid-column: 1 / -1; }  /* a line we can't sell has no picture */
.sw-line-img { grid-row: span 3; width: 60px; margin: 0; align-self: start; }
.sw-line-img img { display: block; width: 100%; height: auto; background: var(--paper); padding: 4px; box-sizing: border-box;
                   box-shadow: 0 1px 2px rgb(var(--shadow) / .2), 0 6px 12px -8px rgb(var(--shadow) / .5); }
/* The customer's design: the product page at #view, drawn at 5× and scaled down (pointer-events off: the link takes the click) */
.sw-line-live { display: block; aspect-ratio: 3 / 4; overflow: hidden; position: relative; cursor: zoom-in; }
.sw-line-live iframe { position: absolute; top: 0; left: 0; width: 500%; height: 500%; border: 0; transform: scale(.2); transform-origin: 0 0; pointer-events: none; }
.sw-preview-dlg { width: min(92vw, 720px); height: min(90svh, 900px); padding: 8px; border: 0; background: var(--wall); display: none; flex-direction: column; }
.sw-preview-dlg[open] { display: flex; }
.sw-preview-dlg::backdrop { background: rgb(0 0 0 / .6); }
.sw-preview-dlg form { margin: 0; text-align: right; }
.sw-preview-dlg .sw-linkbtn { color: var(--brass); font-size: 16px; padding: 6px 8px; min-height: 24px; }
.sw-preview-dlg iframe { flex: 1; width: 100%; border: 0; }
/* View mode (#view, shop.js): the product page shows only its framed preview, filling the window */
.sw-view .sw-body > :not(.sw-scope), .sw-view .sw-scope > :not(main, .sw-pinbar), .sw-view .sw-pinbar > :not(svg), .sw-view .sw-product > :not(.sw-preview), .sw-view .sw-preview > :not(.sw-fit) { display: none !important; }
html.sw-view { overflow: hidden; }  /* not inherited: the scope rule allows it */
.sw-view .sw-preview { position: static; margin: 0; padding: 0; height: auto; }
.sw-view :is(.sw-pinbar, .sw-product) { position: static; margin: 0; }
.sw-view .sw-fit { height: 100vh !important; min-height: 0; }
.sw-line-text { min-width: 0; }
.sw-line-text :is(h2, h3) { font: 600 17px/1.3 var(--font); margin: 0 0 2px; }
.sw-line-text p { margin: 0; color: var(--muted); font-size: 15px; }
.sw-line-personal { overflow-wrap: anywhere; }
.sw-line-price { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.sw-line-price span { display: block; font-weight: 400; color: var(--muted); font-size: 14px; }
.sw-line-actions { grid-column: 2 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; margin-top: 8px; font-size: 15px; }
.sw-line-actions a, .sw-linkbtn { color: var(--brass); min-height: 24px; padding: 6px 0; }
.sw-linkbtn { font: inherit; background: none; border: 0; text-decoration: underline; cursor: pointer; }
.sw-line-note { grid-column: 2 / -1; margin: 6px 0 0; font-size: 14px; color: var(--muted); }
.sw-qty { display: flex; align-items: center; gap: 8px; }
.sw-qty select, .sw-field input, .sw-field select { min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink);
  background: var(--paper); border: 1px solid var(--field-edge); border-radius: 3px; }
.sw-qty select { min-height: 40px; padding: 6px 8px; }
.sw-field input:focus-visible, .sw-qty select:focus-visible, .sw-linkbtn:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-summary { background: var(--paper); padding: clamp(20px, 3vw, 28px); display: grid; gap: 12px;
              box-shadow: 0 1px 2px rgb(var(--shadow) / .15), 0 18px 32px -22px rgb(var(--shadow) / .5); }
.sw-summary .sw-btn { width: 100%; }
.sw-summary form { margin: 0; }
.sw-sum-row { display: flex; justify-content: space-between; gap: 12px; margin: 0; font-variant-numeric: tabular-nums; }
.sw-sum-row[hidden] { display: none; }
.sw-sum-row > :last-child { white-space: nowrap; }  /* "−£90" never splits from a long discount name */
.sw-sum-total { border-top: 1px solid var(--rail-edge); padding-top: 12px; align-items: baseline; }
.sw-sum-total b { font: var(--display-style) var(--display-wt) 28px/1 var(--font-display); }
.sw-sum-note { margin: 0; font-size: 14px; color: var(--muted); }
.sw-basket-more { margin: 24px 0 0; }
.sw-summary .sw-basket-more { margin: 0; }
.sw-lines-small .sw-line { grid-template-columns: 44px minmax(0, 1fr) auto; gap: 2px 12px; padding: 12px 0; }
.sw-lines-small .sw-line-img { width: 44px; }
.sw-lines-small .sw-line-img img { padding: 3px; }
.sw-lines-small .sw-line-text :is(h2, h3) { font-size: 15px; }
.sw-lines-small .sw-line-text p { font-size: 14px; }
.sw-checkout-form { display: grid; gap: 28px; min-width: 0; max-width: 36em; }
.sw-checkout-form .sw-field input, .sw-checkout-form .sw-field select, .sw-qty select { box-sizing: border-box; width: 100%; }
.sw-qty select { width: auto; }
.sw-checkout-form > .sw-h3 { margin-top: 12px; }
.sw-fieldset { border: 0; margin: 0; padding: 0; display: grid; gap: 16px; min-width: 0; }
.sw-field-pair { display: grid; gap: 16px; }  /* first and last name: side by side once there's room */
@media (min-width: 560px) { .sw-field-pair { grid-template-columns: 1fr 1fr; } }
.sw-fieldset legend { font: var(--display-style) var(--display-wt) 24px/1.2 var(--font-display); padding: 0; margin-bottom: 12px; }
.sw-field label { font-weight: 600; }
.sw-optional { font-weight: 400; color: var(--muted); }
.sw-field-error { color: var(--error); font-weight: 600; font-size: 15px; }
.sw-field-error::before { content: '! '; }
.sw-invalid input, .sw-invalid select { border: 2px solid var(--error); }
.sw-consent { display: grid; gap: 6px; }
.sw-problems a { color: var(--error); }
.sw-problems p { margin: 0; }
.sw-problems:focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-precontract { padding-left: 18px; margin: 0; display: grid; gap: 8px; }
.sw-address { margin: 0; line-height: 1.5; }
.sw-address, .sw-checkout-form p { overflow-wrap: anywhere; }
.sw-notice { margin: 16px 0 0; font-size: 15px; min-height: 1.5em; }
@media (min-width: 861px) { .sw-summary { position: sticky; top: 24px; } }  /* total and button stay in view beside a long form */
@media (max-width: 860px) {
  .sw-basket-grid, .sw-checkout-grid { grid-template-columns: minmax(0, 1fr); }
}
.sw-checkout > .sw-problems { margin-bottom: 32px; }

/* ---- Phase 7: website. The header menu (_menu.html), breadcrumbs, the homepage, landing pages and the grouped FAQ. ----
   The menu is a row of <details> tabs. An open tab hangs its panel from the picture rail, full width under the header: a shop
   drawer in --paper with a rail-coloured top rule, not a floating dropdown. */
.sw-header { position: relative; }
.sw-nav { flex: 1 1 auto; }
.sw-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 4px 24px; }
.sw-menu-help { margin-left: auto; position: relative; }
.sw-tab > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 7px; min-height: 44px;
  font: 600 15px/1.2 var(--font); color: var(--ink); text-underline-offset: .3em; user-select: none; }
.sw-tab > summary::-webkit-details-marker { display: none; }
.sw-tab > summary::after { content: ''; width: 6px; height: 6px; border: solid currentColor; border-width: 0 1.5px 1.5px 0;
  transform: translateY(-2px) rotate(45deg); }  /* no transition: the panel opens instantly, often from the keyboard */
.sw-tab[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.sw-tab > summary:hover, .sw-tab > summary.sw-tab-here { text-decoration: underline; text-decoration-thickness: 1px; }
.sw-tab[open] > summary { text-decoration: underline; text-decoration-thickness: 2px; }
.sw-mega { position: absolute; z-index: 30; left: 0; right: 0; top: 100%; background: var(--paper); border-top: 1px solid var(--rail-edge);
  padding: 24px var(--gutter) 20px; display: grid; gap: 20px; box-shadow: 0 1px 0 var(--rail-edge), 0 28px 40px -26px rgb(var(--shadow) / .6); }
.sw-mega ul { list-style: none; margin: 0; padding: 0; }
.sw-mega a { color: var(--ink); text-decoration: none; }
.sw-mega li a { display: block; padding: 5px 0; }
.sw-mega a:hover, .sw-mega a[aria-current] { text-decoration: underline; }
.sw-mega-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 190px), 1fr)); gap: 20px 32px; max-width: 1080px; }
.sw-mega-h { font: var(--display-style) var(--display-wt) 20px/1.2 var(--font-display); margin: 0 0 6px; }
@media (min-width: 861px) {  /* review 9: a long column (Love, 16 links) runs in two, so the panel stays short */
  .sw-mega-cols > div:has(li:nth-child(9)) { grid-column: span 2; }
  .sw-mega-cols > div:has(li:nth-child(9)) ul { columns: 2; column-gap: 32px; }
  .sw-mega-cols li { break-inside: avoid; }
}
.sw-mega-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px;
  border-top: 1px solid var(--rail-edge); padding-top: 16px; }
.sw-mega-foot > a:last-child { color: var(--brass); text-decoration: underline; font-weight: 600; }
.sw-mega-feature { display: flex; align-items: center; gap: 14px; font-size: 15px; color: var(--muted) !important; }
.sw-mega-feature b { color: var(--ink); }
.sw-mega-feature img { width: 44px; height: auto; background: #fbfaf6; padding: 3px; box-shadow: 0 0 0 3px var(--black), 0 6px 10px -6px rgb(var(--shadow) / .6); }
.sw-menu-help .sw-mega { left: auto; top: calc(100% + 16px); width: 300px; }  /* right-aligned to the Help tab; 16px is the header's bottom padding, so it still hangs from the rail */
@media (max-width: 860px) {
  .sw-nav { flex-basis: 100%; }
  .sw-menu { justify-content: space-between; gap: 0 8px; }
  .sw-menu-help { margin-left: 0; position: static; }
  .sw-mega { max-height: min(72svh, calc(100svh - 140px)); overflow-y: auto; overscroll-behavior: contain; padding-top: 18px; }
  .sw-mega-cols { grid-template-columns: repeat(auto-fill, minmax(min(100%, 150px), 1fr)); }
  .sw-mega li a { padding-block: 7px; }
  .sw-menu-help .sw-mega { width: auto; left: 0; top: 100%; }
}

/* Owner review 3 (2026-11-06): a tab with a page is a link to it, and a chevron beside it (the <summary>) opens the panel. With a mouse,
   hovering the tab opens it too (shop.js). */
.sw-menu > li { display: flex; align-items: center; }
.sw-chrome .sw-tab-link { display: inline-flex; align-items: center; min-height: 44px; font: 600 15px/1.2 var(--font); color: var(--ink);
  text-decoration: none; text-underline-offset: .3em; }
.sw-tab-link:hover, .sw-tab-link.sw-tab-here { text-decoration: underline !important; text-decoration-thickness: 1px !important; }
.sw-menu > li:has(> .sw-tab[open]) > .sw-tab-link { text-decoration: underline; text-decoration-thickness: 2px; }
.sw-tab > summary.sw-tab-chev { min-width: 24px; justify-content: center; }
/* search: a box in the header on desktop; on phones only its button, which opens /search with a full-width box */
.sw-search { display: flex; align-items: center; }
.sw-search input { min-width: 0; font: 400 16px/1.3 var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--field-edge);
  border-radius: var(--radius); padding: 9px 12px; }
.sw-search input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-search-head input { width: 170px; border-right: 0; border-radius: var(--radius) 0 0 var(--radius); min-height: 40px; box-sizing: border-box; }
.sw-search-head button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; padding: 0;
  background: var(--paper); color: var(--ink); border: 1px solid var(--field-edge); border-radius: 0 var(--radius) var(--radius) 0; cursor: pointer; }
@media (hover: hover) and (pointer: fine) { .sw-search-head button:hover .sw-icon { stroke-width: 2.2; } }
.sw-search-page { gap: 10px; margin-top: 24px; max-width: 560px; }
.sw-search-page input { flex: 1; min-height: 48px; box-sizing: border-box; }
.sw-search-pages { padding-left: 20px; }
.sw-search-pages li { margin-bottom: 6px; }
@media (max-width: 1100px) { .sw-search-head input { width: 130px; } }
@media (max-width: 860px) {
  .sw-search-head input { display: none; }
  .sw-search-head button { background: none; border: 0; min-height: 44px; }
}
/* small phones: wordmark, search, globe and bag on one line (375px: 167 + 8 + 165 of 343px) */
@media (max-width: 420px) {
  .sw-header { --wordmark-size: 22px; --mark-w: 20px; column-gap: 8px; }
  .sw-header .sw-header-tools { gap: 0; }
  .sw-search-head button, .sw-header-basket { min-width: 40px; }
}

/* breadcrumbs (product and landing pages) */
.sw-crumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; font-size: 14px; color: var(--muted); }
.sw-crumbs li + li::before { content: '/'; margin-inline: 8px; color: var(--rail-edge); }
.sw-crumbs a { color: var(--muted) !important; display: inline-block; padding-block: 4px; }
.sw-product > .sw-crumbs { grid-column: 1 / -1; }
@media (min-width: 861px) { .sw-product { row-gap: 8px; } }
@media (max-width: 860px) { .sw-product > .sw-crumbs { padding-top: 8px; } }
.sw-section > .sw-crumbs { margin-bottom: 20px; }

/* product page: the delivery and multi-buy lines under the button, then accordions (in step 3 on phones) */
.sw-buy-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 15px; color: var(--muted); }
.sw-more { margin-top: 24px; }
.sw-more .sw-credits ul { margin-bottom: 10px; }
.sw-more-link { margin: 28px 0 0; }

/* home: hero note, three doors, the editor screenshots, gift chips, why us */
.sw-hero-note { margin-top: 18px; }
.sw-doors { padding-bottom: clamp(48px, 7vw, 96px); }
.sw-doors ul { list-style: none; margin: 0; padding: 0; max-width: 1120px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 3vw, 48px); align-items: start; }
.sw-doors a { display: block; color: var(--ink); text-decoration: none; }
.sw-doors .sw-frame { display: block; transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
@media (hover: hover) and (pointer: fine) {
  .sw-doors a:hover .sw-frame { transform: translateY(-3px); box-shadow: 0 1px 1px rgb(var(--shadow) / .25), 0 24px 36px -14px rgb(var(--shadow) / .55); }
  .sw-doors a:hover h3 { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; }
}
.sw-doors a:active .sw-frame { transform: scale(.99); }
.sw-doors h3 { font: var(--display-style) var(--display-wt) clamp(22px, 2.6vw, 34px)/1.1 var(--font-display); margin: 18px 0 6px; }
.sw-doors p { margin: 0; color: var(--muted); max-width: 22em; }
/* "See exactly what prints" (home.html): desktop, a step list beside one large screenshot that its buttons swap (shop.js);
   ≤860px, each step with its own phone screenshot. */
.sw-steps { margin-top: 36px; display: grid; grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); gap: clamp(24px, 4vw, 56px); align-items: start; }
.sw-shots { list-style: none; padding: 0; margin: 0; display: grid; gap: 4px; }
.sw-shots li { padding: 14px 18px; border-radius: var(--radius); border-left: 3px solid transparent; }
.sw-shots li:has([aria-pressed="true"]) { background: var(--paper); border-left-color: var(--walnut); box-shadow: 0 6px 16px -12px rgb(var(--shadow) / .5); }
.sw-shots h3 { margin: 0; }
.sw-step { all: unset; display: block; min-height: 24px; cursor: pointer; font: inherit; color: var(--ink); }
.sw-step:focus-visible { outline: 2px solid var(--walnut); outline-offset: 4px; border-radius: 2px; }
@media (hover: hover) and (pointer: fine) { .sw-step:hover { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .15em; } }
.sw-shots p { margin: 4px 0 0; color: var(--muted); }
.sw-shot-phone { display: none; }
.sw-step-shots img { display: block; width: 100%; height: auto; border-radius: 12px; background: var(--paper);
  box-shadow: 0 0 0 1px rgb(var(--shadow) / .14), 0 18px 30px -18px rgb(var(--shadow) / .6); }
.sw-step-shots img[hidden] { display: none; }
.sw-section-tight { padding-top: 0; }
.sw-chips { list-style: none; margin: 8px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.sw-chips a { position: relative; display: inline-flex; align-items: center; min-height: 44px; padding: 8px 18px 8px 30px; background: var(--paper);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: 15px; border-radius: 3px 12px 12px 3px;
  box-shadow: 0 4px 10px -6px rgb(var(--shadow) / .45); transition: transform .15s var(--ease-out); }
.sw-chips a::before { content: ''; position: absolute; left: 12px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; border-radius: 50%;
  background: var(--wall); box-shadow: inset 0 0 0 1px rgb(var(--shadow) / .35); }
@media (hover: hover) and (pointer: fine) { .sw-chips a:hover { text-decoration: underline; text-underline-offset: .18em; } }  /* no sticky hover after a tap */
.sw-chips a:active { transform: scale(.97); }
.sw-why ul { list-style: none; margin: 8px 0 0; padding: 8px clamp(20px, 3vw, 36px); max-width: 46em; background: var(--paper);
  box-shadow: 0 1px 2px rgb(var(--shadow) / .15), 0 18px 32px -22px rgb(var(--shadow) / .5); color: var(--muted); }
.sw-why li { padding: 16px 0; }
.sw-why li + li { border-top: 1px solid var(--rail-edge); }
.sw-why b { color: var(--ink); }
@media (max-width: 860px) {
  .sw-steps { grid-template-columns: minmax(0, 1fr); }
  .sw-step-shots { display: none; }
  .sw-shots { gap: 24px; }
  .sw-shots li, .sw-shots li:has([aria-pressed="true"]) { display: grid; grid-template: auto 1fr / 112px minmax(0, 1fr); gap: 0 18px; align-items: start;
    padding: 0; background: none; border: 0; box-shadow: none; }
  .sw-step { cursor: default; pointer-events: none; }  /* every step shows its own shot here, so there's nothing to swap */
  .sw-shot-phone { display: block; grid-row: span 2; width: 100%; height: auto; border-radius: 10px; background: var(--paper);
    box-shadow: 0 0 0 1px rgb(var(--shadow) / .14), 0 18px 30px -18px rgb(var(--shadow) / .6); }
}
@media (max-width: 600px) {
  .sw-doors ul { gap: 14px; }
  .sw-doors .sw-frame { --mould: 6px; }
  .sw-doors h3 { font-size: 19px; margin-top: 12px; }
  .sw-doors p { display: none; }
}

/* landing pages and the grouped FAQ */
.sw-landing-from { margin: 12px 0 0; }
.sw-landing-prints { margin-top: clamp(32px, 4vw, 56px); }
.sw-landing-guide { margin-top: clamp(48px, 6vw, 80px); }
.sw-faq-jump ul { list-style: none; margin: 28px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; }
.sw-faq-jump a { display: inline-flex; align-items: center; min-height: 32px; }
.sw-faq-block > * { max-width: 760px; }  /* left-aligned with the page, not centred like .sw-narrow */
.sw-faq-group { margin-top: 48px; }
.sw-faq-group > h2 { scroll-margin-top: 16px; }
@media (prefers-reduced-motion: reduce) { .sw-doors .sw-frame, .sw-chips a { transition: none; } }

.sw-body #panel .step > fieldset:not(.choice) { border: 0; border-top: 1px solid var(--rail-edge); padding: 14px 0 0; margin: 0;
  display: grid; gap: 16px; min-width: 0; }  /* a page's own group (Place 1, Layout, Stats) inside a step */
.sw-body #panel .step > fieldset:not(.choice) > legend { font: 600 17px/1.3 var(--font); }
/* layout.css (the ?edit=1 panel) makes every panel button full width, which pushed a pin row's ✕ and ↑ off a phone screen */
.sw-body #panel button { width: auto; }
.sw-body #panel .results button { width: 100%; }
/* Phase 10: "Find your course": a row per place and distance, then a chip per year */
.sw-body #panel .courses { display: grid; gap: 8px; }
.sw-body #panel .course { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; font-size: 15px; }
.sw-body #panel .course span { flex: 1 1 10em; }
.sw-body #panel .course button { min-height: 36px; padding: 6px 14px; font-weight: 400; font-size: 14px; border-radius: 18px; }
.sw-body #panel .course button[aria-pressed=true] { background: var(--walnut); color: var(--on-walnut); border-color: var(--walnut); }
/* Phase 15: the mega panel's one grid column may shrink, so its link columns wrap on a phone instead of running off to the right */
.sw-mega { grid-template-columns: minmax(0, 1fr); }
/* Phase 15: the Hill-list map's tick list (peaks.html tickWidget): Tick all / Clear, then a chip per summit, ticked ones filled */
.sw-save .sw-notify { margin-top: 4px; }

/* ---- Phase 8: multi-buy line, sets and email signup ---- */
.sw-offer { margin: 0; font-size: 15px; font-weight: 600; }
.sw-set-mode { margin: 0; padding: 10px 12px; background: var(--paper); border-left: 3px solid var(--brass); font-size: 15px; }
.sw-set-mode[hidden], .sw-setbox[hidden] { display: none; }
.sw-setbox { display: grid; gap: 2px; justify-items: center; text-align: center; }
.sw-setbox .sw-linkbtn { font-weight: 600; min-height: 44px; }
.sw-linkbtn[disabled] { color: var(--muted); cursor: not-allowed; text-decoration: none; }
.sw-set-hint { margin: 0; font-size: 14px; color: var(--muted); }
.sw-set { border-bottom: 1px solid var(--rail-edge); padding-top: 14px; }
.sw-set > .sw-lines { border-top: 0; padding-left: 14px; border-left: 3px solid var(--rail-edge); }
.sw-set > .sw-lines > .sw-line:last-child { border-bottom: 0; }
.sw-set-h { font: 600 15px/1.3 var(--font); margin: 0 0 2px; color: var(--muted); }
.sw-summary .sw-btn.sw-btn-quiet { width: auto; background: none; color: var(--walnut) !important; box-shadow: inset 0 0 0 1px var(--walnut); padding-inline: 18px; }
.sw-summary .sw-btn.sw-btn-quiet:hover { background: var(--rail); }
.sw-summary .sw-cancel { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--rail); }
.sw-summary .sw-cancel .sw-sum-note { margin: 0 0 12px; }
.sw-signup { display: grid; gap: 8px; margin-bottom: 28px; max-width: 40em; }
.sw-signup h2 { font: 600 17px/1.3 var(--font); margin: 0; color: var(--ink); }
.sw-signup p { margin: 0; font-size: 15px; color: var(--muted); }
.sw-signup-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0; }
.sw-signup-row label { flex: 0 0 100%; font-weight: 600; font-size: 15px; }
.sw-signup-row input { flex: 1 1 14em; min-width: 0; min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink);
  background: var(--paper); border: 1px solid var(--field-edge); border-radius: 3px; box-sizing: border-box; }
.sw-signup-row input:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-signup-wrap { padding-block: 8px 48px; }
.sw-signup-panel { margin: 0; max-width: none; background: var(--paper); padding: clamp(20px, 3vw, 32px);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px clamp(24px, 4vw, 56px); align-items: end;
  box-shadow: 0 1px 2px rgb(var(--shadow) / .15), 0 18px 32px -22px rgb(var(--shadow) / .5); }
.sw-signup-panel h2 { font: var(--display-style) var(--display-wt) 24px/1.2 var(--font-display); grid-column: 1; }
.sw-signup-panel p { grid-column: 1; }
.sw-signup-panel form { grid-column: 2; grid-row: 1 / span 2; }
@media (max-width: 720px) {
  .sw-signup-panel { grid-template-columns: minmax(0, 1fr); }
  .sw-signup-panel form { grid-column: 1; grid-row: auto; }
}
.sw-prose .sw-signup-row { max-width: 32em; margin-top: 8px; }
.sw-prose .sw-signup-row .sw-field { flex: 1 1 100%; display: grid; gap: 6px; }

/* ---- Phase 2c: regions and currencies. The region picker (footer, and compact in the header on desktop; shop.js shows both)
   and the delivery table, one row per region. */
.sw-region { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 12px; margin: 0 0 14px; }
.sw-region label { font-weight: 600; color: var(--ink); }
.sw-region select { min-height: 40px; padding: 6px 10px; font: 400 16px/1.4 var(--font); color: var(--ink);
  background: var(--paper); border: 1px solid var(--muted); border-radius: 4px; }
.sw-region select:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
/* the header's region menu: a menu tab (the Phase 7 block) whose summary is a globe and the currency, and whose panel is a short
   radio list, right-aligned to its own tab like Help's */
.sw-regionmenu { position: relative; }
.sw-regionmenu[hidden] { display: none; }
.sw-regionmenu > summary { gap: 6px; font-variant-numeric: lining-nums; }
.sw-regionmenu .sw-mega { left: auto; top: calc(100% + 16px); width: max-content; }  /* as wide as the longest row, so each region stays on one line */
.sw-regionlist { border: 0; margin: 0; padding: 0; display: grid; }
.sw-regionlist label { display: flex; align-items: center; gap: 10px; min-height: 40px; cursor: pointer; white-space: nowrap; }
.sw-regionlist input { width: 18px; height: 18px; margin: 0; accent-color: var(--walnut); }
@media (max-width: 860px) { .sw-regionmenu { position: static; } .sw-regionmenu .sw-mega { width: auto; left: 0; top: 100%; } }
.sw-table-wrap { overflow-x: auto; margin: 0 0 14px; }
.sw-table { border-collapse: collapse; font-size: 15px; width: 100%; }
.sw-table th, .sw-table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--rail); }
.sw-table thead th { font-weight: 600; border-bottom-color: var(--muted); }
.sw-table tbody th { font-weight: 600; }
.sw-table td { font-variant-numeric: tabular-nums; }
@media (hover: hover) { .sw-region select:hover { border-color: var(--ink); } }

/* Phase 10: /course/<slug>: the print beside its title and the two ways in */
.sw-course { display: grid; gap: clamp(24px, 4vw, 56px); align-items: start; }
@media (min-width: 861px) { .sw-course { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); } }
.sw-course-art { max-width: 520px; }
.sw-course-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.sw-course-ctas .sw-btn-quiet { background: none; color: var(--walnut) !important; box-shadow: inset 0 0 0 1px var(--walnut); }
.sw-course-ctas .sw-btn-quiet:hover { background: var(--rail); }
.sw-course-notes { margin-top: 32px; }
.sw-body #panel .hint:empty { display: none; }

/* Owner, 2026-11-07: the marathon pilot (route.html SECTIONS): one scroll, each section titled; the last one a fold.
   Canvas hangs bare with a wrapped edge; the price sits under the title. */
.sw-config > .sw-price { margin: 8px 0 0; }
/* owner review 16: two fields to a row (route.html SECTIONS pairs); one column only on the narrowest phones */
.sw-body #panel .pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 12px; align-items: start; }
@media (max-width: 340px) { .sw-body #panel .pair { grid-template-columns: minmax(0, 1fr); } }
.sw-body #panel .pair :is(input, select) { height: 46px; }
/* owner review 21: Move the map / Done in Fine-tune the design, the print outlined while it moves, and the preview filling the window on the pilot */
.sw-mapmove { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; }
.sw-mapmove p { flex-basis: 100%; margin: 0; color: var(--muted); font-size: 15px; }
.sw-mapmove p:empty { display: none; }
.sw-ghost { min-height: 44px; padding: 8px 18px; font: 600 15px/1.2 var(--font); color: var(--ink); background: var(--paper);
  border: 1px solid var(--field-edge); border-radius: var(--radius); cursor: pointer; }
.sw-ghost[aria-pressed=true] { background: var(--walnut); color: var(--on-walnut); border-color: var(--walnut); }
.sw-ghost:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-frame.sw-unlocked { outline: 3px dashed var(--walnut); outline-offset: 6px; }  /* not #stage (scaled) or the mount (clipped) */
.sw-frame.sw-unlocked #stage { cursor: grab; }
.sw-body #panel .runbtns { display: flex; flex-wrap: wrap; gap: 8px; }
.sw-body #panel .runbtns button { min-height: 44px; }
/* owner review 25: the 16 looks as round pictures, four across; the ring and tick match Fine-tune's chosen map style */
.sw-body #panel .field:has(> .looks) > span:first-child { display: none; }
.sw-body #panel .looks { display: grid; grid-template-columns: repeat(4, minmax(0, 64px)); gap: 12px 16px; }
.sw-body #panel .look { position: relative; aspect-ratio: 1; width: 100%; min-height: 0; padding: 0; border: 0; border-radius: 50%; background: none; cursor: pointer; }
.sw-body #panel .look img { display: block; width: 100%; height: 100%; border-radius: 50%; box-shadow: 0 0 0 1px rgb(var(--shadow) / .3); transition: box-shadow .15s ease; }
.sw-body #panel .look[aria-pressed="true"] img { box-shadow: 0 0 0 3px var(--paper), 0 0 0 5px var(--walnut); }
.sw-body #panel .look[aria-pressed="true"]::after { content: '✓'; position: absolute; right: -2px; bottom: -2px; width: 20px; height: 20px;
  border-radius: 50%; background: var(--walnut); color: var(--on-walnut); font-size: 12px; line-height: 20px; text-align: center; }
.sw-body #panel .look:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.sw-body #panel .looks-name { grid-column: 1 / -1; min-height: 1.4em; margin: 0; color: var(--muted); font-size: 14px; }
.sw-fit .sw-frame[data-format="canvas"] { background: none; box-shadow: none; padding: 0; }
.sw-fit .sw-frame[data-format="canvas"] .sw-mount { background: none; box-shadow: none; padding: 0; }
.sw-fit .sw-frame[data-format="canvas"] #stage { box-shadow: 6px 6px 0 rgb(0 0 0 / .18), 0 3px 6px rgb(var(--shadow) / .25), 0 40px 70px -30px rgb(var(--shadow) / .6); }

/* ---- Customer accounts (app/accounts.py): the same paper slips as the order review. ---- */
.sw-header-account { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; color: var(--ink) !important; text-decoration: none; }
.sw-header-account:hover .sw-icon, .sw-header-account[aria-current] .sw-icon { stroke-width: 2.2; }
.sw-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--walnut); color: var(--on-walnut); font: 600 14px/28px var(--font); text-align: center; }
/* small phones: the globe gives up its "£ GBP" text so the account icon fits (owner 2026-11-08); the list and screen readers still have it */
@media (max-width: 420px) {
  .sw-regionmenu [data-region-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .sw-header-account { min-width: 40px; }
}
.sw-login { max-width: calc(30em + 2 * var(--gutter)); }
.sw-login-form { display: grid; gap: 16px; margin-top: 24px; }
.sw-login-form .sw-btn { justify-self: start; }
.sw-login-form textarea { min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--muted); border-radius: var(--radius); }
.sw-login .sw-problems { margin-top: 20px; }
.sw-login-again, .sw-login-note { margin: 20px 0 0; font-size: 15px; color: var(--muted); }
.sw-login-switch { margin: 24px 0 0; font-size: 16px; }
.sw-login-password { margin-top: 28px; }
.sw-login-password summary, .sw-rename summary, .sw-delete summary { cursor: pointer; color: var(--brass); min-height: 24px; padding-block: 6px; }
.sw-account { display: grid; gap: clamp(40px, 5vw, 64px); }
.sw-account .sw-btn-quiet { background: none; color: var(--walnut) !important; box-shadow: inset 0 0 0 1px var(--walnut); padding-inline: 18px; min-height: 44px; }
.sw-account .sw-btn-quiet:hover { background: var(--rail); }
.sw-account .sw-notice { margin: 0; }
.sw-account-head .sw-lede, .sw-account .sw-line-text h3, .sw-login .sw-lede { overflow-wrap: anywhere; }  /* a long email address or design name */
.sw-account-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; gap: 16px 32px; }
.sw-account-head form { margin: 0; }
.sw-account .sw-h2 { margin-bottom: 16px; }
.sw-account section > p { max-width: 40em; }
.sw-account-form { display: grid; gap: 14px; max-width: 30em; margin-top: 12px; }
.sw-account-form .sw-btn { justify-self: start; }
.sw-slip { background: var(--paper); padding: clamp(16px, 2.5vw, 28px); margin-bottom: 20px; }
.sw-slip-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 24px; margin-bottom: 14px; }
.sw-slip-head p, .sw-slip-head .sw-h3 { margin: 0; }
.sw-slip .sw-line:last-child { border-bottom: 0; padding-bottom: 0; }
.sw-slip-head a { margin-right: 16px; padding-block: 6px; display: inline-block; }
.sw-slip-total { font-weight: 600; font-variant-numeric: lining-nums tabular-nums; margin-left: auto !important; }
.sw-line-actions form { margin: 0; }
.sw-line-actions .sw-notify-row { margin-top: 8px; }
.sw-line-actions input { flex: 1 1 12em; min-height: 44px; padding: 8px 10px; font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--muted); border-radius: var(--radius); }
.sw-delete { margin-top: 8px; max-width: 40em; }
.sw-save-account { margin: 0 0 8px; font-size: 15px; }
.sw-receipt { max-width: 36em; }
.sw-receipt .sw-h1 { font-size: 40px; }
.sw-receipt p { margin: 0; }
@media print {
  body:has(.sw-receipt) :is(.sw-header, .sw-rail, .sw-skip, footer, .sw-receipt-actions) { display: none !important; }
  .sw-receipt { box-shadow: none; padding: 0; }
}

/* Review 27: the product's paragraph, below the editor */
.sw-about p { max-width: 62ch; margin: 12px 0 0; }

/* Stationer's Studio: the chrome and the one solid block in the buy colour */
.sw-btn { background: var(--walnut); border-radius: 12px; font: 700 18px/1.2 var(--font); min-height: 56px; transition: transform .1s var(--u-ease); }
.sw-btn:active { transform: scale(.98); }
.sw-btn[disabled] { background: var(--u-sage); color: var(--u-sage-ink) !important; }
.sw-buy-notes { color: var(--muted); }
.sw-linkbtn { color: var(--brass); }
.sw-faq summary { font-weight: 500; }
.sw-faq summary::after { content: ''; top: 50%; width: 18px; height: 18px; margin-top: -9px; background: var(--u-chev) center / contain no-repeat; }
.sw-faq details[open] summary::after { transform: rotate(180deg); }
.sw-faq details { border-color: var(--rail-edge); }
.sw-header { background: var(--paper); }
.sw-band { background: var(--rail); }
.sw-footer { --ink: #f6f8f0; --muted: #d1d8ce; --brass: #f6f8f0; --rail-edge: #6d8270; background: var(--walnut); box-shadow: 0 0 0 100vmax var(--walnut); clip-path: inset(0 -100vmax); color: var(--ink); }
.sw-footer a { color: inherit; }
.sw-footer select, .sw-footer input { color: #1f2a22; background-color: #fff; }
::selection { background: var(--u-sage); }
.sw-buy-notes { font-size: 14px; line-height: 1.35; }
/* the header menu fits one line at 375 */
@media (max-width: 480px) { .sw-header .sw-menu { gap: 0 4px; } .sw-header .sw-menu :is(a, summary) { font-size: 14px; } }
/* WCAG reflow at 320: the menu wraps rather than widening the page */
@media (max-width: 480px) { .sw-header .sw-menu { flex-wrap: wrap; justify-content: flex-start; } .sw-header .sw-nav { min-width: 0; max-width: 100%; } }  /* review 46: six tabs with Portraits don't fit one phone row */

/* The download page (main.download): one row per digital print, PNG and PDF side by side. */
.sw-downloads { list-style: none; margin: 24px 0; padding: 0; }
.sw-download { padding: 16px 0; border-bottom: 1px solid var(--rail); }
.sw-download p { margin: 0; }
.sw-download-btns { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px !important; }
.sw-download-btns .sw-btn-quiet { background: none; color: var(--walnut) !important; box-shadow: inset 0 0 0 1px var(--walnut); }
.sw-download-btns .sw-btn-quiet:hover { background: var(--rail); }
.sw-voucher-apply { display: block; margin: 0 auto 0 0; }

/* cookie banner (consent.js, _footer.html): a card at the foot of the screen, never over the whole page. Accept and Reject look the same, and neither is the buy colour */
.sw-cookies { position: fixed; z-index: 60; inset-inline: 12px; bottom: max(12px, env(safe-area-inset-bottom)); max-width: 560px; margin-inline: auto;
              max-height: 70svh; overflow: auto; padding: 16px 18px; border-radius: var(--radius); background: var(--paper); color: var(--ink);
              font: 400 15px/1.45 var(--font); box-shadow: var(--u-card-shadow), 0 0 0 1px var(--rail-edge); }
.sw-cookies h2 { margin: 0 0 6px; font: var(--display-wt) 19px/1.2 var(--font-display); font-variant-numeric: lining-nums; }
.sw-cookies p { margin: 0 0 12px; }
.sw-cookies a { color: var(--brass); }
.sw-cookies-choose { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; border: 0; }
.sw-cookies-choose[hidden] { display: none; }
.sw-cookies-choose label { display: flex; gap: 10px; align-items: flex-start; min-height: 24px; cursor: pointer; }
.sw-cookies-choose input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--walnut); }
.sw-cookies-row { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; }
.sw-cookies-btn { min-height: 44px; padding: 10px 18px; border: 1px solid var(--walnut); border-radius: var(--radius); background: var(--paper); color: var(--walnut);
                  font: 600 15px/1.2 var(--font); cursor: pointer; touch-action: manipulation; transition: background-color .15s ease; }
.sw-cookies-btn:hover { background: var(--u-tile); }
.sw-cookies-btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sw-footer nav .sw-linkbtn { color: var(--ink); padding: 6px 0; font-size: inherit; }
@media (max-width: 480px) { .sw-cookies-row .sw-cookies-btn:not([data-consent=save]) { flex: 1 1 0; } }
@media (prefers-reduced-motion: reduce) { .sw-cookies-btn { transition: none; } }

/* /owner (app/owner.py): the owner's working page. Plain and phone-first; only for the owner, so no showpiece */
.sw-owner > * { max-width: 56rem; }
.sw-owner section { margin-top: 36px; }
.sw-owner h3 { font: 600 17px/1.3 var(--font); margin: 20px 0 8px; }
.sw-owner-card { background: var(--paper); border: 1px solid var(--rail); border-radius: var(--radius); padding: 14px 16px; margin: 0 0 12px; overflow-wrap: anywhere; }
.sw-owner-card p, .sw-owner-card ul { margin: 0 0 8px; }
.sw-owner-card form { display: grid; gap: 10px; margin-top: 10px; }
.sw-owner-card summary { cursor: pointer; font-weight: 600; min-height: 24px; }
.sw-owner-text { white-space: pre-wrap; }
.sw-owner-hint { color: var(--muted); margin: 0 0 8px; }
.sw-owner-note { background: var(--rail); border-radius: var(--radius); padding: 10px 14px; }
.sw-owner :is(input, textarea) { width: 100%; min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink);
                                 background: var(--paper); border: 1px solid var(--muted); border-radius: var(--radius); box-sizing: border-box; }
.sw-owner :is(input, textarea):focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.sw-owner-find { display: grid; gap: 6px; font-weight: 600; margin-top: 20px; }
.sw-owner-find div { display: flex; gap: 8px; }
.sw-owner-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 0; border-bottom: 1px solid var(--rail); overflow-wrap: anywhere; }
.sw-owner-row a { flex: 1 1 100%; }
@media (min-width: 700px) { .sw-owner-row a { flex-basis: 14em; } }
.sw-btn.sw-owner-quiet { background: none; color: var(--walnut) !important; box-shadow: inset 0 0 0 1px var(--walnut); padding-inline: 18px; min-height: 44px; }
.sw-btn.sw-owner-quiet:hover { background: var(--rail); }
.sw-owner-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.sw-owner-tabs a { padding: 8px 14px; border-radius: var(--radius); box-shadow: inset 0 0 0 1px var(--rail); min-height: 24px; }
.sw-owner-tabs a[aria-current] { background: var(--walnut); color: var(--on-walnut); }
.sw-owner-scroll { overflow-x: auto; }
.sw-owner-table { border-collapse: collapse; min-width: 34rem; font-variant-numeric: lining-nums tabular-nums; }
.sw-owner-table :is(th, td) { padding: 8px 10px; border-bottom: 1px solid var(--rail); text-align: right; }
.sw-owner-table :is(th:first-child) { text-align: left; }
.sw-owner-total :is(th, td) { font-weight: 700; border-bottom: 0; }
.sw-owner select { min-height: 46px; padding: 10px 12px; font: 400 16px/1.4 var(--font); color: var(--ink); background: var(--paper); border: 1px solid var(--muted); border-radius: var(--radius); }
.sw-owner-costform { display: grid; gap: 12px; }
@media (min-width: 700px) { .sw-owner-costform { grid-template-columns: repeat(2, 1fr); } .sw-owner-costform .sw-btn { justify-self: start; } }