/* STORE CONTENT PAGES -- the styling every theme gets (store_pages_v1.md; the pre-launch
contact/privacy walk, 2026-10-18). Linked with the page body by the storefront
(App::_store_page), so a native skin, a house theme and a vendor theme all have it;
inlined into the admin's sandboxed preview. Store-agnostic: every rule is scoped to
the page blocks' own sp-* classes, sizes are px/em (themes differ in their root size),
and a theme tunes the look through the --sp-* variables:
--sp-panel-bg the side panel (contact details beside the form)
--sp-field-border / --sp-field-radius / --sp-field-bg the contact form's fields
--sp-btn-bg / --sp-btn-color / --sp-btn-radius its button (where the theme has no .btn)
LOOK rules sit inside :where() (zero specificity) so a theme's own rule wins;
STRUCTURE rules (the row, full width, list spacing) carry real specificity. */
/* ---- text: lists are tight ------------------------------------------------------
The rich-text schema wraps every list item's text in a
(TipTap's listItem), and
most themes give every
a paragraph's bottom margin -- so each item was spaced like
a separate paragraph. Items sit together; paragraphs and headings keep the theme's
rhythm, with a quiet default where a theme has none. */
/* the item's paragraph takes the list's line height, as a bare
text would */
.sp-richtext li > p { margin: 0; line-height: inherit; }
.sp-richtext li > p + p,
.sp-richtext li > ul,
.sp-richtext li > ol { margin-top: .4em; }
.sp-richtext li > ul,
.sp-richtext li > ol { margin-bottom: 0; }
:where(.sp-richtext) :where(ul, ol) { margin: 0 0 1em; padding-left: 1.6em; }
:where(.sp-richtext) :where(ul) { list-style: disc; }
:where(.sp-richtext) :where(ol) { list-style: decimal; }
:where(.sp-richtext) :where(p) { margin: 0 0 1em; }
:where(.sp-richtext) :where(h2, h3) { margin: 1.2em 0 .5em; }
:where(.sp-richtext) :where(h2, h3):first-child { margin-top: 0; }
/* a heading's jump target clears a sticky header */
.sp-richtext :is(h2, h3)[id] { scroll-margin-top: 90px; }
/* ---- placement: side | main -> one row ---------------------------------------- */
.sp-row { display: flex; align-items: stretch; gap: 30px; margin: 0 0 40px; }
.sp-row > .sp-col { min-width: 0; }
.sp-row--split > .sp-col-side { flex: 0 0 calc(25% - 22.5px); }
.sp-row > .sp-col-main { flex: 1 1 0; }
.sp-row > .sp-col-side:only-child { flex: 1 1 0; }
.sp-col > .sp-block:last-child { margin-bottom: 0; }
@media (max-width: 991px) {
.sp-row--split > .sp-col-side { flex-basis: calc(33.333% - 20px); }
}
/* a phone: the row stacks, the side panel first */
@media (max-width: 767px) {
.sp-row { display: block; }
.sp-row > .sp-col-side { margin-bottom: 24px; }
}
/* the contact details as a side panel */
:where(.sp-col-side) > :where(.sp-contact-details) {
background: var(--sp-panel-bg, #f6f7f9); padding: 30px; box-sizing: border-box;
}
.sp-row--split > .sp-col-side > .sp-contact-details:only-child {
height: 100%; display: flex; flex-direction: column; justify-content: center;
}
.sp-contact-details .sp-cd-label { margin: 0 0 .35em; }
.sp-contact-details p { margin: 0 0 1.2em; }
.sp-contact-details p:last-child { margin-bottom: 0; }
.sp-contact-details .sp-cd-phone:has(+ .sp-cd-hours) { margin-bottom: 0; }
:where(.sp-contact-details) :where(a) { color: inherit; }
/* ---- placement: full -> edge to edge, outside the page's container --------------- */
.sp-full {
width: 100vw; max-width: 100vw; box-sizing: border-box;
margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw);
}
/* 100vw counts a classic scrollbar: clip the sliver instead of scrolling sideways
(clip, not hidden -- it makes no scroll container, so sticky headers keep working) */
body:has(.sp-full) { overflow-x: clip; }
.sp-full > .sp-block { margin-left: 0; margin-right: 0; }
.sp-full > .sp-image img { display: block; width: 100%; height: auto; }
.sp-full > .sp-map { margin: 0; }
.sp-full > .sp-map .sp-map-img { display: block; width: 100%; height: 386px; object-fit: cover; }
.sp-full > .sp-map .sp-map-caption { max-width: 1180px; margin: 12px auto 0; padding: 0 20px; }
/* a page that OPENS with a full-width block (the photo banner): the block meets the
chrome as the vintage page did; a page that ENDS with one (the map) meets the footer
(the body opens with the stylesheet's , so "first" is the first BLOCK: the first div) */
.sp-page:has(.store-page-body > div.sp-full:first-of-type) { padding-top: 0 !important; }
.sp-page:has(.store-page-body > div.sp-full:first-of-type) .store-page-title { margin-top: 30px; }
.sp-page:has(.store-page-body > .sp-full:last-child) { padding-bottom: 0 !important; }
.sp-page .store-page-body > .sp-full:last-child > .sp-block { margin-bottom: 0; }
/* room between a full-width block and the contained content beside it */
.store-page-body > .sp-full + :is(.sp-block, .sp-row) { margin-top: 60px; }
.store-page-body > :is(.sp-block, .sp-row) + .sp-full { margin-top: 40px; }
@media (max-width: 767px) {
.store-page-body > .sp-full + :is(.sp-block, .sp-row) { margin-top: 30px; }
.sp-full > .sp-map .sp-map-img { height: 260px; }
}
/* ---- the contact form ------------------------------------------------------------ */
.sp-sr {
position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.sp-contact input[type="text"],
.sp-contact input[type="email"],
.sp-contact textarea {
display: block; width: 100%; box-sizing: border-box; padding: 10px 16px;
font: inherit; color: inherit; background: var(--sp-field-bg, #fff);
border: 1px solid var(--sp-field-border, #e1e1e1); border-radius: var(--sp-field-radius, 0);
}
.sp-contact textarea { min-height: 100px; resize: vertical; }
/* the honeypot keeps its own off-screen box */
.sp-contact .sp-hp input[type="text"] { width: 1px; }
.sp-contact--compact .sp-cf-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin: 0 0 30px; }
.sp-contact--compact .sp-cf-grid > p { margin: 0; }
.sp-contact--compact .sp-cf-message { grid-column: 1 / -1; }
@media (max-width: 575px) {
.sp-contact--compact .sp-cf-grid { grid-template-columns: 1fr; }
}
/* the button's corners: 3px, the vintage page's (its Send Message is Riode's `btn btn-dark btn-rounded`, and
`.btn.btn-rounded` is border-radius: 3px). A look rule, so zero specificity: a theme's own button radius
(or its --sp-btn-radius) still wins; Riode's .btn sets none, so a Riode look takes this one */
:where(.sp-contact--compact) :where(.sp-submit) {
display: inline-block; padding: 14px 32px; border: 0; cursor: pointer;
background: var(--sp-btn-bg, #222); color: var(--sp-btn-color, #fff); border-radius: var(--sp-btn-radius, 3px);
font: inherit; font-weight: 700; text-transform: uppercase; letter-spacing: .02em;
}
.sp-contact--compact .sp-submit-arrow { display: inline-block; margin-left: .6em; }
/* the send row: the button, the Turnstile widget to its RIGHT, centred against it. The DOM keeps the widget
first (fields, challenge, submit: what assistive tech reads and Tab walks); order puts the button first on
screen. Where the FORM is too narrow for both -- a phone, or a main column beside a side panel -- the widget
wraps, and wrap-reverse stacks it ABOVE the button: the decision is the form's own width, no breakpoint.
The widget keeps its full 300x65 (Turnstile's normal size): never shrunk, scaled or clipped by the row.
On a form narrower than 300px (a 320px phone) it bleeds EQUALLY into both side gutters -- a negative inline
margin of half the shortfall, zero whenever the form is 300px or wider -- so it stays whole on screen
instead of running off the right edge (a skin that clips body overflow cut it; one that doesn't scrolled). */
.sp-contact--compact .sp-cf-send { display: flex; flex-wrap: wrap-reverse; align-items: center; gap: 16px 24px; }
.sp-contact--compact .sp-cf-send > .sp-cf-actions { order: -1; display: flex; margin: 0; }
.sp-contact--compact .sp-cf-send > .cf-turnstile { flex: none; line-height: 0; margin-inline: min(0px, (100% - 300px) / 2); }