/* Stillbrook Portraits: design tokens + section styles for the custom sections (prefix sbt-).
   The builder widget (widget.v1.css, prefix sb-) reads the same tokens. Light scheme only.
   Contrast (WCAG 2.1, on --sb-paper #F6F1E7): ink 10.5:1, stone 5.4:1, brook 5.2:1 (paper on brook 5.2:1), err 6.5:1;
   line-2 (input and choice borders) 3.6:1 on white, 3.2:1 on paper (1.4.11 non-text >= 3:1). */
:root {
  /* Gallery (2026-09-30, operator's pick of two mockups): gallery white, near-black ink and actions, portraits in
     white frames, one dark band. Was brand kit v1 cream (#f6f1e7 / #ece4d5 / #2e3a36, brook #4a6a71 buttons).
     Contrast: ink on paper 15.2:1, stone on paper 7.2:1 (6.5:1 on linen), line-2 3.5:1 on paper (1.4.11). */
  --sb-paper: #fbfaf7;
  --sb-linen: #f2efe9;
  --sb-white: #ffffff;
  --sb-ink: #1c2421;
  --sb-stone: #4e5752;
  --sb-umber: #7a5e48;
  --sb-brook: #1c2421;
  --sb-brook-deep: #34413c;
  --sb-night: #1c2421;
  --sb-night-text: #f3f1ec;
  --sb-night-muted: #b9c0bb;
  --sb-brook-soft: #5e7f86;
  --sb-sage: #8fa38e;
  --sb-sage-wash: #e9ede6;
  --sb-blush: #d9b8a7;
  --sb-blush-wash: #f1e3da;
  --sb-font-display: 'Cormorant Garamond', 'EB Garamond', Garamond, 'Times New Roman', serif;
  --sb-font-body: 'Source Sans 3', 'Source Sans Pro', 'Segoe UI', Helvetica, Arial, sans-serif;
  /* aliases used by the sections and the widget */
  --sb-mat: var(--sb-white);
  --sb-card: var(--sb-linen);
  --sb-ink-2: var(--sb-stone);
  --sb-sage-tint: var(--sb-sage-wash);
  --sb-blush-tint: var(--sb-blush-wash);
  --sb-line: #e4e0d8;
  --sb-line-2: #8a8578;
  --sb-err: #963628;
  --sb-gutter: 1rem;
  --sb-max: 72rem;
  --sb-focus: 0 0 0 3px var(--sb-paper), 0 0 0 5px var(--sb-brook-deep);
}
@media (min-width: 48rem) { :root { --sb-gutter: 2rem; } }

/* Brand fonts for Horizon's own chrome too (header, footer, product, cart), not only the sbt- sections.
   Horizon sets these on :root in snippets/theme-styles-variables.liquid from its font pickers (Inter by default);
   html:root outranks :root, so this wins whatever the load order. The fonts are loaded in stillbrook-head. */
html:root {
  --font-body--family: var(--sb-font-body);
  --font-body--style: normal;
  --font-body--weight: 400;
  --font-subheading--family: var(--sb-font-body);
  --font-subheading--style: normal;
  --font-subheading--weight: 600;
  --font-heading--family: var(--sb-font-display);
  --font-heading--style: normal;
  --font-heading--weight: 500;
  --font-accent--family: var(--sb-font-display);
  --font-accent--style: normal;
  --font-accent--weight: 500;
}

.sbt { background: var(--sb-paper); color: var(--sb-ink); font-family: var(--sb-font-body); font-size: 1.125rem; line-height: 1.6; }
.sbt *, .sbt *::before, .sbt *::after { box-sizing: border-box; }
.sbt-wrap { max-width: var(--sb-max); margin: 0 auto; padding: 0 var(--sb-gutter); }
.sbt-pad { padding-top: clamp(2.5rem, 6vw, 5rem); padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.sbt-tint { background: var(--sb-card); }
:where(.sbt) :where(h1, h2, h3) { font-family: var(--sb-font-display); font-weight: 500; color: var(--sb-ink); letter-spacing: -0.01em; margin: 0; text-wrap: balance; }
.sbt-h1 { font-size: clamp(2.75rem, 2rem + 3vw, 4.5rem); line-height: 1.04; }
.sbt-h2 { font-size: clamp(2.25rem, 1.8rem + 1.8vw, 3.25rem); line-height: 1.08; }
.sbt-h1, .sbt-h2 { font-family: var(--sb-font-display); font-weight: 500; color: var(--sb-ink); letter-spacing: -0.01em; text-wrap: balance; }
/* Brand label (BRAND.md Type): Source Sans 3 600, uppercase, tracked, stone. Used for the product-title H1 above the headline. */
.sbt-label { font: 600 0.875rem/1.3 var(--sb-font-body); text-transform: uppercase; letter-spacing: 0.18em; color: var(--sb-stone); margin: 0; }
.sbt-h3 { font-family: var(--sb-font-display); font-weight: 500; font-size: clamp(1.5rem, 1.3rem + 0.6vw, 1.75rem); line-height: 1.2; }
:where(.sbt) :where(p) { margin: 0; }
.sbt-lede { font-size: clamp(1.125rem, 1rem + 0.5vw, 1.3125rem); color: var(--sb-ink-2); max-width: 34em; text-wrap: pretty; }
.sbt-muted { color: var(--sb-ink-2); }
.sbt-head { max-width: 40rem; margin-bottom: clamp(1.5rem, 4vw, 2.5rem); }
.sbt-head > * + * { margin-top: 0.75rem; }
:where(.sbt) :where(a) { color: var(--sb-brook); text-underline-offset: 3px; }
.sbt a:focus-visible, .sbt button:focus-visible, .sbt summary:focus-visible, .sbt input:focus-visible { outline: none; box-shadow: var(--sb-focus); border-radius: 6px; }

.sbt-btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 3.25rem; padding: 0.75rem 1.75rem;
  border-radius: 999px; font: 600 1.125rem/1.2 var(--sb-font-body); text-decoration: none; cursor: pointer;
  border: 1.5px solid var(--sb-brook); transition: background-color 0.15s;
}
.sbt .sbt-btn-primary { background: var(--sb-brook); color: var(--sb-paper); }
.sbt .sbt-btn-primary:hover { background: var(--sb-brook-deep); border-color: var(--sb-brook-deep); }
.sbt .sbt-btn-secondary { background: transparent; color: var(--sb-ink); border-color: var(--sb-ink); }
.sbt .sbt-btn-secondary:hover { background: rgba(46, 58, 54, 0.06); }
.sbt-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
@media (max-width: 30rem) { .sbt-ctas .sbt-btn { width: 100%; } }

