/* Epic 0048 — the buyer storefront on Go (§17). Every color is a Go design token (auto-swapping under html.theme-dark); the one org-supplied color is the accent, injected as --sgo-accent/--sgo-accent-fg on the chrome wrapper (D-G4). Breakpoints: mobile < 700, tablet 700–1099, desktop ≥ 1100; content max-width 1100px centered. All selectors sgo-prefixed (module isolation, §2). */ /* Full-width like a real shop (Kyle, 2026-09-02): no centred 1100px column any more — the content runs the viewport's width behind one gutter that grows with the screen (1rem on a phone, 60px on a wide desktop). Every band that bleeds still lands on the viewport edge, because the bleed maths only assumes a centred content box. */ .sgo { --sgo-gutter: clamp(1rem, 3.5vw, 60px); max-width: none; margin: 0 auto; padding: 0 var(--sgo-gutter) 2rem; background: var(--surface); } .go-body--store .go-main { max-width: none; padding-inline: 0; } /* The store is its own white page: bleed the surface past the centred column so the whole viewport reads as the storefront, not a card on the Go app's grey. --surface swaps with the theme, so dark mode is unaffected. */ body:has(> .go-main > .sgo), body:has(.sgo) { background: var(--surface); } /* Banner imagery runs to the viewport edge (.sgo-bleed below), which is wider than the layout by the scrollbar's width. `clip` trims that without becoming a scroll container — `hidden` would, and would strand the product page's sticky buy box. On , NOT : `overflow: clip` paint-clips its whole subtree including position:fixed descendants, so on the body it made the Go bottom tab bar vanish as you scrolled past the body's box (Kyle, 2026-09-02). The root element defines the viewport's scrolling instead and leaves fixed elements alone. */ html:has(.sgo) { overflow-x: clip; } /* The storefront is its own page (Kyle, 2026-09-02): no Go top bar or bottom tab bar, so the store header is the top of the page and nothing needs clearing at the bottom. */ .go-body--store { padding-bottom: 0; } /* The Go body clips x-overflow, which makes the BODY a scroll container — and a sticky header sticks to the nearest scroller, which is then not the viewport, so it scrolled away with the page (Kyle, 2026-09-03). The store clips on instead (above), so the body can let go. */ .go-body--store { overflow-x: visible; } .go-body--store .go-main { padding-top: 0; } /* Escapes BOTH centred containers — .go-main's --go-col and .sgo's 1100px — to sit flush against the viewport, because a storefront banner that stops at the text column reads as a card, not a banner (Kyle, 2026-09-02). The 50% resolves against the content box, the 50vw against the viewport, so the element's edges land exactly on the viewport's. margin-INLINE, deliberately: the components below set their vertical spacing with the `margin` shorthand, which at equal specificity and later source order silently reset these to 0 — the band kept its 100vw width but lost its offset, so it started at the text column and overhung the right. Longhands on different axes can't collide that way. */ .sgo-bleed { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); border-radius: 0; } /* D-G4, extended 2026-09-02: the accent itself swaps per theme, so an org can pick one colour for light and another for dark. --sgo-accent-text stays as the name every rule already uses. */ .sgo { --sgo-accent: var(--sgo-accent-light); --sgo-accent-fg: var(--sgo-accent-fg-light); --sgo-accent-soft: var(--sgo-accent-soft-light); --sgo-accent-text: var(--sgo-accent-light); } html.theme-dark .sgo { --sgo-accent: var(--sgo-accent-dark); --sgo-accent-fg: var(--sgo-accent-fg-dark); --sgo-accent-soft: var(--sgo-accent-soft-dark); --sgo-accent-text: var(--sgo-accent-dark); } /* ── Store header (the top of the page since 2026-09-02) ─────────────── The Go top bar and bottom tab bar don't render around the storefront, so this band is the first thing on the page. It runs edge to edge (same bleed trick as .sgo-bleed) in the staff-picked background, and __inner puts the controls back on the 1100px content column. No rule under it (Kyle): the background is the demarcation. */ .sgo-header { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); background: var(--sgo-header-bg, var(--surface)); color: var(--sgo-header-fg, var(--ink)); /* Pinned while the page scrolls (Kyle, 2026-09-03). The background is the surface when no colour is picked, so content never shows through. */ position: sticky; top: 0; z-index: 40; } .sgo-header__inner { margin: 0 auto; padding: 0.7rem var(--sgo-gutter, 1rem); display: flex; align-items: center; gap: 0.75rem; /* One row, always: below 900px the links live in the hamburger, so there is nothing left to wrap (Kyle, 2026-09-02). */ flex-wrap: nowrap; } /* With a custom background every control derives its colour from the computed foreground rather than the theme's ink, so a dark band gets light text in light mode too. The popover menus reset these below — they float on the page surface, not the band. */ .sgo-header--custom { --sgo-header-fg2: color-mix(in srgb, var(--sgo-header-fg) 82%, transparent); --sgo-header-hover: color-mix(in srgb, var(--sgo-header-fg) 14%, transparent); } .sgo-header__brand { display: flex; /* The title sits on the logo's baseline, not its centre (Kyle, 2026-09-02). */ align-items: flex-end; gap: 0.5rem; font-weight: 800; font-size: 1.05rem; color: var(--sgo-header-fg, var(--ink)); text-decoration: none; line-height: 1.1; } /* A landscape slot, sized by WIDTH (Kyle, 2026-09-02): a wordmark is the common case, and object-fit: contain never crops it. A square or tall logo is held by max-height instead, so both shapes sit right. */ .sgo-header__logo { width: auto; height: auto; max-width: 150px; max-height: 34px; object-fit: contain; border-radius: 4px; } /* The hamburger: hidden until the links stop fitting, then it takes their place to the LEFT of the logo (Kyle, 2026-09-02). Same

pattern as the nav dropdowns, so it needs no JS beyond outside-close. */ .sgo-menu { display: none; position: relative; } .sgo-menu summary { list-style: none; cursor: pointer; } .sgo-menu summary::-webkit-details-marker { display: none; } .sgo-menu__button { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; color: var(--sgo-header-fg2, var(--ink-2)); } .sgo-menu__button:hover { background: var(--sgo-header-hover, var(--bg-2)); color: var(--sgo-header-fg, var(--ink)); } .sgo-menu__button svg { width: 20px; height: 20px; display: block; } /* Every popover the header opens floats on the page surface, so it goes back to the theme's ink whatever the band's colour is. */ .sgo-menu__panel, .sgo-nav__menu, .sgo-account__menu { --sgo-header-fg: var(--ink); --sgo-header-fg2: var(--ink-2); --sgo-header-hover: var(--bg-2); color: var(--ink); } .sgo-menu__panel { position: absolute; top: calc(100% + 6px); left: 0; z-index: 50; min-width: 210px; display: flex; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12)); padding: 0.35rem; } /* Inside the hamburger the links stack, and a dropdown opens in place rather than floating a second layer over the first. */ .sgo-menu__panel .sgo-nav__link { display: block; } .sgo-menu__panel details { position: static; } .sgo-menu__panel .sgo-nav__menu { position: static; border: 0; box-shadow: none; padding: 0 0 0 0.6rem; min-width: 0; } .sgo-nav { display: flex; align-items: center; gap: 0.15rem; flex-wrap: wrap; } .sgo-nav__link { padding: 0.3rem 0.6rem; border-radius: 8px; color: var(--sgo-header-fg2, var(--ink-2)); text-decoration: none; font-weight: 600; font-size: 0.9rem; white-space: nowrap; } .sgo-nav__link:hover { background: var(--sgo-header-hover, var(--bg-2)); color: var(--sgo-header-fg, var(--ink)); } .sgo-nav details { position: relative; } .sgo-nav summary { list-style: none; cursor: pointer; } .sgo-nav summary::-webkit-details-marker { display: none; } .sgo-nav__menu { position: absolute; top: calc(100% + 4px); left: 0; z-index: 40; min-width: 180px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow-lg, 0 8px 24px rgba(0,0,0,0.12)); padding: 0.3rem; } .sgo-nav__menu a { display: block; padding: 0.4rem 0.6rem; border-radius: 7px; color: var(--ink-2); text-decoration: none; font-weight: 600; font-size: 0.88rem; } .sgo-nav__menu a:hover { background: var(--bg-2); color: var(--ink); } .sgo-header__spacer { flex: 1; } .sgo-header__action { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 0.3rem 0.6rem; border-radius: 8px; border: 0; background: none; color: var(--sgo-header-fg2, var(--ink-2)); text-decoration: none; font-weight: 700; font-size: 0.9rem; white-space: nowrap; cursor: pointer; list-style: none; } .sgo-header__action::-webkit-details-marker { display: none; } .sgo-header__action:hover { background: var(--sgo-header-hover, var(--bg-2)); color: var(--sgo-header-fg, var(--ink)); } /* Icon-only actions are square buttons, and the icon is a flat stroke in the current text colour — no emoji, which renders as someone else's artwork and ignores the theme (Kyle, 2026-09-02). */ .sgo-header__action--icon { width: 34px; height: 34px; padding: 0; justify-content: center; } .sgo-icon { width: 20px; height: 20px; display: block; } /* Search (Kyle, 2026-09-02): a magnifier in the header; the field pops out centred over the page. Native