/* ==========================================================================
storefront.css — shop-base storefront chrome + layout (Shop Minimal)
--------------------------------------------------------------------------
Strict grid minimalism: white ground, near-black ink, 1px hairlines,
radius 0, uppercase micro-typography. TOKEN-ONLY (Layer B/C, var(--shop-*)).
No hex literals; no raw px in padding/margin/gap (DESIGN.md §11 gates 1/3);
raw px only for 1px hairlines + fixed component boxes; letter-spacing in em.
Base tokens + @font-face come from shop-tokens.css (bundled in app.min.css);
the admin Theme tab override is injected after this file.
========================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html:has(body.storefront) {
overscroll-behavior: none;
}
body.storefront {
margin: 0;
min-height: 100vh;
background: var(--shop-bg);
color: var(--shop-text);
font-family: var(--shop-font-body);
font-size: var(--shop-text-base);
line-height: var(--shop-lh-normal);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
overscroll-behavior: none;
}
body.storefront img { max-width: 100%; height: auto; display: block; }
/* Inherit colour for plain links, but NOT buttons — `body.storefront a`
(0,1,2) would otherwise outrank `.storefront-btn--primary` (0,1,0) and make
white-on-ink button text inherit ink (invisible). */
body.storefront a:not(.storefront-btn) { color: inherit; }
/* shared container -------------------------------------------------------- */
.storefront-header__inner,
.storefront-footer__inner,
.storefront-section__inner,
.storefront-page__inner {
width: 100%;
max-width: var(--shop-container-max);
margin-right: auto;
margin-left: auto;
padding-right: var(--shop-container-px);
padding-left: var(--shop-container-px);
}
/* micro-typography helpers ------------------------------------------------ */
.storefront-eyebrow,
.storefront-section__eyebrow {
display: block;
margin-bottom: var(--shop-s-3);
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* skip-link --------------------------------------------------------------- */
.storefront-skip {
position: absolute;
left: var(--shop-s-2);
top: var(--shop-s-2);
z-index: var(--shop-z-toast);
background: var(--shop-text);
color: var(--shop-text-inverse);
padding: var(--shop-s-2) var(--shop-s-4);
border-radius: var(--shop-radius-none);
font-size: var(--shop-text-sm);
text-decoration: none;
transform: translateY(-200%);
transition: transform var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-skip:focus { transform: translateY(0); }
/* buttons ------------------------------------------------------------------
Rectangular, radius 0, uppercase micro-type.
Primary = ink block, hover inverts to white/ink outline.
Ghost = 1px ink outline, hover inverts to ink block.
Ghost-inverse lives on ink bands (white outline). */
.storefront-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--shop-s-2);
min-height: 44px;
padding: var(--shop-btn-padding-y) var(--shop-s-8);
border: 1px solid transparent;
border-radius: var(--shop-btn-radius);
font-family: var(--shop-font-body);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background var(--shop-duration-base) var(--shop-ease-out),
color var(--shop-duration-base) var(--shop-ease-out),
border-color var(--shop-duration-base) var(--shop-ease-out);
}
.storefront-btn--primary {
background: var(--shop-accent);
color: var(--shop-text-on-accent);
border-color: var(--shop-accent);
}
.storefront-btn--primary:hover {
background: var(--shop-bg);
color: var(--shop-accent);
border-color: var(--shop-accent);
}
.storefront-btn--ghost {
background: transparent;
color: var(--shop-text);
border-color: var(--shop-border-strong);
}
.storefront-btn--ghost:hover {
background: var(--shop-accent);
color: var(--shop-text-on-accent);
border-color: var(--shop-accent);
}
.storefront-btn--ghost-inverse {
background: transparent;
color: var(--shop-text-inverse);
border-color: var(--shop-text-inverse);
}
.storefront-btn--ghost-inverse:hover {
background: var(--shop-text-inverse);
color: var(--shop-text);
border-color: var(--shop-text-inverse);
}
/* ==========================================================================
ANNOUNCEMENT BAR (configurable promo above the header — {{shop:banner}})
========================================================================== */
.shop-banner {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: var(--shop-s-3);
padding: var(--shop-s-2) var(--shop-s-4);
background: var(--shop-text);
color: var(--shop-text-inverse);
text-align: center;
}
.shop-banner[hidden] { display: none; }
.shop-banner__text {
margin: 0;
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.shop-banner__link {
font-weight: var(--shop-weight-semi);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.shop-banner__close {
position: absolute;
right: var(--shop-s-1);
top: 50%;
transform: translateY(-50%);
width: 44px;
height: 44px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--shop-text-inverse);
font-size: var(--shop-text-2xl);
line-height: 1;
cursor: pointer;
}
/* Sobo skin: mustard announcement bar with dark ink (matches the hero band),
instead of the default black strip. body.storefront outranks the base rule. */
body.storefront .shop-banner { background: var(--sf2-yellow); color: var(--sf2-ink); }
body.storefront .shop-banner__link { color: var(--sf2-red); }
/* ==========================================================================
HEADER — white, sticky, hairline bottom
Desktop 3-zone grid: nav (left) · wordmark (centre) · icons (right)
========================================================================== */
.storefront-header {
position: sticky;
top: 0;
z-index: var(--shop-z-header);
background: var(--shop-bg);
border-bottom: 1px solid var(--shop-border);
}
.storefront-header__inner {
display: flex;
align-items: center;
gap: var(--shop-s-4);
min-height: var(--shop-header-h);
}
@media (min-width: 768px) {
.storefront-header__inner { min-height: var(--shop-header-h-md); }
}
.storefront-logo { display: inline-flex; align-items: center; text-decoration: none; line-height: var(--shop-lh-tight); }
/* optional uploaded logo replaces the text wordmark.
body.storefront selector so it outranks the global `body.storefront img`
reset (height:auto) — an SVG logo without it collapses to 0x0. */
body.storefront .storefront-logo__img { display: block; height: var(--shop-s-12); width: auto; max-width: none; }
body.storefront .storefront-logo__img[src=""] { display: none; }
.storefront-logo:has(.storefront-logo__img:not([src=""])) .storefront-logo__text { display: none; }
.storefront-logo__text {
font-family: var(--shop-font-display);
font-size: var(--shop-text-lg);
font-weight: var(--shop-weight-semi);
letter-spacing: 0.2em;
text-transform: uppercase;
white-space: nowrap;
}
.storefront-actions {
display: flex;
align-items: center;
gap: var(--shop-s-2);
margin-left: auto;
}
/* burger ------------------------------------------------------------------ */
.storefront-burger {
display: inline-flex;
flex-direction: column;
justify-content: center;
gap: var(--shop-s-1);
width: 44px;
height: 44px;
padding: var(--shop-s-3);
background: transparent;
border: 0;
cursor: pointer;
color: var(--shop-text);
}
.storefront-burger__line {
display: block;
width: 100%;
height: 1px;
background: currentColor;
transition: transform var(--shop-duration-fast) var(--shop-ease-out),
opacity var(--shop-duration-fast) var(--shop-ease-out);
}
/* nav-drawer (mobile = slide-out left drawer; desktop = inline) ----------- */
.storefront-nav__close {
align-self: flex-end;
width: 44px;
height: 44px;
background: transparent;
border: 0;
font-size: var(--shop-text-3xl);
line-height: 1;
color: var(--shop-text);
cursor: pointer;
}
.storefront-nav {
position: fixed;
top: 0;
left: 0;
bottom: 0;
width: 84vw;
max-width: 360px;
z-index: var(--shop-z-drawer);
background: var(--shop-bg);
border-right: 1px solid var(--shop-border);
padding: var(--shop-s-4) var(--shop-container-px) var(--shop-s-8);
display: flex;
flex-direction: column;
gap: var(--shop-s-2);
transform: translateX(-100%);
visibility: hidden;
overflow-y: auto;
transition: transform var(--shop-duration-base) var(--shop-ease-out),
visibility var(--shop-duration-base) var(--shop-ease-out);
}
.storefront-header.is-nav-open .storefront-nav {
transform: translateX(0);
visibility: visible;
}
.storefront-nav ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--shop-s-1);
}
.storefront-nav a {
display: block;
padding: var(--shop-s-4) 0;
font-size: var(--shop-text-sm);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: var(--shop-text);
border-bottom: 1px solid var(--shop-border);
}
.storefront-nav a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.4em;
}
.storefront-nav-backdrop {
position: fixed;
inset: 0;
z-index: calc(var(--shop-z-header) - 1);
background: var(--shop-bg-overlay);
opacity: 0;
transition: opacity var(--shop-duration-base) var(--shop-ease-out);
}
.storefront-nav-backdrop:not([hidden]) { opacity: 1; }
@media (min-width: 900px) {
.storefront-burger,
.storefront-nav__close { display: none; }
/* 3-column grid: menu (start) · brand (true centre) · actions (end). The
auto centre column is centred by the symmetric 1fr side columns, so the
brand sits at the real header midpoint regardless of menu/actions widths. */
.storefront-header__inner {
display: grid;
grid-template-columns: 1fr auto 1fr;
}
/* Pin all three to row 1 (sparse auto-flow can't backtrack across the
explicit column placements). Brand LEFT, menu CENTER, actions RIGHT. */
.storefront-logo { grid-column: 1; grid-row: 1; justify-self: start; }
.storefront-nav { grid-column: 2; grid-row: 1; justify-self: center; }
.storefront-actions { grid-column: 3; grid-row: 1; justify-self: end; }
.storefront-nav {
position: static;
width: auto;
max-width: none;
transform: none;
visibility: visible;
overflow: visible;
border-right: 0;
background: transparent;
padding: 0;
flex-direction: row;
}
.storefront-nav ul {
flex-direction: row;
align-items: center;
gap: var(--shop-s-6);
}
.storefront-nav a {
padding: var(--shop-s-2) 0;
font-size: var(--shop-text-xs);
border-bottom: 0;
}
.storefront-nav-backdrop { display: none; }
/* search + account live in the header actions on desktop, not the drawer.
`.storefront-header` prefix wins over the base drawer rules below. */
.storefront-header .storefront-nav__search,
.storefront-header .storefront-nav__account { display: none; }
}
/* mobile header layout: burger left · wordmark centre · icons right -------- */
@media (max-width: 899px) {
.storefront-header__inner { position: relative; }
.storefront-logo {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
/* secondary actions move into the nav-drawer on mobile (cart + ♥ stay).
`.storefront-header` prefix raises specificity above the base
action-icon rule (which appears later in source). */
.storefront-header .storefront-actions .shop-search-toggle,
.storefront-header .storefront-actions .shop-account-icon { display: none; }
/* The drawer is nested in the header's (sticky) stacking context, so the
backdrop can't paint above it. While the drawer is open, hide the header
actions so the cart/♥ icons in the uncovered right strip aren't clickable
behind the modal. */
.storefront-header.is-nav-open .storefront-actions { visibility: hidden; }
}
/* nav-drawer search + account (mobile only) ------------------------------- */
.storefront-nav__search {
display: flex;
align-items: center;
gap: var(--shop-s-2);
margin-bottom: var(--shop-s-4);
padding: 0 var(--shop-s-3);
border: 1px solid var(--shop-border);
border-radius: var(--shop-radius-none);
}
.storefront-nav__search-input {
flex: 1 1 auto;
min-width: 0;
padding: var(--shop-s-3) 0;
border: 0;
background: transparent;
color: var(--shop-text);
font-family: var(--shop-font-body);
font-size: var(--shop-text-base);
}
.storefront-nav__search-input:focus { outline: none; }
.storefront-nav__search-btn {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
background: transparent;
border: 0;
color: var(--shop-text-muted);
cursor: pointer;
}
.storefront-nav__account {
margin-top: var(--shop-s-2);
padding: var(--shop-s-4) 0;
font-size: var(--shop-text-sm);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
text-decoration: none;
color: var(--shop-text);
}
.storefront-nav__account:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.4em;
}
/* header action icons (search/wishlist/account/cart) ---------------------- */
.storefront-actions .shop-cart-icon,
.storefront-actions .shop-wishlist-icon,
.storefront-actions .shop-account-icon,
.storefront-actions .shop-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: transparent;
border: 0;
color: var(--shop-text);
text-decoration: none;
cursor: pointer;
position: relative;
transition: opacity var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-actions .shop-cart-icon:hover,
.storefront-actions .shop-wishlist-icon:hover,
.storefront-actions .shop-account-icon:hover,
.storefront-actions .shop-search-toggle:hover { opacity: 0.6; }
.shop-wishlist-icon__glyph,
.shop-cart-icon__glyph { position: relative; display: inline-flex; }
.shop-wishlist-icon__count,
.shop-cart-icon__count {
position: absolute;
top: -6px;
right: -8px;
min-width: 16px;
height: 16px;
padding: 0 var(--shop-s-1);
border-radius: var(--shop-radius-full);
background: var(--shop-text);
color: var(--shop-text-inverse);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-semi);
line-height: 16px;
text-align: center;
}
/* search overlay ---------------------------------------------------------- */
.storefront-search {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: var(--shop-z-modal);
background: var(--shop-bg);
border-bottom: 1px solid var(--shop-border);
padding: var(--shop-s-4) var(--shop-container-px);
}
.storefront-search__form {
display: flex;
align-items: center;
gap: var(--shop-s-3);
max-width: var(--shop-container-max);
margin-right: auto;
margin-left: auto;
}
.storefront-search__glass { display: inline-flex; flex-shrink: 0; color: var(--shop-text-muted); }
.storefront-search__input {
flex: 1 1 auto;
min-width: 0;
padding: var(--shop-s-3) 0;
border: 0;
background: transparent;
color: var(--shop-text);
font-family: var(--shop-font-display);
font-size: var(--shop-text-xl);
font-weight: var(--shop-weight-medium);
}
.storefront-search__input:focus { outline: none; }
.storefront-search__submit {
flex-shrink: 0;
min-height: 44px;
padding: var(--shop-s-2) var(--shop-s-5);
background: var(--shop-text);
color: var(--shop-text-inverse);
border: 1px solid var(--shop-text);
border-radius: var(--shop-btn-radius);
font-family: var(--shop-font-body);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
cursor: pointer;
transition: background var(--shop-duration-base) var(--shop-ease-out),
color var(--shop-duration-base) var(--shop-ease-out);
}
.storefront-search__submit:hover {
background: var(--shop-bg);
color: var(--shop-text);
}
.storefront-search__close {
flex-shrink: 0;
width: 44px;
height: 44px;
background: transparent;
border: 0;
font-size: var(--shop-text-3xl);
line-height: 1;
color: var(--shop-text);
cursor: pointer;
}
/* ==========================================================================
CART DRAWER (ST3) — slide-out mini-cart (DOM built by shop.js)
========================================================================== */
.shop-cart-drawer {
position: fixed;
inset: 0;
z-index: var(--shop-z-modal);
visibility: hidden;
opacity: 0;
transition: opacity var(--shop-duration-base) var(--shop-ease-out),
visibility var(--shop-duration-base) var(--shop-ease-out);
}
.shop-cart-drawer.is-open { visibility: visible; opacity: 1; }
.shop-cart-drawer__backdrop {
position: absolute;
inset: 0;
background: var(--shop-bg-overlay);
}
.shop-cart-drawer__panel {
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 92vw;
max-width: 420px;
display: flex;
flex-direction: column;
background: var(--shop-bg);
border-left: 1px solid var(--shop-border);
transform: translateX(100%);
transition: transform var(--shop-duration-base) var(--shop-ease-out);
}
.shop-cart-drawer.is-open .shop-cart-drawer__panel { transform: translateX(0); }
.shop-cart-drawer__head {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--shop-s-3);
padding: var(--shop-s-4) var(--shop-container-px);
border-bottom: 1px solid var(--shop-border);
}
.shop-cart-drawer__title {
margin: 0;
font-family: var(--shop-font-display);
font-size: var(--shop-text-lg);
font-weight: var(--shop-weight-semi);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--shop-text);
}
.shop-cart-drawer__close {
flex-shrink: 0;
width: 44px;
height: 44px;
background: transparent;
border: 0;
font-size: var(--shop-text-3xl);
line-height: 1;
color: var(--shop-text);
cursor: pointer;
}
.shop-cart-drawer__close:hover { opacity: 0.6; }
.shop-cart-drawer__body {
flex: 1 1 auto;
overflow-y: auto;
padding: var(--shop-s-2) var(--shop-container-px);
}
.shop-cart-drawer__items {
list-style: none;
margin: 0;
padding: 0;
}
.shop-cart-drawer__item {
position: relative;
display: grid;
grid-template-columns: 64px 1fr;
gap: var(--shop-s-3);
padding: var(--shop-s-4) 0;
border-bottom: 1px solid var(--shop-border);
}
.shop-cart-drawer__thumb {
width: 64px;
height: 80px;
/* contain + centered so the whole product shows (cover crops the top). */
object-fit: contain;
object-position: center;
border-radius: var(--shop-radius-none);
background: var(--shop-bg-alt);
}
.shop-cart-drawer__thumb--empty { display: block; }
.shop-cart-drawer__main {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--shop-s-1);
padding-right: var(--shop-s-6);
}
.shop-cart-drawer__name {
font-family: var(--shop-font-body);
font-size: var(--shop-text-sm);
font-weight: var(--shop-weight-medium);
line-height: var(--shop-lh-snug);
color: var(--shop-text);
text-decoration: none;
}
.shop-cart-drawer__name:hover { text-decoration: underline; text-underline-offset: 0.25em; }
.shop-cart-drawer__variant {
margin: 0;
font-size: var(--shop-text-sm);
color: var(--shop-text-muted);
}
.shop-cart-drawer__row {
margin-top: var(--shop-s-1);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--shop-s-3);
}
.shop-cart-drawer__qty {
display: inline-flex;
align-items: center;
border: 1px solid var(--shop-border);
border-radius: var(--shop-radius-none);
}
.shop-cart-drawer__qty-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 36px;
height: 36px;
background: transparent;
border: 0;
color: var(--shop-text);
cursor: pointer;
}
.shop-cart-drawer__qty-btn:disabled { color: var(--shop-text-muted); cursor: default; }
.shop-cart-drawer__qty-btn:not(:disabled):hover { background: var(--shop-bg-alt); }
.shop-cart-drawer__qty-val {
min-width: 32px;
text-align: center;
font-size: var(--shop-text-sm);
font-variant-numeric: tabular-nums;
color: var(--shop-text);
}
.shop-cart-drawer__price {
font-size: var(--shop-text-base);
font-weight: var(--shop-weight-semi);
color: var(--shop-text);
white-space: nowrap;
}
.shop-cart-drawer__remove {
position: absolute;
top: var(--shop-s-3);
right: 0;
width: 32px;
height: 32px;
display: inline-flex;
align-items: center;
justify-content: center;
background: transparent;
border: 0;
color: var(--shop-text-muted);
cursor: pointer;
}
.shop-cart-drawer__remove:hover { color: var(--shop-text); }
.shop-cart-drawer__foot {
flex-shrink: 0;
padding: var(--shop-s-4) var(--shop-container-px) var(--shop-s-6);
border-top: 1px solid var(--shop-border);
}
.shop-cart-drawer__subtotal {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: var(--shop-s-4);
font-size: var(--shop-text-base);
color: var(--shop-text);
}
.shop-cart-drawer__subtotal-value {
font-size: var(--shop-text-xl);
font-weight: var(--shop-weight-semi);
}
/* Quantity-discount + total lines in the drawer footer. The discount row sits
tight under the subtotal; its value is smaller than the headline subtotal. */
.shop-cart-drawer__subtotal--discount {
margin-top: calc(-1 * var(--shop-s-3));
margin-bottom: var(--shop-s-2);
font-size: var(--shop-text-sm);
color: var(--shop-success-text);
}
.shop-cart-drawer__subtotal--discount .shop-cart-drawer__subtotal-value {
font-size: var(--shop-text-sm);
font-weight: var(--shop-weight-medium);
color: var(--shop-success-text);
}
.shop-cart-drawer__subtotal--total {
padding-top: var(--shop-s-3);
border-top: 1px solid var(--shop-border);
}
.shop-cart-drawer__checkout {
display: block;
width: 100%;
padding: var(--shop-s-3) var(--shop-s-5);
background: var(--shop-text);
color: var(--shop-text-inverse);
border: 1px solid var(--shop-text);
border-radius: var(--shop-btn-radius);
font-family: var(--shop-font-body);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
text-align: center;
text-decoration: none;
transition: background var(--shop-duration-base) var(--shop-ease-out),
color var(--shop-duration-base) var(--shop-ease-out);
}
.shop-cart-drawer__checkout:hover {
background: var(--shop-bg);
color: var(--shop-text);
}
.shop-cart-drawer__view {
display: block;
margin-top: var(--shop-s-3);
text-align: center;
font-size: var(--shop-text-sm);
color: var(--shop-text-muted);
text-decoration: underline;
text-underline-offset: 0.25em;
}
.shop-cart-drawer__view:hover { color: var(--shop-text); }
.shop-cart-drawer__empty {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--shop-s-2);
padding: var(--shop-s-8) var(--shop-s-4);
}
.shop-cart-drawer__empty-title {
margin: 0;
font-family: var(--shop-font-display);
font-size: var(--shop-text-xl);
font-weight: var(--shop-weight-medium);
color: var(--shop-text);
}
.shop-cart-drawer__empty-text {
margin: 0;
font-size: var(--shop-text-sm);
color: var(--shop-text-muted);
}
.shop-cart-drawer__empty-link {
margin-top: var(--shop-s-2);
font-size: var(--shop-text-sm);
color: var(--shop-text);
text-decoration: underline;
text-underline-offset: 0.25em;
}
/* The site-wide base rule `body.storefront a:not(.storefront-btn){color:inherit}`
(specificity 0,2,2) out-ranks the single-class drawer link rules above, so the
action links would inherit ink — fatally, the checkout button would be ink-on-ink.
Re-assert their colours with a `body.storefront a.` selector (ties on
specificity, wins on source order). Backgrounds are untouched by the base rule. */
body.storefront a.shop-cart-drawer__name { color: var(--shop-text); }
body.storefront a.shop-cart-drawer__checkout { color: var(--shop-text-inverse); }
body.storefront a.shop-cart-drawer__checkout:hover { color: var(--shop-text); }
body.storefront a.shop-cart-drawer__view { color: var(--shop-text-muted); }
body.storefront a.shop-cart-drawer__view:hover { color: var(--shop-text); }
body.storefront a.shop-cart-drawer__empty-link { color: var(--shop-text); }
/* Same trap for the generic button-as-link classes (cart page checkout /
continue / empty-state browse): without this they inherit ink → ink-on-ink. */
body.storefront a.shop-btn-gradient { color: var(--shop-btn-primary-text); }
body.storefront a.shop-btn-gradient:hover { color: var(--shop-btn-primary-hover-text); }
body.storefront a.shop-btn-outline { color: var(--shop-btn-ghost-text); }
body.storefront a.shop-btn-outline:hover { color: var(--shop-btn-ghost-hover-text); }
@media (prefers-reduced-motion: reduce) {
.shop-cart-drawer,
.shop-cart-drawer__panel { transition: none; }
}
/* ==========================================================================
HERO — 3 owner-selectable modes (section-level select id="mode"):
--photo first slide only, full-bleed cover, no text/controls (default,
baked into the template markup for the no-JS path)
--slider autoplay crossfade over all slides, line-dash indicators,
no arrows/text (storefront.js HeroSlider)
--classic first slide as background + scrim + centred text/CTA block
storefront.js reads the hidden mode and swaps the mode class.
========================================================================== */
.storefront-sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: 0;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.storefront-hero {
position: relative;
display: flex;
align-items: center;
justify-content: center;
min-height: 70vh;
overflow: hidden;
background: var(--shop-bg-alt);
}
/* phones: a 70vh band over-crops the wide banner — keep it shorter */
@media (max-width: 767px) {
.storefront-hero { min-height: 48vh; }
}
/* The section-level select renders as a hidden metadata span; hide it in the
raw template state too (before content substitution inlines display:none). */
.storefront-hero__mode { display: none; }
/* slide stack — fills the band in every mode ------------------------------ */
.storefront-hero__slides {
position: absolute;
inset: 0;
}
.storefront-hero__slide {
position: absolute;
inset: 0;
}
/* Scoped so `height: 100%` outranks the global `body.storefront img
{ height: auto }` reset (0,1,2) — without this the hero img keeps its
intrinsic ratio and never cover-crops the band. Static centre crop. */
.storefront-hero /* slide link wrapper — fills the slide; empty href is neutralised in JS */
.storefront-hero__slide-link { display: block; width: 100%; height: 100%; cursor: pointer; }
.storefront-hero__slide-link:not([href]) { cursor: default; }
/* Scoped (0,2,0) so height:100% outranks the `body.storefront img
{ height: auto }` reset (0,1,2) — otherwise the image keeps its intrinsic
ratio and floats as a thin strip inside the 70vh band (visible on mobile). */
.storefront-hero .storefront-hero__media {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
}
/* Empty media collapses — the band keeps its --shop-bg-alt ground. */
.storefront-hero__media:not([src]),
.storefront-hero__media[src=""] { display: none; }
/* Editor-bridge hover-highlight adds `.nwl-highlight` { position: relative },
which (equal specificity, loaded later) would drop the slide into normal
flow and make the hero jump. Pin it absolute regardless. */
.storefront-hero__slide.nwl-highlight,
.storefront-hero__slide.nwl-highlight--active,
.storefront-hero__slide.nwl-highlight--container {
position: absolute !important;
}
/* scrim + text: hidden by default, mode classes opt them in ---------------- */
.storefront-hero__scrim {
position: absolute;
inset: 0;
opacity: 0;
background: var(--shop-hero-scrim);
}
.storefront-hero__inner { display: none; }
/* MODE photo (default): first slide only, nothing else -------------------- */
.storefront-hero--photo .storefront-hero__slide:not(:first-child) { display: none; }
/* MODE slider: crossfade stack + indicators (built by storefront.js) ------- */
.storefront-hero--slider { background: var(--shop-text); }
.storefront-hero--slider .storefront-hero__slide {
opacity: 0;
transition: opacity var(--shop-duration-slower) var(--shop-ease-out);
}
/* Before JS boots (or with JS off) the first slide stands in statically. */
.storefront-hero--slider .storefront-hero__slides:not(.is-init) .storefront-hero__slide:first-child { opacity: 1; }
.storefront-hero--slider .storefront-hero__slide.is-active { opacity: 1; z-index: 1; }
/* The just-departed slide holds full opacity beneath the incoming one so the
crossfade never dips to the hero background. */
.storefront-hero--slider .storefront-hero__slide.is-leaving { opacity: 1; z-index: 0; }
.storefront-hero__indicators {
position: absolute;
left: 50%;
bottom: var(--shop-s-6);
z-index: 2;
display: flex;
gap: var(--shop-s-2);
transform: translateX(-50%);
}
.storefront-hero__indicator {
display: block;
width: var(--shop-s-8);
height: 2px;
background: var(--shop-text-inverse);
opacity: 0.35;
transition: opacity var(--shop-duration-base) var(--shop-ease-out);
}
.storefront-hero__indicator.is-active { opacity: 1; }
/* MODE classic: first slide as background + scrim + centred text/CTA ------- */
.storefront-hero--classic { background: var(--shop-text); }
.storefront-hero--classic .storefront-hero__slide:not(:first-child) { display: none; }
.storefront-hero--classic .storefront-hero__scrim { opacity: 1; }
.storefront-hero--classic .storefront-hero__inner {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
max-width: var(--shop-container-max);
margin-right: auto;
margin-left: auto;
padding: var(--shop-s-24) var(--shop-container-px);
text-align: center;
}
.storefront-hero__eyebrow {
display: block;
margin-bottom: var(--shop-s-4);
color: var(--shop-text-inverse);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.16em;
text-transform: uppercase;
}
.storefront-hero__title {
margin: 0 0 var(--shop-s-4);
max-width: 18ch;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: clamp(2.5rem, 6vw, 4.5rem);
line-height: var(--shop-lh-tight);
letter-spacing: var(--shop-tracking-tight);
color: var(--shop-text-inverse);
}
.storefront-hero__subtitle {
margin: 0 0 var(--shop-s-8);
max-width: 48ch;
color: var(--shop-text-inverse);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
/* ==========================================================================
SECTIONS — left-aligned heads; optional right-side text link
========================================================================== */
.storefront-section__inner {
padding-top: var(--shop-s-20);
padding-bottom: var(--shop-s-20);
}
.storefront-section__head {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--shop-s-4);
margin-bottom: var(--shop-s-10);
text-align: left;
}
.storefront-section__eyebrow { margin-bottom: var(--shop-s-2); }
.storefront-section__title {
margin: 0;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: clamp(1.75rem, 3vw, 2.5rem);
line-height: var(--shop-lh-snug);
letter-spacing: var(--shop-tracking-tight);
}
.storefront-section__link {
flex-shrink: 0;
padding-bottom: var(--shop-s-1);
color: var(--shop-text);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.4em;
white-space: nowrap;
transition: opacity var(--shop-duration-fast) var(--shop-ease-out);
}
/* centred variant for home section heads */
.storefront-section__head--center {
justify-content: center;
text-align: center;
}
.storefront-section__head--center .storefront-section__eyebrow::before,
.storefront-section__head--center .storefront-section__eyebrow::after { content: none; }
.storefront-section__link::after { content: "\2192"; margin-left: var(--shop-s-2); }
.storefront-section__link:hover { opacity: 0.6; }
/* ==========================================================================
CATEGORY BAND (home) — full-width band, hairline top+bottom; restyles the
{{shop:categories}} output (.shop-cat-cards from ShopRenderer) into a
horizontal row of uppercase cells separated by hairline verticals.
========================================================================== */
.storefront-cats {
border-top: 1px solid var(--shop-border);
border-bottom: 1px solid var(--shop-border);
}
.storefront-cats__inner {
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-16);
}
.storefront-cats__head { margin-bottom: var(--shop-s-8); text-align: center; }
/* hairline-table trick: container draws top+left, every cell right+bottom —
survives any category count and any wrap point. */
/* Photo tiles: category image (inline background-image from ShopRenderer)
as a 4/3 tile with a white caption bar; falls back to bg-alt when the
category has no image. */
.storefront-cats .shop-cat-cards {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--shop-s-4);
}
@media (min-width: 900px) {
.storefront-cats .shop-cat-cards { grid-template-columns: repeat(4, 1fr); gap: var(--shop-s-5); }
}
.storefront-cats .shop-cat-card {
display: block;
aspect-ratio: auto;
height: auto;
overflow: visible;
border-radius: var(--shop-radius-none);
/* the inline background-image paints in ::before (the photo area) only —
hide it on the card itself so it can't bleed behind the name row */
background-size: 0 0 !important;
background-color: transparent !important;
background-repeat: no-repeat;
text-decoration: none;
}
.storefront-cats .shop-cat-card::before {
content: "";
display: block;
aspect-ratio: var(--shop-pc-image-ratio);
background: inherit;
background-color: var(--shop-bg-alt);
background-size: cover !important;
background-position: center !important;
background-repeat: no-repeat;
}
.storefront-cats .shop-cat-card__icon { display: none; }
.storefront-cats .shop-cat-card__name {
display: block;
padding: var(--shop-s-4) var(--shop-s-2) 0;
text-align: center;
font-family: var(--shop-font-body);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
color: var(--shop-text);
transition: background-color var(--shop-duration-fast) var(--shop-ease-out),
color var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-cats .shop-cat-card:hover .shop-cat-card__name {
text-decoration: underline;
text-underline-offset: 0.35em;
text-decoration-thickness: 1px;
}
/* ==========================================================================
FEATURED (home) — one symmetric row (scroll-snap carousel when more than
fit). Cards are deliberately NOT catalog-like: bg-alt panel, centred text,
no add-to-cart/qty chrome; the image keeps var(--shop-pc-image-ratio).
========================================================================== */
.storefront-featured .shop-featured,
.storefront-featured .shop-featured.shop-featured--centered {
display: flex;
gap: var(--shop-s-5);
overflow-x: auto;
scroll-snap-type: x mandatory;
scrollbar-width: none;
padding-bottom: var(--shop-s-2);
}
.storefront-featured .shop-featured::-webkit-scrollbar { display: none; }
.storefront-featured .shop-featured > .shop-card {
flex: 0 0 78%;
scroll-snap-align: start;
display: flex;
flex-direction: column;
background: var(--shop-bg-alt);
padding: var(--shop-s-5);
text-align: center;
}
@media (min-width: 640px) {
.storefront-featured .shop-featured > .shop-card { flex-basis: calc((100% - var(--shop-s-5)) / 2); }
}
@media (min-width: 1024px) {
.storefront-featured .shop-featured > .shop-card { flex-basis: calc((100% - 3 * var(--shop-s-5)) / 4); }
}
/* image tile keeps the theme ratio, sits on white inside the panel —
without the module's accent border (the bg-alt panel is frame enough) */
.storefront-featured .shop-card__img-wrap,
.storefront-featured .shop-card--featured .shop-card__img-wrap {
background: var(--shop-bg);
border: 0;
}
/* centred meta, display-font name, roomier price */
.storefront-featured .shop-card__title,
.storefront-featured .shop-card__name {
font-family: var(--shop-font-display);
font-size: var(--shop-text-base);
text-align: center;
}
.storefront-featured .shop-card__price { text-align: center; justify-content: center; }
/* hide catalog chrome — the whole card reads as a curated highlight
(the ХІТ badge stays: it labels the curated row) */
.storefront-featured .shop-card__btn,
.storefront-featured .shop-card .shop-qty { display: none; }
/* slider arrows — thin hairline squares at the row's sides (desktop only) */
.storefront-featured .storefront-section__inner { position: relative; }
.storefront-featured__arrow {
position: absolute;
top: 50%;
z-index: 2;
display: none;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--shop-border-strong);
background: var(--shop-bg);
color: var(--shop-text);
cursor: pointer;
transition: background-color var(--shop-duration-fast) var(--shop-ease-out),
color var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-featured__arrow:hover { background: var(--shop-accent); color: var(--shop-text-on-accent); border-color: var(--shop-accent); }
.storefront-featured__arrow--prev { left: calc(-1 * var(--shop-s-3)); }
.storefront-featured__arrow--next { right: calc(-1 * var(--shop-s-3)); }
.storefront-featured__arrow[disabled] { opacity: 0.3; cursor: default; }
.storefront-featured__arrow[disabled]:hover { background: var(--shop-bg); color: var(--shop-text); border-color: var(--shop-border-strong); }
@media (min-width: 1024px) {
.storefront-featured.has-overflow .storefront-featured__arrow { display: inline-flex; }
}
/* ==========================================================================
SALE (home «Акції») — uniform catalog-style grid (deliberately NOT the
featured carousel): sale badges stay visible, corner cart present.
========================================================================== */
.storefront-sale { background: var(--shop-bg); border-top: 1px solid var(--shop-border); }
.storefront-sale .shop-sale-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--shop-s-5);
}
@media (min-width: 900px) {
.storefront-sale .shop-sale-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
.storefront-sale .shop-sale-grid { gap: var(--shop-s-6); }
/* 7–12 sale items → denser 4-up rows (renderer adds the modifier) */
.storefront-sale .shop-sale-grid--cols-4 { grid-template-columns: repeat(4, 1fr); }
}
/* ==========================================================================
SPLIT BAND (home «Про магазин») — asymmetric 7/12 image | 5/12 text,
text vertically centred, uppercase caption under the image
========================================================================== */
.storefront-split { border-top: 1px solid var(--shop-border); }
.storefront-split__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-10);
align-items: center;
}
@media (min-width: 900px) {
.storefront-split__inner { grid-template-columns: 1fr 1fr; gap: var(--shop-s-16); align-items: center; }
.storefront-split__text { align-self: center; }
}
.storefront-split__media {
aspect-ratio: 1 / 1;
background: var(--shop-bg-alt);
overflow: hidden;
}
/* wider 7/12 column → landscape crop instead of the mobile portrait */
/* checklist — accent check squares */
.storefront-split__checks {
list-style: none;
margin: var(--shop-s-6) 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--shop-s-3);
}
.storefront-split__check {
display: flex;
align-items: center;
gap: var(--shop-s-3);
font-size: var(--shop-text-sm);
}
.storefront-split__check::before {
content: "";
flex: 0 0 auto;
width: var(--shop-s-5);
height: var(--shop-s-5);
background-color: var(--shop-accent);
-webkit-mask: url('data:image/svg+xml,') center / contain no-repeat;
mask: url('data:image/svg+xml,') center / contain no-repeat;
}
.storefront-split__caption {
text-align: center;
display: block;
margin-top: var(--shop-s-3);
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.storefront-split__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform calc(var(--shop-duration-slower) * 1.6) var(--shop-ease-in-out);
}
.storefront-split__media:hover .storefront-split__img { transform: scale(1.05); }
.storefront-split__img[src=""],
.storefront-split__img:not([src]) { display: none; }
.storefront-split__body {
margin: var(--shop-s-5) 0 var(--shop-s-8);
max-width: 48ch;
color: var(--shop-text-muted);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
.storefront-split__body p { margin: 0 0 var(--shop-s-4); }
.storefront-split__body p:last-child { margin-bottom: 0; }
/* ==========================================================================
NUMBERS BAND (home) — bg-alt, 3 columns separated by hairline rules:
huge display figure + small muted uppercase label
========================================================================== */
.storefront-numbers {
background: linear-gradient(to bottom,
var(--shop-bg) 0%,
var(--shop-bg-alt) 22%,
var(--shop-bg-alt) 78%,
var(--shop-bg) 100%);
}
.storefront-numbers__inner {
display: grid;
grid-template-columns: 1fr;
padding-top: var(--shop-s-20);
padding-bottom: var(--shop-s-20);
}
@media (min-width: 768px) {
.storefront-numbers__inner { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1024px) {
.storefront-numbers__inner { grid-template-columns: repeat(4, 1fr); }
}
.storefront-numbers__cell {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--shop-s-4);
padding: var(--shop-s-6) var(--shop-s-8);
}
@media (min-width: 1024px) {
.storefront-numbers__cell { border-bottom: 0; }
}
.storefront-numbers__value {
font-family: var(--shop-font-display);
font-size: clamp(3rem, 5.5vw, 4.75rem);
font-weight: var(--shop-weight-semi);
line-height: 1;
letter-spacing: -0.02em;
color: var(--shop-text);
}
/* short accent tick between the figure and its label */
.storefront-numbers__cell::after {
content: "";
order: 2;
width: var(--shop-s-8);
height: 2px;
background: var(--shop-accent);
}
.storefront-numbers__value { order: 1; }
.storefront-numbers__label {
order: 3;
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ==========================================================================
CTA BAND — full-bleed ink; the single centred exception
========================================================================== */
.storefront-cta-band {
position: relative;
isolation: isolate;
background: var(--shop-text);
color: var(--shop-text-inverse);
overflow: hidden;
}
/* editable background banner behind an ink scrim (text always readable);
blurred so busy covers never compete with the CTA copy — slight scale-up
keeps the blurred edge from revealing the band background */
.storefront-cta-band__bg {
position: absolute;
inset: 0;
z-index: -2;
width: 100%;
height: 100%;
object-fit: cover;
filter: blur(14px);
transform: scale(1.06);
}
.storefront-cta-band__bg[src=""] { display: none; }
.storefront-cta-band::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: var(--shop-hero-scrim);
}
.storefront-cta-band__inner {
padding-top: var(--shop-s-10);
padding-bottom: var(--shop-s-10);
}
/* inset hairline frame — the band reads as a deliberate closing plate */
.storefront-cta-band__frame {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--shop-s-8);
padding: var(--shop-s-20) var(--shop-s-8);
border: 1px solid var(--shop-text-inverse);
text-align: center;
}
.storefront-cta-band__eyebrow {
color: var(--shop-text-inverse);
opacity: 0.6;
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.2em;
text-transform: uppercase;
}
.storefront-cta-band__title {
margin: 0;
max-width: 18ch;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-semi);
font-size: clamp(2.25rem, 5vw, 3.75rem);
line-height: var(--shop-lh-tight);
letter-spacing: -0.01em;
}
.storefront-cta-band .storefront-btn--solid-inverse {
background: var(--shop-text-inverse);
color: var(--shop-text);
border-color: var(--shop-text-inverse);
}
.storefront-cta-band .storefront-btn--solid-inverse:hover {
background: transparent;
color: var(--shop-text-inverse);
}
.storefront-cta-band__note {
margin: 0;
color: var(--shop-text-inverse);
opacity: 0.55;
font-size: var(--shop-text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* ==========================================================================
PAGE HEAD (about / contacts) — big display H1 under a hairline
========================================================================== */
.storefront-pagehead { border-bottom: 1px solid var(--shop-border); }
.storefront-pagehead__inner {
padding-top: var(--shop-s-20);
padding-bottom: var(--shop-s-16);
}
.storefront-pagehead__title {
margin: 0;
max-width: 20ch;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: clamp(2.25rem, 5vw, 3.75rem);
line-height: var(--shop-lh-tight);
letter-spacing: var(--shop-tracking-tight);
}
.storefront-pagehead__lead {
margin-top: var(--shop-s-5);
max-width: 56ch;
color: var(--shop-text-muted);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
.storefront-pagehead__lead p { margin: 0 0 var(--shop-s-3); }
.storefront-pagehead__lead p:last-child { margin-bottom: 0; }
/* centred hero variant (about) */
.storefront-pagehead--center .storefront-pagehead__inner { text-align: center; }
.storefront-pagehead--center .storefront-pagehead__title,
.storefront-pagehead--center .storefront-pagehead__lead {
margin-left: auto;
margin-right: auto;
}
/* ==========================================================================
ABOUT — magazine story: photo|text chapters, pull-quote, outro link
========================================================================== */
/* chapters sit closer than regular sections — the flow arrows carry the
rhythm between them, so the default s-20 stack would read as a hole */
.storefront-chapter .storefront-section__inner {
padding-top: var(--shop-s-12);
padding-bottom: var(--shop-s-12);
}
/* hand-drawn flow arrow between blocks — centred, small, no full-width rule */
.storefront-flow {
display: flex;
justify-content: center;
padding: var(--shop-s-2) 0;
color: var(--shop-text-muted);
}
.storefront-flow__arrow { width: var(--shop-s-16); height: auto; }
.storefront-flow--flip .storefront-flow__arrow { transform: scaleX(-1); }
.storefront-chapter__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-8);
align-items: center;
}
@media (min-width: 900px) {
.storefront-chapter__inner {
grid-template-columns: 1fr 1fr;
gap: var(--shop-s-16);
}
/* alternate chapters mirror the layout: photo right, text left */
.storefront-chapter--reverse .storefront-chapter__media { order: 2; }
.storefront-chapter--reverse .storefront-chapter__body { order: 1; }
}
.storefront-chapter__media { margin: 0; }
.storefront-chapter__img {
display: block;
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
background: var(--shop-bg-alt);
}
/* no image yet → calm placeholder square instead of a collapsed strip */
.storefront-chapter__img[src=""],
.storefront-chapter__img:not([src]) { min-height: 320px; }
.storefront-chapter__num {
display: block;
margin-bottom: var(--shop-s-3);
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.18em;
}
.storefront-chapter__title {
margin: 0 0 var(--shop-s-5);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: clamp(1.5rem, 2.6vw, 2.25rem);
line-height: var(--shop-lh-tight);
letter-spacing: var(--shop-tracking-tight);
}
.storefront-chapter__text {
color: var(--shop-text);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
max-width: 52ch;
}
.storefront-chapter__text p { margin: 0 0 var(--shop-s-4); }
.storefront-chapter__text p:last-child { margin-bottom: 0; }
/* pull-quote — centred display line (no full-width rules on this page) ---- */
.storefront-quote__inner {
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-16);
text-align: center;
}
.storefront-quote__text {
margin: 0 auto;
max-width: 26ch;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: clamp(1.5rem, 3.4vw, 2.5rem);
line-height: var(--shop-lh-snug);
letter-spacing: var(--shop-tracking-tight);
quotes: "«" "»";
}
.storefront-quote__text::before { content: open-quote; }
.storefront-quote__text::after { content: close-quote; }
.storefront-quote__author {
display: block;
margin-top: var(--shop-s-5);
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
/* outro — centred farewell paragraph + arrow link (no ink band) ----------- */
.storefront-outro__inner { text-align: center; }
.storefront-outro__text {
margin: 0 auto;
max-width: 48ch;
color: var(--shop-text);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
.storefront-outro__text p { margin: 0; }
body.storefront a.storefront-outro__link {
display: inline-flex;
align-items: center;
gap: var(--shop-s-2);
margin-top: var(--shop-s-6);
color: var(--shop-text);
font-size: var(--shop-text-sm);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.35em;
}
body.storefront a.storefront-outro__link:hover { color: var(--shop-accent); }
body.storefront a.storefront-outro__link svg { transition: transform var(--shop-duration-base) var(--shop-ease-out); }
body.storefront a.storefront-outro__link:hover svg { transform: translateX(4px); }
/* ==========================================================================
CONTACTS — hero with a right-hand contact list, note, info tabs
========================================================================== */
/* ONE shared band for the whole page, set on the section inners themselves
(never on inner text elements): every block's content box = 60rem. The
container paddings live on these same divs, so they're added on top. */
.storefront-contactshero__inner,
.storefront-contactsnote .storefront-section__inner,
.storefront-tabs .storefront-section__inner {
max-width: calc(60rem + 2 * var(--shop-container-px));
}
.storefront-contactshero__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-10);
align-items: start;
}
@media (min-width: 900px) {
.storefront-contactshero__inner { grid-template-columns: 1.2fr 1fr; gap: var(--shop-s-16); }
}
.storefront-contactshero__list {
display: flex;
flex-direction: column;
}
.storefront-contactshero__row {
display: flex;
align-items: center;
gap: var(--shop-s-4);
padding: var(--shop-s-3) 0;
text-decoration: none;
}
/* desktop 2-col hero: the list mirrors the intro — pinned to the right edge;
on phones (single column) it stays a plain left list under the title */
@media (min-width: 900px) {
.storefront-contactshero__list { align-items: flex-end; text-align: right; }
.storefront-contactshero__row { justify-content: flex-end; }
}
.storefront-contactshero__value {
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: var(--shop-text-xl);
line-height: var(--shop-lh-snug);
transition: color var(--shop-duration-fast) var(--shop-ease-out);
}
body.storefront a.storefront-contactshero__row { color: var(--shop-text); }
body.storefront a.storefront-contactshero__row:hover { text-decoration: none; }
a.storefront-contactshero__row:hover .storefront-contactshero__value {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
.storefront-contactshero__row--social { align-items: center; }
.storefront-contactshero__social {
display: flex;
gap: var(--shop-s-3);
}
body.storefront a.storefront-contactshero__social-link {
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: var(--shop-s-10);
height: var(--shop-s-10);
border: 1px solid var(--shop-border);
border-radius: var(--shop-radius-full);
color: var(--shop-text);
font-size: var(--shop-text-base);
transition: background var(--shop-duration-base) var(--shop-ease-out),
color var(--shop-duration-base) var(--shop-ease-out),
border-color var(--shop-duration-base) var(--shop-ease-out);
}
body.storefront a.storefront-contactshero__social-link:hover {
background: var(--shop-accent);
border-color: var(--shop-accent);
color: var(--shop-text-on-accent);
text-decoration: none;
}
/* note band — «how we work» (online-only / pickup points etc.) */
.storefront-contactsnote .storefront-section__inner {
padding-top: var(--shop-s-12);
padding-bottom: var(--shop-s-6);
}
/* the note and tab columns are narrower than the container — centre them */
.storefront-contactsnote__inner { text-align: center; }
.storefront-contactsnote__title {
margin: 0 0 var(--shop-s-4);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: var(--shop-text-2xl);
letter-spacing: var(--shop-tracking-tight);
}
.storefront-contactsnote__text {
color: var(--shop-text);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
.storefront-contactsnote__text p { margin: 0 0 var(--shop-s-3); }
.storefront-contactsnote__text p:last-child { margin-bottom: 0; }
/* info tabs — «Як замовити / Доставка й оплата / Повернення» */
.storefront-tabs .storefront-section__inner {
padding-top: var(--shop-s-10);
padding-bottom: var(--shop-s-20);
}
.storefront-tabs__nav {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--shop-s-6);
}
.storefront-tabs__btn {
appearance: none;
background: none;
border: 0;
margin: 0;
padding: 0 0 var(--shop-s-4);
cursor: pointer;
color: var(--shop-text-muted);
font-family: inherit;
font-size: var(--shop-text-sm);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.12em;
text-transform: uppercase;
/* active indicator sits on the hairline */
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--shop-duration-fast) var(--shop-ease-out),
border-color var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-tabs__btn:hover { color: var(--shop-text); }
.storefront-tabs__btn.is-active {
color: var(--shop-text);
border-bottom-color: var(--shop-accent);
}
.storefront-tabs__panel {
display: none;
padding-top: var(--shop-s-8);
/* anchor targets (#delivery / #returns from the footer) clear the header */
scroll-margin-top: calc(var(--shop-header-h-md) + var(--shop-s-8));
}
.storefront-tabs__panel.is-active { display: block; }
.storefront-tabs__text {
color: var(--shop-text);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
.storefront-tabs__text p { margin: 0 0 var(--shop-s-4); }
.storefront-tabs__text p:last-child { margin-bottom: 0; }
/* ==========================================================================
STATIC / LEGAL PAGES (legal.html layout prose)
========================================================================== */
.storefront-page__inner {
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-20);
max-width: 96ch;
}
.storefront-page__eyebrow {
display: block;
margin-bottom: var(--shop-s-3);
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.storefront-page__title {
margin: 0 0 var(--shop-s-6);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: clamp(2rem, 4vw, 2.75rem);
line-height: var(--shop-lh-tight);
letter-spacing: var(--shop-tracking-tight);
}
.storefront-page__body {
color: var(--shop-text-muted);
font-size: var(--shop-text-base);
line-height: var(--shop-lh-relaxed);
}
.storefront-page__body p { margin: 0 0 var(--shop-s-4); }
/* long-form prose (legal pages: offer / privacy) ------------------------- */
.storefront-page__prose h2 {
margin: var(--shop-s-10) 0 var(--shop-s-3);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: var(--shop-text-2xl);
line-height: var(--shop-lh-tight);
color: var(--shop-text);
}
.storefront-page__prose h2:first-child { margin-top: 0; }
.storefront-page__prose h3 {
margin: var(--shop-s-6) 0 var(--shop-s-2);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: var(--shop-text-xl);
color: var(--shop-text);
}
.storefront-page__prose ul {
margin: 0 0 var(--shop-s-4);
padding-left: var(--shop-s-6);
}
.storefront-page__prose li { margin-bottom: var(--shop-s-2); }
.storefront-page__prose strong { color: var(--shop-text); font-weight: var(--shop-weight-semi); }
.storefront-page__prose a {
color: var(--shop-text);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.25em;
}
.storefront-page__prose a:hover { color: var(--shop-text-muted); }
/* ==========================================================================
FOOTER — white, hairline top, 4 cols (brand / shop / info / contacts)
========================================================================== */
.storefront-footer {
background: var(--shop-bg);
border-top: 1px solid var(--shop-border);
}
.storefront-footer__inner {
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-10);
}
.storefront-footer__cols {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-10);
}
.storefront-footer__col {
display: flex;
flex-direction: column;
gap: var(--shop-s-3);
}
body.storefront .storefront-footer__logo { display: block; align-self: flex-start; height: var(--shop-s-16); width: auto; max-width: none; object-fit: contain; object-position: left; margin-bottom: var(--shop-s-3); }
body.storefront .storefront-footer__logo[src=""] { display: none; }
.storefront-footer__col--brand:has(.storefront-footer__logo:not([src=""])) .storefront-footer__brand { display: none; }
.storefront-footer__brand {
font-family: var(--shop-font-display);
font-size: var(--shop-text-lg);
font-weight: var(--shop-weight-semi);
letter-spacing: 0.2em;
text-transform: uppercase;
color: var(--shop-text);
}
.storefront-footer__tagline {
margin: 0;
max-width: 34ch;
color: var(--shop-text-muted);
font-size: var(--shop-text-sm);
line-height: var(--shop-lh-relaxed);
}
.storefront-footer__social {
display: flex;
gap: var(--shop-s-2);
margin-top: var(--shop-s-2);
}
.storefront-footer__social-item { display: inline-flex; }
.storefront-footer__social-link i { font-size: var(--shop-text-base); line-height: 1; }
.storefront-footer__social-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--shop-text);
text-decoration: none;
transition: opacity var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-footer__social-link:hover { opacity: 0.6; }
.storefront-footer__social-icon { width: 20px; height: 20px; }
.storefront-footer__heading {
margin: 0 0 var(--shop-s-2);
color: var(--shop-text-muted);
font-family: var(--shop-font-body);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.storefront-footer__links {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--shop-s-2);
}
.storefront-footer__links a {
text-decoration: none;
font-size: var(--shop-text-sm);
}
.storefront-footer__phone {
text-decoration: none;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-medium);
font-size: var(--shop-text-lg);
}
.storefront-footer__email { text-decoration: none; font-size: var(--shop-text-sm); }
.storefront-footer__bottom {
display: flex;
flex-wrap: wrap;
align-items: baseline;
justify-content: space-between;
gap: var(--shop-s-3);
margin-top: var(--shop-s-12);
padding-top: var(--shop-s-6);
}
.storefront-footer__copyright {
margin: 0;
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
letter-spacing: var(--shop-tracking-wide);
}
.storefront-footer__made-by {
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
letter-spacing: var(--shop-tracking-wide);
text-decoration: none;
}
body.storefront a.storefront-footer__made-by { color: var(--shop-text-muted); }
body.storefront a.storefront-footer__made-by:hover { color: var(--shop-text); }
/* the agency name reads as the link's visual anchor */
.storefront-footer__made-by-brand {
color: var(--shop-text);
font-weight: var(--shop-weight-medium);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
body.storefront a.storefront-footer__made-by:hover .storefront-footer__made-by-brand {
color: var(--shop-accent);
}
/* footer link colours must out-rank body.storefront a:not(.storefront-btn) (0,2,2) */
body.storefront a.storefront-footer__email { color: var(--shop-text-muted); }
body.storefront .storefront-footer a:hover {
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.3em;
}
@media (min-width: 768px) {
.storefront-footer__cols {
grid-template-columns: 1.6fr 1fr 1.4fr 1fr;
gap: var(--shop-s-10);
}
}
/* reduced motion ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
body.storefront *, body.storefront *::before, body.storefront *::after {
transition-duration: 0.01ms !important;
animation-duration: 0.01ms !important;
}
}
/* ==========================================================================
██ P2 SOBO SKIN — playful brand chrome for the shop-template build.
Header + footer (all pages) and the home-page blocks. Colours come ONLY
from the --sf2-* Layer A′ palette in shop-tokens.css; type = Unbounded.
Catalog / PDP / cart / checkout markup + skin stay untouched (P2 contract).
========================================================================== */
body.storefront {
--sf2-display: var(--shop-font-display);
}
/* --- header: nav left / badge logo centre / actions right ---------------- */
body.storefront .storefront-header {
background: var(--sf2-cream);
border-bottom: 0;
}
/* Soften the cream-header → page seam at the top of the page: a short fade
below the header instead of a hard colour step. The header is sticky, so once
the user scrolls (`.is-scrolled`) the fade is removed — otherwise it would
trail the header and tint the content scrolling underneath it. */
body.storefront .storefront-header::after {
content: "";
position: absolute;
top: 100%;
left: 0;
right: 0;
height: var(--shop-s-6);
background: linear-gradient(to bottom, var(--sf2-cream), transparent);
pointer-events: none;
opacity: 1;
transition: opacity var(--shop-duration-base) var(--shop-ease-out);
}
body.storefront .storefront-header.is-scrolled::after { opacity: 0; }
.storefront-header__inner { gap: var(--shop-s-4); }
/* CSS-only reorder: markup stays burger→logo→nav→actions */
@media (min-width: 1024px) {
.storefront-header__inner { display: flex; align-items: center; }
.storefront-header .storefront-nav { order: 1; flex: 1 1 0; justify-content: flex-start; }
.storefront-header .storefront-logo { order: 2; flex: 0 0 auto; }
.storefront-header .storefront-actions { order: 3; flex: 1 1 0; justify-content: flex-end; }
}
body.storefront .storefront-logo__img { height: var(--shop-s-16); }
@media (min-width: 1024px) {
body.storefront .storefront-logo__img { height: calc(var(--shop-s-12) * 2); }
}
/* chunky uppercase nav links */
body.storefront .storefront-nav a,
body.storefront .storefront-nav__account {
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--sf2-ink);
}
body.storefront .storefront-nav a:hover { color: var(--sf2-red); text-decoration: none; }
body.storefront .storefront-actions a { color: var(--sf2-ink); }
body.storefront .storefront-actions a:hover { color: var(--sf2-red); }
/* --- footer: deep green, big brand, chunky columns, newsletter ------------ */
body.storefront .storefront-footer {
background: var(--sf2-green-deep);
color: var(--sf2-cream);
border-top: 0;
}
.storefront-footer .storefront-footer__logo { height: calc(var(--shop-s-12) * 2); }
.storefront-footer__brand { display: none; }
body.storefront .storefront-footer__tagline { color: var(--sf2-cream); opacity: 0.85; }
body.storefront .storefront-footer__heading {
font-family: var(--sf2-display);
font-weight: 700;
color: var(--sf2-yellow);
letter-spacing: 0.08em;
}
body.storefront .storefront-footer a,
body.storefront .storefront-footer a.storefront-footer__email,
body.storefront a.storefront-footer__made-by { color: var(--sf2-cream); }
body.storefront .storefront-footer a:hover { color: var(--sf2-yellow); }
body.storefront .storefront-footer__phone { color: var(--sf2-cream); }
body.storefront .storefront-footer__copyright { color: var(--sf2-cream); opacity: 0.7; }
.storefront-footer .storefront-footer__social-link { border-color: var(--sf2-cream); }
body.storefront .storefront-footer .storefront-footer__social-link { color: var(--sf2-cream); }
body.storefront .storefront-footer .storefront-footer__social-link:hover {
background: var(--sf2-yellow);
border-color: var(--sf2-yellow);
color: var(--sf2-green-deep);
}
body.storefront .storefront-footer__made-by-brand { color: var(--sf2-yellow); }
body.storefront a.storefront-footer__made-by:hover .storefront-footer-made-by-brand { color: var(--sf2-cream); }
.storefront-footer__bottom { border-top: 1px solid var(--sf2-green-darker); padding-top: var(--shop-s-5); }
/* --- P2 shared: pill buttons + display title ------------------------------ */
.sf2-btn {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--shop-s-4) var(--shop-s-8);
border-radius: var(--shop-radius-full, 999px);
border-radius: 999px;
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-sm);
letter-spacing: 0.05em;
text-transform: uppercase;
text-decoration: none;
transition: transform var(--shop-duration-base) var(--shop-ease-out),
background var(--shop-duration-base) var(--shop-ease-out);
}
.sf2-btn:hover { transform: translateY(-2px); text-decoration: none; }
body.storefront a.sf2-btn--red { background: var(--shop-accent); color: var(--shop-text-on-accent); }
body.storefront a.sf2-btn--red:hover { background: var(--shop-accent-hover); color: var(--shop-text-on-accent); }
body.storefront a.sf2-btn--green { background: var(--sf2-green-deep); color: var(--sf2-cream); }
body.storefront a.sf2-btn--green:hover { background: var(--sf2-green-darker); color: var(--sf2-cream); }
body.storefront a.sf2-btn--yellow { background: var(--sf2-yellow); color: var(--sf2-ink); }
body.storefront a.sf2-btn--yellow:hover { background: var(--sf2-yellow-soft); color: var(--sf2-ink); }
.sf2-title { font-family: var(--sf2-display); font-weight: 900; }
/* --- 1. HERO: full-bleed photo + yellow statement band -------------------- */
.sf2-hero__photo-wrap { background: var(--sf2-cream-deep); }
.sf2-hero__photo {
display: block;
width: 100%;
height: 56vh;
min-height: 320px;
object-fit: cover;
object-position: center;
}
.sf2-hero__photo[src=""], .sf2-hero__photo:not([src]) { display: none; }
.sf2-hero__band { background: var(--sf2-yellow); }
.sf2-hero__band-inner {
padding-top: var(--shop-s-12);
padding-bottom: var(--shop-s-12);
text-align: center;
}
.sf2-hero__title {
margin: 0 auto;
max-width: 18ch;
font-family: var(--sf2-display);
font-weight: 900;
font-size: clamp(1.9rem, 4.6vw, 4rem);
line-height: 1.08;
letter-spacing: 0.01em;
text-transform: uppercase;
color: var(--sf2-ink);
}
.sf2-hero__ctas {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--shop-s-6);
margin-top: var(--shop-s-7);
}
body.storefront a.sf2-hero__minor {
color: var(--sf2-ink);
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-xs);
letter-spacing: 0.06em;
text-transform: uppercase;
text-decoration: underline;
text-underline-offset: 0.35em;
text-decoration-thickness: 2px;
}
body.storefront a.sf2-hero__minor:hover { color: var(--sf2-red); }
/* --- 2. MARQUEE: red ribbon, seamless loop (group cloned in JS) ----------- */
.sf2-marquee {
overflow: hidden;
background: var(--shop-accent);
padding: var(--shop-s-3) 0;
}
.sf2-marquee__track { display: flex; width: max-content; }
.sf2-marquee.is-init .sf2-marquee__track {
animation: sf2-marquee-scroll 28s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.sf2-marquee.is-init .sf2-marquee__track { animation: none; }
}
.sf2-marquee__group { display: flex; flex-shrink: 0; }
.sf2-marquee__item {
display: inline-flex;
align-items: center;
white-space: nowrap;
color: var(--sf2-cream);
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-sm);
letter-spacing: 0.1em;
text-transform: uppercase;
}
.sf2-marquee__item::after {
content: "~";
margin: 0 var(--shop-s-5);
color: var(--sf2-yellow);
}
@keyframes sf2-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
/* --- 3. SKU carousel: playful colour panels ------------------------------- */
.sf2-skus { background: var(--sf2-cream); }
.sf2-skus .storefront-section__inner:first-child { padding-bottom: 0; }
.sf2-skus .storefront-section__title { font-family: var(--sf2-display); font-weight: 900; text-transform: uppercase; color: var(--sf2-green-deep); }
.sf2-skus .storefront-section__eyebrow { color: var(--sf2-red); }
/* panel cycle: yellow / leaf / cream-deep / red-tint */
.sf2-skus .shop-featured > .shop-card { border-radius: var(--shop-radius-lg); border: 0; }
.sf2-skus .shop-featured > .shop-card:nth-child(4n+1) { background: color-mix(in srgb, var(--sf2-yellow) 38%, var(--sf2-white)); }
.sf2-skus .shop-featured > .shop-card:nth-child(4n+2) { background: color-mix(in srgb, var(--sf2-green-leaf) 26%, var(--sf2-white)); }
.sf2-skus .shop-featured > .shop-card:nth-child(4n+3) { background: color-mix(in srgb, var(--sf2-red) 16%, var(--sf2-white)); }
.sf2-skus .shop-featured > .shop-card:nth-child(4n+4) { background: var(--sf2-cream-deep); }
.sf2-skus .shop-card__img-wrap { border-radius: var(--shop-radius-md); overflow: hidden; }
.sf2-skus .shop-card__title,
.sf2-skus .shop-card__name { font-family: var(--sf2-display); font-weight: 700; font-size: var(--shop-text-sm); text-transform: uppercase; }
.sf2-skus .shop-card__name a { color: var(--sf2-ink); }
.sf2-skus .shop-card__price { color: var(--sf2-green-deep); font-weight: var(--shop-weight-bold); }
.sf2-skus .storefront-featured__arrow {
border-radius: 999px;
border: 2px solid var(--sf2-ink);
background: var(--sf2-cream);
color: var(--sf2-ink);
}
.sf2-skus .storefront-featured__arrow:hover { background: var(--sf2-yellow); border-color: var(--sf2-ink); color: var(--sf2-ink); }
/* P1 offsets pushed the arrows past the viewport at container-wide screens */
.sf2-skus .storefront-featured__arrow--prev { left: var(--shop-s-2); }
.sf2-skus .storefront-featured__arrow--next { right: var(--shop-s-2); }
.sf2-skus__cta { margin-top: var(--shop-s-8); text-align: center; }
/* waves of the next/previous band overlay these sections — keep content clear */
.sf2-skus .storefront-section__inner:last-child { padding-bottom: calc(clamp(36px, 5vw, 72px) + var(--shop-s-12)); }
/* --- 4. FOUNDER: yellow scalloped band, circle photo ---------------------- */
.sf2-founder { background: var(--sf2-yellow); position: relative; margin-top: var(--shop-s-8); }
.sf2-founder::before,
.sf2-founder::after {
content: "";
position: absolute;
left: 0; right: 0;
--sf2-wave-h: clamp(36px, 5vw, 72px);
height: var(--sf2-wave-h);
background-repeat: repeat-x;
background-size: 20% 100%;
}
.sf2-founder::before {
top: calc(1px - var(--sf2-wave-h));
background-image: radial-gradient(ellipse 62% 100% at 50% 100%, var(--sf2-yellow) 99%, transparent 100%);
}
.sf2-founder::after {
bottom: calc(1px - var(--sf2-wave-h));
background-image: radial-gradient(ellipse 62% 100% at 50% 0%, var(--sf2-yellow) 99%, transparent 100%);
}
.sf2-founder__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-8);
align-items: center;
padding-top: var(--shop-s-14, 56px);
padding-top: var(--shop-s-12);
padding-bottom: var(--shop-s-12);
}
@media (min-width: 900px) {
.sf2-founder__inner { grid-template-columns: auto 1fr; gap: var(--shop-s-16); }
}
.sf2-founder__media { margin: 0; text-align: center; }
.sf2-founder__photo {
width: 280px;
height: 280px;
border-radius: 999px;
object-fit: cover;
border: 6px solid var(--sf2-white);
background: var(--sf2-cream);
}
.sf2-founder__eyebrow {
display: block;
margin-bottom: var(--shop-s-2);
color: var(--sf2-green-deep);
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-xs);
letter-spacing: 0.14em;
text-transform: uppercase;
}
.sf2-founder__title {
margin: 0 0 var(--shop-s-2);
font-family: var(--sf2-display);
font-weight: 900;
font-size: clamp(1.75rem, 3.4vw, 2.75rem);
text-transform: uppercase;
color: var(--sf2-ink);
}
.sf2-founder__name {
display: block;
margin-bottom: var(--shop-s-4);
color: var(--sf2-red);
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-lg);
}
.sf2-founder__text { max-width: 56ch; color: var(--sf2-ink); font-size: var(--shop-text-lg); line-height: var(--shop-lh-relaxed); }
.sf2-founder__text p { margin: 0 0 var(--shop-s-3); }
.sf2-founder__text p:last-child { margin-bottom: 0; }
/* --- 5. COLLAGE: photos + sticker bubbles --------------------------------- */
.sf2-collage { background: var(--sf2-cream); }
.sf2-collage .storefront-section__inner { padding-top: calc(clamp(36px, 5vw, 72px) + var(--shop-s-12)); padding-bottom: calc(clamp(36px, 5vw, 72px) + var(--shop-s-12)); }
.sf2-collage__title {
margin: 0 auto var(--shop-s-12);
max-width: 22ch;
text-align: center;
font-family: var(--sf2-display);
font-weight: 900;
font-size: clamp(1.75rem, 3.8vw, 3rem);
line-height: 1.12;
text-transform: uppercase;
color: var(--sf2-green-deep);
}
.sf2-collage__grid {
position: relative;
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--shop-s-6);
align-items: start;
}
.sf2-collage__cell { margin: 0; border-radius: var(--shop-radius-lg); overflow: hidden; }
.sf2-collage__cell--a { grid-column: 1; }
.sf2-collage__cell--b { grid-column: 2; margin-top: var(--shop-s-16); }
.sf2-collage__cell--c { grid-column: 1 / -1; max-width: 60%; margin-left: auto; margin-right: auto; }
@media (max-width: 640px) {
.sf2-collage__grid { grid-template-columns: 1fr; }
.sf2-collage__cell--a, .sf2-collage__cell--b { grid-column: 1; margin-top: 0; }
.sf2-collage__cell--c { max-width: 100%; }
}
.sf2-collage__img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.sf2-bubble {
position: absolute;
z-index: 1;
display: inline-block;
padding: var(--shop-s-3) var(--shop-s-5);
border-radius: 999px;
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-xs);
letter-spacing: 0.05em;
text-transform: uppercase;
box-shadow: var(--shop-shadow-md);
}
.sf2-bubble--a { top: 6%; left: 44%; background: var(--sf2-yellow); color: var(--sf2-ink); transform: rotate(4deg); }
.sf2-bubble--b { top: 46%; left: 12%; background: var(--sf2-green-leaf); color: var(--sf2-white); transform: rotate(-5deg); }
.sf2-bubble--c { bottom: 10%; right: 8%; background: var(--sf2-red); color: var(--sf2-white); transform: rotate(3deg); }
@media (max-width: 640px) {
.sf2-bubble { position: static; transform: none; margin: var(--shop-s-2) 0; justify-self: center; }
}
/* --- 6. MISSION: deep green scalloped band -------------------------------- */
.sf2-mission { position: relative; background: var(--sf2-green-deep); margin: var(--shop-s-8) 0; }
.sf2-mission::before,
.sf2-mission::after {
content: "";
position: absolute;
left: 0; right: 0;
--sf2-wave-h: clamp(36px, 5vw, 72px);
height: var(--sf2-wave-h);
background-repeat: repeat-x;
background-size: 20% 100%;
}
.sf2-mission::before {
top: calc(1px - var(--sf2-wave-h));
background-image: radial-gradient(ellipse 62% 100% at 50% 100%, var(--sf2-green-deep) 99%, transparent 100%);
}
.sf2-mission::after {
bottom: calc(1px - var(--sf2-wave-h));
background-image: radial-gradient(ellipse 62% 100% at 50% 0%, var(--sf2-green-deep) 99%, transparent 100%);
}
.sf2-mission__inner {
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-16);
text-align: center;
}
.sf2-mission__title {
margin: 0 auto var(--shop-s-5);
max-width: 26ch;
font-family: var(--sf2-display);
font-weight: 900;
font-size: clamp(1.6rem, 3.2vw, 2.5rem);
line-height: 1.15;
text-transform: uppercase;
color: var(--sf2-cream);
}
.sf2-mission__text { max-width: 52rem; margin: 0 auto var(--shop-s-7); color: var(--sf2-cream); opacity: 0.92; font-size: var(--shop-text-lg); line-height: var(--shop-lh-relaxed); }
.sf2-mission__text p { margin: 0; }
/* --- 7. UGC: handle + photo row ------------------------------------------- */
.sf2-ugc { background: var(--sf2-cream); }
.sf2-ugc .storefront-section__inner { padding-top: calc(clamp(36px, 5vw, 72px) + var(--shop-s-10)); padding-bottom: calc(clamp(36px, 5vw, 72px) + var(--shop-s-12)); text-align: center; }
.sf2-ugc__title {
margin: 0 auto var(--shop-s-3);
max-width: 26ch;
font-family: var(--sf2-display);
font-weight: 900;
font-size: clamp(1.4rem, 2.8vw, 2.1rem);
line-height: 1.15;
text-transform: uppercase;
color: var(--sf2-ink);
}
body.storefront a.sf2-ugc__handle {
display: inline-block;
margin-bottom: var(--shop-s-8);
color: var(--sf2-red);
font-family: var(--sf2-display);
font-weight: 700;
font-size: var(--shop-text-lg);
text-decoration: none;
}
body.storefront a.sf2-ugc__handle:hover { color: var(--sf2-red-deep); text-decoration: underline; text-underline-offset: 0.3em; }
.sf2-ugc__grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--shop-s-4);
}
@media (min-width: 768px) { .sf2-ugc__grid { grid-template-columns: repeat(4, 1fr); } }
.sf2-ugc__cell { margin: 0; border-radius: var(--shop-radius-lg); overflow: hidden; }
.sf2-ugc__cell:nth-child(even) { transform: rotate(1.2deg); }
.sf2-ugc__cell:nth-child(odd) { transform: rotate(-1.2deg); }
.sf2-ugc__img { display: block; width: 100%; aspect-ratio: 1 / 1; object-fit: cover; transition: transform var(--shop-duration-slower) var(--shop-ease-out); }
.sf2-ugc__cell:hover .sf2-ugc__img { transform: scale(1.05); }
/* --- P2 round 2: page-top gradient, header shrink, transitions ------------ */
/* Site-wide cream→white fade with a soft grain under the header. Page shells
go transparent at the top so the body gradient shows through. */
body.storefront {
background-color: var(--shop-bg);
background-image:
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3CfeComponentTransfer%3E%3CfeFuncA type='linear' slope='0.05'/%3E%3C/feComponentTransfer%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E"),
linear-gradient(to bottom, var(--sf2-cream) 0, var(--sf2-cream) var(--shop-s-16), var(--shop-bg) 480px);
background-repeat: repeat, no-repeat;
background-size: 140px 140px, 100% 560px;
}
body.storefront .shop-page,
body.storefront .shop-product,
body.storefront .shop-catalog { background: transparent; }
/* header: tall at rest, shrinks on scroll (storefront.js toggles .is-scrolled) */
body.storefront .storefront-header { transition: padding var(--shop-duration-base) var(--shop-ease-out); }
body.storefront .storefront-header .storefront-header__inner {
padding-top: var(--shop-s-6);
padding-bottom: var(--shop-s-6);
transition: padding var(--shop-duration-base) var(--shop-ease-out);
}
body.storefront .storefront-logo__img { transition: height var(--shop-duration-base) var(--shop-ease-out); }
body.storefront .storefront-header.is-scrolled .storefront-header__inner {
padding-top: var(--shop-s-2);
padding-bottom: var(--shop-s-2);
}
@media (min-width: 1024px) {
body.storefront .storefront-header.is-scrolled .storefront-logo__img { height: var(--shop-s-12); }
}
/* hero (home only): short cream fade blending the header into the photo —
no blur, low height so the band copy below is never dimmed */
.sf2-hero__photo-wrap { position: relative; }
.sf2-hero__photo-wrap::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: var(--shop-s-10);
z-index: 1;
background: linear-gradient(to bottom, var(--sf2-cream) 0%, transparent 100%);
pointer-events: none;
}
/* hero → yellow band: big Sobo clouds overlapping the photo bottom */
.sf2-hero__band { position: relative; }
.sf2-hero__band::before {
content: "";
position: absolute;
top: calc(1px - var(--sf2-cloud-h));
left: 0; right: 0;
height: var(--sf2-cloud-h);
--sf2-cloud-h: clamp(80px, 11vw, 160px);
/* asymmetric Sobo clouds: two tall centre domes (different heights) and
two smaller, half-cropped edge domes; bases overlap so the bottom edge
is continuous */
background-image:
radial-gradient(ellipse 24vw 58% at 0% 100%, var(--sf2-yellow) 99%, transparent 100%),
radial-gradient(ellipse 30vw 86% at 33% 100%, var(--sf2-yellow) 99%, transparent 100%),
radial-gradient(ellipse 32vw 100% at 70% 100%, var(--sf2-yellow) 99%, transparent 100%),
radial-gradient(ellipse 24vw 64% at 100% 100%, var(--sf2-yellow) 99%, transparent 100%);
background-repeat: no-repeat;
background-size: 100% 100%;
pointer-events: none;
}
/* more air above the hero CTAs */
.sf2-hero__ctas { margin-top: var(--shop-s-10); }
/* founder / mission: no white gaps — the scallops overlap the neighbours */
.sf2-founder { margin-top: 0; }
.sf2-mission { margin: 0; }
/* mission: deliberate asymmetry — title right, text left, button centred */
.sf2-mission__inner { text-align: center; }
.sf2-mission__title { text-align: right; max-width: 52rem; margin-left: auto; margin-right: auto; margin-bottom: var(--shop-s-8); }
.sf2-mission__text { text-align: left; margin: 0 auto var(--shop-s-10); }
/* UGC: pure white ground — packshots blend in, no tiles */
.sf2-ugc { background: var(--sf2-white); }
.sf2-ugc__cell,
.sf2-ugc__cell:nth-child(even),
.sf2-ugc__cell:nth-child(odd) { transform: none; border-radius: 0; overflow: visible; }
.sf2-ugc__cell:hover .sf2-ugc__img { transform: none; }
/* footer: scalloped top edge (green bumps over the white UGC ground) */
body.storefront .storefront-footer { position: relative; margin-top: var(--shop-s-8); }
body.storefront .storefront-footer::before {
content: "";
position: absolute;
--sf2-wave-h: clamp(36px, 5vw, 72px);
top: calc(1px - var(--sf2-wave-h));
left: 0; right: 0;
height: var(--sf2-wave-h);
background-image: radial-gradient(ellipse 62% 100% at 50% 100%, var(--sf2-green-deep) 99%, transparent 100%);
background-size: 20% 100%;
background-repeat: repeat-x;
pointer-events: none;
}
/* --- P2 round 5: spacing, radii, banner tone ------------------------------ */
/* 2: hero title rises into the solid part of the cloud strip */
.sf2-hero__band .sf2-hero__band-inner {
padding-top: 0;
}
/* 3: UGC title clears the mission wave with more air */
.sf2-ugc .storefront-section__inner { padding-top: calc(clamp(36px, 5vw, 72px) + var(--shop-s-16)); }
/* 4: founder content centred as one block (no ragged 1fr tail) */
@media (min-width: 900px) {
.sf2-founder__inner { grid-template-columns: auto minmax(0, 46rem); justify-content: center; }
}
/* 5: PDP chrome reads too square at 8px — round it up via theme tokens */
body.storefront .shop-product__main-img {
border: 1px solid var(--shop-border);
border-radius: var(--shop-card-radius);
overflow: hidden;
}
body.storefront .shop-product__main-img img { border-radius: 0; }
body.storefront .shop-btn-gradient { border-radius: var(--shop-radius-lg); }
body.storefront .shop-qty, body.storefront .cart-qty { border-radius: var(--shop-radius-md); }
/* 6: …but the stepper's INNER input must stay square (only outer corners round) */
body.storefront .shop-qty .shop-qty__input,
body.storefront .cart-qty .cart-qty-input { border-radius: 0; }
/* 7: more room above the footer waves */
body.storefront .storefront-footer { margin-top: var(--shop-s-20); }
/* 8: free-shipping hint — same neutral tone as the totals block (page + drawer) */
body.storefront .shop-cart-banner--show,
body.storefront .cart-banner.cart-banner--show { background: var(--shop-bg-alt); }