/* The cabinet card: a portrait in a mat with a studio line beneath. Used by the hero and the builder aside. */
.sbt-card {
  /* Gallery: a plain white frame and a soft gallery shadow (was a cream mat with an inner rule, turned slightly) */
  background: var(--sb-mat); padding: 0.75rem 0.75rem 0.7rem; border: 0;
  box-shadow: 0 1px 2px rgba(28, 36, 33, 0.08), 0 22px 44px -18px rgba(28, 36, 33, 0.28);
  margin: 0;
}
.sbt-card-img { aspect-ratio: 1; background: var(--sb-paper); overflow: hidden; }
.sbt-card-img img, .sbt-card-img svg { width: 100%; height: 100%; object-fit: cover; display: block; }
.sbt-card figcaption { text-align: center; margin-top: 0.75rem; font: italic 500 1.0625rem/1.3 var(--sb-font-display); color: var(--sb-ink-2); }

/* ---- hero ---- */
.sbt-hero-grid { display: grid; gap: 2.5rem; align-items: center; }
.sbt-hero-copy > * + * { margin-top: 1.25rem; }
.sbt-hero-card { max-width: 26rem; width: 88%; margin: 0 auto; }
.sbt-hero-note { font-size: 0.9375rem; color: var(--sb-ink-2); }
.sbt-hero-price { font-size: 1rem; font-weight: 600; color: var(--sb-ink); margin-top: 1rem; }
@media (min-width: 56rem) {
  .sbt-hero-grid { grid-template-columns: 1.15fr 1fr; gap: 4rem; }
  .sbt-hero-card { width: 100%; }
}

/* ---- how it works (a real sequence, so it is numbered) ---- */
.sbt-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.75rem; counter-reset: sbt; }
.sbt-steps li { counter-increment: sbt; display: grid; grid-template-columns: 2.75rem 1fr; gap: 0 1rem; }
.sbt-steps li::before {
  content: counter(sbt); grid-row: span 2; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 1.5px solid var(--sb-ink); display: grid; place-items: center; font: 600 1.375rem/1 var(--sb-font-display);
}
.sbt-steps h3 { align-self: center; }
.sbt-steps p { color: var(--sb-ink-2); margin-top: 0.25rem; }
@media (min-width: 56rem) {
  .sbt-steps { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 2.5rem; }
  .sbt-steps li { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr; gap: 0.75rem; align-content: start; }
  .sbt-steps li::before { grid-row: auto; }
  .sbt-steps h3 { align-self: start; }
}

/* ---- style gallery ---- */
.sbt-styles { display: grid; gap: 2rem; }
.sbt-style { text-decoration: none; color: inherit; display: block; }
.sbt-style .sbt-card { transition: transform 0.2s ease; }
.sbt-style:hover .sbt-card { transform: translateY(-3px); }
.sbt-style h3 { margin-top: 1.1rem; }
.sbt-style p { color: var(--sb-ink-2); margin-top: 0.25rem; }
@media (min-width: 40rem) { .sbt-styles { grid-template-columns: repeat(3, 1fr); } }

/* ---- trust row ---- */
.sbt-trust { list-style: none; margin: 0; padding: 0; display: grid; gap: 1.25rem; grid-template-columns: 1fr 1fr; }
.sbt-trust li { border-top: 2px solid var(--sb-sage); padding-top: 0.75rem; }
.sbt-trust strong { display: block; font-family: var(--sb-font-display); font-weight: 600; font-size: 1.4rem; line-height: 1.25; }
.sbt-trust span { display: block; color: var(--sb-ink-2); font-size: 0.9375rem; margin-top: 0.25rem; }
@media (min-width: 56rem) { .sbt-trust { grid-template-columns: repeat(4, 1fr); gap: 2rem; } }

