Layout & container width

Theme settings → Layout.

Container width

Single setting: Container width. Default 1440px. Set to fullwidth for an edge-to-edge layout (no max width).

This controls the boxed container used by most sections. Each section also has a per-section Container width option (Boxed vs Full width) — that overrides the global width per section.

When to use full-width per section

• Hero sections with cinematic imagery → set the section to Full width
• Lookbook / shoppable image → often looks better edge-to-edge
• Product listing — keep boxed for readability of dense card grids

Spacing scale

Dost uses an 8px base. Internal spacing tokens:

• --sp-1 8px
• --sp-2 16px
• --sp-3 24px
• --sp-4 32px
• --sp-5 48px
• --sp-6 64px
• --sp-7 80px
• --sp-8 120px

--page-gutter: clamp(20px, 4vw, 80px) — the horizontal page padding that scales with viewport width.

Per-section padding

Every section has Padding top and Padding bottom sliders (in px). The defaults are tuned for the editorial vertical rhythm; only change them if you need a tighter or looser layout for a specific area.

Header geometry — measured at runtime

Dost measures the actual header pieces after page load and exposes them as CSS variables. Sticky offsets and scroll-padding reference these — so an oversized announcement bar plus tall logo never breaks sticky behavior.

Variable	Tracks
--header-height	The visible header bar
--header-group-height	The full header group (header + announcement)
--announcement-height	The announcement bar alone — used by the sticky-header offset logic so the announcement scrolls away independently

The header-group sits inside <div id="header-group">; you can target it from custom CSS if needed.