/* ==========================================================================
storefront.css — shop-base storefront chrome + layout
--------------------------------------------------------------------------
Reusable themeable storefront template. TOKEN-ONLY (Layer B/C, var(--shop-*)).
No hex literals; no raw px in padding/margin/gap (DESIGN.md §11 gates 1/3).
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-hero__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);
}
/* 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-sm);
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 (token-driven) -------------------------------------------------- */
.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-btn-padding-x);
border: 1px solid transparent;
border-radius: var(--shop-btn-radius);
font-family: var(--shop-btn-font);
font-size: var(--shop-btn-font-size);
font-weight: var(--shop-btn-weight);
letter-spacing: var(--shop-btn-tracking);
text-transform: uppercase;
text-decoration: none;
cursor: pointer;
transition: background var(--shop-duration-fast) var(--shop-ease-out),
color var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-btn--primary {
background: var(--shop-btn-primary-bg);
color: var(--shop-btn-primary-text);
}
.storefront-btn--primary:hover {
background: var(--shop-btn-primary-hover-bg);
color: var(--shop-btn-primary-hover-text);
}
.storefront-btn--ghost {
background: var(--shop-btn-ghost-bg);
color: var(--shop-btn-ghost-text);
border-color: var(--shop-btn-ghost-border);
}
.storefront-btn--ghost:hover {
background: var(--shop-btn-ghost-hover-bg);
color: var(--shop-btn-ghost-hover-text);
}
/* ==========================================================================
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-sm);
letter-spacing: var(--shop-tracking-wide);
}
.shop-banner__link {
font-weight: var(--shop-weight-semi);
text-decoration: underline;
text-underline-offset: 0.2em;
}
.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;
}
/* ==========================================================================
HEADER
========================================================================== */
.storefront-header {
position: sticky;
top: 0;
z-index: var(--shop-z-header);
background: var(--shop-bg);
border-bottom: 1px solid var(--shop-border-subtle);
}
.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 { text-decoration: none; line-height: var(--shop-lh-tight); }
.storefront-logo__text {
font-family: var(--shop-font-display);
font-size: var(--shop-text-2xl);
font-weight: var(--shop-weight-regular);
letter-spacing: var(--shop-tracking-wide);
}
.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: 2px;
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);
box-shadow: var(--shop-shadow-overlay);
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-3) 0;
font-family: var(--shop-font-display);
font-size: var(--shop-text-xl);
text-decoration: none;
color: var(--shop-text);
border-bottom: 1px solid var(--shop-border-subtle);
}
.storefront-nav a:hover { color: var(--shop-accent); }
.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: DOM order is logo→nav→actions, but we place nav in
col 1 (before the logo), so without an explicit row the sparse auto-flow
cursor can't backtrack and drops nav/actions onto a 2nd row. */
.storefront-nav { grid-column: 1; grid-row: 1; justify-self: start; }
.storefront-logo { 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;
box-shadow: none;
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-family: var(--shop-font-body);
font-size: var(--shop-text-base);
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 · logo centre · ♥+🛒 right (§5.7) ------ */
@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-sm);
}
.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-3) 0;
font-family: var(--shop-font-display);
font-size: var(--shop-text-xl);
text-decoration: none;
color: var(--shop-text);
}
.storefront-nav__account:hover { color: var(--shop-accent); }
/* 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;
}
.storefront-actions .shop-cart-icon:hover,
.storefront-actions .shop-wishlist-icon:hover,
.storefront-actions .shop-account-icon:hover,
.storefront-actions .shop-search-toggle:hover { color: var(--shop-accent); }
.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-accent);
/* Always-white on the gold badge — owner theme forces --shop-accent-on
black, but --shop-text-inverse stays white. */
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);
box-shadow: var(--shop-shadow-md);
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-2xl);
}
.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-btn-primary-bg);
color: var(--shop-btn-primary-text);
border: 0;
border-radius: var(--shop-btn-radius);
font-family: var(--shop-btn-font);
font-size: var(--shop-btn-font-size);
font-weight: var(--shop-btn-weight);
letter-spacing: var(--shop-btn-tracking);
text-transform: uppercase;
cursor: pointer;
}
.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);
box-shadow: var(--shop-shadow-overlay);
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-subtle);
}
.shop-cart-drawer__title {
margin: 0;
font-family: var(--shop-font-display);
font-size: var(--shop-text-2xl);
font-weight: var(--shop-weight-regular);
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 { color: var(--shop-accent); }
.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-subtle);
}
.shop-cart-drawer__thumb {
width: 64px;
height: 80px;
/* contain + centered so the whole bottle shows (cover cropped the top). */
object-fit: contain;
object-position: center;
border-radius: var(--shop-radius-sm);
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-display);
font-size: var(--shop-text-lg);
line-height: 1.2;
color: var(--shop-text);
text-decoration: none;
}
.shop-cart-drawer__name:hover { color: var(--shop-accent); }
.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-sm);
}
.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 { color: var(--shop-accent); }
.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-accent); }
.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-subtle);
}
.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);
}
.shop-cart-drawer__checkout {
display: block;
width: 100%;
padding: var(--shop-s-3) var(--shop-s-5);
background: var(--shop-btn-primary-bg);
color: var(--shop-btn-primary-text);
border-radius: var(--shop-btn-radius);
font-family: var(--shop-btn-font);
font-size: var(--shop-btn-font-size);
font-weight: var(--shop-btn-weight);
letter-spacing: var(--shop-btn-tracking);
text-transform: uppercase;
text-align: center;
text-decoration: none;
}
.shop-cart-drawer__checkout:hover {
background: var(--shop-btn-primary-hover-bg);
color: var(--shop-btn-primary-hover-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.2em;
}
.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);
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-accent);
text-decoration: underline;
text-underline-offset: 0.2em;
}
/* 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__name:hover { color: var(--shop-accent); }
body.storefront a.shop-cart-drawer__checkout { color: var(--shop-btn-primary-text); }
body.storefront a.shop-cart-drawer__checkout:hover { color: var(--shop-btn-primary-hover-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-accent); }
/* 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 SLIDER (ST5 — typographic slides, optional image/video per slide)
========================================================================== */
.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;
overflow: hidden;
background: var(--shop-bg-alt);
border-bottom: 1px solid var(--shop-border-subtle);
}
.storefront-hero__track {
position: relative;
min-height: 64vh;
}
.storefront-hero__slide {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
}
/* Pre-JS: show the first slide so the hero is never blank before boot. */
.storefront-hero__slide:first-child { opacity: 1; visibility: visible; }
/* JS-managed crossfade takes over once `.is-ready` is set.
Dip-free: the incoming slide (.is-active, z-index 2) fades in ON TOP while the
outgoing slide (.is-leaving, z-index 1) holds at full opacity beneath it, so
the hero background never bleeds through mid-fade. Linear easing keeps the
blend even (the old front-loaded ease-out made the swap feel abrupt/torn). */
.storefront-hero.is-ready .storefront-hero__slide {
opacity: 0;
visibility: hidden;
z-index: 0;
transition: opacity var(--shop-duration-slower) linear,
visibility var(--shop-duration-slower) linear;
will-change: opacity;
}
.storefront-hero.is-ready .storefront-hero__slide.is-leaving {
opacity: 1;
visibility: visible;
z-index: 1;
transition: none; /* stays put beneath the incoming — no fade-out flash */
}
.storefront-hero.is-ready .storefront-hero__slide.is-active {
opacity: 1;
visibility: visible;
z-index: 2;
}
/* Editor mode: freeze ALL hero motion so it doesn't drift/jump while editing —
the instant slide switch (no crossfade) AND the constant 16s background pan
(storefront-hero-pan) are both stopped; the image holds a static centre crop. */
.storefront-hero.is-editor.is-ready .storefront-hero__slide {
transition: none !important;
}
.storefront-hero.is-editor .storefront-hero__media {
animation: none !important;
object-position: center !important;
}
/* THE jump fix: the editor-bridge hover-highlight adds `.nwl-highlight`
{ position: relative }, which (equal specificity, loaded later) overrode the
slide's `position: absolute` — so the hovered slide dropped into normal flow
and the hero visibly jumped. Pin crossfade slides absolute regardless. */
.storefront-hero__slide.nwl-highlight,
.storefront-hero__slide.nwl-highlight--active,
.storefront-hero__slide.nwl-highlight--container {
position: absolute !important;
}
/* Scoped under .storefront-hero so `height: 100%` outranks the global
`body.storefront img { height: auto }` reset (0,1,2) — without this the hero
img keeps its intrinsic (square) ratio, never cover-crops to the wide band,
and object-position / the pan animation have nothing to move. */
.storefront-hero .storefront-hero__media,
.storefront-hero .storefront-hero__video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
/* Centre the crop so the bottle (centred in the packshot) stays in view
instead of the frame favouring the top. */
object-position: center;
}
.storefront-hero__video video {
width: 100%;
height: 100%;
object-fit: cover;
/* Centre the crop on both axes (matches .storefront-hero__media) so the
video subject stays centred instead of relying on the UA default. */
object-position: center;
}
/* Slow vertical pan (edge-to-edge). The wide hero band can only show a
horizontal slice of each tall lifestyle shot at once, so instead of a fixed
focal crop the image drifts top→bottom and back — the whole frame is revealed
over the cycle. Disabled under prefers-reduced-motion (static centre crop). */
@keyframes storefront-hero-pan {
from { object-position: center 0%; }
to { object-position: center 100%; }
}
.storefront-hero__media {
animation: storefront-hero-pan 16s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.storefront-hero__media { animation: none; object-position: center; }
}
/* Empty media (typographic slide) collapses — text sits on --shop-bg-alt. */
.storefront-hero__media:not([src]),
.storefront-hero__media[src=""] { display: none; }
.storefront-hero__slide:not(.has-media) .storefront-hero__video { display: none; }
/* the use-video boolean is metadata (adds the `use-video` class) — never shown */
.storefront-hero [data-editor-boolean] { display: none; }
.storefront-hero__scrim {
position: absolute;
inset: 0;
opacity: 0;
background: var(--shop-hero-scrim);
}
.storefront-hero__slide.has-media .storefront-hero__scrim { opacity: 1; }
/* Show the scrim + a dark base from the very first paint for image slides, so
the hero never flashes bright/white before the deferred JS adds `.has-media`
(FOUC fix). Falls back to the JS path on browsers without :has(). */
.storefront-hero__slide:has(.storefront-hero__media[src]:not([src=""])) { background: var(--shop-text); }
.storefront-hero__slide:has(.storefront-hero__media[src]:not([src=""])) .storefront-hero__scrim { opacity: 1; }
/* Light scheme (per-slide `light-scheme` boolean): a cream wash instead of the
dark scrim, so dark text stays readable over a bright image/video — the
"кремовий" alternative to the default black treatment. */
.storefront-hero__slide.has-media.light-scheme .storefront-hero__scrim { background: var(--shop-bg-overlay-light); }
.storefront-hero__inner {
position: relative;
z-index: 1;
padding-top: var(--shop-s-20);
padding-bottom: var(--shop-s-20);
text-align: center;
}
.storefront-hero__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: var(--shop-tracking-widest);
text-transform: uppercase;
}
.storefront-hero__title {
margin: 0 0 var(--shop-s-4);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-light);
font-size: var(--shop-text-5xl);
line-height: var(--shop-lh-tight);
letter-spacing: var(--shop-tracking-tight);
color: var(--shop-text);
}
.storefront-hero__subtitle {
margin: 0 auto var(--shop-s-8);
max-width: 56ch;
color: var(--shop-text-muted);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
/* Media slides: lift text to inverse over the scrim for AA contrast. */
.storefront-hero__slide.has-media .storefront-hero__eyebrow,
.storefront-hero__slide.has-media .storefront-hero__title,
.storefront-hero__slide.has-media .storefront-hero__subtitle { color: var(--shop-text-inverse); }
/* FOUC: lift text to inverse from the FIRST paint for image slides too (before
deferred JS adds .has-media), matching the :has() background/scrim above —
otherwise the dark text flashed brown over the dark scrim on reload. */
.storefront-hero__slide:has(.storefront-hero__media[src]:not([src=""])) .storefront-hero__eyebrow,
.storefront-hero__slide:has(.storefront-hero__media[src]:not([src=""])) .storefront-hero__title,
.storefront-hero__slide:has(.storefront-hero__media[src]:not([src=""])) .storefront-hero__subtitle { color: var(--shop-text-inverse); }
/* …unless the slide opts into the light scheme — then keep ink-dark text. */
.storefront-hero__slide.has-media.light-scheme .storefront-hero__eyebrow { color: var(--shop-text-muted); }
.storefront-hero__slide.has-media.light-scheme .storefront-hero__title,
.storefront-hero__slide.has-media.light-scheme .storefront-hero__subtitle { color: var(--shop-text); }
/* controls (JS-injected) ------------------------------------------------- */
.storefront-hero__dots {
position: absolute;
left: 0;
right: 0;
bottom: var(--shop-s-6);
z-index: 2;
display: flex;
justify-content: center;
gap: var(--shop-s-2);
}
.storefront-hero__dot {
width: 9px;
height: 9px;
padding: 0;
border: 1px solid var(--shop-text);
border-radius: var(--shop-radius-full);
background: transparent;
cursor: pointer;
transition: background var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-hero__dot.is-active { background: var(--shop-text); }
.storefront-hero__arrow {
position: absolute;
top: 50%;
z-index: 2;
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
transform: translateY(-50%);
border: 0;
background: transparent;
color: var(--shop-text);
cursor: pointer;
}
.storefront-hero__arrow:hover { color: var(--shop-accent); }
.storefront-hero__arrow--prev { left: var(--shop-s-2); }
.storefront-hero__arrow--next { right: var(--shop-s-2); }
.storefront-hero.has-media-active .storefront-hero__dot { border-color: var(--shop-text-inverse); }
.storefront-hero.has-media-active .storefront-hero__dot.is-active { background: var(--shop-text-inverse); }
.storefront-hero.has-media-active .storefront-hero__arrow { color: var(--shop-text-inverse); }
/* light active slide → dark controls (override the inverse rules above) */
.storefront-hero.has-light-active .storefront-hero__dot { border-color: var(--shop-text); }
.storefront-hero.has-light-active .storefront-hero__dot.is-active { background: var(--shop-text); }
.storefront-hero.has-light-active .storefront-hero__arrow { color: var(--shop-text); }
@media (prefers-reduced-motion: reduce) {
.storefront-hero.is-ready .storefront-hero__slide { transition: none; }
}
/* ==========================================================================
SECTIONS (home)
========================================================================== */
.storefront-section__inner {
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-16);
}
.storefront-section__head {
text-align: center;
margin-bottom: var(--shop-s-10);
}
.storefront-section__eyebrow {
display: block;
margin-bottom: var(--shop-s-2);
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
letter-spacing: var(--shop-tracking-widest);
text-transform: uppercase;
}
.storefront-section__title {
margin: 0;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-regular);
font-size: var(--shop-text-4xl);
line-height: var(--shop-lh-snug);
}
.storefront-section__more {
margin-top: var(--shop-s-10);
text-align: center;
}
/* craft / "why us" band (ST10 follow-up) — a cream band breaks the white
rhythm and adds warmth + reassurance between the founder story and reviews. */
.storefront-craft { background: var(--shop-bg-alt); }
/* Larger editorial numerals on the cream band: at 3xl they qualify as WCAG
"large text" (3:1), so the gold (--shop-accent-hover) clears AA on cream
where 20px normal would fail (4.28:1). */
.storefront-craft .storefront-value__num {
font-size: var(--shop-text-3xl);
line-height: var(--shop-lh-tight);
}
/* notes teaser — "shop by note" chips (ST6, ST10-redesign) ---------------- */
/* Cream band + a one-line invitation + chips that carry their usage count and
warm to gold on hover — turns a flat pill row into an editorial "scent index". */
.storefront-notes-teaser { background: var(--shop-bg-alt); }
.storefront-notes-teaser__subtitle {
margin: var(--shop-s-4) auto 0;
max-width: 48ch;
color: var(--shop-text-muted);
font-size: var(--shop-text-base);
line-height: var(--shop-lh-relaxed);
}
.storefront-notes-teaser__chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: var(--shop-s-3);
}
.storefront-notes-teaser__chip {
display: inline-flex;
align-items: center;
gap: var(--shop-s-2);
min-height: 44px;
padding: var(--shop-s-2) var(--shop-s-5);
border: 1px solid var(--shop-border);
border-radius: var(--shop-radius-full);
background: var(--shop-bg);
font-size: var(--shop-text-base);
text-decoration: none;
/* colour inherits ink from the section (the base `body.storefront
a:not(.storefront-btn){color:inherit}` rule out-ranks a class colour);
hover only shifts border + count colour, which the base rule doesn't touch. */
transition: border-color var(--shop-duration-fast) var(--shop-ease-out),
box-shadow var(--shop-duration-fast) var(--shop-ease-out);
}
.storefront-notes-teaser__chip:hover {
border-color: var(--shop-accent);
box-shadow: var(--shop-shadow-sm);
}
.storefront-notes-teaser__chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4em;
padding: 0 var(--shop-s-1);
border-radius: var(--shop-radius-full);
background: var(--shop-bg-alt);
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
font-weight: var(--shop-weight-medium);
}
.storefront-notes-teaser__chip:hover .storefront-notes-teaser__chip-count {
background: var(--shop-accent-soft);
color: var(--shop-accent-hover);
}
/* founder story (ST6) ---------------------------------------------------- */
.storefront-founder__inner {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-8);
align-items: center;
}
.storefront-founder__media {
aspect-ratio: 4 / 5;
background: var(--shop-bg-alt);
border-radius: var(--shop-radius-md);
overflow: hidden;
}
.storefront-founder__img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
.storefront-founder__img[src=""],
.storefront-founder__img:not([src]) { display: none; }
.storefront-founder__text { text-align: center; }
.storefront-founder__body {
margin: var(--shop-s-4) 0 var(--shop-s-6);
color: var(--shop-text-muted);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
.storefront-founder__body p { margin: 0; }
@media (min-width: 768px) {
.storefront-founder__inner { grid-template-columns: 1fr 1fr; gap: var(--shop-s-12); }
.storefront-founder__text { text-align: left; }
}
/* No founder photo yet → drop the empty media frame and centre the text (a large
blank block reads as unfinished). The 2-col layout returns once an image is set
(ST10). :has() unsupported → graceful fallback to the framed 2-col above. */
.storefront-founder__inner:has(.storefront-founder__img[src=""]),
.storefront-founder__inner:has(.storefront-founder__img:not([src])) {
grid-template-columns: 1fr;
max-width: 60ch;
margin-inline: auto;
}
.storefront-founder__inner:has(.storefront-founder__img[src=""]) .storefront-founder__media,
.storefront-founder__inner:has(.storefront-founder__img:not([src])) .storefront-founder__media { display: none; }
.storefront-founder__inner:has(.storefront-founder__img[src=""]) .storefront-founder__text,
.storefront-founder__inner:has(.storefront-founder__img:not([src])) .storefront-founder__text { text-align: center; }
/* testimonials (ST6) ----------------------------------------------------- */
.storefront-testimonials__rating {
margin: var(--shop-s-4) 0 0;
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: var(--shop-s-2);
color: var(--shop-text-muted);
font-size: var(--shop-text-sm);
letter-spacing: var(--shop-tracking-wide);
}
.storefront-testimonials__rating-stars {
color: var(--shop-accent);
font-size: var(--shop-text-base);
letter-spacing: var(--shop-tracking-wide);
}
.storefront-testimonials__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-6);
}
.storefront-testimonial {
margin: 0;
padding: var(--shop-s-8) var(--shop-s-6);
background: var(--shop-bg-alt);
border-radius: var(--shop-radius-md);
text-align: center;
}
.storefront-testimonial__stars {
margin-bottom: var(--shop-s-3);
color: var(--shop-accent);
font-size: var(--shop-text-lg);
letter-spacing: var(--shop-tracking-wide);
}
.storefront-testimonial__quote {
margin: 0 0 var(--shop-s-4);
font-family: var(--shop-font-display);
font-size: var(--shop-text-xl);
line-height: var(--shop-lh-relaxed);
color: var(--shop-text);
}
.storefront-testimonial__quote p { margin: 0; }
.storefront-testimonial__author {
color: var(--shop-text-muted);
font-size: var(--shop-text-sm);
letter-spacing: var(--shop-tracking-wide);
text-transform: uppercase;
}
@media (min-width: 768px) {
.storefront-testimonials__grid { grid-template-columns: repeat(3, 1fr); }
}
/* ==========================================================================
STATIC PAGES (about / contacts)
========================================================================== */
.storefront-page__inner {
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-16);
max-width: 72ch;
}
.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: var(--shop-tracking-widest);
text-transform: uppercase;
}
.storefront-page__title {
margin: 0 0 var(--shop-s-6);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-light);
font-size: var(--shop-text-4xl);
line-height: var(--shop-lh-tight);
}
.storefront-page__body {
color: var(--shop-text-muted);
font-size: var(--shop-text-lg);
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-regular);
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-regular);
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-accent); text-decoration: underline; text-underline-offset: 0.2em; }
.storefront-page__prose a:hover { color: var(--shop-text); }
.storefront-contacts {
list-style: none;
margin: var(--shop-s-8) 0 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--shop-s-3);
}
.storefront-contacts a {
text-decoration: none;
font-size: var(--shop-text-lg);
}
.storefront-contacts a:hover { color: var(--shop-accent); }
/* ==========================================================================
ABOUT / CONTACTS — rich container-width layout (ST8 follow-up)
========================================================================== */
.storefront-about__intro {
max-width: 62ch;
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-8);
}
.storefront-about__lead {
color: var(--shop-text-muted);
font-size: var(--shop-text-lg);
line-height: var(--shop-lh-relaxed);
}
.storefront-about__lead p { margin: 0 0 var(--shop-s-4); }
.storefront-about__lead p:last-child { margin-bottom: 0; }
/* Page-hero band (about / contacts intro) — a centred cream banner, the
no-media sibling of the home hero, so the secondary pages open with the same
editorial presence instead of a small left-aligned heading. */
.storefront-pagehero {
background: var(--shop-bg-alt);
border-bottom: 1px solid var(--shop-border-subtle);
text-align: center;
}
.storefront-pagehero__inner {
max-width: 60ch;
margin: 0 auto;
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-16);
}
.storefront-pagehero .storefront-page__title {
margin: 0;
font-size: var(--shop-text-5xl);
font-weight: var(--shop-weight-light);
line-height: var(--shop-lh-tight);
letter-spacing: var(--shop-tracking-tight);
}
.storefront-pagehero .storefront-about__lead { margin-top: var(--shop-s-5); }
/* compact variant (contacts) — less vertical height */
.storefront-pagehero--compact .storefront-pagehero__inner {
padding-top: var(--shop-s-12);
padding-bottom: var(--shop-s-12);
}
/* Photo-background variant (about / contacts) — mirrors the home hero: a cover
image that slowly pans top↔bottom, a gradient scrim for legibility, copy
lifted to inverse. Falls back to a dark panel + inverse text when no image. */
.storefront-pagehero--media {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: 52vh;
background: var(--shop-text);
border-bottom: none;
}
.storefront-pagehero--media .storefront-pagehero__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
animation: storefront-hero-pan 16s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.storefront-pagehero--media .storefront-pagehero__media { animation: none; }
}
.storefront-pagehero__media:not([src]),
.storefront-pagehero__media[src=""] { display: none; }
.storefront-pagehero--media .storefront-pagehero__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: var(--shop-hero-scrim);
}
.storefront-pagehero--media .storefront-section__inner {
position: relative;
z-index: 2;
width: 100%;
}
.storefront-pagehero--media .storefront-page__eyebrow { color: var(--shop-text-inverse); opacity: 0.85; }
.storefront-pagehero--media .storefront-page__title,
.storefront-pagehero--media .storefront-about__lead { color: var(--shop-text-inverse); }
/* shared vertical rhythm for the stacked sections */
.storefront-about-values,
.storefront-about-story,
.storefront-contacts-cards,
.storefront-contacts-info {
padding-top: var(--shop-s-12);
padding-bottom: var(--shop-s-12);
}
/* contacts run tighter (user: "компактніше по висоті") */
.storefront-contacts-cards { padding-top: var(--shop-s-10); padding-bottom: var(--shop-s-8); }
.storefront-contacts-info { padding-top: var(--shop-s-8); padding-bottom: var(--shop-s-12); }
/* Values grid */
.storefront-values {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-8);
}
@media (min-width: 768px) {
.storefront-values { grid-template-columns: repeat(3, 1fr); gap: var(--shop-s-10); }
}
.storefront-value { display: flex; flex-direction: column; gap: var(--shop-s-2); }
.storefront-value__num {
font-family: var(--shop-font-display);
font-size: var(--shop-text-xl);
color: var(--shop-accent-hover);
}
.storefront-value__title {
margin: 0;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-regular);
font-size: var(--shop-text-2xl);
line-height: var(--shop-lh-snug);
}
.storefront-value__text { color: var(--shop-text-muted); line-height: var(--shop-lh-relaxed); }
.storefront-value__text p { margin: 0; }
/* Story (text + pull-quote) */
.storefront-about-story { background: var(--shop-bg-alt); }
.storefront-about__story {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-8);
align-items: center;
}
@media (min-width: 900px) {
.storefront-about__story { grid-template-columns: 1.2fr 1fr; gap: var(--shop-s-16); }
}
.storefront-about__story-title {
margin: 0 0 var(--shop-s-4);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-light);
font-size: var(--shop-text-3xl);
line-height: var(--shop-lh-tight);
}
.storefront-about__story-body { color: var(--shop-text-muted); font-size: var(--shop-text-lg); line-height: var(--shop-lh-relaxed); }
.storefront-about__story-body p { margin: 0 0 var(--shop-s-4); }
.storefront-about__story-body p:last-child { margin-bottom: 0; }
/* story aside = founder portrait + pull-quote stacked (ST10 real photo) */
.storefront-about__story-aside {
display: flex;
flex-direction: column;
gap: var(--shop-s-6);
}
.storefront-about__story-img {
display: block;
width: 100%;
aspect-ratio: 4 / 5;
object-fit: cover;
border-radius: var(--shop-card-radius);
background: var(--shop-bg-alt);
}
.storefront-about__story-img[src=""],
.storefront-about__story-img:not([src]) { display: none; }
.storefront-about__quote {
margin: 0;
font-family: var(--shop-font-display);
font-style: italic;
font-size: var(--shop-text-2xl);
line-height: var(--shop-lh-snug);
color: var(--shop-text);
border-left: 2px solid var(--shop-accent);
padding-left: var(--shop-s-5);
}
/* CTA band */
.storefront-cta-band {
background: var(--shop-bg);
text-align: center;
padding-top: var(--shop-s-16);
padding-bottom: var(--shop-s-16);
}
.storefront-cta-band__inner { display: flex; flex-direction: column; align-items: center; gap: var(--shop-s-6); }
.storefront-cta-band__title {
margin: 0;
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-light);
font-size: var(--shop-text-3xl);
}
.storefront-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--shop-s-3); justify-content: center; }
/* Photo-background CTA band (about) — same panning treatment as the page
heroes: cover image drifts, gradient scrim, copy + ghost button lift to
inverse so they read over the photo. */
.storefront-cta-band--media {
position: relative;
overflow: hidden;
display: flex;
align-items: center;
min-height: 46vh;
background: var(--shop-text);
}
.storefront-cta-band--media .storefront-cta-band__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
z-index: 0;
animation: storefront-hero-pan 16s ease-in-out infinite alternate;
}
@media (prefers-reduced-motion: reduce) {
.storefront-cta-band--media .storefront-cta-band__media { animation: none; }
}
.storefront-cta-band__media:not([src]),
.storefront-cta-band__media[src=""] { display: none; }
.storefront-cta-band--media .storefront-cta-band__scrim {
position: absolute;
inset: 0;
z-index: 1;
background: var(--shop-overlay-strong);
}
.storefront-cta-band--media .storefront-section__inner { position: relative; z-index: 2; width: 100%; }
.storefront-cta-band--media .storefront-cta-band__title { color: var(--shop-text-inverse); }
/* Light (inverse) primary button so it stands out on the dark band. */
.storefront-cta-band--media .storefront-btn--primary {
background: var(--shop-text-inverse);
color: var(--shop-text);
border-color: var(--shop-text-inverse);
}
.storefront-cta-band--media .storefront-btn--primary:hover {
background: transparent;
color: var(--shop-text-inverse);
border-color: var(--shop-text-inverse);
}
.storefront-cta-band--media .storefront-btn--ghost {
background: transparent;
color: var(--shop-text-inverse);
border-color: var(--shop-text-inverse);
}
.storefront-cta-band--media .storefront-btn--ghost:hover {
background: var(--shop-text-inverse);
color: var(--shop-text);
}
/* Decorative section divider — two faded rules around a small gold diamond. */
.storefront-divider {
display: flex;
align-items: center;
justify-content: center;
gap: var(--shop-s-4);
padding: var(--shop-s-2) var(--shop-container-px);
}
.storefront-divider::before,
.storefront-divider::after {
content: "";
height: 1px;
width: clamp(48px, 12vw, 96px);
background: linear-gradient(to right, transparent, var(--shop-border-strong));
}
.storefront-divider::after { background: linear-gradient(to left, transparent, var(--shop-border-strong)); }
.storefront-divider__mark {
width: 7px;
height: 7px;
flex-shrink: 0;
background: var(--shop-accent);
transform: rotate(45deg);
}
/* Contacts — card grid */
.storefront-contacts-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-4);
}
@media (min-width: 600px) { .storefront-contacts-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .storefront-contacts-grid { grid-template-columns: repeat(4, 1fr); } }
.storefront-contact-card {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: var(--shop-s-2);
padding: var(--shop-s-8) var(--shop-s-5);
border: 1px solid var(--shop-border);
border-radius: var(--shop-radius-md);
text-decoration: none;
transition: border-color var(--shop-duration-base) var(--shop-ease-out),
background var(--shop-duration-base) var(--shop-ease-out);
}
.storefront-contact-card:hover { border-color: var(--shop-accent); background: var(--shop-bg-alt); }
.storefront-contact-card__icon {
display: inline-flex;
color: var(--shop-accent);
margin-bottom: var(--shop-s-1);
}
.storefront-contact-card__icon svg { width: 26px; height: 26px; }
.storefront-contact-card__label {
color: var(--shop-text-muted);
font-size: var(--shop-text-xs);
letter-spacing: var(--shop-tracking-widest);
text-transform: uppercase;
}
.storefront-contact-card__value { font-family: var(--shop-font-display); font-size: var(--shop-text-xl); }
/* Contacts — how to order / delivery */
.storefront-contacts-info { background: var(--shop-bg); }
.storefront-contacts-info__grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-8);
}
@media (min-width: 768px) { .storefront-contacts-info__grid { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--shop-s-10); } }
/* Anchor targets (#delivery / #returns from the footer) clear the sticky header. */
.storefront-contacts-info__col { scroll-margin-top: calc(var(--shop-header-h-md) + var(--shop-s-8)); }
.storefront-contacts-info__title {
margin: 0 0 var(--shop-s-3);
font-family: var(--shop-font-display);
font-weight: var(--shop-weight-regular);
font-size: var(--shop-text-2xl);
}
.storefront-contacts-info__text { color: var(--shop-text-muted); line-height: var(--shop-lh-relaxed); }
.storefront-contacts-info__text p { margin: 0; }
/* ==========================================================================
FOOTER (ST4 — 4-col: brand+social / shop / info / contacts → stack on mobile)
========================================================================== */
.storefront-footer {
background: var(--shop-bg-alt);
border-top: 1px solid var(--shop-border-subtle);
}
.storefront-footer__inner {
padding-top: var(--shop-s-12);
padding-bottom: var(--shop-s-10);
}
.storefront-footer__cols {
display: grid;
grid-template-columns: 1fr;
gap: var(--shop-s-8);
}
.storefront-footer__col {
display: flex;
flex-direction: column;
gap: var(--shop-s-3);
}
.storefront-footer__brand {
font-family: var(--shop-font-display);
font-size: var(--shop-text-2xl);
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-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
color: var(--shop-text);
text-decoration: none;
}
.storefront-footer__social-icon { width: 22px; height: 22px; }
.storefront-footer__heading {
margin: 0 0 var(--shop-s-1);
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: var(--shop-tracking-widest);
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-base); }
.storefront-footer__phone {
text-decoration: none;
font-family: var(--shop-font-display);
font-size: var(--shop-text-xl);
}
.storefront-footer__email { text-decoration: none; font-size: var(--shop-text-base); }
.storefront-footer__copyright {
margin: var(--shop-s-10) 0 0;
padding-top: var(--shop-s-6);
border-top: 1px solid var(--shop-border-subtle);
color: var(--shop-text-muted);
font-size: var(--shop-text-sm);
}
/* 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 { color: var(--shop-accent); }
@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;
}
}