/* ---- faq ---- */
.sbt-faq { max-width: 46rem; }
.sbt-faq details { border-bottom: 1px solid var(--sb-line); }
.sbt-faq details:first-of-type, .sbt-faq .sbt-faq-group + details { border-top: 1px solid var(--sb-line); }
.sbt-faq-group { margin: 2.5rem 0 0.75rem; }
.sbt-faq-group:first-child { margin-top: 0; }
#builder { scroll-margin-top: 1rem; }
.sbt-faq summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; gap: 1rem; min-height: 3.5rem; padding: 0.75rem 0;
  font: 600 1.375rem/1.3 var(--sb-font-display);
}
.sbt-faq summary::-webkit-details-marker { display: none; }
.sbt-faq summary::after {
  content: ''; flex: none; margin-left: auto; width: 0.6rem; height: 0.6rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px); transition: transform 0.15s;
}
.sbt-faq details[open] summary::after { transform: rotate(225deg); }
.sbt-faq-a { padding: 0 0 1.25rem; color: var(--sb-ink); max-width: 40em; }
.sbt-faq-a > * + * { margin-top: 0.75rem; }

/* ---- cutoff banner (real date only) ---- */
.sbt-cutoff { background: var(--sb-ink); color: var(--sb-paper); }
.sbt-cutoff .sbt-wrap { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 1rem; padding-top: 0.85rem; padding-bottom: 0.85rem; }
.sbt-cutoff strong { font: 600 1.3125rem/1.3 var(--sb-font-display); }
.sbt-cutoff span { font-size: 0.9375rem; color: #dcd6ca; }
.sbt .sbt-cutoff a { color: var(--sb-paper); font-weight: 600; }

/* ---- builder section ---- */
.sbt-builder-grid { display: grid; gap: 1.5rem; }
.sbt-builder-aside > * + * { margin-top: 1rem; }
.sbt-builder-aside .sbt-card { display: none; }
.sbt-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.sbt-points li { padding-left: 1.4rem; position: relative; color: var(--sb-ink-2); }
.sbt-points li::before { content: ''; position: absolute; left: 0.1rem; top: 0.6em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--sb-brook); border-bottom: 2px solid var(--sb-brook); transform: rotate(-45deg); }
.sbt-price { font: 600 1.5rem/1.3 var(--sb-font-display); }
/* Proof on the first phone screen (2026-09-27, plan Stage 4, v2). Phones only; the desktop aside keeps its sample card.
   A small cabinet-card thumbnail beside the heading, so the upload buttons stay on screen 1 in the Facebook/Instagram
   in-app browser (390x740: "Choose photos" must end above the sticky Continue at 676 px). The intro paragraph is
   dropped on phones (the headline, the points and the widget's own line say the same); desktop keeps it. */
.sbt-lead { margin: 0; }
.sbt-lead-img { background: var(--sb-mat); padding: 4px; border: 1px solid #e6dfd1; box-shadow: 0 1px 1px rgba(46, 58, 54, 0.06), 0 10px 18px -12px rgba(46, 58, 54, 0.5); }
.sbt-lead-crop { display: block; aspect-ratio: 1; overflow: hidden; }
.sbt-lead-img img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; display: block; }
/* the canvas example is a canvas floating in white: zoom to the canvas and its wrapped edge */
.sbt-lead--canvas .sbt-lead-img img { transform: scale(1.45); object-position: 50% 50%; }
.sbt-lead figcaption { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (max-width: 59.99rem) {
  .sbt-has-lead .sbt-pad { padding-top: 0.75rem; }
  .sbt-has-lead .sbt-builder-aside { display: grid; grid-template-columns: 6.5rem minmax(0, 1fr); column-gap: 0.875rem; align-items: start; }
  .sbt-has-lead .sbt-builder-aside > * { grid-column: 2; margin-top: 0; }
  .sbt-has-lead .sbt-builder-aside > .sbt-lead { grid-column: 1; grid-row: 1 / span 3; position: relative; transform: rotate(-1.5deg); }
  .sbt-has-lead .sbt-builder-aside > .sbt-h2 { font-size: 1.75rem; line-height: 1.1; margin-top: 0.3rem; }
  .sbt-has-lead .sbt-builder-aside > .sbt-lede { display: none; }
  .sbt-has-lead .sbt-builder-aside > .sbt-price { font-size: 1.3125rem; margin-top: 0.3rem; }
  .sbt-has-lead .sbt-builder-aside > .sbt-points { grid-column: 1 / -1; margin-top: 0.875rem; gap: 0.2rem; font-size: 1.0625rem; line-height: 1.4; }
  .sbt-has-lead .sbt-builder-grid { gap: 1rem; }
}
@media (min-width: 60rem) {
  .sbt-builder-aside > .sbt-lead { display: none; }
  .sbt-builder-aside > .sbt-lead + * { margin-top: 0; }
}
@media (min-width: 60rem) {
  .sbt-builder-grid { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1fr); gap: 4rem; align-items: start; }
  .sbt-builder-aside { position: sticky; top: 2rem; }
  .sbt-builder-aside .sbt-card { display: block; max-width: 22rem; margin-top: 2rem; }
  /* release 3: no sample dog beside their own preview (3) or the size step (4); the widget sets data-sb-step */
  .sbt-builder-grid[data-sb-step="3"] .sbt-builder-aside .sbt-card,
  .sbt-builder-grid[data-sb-step="4"] .sbt-builder-aside .sbt-card { display: none; }
  .sbt-builder-main .sb-w { margin: 0; }
}

