/* ==========================================================================
Theme Name: Montserrat Noir
Description: One Montserrat family voices the whole store — weight separates display, chrome and body. The navigation bar rests as a lightly lifted solid brown and deepens into true frosted glass as the page scrolls; the dropdown freezes the page behind it the same way. The announcement bar keeps the default stylesheet's exact row, and content keeps the default palette untouched.
Tone: Dark brown nav / Modern / One family
Fonts: Montserrat variable (wght 100-900), weights per role
Theme Color: #463B3A
Font URL: https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap
Base: Deerseeker Archery storefront (assets/css/styles.css)
--------------------------------------------------------------------------
Drop-in replacement stylesheet. Upload it in admin -> Site -> Theme
stylesheet, then pick "Montserrat Noir" from the list. R181: app/header.php reads the
"Font URL" line above and emits a "); the
level-2 entries sit BELOW it in fixed columns of at most four rows, and a
level-3 group stays folded until its row is clicked. */
.dropdown {
position: absolute;
top: calc(100% + 8px);
left: 0;
width: max-content;
min-width: 230px;
/* R68 — four equal columns of long names need more room than the old
two; past this the columns simply stop being equal (graceful), they
never overlap or wrap. */
max-width: min(92vw, 1200px);
padding: 0.5rem;
background: rgba(255, 253, 248, 0.92);
/* R134 — the glass, and how opaque it is. The plain rgba() above is the
fallback; the second line reads the merchant's choice from Admin →
Styles (--nav-menu-alpha). Unset = 92%, i.e. exactly the old value. */
background: rgb(255 253 248 / var(--nav-menu-alpha, 92%));
/* R141f — the frost itself lives on the ::before underlay (see below), NOT
here: an element with backdrop-filter is a backdrop root, and the flyout
third level is a DOM descendant of this panel — its own frost could only
ever sample this panel's empty interior, never the page behind it.
Measured before the move: level 2 frosted the page, level 3 sat crisp.
isolation keeps the negative-z underlay inside the panel. */
isolation: isolate;
/* the hairline rides the panel's own alpha: an opaque border around a
nearly transparent pane read as a white line (measured at 20%). The
rgb(from …) form keeps the theme's --line token and just borrows its
alpha from the same knob that drives the glass; browsers without
relative color syntax keep the solid line above. */
border: 1px solid var(--line);
border-color: rgb(from var(--line) r g b / var(--nav-menu-alpha, 92%));
border-radius: var(--radius);
box-shadow: var(--shadow-md);
/* NO opacity transition on the panel: any ancestor at opacity < 1 becomes
a backdrop root, and during the fade the ::before frost simply cannot
sample the page — the panel opened transparent and snapped to frosted
one frame later (measured). R149: NO transition on the base (closed)
state either — closing is instant, so switching to another nav button
swaps menus in the same frame instead of leaving the old panel sliding
out for a beat. The open slide lives on the hover state below. */
visibility: hidden;
transform: translateY(8px);
/* R157 (M-3) — a CLOSED panel must not catch the mouse. visibility:hidden
alone is not enough: a third-level group the visitor unfolded keeps its
own visibility:visible (inherited-hidden loses to the child), and
opacity:0 hides only the PAINT, not the hit test. Without this, the
closed panel under the nav still swallowed clicks and could re-enter
its own :hover and pop back open — the same class of fault the navmenu
panels already guard against (see .dropdown.navmenu below). Like
pointer-events everywhere: it cannot transition, it flips instantly,
which is exactly what we want. */
pointer-events: none;
/* R154b — visibility is INHERITED, so a descendant that declares its own
visibility:visible overrides it and keeps painting. Every panel has
such descendants: the always-shown third level of the mega and
list-static styles, and any third-level group the visitor unfolded
(.dropdown-group.is-open, .navmenu-item.is-open) — after the panel
closed, that text stayed on the page. opacity:0 hides the WHOLE subtree
no matter what the children declare. It flips in the same frame as
visibility (NO opacity transition anywhere on this pair) so the frost
never has a mid-fade frame to mis-sample — the R149 beat cannot come
back. */
opacity: 0;
}
.has-dropdown:hover .dropdown,
.has-dropdown:focus-within .dropdown {
visibility: visible;
opacity: 1;
transform: translateY(0);
/* R157 (M-3) — restore hit-testing while the panel is open (the closed
base state sets none). */
pointer-events: auto;
/* the slide belongs to the OPEN state only: transitions read their
property from the destination state, so on open the panel glides in
(fully frosted from the first painted frame — transform never creates
a backdrop root), and on close the destination has no transition and
the panel is gone immediately. */
transition: transform 0.22s var(--ease);
}
/* --------------------------------------------------------------------------
R181 — a CLOSED dropdown must not lay out at all.
visibility:hidden still produces an absolutely positioned box. Four of
them widened .nav-list -> .header-inner -> .site-header, which is why R80
had to clip the root. Taking the closed panel out of layout fixes the
cause rather than the symptom, and lets the root go back to visible
overflow.
The child selector is deliberate: it targets ONLY the top-level panels
(.nav-list > li.has-dropdown > .dropdown). The navmenu flyout's third
level also carries .dropdown, but lives under .navmenu-item and keeps its
own grid/0fr fold and sideways transform untouched.
-------------------------------------------------------------------------- */
.nav-list > .has-dropdown > .dropdown { display: none; }
@keyframes nw-dropdown-in {
from { transform: translateY(8px); }
to { transform: translateY(0); }
}
.nav-list > .has-dropdown:hover > .dropdown,
.nav-list > .has-dropdown:focus-within > .dropdown {
display: block;
/* display:none -> block cannot transition, so the R149 8px glide is
restored with a transform-only animation. opacity stays at 1 throughout:
an opacity < 1 ancestor becomes a backdrop root and the panel's frost
would stop sampling the page (R141f). */
animation: nw-dropdown-in 0.22s var(--ease) both;
}
@media (prefers-reduced-motion: reduce) {
.nav-list > .has-dropdown:hover > .dropdown,
.nav-list > .has-dropdown:focus-within > .dropdown { animation: none; }
}
/* R212 — the "All " head row was removed from every panel by
request: the menu label above the panel already links to that category.
Its rules (R68/R69/R136) went with it — nothing renders the class now. */
/* R68 — the level-2 list. The entry count alone decides the layout: every
column carries at most four rows, so five entries make two columns, nine
make three, and so on. Columns are equally wide (the widest one wins) and a
hairline runs down each gully. A single column needs no class at all. */
.dropdown-body {
display: grid;
grid-template-columns: 1fr;
column-gap: 1.5rem;
}
.dropdown-body.cols-2 { grid-template-columns: repeat(2, 1fr); }
.dropdown-body.cols-3 { grid-template-columns: repeat(3, 1fr); }
.dropdown-body.cols-4 { grid-template-columns: repeat(4, 1fr); }
/* Columns are stacked flex boxes, not a flowing text column: opening a
level-3 list below a row grows THAT column only — every other row keeps its
place, so nothing jumps under the pointer. */
.dropdown-col {
position: relative;
display: flex;
flex-direction: column;
gap: 0.1rem;
}
.dropdown-col + .dropdown-col::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -0.75rem;
width: 1px;
background: var(--line);
background: rgb(from var(--line) r g b / var(--nav-menu-alpha, 92%));
}
/* R67 — the hover state is PURELY a soft colour crossfade: the old
padding-left shift reflowed the row and made a long category name look
like it was punching the panel wider as the pointer crossed it. The accent
glides in from a pseudo-element instead, so nothing moves.
R68 — the level-2 row of a group is a (it unfolds the level-3 list
rather than navigating), so the shared rule now carries the button reset
too; a would otherwise keep its UA font, line box and chrome. */
.dropdown-link {
position: relative;
display: block;
width: 100%;
padding: 0.55rem 0.85rem;
border: 0;
/* R136 — follows the merchant's Corner rounding (--radius), like the panel
around it, so one slider shapes the whole dropdown. */
border-radius: var(--radius);
background: none;
color: var(--ink-soft);
font-family: inherit;
font-size: var(--fs-sm);
line-height: inherit;
text-align: left;
white-space: nowrap;
cursor: pointer;
transition: background 0.26s var(--ease), color 0.26s var(--ease);
}
.dropdown-link::before {
content: '';
position: absolute;
left: 0.3rem;
top: 50%;
width: 2px;
height: 1.05em;
margin-top: -0.525em;
border-radius: 2px;
background: currentColor;
opacity: 0;
transform: scaleY(0.35);
transition: opacity 0.26s var(--ease), transform 0.26s var(--ease);
}
.dropdown-link:hover,
.dropdown-link:focus-visible {
background: var(--sand);
color: var(--forest-900);
}
.dropdown-link:hover::before,
.dropdown-link:focus-visible::before {
opacity: 0.5;
transform: scaleY(1);
}
/* R33 — invisible hover bridge over the 8px gap between the nav link and
its dropdown, so moving the mouse down doesn't close the menu. */
/* R141f — the panel's frost, on an underlay: blurring (tint over page) is
mathematically the same as tinting the blurred page — a constant colour
commutes with the blur — so the panel looks exactly as before, but no
backdrop root forms here and a nested level-3 panel can frost the real
page too. Every .dropdown surface (level 2 AND the flyout level 3) gets
this, which is what makes the two levels read as the same glass. */
.dropdown::before {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
backdrop-filter: blur(14px) saturate(160%);
-webkit-backdrop-filter: blur(14px) saturate(160%);
pointer-events: none;
}
/* the hover-trap bridge over the 8px header-to-panel gap — the same strip
the old .dropdown::before carried, moved to ::after now that ::before is
the frost underlay. Top-level panels only: a flyout level 3 opens from a
row inside the level-2 panel and bridges sideways instead (its own
::after, over in the flyout section). */
.has-dropdown > .dropdown::after {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
/* R66/R67 — the third level lives INSIDE the panel: a sub-category with
children becomes a titled group, its children indented beneath a
hairline rule. One calm surface instead of a second flying panel —
hierarchy comes from weight, size and indentation, never from colour, so
dark themes restyle it by touching only .dropdown-link.
The ranking is deliberately legible at a glance:
"All " — panel head, bold, a full row of its own
level 2 (a child) — normal weight, full-strength ink
level 3 (a grandchild) — smaller, softened, behind the guide rule
R68 — and level 3 is FOLDED AWAY until it is asked for. */
.dropdown-group {
display: flex;
flex-direction: column;
}
/* the row that opens the level-3 list: the label keeps the left edge, the
arrow parks on the right of its own column */
/* R212 — a group row is now TWO targets in a 2-column grid: the name is a
link to the category's own page (left, fills the width) and the caret is a
button that only unfolds the third level (right, at its natural size).
The grid is what keeps the button the full height of the row without a
magic number — `stretch` is the default, and the row height follows the
link's own padding. */
.dropdown-group-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
}
.dropdown-group .group-title {
display: flex;
align-items: center;
gap: 0.75rem;
font-weight: 600;
}
/* the caret button: no chrome of its own, just the same hit area the old
full-row button offered on its right-hand side */
.group-expand {
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
padding: 0;
border: 0;
border-radius: var(--radius);
background: none;
/* R215 — same neutral pair as .navmenu-expand (see the token block on
.navmenu): the caret button answers in charcoal, not in the theme accent. */
color: var(--navmenu-btn-ink, var(--navmenu-ink, inherit));
font: inherit;
cursor: pointer;
transition: background 0.26s var(--ease), color 0.26s var(--ease);
}
.group-expand:hover,
.group-expand:focus-visible {
background: var(--navmenu-btn-wash, rgba(128, 128, 128, 0.16));
color: var(--navmenu-btn-wash-ink, var(--navmenu-ink, inherit));
}
.group-expand:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
}
.group-caret {
flex: none;
font-size: 0.7em;
line-height: 1;
opacity: 0.7;
transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.dropdown-group.is-open .group-caret {
transform: rotate(180deg);
opacity: 1;
}
/* The unfold itself. A 0fr grid row collapses to nothing and animates to the
list's natural height, so a level-3 list of ten entries opens just as
cleanly as one of two — no max-height guesswork, and never a scrollbar.
The clip wrapper holds the overflow; the padding and the guide rule sit one
level deeper so the collapsed state is a true zero, not a sliver. */
.dropdown-sublinks {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows 0.3s var(--ease), opacity 0.3s var(--ease), visibility 0.3s;
}
.dropdown-group.is-open .dropdown-sublinks {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
}
.dropdown-sublinks-clip {
overflow: hidden;
min-height: 0;
}
.dropdown-sublinks-list {
margin: 0.1rem 0 0.35rem 0.95rem;
padding-left: 0.55rem;
border-left: 1px solid var(--line);
/* rides the panel's alpha like every other dropdown hairline */
border-left-color: rgb(from var(--line) r g b / var(--nav-menu-alpha, 92%));
}
.dropdown-sublinks .sub-link {
padding: 0.4rem 0.7rem;
font-size: var(--fs-xs);
opacity: 0.78;
transition: background 0.26s var(--ease), color 0.26s var(--ease), opacity 0.26s var(--ease);
}
/* the guide rule already marks the level — no second accent needed */
.dropdown-sublinks .sub-link::before {
display: none;
}
.dropdown-sublinks .sub-link:hover,
.dropdown-sublinks .sub-link:focus-visible {
opacity: 1;
}
/* --- Header actions --- */
.header-actions {
display: flex;
align-items: center;
gap: 0.75rem;
}
.header-search input {
width: 150px;
padding: 0.5rem 0.9rem;
border: 1px solid var(--line-dark);
border-radius: 999px;
background: rgba(255, 255, 255, 0.08);
color: #fff;
font-size: var(--fs-sm);
transition: width 0.25s var(--ease), background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.header-search input::placeholder { color: var(--sage); }
.header-search input:focus {
width: 190px;
background: rgba(255, 255, 255, 0.14);
border-color: var(--amber);
outline: none;
}
.btn-icon {
position: relative;
display: inline-flex;
align-items: center;
justify-content: center;
width: 42px;
height: 42px;
border: none;
border-radius: var(--radius-sm);
background: transparent;
color: #fff;
transition: background 0.2s var(--ease);
}
.btn-icon:hover { background: rgba(255, 255, 255, 0.12); }
.cart-toggle::after {
content: attr(data-cart-count);
position: absolute;
top: -2px;
right: -4px;
min-width: 19px;
height: 19px;
padding: 0 5px;
display: flex;
align-items: center;
justify-content: center;
background: var(--amber);
color: #fff;
font-size: var(--fs-2xs);
font-weight: 700;
border-radius: 999px;
border: 2px solid var(--forest-800);
}
.cart-toggle[data-cart-count="0"]::after { display: none; }
/* Hamburger */
.menu-toggle {
display: none;
flex-direction: column;
justify-content: center;
gap: 5px;
width: 42px;
height: 42px;
padding: 10px;
background: transparent;
border: none;
border-radius: var(--radius-sm);
}
.menu-toggle span {
display: block;
height: 2px;
width: 100%;
background: #fff;
border-radius: 2px;
transition: transform 0.25s var(--ease), opacity 0.25s var(--ease);
}
/* --- Mobile menu --- */
.mobile-menu {
position: fixed;
inset: 0;
z-index: 150;
padding: 1.5rem;
background: rgba(22, 27, 22, 0.97);
/* R136 — the drawer follows the merchant's dropdown-opacity setting too
(--nav-menu-alpha, Admin → Styles). max(60%, …) is a readability floor:
white labels over a nearly transparent drawer would vanish on bright
pages, so the drawer never goes below 60% however low the glass is set.
Browsers without max() in the alpha slot keep the 0.97 fallback above. */
background: rgb(22 27 22 / max(60%, var(--nav-menu-alpha, 97%)));
backdrop-filter: blur(18px);
-webkit-backdrop-filter: blur(18px);
transform: translateX(100%);
transition: transform 0.3s var(--ease);
overflow-y: auto;
}
.mobile-menu.is-open { transform: translateX(0); }
.mobile-menu-header {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 1.5rem;
}
.menu-close {
width: 42px;
height: 42px;
font-size: var(--fs-2xl);
line-height: 1;
color: #fff;
background: transparent;
border: none;
border-radius: var(--radius-sm);
}
.menu-close:hover { background: rgba(255,255,255,0.1); }
.mobile-menu nav > ul > li > a,
.mobile-menu .mobile-cat > a {
display: block;
padding: 0.9rem 0;
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
color: #fff;
border-bottom: 1px solid var(--line-dark);
}
/* R79 — each top-level group is a row: the category link on the left, a
caret button on the right. The row (not the link) carries the bottom
border, so the border lines up under both the label and the button. */
.mobile-cat-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
border-bottom: 1px solid var(--line-dark);
}
.mobile-cat-row > a {
display: block;
flex: 1;
padding: 0.9rem 0;
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
color: #fff;
}
.mobile-cat-toggle {
flex: none;
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
margin-right: -8px;
/* R113c — the caret used to be a bare pale glyph on the drawer background;
on a phone it read as decoration, not as "this row opens". The toggle is
now a visible badge: a ringed, slightly filled circle with a white
chevron, still 44px for the thumb. */
background: rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.4);
border-radius: 50%;
color: #fff;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background-color 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.mobile-cat-toggle:hover,
.mobile-cat-toggle:focus-visible { background: rgba(255, 255, 255, 0.22); color: #fff; }
.mobile-cat-caret {
font-size: var(--fs-xl);
line-height: 1;
transition: transform 0.25s var(--ease);
}
/* .is-open sits on the while the panel is expanded */
.mobile-cat.is-open .mobile-cat-caret { transform: rotate(180deg); }
.mobile-sub {
padding: 0.35rem 0 0.6rem 1rem;
}
.mobile-sub a {
display: block;
padding: 0.45rem 0;
color: var(--sage);
font-size: var(--fs-md);
}
.mobile-sub a:hover { color: #fff; }
/* R33 — third level in the mobile drawer: deeper indent, smaller type,
subtle left rule so the hierarchy stays readable on small screens. */
.mobile-sub--deep {
padding: 0.1rem 0 0.3rem 1rem;
margin-top: 0.1rem;
border-left: 2px solid var(--line-dark);
}
.mobile-sub--deep a {
font-size: var(--fs-md);
color: var(--sage);
opacity: 0.92;
}
.mobile-menu .btn { margin-top: 1.5rem; }
body.menu-open { overflow: hidden; }
/* --------------------------------------------------------------------------
5. Buttons
-------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
padding: 0.72rem 1.5rem;
border: 1px solid transparent;
/* R211 — Admin → Styles → Buttons. Unset keeps the shipped pill; the
token is only written when the merchant changes the shape. */
border-radius: var(--nw-btn-radius, 999px);
font-weight: 600;
font-size: var(--fs-sm);
letter-spacing: 0.01em;
line-height: 1.2;
text-align: center;
transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease),
background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.btn:active { transform: translateY(1px); }
.btn-primary {
background: var(--nw-btn-primary-bg, var(--amber));
color: var(--nw-btn-primary-fg, #fff);
box-shadow: 0 6px 18px rgba(201, 138, 61, 0.32);
/* the glow follows the button, not the old amber, once one is chosen */
box-shadow: 0 6px 18px color-mix(in srgb, var(--nw-btn-primary-bg, var(--amber)) 32%, transparent);
}
.btn-primary:hover {
background: var(--nw-btn-primary-hover, var(--amber-600));
box-shadow: 0 10px 26px rgba(201, 138, 61, 0.4);
box-shadow: 0 10px 26px color-mix(in srgb, var(--nw-btn-primary-hover, var(--amber-600)) 40%, transparent);
transform: translateY(-2px);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #fff;
border-color: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(6px);
}
.btn-secondary:hover { background: rgba(255, 255, 255, 0.2); transform: translateY(-2px); }
.btn-outline {
background: transparent;
color: var(--nw-btn-outline-fg, var(--forest-800));
border-color: var(--nw-btn-outline-border, var(--forest-600));
}
.btn-outline:hover {
background: var(--nw-btn-outline-hover-bg, var(--forest-800));
color: var(--nw-btn-outline-hover-fg, #fff);
transform: translateY(-2px);
}
.btn-text {
background: none;
border: none;
padding: 0.4rem 0;
color: var(--amber-600);
font-weight: 600;
}
.btn-text:hover { text-decoration: underline; }
.btn-large { padding: 0.95rem 2.1rem; font-size: var(--fs-md); }
.btn-block { width: 100%; }
.btn-sm { padding: 0.4rem 0.9rem; font-size: var(--fs-xs); }
.btn-danger {
background: transparent;
color: var(--nw-btn-danger-fg, var(--danger));
border-color: rgba(181, 64, 47, 0.4);
border-color: color-mix(in srgb, var(--nw-btn-danger-fg, var(--danger)) 40%, transparent);
}
.btn-danger:hover {
background: var(--nw-btn-danger-hover, var(--danger));
color: #fff;
}
.btn-paypal {
background: #ffc439;
color: #003087;
box-shadow: 0 6px 18px rgba(255, 196, 57, 0.32);
}
.btn-paypal:hover {
background: #f2ba36;
box-shadow: 0 10px 26px rgba(255, 196, 57, 0.4);
transform: translateY(-2px);
}
.btn-paypal:disabled { opacity: 0.7; cursor: not-allowed; transform: none; }
.btn-add {
background: var(--nw-btn-cta-bg, var(--forest-800));
color: var(--nw-btn-cta-fg, #fff);
padding: 0.6rem 1.1rem;
font-size: var(--fs-sm);
}
.btn-add:hover { background: var(--nw-btn-cta-hover, var(--amber)); transform: translateY(-2px); }
.btn-quick-add {
background: var(--nw-btn-icon-bg, var(--amber));
color: var(--nw-btn-icon-fg, #fff);
width: 42px;
height: 42px;
/* R211 — see --nw-btn-shape: only written when the merchant chose a
rounding, so the shipped square corner is untouched by a pill setting. */
border-radius: var(--nw-btn-shape, var(--radius-sm));
}
.btn-quick-add:hover { background: var(--nw-btn-icon-hover, var(--amber-600)); transform: translateY(-2px); }
/* --------------------------------------------------------------------------
6. Hero
-------------------------------------------------------------------------- */
.hero {
position: relative;
min-height: min(88vh, 780px);
display: flex;
align-items: center;
color: #fff;
overflow: hidden;
}
.hero-media, .hero-media img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* Background video or iframe (added in the admin Site settings). Sized to
cover the hero area the same way as the image fallback. */
.hero-media .hero-bg-video {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.hero-media .hero-bg-iframe {
position: absolute;
top: 50%;
left: 50%;
width: 177.77vh; /* 16:9 cover at viewport height */
height: 56.25vw; /* 16:9 cover at viewport width */
min-width: 100%;
min-height: 100%;
transform: translate(-50%, -50%);
pointer-events: none;
border: 0;
}
.hero.has-video .hero-overlay {
/* When a background video is active the overlay needs to be slightly heavier
so the text remains readable regardless of the footage. */
background:
linear-gradient(180deg, rgba(22, 27, 22, 0.55) 0%, rgba(22, 27, 22, 0.25) 40%, rgba(22, 27, 22, 0.9) 100%);
}
.hero-overlay {
position: absolute;
inset: 0;
background:
linear-gradient(180deg, rgba(22, 27, 22, 0.15) 0%, rgba(22, 27, 22, 0.05) 40%, rgba(22, 27, 22, 0.85) 100%),
linear-gradient(90deg, rgba(22, 27, 22, 0.55) 0%, transparent 60%);
}
.hero-content {
position: relative;
z-index: 2;
padding-block: clamp(2rem, 6vh, 4rem);
/* R115e — this box is a full-frame column sitting above the pictures
(z-index 2 over the deck's 1), and it carries nothing interactive of its
own: the buttons live in `.hero-text`, which sets `pointer-events` back to
auto on itself. Without this line the column hands every hovering pointer
to whichever element is under it, so a hero whose content is centred and a
hero whose content is at the left produce completely different results:
`mouseenter` on the hero fires once in the second case and continuously —
enter/leave/enter, each pair a real crossing between text, buttons and the
bare panel — in the first. The rotation pauses and resumes on that pair,
so whether the hero kept moving while the pointer rested depended on where
the merchant's content happened to sit. */
pointer-events: none;
}
/* The text block sits at the content column's left edge (aligned with the rest
of the page), never flush against the viewport edge, and never exceeds
900px in width.
R101 — it also sits on a frosted-glass panel. The picture behind the hero is
whatever the merchant uploaded (or the slideshow, or a video), so the words
cannot assume the photograph is calm exactly where they land: a bright sky,
a sunlit clearing or a busy treeline used to run straight through the
headline. The panel uses the same ink and the same blur-and-saturate frost
as the sticky navigation bar, just a great deal fainter, so the two still
read as one system rather than two unrelated pieces of chrome.
R101b — the merchant asked for this panel to be a whisper, not a slab, so
the ink is now 0.10. At that alpha the panel no longer carries WCAG
contrast, and this is a deliberate trade-off, not an oversight: over a
pure-white photograph white body copy measures 1.22:1, body copy holds AA
(4.5:1) only while the photo behind stays at or below roughly level 128/255,
and the headline's large-text floor (3:1) only to about 162/255. Brighter
photos rely on the frost smearing the detail flat and on the text shadow
below keeping the glyph edges crisp. Should the panel ever need to carry
contrast again, the measured ladder is: 0.35 → 2.20:1, 0.46 → 3:1
(headline only), 0.58 → 4.5:1 (full AA).
The hairline is back at 1px while the ink stays at 0.10: at this alpha the
pane is almost invisible against a dark photograph, and the edge is what
tells the eye a panel is there at all. It adds no contrast — a 14% white
line is decoration — so it does not change the numbers above.
R103 — the ink and the frost moved into three custom properties so the
merchant can tune the panel from Admin → Styles instead of editing this
file. The starting values are exactly the R101b ones, so every existing
store looks identical until somebody moves a slider. The properties are
declared in :root above; see --hero-ink / --hero-blur / --hero-saturate. */
.hero-text {
/* R217 — the pane's box is the merchant's now: a max width on a desktop
screen and an optional minimum height. Both arrive as custom properties
written by Admin → Styles; the fallbacks are the shipped 900px and the
shipped "as tall as the copy". min-height: 0 is a no-op, so a store that
never moves the sliders renders exactly the R216 panel. */
max-width: var(--hero-panel-w, 900px);
min-height: var(--hero-panel-h, 0px);
/* Vertically centring only does anything once a height is set — at
min-height 0 the box is its content, so the shipped look is untouched. */
display: flex;
flex-direction: column;
justify-content: center;
padding: clamp(1.4rem, 3vw, 2.5rem);
border-radius: var(--radius);
/* R115e — `.hero-content` now passes the pointer through (see above), so the
panel takes it back: its headline is selectable and its buttons are real
links. The glass effect itself needs nothing from the pointer. */
pointer-events: auto;
background: rgba(22, 27, 22, var(--hero-ink, 0.10));
backdrop-filter: blur(var(--hero-blur, 10px)) saturate(var(--hero-saturate, 125%));
-webkit-backdrop-filter: blur(var(--hero-blur, 10px)) saturate(var(--hero-saturate, 125%));
border: 1px solid rgba(255, 255, 255, 0.14);
box-shadow: 0 18px 50px rgba(10, 14, 10, 0.30);
}
/* R103 — a panel that is asked to carry contrast again needs an edge that is
visible on paper-white as well as on a dark photograph. The alpha is what
decides that, so the hairline follows it: below 0.30 the pane is a whisper
and the 14% line above is enough to hint at it; at or above 0.30 the pane is
a surface, and 14% white would read as a gap rather than an edge. The
attribute is set by app/header.php only when the merchant moved the slider
past that point, so the default page carries no attribute at all. */
.hero-text[data-hero-panel="solid"] {
border-color: rgba(255, 255, 255, 0.28);
}
/* R213 — where the pane sits inside the content column.
*
* Left is the shipped position and needs no rule: the pane is a block child of
* the column, so it already starts at the column's left edge. Centre and right
* are that same block pushed across by an auto margin — which means the offset
* follows the column's real width, padding and the pane's own max-width with no
* magic numbers, and nothing has to be special-cased at any breakpoint (on a
* phone the pane fills the column, so all three positions land in the same
* place, which is the only sane answer at that width).
*
* The column itself is not centred or moved: only the pane is. Keeping the
* column in place is what lets "right" mean "the right end of the page grid"
* rather than "the right end of the viewport", so the pane stays aligned with
* the header, the product grid and the footer at every width. */
.hero-content.is-align-center .hero-text { margin-inline: auto; }
.hero-content.is-align-right .hero-text { margin-inline-start: auto; }
/* R213 — the panel switched off. The `` is still in the document (see
* index.php) but out of sight; `.visually-hidden` already does that, so there
* is nothing to add here. This comment exists so the next person reading the
* hero rules does not go looking for a `.is-panel-hidden` selector that was
* deliberately not written. */
/* R101 — the glyph-edge shadow. Since R101b the panel is too faint to carry
contrast itself, so this shadow is what actually keeps the copy readable
over a bright photograph — it is the defence, not a second line of it.
Scoped to the hero: `.eyebrow` is also used on account.php and the account
sidebar, which sit on cream paper where a shadow would be nothing but dirt. */
.hero .eyebrow,
.hero h1,
.hero-lead {
text-shadow: 0 1px 3px rgba(10, 14, 10, 0.55);
}
.eyebrow {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
color: var(--amber);
margin: 0 0 1rem;
}
.hero h1 {
color: #fff;
font-size: var(--fs-3xl);
font-weight: 600;
margin-bottom: 0.9rem;
}
.hero-lead {
color: rgba(255, 255, 255, 0.85);
font-size: var(--fs-lg);
max-width: 34em;
margin-bottom: 2rem;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.9rem; }
/* --------------------------------------------------------------------------
7. Trust bar
-------------------------------------------------------------------------- */
.trust-bar {
background: var(--forest-800);
color: var(--sage);
}
.trust-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
padding-block: 1.6rem;
}
.trust-item {
display: flex;
align-items: center;
gap: 0.7rem;
font-size: var(--fs-sm);
font-weight: 500;
}
.trust-item svg { flex: none; color: var(--amber); }
/* --------------------------------------------------------------------------
8. Section scaffolding
-------------------------------------------------------------------------- */
.section-header { text-align: center; margin-bottom: 2.75rem; }
.section-header h2 { font-size: var(--fs-2xl); margin-bottom: 0; }
.categories, .featured, .craft, .testimonials, .listing {
padding-block: clamp(3rem, 7vw, 5.5rem);
}
.categories { background: var(--paper); }
/* Editable content pages (Support, Shipping & Returns, Privacy Policy, etc.)
R47 — magazine-grade typography: ruled section headings, generous leading
and amber list markers, so an HTML page composed in the rich editor lands
looking deliberate and well organised. R216 dropped the image frame: the
editor now inserts a whole batch as one flush run, and a merchant who wants
breathing room presses Enter. */
.content-page {
max-width: 54em;
margin-inline: auto;
font-size: var(--fs-md);
}
.content-page > :first-child { margin-top: 0; }
.content-page h2 {
color: var(--forest-900);
font-size: var(--fs-xl);
line-height: 1.25;
margin: 2.4rem 0 0.8rem;
}
.content-page h3 {
color: var(--forest-800);
font-size: var(--fs-lg);
line-height: 1.3;
margin: 2.2rem 0 0.75rem;
padding-top: 1.35rem;
border-top: 1px solid var(--line);
}
.content-page h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
/* R216 — authored rich text no longer invents vertical space. See the matching
rule for .product-description below and .rich-area in admin.css: a stack of
pictures sits flush and a blank line appears only where Enter was pressed. */
.content-page p { color: var(--ink-soft); line-height: 1.85; margin: 0; }
.content-page .lead { color: var(--ink); font-size: var(--fs-lg); }
.content-page ul, .content-page ol {
margin: 0 0 1.25rem 1.5rem;
padding: 0;
color: var(--ink-soft);
line-height: 1.8;
}
.content-page ul { list-style: disc; }
.content-page ol { list-style: decimal; }
.content-page li { margin-bottom: 0.45rem; padding-left: 0.2rem; }
.content-page li::marker { color: var(--amber-600); font-weight: 700; }
.content-page strong { color: var(--forest-800); font-weight: 600; }
.content-page a {
color: var(--amber-600);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
}
.content-page a:hover { color: var(--forest-800); }
.content-page img {
display: block;
max-width: 100%;
height: auto;
margin: 0;
border-radius: 0;
box-shadow: none;
}
.content-page blockquote {
margin: 1.4rem 0;
padding: 0.85rem 1.3rem;
border-left: 3px solid var(--amber);
background: var(--paper);
border-radius: 0 var(--radius) var(--radius) 0;
color: var(--ink-soft);
font-style: italic;
}
.content-page blockquote p:last-child { margin-bottom: 0; }
.content-page table {
width: 100%;
border-collapse: collapse;
margin: 1.4rem 0;
font-size: var(--fs-sm);
}
.content-page th, .content-page td {
border: 1px solid var(--line);
padding: 0.55rem 0.8rem;
text-align: left;
color: var(--ink-soft);
}
.content-page th { background: var(--sand); color: var(--forest-800); font-weight: 600; }
.content-page hr { border: 0; border-top: 1px solid var(--line); margin: 2.2rem 0; }
/* R48 — policy-page presentation: a "last updated" line in the hero, numbered
sections (pure CSS counters, so admin-authored HTML needs no markup) and a
sticky "On this page" index that main.js builds from the article's own
headings. It only opens on wide screens once JS confirms enough sections,
so narrow viewports keep the plain article they had before. Everything is
variable-driven, so the bundled themes inherit it unchanged. */
.hero-meta {
color: var(--sage);
font-size: var(--fs-sm);
letter-spacing: 0.02em;
margin: 0.85rem 0 0;
display: flex;
align-items: center;
gap: 0.55rem;
}
.hero-meta::before {
content: "";
flex: none;
width: 1.7rem;
height: 1px;
background: var(--amber);
}
.content-page h2, .content-page h3 { scroll-margin-top: calc(var(--header-h) + 1.75rem); }
.content-page-numbered { counter-reset: nw-section; }
.content-page-numbered h3 { counter-increment: nw-section; }
.content-page-numbered h3::before {
content: counter(nw-section, decimal-leading-zero);
display: block;
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.18em;
color: var(--amber-600);
margin-bottom: 0.3rem;
}
.page-toc { display: none; }
.page-toc-title {
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 0.85rem;
}
.page-toc-nav a {
display: block;
padding: 0.4rem 0 0.4rem 0.95rem;
border-left: 2px solid var(--line);
color: var(--ink-soft);
font-size: var(--fs-sm);
line-height: 1.45;
transition: color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.page-toc-nav a:hover { color: var(--forest-800); }
.page-toc-nav a.is-active {
color: var(--amber-600);
border-left-color: var(--amber);
font-weight: 600;
}
.page-toc-num {
margin-right: 0.55rem;
font-size: var(--fs-xs);
font-weight: 600;
color: var(--muted);
}
.page-toc-nav a.is-active .page-toc-num { color: var(--amber-600); }
@media (min-width: 1024px) {
.content-wrap.has-toc.toc-ready {
display: grid;
grid-template-columns: minmax(0, 1fr) 15.5rem;
gap: 4rem;
align-items: start;
}
.content-wrap.has-toc.toc-ready .page-toc {
display: block;
position: sticky;
top: calc(var(--header-h) + 2.5rem);
max-height: calc(100vh - var(--header-h) - 4.5rem);
overflow: auto;
padding-top: 0.4rem;
}
}
.section-actions { text-align: center; margin-top: 2.75rem; }
/* --------------------------------------------------------------------------
9. Shop by Category — uniform image tiles
-------------------------------------------------------------------------- */
.category-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.5rem;
}
.category-card {
position: relative;
display: block;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
isolation: isolate;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.category-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-lg);
}
/* Uniform size: every category image is a fixed 1:1 square, cropped to fill. */
.category-card img {
width: 100%;
aspect-ratio: 1 / 1;
object-fit: cover;
transition: transform 0.6s var(--ease);
}
.category-card:hover img { transform: scale(1.06); }
/* R210 — a category with no card picture yet. A typographic tile on the
brand's own greens, at exactly the same 1:1 footprint as a photograph, so
the grid keeps its rhythm whether or not every shelf has a picture. */
.category-card--empty {
aspect-ratio: 1 / 1;
display: grid;
place-items: center;
background: linear-gradient(140deg, var(--forest-800) 0%, var(--forest-700) 55%, #4a5a45 100%);
}
.category-initial {
position: relative;
z-index: 1;
font-family: var(--font-display);
font-size: var(--fs-3xl);
font-weight: 600;
color: rgba(255, 255, 255, 0.7);
letter-spacing: 0.02em;
transform: translateY(-0.6rem);
}
.category-card::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(16, 20, 16, 0.85) 100%);
}
.category-title {
position: absolute;
left: 1.25rem;
bottom: 2.1rem;
z-index: 2;
font-family: var(--font-display);
font-size: var(--fs-xl);
font-weight: 600;
color: #fff;
transition: bottom 0.3s var(--ease);
}
.category-count {
position: absolute;
left: 1.25rem;
bottom: 1.1rem;
z-index: 2;
color: var(--sage);
font-size: var(--fs-xs);
letter-spacing: 0.04em;
text-transform: uppercase;
opacity: 0;
transform: translateY(6px);
transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.category-card:hover .category-count { opacity: 1; transform: translateY(0); }
.category-card:hover .category-title { bottom: 2.6rem; }
/* --------------------------------------------------------------------------
10. Product grid & cards
-------------------------------------------------------------------------- */
.product-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1.75rem;
}
/* Homepage featured products: fewer columns = larger, more prominent cards. */
.product-grid--featured {
grid-template-columns: repeat(3, 1fr);
gap: 2.25rem;
}
.product-grid--featured .product-info { padding: 1.5rem; }
.product-grid--featured .product-info h3 { font-size: var(--fs-xl); }
.product-grid--featured .product-price { font-size: var(--fs-xl); }
.product-grid--featured .btn-add { padding: 0.72rem 1.3rem; font-size: var(--fs-sm); }
.product-card {
display: flex;
flex-direction: column;
background: var(--paper);
border-radius: var(--radius);
border: 1px solid var(--line);
overflow: hidden;
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.product-card:hover {
transform: translateY(-6px);
box-shadow: var(--shadow-md);
}
.product-image {
position: relative;
display: block;
overflow: hidden;
/* R138d — listing thumbnails sit on pure white like the detail gallery.
The tile is now lighter than the card body below it, so a single hairline
at its foot keeps the two areas legible instead of letting them bleed. */
background: #fff;
border-bottom: 1px solid var(--line);
}
.product-image img {
width: 100%;
aspect-ratio: 1 / 1;
/* R138 — product photos are not always square: show the whole picture
(letterboxed on the card's white tile) instead of cropping it. */
object-fit: contain;
transition: transform 0.6s var(--ease);
}
.product-card:hover .product-image img { transform: scale(1.05); }
.badge {
position: absolute;
top: 0.9rem;
left: 0.9rem;
padding: 0.25rem 0.7rem;
background: var(--amber);
color: #fff;
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
}
.badge-soldout { background: var(--ink-soft); }
.product-info { display: flex; flex-direction: column; flex: 1; padding: 1.15rem; }
.product-cat {
font-size: var(--fs-2xs);
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--muted);
margin: 0 0 0.3rem;
}
.product-info h3 { font-size: var(--fs-lg); margin-bottom: 0.35rem; }
.product-info h3 a:hover { color: var(--amber-600); }
.product-price-row {
display: flex;
align-items: baseline;
gap: 0.6rem;
margin-bottom: 1rem;
}
.product-price { font-size: var(--fs-lg); font-weight: 700; color: var(--price); }
.product-compare { font-size: var(--fs-sm); color: var(--muted); text-decoration: line-through; }
/* Inline "Save $X" pill on the product detail page. Unlike the absolutely
positioned `.badge` (used on product-card images), this stays in normal
flow inside the price row so it never overlaps the title. */
.save-badge {
display: inline-flex;
align-items: center;
padding: 0.22rem 0.65rem;
background: var(--amber);
color: #fff;
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
border-radius: 999px;
white-space: nowrap;
}
.product-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.6rem;
margin-top: auto;
}
/* R211 — Admin → Styles → Product card. With one button off, the remaining
one takes the space it left; with both off there is no footer at all and the
card closes up to its own height instead of holding an empty strip. */
.product-footer.is-details-only .btn-add { flex: 1 1 auto; }
.product-footer.is-actions-end { justify-content: flex-end; }
.product-card.is-no-cta .product-price-row { margin-bottom: 0; }
.product-card.is-no-cta .product-info { padding-bottom: 1.15rem; }
/* --------------------------------------------------------------------------
11. Craft section
-------------------------------------------------------------------------- */
.craft { background: var(--sand); }
.craft-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: center;
}
.craft-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow-md); }
.craft-media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.craft-content h2 { font-size: var(--fs-2xl); }
.checklist { margin: 1.4rem 0 1.8rem; }
.checklist li {
position: relative;
padding-left: 1.7rem;
margin-bottom: 0.55rem;
color: var(--ink-soft);
}
.checklist li::before {
content: '✓';
position: absolute;
left: 0;
color: var(--amber-600);
font-weight: 700;
}
/* --------------------------------------------------------------------------
12. Testimonials
-------------------------------------------------------------------------- */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.75rem;
}
.testimonial-grid blockquote {
margin: 0;
padding: 1.9rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
transition: transform 0.3s var(--ease), box-shadow 0.3s var(--ease);
}
.testimonial-grid blockquote:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.testimonial-grid blockquote p {
font-family: var(--font-display);
font-size: var(--fs-lg);
line-height: 1.45;
font-style: italic;
color: var(--ink);
margin-bottom: 1.4rem;
}
.testimonial-grid cite { display: block; font-style: normal; font-weight: 700; color: var(--forest-800); }
.testimonial-grid .role { display: block; font-size: var(--fs-xs); color: var(--muted); margin-top: 0.15rem; }
/* --------------------------------------------------------------------------
13. Page hero & breadcrumb (inner pages)
-------------------------------------------------------------------------- */
.page-hero {
position: relative;
background-color: var(--forest-800);
background-image:
linear-gradient(180deg, rgba(22, 27, 22, 0.84) 0%, rgba(22, 27, 22, 0.68) 100%),
url('../images/hero.webp');
background-size: cover;
background-position: center;
color: #fff;
padding-block: clamp(3.4rem, 6.5vw, 5.2rem) clamp(2.4rem, 4.5vw, 4rem);
}
.page-hero h1 {
color: #fff;
font-size: var(--fs-3xl);
margin-bottom: 0.2rem;
text-shadow: 0 1px 10px rgba(0, 0, 0, 0.4);
}
.page-hero .breadcrumb a { color: rgba(255, 255, 255, 0.72); }
.page-hero .breadcrumb a:hover { color: var(--amber); }
.page-lead { color: var(--sage); max-width: 46em; margin: 0.6rem 0 0; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3); }
.breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-xs);
color: var(--sage);
margin-bottom: 1.4rem;
}
.breadcrumb a { color: var(--sage); transition: color 0.2s var(--ease); }
.breadcrumb a:hover { color: var(--amber); }
.breadcrumb .current { color: #fff; font-weight: 500; }
.breadcrumb-top {
padding-top: 2.2rem;
color: var(--muted);
margin-bottom: 0.4rem;
}
.breadcrumb-top a, .breadcrumb-top .current { color: var(--muted); }
.breadcrumb-top a:hover { color: var(--amber-600); }
.breadcrumb-top .current { color: var(--ink); font-weight: 600; }
/* --------------------------------------------------------------------------
14. Subcategory chips
-------------------------------------------------------------------------- */
.subcat-row {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
margin-bottom: 2.25rem;
}
.subcat-chip {
padding: 0.45rem 1.1rem;
border: 1px solid var(--line);
border-radius: 999px;
background: var(--paper);
color: var(--ink-soft);
font-size: var(--fs-sm);
font-weight: 500;
transition: background 0.2s var(--ease), color 0.2s var(--ease), border-color 0.2s var(--ease);
}
.subcat-chip:hover, .subcat-chip.active {
background: var(--forest-800);
color: #fff;
border-color: var(--forest-800);
}
/* --------------------------------------------------------------------------
15. Product detail
-------------------------------------------------------------------------- */
.product-detail { padding-top: 2rem; padding-bottom: clamp(2.5rem, 6vw, 5rem); }
.product-detail-grid {
display: grid;
grid-template-columns: 1.05fr 1fr;
gap: clamp(2rem, 5vw, 4.5rem);
align-items: start;
}
.product-gallery {
border-radius: var(--radius);
overflow: hidden;
border: 1px solid var(--line);
background: #fff;
}
.gallery-main {
position: relative;
overflow: hidden;
background: #fff;
/* R79 — vertical scrolling with a finger on the photo keeps working, but
the browser must not claim the pinch (page zoom): the JS pinch on the
photo needs those moves untouched. */
touch-action: pan-y;
}
.gallery-main img {
width: 100%;
aspect-ratio: 1 / 1;
/* R138 — non-square product photos must show in full, never cropped. */
object-fit: contain;
transition: opacity 0.25s var(--ease), transform 0.25s var(--ease);
}
.gallery-main img.is-switching { opacity: 0.35; }
/* R155 — the slide changes by cross-fading a second copy over the first, so
there is never a blank frame between two pictures (the old code dimmed the
single
) is the one and
only way to open a blank line. */
.product-description p { margin: 0; }
/* R186 — the rich-text "emphasis" preset.
*
* The editor's B button is bold in the body colour, which in a long
* description is easy to skim past: the merchant ends up bolding a whole
* sentence to make one clause stand out. This preset is the middle volume —
* bold AND in the store's own accent (#a96f2a, the same tone the buttons and
* links use), so a highlighted phrase reads as highlighted without shouting.
*
* Why a class: R186 shipped before the editor had a colour picker, and a
* class keeps this one-click preset tied to the store's own accent no matter
* which theme is active. R216 added a restricted `style` attribute for the
* merchant's OWN colour/font choices (nw_sanitize_rich_style() rebuilds it
* from a closed allow-list), but the preset still deliberately uses a class —
* a hand-picked colour should follow the merchant, a brand accent should
* follow the theme.
*
* The two-element selectors are load-bearing: `.content-page strong` and the
* Noir theme's `.product-description strong` both set their own colour, and
* both are (0,1,1). `.content-page .nw-accent` is (0,2,0) and wins without
* `!important`, so the accent stays the accent in either theme.
*
* `` and `` both work:
* the editor writes the first, and a merchant typing the source view may write
* either. */
.nw-accent,
.product-description .nw-accent,
.content-page .nw-accent,
.rich-area .nw-accent {
color: #a96f2a;
font-weight: 700;
}
/* R47 — the description now accepts admin-authored HTML from the rich text
editor, so headings, lists and inline images need real styles here too. */
.product-description h3 {
color: var(--forest-800);
font-size: var(--fs-lg);
margin: 1.5rem 0 0.55rem;
}
.product-description ul, .product-description ol {
margin: 0 0 1rem 1.4rem;
padding: 0;
color: var(--ink-soft);
}
.product-description ul { list-style: disc; }
.product-description ol { list-style: decimal; }
.product-description li { margin-bottom: 0.35rem; }
.product-description li::marker { color: var(--amber-600); font-weight: 700; }
/* R216 — flush stack. The old 1rem margins, radius and shadow drew a visible
seam between consecutive pictures even when the editor had inserted them
with no separator at all. Keep display:block so each full-width picture
starts its own line without relying on a so it stays tucked away until needed.
Public order page: one-click "Add to my account" under the order card. */
.guest-order-claim { margin-top: 1.5rem; }
.guest-order-claim .form-note { margin-bottom: 1.1rem; }
.guest-order-claim .form-note:last-child { margin-bottom: 0; }
.order-claim-form { margin-top: 0.85rem; }
.order-claim-form .btn { margin: 0; }
@media (max-width: 560px) {
.checkout-account-note { padding: 0.9rem 1rem; }
.order-public-actions .btn { width: 100%; }
}
/* R42 — inline notice shown by the Buy Now form (e.g. missing options). */
.buy-notice {
margin: 0 0 1rem;
padding: 0.7rem 0.9rem;
border: 1px solid rgba(201, 138, 61, 0.35);
border-radius: 8px;
background: rgba(201, 138, 61, 0.08);
color: var(--ink, #2b2b26);
font-size: var(--fs-sm);
}
/* R42 — `display:flex` on form rows used to override the [hidden] attribute,
so JS-toggled fields stayed visible. Make [hidden] win. */
[hidden] { display: none !important; }
/* ==========================================================================
R52 — list chrome for the member-side lists (My Messages): the "per page"
selector, pagination, sortable headers and the bulk-action bar. Mirrors
the admin panel components so both surfaces behave the same way.
========================================================================== */
.list-toolbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.9rem;
margin: 0 0 0.9rem;
}
.list-per-page {
display: inline-flex;
align-items: center;
gap: 0.5rem;
margin: 0;
font-size: var(--fs-xs);
color: var(--muted);
}
.list-per-page-label { font-weight: 600; color: var(--ink-soft); }
.list-per-page select {
padding: 0.42rem 0.6rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font: inherit;
font-size: var(--fs-xs);
cursor: pointer;
}
.list-per-page select:focus { outline: 2px solid var(--amber); outline-offset: 1px; }
.list-sort {
color: inherit;
text-decoration: none;
white-space: nowrap;
}
.list-sort:hover { color: var(--amber-600); }
.list-sort.is-active { color: var(--amber-600); }
.list-sort-arrow { margin-left: 0.25rem; font-size: 0.8em; }
.list-pager {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 0.6rem 1rem;
margin: 1rem 0 0;
font-size: var(--fs-xs);
}
.list-pager-info { color: var(--muted); }
.list-pager-info strong { color: var(--ink); }
.list-pager-pages { display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem; }
.list-pager-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 2.1rem;
height: 2.1rem;
padding: 0 0.65rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink-soft);
text-decoration: none;
font-weight: 600;
}
.list-pager-btn:hover { border-color: var(--amber); color: var(--amber-600); }
.list-pager-btn.is-active { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
.list-pager-btn.is-disabled { opacity: 0.45; cursor: not-allowed; }
.list-pager-gap { color: var(--muted); padding: 0 0.15rem; }
.bulk-bar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.9rem;
padding: 0.7rem 0.9rem;
margin: 0 0 0.9rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--sand);
font-size: var(--fs-xs);
}
.bulk-select-all { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; }
.bulk-count { color: var(--muted); }
.bulk-count strong { color: var(--ink); }
.bulk-spacer { flex: 1 1 auto; }
.bulk-action-label { color: var(--muted); font-weight: 600; }
.bulk-hint { flex-basis: 100%; color: var(--muted); font-size: var(--fs-xs); }
.bulk-check { width: 1rem; height: 1rem; accent-color: var(--amber); cursor: pointer; }
.mail-row.is-selected { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(201, 138, 61, 0.12); }
.mail-row-select { display: inline-flex; align-items: center; padding-right: 0.6rem; }
@media (max-width: 640px) {
.bulk-bar { align-items: stretch; }
.bulk-spacer { display: none; }
.bulk-bar select { flex: 1 1 auto; }
.list-pager { justify-content: center; }
.list-pager-info { flex-basis: 100%; text-align: center; }
}
/* R52 — filter chips + sort links on the member-side list pages (the admin
panel has the same components in admin.css).
R132 — the customer asked for rectangular chips: 3px corners instead of
the full pill, and tighter horizontal padding, so a row of filters takes
noticeably less width and reads as a control strip rather than a row of
buttons. Counts follow the same 3px shape so a chip is one object. */
.filter-chip {
display: inline-flex;
align-items: center;
gap: 0.45rem;
padding: 0.38rem 0.7rem;
border-radius: 3px;
background: var(--sand);
color: var(--ink-soft);
font-size: var(--fs-xs);
font-weight: 500;
border: 1px solid transparent;
text-decoration: none;
transition: background 0.15s ease, color 0.15s ease;
}
.filter-chip:hover { background: var(--cream); color: var(--ink); }
.filter-chip.is-active { background: var(--forest-800); color: #fff; }
.filter-chip--accent:not(.is-active) { background: rgba(201, 138, 61, 0.14); color: var(--amber-600); }
.filter-chip--accent.is-active { background: var(--amber); color: #fff; }
.filter-chip-count {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.4rem;
height: 1.35rem;
padding: 0 0.35rem;
border-radius: 3px;
background: rgba(122, 118, 105, 0.16);
font-size: var(--fs-2xs);
font-weight: 700;
}
.filter-chip.is-active .filter-chip-count,
.filter-chip--accent.is-active .filter-chip-count { background: rgba(255, 255, 255, 0.22); }
.admin-filter-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; }
.record-sort-group {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 0.5rem;
font-size: var(--fs-xs);
}
.record-sort-label { color: var(--muted); font-weight: 600; }
.record-sort-group .list-sort {
padding: 0.32rem 0.7rem;
border: 1px solid var(--line);
/* R132 — the sort switches are filter tags too: same 3px rectangle as the
chips above, so the whole member-panel control strip reads as one family. */
border-radius: 3px;
background: var(--paper);
color: var(--ink-soft);
font-weight: 500;
}
.record-sort-group .list-sort:hover { border-color: var(--amber); color: var(--amber-600); }
.record-sort-group .list-sort.is-active { background: var(--forest-800); border-color: var(--forest-800); color: #fff; }
a.mail-subject { color: inherit; text-decoration: none; }
a.mail-subject:hover { color: var(--amber-600); }
.mail-order-ref { color: var(--muted); font-size: var(--fs-xs); margin-left: 0.5rem; }
.mail-order-ref strong { color: var(--ink-soft); }
.mail-row-select { display: inline-flex; align-items: center; margin-right: 0.6rem; vertical-align: middle; }
/* ==========================================================================
R52 — photo upload queue + photo viewer. Shared by the member pages and
the admin panel (identical component in admin.css).
========================================================================== */
.upload-drop {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.6rem 0.9rem;
padding: 0.85rem 0.95rem;
border: 1.5px dashed var(--line);
border-radius: var(--radius-sm);
background: var(--cream);
transition: border-color 0.15s ease, background 0.15s ease;
}
.upload-drop.is-dragover { border-color: var(--amber); background: rgba(201, 138, 61, 0.08); }
.upload-input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.upload-add {
display: inline-flex;
align-items: center;
gap: 0.4rem;
padding: 0.5rem 1rem;
border: 1px solid var(--amber);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--amber-600);
font-weight: 600;
font-size: var(--fs-sm);
cursor: pointer;
user-select: none;
}
.upload-add:hover { background: rgba(201, 138, 61, 0.1); }
.upload-add.is-disabled { opacity: 0.5; cursor: not-allowed; }
.upload-meta { color: var(--muted); font-size: var(--fs-xs); }
.upload-meta [data-upload-counter] { font-weight: 700; color: var(--ink-soft); }
.msg-upload-preview { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 0.7rem; }
.msg-upload-preview:empty { margin-top: 0; }
.upload-thumb {
position: relative;
width: 84px;
height: 84px;
margin: 0;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
overflow: hidden;
background: var(--paper);
}
.upload-thumb-view { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; }
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.upload-thumb-tools {
position: absolute;
top: 0; right: 0;
display: flex;
gap: 2px;
padding: 3px;
}
.upload-thumb-btn {
width: 22px; height: 22px;
display: inline-flex; align-items: center; justify-content: center;
padding: 0; border: 0; border-radius: 4px;
background: rgba(20, 26, 20, 0.72);
color: #fff;
font-size: var(--fs-xs); line-height: 1;
cursor: pointer;
}
.upload-thumb-btn:hover { background: var(--amber-600); }
.upload-thumb-remove:hover { background: var(--danger); }
/* Photo viewer overlay (z-index above the header, below the cookie bar's
toast layer is not required — it is a modal, so it sits on top). */
.photo-viewer { position: fixed; inset: 0; z-index: 1200; display: none; }
.photo-viewer.is-open { display: block; }
.photo-viewer-backdrop { position: absolute; inset: 0; background: rgba(12, 15, 12, 0.88); }
.photo-viewer-inner {
position: relative;
width: 100%; height: 100%;
display: flex; align-items: center; justify-content: center;
padding: 3.2rem 3.6rem;
}
/* R163 — the zoom stage: the picture and the expired panel share one flex
centre, and the gestures (wheel / pinch / drag-pan) live on this box. */
.photo-viewer-stage {
flex: 1;
align-self: stretch; /* R163 — fill the inner's height, or the img's
max-height:100% resolves against an auto box and
the picture never fills the viewer */
min-width: 0; min-height: 0;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
}
.photo-viewer-img {
max-width: 100%;
max-height: 100%;
object-fit: contain;
border-radius: 6px;
box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
background: #fff;
touch-action: none; /* R163 — the stage owns every touch gesture */
cursor: grab;
user-select: none;
-webkit-user-select: none;
transition: transform 0.16s ease-out, opacity 0.18s ease;
}
.photo-viewer-img.is-pinching { transition: none; } /* fingers lead, CSS must not lag */
.photo-viewer-img.is-loading { opacity: 0; } /* R163 — fade a stepped photo in on load */
.photo-viewer-stage.is-dragging { cursor: grabbing; }
/* R155 — the overlay's "this photo has expired" state. Same box, same
typography as the rest of the viewer, no broken-image icon anywhere. */
.photo-viewer-expired {
display: none;
max-width: min(92vw, 460px);
padding: 2rem 1.6rem;
border-radius: 10px;
background: rgba(255, 255, 255, 0.08);
border: 1px solid rgba(255, 255, 255, 0.18);
color: #f4f1ea;
text-align: center;
}
.photo-viewer-expired h3 { margin: 0 0 0.5rem; font-size: var(--fs-lg); }
.photo-viewer-expired p { margin: 0; font-size: var(--fs-sm); line-height: 1.5; color: rgba(255, 255, 255, 0.78); }
.photo-viewer.is-expired .photo-viewer-img,
.photo-viewer.is-expired .photo-viewer-nav,
.photo-viewer.is-expired .photo-viewer-open,
.photo-viewer.is-expired .photo-viewer-counter { display: none; }
.photo-viewer.is-expired .photo-viewer-expired { display: block; }
.photo-viewer-close,
.photo-viewer-nav {
position: absolute;
border: 0;
background: rgba(255, 255, 255, 0.14);
color: #fff;
cursor: pointer;
border-radius: 999px;
display: inline-flex; align-items: center; justify-content: center;
}
.photo-viewer-close { top: 1rem; right: 1rem; width: 42px; height: 42px; font-size: var(--fs-xl); line-height: 1; }
.photo-viewer-nav { top: 50%; transform: translateY(-50%); width: 46px; height: 46px; font-size: var(--fs-2xl); line-height: 1; }
.photo-viewer-nav.pv-prev { left: 1rem; }
.photo-viewer-nav.pv-next { right: 1rem; }
.photo-viewer-close:hover, .photo-viewer-nav:hover { background: var(--amber-600); }
.photo-viewer-bar {
position: absolute;
bottom: 1.1rem; left: 0; right: 0;
display: flex; align-items: center; justify-content: center; gap: 1rem;
color: rgba(255, 255, 255, 0.85);
font-size: var(--fs-xs);
}
.photo-viewer-open { color: #fff; text-decoration: underline; }
body.photo-viewer-open { overflow: hidden; }
@media (max-width: 640px) {
.photo-viewer-inner { padding: 3.4rem 0.75rem; }
.photo-viewer-nav { width: 38px; height: 38px; font-size: var(--fs-xl); }
.photo-viewer-nav.pv-prev { left: 0.4rem; }
.photo-viewer-nav.pv-next { right: 0.4rem; }
}
/* ==========================================================================
R52 — conversation page: thread header, live indicator, field helpers.
========================================================================== */
.field .field-label,
.field-label {
display: block;
font-size: var(--fs-sm);
font-weight: 600;
color: var(--ink-soft);
margin-bottom: 0.35rem;
}
.field-warning {
margin: 0.5rem 0 0;
padding: 0.7rem 0.9rem;
border: 1px solid rgba(181, 64, 47, 0.3);
border-left: 3px solid var(--danger);
border-radius: var(--radius-sm);
background: rgba(181, 64, 47, 0.06);
color: var(--ink-soft);
font-size: var(--fs-xs);
line-height: 1.6;
}
.conversation-view { padding: 1.4rem 1.5rem; }
.conversation-subject { margin: 0 0 0.4rem; font-family: var(--font-display); font-size: var(--fs-xl); }
.mail-detail-body { display: flex; flex-direction: column; gap: 0.75rem; margin: 1rem 0 0; }
.conversation-view .msg-attachment { margin: 0.9rem 0 0; }
.conversation-view .message-reply-form { margin-top: 1.4rem; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.conversation-view .message-reply-form textarea {
width: 100%;
padding: 0.7rem 0.95rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font: inherit;
resize: vertical;
}
.conversation-view .compose-actions { margin-top: 1rem; }
.live-indicator {
display: flex;
align-items: center;
gap: 0.45rem;
margin: 0.9rem 0 0;
font-size: var(--fs-xs);
color: var(--muted);
}
.live-dot {
width: 8px;
height: 8px;
border-radius: 999px;
background: var(--success);
box-shadow: 0 0 0 0 rgba(63, 122, 74, 0.5);
animation: livePulse 2.2s infinite;
}
@keyframes livePulse {
0% { box-shadow: 0 0 0 0 rgba(63, 122, 74, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(63, 122, 74, 0); }
100% { box-shadow: 0 0 0 0 rgba(63, 122, 74, 0); }
}
@media (prefers-reduced-motion: reduce) {
.live-dot { animation: none; }
}
@media (max-width: 640px) {
.conversation-view { padding: 1.1rem 1rem; }
.conversation-subject { font-size: var(--fs-lg); }
}
/* ==========================================================================
R52 — order page after-sales: the order number is shown prominently and
the conversation sits under the order card.
========================================================================== */
.msg-images {
display: flex;
flex-wrap: wrap;
gap: 0.45rem;
margin-top: 0.5rem;
}
.msg-images a { display: block; line-height: 0; }
.msg-images img {
width: 92px;
height: 92px;
object-fit: cover;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper);
transition: transform 0.15s var(--ease), border-color 0.15s var(--ease);
}
.msg-images a:hover img { transform: translateY(-2px); border-color: var(--amber); }
.order-after-sales { margin-top: 2rem; }
.order-as-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
margin-bottom: 1rem;
}
.order-as-head h2 { margin: 0 0 0.35rem; font-family: var(--font-display); font-size: var(--fs-xl); }
.order-as-lede { margin: 0; color: var(--ink-soft); font-size: var(--fs-sm); line-height: 1.6; max-width: 62ch; }
.order-as-empty { margin: 0; color: var(--muted); font-size: var(--fs-sm); }
.order-as-form {
display: flex;
flex-direction: column;
gap: 1rem;
padding: 1.25rem 1.35rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.order-as-form.order-as-reply { margin-top: 1.2rem; }
.order-as-ref {
display: grid;
grid-template-columns: auto 1fr;
align-items: baseline;
gap: 0.2rem 0.8rem;
padding: 0.85rem 1rem;
border: 1px solid rgba(201, 138, 61, 0.45);
border-left: 4px solid var(--amber);
border-radius: var(--radius-sm);
background: rgba(201, 138, 61, 0.08);
}
.order-as-ref.compact { padding: 0.5rem 0.75rem; }
.order-as-ref-label {
grid-column: 1;
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--amber-600);
}
.order-as-ref-value {
grid-column: 2;
font-family: var(--font-display);
font-size: var(--fs-lg);
font-weight: 700;
color: var(--ink);
}
.order-as-ref.compact .order-as-ref-value { font-size: var(--fs-md); }
.order-as-ref-note {
grid-column: 1 / -1;
font-size: var(--fs-xs);
color: var(--ink-soft);
}
.order-as-form textarea {
width: 100%;
padding: 0.7rem 0.95rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background: var(--paper);
color: var(--ink);
font: inherit;
resize: vertical;
}
.order-as-thread {
margin-top: 1.5rem;
padding: 1.25rem 1.35rem;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
}
.order-as-thread-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 0.75rem;
flex-wrap: wrap;
}
.order-as-thread-head h3 { margin: 0; font-family: var(--font-display); font-size: var(--fs-lg); }
.order-as-when { color: var(--muted); font-size: var(--fs-xs); }
@media (max-width: 640px) {
.order-as-head { flex-direction: column; align-items: stretch; }
.order-as-form, .order-as-thread { padding: 1rem; }
.msg-images img { width: 78px; height: 78px; }
}
/* ==========================================================================
R54 — polish pass. Dropdowns on the member lists, the conversation page and
the account "email" pages (reset password / verify email) all speak one
language. Everything here deliberately sits at the end of the stylesheet so
it refines the R25/R52 rules above instead of duplicating them — and so the
generated themes inherit it automatically.
========================================================================== */
/* --- 1. Dropdowns on the member lists ------------------------------------
The admin panel already settled on one dropdown language (the products.php
category filter set the standard): the native arrow is replaced by a drawn
chevron pinned to the right edge, and the control is at least 44px tall so
it can be hit with a thumb. Same chevron here, inline SVG so no extra
request is needed. */
.list-per-page select,
.bulk-bar select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
min-height: 2.75rem;
padding: 0.5rem 2.6rem 0.5rem 0.85rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
background-color: var(--paper);
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' fill='none' stroke='%237a7669' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-position: right 0.9rem center;
background-size: 12px 8px;
color: var(--ink);
font: inherit;
font-size: var(--fs-sm);
line-height: 1.35;
cursor: pointer;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.list-per-page select:hover,
.bulk-bar select:hover { border-color: var(--moss); background-color: var(--cream); }
.list-per-page select:focus,
.bulk-bar select:focus {
border-color: var(--amber);
box-shadow: 0 0 0 3px rgba(201, 138, 61, 0.16);
outline: none;
}
.bulk-bar { gap: 0.65rem 0.85rem; padding: 0.8rem 1rem; }
.bulk-bar .bulk-action-label { white-space: nowrap; }
.bulk-bar select { min-width: 13rem; }
.bulk-bar [data-bulk-apply] { min-height: 2.75rem; padding-inline: 1.15rem; }
.bulk-select-all input { width: 1.15rem; height: 1.15rem; }
.mail-row-select .bulk-check { width: 1.2rem; height: 1.2rem; }
/* On a phone the bar stacks into full-width rows: who is selected, then what
to do with them, then the button that does it. */
@media (max-width: 720px) {
.list-toolbar { row-gap: 0.7rem; }
.list-per-page { width: 100%; justify-content: space-between; }
.record-sort-group { flex: 1 1 100%; }
.bulk-bar { align-items: stretch; }
.bulk-bar .bulk-spacer { display: none; }
.bulk-bar .bulk-action-label { flex: 0 0 100%; }
.bulk-bar select { flex: 1 1 100%; min-width: 0; }
.bulk-bar [data-bulk-apply] { flex: 1 1 100%; }
.bulk-hint { flex-basis: 100%; line-height: 1.55; }
}
/* --- 2. The conversation page ("Open") -----------------------------------
The thread is this page's only job, so it gets a real card: one frame
around the header strip, the bubbles, the live note and the reply box —
the borders the R52 layout lost. */
.conversation-view {
padding: 0;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.conversation-view .mail-detail-head {
padding: 1.15rem 1.4rem 1rem;
border-bottom: 1px solid var(--line);
background: linear-gradient(180deg, #fffdf8 0%, var(--cream) 100%);
}
.conversation-subject { margin: 0 0 0.45rem; font-size: var(--fs-xl); line-height: 1.25; }
.mail-detail-meta { gap: 0.3rem 1.1rem; font-size: var(--fs-xs); }
.conversation-view .msg-attachment { margin: 0; padding: 1rem 1.4rem 0; }
.conversation-view .mail-detail-body { margin: 0; padding: 1.1rem 1.4rem; gap: 0.55rem; }
.conversation-view .live-indicator { margin: 0; padding: 0 1.4rem 0.35rem; }
.conversation-view .message-reply-form {
margin: 0;
padding: 1.1rem 1.4rem 1.25rem;
border-top: 1px solid var(--line);
background: var(--cream);
}
.conversation-view .message-reply-form textarea { background: var(--paper); }
.conversation-view .compose-actions { margin-top: 0.85rem; }
/* Bubbles: one accent edge shows at a glance who wrote what, and the frame
keeps every message a readable block instead of a floating colour patch.
Padding is trimmed so more of the conversation fits on one screen. */
.conversation-view .mail-detail-body .msg {
max-width: 82%;
padding: 0.62rem 0.9rem 0.7rem;
border: 1px solid var(--line);
border-radius: var(--radius-sm);
box-shadow: 0 1px 1px rgba(22, 27, 22, 0.03);
}
.conversation-view .mail-detail-body .msg-admin {
border-left: 3px solid var(--moss);
background: var(--sand);
}
.conversation-view .mail-detail-body .msg-customer {
border-right: 3px solid var(--amber);
background: rgba(201, 138, 61, 0.13);
}
.conversation-view .mail-detail-body .msg-meta { gap: 0.5rem; margin-bottom: 0.3rem; }
.conversation-view .mail-detail-body .msg-text { font-size: var(--fs-sm); line-height: 1.62; }
.conversation-view .mail-detail-body .msg-images { gap: 0.4rem; margin-top: 0.5rem; }
.conversation-view .mail-detail-body .msg-images img { width: 74px; height: 74px; }
@media (max-width: 640px) {
.conversation-view .mail-detail-head { padding: 1rem 1rem 0.85rem; }
.conversation-subject { font-size: var(--fs-lg); }
.conversation-view .msg-attachment { padding: 0.85rem 1rem 0; }
.conversation-view .mail-detail-body { padding: 0.9rem 1rem; gap: 0.5rem; }
.conversation-view .live-indicator { padding: 0 1rem 0.3rem; }
.conversation-view .message-reply-form { padding: 1rem; }
.conversation-view .mail-detail-body .msg { max-width: 92%; }
.conversation-view .mail-detail-body .msg-images img { width: 64px; height: 64px; }
}
/* --- 3. Account "email" pages --------------------------------------------
Forgot password, choose a new password, verify your email, resend the
verification link: they are all the same moment — a mail from the store has
just been sent (or opened) — so they share one card that echoes the HTML
mail shell (email_shell()): a dark wordmark strip on top, the message in
the middle, the actions and the small print below. */
.auth-wrap:has(> .mail-card) { align-items: flex-start; padding-top: 0.5rem; }
.mail-card {
width: 100%;
max-width: 560px;
background: var(--paper);
border: 1px solid var(--line);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.mail-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 0.95rem 1.5rem;
background: var(--forest-900);
border-bottom: 3px solid var(--amber);
}
.mail-card-brand {
font-family: var(--font-display);
font-size: var(--fs-lg);
line-height: 1.1;
color: #fff;
letter-spacing: 0.02em;
}
.mail-card-kicker {
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--sage);
white-space: nowrap;
}
.mail-card-body { padding: 1.55rem 1.5rem 0.35rem; }
.mail-card-title {
margin: 0 0 0.5rem;
font-family: var(--font-display);
font-size: var(--fs-xl);
line-height: 1.2;
color: var(--forest-900);
}
.mail-card-lead {
margin: 0 0 1.15rem;
font-size: var(--fs-sm);
line-height: 1.7;
color: var(--ink-soft);
}
.mail-card .alert { margin-bottom: 1.1rem; }
.mail-card .auth-form { margin-top: 0.15rem; }
.mail-card-actions {
display: flex;
flex-direction: column;
gap: 0.65rem;
margin: 1.3rem 0 0;
}
.mail-card-actions .btn { width: 100%; }
/* R60 — primary actions on register / verify-email cards must read like the
"Send reset link" button on forgot-password: full btn-large, not the compact
member-inbox sizing above (that rule keeps applying only to small buttons). */
.mail-card-actions .btn.btn-large { padding: 0.95rem 2.1rem; font-size: var(--fs-md); }
.mail-card-note {
margin: 1.15rem 0 0;
padding: 0.85rem 1rem;
border: 1px solid var(--line);
border-left: 3px solid var(--amber);
border-radius: var(--radius-sm);
background: var(--cream);
font-size: var(--fs-xs);
line-height: 1.65;
color: var(--ink-soft);
}
.mail-card-note p { margin: 0; }
.mail-card-note p + p { margin-top: 0.45rem; }
.mail-card-note strong { color: var(--forest-800); }
.mail-card-foot {
padding: 1.1rem 1.5rem 1.4rem;
font-size: var(--fs-xs);
line-height: 1.7;
color: var(--muted);
}
.mail-card-foot a { color: var(--amber-600); font-weight: 600; }
.mail-card-foot a:hover { text-decoration: underline; }
@media (max-width: 560px) {
.mail-card-head { padding: 0.85rem 1.1rem; }
.mail-card-brand { font-size: var(--fs-md); }
.mail-card-kicker { font-size: var(--fs-2xs); letter-spacing: 0.12em; }
.mail-card-body { padding: 1.2rem 1.1rem 0.3rem; }
.mail-card-title { font-size: var(--fs-xl); }
.mail-card-foot { padding: 1rem 1.1rem 1.2rem; }
}
/* --------------------------------------------------------------------------
R57 — reduced transparency: the same layout with fully opaque surfaces.
Additive and opt-in: only users whose OS asks for less transparency ever
see this block, and nothing else in the stylesheet changes for them.
-------------------------------------------------------------------------- */
@media (prefers-reduced-transparency: reduce) {
.site-header,
.site-header.is-scrolled {
background: #161b16;
}
/* R141f — the frost moved onto underlay pseudos, so silencing it means
silencing the pseudos and painting the elements solid. */
.site-header::before,
.site-header.is-scrolled::before {
background: #161b16;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.dropdown {
background: #fffdf9;
}
.dropdown::before {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.mobile-menu {
background: #161b16;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* R101 — the hero copy panel joins the list: same pane, frost switched off.
The hero is the one place where losing the frost could cost legibility
rather than just polish, so it goes fully opaque here. */
.hero-text {
background: #161b16;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
}
/* ==========================================================================
R81 — one voice for the "a mail is on its way" moments.
success.php closes a purchase with a centred icon, a heading, the copy,
a row of buttons and a small print line underneath. register.php?sent=1,
verify-email.php and both states of forgot-password.php say exactly the
same kind of thing ("we have just emailed you — go do the thing"), so they
now borrow that composition. Only the arrangement is shared: the centred
column, the panel width, the icon, the button row and the note. The card,
the brand strip, the fields and the form still come from the component
each page already used, so a generated theme keeps repainting them through
the normal tokens.
========================================================================== */
/* 1. The column. Matches .status-inner (560px) so the two page families line
up, and the card fills it instead of stopping at 560px of its own. */
.mail-card--status { max-width: 620px; }
.auth-wrap:has(> .mail-card--status) { padding-top: 0.5rem; }
/* 2. The centred column itself. `display: flex` on a block element keeps
text-align working for the copy while the parts below are laid out in
order; the children are stretched so the form and the notes stay full
width. */
.mail-card-status {
display: flex;
flex-direction: column;
text-align: center;
}
.mail-card-status > * { min-width: 0; }
/* 3. The icon. Same 96px circle as the payment pages, in the theme's success
colour; .mail-card-status-icon--warn swaps in the amber used by a payment
that has not settled yet, and .alert states draw from the .alert they sit
in, so a form that failed still reads as a form that failed. */
.mail-card-status-icon {
display: flex;
width: 96px;
height: 96px;
align-items: center;
justify-content: center;
margin: 0 auto 1.4rem;
border-radius: 50%;
background: rgba(63, 122, 74, 0.14);
color: var(--success);
}
.mail-card-status-icon--warn { background: rgba(201, 138, 61, 0.14); color: var(--amber-600); }
/* 4. Heading and copy: the status page's own scale, one step down so it fits
the narrower card (h1 is clamp(2rem, 4vw, 2.7rem) / 1rem lead over there). */
.mail-card-status .mail-card-title {
margin: 0 0 0.6rem;
font-size: var(--fs-2xl);
line-height: 1.2;
}
.mail-card-status .mail-card-lead {
margin: 0 auto 1.15rem;
max-width: 46ch;
font-size: var(--fs-md);
line-height: 1.75;
}
.mail-card-status .order-number { margin: 0 0 0.6rem; }
/* 5. The button row: identical geometry to .status-actions, including the
same stacking behaviour on a phone. */
.mail-card-status-actions {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0.9rem;
margin: 1.7rem 0 0;
}
.mail-card-status-actions .btn { width: auto; }
/* A single full-width action stays the exception: it is the equivalent of the
status page's lone primary button. */
.mail-card-status-actions .btn-block { width: 100%; }
/* 6. On a phone the card and the payment page land on the same numbers. */
@media (max-width: 560px) {
.mail-card-status-actions { flex-direction: column; align-items: stretch; gap: 0.7rem; }
.mail-card-status-icon { width: 80px; height: 80px; margin-bottom: 1.2rem; }
}
/* 7. Anything a page inserts between the copy and the buttons — the field
grid of a short form, a callout — is centred and full width so it cannot
break the column. */
.mail-card-status .auth-form,
.mail-card-status .alert,
.mail-card-status .mail-card-note { width: 100%; }
.mail-card-status .alert { text-align: left; }
.mail-card-status .field { text-align: left; }
/* ==========================================================================
R82/R83 — the status column, without the card around it.
The merchant asked register.php?sent=1, verify-email.php and both states of
forgot-password.php to look exactly like success.php — and success.php has
no box and no band: the icon, the heading, the copy and the buttons sit
straight on the page, with nothing above the icon at all.
R82 removed the card: background, border, radius, shadow and the big
content padding. R83 removed what was left of the card's chrome —
`.mail-card-head`, the dark "Deerseeker Archery / Account email" strip with
its 3px amber rule. The markup no longer emits that div on these three
pages; the defensive rule below makes the intent explicit and keeps a
stray copy from ever re-introducing a band on a bare column.
Held behind `.mail-card--bare` rather than restyling `.mail-card`, so the
member inbox (My Messages) and the admin panel keep their framed cards and
their brand strips.
This block sits at the END of the stylesheet on purpose. `.mail-card` and
`.mail-card--status` are both single-class selectors, so specificity ties
and the LAST declaration of max-width wins. `.mail-card--status` sets 620px
(R81) and this rule needs success.php's own 560px, so it has to come after
it. Moving this block above R81 silently restores the 620px column — which
is exactly the bug this note exists to prevent.
========================================================================== */
.mail-card--bare {
max-width: 560px;
background: none;
border: 0;
border-radius: 0;
box-shadow: none;
}
/* R83 — no band, no rule, no label: the column opens on the icon, the way
success.php does. */
.mail-card--bare .mail-card-head { display: none; }
/* With the head gone the body is the first thing on the page, so it supplies
the whole top gap. 4.2rem matches the breathing room the page-hero above
used to leave under the band. */
.mail-card--bare .mail-card-body { padding: 4.2rem 0 0; }
/* success.php's .status-note earns its distance with `margin: 2.2rem 0 0`,
which also stops the margin from collapsing into the column above. The card
foot is the last child of the CARD, not of the status column, so without a
margin of its own it butts straight up against the buttons. Mirror the
status note's number here so the two page families end identically. */
.mail-card--bare .mail-card-foot {
margin: 2.2rem 0 0;
padding: 1.6rem 0 0;
border-top: 0;
text-align: center;
}
/* The callout narrows to the measure of the lead — full width here would run
to the viewport edges once the card's own padding is gone. */
.mail-card--bare .mail-card-note {
max-width: 46ch;
margin-left: auto;
margin-right: auto;
text-align: left;
}
@media (max-width: 560px) {
.mail-card--bare .mail-card-body { padding: 2.6rem 0 0; }
.mail-card--bare .mail-card-foot { padding: 1.3rem 0 0; }
}
/* ==========================================================================
R85 — "Not for sale": a product the store keeps on display but does not sell
--------------------------------------------------------------------------
Delisting is deliberately NOT hiding. A delisted product stays in category
pages, in search results and on the home page as a showcase entry, and its
own page keeps the full description and photo gallery. What changes is that
PHP prints no price row and no buy form at all, so nothing here has to
blank a price out or hide a button — these rules only give the replacement
text its own styling and keep a delisted card's height honest next to its
priced neighbours. Appended at the end on purpose: a new override block
added earlier in the sheet loses to any later rule of equal specificity.
========================================================================== */
/* Product page — replaces the price row. Mirrors .product-price-row's own
margin (0 top, 1rem below) so the title block and the stock line below it
do not jump between a sellable and a delisted product. */
.product-delisted-badge {
margin: 0 0 1rem;
}
/* Product page — the showcase notice. A quiet sand panel rather than the
amber .alert strip: this is information, not a warning about something the
shopper did, and it must not inflate the amber-strip geometry other pages
are measured against. */
.delisted-note {
margin-top: 1.1rem;
padding: 0.95rem 1.1rem;
background: var(--cream);
border: 1px solid var(--line);
border-radius: var(--radius);
color: var(--ink-soft);
font-size: var(--fs-sm);
line-height: 1.6;
}
.delisted-note p { margin: 0; }
.delisted-note p + p { margin-top: 0.5rem; }
.delisted-note strong { color: var(--forest-800); }
.delisted-note a { color: var(--amber-600); font-weight: 600; }
/* Product card — the price line is swapped for this. Sized and weighted to
sit in the same place as the price it replaces. */
.product-delisted {
display: inline-block;
font-family: var(--font-display);
font-size: var(--fs-md);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--muted);
}
/* Delisted badge on the card image — deliberately darker and calmer than the
amber "Sale" badge, so a showcase entry never reads as a promotion. */
.badge-delisted { background: rgba(22, 27, 22, 0.82); color: #f0e6d2; }
/* Held back a notch, so a wall of cards still leads the eye to what is
actually for sale. */
.product-card.is-delisted .product-image img { filter: saturate(0.7); }
@media (prefers-reduced-transparency: reduce) {
/* Opaque rather than translucent, for readers who asked the system for it. */
.badge-delisted { background: #161b16; }
}
/* ===========================================================================
R86 — wholesale pricing, delivery terms and the uploaded logo
---------------------------------------------------------------------------
Appended last on purpose: at equal specificity the source order decides, so
these rules must be able to override the price / summary / status rules
defined further up (R82 taught that lesson the hard way).
=========================================================================== */
/* The drawer carries the same mark as the desktop bar, but a 52px-capped
image is too tall for its 60px header row. */
.mobile-menu-header .logo-img {
max-height: 38px;
max-width: 210px;
}
/* ---------------------------------------------------------------------------
Wholesale pricing
--------------------------------------------------------------------------- */
/* Inline "Wholesale" pill in the price row on the product page. Same geometry
as .save-badge, but in the quiet dark tone: it labels the pricing model, it
is not a promotion.
R88 — this pill used to be rendered with class="badge badge-wholesale", and
.badge is POSITION:ABSOLUTE with top/left offsets because it is meant for
product-card photos. Nothing in the product-detail column is positioned, so
the pill escaped to the nearest positioned ancestor — `.reveal`, which
carries a transform — and landed 14px inside that box, straight on top of
the product title (measured: badge 101.5 × 26 at y 219.5 against an at
y 205.1 – 253.5). It is now a normal-flow flex item in the price row, next
to the "From …" figure, exactly like .save-badge: nothing can overlap the
title because the title is no longer in the same layer. The explicit
position/top/left reset is what makes the class safe even if it is still
written alongside .badge. */
.badge-wholesale {
position: static;
top: auto;
left: auto;
display: inline-flex;
align-items: center;
padding: 0.22rem 0.65rem;
background: var(--forest-800);
color: var(--cream);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
white-space: nowrap;
}
/* The same label at card size, where there is far less room and the price
above it already says "From". */
.price-tag-wholesale {
display: inline-flex;
align-items: center;
padding: 0.16rem 0.5rem;
background: var(--sand);
color: var(--forest-800);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
border-radius: 999px;
white-space: nowrap;
}
/* The step table. Reads like a rate card rather than a form, so it borrows the
storefront's line/paper tokens and keeps the money in the price accent. */
.tier-table {
margin: 0 0 1.5rem;
border: 1px solid var(--line);
border-radius: var(--radius);
background: var(--paper);
overflow: hidden;
}
.tier-table table {
width: 100%;
border-collapse: collapse;
font-size: var(--fs-sm);
}
.tier-table th {
padding: 0.6rem 1rem;
text-align: left;
background: var(--sand);
border-bottom: 1px solid var(--line);
font-size: var(--fs-2xs);
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--muted);
}
.tier-table td {
padding: 0.55rem 1rem;
border-bottom: 1px solid var(--line);
color: var(--ink-soft);
font-variant-numeric: tabular-nums;
}
.tier-table tr:last-child td { border-bottom: none; }
.tier-table th:last-child, .tier-table td:last-child { text-align: right; }
.tier-table [data-tier-amount] { font-weight: 700; color: var(--price); white-space: nowrap; }
/* The step the current quantity has reached — a quiet highlight, not a badge. */
.tier-table tr.is-active td { background: var(--amber-100); }
.tier-note {
margin: 0;
padding: 0.7rem 1rem;
border-top: 1px solid var(--line);
color: var(--muted);
font-size: var(--fs-xs);
line-height: 1.55;
}
/* "At 12 units: $80.00 per unit · $960.00 in total" — painted in by main.js. */
.tier-live {
margin: 0;
padding: 0 1rem 0.75rem;
color: var(--forest-800);
font-size: var(--fs-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.tier-live:empty { display: none; }
/* ---------------------------------------------------------------------------
Delivery terms on the product page
--------------------------------------------------------------------------- */
.product-shipping {
margin: 0 0 0.9rem;
padding-left: 1.1rem;
position: relative;
color: var(--ink-soft);
font-size: var(--fs-sm);
line-height: 1.55;
}
.product-shipping::before {
content: '';
position: absolute;
left: 0;
top: 0.5em;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--moss);
}
.product-shipping.is-quote { color: var(--amber-600); font-weight: 600; }
.product-shipping.is-quote::before { background: var(--amber); }
/* R138b — "Free shipping": bold #670099 words with a small deep-orange check
badge in front, directly under the price. No tinted box, no border, no site
radius on the words themselves — the disc is the only chrome. */
.product-shipping.is-free {
padding-left: 1.5rem;
color: #670099;
font-weight: 700;
letter-spacing: 0.01em;
}
.product-shipping.is-free::before {
content: '\2713';
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
width: 1.05rem;
height: 1.05rem;
border-radius: 50%;
background: #ff8c00;
color: #fff;
font-size: var(--fs-2xs);
font-weight: 700;
line-height: 1.05rem;
text-align: center;
}
/* ---------------------------------------------------------------------------
Basket: the tiered line and the carriage line
--------------------------------------------------------------------------- */
.cart-line-tier {
display: block;
margin-top: 0.15rem;
color: var(--forest-700);
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.02em;
}
/* Sits under the summary rows it explains — the basket is not free and we will
come back with a figure. */
.summary-note {
margin: 0.9rem 0 0;
padding: 0.75rem 0.9rem;
background: var(--amber-100);
border-left: 3px solid var(--amber);
border-radius: var(--radius-sm);
color: var(--ink-soft);
font-size: var(--fs-xs);
line-height: 1.55;
}
/* ---------------------------------------------------------------------------
Order views: the carriage line, the pending-quote notice, the pill
--------------------------------------------------------------------------- */
.order-shipping-line {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 1rem;
margin-top: 1.25rem;
padding-top: 1.25rem;
border-top: 1px solid var(--line);
}
.order-shipping-line span {
font-size: var(--fs-xs);
font-weight: 600;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--muted);
}
.order-shipping-line strong {
font-size: var(--fs-md);
color: var(--forest-800);
font-variant-numeric: tabular-nums;
}
/* The quote notice is an explanation, not a footnote — it outranks the small
muted .order-item-note it extends, in colour and in size.
R88 — .order-shipping-note (the merchant's own "Note to the customer" about
the delivery) wears the same callout, but under its own name: the two are
different messages and one selector must not stand for both. */
.order-quote-note,
.order-shipping-note,
.checkout-quote-note {
margin: 1.1rem 0 0;
padding: 1rem 1.15rem;
background: var(--amber-100);
border-left: 3px solid var(--amber);
border-radius: var(--radius-sm);
color: var(--ink-soft);
font-size: var(--fs-sm);
line-height: 1.6;
}
.checkout-quote-note { margin: 0 0 1.2rem; }
.order-quote-note p, .order-shipping-note p, .checkout-quote-note p { margin: 0; }
.order-quote-note p + p, .order-shipping-note p + p, .checkout-quote-note p + p { margin-top: 0.5rem; }
.order-quote-note strong, .order-shipping-note strong, .checkout-quote-note strong { color: var(--forest-800); }
/* "Awaiting shipping quote" — amber, because somebody has to act before this
order can move. */
.status-quote { background: rgba(201, 138, 61, 0.16); color: var(--amber-600); }
@media (max-width: 560px) {
/* The rate card loses its padding before it loses a column. */
.tier-table th, .tier-table td { padding: 0.5rem 0.7rem; }
.tier-note, .tier-live { padding-left: 0.7rem; padding-right: 0.7rem; }
.order-shipping-line { flex-direction: column; gap: 0.2rem; }
}
/* --------------------------------------------------------------------------
R88 — home-page hero slideshow
--------------------------------------------------------------------------
Every slide ships in the DOM with the first one already `.is-active`, so the
hero renders fully without JavaScript; the script only moves the class. That
is why the base rule hides the inactive slides rather than the script doing
it — a no-JS visitor sees picture one, exactly like the static hero.
The effect is chosen by the `data-effect` attribute the template prints from
`hero_slide_effect()`, so all five transitions share one set of rules and
the CSS never has to guess which one is live.
Positioned to match `.hero-media` (absolute, inset 0) so the slideshow and
the plain `" row is gone. Same 2-column grid as the shipped
groups: the link takes the width, the button takes its own hit area. */
.navmenu .navmenu-row-wrap {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: stretch;
}
.navmenu .navmenu-expand {
display: flex;
align-items: center;
justify-content: center;
width: 2.4rem;
padding: 0;
border: 0;
border-radius: var(--radius);
background: none;
/* R215 — neutral ink, and a charcoal film while pressed; see the token block
on .navmenu. The amber the row's own hover uses is not repeated here. */
color: var(--navmenu-btn-ink, var(--navmenu-ink));
font: inherit;
cursor: pointer;
transition: background 0.34s var(--ease), color 0.34s var(--ease);
}
.navmenu .navmenu-expand:hover,
.navmenu .navmenu-expand:focus-visible {
background: var(--navmenu-btn-wash, rgba(128, 128, 128, 0.16));
color: var(--navmenu-btn-wash-ink, var(--navmenu-ink));
}
.navmenu .navmenu-expand:focus-visible {
outline: 2px solid currentColor;
outline-offset: -2px;
}
/* the level-2 row: same voice as .dropdown-link, plus the caret slot */
.navmenu .navmenu-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
transition: background 0.34s var(--ease), color 0.34s var(--ease), padding 0.34s var(--ease);
}
.navmenu .navmenu-caret {
flex: none;
font-size: 0.7em;
line-height: 1;
opacity: 0.7;
transition: transform 0.34s var(--ease), opacity 0.34s var(--ease);
}
/* the unfold mechanism — a 0fr grid row collapses to a true zero and
animates to the list's natural height (same trick as the shipped groups) */
.navmenu .navmenu-sub {
display: grid;
grid-template-rows: 0fr;
opacity: 0;
visibility: hidden;
transition: grid-template-rows 0.4s var(--ease), opacity 0.34s var(--ease), visibility 0.4s;
}
.navmenu .navmenu-item.is-open > .navmenu-sub {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
}
/* R212 — the caret lives in the expand button, not inside the row any more,
so the open state is matched on the item rather than on `.navmenu-row`. */
.navmenu .navmenu-item.is-open .navmenu-caret {
transform: rotate(180deg);
opacity: 1;
}
.navmenu .navmenu-sub-clip {
overflow: hidden;
min-height: 0;
}
.navmenu .navmenu-sub-list {
margin: 0.1rem 0 0.35rem 0.95rem;
padding-left: 0.55rem;
/* the guide rule stays a rule — but a whisper of one, not the theme line */
border-left: 1px solid var(--navmenu-rule);
}
.navmenu .navmenu-sub .sub-link {
padding: 0.4rem 0.7rem;
font-size: var(--fs-xs);
white-space: nowrap;
opacity: 0.78;
transition: background 0.34s var(--ease), color 0.34s var(--ease),
opacity 0.34s var(--ease), padding 0.34s var(--ease);
}
/* the guide rule already marks the level, as in the shipped panel */
.navmenu .navmenu-sub .sub-link::before { display: none; }
/* --- style 1 · flyout: vertical list, third level slides out right -------- */
/* The third level IS a .dropdown surface, so themes paint it for free; the
deeper rules below take the reveal away from the shared `.has-dropdown:
hover .dropdown` pair (which would otherwise open every sub at once) and
hand it to each item instead. */
.navmenu-flyout .navmenu-item.has-sub > .navmenu-row { padding-right: 2.1rem; }
.navmenu-flyout .navmenu-item.has-sub > .navmenu-sub.dropdown {
left: calc(100% + 14px);
top: -0.45rem;
min-width: 230px;
/* a fly-out is a panel of its own: the list is never clipped, the whole
panel fades (unlike the inline styles, which grow a 0fr row) */
grid-template-rows: 1fr;
transform: translateX(-10px);
opacity: 0;
visibility: hidden;
/* R149 — no transition here (closed = instant); the hover state below
carries the transform glide, and opacity snaps on the first frame so
the flyout's frost never shows the transparent-to-frosted beat. */
}
/* 14px transparent bridge over the gap, so the pointer can travel across */
.navmenu-flyout .navmenu-item.has-sub > .navmenu-sub.dropdown::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: -14px;
width: 14px;
}
.navmenu-flyout .navmenu-item.has-sub:hover > .navmenu-sub.dropdown,
.navmenu-flyout .navmenu-item.has-sub:focus-within > .navmenu-sub.dropdown {
transform: translateX(0);
opacity: 1;
visibility: visible;
transition: transform 0.3s var(--ease);
}
/* --- style 2 · 3-column grid, hover expands the third level underneath ---- */
/* R134 — columns are separated by GAPS between soft blocks, never by a drawn
line: each level-2 directory (heading + its list) sits on its own barely
there wash of grey, which reads as a region without ever shouting. */
.navmenu-grid-hover .navmenu-body,
.navmenu-accordion-grid .navmenu-body {
display: grid;
grid-template-columns: repeat(var(--navmenu-cols, 3), minmax(0, 1fr));
grid-auto-columns: minmax(0, 1fr);
gap: 0.55rem 0.7rem;
/* R137 — STRETCH, not start. When one block unfolds its third level the
row grows to that block's height; with `start` the two neighbouring
blocks stopped at their own height and left a bare hole in the panel on
both sides. Stretched, every block in a row shares the row's height, so
the panel stays a clean card grid and — just as usefully — moving the
pointer between two blocks of the same row no longer resizes anything. */
align-items: stretch;
align-content: start;
}
/* R134 — "N rows per column": the grid fills DOWN each column first, so the
column count follows ceil(items / rows) (computed in PHP and handed over as
--navmenu-cols). Without that class the layout is byte-identical to R133. */
.navmenu-rows.navmenu-grid-hover .navmenu-body,
.navmenu-rows.navmenu-accordion-grid .navmenu-body {
grid-template-rows: repeat(var(--navmenu-rows, 3), auto);
grid-auto-flow: column;
}
.navmenu-grid-hover .navmenu-item,
.navmenu-accordion-grid .navmenu-item {
padding: 0.3rem 0.35rem 0.45rem;
/* R136 — the block takes the merchant's Corner rounding as-is (the old
+7px bump made one slider unable to shape the whole panel). */
border-radius: var(--radius);
background: var(--navmenu-block);
}
/* transparent bridge over the gap between the row and its list */
.navmenu-grid-hover .navmenu-sub { margin-top: 0.45rem; }
.navmenu-grid-hover .navmenu-sub::before {
content: '';
position: absolute;
top: -10px;
left: 0;
right: 0;
height: 10px;
}
.navmenu-grid-hover .navmenu-item.has-sub:hover > .navmenu-sub,
.navmenu-grid-hover .navmenu-item.has-sub:focus-within > .navmenu-sub {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
}
/* --- style 3 · vertical list, third level always shown -------------------- */
.navmenu-list-static .navmenu-row { font-weight: 600; }
.navmenu-list-static .navmenu-sub {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
}
/* --- style 4 · vertical accordion (click to expand) ----------------------- */
.navmenu-accordion .navmenu-row { font-weight: 600; }
/* --- style 5 · 3-column accordion (click to expand) ----------------------- */
.navmenu-accordion-grid .navmenu-row { font-weight: 600; }
/* --- style 6 · full-width mega menu, third level always shown ------------- */
/* R134 — the GLASS spans the viewport, the CONTENT does not. The panel keeps
width:100vw (main.js lines its left edge up with the nav button), but the
head row and the column grid are pinned to the page's own container width
and gutters, so the menu reads as part of the page instead of a strip of
text glued to the far left screen edge. */
.navmenu-mega {
left: 0;
width: 100vw;
max-width: none;
padding: 0.6rem 0 1rem;
}
.navmenu-mega .navmenu-body {
width: 100%;
max-width: var(--container);
margin-inline: auto;
padding-inline: clamp(1.25rem, 4vw, 2.5rem);
}
.navmenu-mega .navmenu-body {
display: grid;
grid-template-columns: repeat(var(--navmenu-cols, 4), minmax(0, 1fr));
grid-auto-columns: minmax(0, 1fr);
gap: 0.55rem 0.7rem;
align-items: start;
}
/* R134 — same rows-per-column switch as the grid styles */
.navmenu-rows.navmenu-mega .navmenu-body {
grid-template-rows: repeat(var(--navmenu-rows, 4), auto);
grid-auto-flow: column;
}
/* R135 — BALANCED COLUMNS. The grid above fills row by row, so a category
whose neighbours are taller drags its whole row down and a remainder row
leaves a dead strip across the bottom of the panel — very visible when
directories carry very different numbers of products. When JS is present
main.js re-deals the items into per-column flex stacks, choosing the
column splits that keep the tallest column as short as possible (a small
sequential-partition search over the REAL rendered heights), and stretches
each column's last block over whatever slack is left, so every column
ends on the same baseline. Without JS nothing changes: the grid below is
the fallback, and the media queries further down keep governing it.
Column counts for the balanced path are chosen in main.js and MUST stay
in sync with those media queries. */
.navmenu-mega .navmenu-body.is-balanced {
display: flex;
flex-direction: row; /* the base .navmenu-body is a column; win it back */
align-items: stretch;
gap: 0 0.7rem;
}
.navmenu-mega .navmenu-body.is-balanced .navmenu-col {
flex: 1 1 0;
min-width: 0;
display: flex;
flex-direction: column;
gap: 0.55rem;
}
/* the slack each column has left over goes to its LAST block: the soft
background stretches, the contents stay at the top, and the panel ends
on one straight bottom line instead of a staircase. */
.navmenu-mega .navmenu-body.is-balanced .navmenu-item:last-child {
flex: 1 0 auto;
}
/* each level-2 directory is its own soft block; the gaps ARE the dividers */
.navmenu-mega .navmenu-item {
padding: 0.3rem 0.35rem 0.45rem;
/* R136 — Corner rounding, same as every other dropdown block. */
border-radius: var(--radius);
background: var(--navmenu-block);
}
/* the third level is printed, never folded */
.navmenu-mega .navmenu-sub {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
}
/* the level-2 hover: a 3px indicator bar fades up from centre height while
the row breathes a few pixels to the right. R134 — the bar is a whisper of
the ink (28%), not the accent: at the old weight it read as a bright chip
stuck to the left of every heading. */
.navmenu-mega .navmenu-row {
padding: 0.5rem 0.7rem 0.5rem 1rem;
}
.navmenu-mega .navmenu-row::before {
left: 0;
top: 0.4rem;
bottom: 0.4rem;
height: auto;
margin-top: 0;
width: 3px;
border-radius: 3px;
background: currentColor;
opacity: 0;
transform: scaleY(0);
transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.navmenu-mega .navmenu-row:hover,
.navmenu-mega .navmenu-row:focus-visible { padding-left: 1.35rem; }
.navmenu-mega .navmenu-row:hover::before,
.navmenu-mega .navmenu-row:focus-visible::before { opacity: 0.28; }
/* the level-3 entries: a 4px dot, the text takes the strong ink, and the row
breathes from 1.9rem to 2.2rem */
.navmenu-mega .navmenu-sub-list {
margin: 0.1rem 0 0.3rem;
padding-left: 0;
border-left: 0;
}
.navmenu-mega .navmenu-sub .sub-link {
position: relative;
padding: 0.4rem 0.6rem 0.4rem 1.9rem;
}
.navmenu-mega .navmenu-sub .sub-link::before {
display: block;
content: '';
position: absolute;
left: 1.2rem;
top: 50%;
width: 4px;
height: 4px;
margin-top: -2px;
border-radius: 50%;
background: currentColor;
opacity: 0;
transform: scale(0);
transition: opacity 0.34s var(--ease), transform 0.34s var(--ease);
}
.navmenu-mega .navmenu-sub .sub-link:hover,
.navmenu-mega .navmenu-sub .sub-link:focus-visible { padding-left: 2.2rem; }
.navmenu-mega .navmenu-sub .sub-link:hover::before,
.navmenu-mega .navmenu-sub .sub-link:focus-visible::before {
opacity: 0.42;
transform: scale(1);
}
/* responsive column count for the mega panel: 4 -> 3 -> 2 -> 1. The literal
counts win over the --navmenu-cols default, so a merchant's rows setting
can never squeeze four columns onto a phone.
R134 — and once the breakpoint drops the column count, the row count is
abandoned too: 8 entries at "3 rows" would otherwise overflow into a
FOURTH implicit column on a 2-column screen. Below 1200px the panel simply
flows left to right in 3, 2 or 1 column — the promise is the column count,
and it holds at every width. */
@media (max-width: 1200px) {
.navmenu-mega .navmenu-body,
.navmenu-rows.navmenu-mega .navmenu-body {
grid-template-columns: repeat(3, minmax(0, 1fr));
grid-template-rows: none;
grid-auto-flow: row;
}
}
@media (max-width: 860px) {
.navmenu-mega .navmenu-body,
.navmenu-rows.navmenu-mega .navmenu-body {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (max-width: 560px) {
.navmenu-mega .navmenu-body,
.navmenu-rows.navmenu-mega .navmenu-body { grid-template-columns: 1fr; }
}
/* --- style 7 · full-bleed bar, one column per category, scrolls sideways --- */
/* R211 — the merchant's brief, in their words: a full-width menu that shows
EVERY directory at once, laid out in columns side by side, each column
holding that level-2 category's level-3 directories and its products. The
columns never wrap — when the window is narrower than the row, the bar
scrolls left and right instead of dropping to a second line.
Size hierarchy is the point: the category heading and the entries beneath it
are separate knobs in Admin → Styles (--nw-fullbar-l1 / -l2), so "primary"
and "secondary" can never drift back to looking the same.
R212 — three corrections, after the merchant used it on the live dark theme:
1. NO GUESSED COLOURS. The first cut fell back to `inherit`, which on a dark
pane resolves to the LIGHT theme's body ink: near-black text on dark
brown, i.e. a bar nobody can read. Every colour here now reads a
--navmenu-* property the ACTIVE THEME declares (see `.navmenu` above), so
the bar is legible on the cream pane and on Montserrat Noir's brown glass
without a single per-theme rule in this block.
2. NO ALPHA-ON-TEXT. The two lower levels used opacity (0.82 / 0.68) on top
of an already soft ink — on the cream pane that lands near 2.6:1, under
any readable floor. Hierarchy is weight + size now; every link sits at
full opacity.
3. NO SNAP SCROLL. `scroll-snap-type: x proximity` fired at the end of a
trackpad flick and yanked the row to the nearest column edge, which reads
as "the menu jumped by itself". The bar scrolls freely; the arrows and a
visible scrollbar are the affordances instead.
*/
.dropdown.navmenu-fullbar {
left: 0;
width: 100vw;
max-width: none;
padding: 0;
border-radius: 0;
border-left: 0;
border-right: 0;
/* R212 — NO background declaration here, on purpose.
The bar IS the .dropdown panel (one element, two classes), so "inherit the
theme's surface" cannot be written as `background: inherit` — there is
nothing above it to inherit from. Leaving the property alone is what makes
the theme show through: Montserrat Noir paints a dark brown glass, the
built-in theme a cream one, and this rule never has to know which.
The merchant's "通栏底色" is emitted from PHP instead, as a rule of its own
that loads after the theme (see nw_ui_css) — so an explicit choice wins on
every theme, and no choice changes nothing. */
}
/* the positioned box the arrows hang off; the scroller itself must NOT be the
positioning context, or the arrows would scroll away with the content.
R212 — the side gutters live on the WRAPPER, not on the scroller. That is
what keeps the arrows off the text: the scrolling box starts and ends
inside the gutters, so a column is clipped at the gutter's edge and the
arrow always has empty space of its own to sit in. */
.navmenu-fullbar .navmenu-scrollwrap {
--wfb-gutter: clamp(2.75rem, 5vw, 3.5rem);
position: relative;
padding: 0 var(--wfb-gutter);
}
/* R212 — a soft edge fade where the row is cut off. It starts exactly at the
scroller's edge and fades inward, so the column that is half out of view
dissolves instead of stopping mid-letter. Each side only appears when there
is somewhere left to scroll: at the start nothing is dimmed on the left. */
.navmenu-fullbar .navmenu-scrollwrap::before,
.navmenu-fullbar .navmenu-scrollwrap::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
z-index: 3;
width: 3.5rem;
pointer-events: none;
opacity: 0;
transition: opacity 0.24s var(--ease);
}
.navmenu-fullbar .navmenu-scrollwrap::before {
left: var(--wfb-gutter);
background: linear-gradient(to right, var(--navmenu-surface), transparent);
}
.navmenu-fullbar .navmenu-scrollwrap::after {
right: var(--wfb-gutter);
background: linear-gradient(to left, var(--navmenu-surface), transparent);
}
.navmenu-fullbar .navmenu-scrollwrap.has-overflow:not(.is-at-start)::before { opacity: 1; }
.navmenu-fullbar .navmenu-scrollwrap.has-overflow:not(.is-at-end)::after { opacity: 1; }
.navmenu-fullbar .navmenu-body {
display: flex;
flex-direction: row;
flex-wrap: nowrap; /* the row is the row: it scrolls, not wraps */
align-items: flex-start;
gap: 0;
width: 100%;
max-height: min(72vh, 640px);
overflow-x: auto;
overflow-y: auto;
/* R212 — no side padding here: the gutters belong to the wrapper, so the
scrolling box itself starts and ends inside them. */
/* R214 — the bottom padding was 1.05rem, sized to leave the 9px scrollbar a
strip of its own. R215 puts the bar back into that strip (it is only
visible on hover now), so the padding gives it the room again and the
panel's total height stays where R214 left it. */
padding: 0.35rem 0 0.15rem;
/* R212 — free scrolling. No snap points: a snap fired at the tail of a
trackpad flick and moved the row on its own, which is exactly the
"误操作" the merchant reported. */
overscroll-behavior-x: contain; /* a sideways flick stays in the bar */
-webkit-overflow-scrolling: touch;
/* R215 — the scrollbar shows itself only while the pointer is over the bar.
*
* The strip is still RESERVED at all times, which is the whole trick: a
* scrollbar whose `height` goes from 0 to 9px on hover changes the content
* box and pushes the last row of product names up by 9px — the panel would
* twitch every time a mouse crossed it. So the strip is always 9px and only
* the THUMB changes paint, transparent at rest and grey on hover. Nothing
* moves; a bar appears.
*
* Firefox cannot fade a thumb, so `scrollbar-color` does the same job with
* `transparent` for both track and thumb, and the hover rule repaints it.
* Chromium/Safari go through the pseudo-elements below. */
scrollbar-width: thin;
scrollbar-color: transparent transparent;
}
.navmenu-fullbar .navmenu-body:hover,
.navmenu-fullbar .navmenu-body:focus-within {
scrollbar-color: var(--navmenu-scroll-thumb, rgba(33, 31, 26, 0.3)) transparent;
}
/* The 9px strip exists whether or not the thumb is painted: `height` stays
fixed here, only the thumb's background flips from transparent to grey. */
.navmenu-fullbar .navmenu-body::-webkit-scrollbar {
width: 0;
height: 9px;
}
.navmenu-fullbar .navmenu-body::-webkit-scrollbar-track { background: transparent; }
.navmenu-fullbar .navmenu-body::-webkit-scrollbar-thumb {
background: transparent;
border-radius: 999px;
}
.navmenu-fullbar .navmenu-body:hover::-webkit-scrollbar-thumb,
.navmenu-fullbar .navmenu-body:focus-within::-webkit-scrollbar-thumb {
background: var(--navmenu-scroll-thumb, rgba(33, 31, 26, 0.3));
}
/* R214 — the columns sit in the middle of the bar.
*
* `justify-content: center` is the obvious answer and the wrong one: on a
* scrolling flex container it centres the OVERFLOW too, so when the row is
* wider than the screen the first column ends up at a negative offset that
* scrollLeft can never reach — the leftmost category becomes unclickable.
*
* Auto margins on the two end items do the same job with none of that: free
* space is handed to the margins when there is any (row narrower than the bar →
* centred), and collapses to zero when there is not (row wider → starts at 0
* and every column stays reachable). No measurement, no JS, no magic offset —
* it keeps working when a column count or a font size changes. */
.navmenu-fullbar .navmenu-body > .navmenu-item:first-child { margin-left: auto; }
.navmenu-fullbar .navmenu-body > .navmenu-item:last-child { margin-right: auto; }
/* R212 — while a mouse drag is in progress the whole surface is a handle: no
text selection, no text cursor, no link hit-testing. JS removes the class on
pointerup and swallows the one click that follows. */
.navmenu-fullbar .navmenu-body.is-dragging {
cursor: grabbing;
user-select: none;
-webkit-user-select: none;
}
/* R212 — an anchor is draggable by default, and the native link drag (the
ghost thumbnail) cancels our scroll the moment the pointer travels with the
button down. Turning that off is what lets a drag across a link scroll the
row instead of dragging the link's URL around. */
.navmenu-fullbar .navmenu-body a {
-webkit-user-drag: none;
user-drag: none;
}
/* R212 — the two arrows. Pointer affordance, not a tab stop: tabindex="-1" in
the markup keeps Tab moving through the links only, so a keyboard visitor
never lands on a control that just scrolls. */
.navmenu-fullbar .navmenu-scroll-btn {
position: absolute;
top: 50%;
z-index: 4;
display: none;
align-items: center;
justify-content: center;
width: 2.25rem;
height: 2.25rem;
padding: 0;
transform: translateY(-50%);
/* R215 — a neutral disc instead of the warm frosted surface: white (or, on a
dark theme, near-black) with a grey hairline, and a solid charcoal fill
while pressed. It is a control, not a fragment of the panel, so it no
longer wears the panel's tint. */
border: 1px solid var(--navmenu-btn-edge, var(--navmenu-rule));
border-radius: 999px;
background: var(--navmenu-btn-face, var(--navmenu-surface));
color: var(--navmenu-btn-face-ink, var(--navmenu-ink));
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.16);
-webkit-backdrop-filter: blur(8px) saturate(140%);
backdrop-filter: blur(8px) saturate(140%);
cursor: pointer;
transition: opacity 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
.navmenu-fullbar .navmenu-scrollwrap.has-overflow .navmenu-scroll-btn { display: flex; }
.navmenu-fullbar .navmenu-scroll-btn.is-prev { left: 0.4rem; }
.navmenu-fullbar .navmenu-scroll-btn.is-next { right: 0.4rem; }
/* At either end the arrow fades out instead of disappearing: the button keeps
its place, so the row behind it never reflows mid-scroll. */
.navmenu-fullbar .navmenu-scroll-btn[disabled] {
opacity: 0;
pointer-events: none;
}
.navmenu-fullbar .navmenu-scroll-btn:hover,
.navmenu-fullbar .navmenu-scroll-btn:focus-visible {
background: var(--navmenu-btn-face-hover, #2b2721);
color: var(--navmenu-btn-face-hover-ink, #ffffff);
}
/* one column per category; a hairline between them, never a wrap */
.navmenu-fullbar .navmenu-item {
flex: 0 0 auto;
/* R215 — the column is as wide as its longest name.
*
* A fixed width (`clamp(196px, 16vw, 248px)` until R214) meant a long product
* name wrapped onto a second line, and a wrapped name in a list of single-line
* names reads as a paragraph wedged between labels — the merchant's "列宽太窄，
* 导致文字换行". A width that follows the content removes the problem at its
* source: every row is one line (white-space: nowrap below), and the column
* grows to hold the longest of them instead of squeezing it.
*
* `min-width` keeps the short columns from collapsing into a ragged ribbon, so
* a directory with three-word children still reads as a column rather than a
* narrow slip. There is deliberately no max-width: a cap would reintroduce the
* wrap it was meant to avoid, and the bar scrolls sideways by design. */
width: max-content;
min-width: clamp(208px, 16vw, 252px);
padding: 0.5rem 1.5rem 0.7rem 0;
margin-right: 1.5rem;
border-right: 1px solid var(--nw-fullbar-rule, var(--navmenu-rule));
/* R217 — the whole column is the hover target. R214 only lit the heading
row, which left the level-3 names looking unattached to the directory
they belong to; the merchant asked for the BLOCK to deepen, so the
transition and the paint live on the item now. */
border-radius: var(--radius);
transition: background 0.18s var(--ease), border-color 0.18s var(--ease);
}
/* R217 — pointer over a directory: the block deepens one step past the bar's
own surface and the divider beside it steps out of the way, so the column
reads as one raised card rather than a tinted strip behind a hairline. */
.navmenu-fullbar .navmenu-item:hover,
.navmenu-fullbar .navmenu-item:focus-within {
background: var(--nw-fullbar-hover-bg, var(--navmenu-block-hover));
border-right-color: transparent;
}
.navmenu-fullbar .navmenu-item:last-child {
border-right: 0;
margin-right: 0;
}
/* the level-2 heading: the same size as the names under it by request (R218),
told apart by weight, ink and the amber bar — never by a second size ramp */
.navmenu-fullbar .navmenu-row {
font-size: var(--nw-fullbar-l1, 0.85rem);
font-weight: 700;
line-height: 1.4;
padding: 0.4rem 0.5rem;
/* R215 — no negative side margins. The row and the level-3 links below it
used to overhang the column by 8px on each side so their hover pills looked
wider; `.navmenu-sub-clip` is `overflow:hidden`, so the overhang was clipped
and `max-content` under-measured the column by the same 8px. The longest
product names were then CUT OFF by 4–8px instead of wrapping — the fix for
"不换行" had produced a worse symptom. Both levels now start at the column
edge, which also puts their hover pills on one clean vertical. */
margin: 0 0 0.3rem;
border-radius: var(--radius);
color: var(--nw-fullbar-fg, var(--navmenu-ink));
/* R215 — one line, always. A directory name that wrapped under its own accent
bar put the bar against the second line and made the column look broken. */
white-space: nowrap;
/* R214/R215 — room for the accent bar, which sits at the column's left edge
(see ::before). 1.5rem = 24px puts the words on the same vertical as the
level-3 names, leaving the 3px bar a 21px gap — it reads as a marker, not
the first letter of the heading. The row starts at the column edge now, so
this padding is the whole distance (no negative margin to subtract). */
padding-left: 1.5rem;
}
/* R214 — the amber rule in front of every level-2 directory name.
The merchant asked for it so a column reads as "a section with a heading"
rather than "a slightly bolder line that happens to be first". It uses the
brand amber rather than a text colour on purpose: it must stay the same
accent on the cream theme and on the dark one, where the ink flips but the
brand does not. `top: 50%` + a negative half-height keeps it vertically
centred on the first line of a heading that may wrap to two. */
.navmenu-fullbar .navmenu-row::before {
content: '';
position: absolute;
left: 0; /* R215 — the column's left edge; the row no longer overhangs */
top: 50%;
width: 3px;
height: 1.05em;
margin-top: -0.525em;
border-radius: 999px;
background: var(--amber);
/* R214 — `.dropdown-link::before` already exists: it is the shared "this is a
link" 2px tick, drawn in currentColor but held at `opacity: 0` and squeezing
to 35% height until the row is hovered. Re-declaring the geometry without
those two properties inherits the invisible starting state, which is exactly
how the first attempt at this bar rendered nothing at all. */
/* R217 — the block behind the heading already carries the hover paint (see
.navmenu-item above), so the row itself stays transparent: two stacked
washes would make the heading darker than the names underneath it and
break the block back into two surfaces. */
opacity: 1;
transform: none;
transition: transform 0.18s var(--ease), opacity 0.18s var(--ease);
}
/* R218 — the bar is a permanent marker again. R217 had it at rest as a 60%
tick at 65% opacity so the hover could "draw it out"; on the live pane that
read as "橙色小竖条没加" — a 3px sliver at two thirds of a rem is not a
marker, it is a smudge. Solid at rest, full cap height, and the interaction
is carried by WIDTH plus the block's own deepening (4px on hover), which
cannot be mistaken for an artifact and does not move the words: the bar is
absolutely positioned in the row's 24px gutter, so nothing reflows. */
.navmenu-fullbar .navmenu-row::before {
width: 3px;
opacity: 1;
transform: none;
transition: width 0.16s var(--ease), opacity 0.16s var(--ease);
}
.navmenu-fullbar .navmenu-item:hover .navmenu-row::before,
.navmenu-fullbar .navmenu-item:focus-within .navmenu-row::before {
width: 4px;
opacity: 1;
}
/* R217 — the heading answers the block, not just its own row. */
.navmenu-fullbar .navmenu-item:hover > .navmenu-row,
.navmenu-fullbar .navmenu-item:focus-within > .navmenu-row,
.navmenu-fullbar .navmenu-row:hover,
.navmenu-fullbar .navmenu-row:focus-visible {
background: transparent;
color: var(--nw-fullbar-hover-fg, var(--navmenu-hover-ink));
}
/* the level-3 list is printed, never folded, and never opened as a fourth
level — the markup for this style stops at the products on purpose */
.navmenu-fullbar .navmenu-sub {
grid-template-rows: 1fr;
opacity: 1;
visibility: visible;
}
.navmenu-fullbar .navmenu-sub-list {
margin: 0;
padding: 0;
border-left: 0;
}
/* the level-3 entries and product names: the smaller size, dense enough to
scan but with a line box tall enough that two-line names do not collide */
.navmenu-fullbar .navmenu-sub .sub-link {
display: block;
/* R215 — 1.5rem of left padding puts the words 24px inside the column edge,
on the same vertical as the heading, with the hover dot in the gutter.
The old `margin: 0 -0.5rem` overhang is gone: the clip cut it away and
`max-content` then under-sized the column, cropping the longest names. */
padding: 0.36rem 0.55rem 0.36rem 1.5rem;
margin: 0;
border-radius: var(--radius);
font-size: var(--nw-fullbar-l2, 0.85rem);
line-height: 1.55;
/* R215 — one line, by request. A name is a name: it is not a paragraph, and a
wrapped one broke the rhythm of the list (and, at the old fixed width, most
of them wrapped). The column now sizes itself to the longest name, so
nothing overflows and nothing is cut off. */
white-space: nowrap;
color: var(--nw-fullbar-sub, var(--navmenu-ink-soft));
/* R212 — full opacity. The old 0.82 / 0.68 stacked on an already soft ink
and pushed the products down to roughly 2.6:1 on the cream pane. */
opacity: 1;
}
/* R214 — the level-3 rows light up under the pointer.
*
* This is the interaction the merchant asked to borrow from the 3-column grid
* style ("只参考交互效果"): in that style every level-2 block sits on a wash and
* the third level answers the pointer, so the panel tells you what is
* clickable before you click it. The bar had the same rule already, but it was
* answered by the theme's generic grey — `--navmenu-hover-bg`, i.e.
* `rgba(128,128,128,0.20)` — which on a cream pane is roughly 4 levels out of
* 255 different from the pane itself. Visible in a diff, invisible in use.
*
* So the bar's level-3 rows get their own answer: a brand-amber film plus a 2px
* rule at the left edge of the hovered row. The amber is what the level-2
* accent bar is drawn in, so the two states read as one system, and it holds up
* on the dark theme too (amber over dark brown is as clear as amber over
* cream). The merchant's own "Menu bar — hover background" token still wins
* where it is set; only the theme's generic grey is dropped here.
*
* 0.16s instead of the sheet's 0.34s: this is a pointer tracking a row, not a
* transition someone is supposed to watch. A slow fade under a moving mouse
* reads as lag. */
.navmenu-fullbar .navmenu-sub .sub-link {
transition: background 0.16s var(--ease), color 0.16s var(--ease),
box-shadow 0.16s var(--ease);
}
.navmenu-fullbar .navmenu-sub .sub-link:hover,
.navmenu-fullbar .navmenu-sub .sub-link:focus-visible {
/* R217 — the row under the pointer deepens once more on top of the block it
sits in (the two translucent layers compound), so "the directory I am in"
and "the name I am about to click" are two distinguishable shades of the
same grey instead of two different accents. The merchant's own hover
colour still wins; only the theme's amber film is dropped here. */
background: var(--nw-fullbar-hover-bg, rgba(0, 0, 0, 0.16));
color: var(--nw-fullbar-hover-fg, var(--navmenu-hover-ink));
}
/* R215 — the accent at the left of the hovered row is a DOT, not a rule.
*
* R214 drew a 2px bar here and put it on the clip's edge — which was also
* where the words started, because the row's own left padding cancelled its
* negative margin to zero. A marker drawn on top of the first letter of the
* text is what the merchant saw as "紧贴在了文字上，很混乱".
*
* Two changes fix that properly rather than by nudging a number:
* 1. the row keeps 24px of left padding (see the base rule), so the words
* start well inside the pill and there is a gutter to put a marker in;
* 2. the marker is a 5px disc, centred in that gutter — it reads as a bullet
* on the row being pointed at, and it cannot collide with a glyph on any
* theme, whatever the ink.
*
* Geometry (measured in a real render): the row starts at the column edge, so
* `left: 0.85rem` (13.6px) puts the 5px disc 13.6px in, ending at 18.6px;
* the words begin at 24px — a 5.4px gap between dot and text.
*
* It is a ::before rather than an `inset` box-shadow because R214 measured
* that an inset shadow painted nothing on the old overhanging row. A disc also
* cannot be drawn by a shadow at all: a shadow is a straight edge, and the
* merchant asked for a dot. */
.navmenu-fullbar .navmenu-sub .sub-link::before {
content: '';
display: block; /* the shared `.navmenu-sub .sub-link::before` is display:none */
position: absolute;
left: 0.85rem;
top: 50%;
width: 5px;
height: 5px;
margin-top: -2.5px;
border-radius: 50%;
background: var(--amber);
opacity: 0;
transform: none; /* inherits the shared tick's scaleY(0.35) otherwise */
transition: opacity 0.14s var(--ease);
}
.navmenu-fullbar .navmenu-sub .sub-link:hover::before,
.navmenu-fullbar .navmenu-sub .sub-link:focus-visible::before {
opacity: 1;
}
/* products are names, not directories: they step back by WEIGHT, not by
fading — a read product name is worth more than a tidy ramp */
.navmenu-fullbar .navmenu-sub .navmenu-product {
font-weight: 400;
}
@media (prefers-reduced-motion: reduce) {
.navmenu,
.navmenu *,
.navmenu *::before,
.navmenu *::after {
transition-duration: 0.001ms !important;
animation-duration: 0.001ms !important;
}
}
/* R135 — the head inline script adds this class before first paint when
either client-side mirror says the visitor already agreed, so a page
delivered from a cache (or any other stale copy) never flashes the
notice back on. */
.nw-consent-given #cookie-notice { display: none !important; }
/* ==========================================================================
R144 — customer product reviews & ratings.
Same tokens as the rest of the sheet: amber for stars, --line for the
empty ones, --forest-800 ink, --sand panels. Nothing new to theme.
========================================================================== */
.product-rating {
display: flex;
align-items: center;
gap: 0.5rem;
margin: 0.35rem 0 0.6rem;
}
.stars {
position: relative;
display: inline-block;
font-size: var(--fs-sm);
letter-spacing: 0.12em;
line-height: 1;
color: var(--line);
}
.stars-fill {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
white-space: nowrap;
color: var(--amber);
}
.product-rating .rating-num { font-weight: 700; color: var(--forest-800); }
.product-rating .rating-count { font-size: var(--fs-sm); color: var(--forest-600); }
.product-rating .rating-count:hover { color: var(--forest-900); }
.product-reviews { padding: 3.5rem 0; border-top: 1px solid var(--line); }
.product-reviews .reviews-summary {
display: flex;
align-items: center;
/* R168 — the heading above is centred; the summary line follows it on the
same axis instead of hanging left while everything else centres. */
justify-content: center;
gap: 0.5rem;
color: var(--forest-600);
}
.review-flash {
/* R172 — the notice spans the SAME width as the review cards / the form
card: the identical inline padding + transparent 1px border trick the
list and the compose row use, no 640px cap — one width everywhere. */
margin: 0 auto 1.4rem;
padding: 0.75rem calc(clamp(1.6rem, 4vw, 3rem) + 1px);
border: 1px solid transparent;
border-radius: var(--radius-sm);
font-size: var(--fs-sm);
/* R168 — the moderation flash reads as a centred notice, not a left rail */
text-align: center;
}
.review-flash-success { background: var(--sand); color: var(--success); font-weight: 600; }
.review-flash-error { background: var(--sand); color: #b3261e; font-weight: 600; }
.review-list {
list-style: none;
/* R150 — the cards span exactly the product-video width: the video lives
inside .product-info-box (same container, padding clamp(1.6rem,4vw,3rem)),
so mirroring that padding here makes every card equal to the frame at
every viewport — no magic 960px any more. The inset doubles as the
"slightly indented, well-margined" gutter the cards keep on phones. */
padding-inline: clamp(1.6rem, 4vw, 3rem);
/* and the info-box's 1px border is mirrored as transparent, or the cards
would run 2px wider than the frame (measured 1104 vs 1102) */
border: 1px solid transparent;
margin: 0 auto 2.25rem;
/* R147 — one card per review, evenly divided by the gaps, not by hairlines */
display: grid;
gap: 0.9rem;
}
/* R150 — the pager hangs with the cards, not with the bare container edge */
.review-pager { padding-inline: clamp(1.6rem, 4vw, 3rem); }
/* R149 — each review is a standalone card riding --paper (the theme's own
card surface, so Noir repaints it for free), no border, the shared
--radius token; separation comes from the grid gap alone. */
.review-item {
padding: 1.15rem 1.3rem 1.25rem;
background: var(--paper);
border-radius: var(--radius);
}
.review-head {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 0.55rem;
margin-bottom: 0.55rem;
}
.review-author { font-weight: 700; color: var(--forest-800); font-size: var(--fs-md); }
.review-verified {
font-size: var(--fs-xs);
font-weight: 600;
color: var(--success);
padding: 0.12rem 0.55rem;
border-radius: var(--radius-sm);
background: rgba(63, 122, 74, 0.12);
}
.review-date { font-size: var(--fs-xs); color: var(--muted); margin-left: auto; }
.review-item .stars { font-size: var(--fs-md); }
.review-body { color: var(--ink-soft); line-height: 1.65; font-size: var(--fs-md); max-width: 78ch; }
.review-nudge { text-align: center; color: var(--muted); }
.review-nudge a { font-weight: 600; }
/* R167 — the form is a white card riding --paper, the same surface as the
review cards above it (was --sand). The horizontal insets live on the
.review-compose row, so the form spans exactly the review-list width —
the same clamp the cards use, plus the transparent 1px border trick that
keeps them level with the product frame. A gentle hover lift matches the
card grammar. */
.review-form {
margin: 1.4rem 0 0;
padding: 1.6rem 1.6rem 1.5rem;
background: var(--paper);
border: 1px solid transparent;
border-radius: var(--radius);
transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
/* R168 — fields, labels and the uploader keep their reading alignment;
only the button and the notes below opt back into the centred axis. */
text-align: left;
}
.review-form:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* R167 — the compose row: state line first, then the disclosure buttons.
The insets here align everything with the review cards above.
R168 — the row itself is centred on the section's axis (the heading and
the summary line above it both centre), so the invite reads as a proper
call to action rather than a left-cornered afterthought. */
.review-compose {
margin-top: 1.75rem;
padding-inline: calc(clamp(1.6rem, 4vw, 3rem) + 1px);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
text-align: center;
gap: 0.8rem;
}
.review-compose .review-state {
flex-basis: 100%;
margin: 0;
}
/* / is the no-JS disclosure: the summary wears the site's
own button clothes, the native marker is stripped. */
.review-disclose { display: inline-block; }
/* R172 — an OPEN disclosure becomes a full-width row: the button keeps the
centred axis above its card (was hugging the card's left edge), and the
card below spans the compose row — the exact width of the review form
and the flash notices, so every operation box reads as one family. */
.review-disclose[open] {
display: block;
flex-basis: 100%;
}
.review-disclose[open] .review-disclose-btn {
display: flex;
width: max-content;
margin-inline: auto;
}
.review-disclose-btn {
list-style: none;
cursor: pointer;
user-select: none;
}
.review-disclose-btn::-webkit-details-marker { display: none; }
.review-disclose-btn::marker { content: ''; }
.review-form .review-state { margin: -0.4rem 0 1rem; text-align: center; }
/* the guarded delete: a quiet warning card under its own outline button.
R172 — full row width (matches the form card); the danger disclosure is
block + flex-basis 100% while open, so this just fills the row. */
.review-disclose--danger .review-disclose-btn { color: var(--danger); border-color: var(--danger); }
.review-delete-box {
width: 100%;
margin-top: 0.9rem;
margin-inline: auto;
padding: 1rem 1.15rem;
background: var(--sand);
border-radius: var(--radius);
}
.review-delete-box p { margin: 0 0 0.8rem; font-size: var(--fs-sm); color: var(--ink-soft); }
/* R172 — the confirm button joins the centred axis like every other
button in the compose area. */
.review-delete-form { text-align: center; }
.review-delete-form .btn-danger { display: inline-flex; }
.review-form h3 { margin-top: 0; margin-bottom: 1.05rem; }
/* R147 — breathing room down the form: each field ends with a real gap, the
submit button keeps its distance from the uploader above it, and the
moderation note reads as a footnote, not a stuck-on line. */
.review-form .field { margin-bottom: 1.15rem; }
/* R168 — the submit button and the moderation footnote join the centred
axis (block-level flex + auto margins; full width on phones still wins). */
.review-form .btn-primary { display: flex; margin: 0.4rem auto 0; }
.review-form .review-note { text-align: center; }
.review-state { color: var(--muted); font-size: var(--fs-sm); margin-bottom: 1rem; }
.review-note { font-size: var(--fs-xs); color: var(--muted); margin-top: 0.75rem; margin-bottom: 0; }
/* the star picker: five radios, filled up to the checked one.
R167 — empty stars were the hairline colour (nearly invisible on any
surface); they now read as clearly hollow grey against the amber fill.
The control rides a sand pill so it cannot be missed, every star is a
real touch target, and the hovered/checked star grows. */
.star-input {
display: inline-flex;
flex-direction: row-reverse;
gap: 0.3rem;
padding: 0.35rem 0.8rem;
background: var(--sand);
border-radius: 999px;
}
.star-input input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.star-input label {
font-size: var(--fs-2xl);
line-height: 1;
padding: 0.15rem;
color: color-mix(in srgb, var(--ink) 25%, transparent);
cursor: pointer;
transition: color 0.15s var(--ease), transform 0.18s var(--ease);
}
.star-input input:checked + label,
.star-input input:checked ~ label,
.star-input label:hover,
.star-input label:hover ~ label { color: var(--amber); }
.star-input label:hover,
.star-input input:checked + label { transform: scale(1.15); }
.star-input input:focus-visible + label {
outline: 2px solid var(--forest-600);
outline-offset: 2px;
border-radius: 2px;
}
/* the field is a column flex box — without this the pill stretches to the
full form width and the stars drift to its far end */
.review-form .star-input { align-self: flex-start; }
/* ==========================================================================
R146 — reviews, second pass: buyer photos, calmer motion, touch targets.
Everything rides the existing tokens; nothing new for a theme to learn.
========================================================================== */
/* the review card lifts a touch on hover: border deepens, shadow appears —
same grammar as the product cards, no repaint of the whole surface */
/* R149 — the card lifts on hover: shadow + a 1px rise, no border to deepen
any more (the card has none). Same grammar as the product cards. */
.review-item {
border-radius: var(--radius);
transition: box-shadow 0.25s var(--ease), transform 0.25s var(--ease);
}
.review-item:hover {
box-shadow: var(--shadow-md);
transform: translateY(-2px);
}
/* the buyer's photos of the product — square crops in a tidy row */
.review-images {
display: flex;
flex-wrap: wrap;
gap: 0.55rem;
margin-top: 0.75rem;
}
.review-image {
display: block;
width: 104px;
height: 104px;
border-radius: var(--radius-sm);
overflow: hidden;
background: #fff;
border: 1px solid var(--line);
transition: box-shadow 0.22s var(--ease), transform 0.22s var(--ease), border-color 0.22s var(--ease);
}
.review-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: transform 0.3s var(--ease);
}
.review-image:hover,
.review-image:focus-visible {
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(22, 27, 22, 0.14);
}
.review-image:hover img { transform: scale(1.04); }
.review-image:focus-visible { outline: 2px solid var(--forest-600); outline-offset: 2px; }
/* "Update your review": photos already attached, untick to remove */
.review-keep {
display: flex;
flex-wrap: wrap;
gap: 0.6rem;
}
.review-keep-item {
position: relative;
display: grid;
grid-template-rows: auto auto;
justify-items: center;
gap: 0.25rem;
cursor: pointer;
}
.review-keep-item input {
position: absolute;
opacity: 0;
pointer-events: none;
}
.review-keep-thumb {
display: block;
width: 76px;
height: 76px;
border-radius: var(--radius-sm);
overflow: hidden;
border: 2px solid var(--success);
background: #fff;
transition: border-color 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease);
}
.review-keep-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.review-keep-keep { font-size: var(--fs-xs); color: var(--success); font-weight: 600; }
.review-keep-item input:not(:checked) + .review-keep-thumb {
border-color: var(--line);
opacity: 0.4;
transform: scale(0.96);
}
.review-keep-item input:not(:checked) ~ .review-keep-keep { color: var(--muted); }
.review-keep-item input:focus-visible + .review-keep-thumb {
outline: 2px solid var(--forest-600);
outline-offset: 2px;
}
/* R167 — the picker's touch targets, pill and grow now live in the main
.star-input block above (one rule set, not two competing ones). */
/* inputs: 1rem stops iOS zoom-on-focus; the amber focus ring matches the site */
.review-form textarea,
.review-form input[type="text"] { font-size: var(--fs-md); }
.review-form textarea {
transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.review-form textarea:focus {
border-color: var(--amber);
box-shadow: 0 0 0 3px rgba(201, 138, 61, 0.14);
outline: none;
}
.review-form .btn-primary {
transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease);
}
.review-form .btn-primary:hover {
transform: translateY(-1px);
box-shadow: 0 6px 14px rgba(201, 138, 61, 0.28);
}
@media (max-width: 640px) {
/* the head wraps: date drops onto its own right-aligned row instead of
squeezing the name and badge */
.review-date { flex-basis: 100%; margin-left: 0; text-align: right; }
.review-item { padding: 1.05rem 0.85rem; }
.review-image { width: 84px; height: 84px; }
.review-compose { padding-inline: clamp(0.85rem, 4vw, 1.6rem); }
.review-form { padding: 1.15rem 1rem; }
.review-form .btn-primary { width: 100%; }
.star-input label { font-size: var(--fs-2xl); }
}
/* ==========================================================================
R180 - Overflow containment (additive only)
Long unbroken strings - order numbers, transaction ids, email addresses,
product names - must wrap instead of being cut off by the root element's
overflow-x clip. `break-word` does not affect min-content sizing, so no
column, grid track or flex item changes width. Nothing here sets a width,
height, position, display value or new breakpoint.
========================================================================== */
h1, h2, h3, h4, p, li, dd, dt, td, th,
.detail-list dd, .mail-card-title, .conversation-subject,
.product-card-title, .order-item-title, .account-message-body,
.dropdown-link, .status-pill, .badge {
overflow-wrap: break-word;
}
.table-scroll { overscroll-behavior-x: contain; }
/* Phones only: short buttons reach a 44px thumb target. Uses the 560px
breakpoint the storefront already ships; desktop is untouched. */
@media (max-width: 560px) {
.btn, .btn-sm { min-height: 44px; }
}
/* ==========================================================================
R181 - Long labels on phones (additive only)
These three carry merchant- or visitor-supplied text (order status,
presence text, action links). Their desktop nowrap is unchanged; on a
560px screen it is released so a long value wraps instead of pushing the
row past the edge. The storefront's existing 560px breakpoint is reused.
========================================================================== */
@media (max-width: 560px) {
.status-pill, .presence-badge, .order-history-actions { white-space: normal; }
}
/* ==========================================================================
R211 — administrator maintenance preview
--------------------------------------------------------------------------
A signed-in administrator sees the real shop while it is closed; this strip
is the only thing that says so. It sits above the announcement bar, uses the
brand ink rather than a warning red (nothing is broken), and disappears the
moment the shop is reopened.
========================================================================== */
.nw-maint-preview {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 0.4rem 1rem;
padding: 0.5rem 1.25rem;
background: var(--forest-900);
color: #fff;
font-size: var(--fs-xs);
line-height: 1.4;
text-align: center;
}
.nw-maint-preview strong { font-weight: 700; }
.nw-maint-preview a {
color: var(--amber);
text-decoration: underline;
text-underline-offset: 2px;
white-space: nowrap;
}
.nw-maint-preview a:hover { color: var(--amber-100); }
/* ==========================================================================
THEME OVERRIDES — Montserrat Noir
Dark brown nav / Modern / One family
Every value below wins over the baseline by source order only, so this
file behaves identically in any standards-compliant browser.
========================================================================== */
/* --- 1. Design tokens ------------------------------------------------- */
:root {
--forest-900: #161b16;
--forest-800: #1f261f;
--forest-700: #2c352c;
--forest-600: #3a463a;
--pine: #4d5c4a;
--moss: #77846b;
--sage: #aeb9a2;
--amber: #c98a3d;
--amber-600: #a96f2a;
--amber-100: #f3e3cb;
--cream: #f6f3ec;
--paper: #fdfbf6;
--sand: #ece7dc;
--ink: #211f1a;
--ink-soft: #4c493f;
--muted: #7a7669;
--line: #e3ddd0;
--line-dark: rgba(255, 255, 255, 0.12);
--danger: #b5402f;
--success: #3f7a4a;
--font-display: 'Montserrat', 'Avenir Next', 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
--font-body: 'Montserrat', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--radius: 3px;
--radius-sm: 3px;
--shadow-sm: 0 1px 2px rgba(22, 27, 22, 0.06);
--shadow-md: 0 10px 30px rgba(22, 27, 22, 0.10);
--shadow-lg: 0 24px 60px rgba(22, 27, 22, 0.18);
}
/* --- 2. Chrome (header bar, drawers, dropdown panels) ----------------- */
.site-header {
background: rgba(59, 49, 48, 0.72);
border-bottom-color: rgba(255, 255, 255, 0.12);
}
.site-header.is-scrolled {
background: rgba(59, 49, 48, 0.94);
box-shadow: 0 10px 34px rgba(0, 0, 0, 0.28);
}
.mobile-menu { background: rgba(59, 49, 48, 0.985); }
.dropdown {
background: rgba(42, 42, 42, 0.97);
border-color: #e3ddd0;
box-shadow: var(--shadow-md);
}
.dropdown-link:hover, .dropdown-link:focus-visible {
background: rgba(201, 138, 61, 0.12);
color: var(--forest-900);
}
.navmenu {
--navmenu-block-ink: #FFFFFF;
--navmenu-block: rgba(255, 255, 255, 0.06);
--navmenu-block-hover: rgba(0, 0, 0, 0.26);
--navmenu-ink: #FFFFFF;
--navmenu-ink-soft: rgba(255, 255, 255, 0.86);
--navmenu-hover-bg: rgba(255, 255, 255, 0.10);
--navmenu-hover-ink: #FFFFFF;
--navmenu-surface: rgb(42 42 42 / var(--nav-menu-alpha, 72%));
--navmenu-btn-ink: #F5F5F5;
--navmenu-btn-wash: rgba(255, 255, 255, 0.12);
--navmenu-btn-wash-ink: #FFFFFF;
--navmenu-btn-face: rgba(28, 28, 28, 0.94);
--navmenu-btn-face-ink: #F5F5F5;
--navmenu-btn-face-hover: #EFEFEF;
--navmenu-btn-face-hover-ink: #141414;
--navmenu-btn-edge: rgba(255, 255, 255, 0.18);
--navmenu-scroll-thumb: rgba(255, 255, 255, 0.32);
}
.header-search input { background: rgba(255, 255, 255, 0.09); }
.header-search input:focus { background: rgba(255, 255, 255, 0.15); }
/* --- 3. Buttons ------------------------------------------------------- */
.btn { border-radius: var(--nw-btn-radius, 999px); }
.btn-primary {
background: var(--nw-btn-primary-bg, var(--amber));
color: var(--nw-btn-primary-fg, #14120E);
box-shadow: 0 6px 18px color-mix(in srgb, var(--nw-btn-primary-bg, var(--amber)) 30%, transparent);
}
.btn-primary:hover {
background: var(--nw-btn-primary-hover, var(--amber-600));
color: var(--nw-btn-primary-fg, #14120E);
box-shadow: 0 10px 26px color-mix(in srgb, var(--nw-btn-primary-hover, var(--amber)) 38%, transparent);
}
.btn-outline { color: var(--nw-btn-outline-fg, var(--forest-800)); border-color: var(--nw-btn-outline-border, var(--forest-600)); }
.btn-outline:hover { background: var(--nw-btn-outline-hover-bg, var(--forest-800)); color: var(--nw-btn-outline-hover-fg, #FFFFFF); }
.btn-add { background: var(--nw-btn-cta-bg, var(--forest-800)); color: var(--nw-btn-cta-fg, #FFFFFF); }
.btn-add:hover { background: var(--nw-btn-cta-hover, var(--amber)); color: var(--nw-btn-cta-fg, #14120E); }
.btn-quick-add { background: var(--nw-btn-icon-bg, var(--amber)); color: var(--nw-btn-icon-fg, #14120E); }
.btn-quick-add:hover { background: var(--nw-btn-icon-hover, var(--amber-600)); color: var(--nw-btn-icon-fg, #14120E); }
.btn-danger:hover { background: var(--nw-btn-danger-hover, var(--danger)); color: #FFFFFF; }
.badge { background: var(--amber); color: #14120E; }
.badge-soldout { background: var(--ink-soft); color: #FFFFFF; }
.cart-toggle::after { background: var(--amber); color: #14120E; }
.btn-paypal { box-shadow: 0 6px 18px rgba(255, 196, 57, 0.28); }
/* --- 4. Accent tints used across account & messaging ------------------ */
.account-message-bubble.is-customer {
background: rgba(201, 138, 61, 0.12);
border-color: rgba(201, 138, 61, 0.30);
}
.msg-customer { background: rgba(201, 138, 61, 0.14); }
.compose-card { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(201, 138, 61, 0.09); }
.mail-status.is-replied { background: rgba(63, 122, 74, 0.14); color: var(--success); }
.order-status.is-completed, .order-status.is-paid { background: rgba(63, 122, 74, 0.14); }
/* --- 5. Surfaces & type rhythm ---------------------------------------- */
.product-card { background: var(--paper); border-color: var(--line); }
.subcat-chip { background: var(--paper); color: var(--ink-soft); border-color: var(--line); }
.subcat-chip:hover, .subcat-chip.is-active {
background: var(--forest-800); color: #FFFFFF; border-color: var(--forest-800);
}
::selection { background: rgba(201, 138, 61, 0.28); color: #161b16; }
.skip-link { background: var(--forest-900); color: #FFFFFF; }
/* R46/R47 cookie bar: same pairing as the skip link so a dark theme cannot
leave light text on its near-white --forest-900. The two pill buttons
(Agree / Privacy Policy) are repainted with audited foregrounds. */
.cookie-notice { background: var(--forest-900); color: #FFFFFF; border-top: 0; }
.cookie-btn-agree { background: var(--amber); color: #14120E; }
.cookie-btn-ghost { color: #FFFFFF; border-color: rgba(255, 255, 255, 0.4); }
.cookie-btn-ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.7); }
input, select, textarea {
background: var(--paper); color: var(--ink); border-color: var(--line);
}
input::placeholder, textarea::placeholder { color: var(--muted); }
/* --- 6. Theme-specific styling ---------------------------------------- */
/* --- 6a. ONE type scale for the whole store ------------------------------
These tokens are what every font-size in this stylesheet now points at
(_tmp/gen_themes.py rewrites them for themes that ask for it). Sizes up to
--fs-xl are fixed rem steps so UI chrome never wobbles; the two display
steps are fluid. */
:root {
--fs-2xs: 0.72rem;
--fs-xs: 0.82rem;
--fs-sm: 0.92rem;
--fs-md: 1rem;
--fs-lg: 1.15rem;
--fs-xl: 1.45rem;
--fs-2xl: clamp(1.9rem, 1.35rem + 1.6vw, 2.5rem);
--fs-3xl: clamp(2.25rem, 1.5rem + 2.6vw, 3.35rem);
--leading-body: 1.72;
--leading-display: 1.14;
color-scheme: light;
accent-color: var(--amber);
}
html { font-size: 100%; -webkit-text-size-adjust: 100%; }
body {
font-size: var(--fs-md);
line-height: var(--leading-body);
letter-spacing: -0.002em;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
h1, h2, h3, h4 {
line-height: var(--leading-display);
text-wrap: balance;
}
h1, .hero h1, .page-hero h1 { font-size: var(--fs-3xl); }
h2, .section-header h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }
.content-page h2 { font-size: var(--fs-xl); }
.content-page h3 { font-size: var(--fs-lg); }
.content-page .lead, .hero-lead { font-size: var(--fs-lg); line-height: 1.6; }
p, li, dd, dt, blockquote { font-size: var(--fs-md); }
p, .content-page p, .content-page li { text-wrap: pretty; }
small, .form-help, .field-help { font-size: var(--fs-xs); }
/* R53's wordmark voice survives the rewrite: the base 2rem rule lands on
--fs-2xl during normalization, so it is re-pinned here at its designed
size (phones step back down via the generator's 560px rule). */
.announcement { font-size: 0.8rem; }
.logo { font-size: 2rem; }
/* --- 6b. Buttons & controls: one UI step -------------------------------- */
/* R181 — the .btn pin above was dead code: the design block near the end of
this file declares .btn again and always won. One declaration now. */
.btn-large { font-size: var(--fs-md); }
.btn-small { font-size: var(--fs-xs); }
.badge, .cart-toggle::after, .subcat-chip, .tag { font-size: var(--fs-2xs); }
label, .field label, .admin-form-row label { font-size: var(--fs-xs); }
/* 16px controls: one step for the whole form AND no iOS focus zoom */
input, select, textarea { font-size: var(--fs-md); }
/* Montserrat Noir — one family, four voices. Weight (never a second family)
separates the roles: 700 display headings, 600 chrome (nav, buttons,
labels, table heads), 500 leads and card titles, 400 body copy. */
h1, .hero h1, .page-hero h1, .content-page h1,
h2, .section-header h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; }
h5, h6 { font-weight: 600; }
.logo { font-weight: 700; letter-spacing: 0.01em; }
.hero-lead, .content-page .lead { font-weight: 500; }
label, .field label, .admin-form-row label, legend { font-weight: 600; }
th, .eyebrow { font-weight: 600; }
.footer-brand .logo, .footer-links h3 { font-weight: 600; }
/* --- announcement bar: exactly the default row ---------------------------
Same background, same 0.8rem size (pinned by the shared type scale block
above) and the same line box as the default stylesheet — only the
letterforms are Montserrat. */
.announcement {
background: var(--forest-900);
color: var(--sage);
font-weight: 400;
line-height: 1.65;
letter-spacing: 0.06em;
text-transform: none;
padding: 0.5rem 1rem;
}
/* the ramp's "p { font-size: …md }" rule would inflate the line box — the
paragraph follows the bar's own size, exactly like the default sheet. */
.announcement p { font-size: inherit; }
/* --- navigation bar: light solid at rest, deep frosted while scrolling
Two states you can tell apart at a glance: at rest the underlay is a
slightly lifted solid brown (#463b3a), once the store scrolls it deepens
to a darker rgba(22,17,16,.90) pane behind a strong 24px blur, so the bar
reads DARKER and the frost becomes plainly visible while the page slides
beneath it. The frost lives on a ::before underlay — never on the header
itself — so the header does not become a backdrop root and the dropdown
below can blur the real page. No border: the pane meets the hero
cleanly, with no light hairline. */
.site-header {
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
border-bottom: 0;
box-shadow: none;
}
.site-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: #463b3a;
backdrop-filter: blur(24px) saturate(170%);
-webkit-backdrop-filter: blur(24px) saturate(170%);
transition: background 0.3s var(--ease);
pointer-events: none;
}
.site-header.is-scrolled::before { background: rgba(22, 17, 16, 0.90); }
/* the generated chrome pin paints .site-header.is-scrolled itself at 0.94 —
that higher-specificity fill would sit ON TOP of the ::before underlay and
hide the frost, so it is pinned back to transparent here. */
.site-header.is-scrolled { background: transparent; box-shadow: 0 12px 40px rgba(20, 15, 12, 0.38); }
.logo { color: #FFFFFF; }
/* --- navigation voice: Montserrat, two clear levels ----------------------
Level 1 (bar buttons) reads at the SAME size as the default stylesheet
(0.92rem) but one weight up; level 2 (dropdown links) steps down to the
0.82rem token at weight 500, so parent and child menus are unmistakably
ranked — primary first, secondary quieter. No uppercase: mixed case keeps
the glyphs at the default sheet's optical size. */
.nav-list > li > a {
font-size: var(--fs-sm);
font-weight: 600;
letter-spacing: 0.02em;
border-radius: 0;
background: transparent;
}
.nav-list > li > a::after {
content: '';
position: absolute;
left: 0.9rem;
right: 0.9rem;
bottom: 0.2rem;
height: 2px;
background: var(--amber);
transform: scaleX(0);
transform-origin: left center;
transition: transform 0.28s var(--ease);
}
.nav-list > li > a:hover,
.nav-list > li > a:focus-visible {
color: #FFFFFF;
background: transparent;
}
.nav-list > li > a:hover::after,
.nav-list > li > a:focus-visible::after { transform: scaleX(1); }
.chevron { color: rgba(255, 255, 255, 0.75); }
/* --- buttons: default voice ----------------------------------------------
Match the default stylesheet's button type exactly — 0.95rem, weight 600,
no uppercase, the default 0.01em tracking — so labels sit at the same
proportion inside the pill shape. Amber surfaces take WHITE labels like
the default sheet does (best_on falls back to near-black there because
white misses AA on #c98a3d; the default look wins). */
.btn {
/* 0.95rem — the default sheet's .btn size. Written as a calc() because the
ramp rewriter snaps absolute rem sizes onto the nearest step (0.92rem);
calc()/var() are left alone by design. */
font-size: calc(var(--fs-sm) + 0.03rem);
font-weight: 600;
letter-spacing: 0.01em;
text-transform: none;
}
/* R215 — these white labels used to be literals. That silently disconnected
Admin → Styles → Buttons: the merchant saved --nw-btn-primary-fg (etc.) into
the page's