/* Sundial Samples: the Samples page picker (block sundial/samples). A port of the owner-approved preview
   samples-new.css (website-options/site/assets/components/samples-new.css, 28 Sep 2026): same classes (sn-), same
   rules. Differences: the owner-only "Show sample code" strip is gone (it is a dashboard setting now), every colour
   token has the preview's value as a fallback (the Sundial theme's own tokens win when it is active), and the few
   base rules the preview took from the theme (buttons, icons, .wrap, .sr-only) are repeated here, scoped to the
   block, so it looks the same under any theme. */

/* ---- base, scoped to the block (the preview had these from the theme). Specificity 0,1,0 via :where(), so the
   block's own class rules below win exactly as they did over the theme's element rules in the preview, and a
   theme's element rules (h2, button, img …) never win over them. ---- */
.sn, .sn-sheet, .sn-zoom { font-family: var(--font, "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif);
  font-size: 17px; line-height: 1.6; color: var(--ink, #1D1D1F); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; letter-spacing: normal; }
.sn :where(*, *::before, *::after), .sn-sheet :where(*, *::before, *::after), .sn-zoom :where(*, *::before, *::after) { box-sizing: border-box; }
.sn :where(img), .sn-sheet :where(img), .sn-zoom :where(img) { display: block; max-width: 100%; height: auto; }
.sn :where(a), .sn-sheet :where(a) { color: inherit; }
.sn :where(button, input, select, textarea), .sn-sheet :where(button, input, select), .sn-zoom :where(button) { font: inherit; color: inherit; letter-spacing: normal; text-transform: none; }
.sn :where(button), .sn-sheet :where(button), .sn-zoom :where(button) { cursor: pointer; }
.sn :where(h1, h2, h3, h4), .sn-sheet :where(h2, h3) { margin: 0; font-family: inherit; font-weight: 600; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; color: inherit; text-transform: none; }
.sn :where(p), .sn-sheet :where(p), .sn-zoom :where(p) { margin: 0; text-wrap: pretty; }
.sn :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
.sn :where(strong, b), .sn-sheet :where(strong, b) { font-weight: 700; }
.sn :where(dl, dd, dt), .sn-sheet :where(dl, dd, dt) { margin: 0; }
.sn :where(:focus-visible), .sn-sheet :where(:focus-visible), .sn-zoom :where(:focus-visible) { outline: 2px solid var(--iris, #0066CC); outline-offset: 3px; border-radius: 6px; }
.sn :where(.sr-only), .sn-sheet :where(.sr-only) { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.sn :where(.i), .sn-sheet :where(.i), .sn-zoom :where(.i) { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sn > .wrap { width: 100%; max-width: calc(var(--wrap, 1240px) + var(--gut, 32px) * 2); margin: 0 auto; padding: 0 var(--gut, 32px); }
@media (max-width: 1024px) { .sn > .wrap { padding: 0 var(--gut, 28px); } }
.sn :where(.btn), .sn-sheet :where(.btn), .sn-zoom :where(.btn) { --h: 52px; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: var(--h); padding: 0 22px;
  border-radius: 12px; border: 1px solid transparent; font-size: 16px; font-weight: 600; letter-spacing: -0.005em; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background-color .2s var(--ease, cubic-bezier(.2, .7, .2, 1)), border-color .2s var(--ease, cubic-bezier(.2, .7, .2, 1)), color .2s var(--ease, cubic-bezier(.2, .7, .2, 1)), transform .2s var(--ease, cubic-bezier(.2, .7, .2, 1)); }
.sn :where(.btn .i), .sn-sheet :where(.btn .i), .sn-zoom :where(.btn .i) { width: 18px; height: 18px; }
.sn :where(.btn--sm), .sn-sheet :where(.btn--sm), .sn-zoom :where(.btn--sm) { --h: 42px; padding: 0 16px; font-size: 15px; border-radius: 10px; }
.sn :where(.btn--primary), .sn-sheet :where(.btn--primary) { background: var(--iris, #0066CC); color: var(--on-accent, #FFFFFF); box-shadow: none; }
.sn :where(.btn--primary):hover, .sn-sheet :where(.btn--primary):hover { background: var(--iris-h, #0055AA); color: var(--on-accent, #FFFFFF); }
.sn :where(.btn--primary):active, .sn-sheet :where(.btn--primary):active { transform: translateY(1px); }
.sn :where(.btn--ghost), .sn-sheet :where(.btn--ghost), .sn-zoom :where(.btn--ghost) { background: var(--white, #FFFFFF); color: var(--ink, #1D1D1F); border-color: var(--line, #E5E5EA); }
.sn :where(.btn--ghost):hover, .sn-sheet :where(.btn--ghost):hover, .sn-zoom :where(.btn--ghost):hover { border-color: var(--line-strong, #86868B); }
@media (max-width: 720px) { .sn :where(.btn--sm), .sn-sheet :where(.btn--sm), .sn-zoom :where(.btn--sm) { --h: 44px; } .sn > .wrap { padding: 0 var(--gut, 20px); } }
@media (prefers-reduced-motion: reduce) { .sn :where(*, *::before, *::after), .sn-sheet :where(*), .sn-zoom :where(*) { transition-duration: .01ms !important; animation-duration: .01ms !important; } }

.sn { background: var(--paper, #F5F5F7); padding: 20px 0 48px; }
.sn [hidden] { display: none !important; }

/* ---- the shell (like the Builder's) ---- */
/* no scroll-margin here or on the drop-down button: site.css already sets html scroll-padding-top (header + 16px); both
   together sent them 80px further down (28 Sep review) */
.sn-shell { background: var(--white, #FFFFFF); border-radius: 24px; box-shadow: 0 40px 80px -48px rgba(var(--shadow-rgb, 29, 29, 31), .5), 0 0 0 1px var(--line, #E5E5EA); }
.sn-top { display: flex; align-items: center; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--line, #E5E5EA); }
.sn-title { margin: 0; display: flex; align-items: center; gap: 10px; font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; }
.sn-title .i { width: 20px; height: 20px; color: var(--deco, #1D1D1F); }
.sn-top__note { margin: 0 0 0 auto; display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--ink-3, #636366); }
.sn-top__note .i { width: 16px; height: 16px; }

.sn-steps__list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0 28px; list-style: none; border-bottom: 1px solid var(--line, #E5E5EA); }
.sn-step { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; min-height: 64px; padding: 10px 16px 12px 0; border: 0; background: none;
  font: inherit; color: var(--ink-3, #636366); text-align: left; cursor: pointer; }
.sn-step::after { content: ""; position: absolute; left: 0; right: 16px; bottom: -1px; height: 3px; border-radius: 3px; background: transparent; }
.sn-step__n { width: 28px; height: 28px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--mist, #EDEDF0); color: var(--ink-2, #424245);
  font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.sn-step__t { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.sn-step__l { font-size: 14px; font-weight: 600; }
.sn-step__v { font-size: 13px; font-weight: 500; color: var(--ink-3, #636366); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sn-step--current { color: var(--ink, #1D1D1F); }
.sn-step--current .sn-step__n { background: var(--iris, #0066CC); color: var(--on-accent, #FFFFFF); }
.sn-step--current::after { background: var(--grad, linear-gradient(90deg, #1D1D1F 0%, #1D1D1F 100%)); }
.sn-step--done .sn-step__l { color: var(--ink-2, #424245); }
.sn-step--done .sn-step__n { background: var(--iris-soft, #EEF4FB); color: var(--iris, #0066CC); }
.sn-step--done::after { background: var(--iris-line, #C6DCF2); }
.sn-step--done .sn-step__v { color: var(--ink, #1D1D1F); }
.sn-step:disabled { cursor: default; }
.sn-step:not(:disabled):hover .sn-step__l { text-decoration: underline; text-underline-offset: 4px; }
.sn-step:focus-visible { outline-offset: -2px; }

.sn-body { display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 620px; }
.sn-main { min-width: 0; display: flex; flex-direction: column; padding: 28px 28px 0; }
.sn-side { border-left: 1px solid var(--line, #E5E5EA); background: var(--tint-3, #FAFAFC); padding: 24px; border-radius: 0 0 24px 0; }
.sn-panel { flex: 1 0 auto; }

.sn-q { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.sn-q__h { margin: 0; font-size: 26px; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.sn-q__h:focus { outline: none; }
.sn-q__meta { flex: none; font-size: 13px; font-weight: 600; color: var(--ink-3, #636366); font-variant-numeric: tabular-nums; }
.sn-help { margin: 6px 0 20px; max-width: 64ch; font-size: 16px; line-height: 1.55; color: var(--ink-2, #424245); }

/* ---- choice cards (products, light levels): the Builder's option cards, radio on the right ---- */
.sn-opt { position: relative; display: flex; margin: 0; padding: 0; border: 1px solid var(--line, #E5E5EA); border-radius: 16px; background: var(--white, #FFFFFF);
  font: inherit; color: var(--ink, #1D1D1F); text-align: left; cursor: pointer; transition: border-color .15s var(--ease, cubic-bezier(.2, .7, .2, 1)), box-shadow .15s var(--ease, cubic-bezier(.2, .7, .2, 1)); }
.sn-opt:hover { border-color: var(--line-strong, #86868B); }
.sn-opt[aria-checked="true"] { border-color: var(--iris, #0066CC); box-shadow: 0 0 0 1px var(--iris, #0066CC); }
.sn-radio { position: absolute; width: 22px; height: 22px; border-radius: 50%; border: 2px solid var(--control-line, #86868B); background: var(--white, #FFFFFF); }
.sn-opt[aria-checked="true"] .sn-radio { border-color: var(--iris, #0066CC); background: var(--iris, #0066CC); box-shadow: inset 0 0 0 4px var(--white, #FFFFFF); }

.sn-prods { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.sn-prod { flex-direction: column; overflow: hidden; }
.sn-prod__media { display: block; aspect-ratio: 16 / 10; background: var(--mist, #EDEDF0); overflow: hidden; }
.sn-prod__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-prod__body { display: flex; flex-direction: column; gap: 2px; padding: 12px 44px 14px 14px; }
.sn-prod__name { font-size: 15px; font-weight: 600; line-height: 1.3; }
.sn-prod__meta { font-size: 13px; color: var(--ink-3, #636366); font-variant-numeric: tabular-nums; }
.sn-prod .sn-radio { right: 14px; bottom: 15px; }

.sn-lvls { display: grid; grid-template-columns: repeat(var(--sn-n, 4), minmax(0, 1fr)); gap: 14px; }
.sn-lvl { flex-direction: column; gap: 8px; padding: 16px 16px 16px; }
.sn-lvl__top { display: flex; align-items: center; gap: 8px; padding-right: 30px; }
.sn-lvl .sn-radio { top: 14px; right: 14px; }
.sn-lvl__name { font-size: 17px; font-weight: 600; line-height: 1.25; }
.sn-lvl__n { margin-top: -6px; font-size: 13px; font-weight: 600; color: var(--ink-3, #636366); font-variant-numeric: tabular-nums; }
.sn-lvl__plain { font-size: 14px; line-height: 1.5; color: var(--ink-2, #424245); }
.sn-lvl__strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin-top: auto; padding-top: 6px; }
.sn-lvl__strip span { display: block; aspect-ratio: 1; border-radius: 6px; overflow: hidden; background: var(--sn-hx, var(--mist, #EDEDF0)); box-shadow: 0 0 0 1px rgba(var(--shadow-rgb, 29, 29, 31), .08); }
.sn-lvl__strip img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-lvl--all { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 12px; min-height: 56px; padding: 10px 16px 10px 48px; }
.sn-lvl--all .sn-radio { top: 50%; left: 14px; right: auto; margin-top: -11px; }
.sn-lvl--all strong { font-size: 15px; font-weight: 600; }
.sn-lvl--all span { font-size: 14px; color: var(--ink-3, #636366); }

.sn-meter { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--ink-2, #424245); }
.sn-meter__b { display: inline-flex; gap: 3px; }
.sn-meter__b i { width: 14px; height: 6px; border-radius: 3px; background: var(--mist, #EDEDF0); box-shadow: inset 0 0 0 1px rgba(var(--shadow-rgb, 29, 29, 31), .06); }
.sn-meter__b i.sn-on { background: var(--sun, #F5A300); box-shadow: none; }

/* ---- step 2, the colours: they open right under the light levels (no Next in between) ---- */
.sn-reveal { display: grid; grid-template-rows: 0fr; opacity: 0; }
.sn-reveal.is-open { grid-template-rows: 1fr; opacity: 1; }
.sn-reveal__in { min-height: 0; min-width: 0; overflow: hidden; padding-top: 24px; }
.sn-reveal.is-done .sn-reveal__in { overflow: visible; }
@media (prefers-reduced-motion: no-preference) {
  .sn-reveal { transition: grid-template-rows .42s var(--ease, cubic-bezier(.2, .7, .2, 1)), opacity .32s ease-out; }
  .sn-reveal.sn-swap .sn-results { animation: sn-fade .28s ease-out; }
}
.sn-sub { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 20px; border-top: 1px solid var(--line, #E5E5EA); }
.sn-sub__h { margin: 0; font-size: 20px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.sn-sub__h:focus { outline: none; }
.sn[data-skip] .sn-reveal__in { padding-top: 12px; }
/* one line that keeps its size: what is shown, or after a new light level the short notice (polite live region) */
.sn-note { display: flex; align-items: flex-start; gap: 8px; min-height: 42px; margin: 12px 0 14px; padding: 9px 12px; border-radius: 10px;
  background: var(--tint-3, #FAFAFC); box-shadow: inset 0 0 0 1px var(--line, #E5E5EA); font-size: 14px; line-height: 1.5; color: var(--ink-2, #424245);
  transition: background-color .2s var(--ease, cubic-bezier(.2, .7, .2, 1)), box-shadow .2s var(--ease, cubic-bezier(.2, .7, .2, 1)); }
.sn-note > .i { width: 18px; height: 18px; flex: none; margin-top: 2px; color: var(--ink-3, #636366); }
.sn-note__t { min-width: 0; }
.sn-note--changed { background: var(--iris-soft, #EEF4FB); box-shadow: inset 0 0 0 1px var(--iris-line, #C6DCF2); color: var(--ink, #1D1D1F); font-weight: 500; }
.sn-note--changed > .i { color: var(--iris, #0066CC); }
.sn-note--changed .sn-note__d { display: none; }

/* ---- the colours: fabric type, search, colour groups, count ---- */
/* one row each, label on the left (100px); on wide screens fabric type and search share a row */
.sn-tools { display: flex; flex-direction: column; align-items: stretch; gap: 12px; }
.sn-fab { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sn-fab__l { flex: none; width: 100px; font-size: 14px; font-weight: 600; color: var(--ink, #1D1D1F); }
.sn-select { position: relative; display: flex; align-items: center; width: 300px; max-width: 100%; min-width: 0; }
.sn-select__in { width: 100%; height: 48px; padding: 0 42px 0 14px; border: 1px solid var(--field-line, #86868B); border-radius: 12px; background: var(--white, #FFFFFF);
  font: inherit; font-size: 16px; color: var(--ink, #1D1D1F); -webkit-appearance: none; appearance: none; cursor: pointer; text-overflow: ellipsis; }
.sn-select__in:hover { border-color: var(--field-line-hover, var(--ink-2, #424245)); }
.sn-select__in:focus-visible { outline: 2px solid var(--iris, #0066CC); outline-offset: 1px; border-color: var(--iris, #0066CC); }
.sn-select > .i { position: absolute; right: 14px; width: 18px; height: 18px; color: var(--ink-2, #424245); pointer-events: none; }
.sn-search { flex: 1; min-width: 0; }
.sn-search--main { display: flex; align-items: center; gap: 12px; }
.sn-search--main .sn-search__l { flex: none; width: 100px; margin: 0; }
.sn-search--main .sn-search__box { flex: 1; min-width: 0; }
@media (min-width: 1280px) {
  .sn-tools { flex-direction: row; align-items: center; gap: 12px 24px; }
  .sn-fab { flex: none; }
  .sn-select { width: 280px; }
  .sn-fab:not([hidden]) + .sn-search--main .sn-search__l { width: auto; }
}
.sn-search__l { display: block; margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--ink, #1D1D1F); }
.sn-search__box { position: relative; display: flex; align-items: center; }
.sn-search__box .i { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--ink-3, #636366); pointer-events: none; }
.sn-search__in { width: 100%; height: 48px; padding: 0 14px 0 44px; border: 1px solid var(--field-line, #86868B); border-radius: 12px; background: var(--white, #FFFFFF);
  font: inherit; font-size: 16px; color: var(--ink, #1D1D1F); }
.sn-search__in::placeholder { color: var(--ink-3, #636366); opacity: 1; }
.sn-search__in:hover { border-color: var(--field-line-hover, var(--ink-2, #424245)); }
.sn-search__in:focus-visible { outline: 2px solid var(--iris, #0066CC); outline-offset: 1px; border-color: var(--iris, #0066CC); }
.sn-view { display: none; flex: none; align-self: center; padding: 3px; border-radius: 12px; background: var(--mist, #EDEDF0); }
.sn-view__b { display: inline-flex; align-items: center; gap: 6px; min-height: 42px; padding: 0 14px; border: 0; border-radius: 9px; background: none;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2, #424245); cursor: pointer; }
.sn-view__b .i { width: 18px; height: 18px; }
.sn-view__b[aria-pressed="true"] { background: var(--white, #FFFFFF); color: var(--ink, #1D1D1F); box-shadow: 0 1px 2px rgba(var(--shadow-rgb, 29, 29, 31), .12); }

.sn-tones { display: flex; align-items: flex-start; gap: 12px; margin-top: 12px; }
.sn-tones__l { flex: none; width: 100px; padding-top: 8px; font-size: 14px; font-weight: 600; }
.sn-tones__row { display: flex; flex-wrap: wrap; gap: 6px; min-width: 0; }
.sn-chip { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 0 10px 0 7px; border: 1px solid var(--line, #E5E5EA); border-radius: 999px;
  background: var(--white, #FFFFFF); font: inherit; font-size: 14px; font-weight: 500; color: var(--ink, #1D1D1F); white-space: nowrap; cursor: pointer; }
.sn-chip:hover { border-color: var(--line-strong, #86868B); }
.sn-chip__dot { width: 18px; height: 18px; flex: none; border-radius: 50%; background: var(--sn-hx, var(--mist, #EDEDF0)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .18); }
.sn-chip__dot--all { background: conic-gradient(#F4F3EF 0 12%, #E6D8BC 0 24%, #9EA2A6 0 36%, #7A5A40 0 48%, #1D1D1F 0 60%, #4F6F9E 0 72%, #8FA66B 0 84%, #C4655F 0 92%, #E2B34A 0); }
.sn-chip__dot--pattern { background: repeating-linear-gradient(135deg, #7A5A40 0 3px, #E6D8BC 3px 6px); }
.sn-chip__n { font-size: 13px; color: var(--ink-3, #636366); font-variant-numeric: tabular-nums; }
.sn-chip[aria-pressed="true"] { background: var(--ink, #1D1D1F); border-color: var(--ink, #1D1D1F); color: var(--white, #FFFFFF); }
.sn-chip[aria-pressed="true"] .sn-chip__n { color: rgba(255, 255, 255, .82); }
.sn-chip[aria-pressed="true"] .sn-chip__dot { box-shadow: 0 0 0 2px var(--white, #FFFFFF); }
.sn-chip[aria-disabled="true"] { opacity: .42; cursor: default; }
.sn-chip[aria-disabled="true"]:hover { border-color: var(--line, #E5E5EA); }

.sn-count { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; min-height: 44px; margin: 10px 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--line, #E5E5EA); }
.sn-count__t { margin: 0; font-size: 14px; color: var(--ink-2, #424245); font-variant-numeric: tabular-nums; }
.sn-count__t strong { color: var(--ink, #1D1D1F); }
.sn-linkbtn, .sn-clear { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 0; border: 0; background: none; font: inherit;
  font-size: 14px; font-weight: 600; color: var(--iris-text, #0066CC); cursor: pointer; }
.sn-linkbtn:hover, .sn-clear:hover { text-decoration: underline; text-underline-offset: 4px; }
.sn-clear { margin-left: auto; }

.sn-clear .i { width: 16px; height: 16px; }
.sn-clear[aria-hidden="true"] { visibility: hidden; }

/* ---- the grid: every photo with its colour and fabric name ---- */
.sn-results { min-height: 420px; }
.sn-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(116px, 1fr)); gap: 16px 12px; align-items: start; }
.sn-grid--slat { grid-template-columns: repeat(auto-fill, minmax(176px, 1fr)); }
.sn-card { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; border: 0; border-radius: 12px; background: none; font: inherit; color: inherit;
  text-align: left; cursor: pointer; }
.sn-card__img { position: relative; display: block; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--sn-hx, var(--mist, #EDEDF0));
  box-shadow: 0 0 0 1px rgba(var(--shadow-rgb, 29, 29, 31), .10); transition: box-shadow .15s var(--ease, cubic-bezier(.2, .7, .2, 1)); }
.sn-grid--tall .sn-card__img { aspect-ratio: 2 / 3; }
.sn-grid--slat .sn-card__img { aspect-ratio: 4 / 1; }
.sn-card__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sn-card:hover .sn-card__img { box-shadow: 0 0 0 1px var(--line-strong, #86868B); }
.sn-card[aria-pressed="true"] .sn-card__img { box-shadow: 0 0 0 2px var(--white, #FFFFFF), 0 0 0 4px var(--iris, #0066CC); }
.sn-card__tick { position: absolute; top: 6px; right: 6px; width: 24px; height: 24px; display: none; place-items: center; border-radius: 50%; background: var(--iris, #0066CC);
  color: var(--white, #FFFFFF); box-shadow: 0 0 0 2px var(--white, #FFFFFF); }
.sn-card__tick .i { width: 14px; height: 14px; }
.sn-card[aria-pressed="true"] .sn-card__tick { display: grid; }
.sn-card__name { font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink, #1D1D1F); overflow-wrap: anywhere; }
.sn-card__sub { margin-top: -5px; font-size: 13px; line-height: 1.3; color: var(--ink-3, #636366); overflow-wrap: anywhere; }
.sn-card:focus-visible { outline: 2px solid var(--iris, #0066CC); outline-offset: 4px; }
.sn-lab { margin: 0; align-self: stretch; display: flex; flex-direction: column; gap: 4px; padding: 12px; border-radius: 12px; background: var(--paper, #F5F5F7);
  box-shadow: inset 0 0 0 1px var(--line, #E5E5EA); }
.sn-lab__n { font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--ink, #1D1D1F); overflow-wrap: anywhere; }
.sn-lab__c { font-size: 13px; font-weight: 500; color: var(--ink-3, #636366); font-variant-numeric: tabular-nums; }
.sn-lab__lv { margin-top: auto; }
.sn-skel { aspect-ratio: 1; border-radius: 12px; background: var(--mist, #EDEDF0); }
.sn-grid--tall .sn-skel { aspect-ratio: 2 / 3; }
.sn-empty { padding: 28px 20px; border: 1px dashed var(--line-strong, #86868B); border-radius: 16px; text-align: center; color: var(--ink-2, #424245); font-size: 15px; }
.sn-empty p { margin: 0 0 8px; }

/* ---- phones and tablets: the drop-down with a small photo and name per colour ---- */
.sn-dd { display: none; }
.sn[data-view="list"] .sn-dd { display: block; }
.sn[data-view="list"] .sn-grid, .sn[data-view="list"] .sn-search--main { display: none; }
.sn-dd__btn { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 68px; padding: 8px 14px 8px 8px; border: 1px solid var(--field-line, #86868B); border-radius: 14px;
  background: var(--white, #FFFFFF); font: inherit; color: var(--ink, #1D1D1F); text-align: left; cursor: pointer; }
.sn-dd__btn:hover { border-color: var(--ink-2, #424245); }
.sn-dd__btn[aria-expanded="true"] { border-color: var(--iris, #0066CC); box-shadow: 0 0 0 1px var(--iris, #0066CC); }
.sn-dd__btn > .i { width: 20px; height: 20px; flex: none; color: var(--ink-2, #424245); transition: transform .2s var(--ease, cubic-bezier(.2, .7, .2, 1)); }
.sn-dd__btn[aria-expanded="true"] > .i { transform: rotate(180deg); }
.sn-dd__img { width: 50px; height: 50px; flex: none; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--sn-hx, var(--mist, #EDEDF0)); color: var(--ink-3, #636366); }
.sn-dd__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-dd__img .i { width: 22px; height: 22px; }
.sn-dd__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sn-dd__l { font-size: 13px; font-weight: 500; color: var(--ink-3, #636366); }
.sn-dd__v { font-size: 16px; font-weight: 600; overflow-wrap: anywhere; }
.sn-dd__n { flex: none; padding: 2px 8px; border-radius: 999px; background: var(--mist, #EDEDF0); font-size: 13px; font-weight: 600; color: var(--ink-2, #424245); font-variant-numeric: tabular-nums; }
.sn-dd__pop { margin-top: 8px; border: 1px solid var(--line, #E5E5EA); border-radius: 14px; background: var(--white, #FFFFFF); box-shadow: 0 18px 40px -22px rgba(var(--shadow-rgb, 29, 29, 31), .45); overflow: hidden; }
.sn-search--dd { padding: 10px; border-bottom: 1px solid var(--line, #E5E5EA); background: var(--tint-3, #FAFAFC); }
.sn-dd__list { max-height: min(56vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
.sn-dd__list:focus-visible { outline: 2px solid var(--iris, #0066CC); outline-offset: -2px; }
.sn-dd__g { position: sticky; top: 0; z-index: 1; padding: 6px 14px; border-bottom: 1px solid var(--line, #E5E5EA); background: var(--paper, #F5F5F7); font-size: 13px; font-weight: 600; color: var(--ink-2, #424245); }
.sn-dd__o { display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 6px 14px; border-bottom: 1px solid var(--line, #E5E5EA); cursor: pointer; }
/* moving up with the arrow keys: the colour stops below the sticky fabric heading, never half under it */
[role="group"] > .sn-dd__o { scroll-margin-top: 38px; }
.sn-dd__o:hover { background: var(--tint-3, #FAFAFC); }
.sn-dd__o.sn-active { background: var(--iris-soft, #EEF4FB); box-shadow: inset 3px 0 0 var(--iris, #0066CC); }
.sn-dd__oi { width: 46px; height: 46px; flex: none; border-radius: 8px; overflow: hidden; background: var(--sn-hx, var(--mist, #EDEDF0)); box-shadow: 0 0 0 1px rgba(var(--shadow-rgb, 29, 29, 31), .10); }
.sn-dd--tall .sn-dd__oi { height: 58px; width: 40px; }
.sn-dd--slat .sn-dd__oi { width: 72px; height: 18px; }
.sn-dd__oi img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-dd__ot { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.sn-dd__oc { font-size: 15px; font-weight: 600; color: var(--ink, #1D1D1F); }
.sn-dd__of { font-size: 13px; color: var(--ink-3, #636366); }
.sn-dd__ok { width: 20px; height: 20px; flex: none; color: var(--iris, #0066CC); visibility: hidden; }
.sn-dd__o[aria-selected="true"] .sn-dd__ok { visibility: visible; }
.sn-dd__o[aria-selected="true"] .sn-dd__oc { color: var(--iris-text, #0066CC); }
.sn-dd__none { margin: 0; padding: 20px 14px; font-size: 15px; color: var(--ink-2, #424245); }

/* ---- Back / Next (sticks to the bottom of the screen while the step is long) ---- */
.sn-nav { position: sticky; bottom: 0; z-index: 5; display: flex; align-items: center; gap: 12px; margin: 24px -28px 0; padding: 14px 28px;
  border-top: 1px solid var(--line, #E5E5EA); border-radius: 0 0 0 24px; background: var(--white, #FFFFFF); box-shadow: 0 -8px 16px -12px rgba(var(--shadow-rgb, 29, 29, 31), .2); }
.sn-nav__msg { flex: 1; margin: 0; display: flex; align-items: center; gap: 8px; font-size: 14.5px; font-weight: 500; color: var(--err, #B42318); }
.sn-nav__msg .i { width: 18px; height: 18px; flex: none; }
.sn-nav__back:disabled { opacity: .45; cursor: not-allowed; }
.sn-nav__next, .sn-nav__use { margin-left: auto; }
.sn-nav__msg:not([hidden]) + .sn-nav__back + .sn-nav__next, .sn-nav__msg:not([hidden]) ~ .sn-nav__use { margin-left: 0; }
.sn-nav [aria-disabled="true"] { opacity: .5; }

/* ---- Your pick (desktop side panel; the same content fills the phone sheet) ---- */
.sn-pick { position: sticky; top: calc(var(--header-h, 72px) + 16px); max-height: calc(100vh - var(--header-h, 72px) - 32px); overflow-y: auto; overscroll-behavior: contain;
  margin: -4px; padding: 4px; scrollbar-width: thin; }
.sn-pick__for { margin: 2px 0 0; font-size: 14px; color: var(--ink-3, #636366); }
.sn-sheet__t:focus { outline: none; }
.sn-pick__t { margin: 0 0 10px; font-size: 16px; font-weight: 600; }
.sn-pick__rows { margin: 0 0 14px; }
.sn-pick__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 9px 0; border-top: 1px solid var(--line, #E5E5EA); font-size: 14px; line-height: 1.35; }
.sn-pick__rows dt { color: var(--ink-3, #636366); }
.sn-pick__rows dd { margin: 0; font-weight: 600; text-align: right; overflow-wrap: anywhere; }
.sn-pick__rows dd.sn-no { font-weight: 500; color: var(--ink-3, #636366); }
/* the picked photo in its own shape: --sn-r = the photo's width / height (set by the script), --sn-cap = the tallest it
   may be. The box is as wide as the panel, or narrower (centred) when that would make a tall photo too tall, so the
   whole photo always shows and never gets cut (1.1: it used to fill a 16:10 box, which cut square and slat photos). */
.sn-pick__photo { --sn-cap: 360px; position: relative; display: block; width: min(100%, calc(var(--sn-cap) * var(--sn-r, 1.6))); aspect-ratio: var(--sn-r, 16 / 10);
  margin: 0 auto; padding: 0; border: 0; border-radius: 14px; overflow: hidden;
  background: var(--sn-hx, var(--white, #FFFFFF)); box-shadow: 0 0 0 1px var(--line, #E5E5EA); font: inherit; color: inherit; }
.sn-pick__photo--empty { width: 100%; aspect-ratio: 16 / 10; }
/* a slat photo is short: "Tap to enlarge" sits under it instead of over it, so the whole slat stays in view */
.sn-pick__photo--slat { overflow: visible; margin-bottom: 38px; border-radius: 10px; }
.sn-pick__photo--slat img { border-radius: inherit; }
.sn-pick__photo--slat .sn-pick__zoom { top: calc(100% + 6px); right: 0; bottom: auto; background: var(--tint-3, #FAFAFC); color: var(--ink-2, #424245); box-shadow: inset 0 0 0 1px var(--line, #E5E5EA); }
.sn-pick__photo--empty { display: grid; place-items: center; background: var(--white, #FFFFFF); box-shadow: inset 0 0 0 1px var(--line, #E5E5EA); }
.sn-pick__ph { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 16px; text-align: center; font-size: 14px; color: var(--ink-3, #636366); }
.sn-pick__ph .i { width: 30px; height: 30px; color: var(--ink-3, #636366); }
button.sn-pick__photo { cursor: zoom-in; }
.sn-pick__photo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.sn-pick__zoom { position: absolute; right: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px;
  background: rgba(29, 29, 31, .82); color: #FFFFFF; font-size: 13px; font-weight: 600; }
.sn-pick__zoom .i { width: 15px; height: 15px; }
button.sn-pick__photo:focus-visible { outline: 2px solid var(--iris, #0066CC); outline-offset: 3px; }
.sn-pick__fab { margin: 12px 0 0; font-size: 14px; font-weight: 500; color: var(--ink-2, #424245); }
.sn-pick__col { margin: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25; }
.sn-facts { margin: 12px 0 16px; }
.sn-facts > div { padding: 8px 0; border-top: 1px solid var(--line, #E5E5EA); }
.sn-facts dt { margin: 0 0 3px; font-size: 13px; font-weight: 600; color: var(--ink-3, #636366); }
.sn-facts dd { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink, #1D1D1F); }
.sn-facts dd p { margin: 3px 0 0; color: var(--ink-2, #424245); font-size: 13.5px; line-height: 1.45; }
.sn-hw { display: flex; align-items: center; gap: 10px; }
.sn-hw__sw { width: 28px; height: 28px; flex: none; border-radius: 7px; overflow: hidden; background: var(--sn-hx, var(--mist, #EDEDF0)); box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .16); }
.sn-hw__sw img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sn-hw__t { display: flex; flex-direction: column; line-height: 1.35; }
.sn-hw__t small { font-size: 13px; color: var(--ink-3, #636366); }
.sn-facts .sn-code { margin: 2px 0; padding: 10px 12px; border: 1.5px dashed #C98600; border-radius: 10px; background: #FFF8EA; }
.sn-code dd { font-size: 16px; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.sn-code__own { font-weight: 500; color: #7A4F00; }
.sn-pick__use { width: 100%; margin-top: 12px; }
.sn-pick__note { margin: 10px 0 0; font-size: 13px; line-height: 1.45; color: var(--ink-3, #636366); }
.sn-pick__back { display: none; }

.sn-honest { margin: 16px 0 0; display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; color: var(--ink-2, #424245); }
.sn-honest .i { width: 18px; height: 18px; flex: none; margin-top: 1px; }
.sn-nojs { margin: 16px 0 6px; }
.sn-nojs__list { margin: 0; padding-left: 20px; }

/* phones and tablets: the slim "Your pick" line */
.sn-mini { display: none; }

/* ---- the sheet (phones: from the bottom; tablets: from the side) and the big photo ---- */
.sn-sheet, .sn-zoom { margin: 0; padding: 0; border: 0; max-width: none; max-height: none; background: var(--white, #FFFFFF); color: var(--ink, #1D1D1F); }
.sn-sheet::backdrop, .sn-zoom::backdrop { background: rgba(var(--scrim-rgb, 0, 0, 0), .5); }
.sn-sheet[open] { position: fixed; display: flex; flex-direction: column; box-shadow: 0 -20px 60px -20px rgba(0, 0, 0, .35); }
.sn-sheet__bar, .sn-zoom__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px 10px 20px; border-bottom: 1px solid var(--line, #E5E5EA); }
.sn-sheet__t, .sn-zoom__t { margin: 0; font-size: 16px; font-weight: 600; }
.sn-sheet__body { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 16px 20px calc(20px + env(safe-area-inset-bottom)); }
.sn-sheet__body .sn-pick { position: static; max-height: none; overflow: visible; margin: 0; padding: 0; }
.sn-sheet__body { min-height: 0; }
/* in the sheet the photo stays short enough that the name and the Builder button show under it, even on small phones */
.sn-sheet__body .sn-pick__photo { --sn-cap: min(340px, 40dvh); }
.sn-sheet__body .sn-pick__photo--empty { aspect-ratio: 16 / 11; }
.sn-zoom[open] { position: fixed; inset: 0; margin: auto; width: min(980px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); display: flex; flex-direction: column;
  border-radius: 16px; overflow: hidden; }
.sn-zoom__img { flex: 1; min-height: 0; display: grid; place-items: center; padding: 12px; background: var(--paper, #F5F5F7); overflow: auto; }
/* the big photo: the whole photo in its own shape (--sn-r), as large as the window allows; the box has that size from
   the first frame, so the small photo shown at once and the large one that replaces it never move anything */
.sn-zoom__img img { display: block; width: min(100%, calc((100dvh - 124px) * var(--sn-r, 1))); max-width: 100%; max-height: none; height: auto;
  aspect-ratio: var(--sn-r, auto); object-fit: contain; border-radius: 8px; background: var(--white, #FFFFFF); }
@media (prefers-reduced-motion: no-preference) {
  .sn-sheet[open] { animation: sn-up .24s var(--ease, cubic-bezier(.2, .7, .2, 1)); }
  .sn-zoom[open] { animation: sn-fade .18s ease-out; }
}
@keyframes sn-up { from { transform: translateY(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sn-side { from { transform: translateX(24px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sn-fade { from { opacity: 0; } to { opacity: 1; } }

/* ================= small laptops (1024-1279px): a narrower side panel, 3 product cards and 2 light levels per row ================= */
@media (min-width: 1024px) and (max-width: 1279px) {
  .sn-body { grid-template-columns: minmax(0, 1fr) 300px; }
  .sn-side { padding: 20px; }
  .sn-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sn-lvls { grid-template-columns: repeat(min(var(--sn-n, 4), 2), minmax(0, 1fr)); }
}

/* ================= tablets (721-1023px): one column, "Your pick" line + side drawer, List / Grid toggle ================= */
@media (max-width: 1023px) {
  .sn-body { grid-template-columns: 1fr; min-height: 0; }
  .sn-side { display: none; }
  .sn-main { padding: 24px 24px 0; }
  .sn-nav { margin: 24px -24px 0; padding: 12px 24px; border-radius: 0 0 24px 24px; }
  .sn-mini { display: flex; align-items: center; gap: 12px; min-height: 66px; margin: 0 0 20px; padding: 8px 12px 8px 8px; border: 1px solid var(--line, #E5E5EA); border-radius: 14px; background: var(--tint-3, #FAFAFC); }
  .sn-mini__img { width: 48px; height: 48px; flex: none; display: grid; place-items: center; border-radius: 10px; overflow: hidden; background: var(--sn-hx, var(--white, #FFFFFF));
    color: var(--ink-3, #636366); box-shadow: inset 0 0 0 1px var(--line, #E5E5EA); }
  .sn-mini__img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .sn-mini__img .i { width: 22px; height: 22px; }
  .sn-mini__txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
  .sn-mini__l { font-size: 13px; font-weight: 600; color: var(--ink-3, #636366); }
  .sn-mini__v { font-size: 14px; font-weight: 600; color: var(--ink, #1D1D1F); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .sn-mini__v.sn-no { font-weight: 500; color: var(--ink-2, #424245); }
  .sn-view { display: inline-flex; }
  .sn-q--view { align-items: center; }
  .sn-q--view .sn-q__meta { display: none; }
  .sn-prods { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .sn-lvls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sn-sheet[open] { inset: 0 0 0 auto; width: min(440px, 92vw); height: 100dvh; border-radius: 20px 0 0 20px; }
  @media (prefers-reduced-motion: no-preference) { .sn-sheet[open] { animation-name: sn-side; } }
}

/* ================= phones (up to 720px) ================= */
@media (max-width: 720px) {
  .sn { padding: 12px 0 32px; }
  .sn > .wrap { padding: 0 12px; }
  .sn-shell { border-radius: 18px; }
  .sn-top { padding: 12px 16px; }
  .sn-top__note { display: none; }
  .sn-steps__list { padding: 0 12px; }
  .sn-step { gap: 8px; min-height: 52px; padding: 8px 6px 10px 0; }
  .sn-step::after { right: 6px; }
  .sn-step__n { width: 24px; height: 24px; }
  .sn-step__v { display: none; }
  .sn-main { padding: 16px 16px 0; }
  .sn-q__h { font-size: 22px; }
  .sn-help { margin: 4px 0 14px; font-size: 15px; }
  .sn-mini { margin-bottom: 16px; }

  /* choice steps become list rows: 76px photo left, words, radio right (owner's phone pattern for the Builder) */
  .sn-prods { grid-template-columns: 1fr; gap: 8px; }
  .sn-prod { flex-direction: row; align-items: stretch; min-height: 76px; border-radius: 14px; }
  .sn-prod__media { width: 76px; flex: none; aspect-ratio: auto; }
  .sn-prod__body { justify-content: center; padding: 10px 48px 10px 14px; }
  .sn-prod .sn-radio { top: 50%; bottom: auto; margin-top: -11px; }
  .sn-lvls { grid-template-columns: 1fr; gap: 8px; }
  .sn-lvl { padding: 12px 48px 12px 14px; gap: 5px; border-radius: 14px; }
  .sn-lvl .sn-radio { top: 50%; margin-top: -11px; }
  .sn-lvl__top { padding-right: 0; }
  .sn-lvl__plain { font-size: 13.5px; }
  .sn-lvl__strip { grid-template-columns: repeat(5, 28px); padding-top: 2px; }
  .sn-lvl--all { padding: 10px 14px 10px 48px; flex-wrap: wrap; gap: 2px 10px; }

  .sn-tools { gap: 10px; }
  .sn-search--main { flex-direction: column; align-items: stretch; gap: 6px; }
  .sn-search--main .sn-search__l { width: auto; }
  .sn-view__b { min-height: 38px; gap: 5px; padding: 0 9px; font-size: 13.5px; }
  .sn-view__b .i { width: 16px; height: 16px; }
  .sn-sub, .sn-q--view { gap: 10px; }
  .sn-sub__h { font-size: 19px; }
  .sn-q--view .sn-q__h { white-space: nowrap; }
  .sn-reveal__in { padding-top: 20px; }
  .sn-sub { padding-top: 16px; }
  .sn-note { margin: 10px 0 12px; font-size: 13.5px; }
  .sn-fab { flex-direction: column; align-items: stretch; gap: 6px; }
  .sn-fab__l { width: auto; }
  .sn-select { width: 100%; }
  .sn-tones { flex-direction: column; gap: 6px; margin-top: 12px; }
  .sn-tones__l { padding-top: 0; }
  .sn-tones__row { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; width: calc(100% + 32px); margin: 0 -16px; padding: 2px 16px 4px; scroll-padding: 0 16px; }
  .sn-tones__row::-webkit-scrollbar { display: none; }
  .sn-count { margin: 8px 0 12px; min-height: 40px; }
  .sn-results { min-height: 300px; }
  .sn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .sn-grid--slat { grid-template-columns: 1fr; }
  .sn-lab { grid-column: 1 / -1; flex-direction: row; align-items: baseline; justify-content: space-between; padding: 6px 2px 0; background: none; box-shadow: none;
    border-bottom: 1px solid var(--line, #E5E5EA); border-radius: 0; }
  .sn-lab__lv { display: none; }

  .sn-nav { margin: 20px -16px 0; padding: 10px 16px calc(10px + env(safe-area-inset-bottom)); gap: 8px; border-radius: 0 0 18px 18px; }
  .sn-nav .btn { flex: 1; padding: 0 12px; }
  .sn-nav__next, .sn-nav__use { margin-left: 0; }
  .sn-nav__msg { position: absolute; left: 0; right: 0; bottom: 100%; padding: 10px 16px; background: var(--err-soft, #FEF3F2); border-top: 1px solid var(--line, #E5E5EA); }
  .sn-nav__use { white-space: normal; text-align: center; }
  /* the theme's .btn keeps words on one line (white-space: nowrap), which pushed "Use this in the Blind Builder" 1px past
     the side of a 390px phone: here the two buttons may shrink and the words wrap */
  .sn .sn-nav .sn-nav__back { flex: 0 0 auto; }
  .sn .sn-nav .sn-nav__next, .sn .sn-nav .sn-nav__use { min-width: 0; }
  .sn .sn-nav .sn-nav__use { white-space: normal; }

  .sn-sheet[open] { inset: auto 0 0 0; width: 100%; max-height: 90dvh; border-radius: 20px 20px 0 0; }
  @media (prefers-reduced-motion: no-preference) { .sn-sheet[open] { animation-name: sn-up; } }
  .sn-zoom[open] { width: calc(100vw - 16px); max-height: calc(100dvh - 16px); }
}
@media (max-width: 720px) {
  /* narrow phones (under 375px): the List / Grid switch moves under "Choose a colour" instead of running off the side */
  .sn-sub, .sn-q--view { flex-wrap: wrap; row-gap: 10px; }
  .sn-sub .sn-view, .sn-q--view .sn-view { margin-left: auto; }
}
@media (max-width: 380px) {
  .sn-step__l { font-size: 13px; }
  .sn-view__b { padding: 0 10px; }
  /* Back keeps its own width so "Next: Choose a colour" has room; long labels wrap inside the button, never off the screen */
  .sn-nav .sn-nav__back { flex: 0 0 auto; }
  .sn-nav .sn-nav__next, .sn-nav .sn-nav__use { min-width: 0; white-space: normal; text-align: center; line-height: 1.25; }
}
@media (min-width: 1024px) {
  .sn-nav__use { display: none !important; }
  /* step 2 on desktop: the bar only holds Back (the pick and its button are in the side panel), so it no longer
     sticks over the photos: one more row of colours fits on the screen */
  .sn[data-step="2"] .sn-nav { position: relative; box-shadow: none; }
}
/* phones and tablets, List view: no empty box under the closed drop-down (the Grid keeps its space while loading) */
.sn[data-view="list"] .sn-results { min-height: 0; }

/* ---- Sundial Samples additions (not in the preview) ---- */
/* while the product list loads (a fraction of a second): the count line keeps its height */
.sn-prod__meta:empty::before { content: "\00a0"; }
/* a link opened at step 2 (?product=): the page starts on step 2 before the script runs, so nothing jumps */
.sn[data-boot="2"] [data-sn-panel="1"] { display: none; }
.sn[data-boot="2"] [data-sn-panel="2"][hidden] { display: block !important; }
.sn-lvls:empty { min-height: 260px; border-radius: 16px; background: var(--mist, #EDEDF0); opacity: .5; }
/* 1.1: until the script has drawn that step (a fraction of a second), the box keeps about a screen of height and the
   help line its two lines, so the page parts under the Samples box (and on tablets the next section, which is in view
   there) do not move when the product's light levels or colours arrive. "See all … samples" on every product page
   opens the Samples page this way. */
.sn[data-boot="2"] .sn-body { min-height: max(620px, calc(100vh - 120px)); }
.sn[data-boot="2"] [data-sn-help2] { min-height: 50px; }
@media (max-width: 720px) { .sn[data-boot="2"] [data-sn-help2] { min-height: 70px; } }
/* badges in words (Popular is the order, not a badge on this page) */
.sn-card__tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: -2px; }
.sn-tag { display: inline-flex; align-items: center; min-height: 20px; padding: 0 7px; border-radius: 999px; background: var(--mist, #EDEDF0); font-size: 12px; font-weight: 600; line-height: 1.2; color: var(--ink-2, #424245); }
.sn-tag--bo { background: #FFF4E0; color: #7A4F00; }
.sn-facts .sn-bo dd { color: #7A4F00; font-weight: 600; }
.sn-fallback { padding: 28px 0; }
.sn-fallback__box { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; padding: 20px 24px; border-radius: 16px; background: var(--white, #FFFFFF); box-shadow: 0 0 0 1px var(--line, #E5E5EA); }
.sn-fallback__box p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--ink, #1D1D1F); flex: 1 1 260px; }