/* ---- process / who makes it (2026-09-27, plan Stage 4) ---- */
.sbt-process-grid { display: grid; gap: 2rem; }
.sbt-process-intro > * + * { margin-top: 1rem; }
.sbt-process-list { list-style: none; margin: 0; padding: 0 0 0 1.25rem; border-left: 2px solid var(--sb-sage); display: grid; gap: 1.5rem; }
.sbt-process-list p { color: var(--sb-ink-2); margin-top: 0.3rem; }
.sbt-process-note { margin: 1.5rem 0 0; }
.sbt-process-note.sbt-has-photo { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 1rem; align-items: start; }
.sbt-process-note blockquote { margin: 0; font: italic 500 1.3125rem/1.4 var(--sb-font-display); color: var(--sb-ink); }
.sbt-process-note figcaption { margin-top: 0.4rem; font-weight: 600; color: var(--sb-ink-2); }
.sbt-has-photo blockquote, .sbt-has-photo figcaption { grid-column: 2; }
.sbt-process-photo { grid-row: span 2; width: 5.5rem; height: 5.5rem; object-fit: cover; background: var(--sb-mat); border: 1px solid #e6dfd1; }
.sbt-process-link a { font-weight: 600; }
@media (min-width: 56rem) {
  .sbt-process-grid { grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: 4rem; align-items: start; }
  .sbt-process-list { gap: 2rem; padding-left: 2rem; }
}

/* ---- forms (order status) ---- */
.sbt-form { display: grid; gap: 1rem; max-width: 28rem; }
.sbt-form label { display: block; font-weight: 600; margin-bottom: 0.4rem; }
.sbt-input {
  display: block; width: 100%; min-height: 3rem; padding: 0.7rem 0.85rem; font: inherit; color: var(--sb-ink);
  background: #fff; border: 1.5px solid var(--sb-line-2); border-radius: 6px;
}
.sbt-input:focus { outline: none; border-color: var(--sb-brook-deep); box-shadow: 0 0 0 3px rgba(59, 90, 97, 0.25); }
.sbt-status-out { margin-top: 2rem; max-width: 40rem; }
.sbt-status-item { display: grid; grid-template-columns: 5.5rem 1fr; gap: 1rem; padding: 1rem 0; border-top: 1px solid var(--sb-line); }
.sbt-status-item img { width: 5.5rem; height: 5.5rem; object-fit: cover; background: var(--sb-mat); }
.sbt-status-label { font-weight: 600; color: var(--sb-brook); }
.sbt-alert { background: #f8e7e2; color: var(--sb-err); border-left: 4px solid var(--sb-err); padding: 0.75rem 1rem; font-weight: 600; }

/* ---- page body (content from content/pages/*.md) ---- */
.sbt-prose { max-width: 42rem; }
.sbt-prose > * + * { margin-top: 1rem; }
.sbt-prose h2 { font-size: 1.75rem; line-height: 1.2; margin-top: 2.5rem; }
.sbt-prose h3 { font-size: 1.375rem; margin-top: 2rem; }
.sbt-prose ul, .sbt-prose ol { padding-left: 1.3rem; }
/* Guides (tools/provision/guides.py): price tables scroll sideways on a phone instead of widening the page;
   example card messages are blockquotes. Body text stays at 17px or more (BRAND.md). */
.sbt-prose table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 1.0625rem; line-height: 1.45; }
.sbt-prose th, .sbt-prose td { text-align: left; vertical-align: top; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--sb-line); min-width: 9rem; }
.sbt-prose th { font-weight: 600; border-bottom-color: var(--sb-line-2); }
@media (max-width: 40rem) {
  /* Phone: each row becomes a card, each cell labelled with its column (data-label, added by guides.py). */
  .sbt-prose table, .sbt-prose tbody, .sbt-prose tr, .sbt-prose td { display: block; }
  .sbt-prose thead { display: none; }
  .sbt-prose tr { border-bottom: 1px solid var(--sb-line); padding: 0.75rem 0; }
  .sbt-prose td { border: 0; padding: 0.2rem 0; min-width: 0; }
  .sbt-prose td:first-child { font-weight: 600; }
  .sbt-prose td[data-label]:not(:first-child)::before { content: attr(data-label) ": "; font-weight: 600; color: var(--sb-stone); }
}
.sbt-prose blockquote { margin: 0.75rem 0 0; padding: 0.25rem 0 0.25rem 1.25rem; border-left: 3px solid var(--sb-sage); font-style: italic; }
.sbt-todo { outline: 2px dashed var(--sb-blush); outline-offset: 4px; }

@media (prefers-reduced-motion: reduce) {
  .sbt *, .sbt *::before, .sbt *::after { transition: none !important; animation: none !important; }
}

/* ---- Judge.me review widget, in the brand (2026-09-24). Reviews are real buyers only, never imported. ---- */
.jdgm-review-widget { color: var(--sb-ink); }
.jdgm-review-widget .jm-review-widget-minimal-header__title {
  font-family: var(--sb-font-display); font-size: clamp(1.75rem, 1.4rem + 1.2vw, 2.25rem); font-weight: 500;
  color: var(--sb-ink); letter-spacing: 0;
}
.jdgm-review-widget .jm-text { color: var(--sb-ink); }
.jdgm-review-widget .jm-no-reviews-state__text { color: var(--sb-stone); }
.jdgm-review-widget .jm-button--primary {
  background: var(--sb-brook-deep) !important; border-color: var(--sb-brook-deep) !important; color: var(--sb-paper) !important;
  border-radius: 999px; font-weight: 600; padding-inline: 1.5rem;
}
.jdgm-review-widget .jm-button--primary:hover { background: var(--sb-brook) !important; border-color: var(--sb-brook) !important; }
.jdgm-review-widget .jdgm-empty-state { display: none; }
.jdgm-star, .jdgm-review-widget .jm-star { color: var(--sb-umber) !important; }

/* ---- page speed + accessibility (Lighthouse 2026-09-24) ---- */
/* Reserve the builder's height until it has really drawn: first the empty mount (0px), then the widget's
   "Loading the portrait studio..." view (.sb-loading) both collapsed the page before the full ~825px (phone) /
   ~756px (desktop) builder appeared, so the trust row jumped in and out of view (CLS 0.22-0.28). */
.sbt div[data-samples]:not(.sb-w), .sbt .sb-w:has(.sb-view.sb-loading) { min-height: 825px; }
@media (min-width: 60rem) { .sbt div[data-samples]:not(.sb-w), .sbt .sb-w:has(.sb-view.sb-loading) { min-height: 756px; } }
/* Footer small print: the footer is dark since the Gallery look (2026-09-30); night-muted is 8.5:1 on it (was #696e69 on paper). */
.footer-utilities__text, .footer-utilities a, .footer-utilities .policy-list-trigger { color: var(--sb-night-muted); }

/* ==== Gallery (2026-09-30) ======================================================================================
   The operator's pick of two mockups (scratchpad design_audit/mock-A-gallery): gallery white, near-black type and
   actions, portraits in white frames, a large room photo up front, one dark band. Tokens above; layout here. */

/* The builder widget carries its own cream tokens on .sb-w (widget.v1.css, served by the Worker); these win on
   specificity (0,1,2 over 0,1,0), so the theme restyles the widget with no Worker deploy. */
html body .sb-w {
  --sb-paper: #fbfaf7; --sb-mat: #ffffff; --sb-card: #f2efe9; --sb-ink: #1c2421; --sb-ink-2: #4e5752;
  --sb-line: #e4e0d8; --sb-line-2: #8a8578; --sb-sage-tint: #e9ede6; --sb-brook: #1c2421; --sb-brook-deep: #34413c;
  --sb-brook-soft: #4a6a71;
}

.sbt .sbt-h1, .sbt .sbt-h2 { font-weight: 500; letter-spacing: -0.015em; }
.sbt-label { color: var(--sb-stone); }
.sbt-lede { color: var(--sb-stone); }

/* hero, gallery layout: the room photo large; phones edge to edge above the copy, desktop side by side */
.sbt-hero--gallery .sbt-hero-media { margin: 0; position: relative; }
.sbt-hero--gallery .sbt-hero-media img, .sbt-hero--gallery .sbt-hero-media svg { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.sbt-hero--gallery .sbt-hero-media figcaption {
  position: absolute; left: 0.75rem; bottom: 0.75rem; padding: 0.3rem 0.6rem; background: rgba(251, 250, 247, 0.9);
  font: italic 500 0.9375rem/1.2 var(--sb-font-display); color: var(--sb-ink);
}
@media (max-width: 55.99rem) {
  .sbt-hero--gallery > .sbt-wrap { padding-top: 0; }
  .sbt-hero--gallery .sbt-hero-grid { gap: 1.75rem; }
  .sbt-hero--gallery .sbt-hero-media { order: -1; margin: 0 calc(-1 * var(--sb-gutter)); height: clamp(19rem, 48vh, 27rem); }
}
@media (min-width: 56rem) {
  .sbt-hero--gallery .sbt-hero-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 4.5rem; }
  .sbt-hero--gallery .sbt-hero-media { height: min(76vh, 44rem); box-shadow: 0 30px 60px -30px rgba(28, 36, 33, 0.35); }
}

/* the dark band (a hero with "Dark band" on; the home page's memorial section) */
.sbt.sbt-night { background: var(--sb-night); color: var(--sb-night-text); }
.sbt-night .sbt-h1, .sbt-night .sbt-h2, .sbt-night :where(h1, h2, h3), .sbt-night .sbt-hero-price { color: var(--sb-night-text); }
.sbt-night .sbt-lede, .sbt-night .sbt-hero-note, .sbt-night .sbt-label { color: var(--sb-night-muted); }
.sbt-night .sbt-btn-primary { background: var(--sb-night-text); color: var(--sb-night); border-color: var(--sb-night-text); }
.sbt-night .sbt-btn-primary:hover { background: #ffffff; border-color: #ffffff; }
.sbt-night .sbt-btn-secondary { color: var(--sb-night-text); border-color: var(--sb-night-text); }
.sbt-night.sbt-hero--gallery .sbt-hero-media { box-shadow: none; }
.sbt-night a:focus-visible { box-shadow: 0 0 0 3px var(--sb-night), 0 0 0 5px var(--sb-night-text); }

/* style cards: a swipeable row on phones (the next card peeks), three across from 40rem */
@media (max-width: 39.99rem) {
  .sbt-styles { display: flex; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; margin: 0 calc(-1 * var(--sb-gutter));
    padding: 0.25rem var(--sb-gutter) 1.75rem; scrollbar-width: none; }
  .sbt-styles::-webkit-scrollbar { display: none; }
  .sbt-style { flex: 0 0 78%; scroll-snap-align: start; scroll-margin-left: var(--sb-gutter); }
}
.sbt-style .sbt-h3 { font-size: 1.625rem; }

/* trust row: ink rules instead of sage, a touch more air */
.sbt-trust li { border-top: 1px solid var(--sb-ink); padding-top: 1rem; }
.sbt-steps li::before { border-width: 1px; }

/* tinted bands are a soft warm grey now, not beige */
.sbt-tint { background: var(--sb-linen); }
/* phones: the room photos are tall and the canvas sits high in them; zoom toward it so the portrait reads */
@media (max-width: 55.99rem) {
  .sbt-hero--gallery .sbt-hero-media { overflow: hidden; }
  .sbt-hero--gallery .sbt-hero-media img { transform: scale(1.45); transform-origin: 63% 30%; }
  .sbt-hero--gallery.sbt-night .sbt-hero-media img { transform-origin: 50% 22%; }
}

/* ==== Site review 2026-10-01 (Phase 2, draft theme first) =======================================================
   design / seo / live reviews of every page; the plan is ops/ (scratchpad page_review). Widget rules here restyle the
   builder without a Worker deploy (html body .sb-w beats widget.v1.css on specificity). */

/* builder, first screen (D125/D35): the next useful action is filled. "Choose photos" is the filled button; the sticky
   Continue stays visible (it still opens the photo picker, test_flow) but quiet until a photo has been added. */
html body .sb-w .sb-drop .sb-btn-secondary { background: var(--sb-brook); color: var(--sb-paper); border-color: var(--sb-brook); }
html body .sb-w .sb-drop .sb-btn-secondary:hover:not(:disabled) { background: var(--sb-brook-deep); border-color: var(--sb-brook-deep); }
@supports selector(:has(a)) {
  html body .sb-w .sb-view:has(> .sb-drop):has(.sb-thumbs:empty) .sb-actions > .sb-btn-primary {
    background: transparent; color: var(--sb-ink); border-color: var(--sb-line-2);
  }
}
/* the uppercase product label above the headline is gone (the title sits inside the H1, hidden): on phones the lead
   picture now spans the headline and the price */
@media (max-width: 59.99rem) {
  .sbt-has-lead .sbt-builder-aside > .sbt-lead { grid-row: 1 / span 2; }
}
/* Shopify Inbox's bubble covered the builder's buttons on phones: hidden wherever the builder or the order screen is
   (product pages and /pages/preview); every other page keeps it (operator decision 2026-10-01) */
@media (max-width: 39.99rem) {
  body:has(#stillbrook-builder) shopify-chat { display: none !important; }
}

/* breadcrumbs (S41, S154): products show them from 60rem (on phones they would push "Choose photos" down), guides always */
.sbt-crumbs { margin: 0 0 0.75rem; font: 400 0.9375rem/1.4 var(--sb-font-body); color: var(--sb-stone); }
.sbt-crumbs a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.sbt-crumbs a:hover { color: var(--sb-ink); }
@media (max-width: 59.99rem) { .sbt-crumbs--wide { display: none; } }

/* hero: the second path as a quiet text link under the one filled button (memorial on home, redeem) */
.sbt-hero-alt { margin: 1rem 0 0; font-size: 1.0625rem; }
.sbt-hero-alt a { color: var(--sb-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sbt-night .sbt-hero-alt a { color: var(--sb-night-text); }
/* the caption chip over the room photo (D7): 16px sans, easier to read over a photo */
.sbt-hero--gallery .sbt-hero-media figcaption { font: 500 1rem/1.25 var(--sb-font-body); }

/* trust row on phones (D6): one column, 16px lines */
@media (max-width: 39.99rem) {
  .sbt-trust { grid-template-columns: 1fr; gap: 1rem; }
  .sbt-trust span { font-size: 1rem; }
}

/* order screen, theme side (L100, D118, D120, D122, D123) */
.sbt-resume .sbt-head { margin-inline: auto; }
@supports selector(:has(a)) {
  .sbt-resume:has(.sb-reveal, .sb-order) .sbt-head .sbt-lede { display: none; }
}
html body .sb-w .sb-more > .sb-other, html body .sb-w .sb-more > .sb-try-l { align-self: flex-start; }
html body .sb-w .sb-actions > .sb-approve-l, html body .sb-w .sb-approve-l .sb-link { font-size: 0.875rem; }
/* the mount's height before the widget arrives (the CLS on /pages/preview: its mount has data-samples-base, which the
   older rule's div[data-samples] never matched) */
@media (min-width: 60rem) { .sbt div[data-samples-base]:not(.sb-w) { min-height: 756px; } }

/* one type system for the plain pages (D125, D44, D47, D89, D128, D22-D24): Horizon's default page body (about,
   guarantee, shipping, partners, contact) and the four policies read like the guides: 17-18px at 1.6, a 38rem measure,
   one H2/H3 scale, left-aligned titles. */
main .page-content, .shopify-policy__body .rte {
  font-family: var(--sb-font-body); font-size: 1.0625rem; line-height: 1.6; color: var(--sb-ink); max-width: 38rem;
}
@media (min-width: 48rem) { main .page-content, .shopify-policy__body .rte { font-size: 1.125rem; } }
main .page-content h2, .shopify-policy__body .rte h2 {
  font-family: var(--sb-font-display); font-weight: 500; font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2rem); line-height: 1.2;
  letter-spacing: -0.01em; margin: 2.5rem 0 0.75rem; text-wrap: balance;
}
main .page-content h3, .shopify-policy__body .rte h3 {
  font-family: var(--sb-font-display); font-weight: 600; font-size: 1.375rem; line-height: 1.25; margin: 1.75rem 0 0.5rem;
}
main .page-content p, main .page-content ul, main .page-content ol, .shopify-policy__body .rte p, .shopify-policy__body .rte ul, .shopify-policy__body .rte ol { margin: 0 0 1rem; }
main .page-content li + li, .shopify-policy__body .rte li + li { margin-top: 0.35rem; }
main .page-content table, .shopify-policy__body .rte table { display: block; max-width: 100%; overflow-x: auto; border-collapse: collapse; font-size: 1rem; }
main .page-content th, main .page-content td, .shopify-policy__body .rte th, .shopify-policy__body .rte td { text-align: left; vertical-align: top; padding: 0.5rem 0.75rem 0.5rem 0; border-bottom: 1px solid var(--sb-line); min-width: 8rem; }
.shopify-policy__container { max-width: 40rem; margin-inline: auto; padding-inline: var(--sb-gutter, 1rem); }
.shopify-policy__title { text-align: left; }
.shopify-policy__title h1 { font-family: var(--sb-font-display); font-weight: 500; font-size: clamp(2.25rem, 1.9rem + 1.2vw, 2.75rem); line-height: 1.1; letter-spacing: -0.015em; }
.shopify-policy__body .rte ul:first-of-type a { text-decoration-thickness: 1px; text-underline-offset: 3px; }

/* the announcement bar (D134, L113) is left as it is: 13px at 1.35 made it 10 px taller on a 390 px phone, and those
   10 px pushed "Choose photos" under the sticky Continue (fold_check2.py, 2026-10-01) */

/* footer signup: the no-offer heading and line exist for the sale and memorial pages; stillbrook-head switches them in */
[class*="__signup_alt_"] { display: none; }

/* polish (D136) */
::selection { background: #d8e2dc; color: #1c2421; }
.sbt a:focus-visible, main .page-content a:focus-visible, .shopify-policy__body a:focus-visible { outline: 2px solid var(--sb-ink); outline-offset: 3px; border-radius: 2px; }

/* FAQ (D50, D52): group links under the intro; group heads clearly larger than the questions, which are set in the
   body family so the two roles differ by more than size */
.sbt-faq-jump { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; margin: -0.5rem 0 2rem; max-width: 46rem; }
.sbt-faq-jump a { display: inline-flex; align-items: center; min-height: 44px; color: var(--sb-ink); font-weight: 600; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.sbt-faq-group { font-size: clamp(1.75rem, 1.5rem + 0.8vw, 2rem); margin-top: 3rem; scroll-margin-top: 1.5rem; }
.sbt-faq summary { font: 600 1.0625rem/1.4 var(--sb-font-body); }
@media (min-width: 48rem) { .sbt-faq summary { font-size: 1.125rem; } }

/* order status (D57-D59): one centred column under a centred title */
.sbt-status .sbt-wrap > .sbt-head, .sbt-status .sbt-form, .sbt-status .sbt-status-out { max-width: 28rem; margin-inline: auto; }
.sbt-status .sbt-head { text-align: center; }
.sbt-status .sbt-hint { margin: 0.35rem 0 0; font-size: 0.9375rem; color: var(--sb-stone); }

/* trust row titles that link to the guarantee (S76) */
.sbt-trust strong a { color: inherit; text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; }

/* phone first screen of the builder (2026-10-01, fold_check2.py at 390x740): "Choose photos" must end at least 25 px
   above the sticky Continue. The product label is gone but the price now wraps beside the lead picture, so three loose
   gaps in the upload step close up: under the progress steps, under the intro line, and inside the drop box. */
@media (max-width: 39.99rem) {
  html body .sb-w .sb-steps { margin-bottom: 1rem; }
  html body .sb-w .sb-view > .sb-h + p { margin-bottom: 1rem; }
  html body .sb-w .sb-drop { padding-top: 1.25rem; }
}

/* policy titles sit on the left like the text under them (D24) */
.shopify-policy__title, .shopify-policy__title h1 { text-align: left !important; }

/* the Christmas date table on phones (D54): the date is the headline of each card, the method the body, and the
   "who it is for" line the quiet one */
@media (max-width: 40rem) {
  .sbt-pagebody--christmas .sbt-prose td:first-child { font: 600 1.25rem/1.3 var(--sb-font-display); color: var(--sb-ink); }
  .sbt-pagebody--christmas .sbt-prose tr > td:last-child:not(:first-child) { font-size: 0.9375rem; color: var(--sb-stone); }
}

/* framed pictures (how it's made, D46): three white-matted frames in a row from 56rem, stacked on phones */
.sbt-figures-row { display: grid; gap: 2rem; }
@media (min-width: 56rem) { .sbt-figures-row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.5rem; } }
.sbt-figure { margin: 0; }
.sbt-figure-frame { background: var(--sb-mat); padding: 10px; border: 1px solid #e6dfd1; box-shadow: 0 1px 1px rgba(46, 58, 54, 0.06), 0 18px 30px -20px rgba(46, 58, 54, 0.45); }
.sbt-figure-frame img, .sbt-figure-frame svg { display: block; width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; }
.sbt-figure figcaption { margin-top: 0.75rem; font-size: 1rem; line-height: 1.45; color: var(--sb-stone); }
/* the search page's help line (S19) */
.sb-search-help { margin: 0.75rem 0 0; font-size: 1rem; }
.sb-search-help a { color: inherit; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }

/* contact on desktop (D67-D70): the page title sits in Horizon's narrow 672px column; the form and the details below
   it share that column (ids end in __form / __details: only the contact template has those sections) */
@media (min-width: 48rem) {
  [id^="shopify-section-template--"][id$="__form"] .section, [id^="shopify-section-template--"][id$="__details"] .section {
    max-width: 42rem; margin-inline: auto; display: block;
  }
}

/* header (Phase 4, D34/D137/L116): no account icon; no customer has ever made an account, and checkout needs none */
.header-actions__action[href*="/account"], a[href*="/account/login"].header-actions__action, .account-button, account-button { display: none !important; }
/* phone style carousel (home D4): a wider slice of the next card says there is more to swipe */
@media (max-width: 39.99rem) { .sbt-style { flex-basis: 72%; } }

/* tap targets (site review L5, L40, L47, L55, L72, L77, L112, D135): text links inside body copy and the footer get an
   invisible 44px-tall hit area (vertical padding on an inline element does not move the text), and an underline that
   clears the descenders */
.sbt-prose a, .sbt-faq-a a, .sbt-lede a, main .page-content a, .shopify-policy__body a, .sbt-hero-alt a, .sbt-crumbs a {
  padding-block: 0.6em; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
@media (max-width: 47.99rem) {
  [id*="__footer"] a { padding-block: 0.85rem; }
  [id*="__footer"] a[href*="instagram"], [id*="__footer"] a[href*="facebook"] { position: relative; padding-block: 0; }
  [id*="__footer"] a[href*="instagram"]::after, [id*="__footer"] a[href*="facebook"]::after { content: ""; position: absolute; inset: -10px; }
  [id*="__footer"] button { min-height: 44px; }
}

/* re-review 2026-10-01 (design D127): one centred prose column (42rem) for guides, how-it's-made, FAQ and the plain
   pages and policies; wide sections (home, builders) keep the 1088px container. Lines at most ~65 characters. */
.sbt-pagebody .sbt-wrap > *, .sbt-faqsec .sbt-wrap > * { max-width: 42rem; margin-inline: auto; }
.sbt-pagebody .sbt-prose > p, .sbt-pagebody .sbt-prose > ul, .sbt-pagebody .sbt-prose > ol,
main .page-content p, main .page-content li, .shopify-policy__body .rte p, .shopify-policy__body .rte li { max-width: 65ch; }
.shopify-policy__container { max-width: 42rem; padding-inline: var(--sb-gutter, 1rem); }
main .page-content th, .shopify-policy__body .rte th { text-transform: none; letter-spacing: normal; font-weight: 600; }
main .page-content td:first-child { font-weight: 600; }
@media (max-width: 47.99rem) {
  /* phone tables scroll sideways at a readable width instead of squeezing three columns into 390px */
  main .page-content table, .shopify-policy__body .rte table { -webkit-overflow-scrolling: touch; }
  main .page-content td, main .page-content th, .shopify-policy__body .rte td, .shopify-policy__body .rte th { min-width: 11rem; }
}
/* the contact form's labels show (placeholders vanish on typing; D67) */
.contact-form__form label.visually-hidden, .contact-form__form .visually-hidden:is(label) {
  position: static !important; width: auto !important; height: auto !important; margin: 0 0 0.35rem !important; clip: auto !important;
  overflow: visible !important; white-space: normal !important; display: block; font-weight: 600; font-size: 1rem;
}
/* body copy Horizon set at 14px: the contact details, the gift card description, the catalog intro (D124) */
main .text-block.rte, main .text-block.rte p, main .text-block.rte li { font-size: 1.0625rem; line-height: 1.6; }
@media (min-width: 48rem) { main .text-block.rte, main .text-block.rte p, main .text-block.rte li { font-size: 1.125rem; } }
/* Christmas dates: the date's <strong> asked for 900 on a 600 font (a faux bold) */
.sbt-pagebody--christmas .sbt-prose td:first-child strong { font-weight: inherit; }
/* the name/email row stacks, so each label sits over its own box */
.contact-form__form .contact-form__form-row { flex-direction: column; align-items: stretch; }