wrapping an
![]()
) and force them to inline-block + reset the global .rte img margin
so they flow naturally in a row, wrapping at viewport edge.
Single image content (e.g. one full-width hero in the description) is
unaffected — the inline-block change only matters when adjacent inline-
blocks share a line. A solo image gets a full row to itself either way.
:has() support: Chrome/Edge 105+, Safari 15.4+, Firefox 121+ — universal
modern browsers (Hyprism already uses :has() throughout per Rules 190,
208, 213). */
.ne-product-description p:has(> img:only-child),
.ne-product-description p:has(> a:only-child > img:only-child),
.ne-product-description p:has(> span:only-child > img:only-child),
.ne-product-description div:has(> img:only-child),
.ne-product-description div:has(> a:only-child > img:only-child),
.ne-product-description div:has(> span:only-child > img:only-child) {
display: inline-block;
vertical-align: middle;
margin: 0 var(--ne-space-2) var(--ne-space-2) 0;
}
/* Reset the global .rte img margin-block (critical.css line 1229) for
images inside the image-only wrappers — otherwise the inherited
16px top+bottom margin pushes them out of the inline-block row. */
.ne-product-description p:has(> img:only-child) > img,
.ne-product-description p:has(> a:only-child > img:only-child) > a > img,
.ne-product-description p:has(> span:only-child > img:only-child) > span > img,
.ne-product-description div:has(> img:only-child) > img,
.ne-product-description div:has(> a:only-child > img:only-child) > a > img,
.ne-product-description div:has(> span:only-child > img:only-child) > span > img {
margin: 0;
vertical-align: middle;
}
/* Multi-image paragraphs — when merchants paste several images into a
single (typical for a row of certification/trust badges, e.g.
![]()
![]()
![]()
![]()
), the global reset
`img { display: block }` (critical.css line 46) stacks them vertically
even though the markup intends a row. Counter that for any image inside
the description so they flow inline horizontally and wrap at viewport
edge. Images keep their intrinsic width (HTML width attr or natural
size). The :only-child rules above still apply on top — they make the
wrapping itself inline-block so adjacent solo-image
s also flow
side-by-side. */
.ne-product-description img {
display: inline-block;
vertical-align: middle;
margin-block: 0;
}
.ne-product-description--font-body { font-family: var(--font-body--family); }
.ne-product-description--font-subheading { font-family: var(--font-subheading--family); }
.ne-product-description--font-heading { font-family: var(--font-heading--family); }
.ne-product-description--font-accent { font-family: var(--font-accent--family); }
/* Show-more mode: line-clamp closed → button reveals full text */
.ne-product-description--truncate .ne-product-description__body {
display: -webkit-box;
-webkit-line-clamp: var(--ne-pd-clamp-lines, 4);
-webkit-box-orient: vertical;
overflow: hidden;
}
.ne-product-description--truncate[data-expanded="1"] .ne-product-description__body {
display: block;
-webkit-line-clamp: unset;
overflow: visible;
}
.ne-product-description__toggle {
margin-top: var(--ne-space-2);
background: none;
border: none;
padding: 0;
color: var(--ne-scheme-accent);
font-size: var(--ne-font-size-sm);
cursor: pointer;
text-decoration: underline;
text-underline-offset: 3px;
font-family: inherit;
}
.ne-product-description__toggle-hide { display: none; }
.ne-product-description--truncate[data-expanded="1"] .ne-product-description__toggle-show { display: none; }
.ne-product-description--truncate[data-expanded="1"] .ne-product-description__toggle-hide { display: inline; }
/* Scroll mode: max-height = preview_lines * line-height + internal scroll */
.ne-product-description--scroll {
position: relative;
}
.ne-product-description--scroll .ne-product-description__body {
max-height: calc(var(--ne-pd-clamp-lines, 4) * 1.7em);
overflow-y: auto;
padding-right: var(--ne-space-2);
padding-bottom: var(--ne-space-3);
scrollbar-width: thin;
scrollbar-color: var(--ne-scheme-border) transparent;
/* Soft fade at bottom so text dissolves into the chevron hint */
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
mask-image: linear-gradient(to bottom, #000 calc(100% - 24px), transparent 100%);
}
/* Hide the mask once the user has scrolled to the bottom (JS sets attr) */
.ne-product-description--scroll[data-scroll-bottom="1"] .ne-product-description__body {
-webkit-mask-image: none;
mask-image: none;
}
.ne-product-description--scroll .ne-product-description__body::-webkit-scrollbar { width: 4px; }
.ne-product-description--scroll .ne-product-description__body::-webkit-scrollbar-track { background: transparent; }
.ne-product-description--scroll .ne-product-description__body::-webkit-scrollbar-thumb {
background: var(--ne-scheme-border);
border-radius: 2px;
}
/* Chevron-down hint — positioned at the bottom-center of the wrap,
bounce-pulse animation. Hidden once scrolled to bottom. */
.ne-product-description--scroll::after {
content: "";
position: absolute;
left: 50%;
bottom: 4px;
width: 18px;
height: 18px;
transform: translateX(-50%);
background-color: var(--ne-scheme-accent);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
pointer-events: none;
animation: ne-pd-scroll-bounce 1.6s ease-in-out infinite;
opacity: 0.85;
}
.ne-product-description--scroll[data-scroll-bottom="1"]::after {
opacity: 0;
animation: none;
}
@keyframes ne-pd-scroll-bounce {
0%, 100% { transform: translate(-50%, 0); }
50% { transform: translate(-50%, 4px); }
}
/* END_BLOCK:product-description */
/* START_BLOCK:product-grid (INDEX:113) */
/* Grid is always transparent — cards float directly on the section
bg. Scheme class still applies but we kill its painted bg. */
.ne-pg { width: 100%; background: transparent !important; }
/* Grid — subgrid row count adapts to which card rows are actually
rendered (media + title + price always; swatches / ATC only when
the toggle is on). Parent owns `--ne-pg-rows-tpl` (computed in
Liquid), cards inherit the template. */
.ne-pg__grid {
display: grid;
/* minmax(0, 1fr) stops tracks from shrinking to content-width
when images have intrinsic sizes, and gives the browser a
deterministic basis for subpixel rounding — prevents the tiny
asymmetry where one column renders 1px narrower/wider than
another. */
grid-template-columns: repeat(var(--ne-pg-columns, 4), minmax(0, 1fr));
grid-template-rows: var(--ne-pg-rows-tpl, auto 1fr auto auto auto);
grid-auto-rows: var(--ne-pg-rows-tpl, auto 1fr auto auto auto);
/* align-items: stretch makes each card cell fill the row height,
giving the subgrid in the card a definite container to pass
through. Without it, narrow viewports (mobile 2-col) can show
cards with mismatched bottoms because the subgrid receives no
explicit row-end to align to. */
align-items: stretch;
/* Row-gap matches column-gap so multi-row grids breathe. Cards
in subgrid mode would inherit this row-gap and leak section-bg
through the media→title→price seam — `.ne-product-card` itself
declares `row-gap: 0` (snippets/product-card.liquid) which the
subgrid spec honours: a child's explicit row-gap wins over the
inherited value. So the parent can set whatever row-gap it
likes for inter-card spacing. */
row-gap: var(--ne-pg-gap, 16px);
column-gap: var(--ne-pg-gap, 16px);
/* Padding removed (user 2026-05-23: cards should align flush with
the block edge). Previously had 8px h-padding + 8/16px v-padding
as breathing room — now the cards extend to the grid's exterior.
The section_padding_x setting at the containing section gives
merchants global control over the inset, so this internal padding
is redundant. Vertical padding kept as 0 — section padding-top/
bottom handles that side. */
padding: 0;
}
/* Card row-span per row-count class (can't use var() inside
`grid-row: span X` — browsers require a literal integer). */
.ne-pg--rows-3 .ne-pg__grid > .ne-product-card,
.ne-pg--rows-3 .ne-pg__slide > .ne-product-card { grid-row: span 3; }
.ne-pg--rows-4 .ne-pg__grid > .ne-product-card,
.ne-pg--rows-4 .ne-pg__slide > .ne-product-card { grid-row: span 4; }
.ne-pg--rows-5 .ne-pg__grid > .ne-product-card,
.ne-pg--rows-5 .ne-pg__slide > .ne-product-card { grid-row: span 5; }
/* Each card spans the 5 rows of its own row in the grid
(subgrid applied to .ne-product-card itself — see product-card.liquid).
Safari note: supports subgrid since 16.0. */
@media (max-width: 989px) {
.ne-pg__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 749px) {
.ne-pg__grid {
grid-template-columns: repeat(var(--ne-pg-columns-mobile, 2), 1fr);
column-gap: calc(var(--ne-pg-gap, 16px) * 0.75);
/* Vertical breathing room between card-rows on mobile. The card's
own grid (snippets/product-card.liquid line 278) declares
`row-gap: 0` so the parent's row-gap does NOT leak into the
subgrid card-internal seams (media→title→price). Subgrid spec:
a child's explicit row-gap overrides the inherited gap. */
row-gap: var(--ne-pg-gap, 16px);
}
}
/* Carousel — track is a CSS grid with column-flow so cards align
on shared rows (subgrid pass-through: track → slide → card).
This keeps title / price / swatches / ATC on the same baseline
across the carousel just like the grid layout (Rule 127).
`display: grid + grid-auto-flow: column + overflow-x: auto`
scroll-snaps natively. */
/* `overflow-x: clip` hard-clips the track's inline bleed at the
carousel's box edge — off-screen scroll-buffer cards never leak
past. `overflow-y: visible` keeps the track's vertical shadow
bleed (padding-block + margin-block: -32) visible past the
carousel's top/bottom edges. clip (not hidden) is required so
overflow-y can stay visible.
padding-inline reserves an INSET ZONE on the carousel: cards are
pushed away from the box edge so their box-shadow can render
inside the carousel without reaching the visible box border. For
a typical 30px shadow blur, 40px inset gives the shadow full
room to fade. The track inside still has its own padding/margin
trick for vertical bleed; horizontal it sits in the carousel's
content-area, naturally constrained. */
.ne-pg__carousel {
position: relative;
overflow-x: clip;
overflow-y: visible;
padding-inline: 32px;
}
/* Track has overflow-x: auto for horizontal scroll. The shadow
clip happens at the TRACK's border-edge (not at the box edge),
so we add an inline padding equal to `--ne-pg-gap` — that's the
"shadow-bleed buffer" inside the track. Cards sit inside this
padding (inset by gap-width); their box-shadow renders into the
padding zone (within track's border-box) and is visible up to
gap-distance past the card edge. Off-screen scroll-buffer cards
start exactly at gap-distance into the padding zone, which means
padding == gap → off-screen peek width = padding - gap = 0.
scroll-padding-inline aligns scroll-snap targets to the content-
box start (cards don't snap into the padding zone). */
.ne-pg__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - var(--ne-pg-gap, 16px) * (var(--ne-pg-columns, 4) - 1)) / var(--ne-pg-columns, 4));
grid-template-rows: var(--ne-pg-rows-tpl, auto 1fr auto auto auto);
/* Same as grid-mode: stretch cards to row height so subgrid has
a definite container — without this, mobile 2-col layouts can
show cards with misaligned bottoms. */
align-items: stretch;
/* row-gap MUST be 0 — see .ne-pg__grid for full reasoning. Subgrid
children inherit the parent's row-gap, leaking section-bg through
the seam between media/title/price as a 1-2px hairline. */
row-gap: 0;
column-gap: var(--ne-pg-gap, 16px);
overflow-x: auto;
overflow-y: hidden;
/* proximity (not mandatory) — Rule 138: mandatory amplifies
subgrid jitter on smooth-scroll. */
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scrollbar-width: none;
-ms-overflow-style: none;
/* Rule 205: explicit touch-action so mobile swipe delegates fully to
this scroll container — without this the swipe stops mid-card and
can't continue past the block edge. pan-y is included so a vertical
swipe scrolls the PAGE instead of being trapped by this horizontal
carousel (touching a card image previously blocked page scroll). */
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
padding-block: 32px;
padding-inline: var(--ne-pg-gap, 16px);
margin-block: -32px;
scroll-padding-inline: var(--ne-pg-gap, 16px);
/* mask-image disabled — even narrow fade-slivers create a mask
compositing layer on the track that subtly fades alpha across
the entire track, exposing section-bg through subgrid track
boundaries inside cards as variable horizontal hairlines (only
in live preview, not in the editor's iframe sandbox). The
trade-off: shadow edges hard-clip at the carousel border
instead of fading. Acceptable; the carousel padding-inline +
overflow-x: clip keeps shadows visually inside the box. */
-webkit-mask-image: none;
mask-image: none;
will-change: scroll-position;
}
/* Glassmorphism + mask-image are mutually exclusive — mask creates
a stacking context that breaks `backdrop-filter` sampling on
glass cards (the blur effect doesn't render). When glass is on
we drop the mask so blur works; the trade-off is no edge fade. */
.ne-pg--glass-on .ne-pg__track {
-webkit-mask-image: none;
mask-image: none;
}
.ne-pg__track::-webkit-scrollbar { display: none; }
/* Slide passes the track's row template through to the card via
nested subgrid (track → slide → card). Each slide spans N rows
based on the rows-N modifier (literal integer needed; Rule 129). */
.ne-pg__slide {
display: grid;
grid-template-rows: subgrid;
/* Slide subgrid inherits track's row-gap unless explicitly
overridden — without this, even with row-gap: 0 on the track,
the slide's nested-subgrid layer can still leak section-bg
through the seams between media/title/price as hairlines on
hover (subpixel layer-shift exposes the gap). Setting to 0
at every subgrid level eliminates the leak path entirely. */
row-gap: 0;
scroll-snap-align: start;
}
.ne-pg--rows-3 .ne-pg__slide { grid-row: span 3; }
.ne-pg--rows-4 .ne-pg__slide { grid-row: span 4; }
.ne-pg--rows-5 .ne-pg__slide { grid-row: span 5; }
@media (max-width: 989px) {
.ne-pg--carousel .ne-pg__track {
grid-auto-columns: calc((100% - var(--ne-pg-gap, 16px) * 2) / 3);
}
}
@media (max-width: 749px) {
.ne-pg--carousel .ne-pg__track {
grid-auto-columns: calc((100% - var(--ne-pg-gap, 16px) * (var(--ne-pg-columns-mobile, 2) - 1)) / var(--ne-pg-columns-mobile, 2));
}
}
/* Arrows — base reset; per-style chrome below */
.ne-pg__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--ne-scheme-text, currentColor);
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ne-pg--arrow-button .ne-pg__arrow {
background: var(--ne-scheme-bg, #fff);
border: 1px solid var(--ne-scheme-border, rgba(127,127,127,0.25));
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
.ne-pg--arrow-plain .ne-pg__arrow {
background: transparent;
border: 0;
box-shadow: none;
width: 32px;
height: 32px;
}
.ne-pg--arrow-plain .ne-pg__arrow:hover { color: var(--ne-scheme-accent, currentColor); }
/* Below-track layout — arrows positioned ABSOLUTELY beneath the
track (no flex on the carousel). Avoids flex-wrap interactions
with the track's negative margin (which would otherwise shift
items around when the track's margin-box doesn't fill the flex
line). padding-bottom = track's vertical bleed (32) + clearance
(16) + arrow height (40) = 88. */
.ne-pg--carousel:not(.ne-pg--arrows-overlay) .ne-pg__carousel {
padding-bottom: 88px;
}
.ne-pg--carousel:not(.ne-pg--arrows-overlay) .ne-pg__arrow {
position: absolute;
bottom: 0;
margin-top: 0;
}
.ne-pg--carousel:not(.ne-pg--arrows-overlay) .ne-pg__arrow--prev {
left: calc(50% - 44px);
}
.ne-pg--carousel:not(.ne-pg--arrows-overlay) .ne-pg__arrow--next {
left: calc(50% + 4px);
}
/* Overlay mode — arrows centered on the *card* vertically (Rule:
user-requested cardmitte alignment). Carousel is `position: relative`,
arrows absolute at top: 50%. */
.ne-pg--arrows-overlay .ne-pg__carousel {
position: relative;
}
.ne-pg--arrows-overlay .ne-pg__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
z-index: 3;
margin-top: 0;
}
.ne-pg--arrows-overlay .ne-pg__arrow:hover { transform: translateY(-50%) scale(1.05); }
.ne-pg--arrows-overlay .ne-pg__arrow--prev { left: 4px; }
.ne-pg--arrows-overlay .ne-pg__arrow--next { right: 4px; }
/* Coverflow — the focus card lies free in front; cards to its left and
right are pushed together into overlapping stacks (scaled down + turned
back in 3D). JS sets --d (signed distance from active) + --ad (abs) per
card; the transform reads them, sign of --d picks left/right side + 3D
turn. Container height = tallest card (JS, stable). Focus alignment
shifts the anchor (--ne-cf-origin); overflow:hidden clips the off-side. */
.ne-pg__coverflow {
position: relative;
width: 100%;
height: var(--ne-cf-h, 460px);
overflow: visible; /* spill (default); clip handled at section/viewport */
/* No `perspective`/`isolation` here — both form a backdrop-root that kills
the glass cards' backdrop-filter (Rule 49). Perspective is applied
per-card inside the transform() instead, so the card itself carries it. */
--ne-cf-origin: 50%;
}
.ne-pg__coverflow--align-left { --ne-cf-origin: calc(var(--ne-cf-card-w, 340px) * 0.5 + 28px); }
.ne-pg__coverflow--align-right { --ne-cf-origin: calc(100% - var(--ne-cf-card-w, 340px) * 0.5 - 28px); }
/* Viewport carries the optional fade mask; chevrons live outside it (siblings
of the viewport) so the mask never fades them. Spill (default) = visible, the
SECTION clips at its own edge in clip mode (critical.css drops the spill-guard
for --clip). Only the fade needs the viewport to clip + mask. */
.ne-pg__cf-viewport {
position: absolute;
inset: 0;
overflow: visible;
border-radius: inherit;
}
.ne-pg__coverflow--clip.ne-pg__coverflow--fade .ne-pg__cf-viewport { overflow: hidden; }
.ne-pg__coverflow--clip.ne-pg__coverflow--style-stack.ne-pg__coverflow--fade .ne-pg__cf-viewport,
.ne-pg__coverflow--clip.ne-pg__coverflow--style-fan.ne-pg__coverflow--fade .ne-pg__cf-viewport {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ne-cf-fade, 0px), #000 calc(100% - var(--ne-cf-fade, 0px)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--ne-cf-fade, 0px), #000 calc(100% - var(--ne-cf-fade, 0px)), transparent 100%);
}
/* Stage wraps the cards (not the arrows). Every coverflow optic shifts +
scales the whole composition so it always fits the coverflow width and
stays centred — no outer card clips at the block edge. */
.ne-pg__cf-stage { position: absolute; inset: 0; }
.ne-pg__coverflow .ne-pg__cf-stage {
transform: translateX(var(--ne-cf-drum-shift, 0px)) scale(var(--ne-cf-drum-fit, 1));
transform-origin: 50% 50%;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.ne-pg--no-trans .ne-pg__cf-stage,
.ne-pg--no-trans .ne-pg__cf-card { transition: none !important; }
/* Paging gestures (coverflow_nav). */
.ne-pg__coverflow--nav-drag { cursor: grab; touch-action: pan-y; }
.ne-pg__coverflow--nav-drag.ne-pg__coverflow--grabbing { cursor: grabbing; }
.ne-pg__cf-card {
position: absolute;
top: 50%;
left: var(--ne-cf-origin, 50%);
width: min(var(--ne-cf-card-w, 320px), 82%);
/* Radius on every surface (glass already had it) so the solid back panel +
overflow clip round the same as the glass cards — no sharp/overhanging
corners on the reversed cards (user 2026-06-25). */
border-radius: var(--ne-cf-card-radius, 12px);
transform-origin: 50% 50%;
--d: 0;
--ad: 0;
/* Compact stagger: a smaller lateral step (% of card width) keeps many
side cards visible as overlapping turned wings; rotateY turns them,
translateZ pushes back, scale shrinks with distance. */
transform:
perspective(3000px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--d) * var(--ne-cf-step, 23%)))
rotateY(calc(var(--d) * -5deg))
translateZ(0px)
scale(calc(1 - var(--ad) * 0.035));
z-index: calc(100 - var(--ad) * 5);
/* Stack geometry dialled in via the stack tuner (2026-06-25): a flat, subtle
fanned coverflow — gentle turn, no depth, light shrink, full opacity. */
opacity: 1;
transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease, box-shadow .35s ease;
pointer-events: auto;
cursor: pointer;
will-change: transform;
/* Glow/shadow compose here (moved off the inner card, which is transparent
in glass mode + clipped by overflow). Inset = glass highlight. */
box-shadow: var(--ne-cf-shadow-inset, 0 0 0 transparent), var(--ne-cf-shadow-outer, 0 0 0 transparent);
}
.ne-pg__cf-card[data-active] { cursor: default; }
/* Equalise card heights across the coverflow — products with vs without colour
swatches render at different heights; force them all to the tallest
(--ne-cf-h, measured by JS) so the silhouettes line up (user 2026-06-25). */
.ne-pg__cf-card,
.ne-pg__cf-card .ne-product-card { min-height: var(--ne-cf-h); }
/* ── Coverflow optics ──────────────────────────────────────────────
The base .ne-pg__cf-card transform above is the "stack" optic. Fan +
drum override only `transform` (drum also hides backfaces), reading the
same JS-set --d / --ad, so the JS stays optic-agnostic. */
/* Fan — cards tilt in-plane (rotateZ) and arc up toward the edges, like a
hand of cards opening upward. Flat (no perspective). overflow:visible +
extra height give the arc headroom so the lifted edges aren't clipped. */
.ne-pg__coverflow--style-fan {
height: calc(var(--ne-cf-h, 460px) + 150px);
overflow: visible;
}
.ne-pg__coverflow--style-fan .ne-pg__cf-card {
transform:
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--gd, var(--d)) * 54%))
translateY(calc(var(--cad, var(--ad)) * var(--cad, var(--ad)) * -12px))
rotate(calc(var(--cd, var(--d)) * 9deg))
scale(calc(1 - var(--ad) * 0.04));
/* keep the fan's own subtle edge fade (the stack base is now opacity:1) */
opacity: max(0.88, calc(1 - var(--ad) * 0.045));
}
/* Solid surface = genuinely opaque cards, so don't dim the back ones. */
.ne-pg__coverflow--style-fan .ne-pg__cf-card--surface-solid:not([data-hidden]) { opacity: 1; }
/* Drum — ASYMMETRIC, like a card pulled from a rolodex/dispenser. The active
card is extracted flat at the focus side; every OTHER card piles on the
opposite side (uses --ad, so past + future cards stack as one drum body),
turning + receding into the distance and fading toward the edge. Direction
follows the focus position via --ne-cf-drum-dir (left/right only — centre
has no meaningful asymmetry). */
/* Drum — a real slide-carousel/Kodak cylinder. Every non-focus card sits on
a vertical RING (rotateY around the axis + constant translateZ = radius),
all piling to ONE side via --ad * drum-dir so the ring curves away from the
focus and fades into the back (only the front half reads). The focus card
is EJECTED forward out of the ring (translateZ + slight lift), like a slide
lifted from the tray. Paging re-renders --d/--ad → the ring rotates and the
next card ejects. */
/* Drum — a slide magazine: the FOCUS card stands alone on one side, the drum
(a fanned stack of heavily-overlapping cards, each turned a touch more than
the last — face-on at the front, edge-on toward the back, fading at the
section edge so only ~a quarter shows) sits SEPARATELY on the other side.
Paging pushes the focus card into the drum + lifts the next one out.
The drum's pivot (--ne-cf-origin) is offset to the drum side; the focus
card is translated across to the opposite (focus) side. */
.ne-pg__coverflow--style-drum {
/* Tall enough to contain the 1.26×-scaled focus card (× the fit-scale) so it
never overlaps the heading above / button below — the box reserves the
height; cards stay vertically centred inside it. */
height: calc(var(--ne-cf-h, 460px) * 1.28 * var(--ne-cf-drum-fit, 1) + 30px);
overflow: visible;
--ne-cf-origin: 49%;
}
.ne-pg__coverflow--style-drum.ne-pg__coverflow--align-right { --ne-cf-origin: 51%; }
.ne-pg__coverflow--style-drum .ne-pg__cf-card {
/* Full drum seen from the side: cards run face-on (focus side) → edge-on (a
thin line at the front) → on around the back, where their reversed faces
show (view from behind) → fade out at the far edge. Uses --di (the whole
sequence) so the whole drum lines up; backs stay visible (no backface
hide); images keep 100% opacity. */
transform-origin: 50% 50%;
transform:
perspective(2600px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--ne-cf-drum-dir, 1) * var(--di, var(--ad)) * 13%))
rotateY(calc(var(--ne-cf-drum-dir, 1) * var(--di, var(--ad)) * 15deg))
scale(1.12);
/* Stacking peaks at the edge-on card (~90° ≈ di 5.8, the thin line at the
front) and falls off to BOTH sides: face-on cards recede on the focus
side, the reversed backs recede on the far side — symmetric, so the back
half is no longer stacked the wrong way round (user 2026-06-25).
Geometry values dialled in via the drum tuner (2026-06-25). */
z-index: calc(90 - abs(var(--di, var(--ad)) - 5.6) * 2);
opacity: 1;
}
/* Focus card: stands alone on the opposite side, flat, on top. */
.ne-pg__coverflow--style-drum .ne-pg__cf-card[data-active] {
transform-origin: 50% 50%;
transform:
perspective(2600px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--ne-cf-drum-dir, 1) * -130%))
rotateY(0deg)
scale(1.26);
opacity: 1;
z-index: 300;
}
/* Hover-lift on the CF-CARD (via --ne-cf-lift inside every optic's transform)
so the box-shadow lifts WITH the card — no gap between card and shadow on
any surface (the gap only showed on solid, where the inner card was the
visible face). The inner card itself never lifts. (user 2026-06-25) */
.ne-pg__coverflow .ne-pg__cf-card .ne-product-card:hover { transform: none !important; }
.ne-pg__coverflow .ne-pg__cf-card:hover { --ne-cf-lift: -12px; }
/* Drum: only the focus card lifts — overlapping rotated cards stay put. */
.ne-pg__coverflow--style-drum .ne-pg__cf-card:not([data-active]):hover { --ne-cf-lift: 0px; }
.ne-pg__coverflow--style-drum .ne-pg__cf-card[data-active]:hover {
--ne-cf-lift: -16px;
--ne-cf-shadow-outer: 0 24px 48px rgba(0, 0, 0, 0.42);
}
.ne-pg__coverflow--style-drum .ne-pg__cf-card:not([data-active]) .ne-product-card--has-secondary:hover .ne-product-card__image--primary { opacity: 1 !important; }
.ne-pg__coverflow--style-drum .ne-pg__cf-card:not([data-active]) .ne-product-card--has-secondary:hover .ne-product-card__image--secondary { opacity: 0 !important; }
.ne-pg__coverflow--style-drum .ne-pg__cf-card:not([data-active]) .ne-product-card--hover-zoom:hover .ne-product-card__image--primary { transform: none !important; }
.ne-pg__coverflow--style-drum .ne-pg__cf-card:not([data-active]) .ne-product-card__quick-view { display: none !important; }
/* Back cards (past the edge-on point ~di 5.6) show their reversed face — frost
just the CONTENT (image + text) so it reads as "this is the back". The card
EDGE stays sharp (overflow:hidden clips it), all backs get the SAME blur
(step, not progressive), oriented at the glass blur (user 2026-06-25). */
/* Render the reversed face (the grid default hides it for GPU/hairline
reasons) so the back of the card is visible in the drum, not see-through. */
.ne-pg__coverflow--style-drum .ne-pg__cf-card .ne-product-card {
backface-visibility: visible;
}
/* Clip the blur + back panel to the card edge on the side/back cards only —
the focus card stays overflow:visible so its hover-lift isn't clipped. */
.ne-pg__coverflow--style-drum .ne-pg__cf-card:not([data-active]) {
overflow: hidden;
}
/* Glass backs frost their content (image + text); solid backs are a plain
panel (handled below) so they get no blur. */
.ne-pg__coverflow--style-drum .ne-pg__cf-card--surface-glass .ne-product-card {
filter: blur(calc(min(1, max(0, (var(--di, var(--ad)) - 5.6) * 100)) * 5px));
}
/* Back-face treatment — an overlay that fades in only on the reversed cards
(di past the edge-on point). SOLID → opaque card colour, so the back reads
"completely solid"; GLASS + tint → the accent tint laid over the back image
(user 2026-06-25). It paints above the content (z 7), clipped to the radius;
opacity is the same step as the blur so the front faces are untouched. */
.ne-pg__coverflow--style-drum .ne-pg__cf-card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 7;
pointer-events: none;
background: transparent;
opacity: calc(min(1, max(0, (var(--di, var(--ad)) - 5.6) * 100)));
}
.ne-pg__coverflow--style-drum .ne-pg__cf-card--surface-glass.ne-pg__cf-card--tint::before {
background: var(--ne-glass-bg-tinted, rgba(99, 102, 241, 0.18));
}
/* SOLID back: a plain panel in the card colour covering the reversed face, so
the mirrored image/text don't show through — it reads like the blank back of
a card (no blur needed). Stacked so it stays opaque even if the scheme card
colour has alpha (user 2026-06-25). */
.ne-pg__coverflow--style-drum .ne-pg__cf-card--surface-solid::before {
background:
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
var(--ne-cf-cbg);
}
/* SOLID surface in a coverflow: the cards overlap (and the drum flips them),
so a scheme "Card background" colour with alpha reads as see-through. Stack
the card colour so the solid surface is genuinely opaque — in the card's own
colour (no-op when it's already opaque). Fixes both the front and, via the
reversed face, the back (user 2026-06-25). */
.ne-pg__coverflow .ne-pg__cf-card--surface-solid {
--ne-cf-cbg: var(--ne-scheme-card-bg, var(--ne-scheme-bg, var(--ne-scheme-bg-surface, #1a1a28)));
}
.ne-pg__coverflow .ne-pg__cf-card--surface-solid .ne-product-card::before {
background:
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
var(--ne-cf-cbg);
}
/* Card chrome modifiers — all plug into --ne-cf-shadow-outer. */
.ne-pg__cf-card--shadow { --ne-cf-shadow-outer: 0 8px 22px rgba(0, 0, 0, 0.28); }
.ne-pg__cf-card--shadow:hover { --ne-cf-shadow-outer: 0 14px 32px rgba(0, 0, 0, 0.38); }
.ne-pg__cf-card--glow:hover { --ne-cf-shadow-outer: 0 0 32px var(--ne-scheme-accent-glow, rgba(127, 127, 127, 0.45)); }
.ne-pg__cf-card--shadow.ne-pg__cf-card--glow:hover {
--ne-cf-shadow-outer: 0 0 30px var(--ne-scheme-accent-glow, rgba(127, 127, 127, 0.4)), 0 12px 28px rgba(0, 0, 0, 0.32);
}
.ne-pg__cf-card[data-hidden] { opacity: 0; pointer-events: none; }
/* Coverflow glass — PROGRESSIVE ENHANCEMENT:
• Default (Chrome / Edge / Safari): real backdrop-filter blur on every
card. These engines render backdrop-filter on transformed elements.
• Firefox (html.ne-ff, set by JS): Firefox can't render backdrop-filter on
transformed elements → fall back to a mock-glass frosted gradient.
The inner card is rendered transparent so the glass surface shows through. */
.ne-pg__cf-card--glass {
background: var(--ne-glass-bg, rgba(255, 255, 255, 0.06)) !important;
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
border-radius: var(--ne-cf-card-radius, 12px);
overflow: hidden;
--ne-cf-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
will-change: transform, backdrop-filter;
}
/* Tint — a translucent accent wash over the frosted base (opt-in via
card_glass_tint). NOT the theme's --ne-glass-bg-tinted (accent @ 50% alpha),
which on a small card over imagery reads as solid (user 2026-06-24).
color-mix keeps it see-through so the backdrop blur still shows; using
--ne-scheme-accent directly resolves reliably in this context. */
/* Strength is driven by Theme Settings → Effects → Glass tint intensity
(--ne-glass-bg-tinted = accent @ that intensity). The tint is an image
layer (a solid-colour gradient) OVER the frosted background-colour, so the
backdrop blur shows through at low/mid intensity and goes solid at 100% —
and it stays valid CSS (two bare colours in the `background` SHORTHAND is
invalid → the whole declaration drops, leaving the card un-tinted; that was
the "no difference" / "not solid at 100%" bug, user 2026-06-25). */
.ne-pg__cf-card--glass.ne-pg__cf-card--tint {
background-color: var(--ne-glass-bg, rgba(255, 255, 255, 0.06)) !important;
background-image: linear-gradient(
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5)),
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5))) !important;
}
/* Firefox mock-glass: tint over a frost gradient (no backdrop blur to thin
it, so the white frost keeps glass character). */
html.ne-ff .ne-pg__cf-card--glass.ne-pg__cf-card--tint {
background-color: var(--ne-glass-bg, rgba(255, 255, 255, 0.10)) !important;
background-image:
linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.07) 100%),
linear-gradient(
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5)),
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5))) !important;
}
html.ne-ff .ne-pg__cf-card--glass {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.12) 100%),
var(--ne-glass-bg, rgba(255, 255, 255, 0.07)) !important;
--ne-cf-shadow-inset:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 0, 0, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Glass shine — top light-line over the card (Rule 371/LG1). The generic
[class*="glass"] bg-image shine lands BEHIND the inner card (rendered
transparent in glass mode) so it never reads; an inset:0 ::after with the
shared --ne-glass-shine-bg paints it on top, clipped to the radius. Works
in both real-glass (Chromium) and mock-glass (Firefox) — it's independent
of backdrop-filter. The cf-card is excluded from the generic bg-image
shine in critical.css so this stays the single source. */
body[data-ne-glass-shine="1"] .ne-pg__cf-card--glass::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
border-radius: inherit;
background: var(--ne-glass-shine-bg);
}
/* Arrows sit ON the sides, vertically centred, above all cards. */
.ne-pg__coverflow .ne-pg__arrow {
position: absolute;
top: 50%;
bottom: auto;
transform: translateY(-50%);
z-index: 300;
}
.ne-pg__coverflow .ne-pg__arrow--prev { left: 8px; right: auto; }
.ne-pg__coverflow .ne-pg__arrow--next { right: 8px; left: auto; }
/* ── Mobile coverflow ─────────────────────────────────────────────
Stack + fan: a bigger focus card with only a sliver of the neighbours
(the JS also hides cards beyond ±2). Drum: the focus card sits ABOVE
the ring — a narrow phone has no room for the side-by-side split.
Values dialled visually; tune freely. */
@media (max-width: 749px) {
/* Stack + fan + drum — big focus card (the JS no longer shrinks-to-fit on
mobile, so this is the real focus size). */
.ne-pg__coverflow--style-stack .ne-pg__cf-card,
.ne-pg__coverflow--style-fan .ne-pg__cf-card,
.ne-pg__coverflow--style-drum .ne-pg__cf-card {
width: min(var(--ne-cf-card-w, 320px), 94%);
}
/* Stack — neighbours pulled in + turned + pushed back + shrunk so they tuck
BEHIND the focus (only slim slivers peek), and stay inside the block so
nothing hard-clips at the edge. overflow:visible kills the rectangular cut. */
.ne-pg__coverflow--style-stack { overflow: visible; }
.ne-pg__coverflow--style-stack .ne-pg__cf-card {
transform:
perspective(2600px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--d) * 30%))
rotateY(calc(var(--d) * -10deg))
translateZ(calc(var(--ad) * -120px))
scale(calc(1 - var(--ad) * 0.12));
}
/* Fan — smaller horizontal spread so the arc edges stay in the block while
the upward arc keeps its headroom; overflow:visible (no clip). */
.ne-pg__coverflow--style-fan { overflow: visible; }
.ne-pg__coverflow--style-fan .ne-pg__cf-card {
transform:
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--gd, var(--d)) * 30%))
translateY(calc(var(--cad, var(--ad)) * var(--cad, var(--ad)) * -16px))
rotate(calc(var(--cd, var(--d)) * 11deg))
scale(calc(1 - var(--ad) * 0.06));
}
/* Drum — vertical: large focus card on top, a tight one-directional ring
(same --di fan as desktop, so it's always a clean full ring regardless of
which card is active) centred directly below it. The JS keeps a short
contiguous ring (di 0..4), centres it horizontally under the focus via
--ne-cf-ring-shift, and sits the chevrons on the ring. fit stays 1 so
nothing is squashed/elongated. */
.ne-pg__coverflow--style-drum {
height: calc(var(--ne-cf-h, 460px) * 1.7 * var(--ne-cf-drum-fit, 1) + 40px);
overflow: visible;
--ne-cf-origin: 50%;
--ne-cf-ring-shift: 0px;
}
.ne-pg__coverflow--style-drum.ne-pg__coverflow--align-right { --ne-cf-origin: 50%; }
/* Geometry dialled in via the mobile-drum tuner (2026-06-26). */
.ne-pg__coverflow--style-drum .ne-pg__cf-card {
transform:
perspective(2400px)
translate(-50%, -50%)
translateY(calc(var(--ne-cf-h, 460px) * 0.48))
translateX(calc(var(--di, var(--ad)) * 13% + var(--ne-cf-ring-shift, 0px)))
rotateY(calc(var(--di, var(--ad)) * -18deg))
scale(0.66);
/* Left card frontmost, each one to the right a layer deeper. */
z-index: calc(90 - var(--di, var(--ad)) * 2);
}
/* Focus card lifts above the ring, flat + large (no ring-shift). */
.ne-pg__coverflow--style-drum .ne-pg__cf-card[data-active] {
transform:
perspective(2400px)
translate(-50%, -50%)
translateY(calc(var(--ne-cf-h, 460px) * -0.39 + var(--ne-cf-lift, 0px)))
rotateY(0deg)
scale(1);
}
/* Mobile drum: cards take their natural content height (no forced
--ne-cf-h min) so the focus card isn't stretched with empty body
space below the price. Ring sits behind, uneven heights invisible. */
.ne-pg__coverflow--style-drum .ne-pg__cf-card,
.ne-pg__coverflow--style-drum .ne-pg__cf-card .ne-product-card { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ne-pg__cf-card { transition: opacity .2s ease; }
}
/* END_BLOCK:product-grid */
/* START_BLOCK:product-pickup (INDEX:114) */
.ne-pickup { display: block; }
/* Hide the wrapper entirely when there is no pickup content (empty node). */
.ne-pickup:not(:has(.ne-pickup__preview)) { display: none; }
.ne-pickup__preview {
display: flex;
align-items: flex-start;
gap: var(--ne-space-2);
color: var(--ne-scheme-text);
}
.ne-pickup__icon { color: var(--ne-scheme-accent); flex-shrink: 0; margin-top: 2px; }
.ne-pickup__preview-text { display: flex; flex-direction: column; gap: 2px; }
.ne-pickup__status { margin: 0; font-size: var(--ne-font-size-sm); font-weight: 600; }
.ne-pickup__time { margin: 0; font-size: var(--ne-font-size-xs); color: var(--ne-scheme-fg-muted); }
.ne-pickup__toggle {
margin-top: var(--ne-space-2);
padding: 0;
background: none;
border: none;
color: var(--ne-scheme-link, var(--ne-scheme-accent));
font-size: var(--ne-font-size-sm);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
}
.ne-pickup__toggle:hover { opacity: 0.8; }
.ne-pickup__list {
margin-top: var(--ne-space-3);
display: flex;
flex-direction: column;
gap: var(--ne-space-3);
padding: var(--ne-space-3);
border: 1px solid var(--ne-scheme-border);
border-radius: var(--ne-radius-md, 8px);
}
.ne-pickup__list[hidden] { display: none; }
.ne-pickup__loc-name { margin: 0; font-size: var(--ne-font-size-sm); font-weight: 600; color: var(--ne-scheme-text); }
.ne-pickup__loc-time { margin: 2px 0 0; font-size: var(--ne-font-size-xs); color: var(--ne-scheme-fg-muted); }
.ne-pickup__loc-address { margin: var(--ne-space-1) 0 0; font-style: normal; font-size: var(--ne-font-size-xs); color: var(--ne-scheme-fg-muted); line-height: 1.5; }
/* END_BLOCK:product-pickup */
/* START_BLOCK:product-price (INDEX:115) */
.ne-product-price {
display: flex;
align-items: baseline;
gap: var(--ne-space-2);
flex-wrap: wrap;
color: var(--ne-scheme-text);
font-weight: 600;
line-height: 1.2;
}
.ne-product-price--sm { font-size: 0.875rem; }
.ne-product-price--md { font-size: 1.125rem; }
.ne-product-price--lg { font-size: 1.5rem; }
.ne-product-price--xl { font-size: 2rem; }
.ne-product-price--2xl { font-size: 2.75rem; }
.ne-product-price--3xl { font-size: 3.5rem; }
.ne-product-price--left { justify-content: flex-start; text-align: left; }
.ne-product-price--center { justify-content: center; text-align: center; }
.ne-product-price--right { justify-content: flex-end; text-align: right; }
.ne-product-price--on-sale .ne-product-price__current { color: var(--ne-scheme-sale, var(--ne-scheme-accent)); }
.ne-product-price__compare {
color: var(--ne-scheme-fg-muted);
font-weight: 400;
}
.ne-product-price__compare[hidden] { display: none; }
.ne-product-price__unit,
.ne-product-price__tax {
flex-basis: 100%;
color: var(--ne-scheme-fg-muted);
font-size: var(--ne-font-size-xs);
font-weight: 400;
}
/* END_BLOCK:product-price */
/* START_BLOCK:product-selling-plan (INDEX:116) */
.ne-product-selling-plan {
display: flex;
flex-direction: column;
gap: var(--ne-space-3);
}
.ne-product-selling-plan__heading {
margin: 0;
font-size: var(--ne-font-size-sm);
font-weight: 600;
color: var(--ne-scheme-text);
}
.ne-product-selling-plan__group-name {
margin: 0 0 var(--ne-space-2);
font-size: var(--ne-font-size-xs);
color: var(--ne-scheme-fg-muted);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.ne-product-selling-plan__options {
display: flex;
flex-direction: column;
gap: var(--ne-space-2);
}
.ne-product-selling-plan__option {
display: flex;
align-items: center;
gap: var(--ne-space-3);
padding: var(--ne-space-3);
background: var(--ne-glass-bg, transparent);
border: 1px solid var(--ne-scheme-border);
border-radius: var(--ne-radius-md);
cursor: pointer;
transition: border-color var(--ne-transition-fast), background var(--ne-transition-fast);
}
.ne-product-selling-plan__option:hover { border-color: var(--ne-scheme-accent); }
.ne-product-selling-plan__option--active {
border-color: var(--ne-scheme-accent);
background: var(--ne-scheme-accent-glow, rgba(99,102,241,0.1));
}
.ne-product-selling-plan__option-name {
flex: 1;
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text);
}
.ne-product-selling-plan__savings {
font-size: var(--ne-font-size-xs);
color: var(--ne-scheme-accent);
font-weight: 600;
}
/* END_BLOCK:product-selling-plan */
/* START_BLOCK:product-share (INDEX:117) */
.ne-product-share {
display: flex;
flex-wrap: wrap;
gap: var(--ne-space-3);
align-items: center;
}
.ne-product-share--left { justify-content: flex-start; }
.ne-product-share--center { justify-content: center; }
.ne-product-share--right { justify-content: flex-end; }
/* Uniform circular icon buttons — accent-color icon, no background by
default. Hover fills with accent. Same visual language across native
share + FB / X / Pinterest / WhatsApp / Email. */
.ne-product-share__btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ne-space-2);
width: 38px;
height: 38px;
padding: 0;
background: transparent;
border: none;
border-radius: var(--ne-radius-full);
color: var(--ne-scheme-accent);
font-size: var(--ne-font-size-sm);
cursor: pointer;
transition: color var(--ne-transition-fast), transform var(--ne-transition-fast);
position: relative;
text-decoration: none;
overflow: hidden;
}
.ne-product-share__btn:hover {
color: var(--ne-scheme-text);
transform: translateY(-1px);
}
.ne-product-share__icon { flex-shrink: 0; }
/* Icon+text / text-only mode: expand horizontally to fit the text
label, but keep the same accent color + transparent background. */
.ne-product-share:not(.ne-product-share--icon) .ne-product-share__btn:has(.ne-product-share__label) {
width: auto;
height: auto;
padding: var(--ne-space-2) var(--ne-space-3);
border-radius: var(--ne-btn-radius, 999px);
}
.ne-product-share__copied {
position: absolute;
inset: 0;
display: none;
align-items: center;
justify-content: center;
background: var(--ne-scheme-accent);
color: var(--ne-scheme-btn-text, #fff);
border-radius: inherit;
padding: 0 var(--ne-space-2);
font-size: var(--ne-font-size-xs);
}
.ne-product-share__btn[data-copied="1"] .ne-product-share__copied { display: flex; }
/* END_BLOCK:product-share */
/* START_BLOCK:product-size-chart (INDEX:118) */
.ne-product-size-chart__trigger {
display: inline-flex;
align-items: center;
gap: var(--ne-space-2);
background: none;
border: none;
padding: 0;
color: var(--ne-scheme-fg-muted, var(--ne-scheme-text-muted));
font-size: var(--ne-font-size-sm);
cursor: pointer;
transition: color var(--ne-transition-fast);
}
.ne-product-size-chart__trigger:hover { color: var(--ne-scheme-accent); }
.ne-product-size-chart--trigger-link .ne-product-size-chart__trigger {
text-decoration: underline;
text-underline-offset: 3px;
}
.ne-product-size-chart--trigger-button .ne-product-size-chart__trigger {
padding: var(--ne-space-2) var(--ne-space-4);
border: 1px solid var(--ne-scheme-border);
border-radius: var(--ne-radius-md);
}
.ne-product-size-chart__modal {
position: fixed;
inset: 0;
margin: auto;
width: min(640px, 90vw);
max-height: 80vh;
padding: 0;
border: 1px solid var(--ne-scheme-border);
border-radius: var(--ne-radius-lg, 12px);
background: var(--ne-scheme-bg-surface, var(--ne-scheme-bg));
color: var(--ne-scheme-text);
overflow: hidden;
}
.ne-product-size-chart__modal::backdrop {
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(8px);
}
.ne-product-size-chart__modal-inner {
display: flex;
flex-direction: column;
max-height: 80vh;
}
.ne-product-size-chart__modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--ne-space-5) var(--ne-space-6);
border-bottom: 1px solid var(--ne-scheme-border);
}
.ne-product-size-chart__modal-heading {
margin: 0;
font-size: var(--ne-font-size-lg);
font-weight: 600;
}
.ne-product-size-chart__modal-close {
background: none;
border: none;
color: var(--ne-scheme-text);
cursor: pointer;
padding: var(--ne-space-1);
display: flex;
}
.ne-product-size-chart__modal-body {
padding: var(--ne-space-6);
overflow-y: auto;
}
.ne-product-size-chart__modal-body table {
width: 100%;
border-collapse: collapse;
}
.ne-product-size-chart__modal-body th,
.ne-product-size-chart__modal-body td {
padding: var(--ne-space-2) var(--ne-space-3);
border: 1px solid var(--ne-scheme-border);
text-align: left;
font-size: var(--ne-font-size-sm);
}
/* END_BLOCK:product-size-chart */
/* START_BLOCK:product-tabs (INDEX:119) */
.ne-product-tabs {
display: flex;
flex-direction: column;
}
.ne-product-tabs__nav {
display: flex;
gap: 0;
}
.ne-product-tabs__btn {
background: none;
border: none;
padding: var(--ne-space-3) var(--ne-space-4);
color: var(--ne-scheme-fg-muted);
font-size: var(--ne-font-size-sm);
cursor: pointer;
transition: all var(--ne-transition-fast);
font-family: inherit;
}
.ne-product-tabs__btn--active { color: var(--ne-scheme-text); }
/* Underline style */
.ne-product-tabs--underline .ne-product-tabs__nav { border-bottom: 1px solid var(--ne-scheme-border); }
.ne-product-tabs--underline .ne-product-tabs__btn {
border-bottom: 2px solid transparent;
margin-bottom: -1px;
}
.ne-product-tabs--underline .ne-product-tabs__btn--active { border-bottom-color: var(--ne-scheme-accent); }
/* Pill style — radius forced via inline-style (Rule 175) */
.ne-product-tabs--pill .ne-product-tabs__nav { gap: var(--ne-space-2); }
.ne-product-tabs--pill .ne-product-tabs__btn {
background: var(--ne-glass-bg, rgba(255,255,255,0.04));
border: 1px solid var(--ne-scheme-border);
}
.ne-product-tabs--pill .ne-product-tabs__btn--active {
background: var(--ne-scheme-accent);
color: var(--ne-scheme-btn-text, #fff);
border-color: var(--ne-scheme-accent);
}
/* Square style — sharp corners, simple bordered button */
.ne-product-tabs--square .ne-product-tabs__nav { gap: var(--ne-space-2); }
.ne-product-tabs--square .ne-product-tabs__btn {
background: transparent;
border: 1px solid var(--ne-scheme-border);
}
.ne-product-tabs--square .ne-product-tabs__btn--active {
background: var(--ne-scheme-accent);
color: var(--ne-scheme-btn-text, #fff);
border-color: var(--ne-scheme-accent);
}
.ne-product-tabs__panels { padding-top: var(--ne-space-4); }
.ne-product-tabs__panel {
color: var(--ne-scheme-fg-muted, var(--ne-scheme-text-muted));
font-size: var(--ne-font-size-sm);
line-height: 1.7;
}
.ne-product-tabs__panel p:first-child { margin-top: 0; }
.ne-product-tabs__panel p:last-child { margin-bottom: 0; }
/* Rich-text media compat — mirror blocks/product-description.liquid so that
images inserted via Shopify's Polaris editor (e.g. a row of certification
/ trust badges) flow inline instead of stacking. Counters the global
`img { display: block }` reset (critical.css) and makes solo-image
paragraph/div wrappers inline-block so adjacent badges sit side by side
and wrap at the viewport edge. */
.ne-product-tabs__panel p:has(> img:only-child),
.ne-product-tabs__panel p:has(> a:only-child > img:only-child),
.ne-product-tabs__panel p:has(> span:only-child > img:only-child),
.ne-product-tabs__panel div:has(> img:only-child),
.ne-product-tabs__panel div:has(> a:only-child > img:only-child),
.ne-product-tabs__panel div:has(> span:only-child > img:only-child) {
display: inline-block;
vertical-align: middle;
margin: 0 var(--ne-space-2) var(--ne-space-2) 0;
}
.ne-product-tabs__panel img {
display: inline-block;
vertical-align: middle;
margin-block: 0;
}
/* Standalone image source (e.g. a size-chart metafield) — block-level and
scales to the panel width. Higher specificity than the inline-block rule
above so the chart isn't forced inline. */
.ne-product-tabs__panel img.ne-product-tabs__image {
display: block;
margin: var(--ne-space-2) 0;
border-radius: var(--ne-radius-md);
}
/* END_BLOCK:product-tabs */
/* START_BLOCK:product-title (INDEX:120) */
.ne-product-title {
margin: 0;
color: var(--ne-scheme-text);
word-break: break-word;
overflow-wrap: anywhere;
hyphens: auto;
}
.ne-product-title--left { text-align: left; }
.ne-product-title--center { text-align: center; }
.ne-product-title--right { text-align: right; }
.ne-product-title--font-body { font-family: var(--font-body--family); }
.ne-product-title--font-subheading { font-family: var(--font-subheading--family); }
.ne-product-title--font-heading { font-family: var(--font-heading--family); }
.ne-product-title--font-accent { font-family: var(--font-accent--family); }
/* END_BLOCK:product-title */
/* START_BLOCK:product-variant-picker (INDEX:121) */
.ne-product-variants {
display: flex;
flex-direction: column;
gap: var(--ne-space-3);
}
.ne-product-variants__option {
display: flex;
flex-direction: column;
gap: var(--ne-space-2);
width: 100%;
}
/* Select sits at content-width — alignment-modifier drives where it
sits in the option column. Swatches/btns use justify-content (set
in the alignment block above), select uses align-self. */
.ne-product-variants--left .ne-product-variants__select { align-self: flex-start; }
.ne-product-variants--center .ne-product-variants__select { align-self: center; }
.ne-product-variants--right .ne-product-variants__select { align-self: flex-end; }
.ne-product-variants__label {
display: flex;
gap: var(--ne-space-1);
font-size: var(--ne-font-size-sm);
font-weight: 500;
color: var(--ne-scheme-text);
}
.ne-product-variants__value {
color: var(--ne-scheme-fg-muted);
font-weight: 400;
}
/* Alignment — drives label text-align AND swatch/btn justify-content
so it actually has a visible effect (Rule 1 of layout — when items
fill the parent width, align-items on the parent is a no-op). */
.ne-product-variants--left .ne-product-variants__label { justify-content: flex-start; text-align: left; }
.ne-product-variants--center .ne-product-variants__label { justify-content: center; text-align: center; }
.ne-product-variants--right .ne-product-variants__label { justify-content: flex-end; text-align: right; }
.ne-product-variants--left .ne-product-variants__swatches,
.ne-product-variants--left .ne-product-variants__btns { justify-content: flex-start; }
.ne-product-variants--center .ne-product-variants__swatches,
.ne-product-variants--center .ne-product-variants__btns { justify-content: center; }
.ne-product-variants--right .ne-product-variants__swatches,
.ne-product-variants--right .ne-product-variants__btns { justify-content: flex-end; }
/* Hide native radio circles — selected state is shown via the
swatch/button --active modifier instead. Keep accessible to
screen readers via off-screen positioning, not display:none. */
.ne-product-variants input[type="radio"] {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0 0 0 0);
white-space: nowrap;
border: 0;
appearance: none;
}
/* Color swatches */
.ne-product-variants__swatches {
display: flex;
gap: var(--ne-space-2);
flex-wrap: wrap;
}
.ne-product-variants__swatch { cursor: pointer; }
.ne-product-variants__swatch-color {
display: block;
width: 28px;
height: 28px;
border-radius: var(--ne-radius-full);
border: 2px solid var(--ne-scheme-variant-border, var(--ne-scheme-border));
transition: border-color var(--ne-transition-fast), box-shadow var(--ne-transition-fast);
/* Glass-bead optic (theme → Glass colour swatches). transparent default
so it's a no-op when off. Composed in every state below so the bead
coexists with the ring / variant glow. */
box-shadow: var(--ne-swatch-glass-fx, 0 0 0 transparent);
}
.ne-product-variants__swatch-color--image {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.ne-product-variants__swatch--active .ne-product-variants__swatch-color {
border-color: var(--ne-scheme-variant-bg-selected, var(--ne-scheme-accent));
box-shadow:
var(--ne-swatch-glass-fx, 0 0 0 transparent);
}
/* Button swatches */
.ne-product-variants__btns {
display: flex;
gap: var(--ne-space-2);
flex-wrap: wrap;
}
.ne-product-variants__btn { cursor: pointer; }
.ne-product-variants__btn-label {
display: inline-flex;
align-items: center;
justify-content: center;
padding: var(--ne-space-2) var(--ne-space-3);
/* Circle minimum: width AND height = 2.5em minimum. Combined with
pill border-radius (999px) single-char labels (XS, S, M, L)
render as PERFECT CIRCLES (square box + pill radius), longer
labels (XL, XXL, 3XL) expand horizontally into pills.
Without min-height the natural padding gave height ~36px while
min-width forced 40px → oval rather than circle (user report
2026-05-23). 2.5em on both axes guarantees circle for short
text. line-height: 1 keeps the text from inflating height. */
min-width: 2.5em;
min-height: 2.5em;
line-height: 1;
background: var(--ne-scheme-variant-bg, transparent);
color: var(--ne-scheme-variant-text, var(--ne-scheme-text));
border: 1px solid var(--ne-scheme-variant-border, var(--ne-scheme-border));
/* Follows theme Buttons & Inputs → Variant button shape (pill /
square / rounded). Falls back to main btn-radius. */
border-radius: var(--ne-variant-btn-radius, var(--ne-btn-radius, var(--ne-radius-md, 6px)));
font-size: var(--ne-font-size-sm);
transition: all var(--ne-transition-fast);
}
.ne-product-variants__btn--active .ne-product-variants__btn-label {
background: var(--ne-scheme-variant-bg-selected, var(--ne-scheme-accent));
color: var(--ne-scheme-variant-text-selected, var(--ne-scheme-btn-text));
border-color: var(--ne-scheme-variant-bg-selected, var(--ne-scheme-accent));
}
/* ── Selected-variant glow / shadow (Effects) ─────────────────────────
Applies ONLY to the selected swatch / button. Glow = two-layer accent
core + halo (matches the header button); --glow-variant switches the
core colour to the selected-variant colour. Composes the glass bevel
(when Theme → glass-buttons is on) so it co-exists with glass mode.
Vars default to transparent so the box-shadow list stays valid. */
.ne-product-variants--glow { --ne-pv-glow: 0 0 12px var(--ne-pv-glow-c, var(--ne-scheme-accent)), 0 0 24px color-mix(in srgb, var(--ne-pv-glow-c, var(--ne-scheme-accent)) 45%, transparent); }
.ne-product-variants--shadow { --ne-pv-shadow: 0 6px 16px rgba(0, 0, 0, 0.20); }
.ne-product-variants--glow-variant { --ne-pv-glow-c: var(--ne-scheme-variant-bg-selected, var(--ne-scheme-accent)); }
.ne-product-variants--glow .ne-product-variants__btn--active .ne-product-variants__btn-label,
.ne-product-variants--shadow .ne-product-variants__btn--active .ne-product-variants__btn-label {
box-shadow:
var(--ne-glass-btn-bevel, 0 0 0 transparent),
var(--ne-pv-glow, 0 0 0 transparent),
var(--ne-pv-shadow, 0 0 0 transparent) !important;
}
/* Colour swatch — source=variant: glow uses the swatch's OWN colour
(--ne-sw-c, emitted inline per swatch). Overriding --ne-pv-glow-c on the
swatch makes --ne-pv-glow (defined on the root, referencing it) resolve
to the swatch colour at use-time. Button swatches inherit the root's
--ne-pv-glow-c (= selected-variant colour) since they carry no --ne-sw-c. */
/* Glow active (accent source / default): accent glow + glass bead, NO ring.
Reset the border-color back to the default (the active rule set it to the
accent colour = the thin violet ring the user saw, user 2026-05-24). */
.ne-product-variants--glow .ne-product-variants__swatch--active .ne-product-variants__swatch-color {
border-color: transparent;
box-shadow:
var(--ne-pv-glow, 0 0 0 transparent),
var(--ne-swatch-glass-fx, 0 0 0 transparent),
var(--ne-pv-shadow, 0 0 0 transparent);
}
/* Variant source: glow in the swatch's OWN colour, used DIRECTLY here
(no --ne-pv-glow indirection — that resolved against the root's
--ne-pv-glow-c, not the per-swatch one, so it fell back to accent;
user 2026-05-24). --ne-sw-c is emitted inline per swatch. Lightened
~28% toward white so dark swatches (charcoal) still glow visibly.
Specificity (0,4,0) beats the accent rule above. */
.ne-product-variants--glow.ne-product-variants--glow-variant .ne-product-variants__swatch--active .ne-product-variants__swatch-color {
border-color: transparent;
box-shadow:
0 0 12px color-mix(in srgb, var(--ne-sw-c, var(--ne-scheme-accent)) 72%, white),
0 0 24px color-mix(in srgb, var(--ne-sw-c, var(--ne-scheme-accent)) 40%, transparent),
var(--ne-swatch-glass-fx, 0 0 0 transparent),
var(--ne-pv-shadow, 0 0 0 transparent);
}
/* Shadow only (no glow): keep the accent selection ring + shadow. */
.ne-product-variants--shadow:not(.ne-product-variants--glow) .ne-product-variants__swatch--active .ne-product-variants__swatch-color {
box-shadow:
var(--ne-swatch-glass-fx, 0 0 0 transparent),
var(--ne-pv-shadow, 0 0 0 transparent);
}
/* Select — content-width based on the longest option, capped to
parent. min-width keeps single-letter sizes (S/M/L) readable. */
.ne-product-variants__select {
padding: var(--ne-space-2) var(--ne-space-3);
background: var(--ne-scheme-input-bg, var(--ne-glass-bg, rgba(255,255,255,0.05)));
border: 1px solid var(--ne-scheme-input-border, var(--ne-scheme-border));
border-radius: var(--ne-btn-radius, var(--ne-radius-input, var(--ne-radius-md, 8px)));
color: var(--ne-scheme-input-text, var(--ne-scheme-text));
font-size: var(--ne-font-size-sm);
width: auto;
min-width: 120px;
max-width: 100%;
}
.ne-product-variants__select:focus {
outline: none;
border-color: var(--ne-scheme-accent);
box-shadow: 0 0 0 3px var(--ne-scheme-accent-glow, var(--ne-scheme-accent-subtle));
}
/* END_BLOCK:product-variant-picker */
/* START_BLOCK:product-vendor (INDEX:122) */
.ne-product-vendor {
margin: 0;
color: var(--ne-scheme-fg-muted, var(--ne-scheme-text-muted));
line-height: 1.4;
}
.ne-product-vendor--xs { font-size: 0.75rem; }
.ne-product-vendor--sm { font-size: 0.875rem; }
.ne-product-vendor--md { font-size: 1rem; }
.ne-product-vendor--lg { font-size: 1.25rem; }
.ne-product-vendor--xl { font-size: 1.5rem; }
.ne-product-vendor--2xl { font-size: 2rem; }
.ne-product-vendor--left { text-align: left; }
.ne-product-vendor--center { text-align: center; }
.ne-product-vendor--right { text-align: right; }
.ne-product-vendor--uppercase { text-transform: uppercase; letter-spacing: 0.05em; }
.ne-product-vendor__link {
color: inherit;
text-decoration: none;
transition: color var(--ne-transition-fast);
}
.ne-product-vendor__link:hover { color: var(--ne-scheme-accent); }
/* END_BLOCK:product-vendor */
/* START_BLOCK:product-wishlist (INDEX:123) */
.ne-product-wishlist {
display: flex;
}
.ne-product-wishlist--left { justify-content: flex-start; }
.ne-product-wishlist--center { justify-content: center; }
.ne-product-wishlist--right { justify-content: flex-end; }
.ne-product-wishlist__btn {
display: inline-flex;
align-items: center;
gap: var(--ne-space-2);
padding: var(--ne-space-2) var(--ne-space-3);
background: transparent;
border: 1px solid var(--ne-scheme-border);
border-radius: var(--ne-btn-radius, var(--ne-radius-md, 8px));
color: var(--ne-scheme-text);
font-family: inherit;
font-size: var(--ne-font-size-sm);
cursor: pointer;
transition: color var(--ne-transition-fast), border-color var(--ne-transition-fast), background var(--ne-transition-fast);
}
.ne-product-wishlist__btn:hover {
color: var(--ne-wishlist-active-color, var(--ne-color-sale, #ef4444));
border-color: var(--ne-wishlist-active-color, var(--ne-color-sale, #ef4444));
}
.ne-product-wishlist__btn.ne-wishlist-btn--active {
color: var(--ne-wishlist-active-color, var(--ne-color-sale, #ef4444));
border-color: var(--ne-wishlist-active-color, var(--ne-color-sale, #ef4444));
}
.ne-product-wishlist__btn.ne-wishlist-btn--active .ne-product-wishlist__icon {
fill: var(--ne-wishlist-active-color, var(--ne-color-sale, #ef4444));
}
.ne-product-wishlist__icon { flex-shrink: 0; }
/* Icon-only variant: square button with just the heart */
.ne-product-wishlist--icon .ne-product-wishlist__btn {
width: 38px;
height: 38px;
padding: 0;
justify-content: center;
border-radius: var(--ne-radius-full);
}
/* Text-only: hide icon */
.ne-product-wishlist--text .ne-product-wishlist__icon { display: none; }
/* Sync mode: read --ne-pd-btn-width from the section ancestor, set
by the buy-buttons block. Result: wishlist matches ATC width
exactly without any per-block setting. */
.ne-product-wishlist--sync-buy .ne-product-wishlist__btn {
width: var(--ne-pd-btn-width, 100%);
justify-content: center;
padding: var(--ne-btn-padding-y, var(--ne-space-3)) var(--ne-btn-padding-x, var(--ne-space-6));
}
/* Independent width mode: --ne-pd-wl-width emitted on the block via
inline style (only when sync is OFF). */
.ne-product-wishlist:not(.ne-product-wishlist--sync-buy) .ne-product-wishlist__btn {
width: var(--ne-pd-wl-width, 100%);
justify-content: center;
padding: var(--ne-btn-padding-y, var(--ne-space-3)) var(--ne-btn-padding-x, var(--ne-space-6));
}
/* END_BLOCK:product-wishlist */
/* START_BLOCK:recently-viewed-grid (INDEX:124) */
.ne-rv-grid {
width: 100%;
background: transparent !important;
}
.ne-rv-grid--hide-empty:not([data-rv-state="loaded"]) {
display: none;
}
.ne-rv-grid--hide-empty[data-rv-state="empty"] {
display: none;
}
.ne-rv-grid__track {
display: grid;
grid-template-columns: repeat(var(--ne-rv-cols, 4), minmax(0, 1fr));
gap: var(--ne-rv-gap, 16px);
/* Inset matches product-grid's .ne-pg__grid so card shadows /
glow / hover-zoom have the same breathing room around the
outer card edges. */
padding: var(--ne-space-2, 8px) var(--ne-space-2, 8px) var(--ne-space-4, 16px);
}
@media (max-width: 749px) {
.ne-rv-grid__track {
grid-template-columns: repeat(var(--ne-rv-cols-m, 2), minmax(0, 1fr));
}
}
.ne-rv-grid__empty {
margin: 0;
padding: 24px 0;
text-align: center;
color: var(--ne-scheme-text-muted, var(--ne-scheme-text));
opacity: 0.7;
font-size: 0.9rem;
}
/* Card — own namespace (no .ne-product-card collisions).
overflow: hidden clips the media to the card's border-radius so
image top corners follow card corners (mirrors product-card
behaviour). align-items: stretch on the parent grid + a bottom
margin: auto on the price pushes price rows to align across cards
in the same grid row even when titles wrap differently.
Hover transform keeps translateZ via translate3d so the GPU
compositing layer doesn't collapse mid-frame (Rule 162). */
.ne-rv-grid .ne-rv-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ne-rv-title-price-gap, 8px);
padding: var(--ne-rv-pad, 0);
border-radius: var(--ne-rv-radius, 12px);
overflow: hidden;
isolation: isolate;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
height: 100%;
transition: transform var(--ne-transition-base, 0.2s ease), box-shadow var(--ne-transition-base, 0.2s ease);
}
.ne-rv-grid .ne-rv-card:hover {
transform: translate3d(0, -4px, 0);
}
.ne-rv-grid--surface-solid .ne-rv-card {
background: var(--ne-scheme-bg, transparent);
border: 1px solid var(--ne-scheme-border, rgba(127, 127, 127, 0.15));
}
.ne-rv-grid--surface-glass .ne-rv-card {
background: var(--ne-glass-bg, rgba(255, 255, 255, 0.05));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
border: 1px solid var(--ne-glass-border, rgba(255, 255, 255, 0.12));
will-change: backdrop-filter;
}
/* Accent-tinted glass cards (same --ne-glass-bg-tinted var as everywhere). */
.ne-rv-grid--surface-glass.ne-rv-grid--glass-tint .ne-rv-card {
background: var(--ne-glass-bg-tinted, var(--ne-glass-bg, rgba(255, 255, 255, 0.05)));
border-color: var(--ne-glass-border-tinted, var(--ne-glass-border, rgba(255, 255, 255, 0.12)));
}
/* Card shadow / glow — mirrors product-card snippet:
Shadow visible at rest, slightly stronger on hover.
Glow lights up only on hover (so cards aren't perma-glowing). */
.ne-rv-grid--shadow .ne-rv-card {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.ne-rv-grid--shadow .ne-rv-card:hover {
box-shadow: 0 5px 14px rgba(0, 0, 0, 0.16);
}
.ne-rv-grid--glow .ne-rv-card:hover {
box-shadow: 0 0 16px var(--ne-scheme-accent-glow, rgba(127, 127, 127, 0.22));
}
/* Both: hover prefers glow chip, resting state keeps shadow */
.ne-rv-grid--shadow.ne-rv-grid--glow .ne-rv-card {
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.12);
}
.ne-rv-grid--shadow.ne-rv-grid--glow .ne-rv-card:hover {
box-shadow:
0 0 14px var(--ne-scheme-accent-glow, rgba(127, 127, 127, 0.22)),
0 4px 12px rgba(0, 0, 0, 0.14);
}
.ne-rv-grid .ne-rv-card__link {
color: inherit;
text-decoration: none;
display: contents;
}
.ne-rv-grid .ne-rv-card__media {
position: relative;
width: 100%;
border-radius: var(--ne-rv-img-radius, 0);
overflow: clip;
/* No bg here — a dark scheme-bg-muted shows as a thin black band
at image edges if the image doesn't perfectly cover. Card itself
provides the surface (transparent / solid / glass). */
}
.ne-rv-grid--ratio-square .ne-rv-card__media { aspect-ratio: 1 / 1; }
.ne-rv-grid--ratio-portrait .ne-rv-card__media { aspect-ratio: 3 / 4; }
.ne-rv-grid--ratio-landscape .ne-rv-card__media { aspect-ratio: 4 / 3; }
.ne-rv-grid--ratio-natural .ne-rv-card__media { aspect-ratio: auto; min-height: 200px; }
.ne-rv-grid .ne-rv-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
transition: opacity 0.25s ease, transform 0.4s ease;
/* Permanent GPU layer so hover-scale doesn't trigger layer-create
flicker (mirrors product-card.liquid Rule 162). */
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
}
/* Image hover-zoom (mirrors product-card snippet for visual consistency).
Single-image cards: primary scales to 1.06.
Cards with secondary: primary fades to 0, secondary fades to 1
and slightly scales (1.03) for a parallax feel. */
.ne-rv-grid .ne-rv-card:not(.ne-rv-card--has-secondary):hover .ne-rv-card__img--primary {
transform: scale3d(1.06, 1.06, 1);
}
.ne-rv-grid .ne-rv-card__img--secondary {
position: absolute;
inset: 0;
opacity: 0;
pointer-events: none;
}
.ne-rv-grid .ne-rv-card--has-secondary:hover .ne-rv-card__img--primary {
opacity: 0;
}
.ne-rv-grid .ne-rv-card--has-secondary:hover .ne-rv-card__img--secondary {
opacity: 1;
transform: scale3d(1.03, 1.03, 1);
}
/* Position via global theme-settings vars (Layout → Product cards).
Visual treatment lives in critical.css (.ne-badge--card / --sale / --sold-out / --new).
Flex with gap to support multiple badges side-by-side (Sale + New). */
.ne-rv-grid .ne-rv-card__badge-pos {
position: absolute;
top: var(--ne-badge-top, 8px);
right: var(--ne-badge-right, auto);
bottom: var(--ne-badge-bottom, auto);
left: var(--ne-badge-left, 8px);
z-index: 2;
display: flex;
gap: 4px;
}
/* Typography mirrors snippets/product-card.liquid so cards look
identical to those rendered by the static product-grid block. */
.ne-rv-grid .ne-rv-card__vendor {
display: block;
/* Vendor→title gap follows the row-gap slider (mirrors
.ne-product-card behaviour so all card variants stay in sync). */
margin: 0 0 var(--ne-rv-title-price-gap, 2px);
padding: 0 var(--ne-space-3, 12px);
font-size: var(--ne-font-size-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.7;
color: var(--ne-scheme-text);
}
.ne-rv-grid .ne-rv-card__title {
margin: 0;
padding: var(--ne-space-3, 12px) var(--ne-space-3, 12px) 0;
font-family: var(--ne-rv-title-font, inherit);
font-size: var(--ne-font-size-sm, 0.875rem);
font-weight: 500;
line-height: 1.3;
color: var(--ne-scheme-text);
display: -webkit-box;
-webkit-line-clamp: var(--ne-rv-title-lines, 2);
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.18s ease, opacity 0.18s ease;
}
.ne-rv-grid--title-bold .ne-rv-card__title {
font-weight: 700;
}
.ne-rv-grid--title-italic .ne-rv-card__title {
font-style: italic;
}
.ne-rv-grid--title-no-clamp .ne-rv-card__title {
-webkit-line-clamp: unset;
display: block;
overflow: visible;
}
.ne-rv-grid .ne-rv-card:hover .ne-rv-card__title {
opacity: 0.75;
color: var(--ne-scheme-text);
}
.ne-rv-grid .ne-rv-card:hover .ne-rv-card__title {
color: var(--ne-scheme-accent);
}
/* Price sits at card bottom — margin-top: auto pushes it down
within the flex column. Combined with align-items: stretch on
the parent grid (default) + height: 100% on the card, prices in
the same grid row line up at the same y, even when titles wrap
to different lengths. */
.ne-rv-grid .ne-rv-card__price {
margin-top: auto;
padding: var(--ne-rv-title-price-gap, 8px) var(--ne-space-3, 12px) var(--ne-space-3, 12px);
font-size: var(--ne-font-size-sm, 0.875rem);
font-weight: 500;
color: var(--ne-scheme-text);
display: flex;
gap: var(--ne-space-2, 8px);
align-items: center;
}
.ne-rv-grid .ne-rv-card__compare {
text-decoration: line-through;
opacity: 0.55;
font-weight: 400;
color: var(--ne-scheme-text-muted, var(--ne-scheme-text));
}
/* Sale-price reads --ne-scheme-sale directly (the per-scheme token)
instead of the --ne-color-sale alias at :root — the alias path
resolves against scheme-1 in some cascade contexts and the card's
sale-price stays default-red even when the active scheme has a
custom sale_price colour. */
.ne-rv-grid .ne-rv-card__price--sale {
color: var(--ne-scheme-sale, #f87171);
font-weight: 600;
}
/* END_BLOCK:recently-viewed-grid */
/* START_BLOCK:related-products-grid (INDEX:125) */
.ne-rp-grid {
width: 100%;
background: transparent !important;
display: grid;
grid-template-columns: repeat(var(--ne-rp-cols, 4), minmax(0, 1fr));
gap: var(--ne-rp-gap, 16px);
/* Outer inset matches product-grid's .ne-pg__grid so card shadows
/ glow / hover-lift have the same breathing room. */
padding: var(--ne-space-2, 8px) var(--ne-space-2, 8px) var(--ne-space-4, 16px);
/* Cards align via stretch — product-card has internal 1fr title
row that absorbs height differences so prices line up. */
align-items: stretch;
/* Shared row tracks so the card subgrid (product-card.liquid) can
align media/title/price/swatches/atc ACROSS cards — without this,
mixing products with and without swatches drifted the price row
(user 2026-07-23). Implicit rows repeat `auto` for row 2+. */
grid-template-rows: auto 1fr auto auto auto;
grid-auto-rows: auto;
}
.ne-rp-grid > .ne-product-card { grid-row: span 5; }
@media (max-width: 989px) {
.ne-rp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 749px) {
.ne-rp-grid {
grid-template-columns: repeat(var(--ne-rp-cols-m, 2), 1fr);
}
}
/* Hide-when-empty: hide if the fallback grid emitted no children
AND JS hasn't loaded recommendations yet (or loaded none). The
[data-rp-state="empty"] is set by JS when fetch returns 0. */
.ne-rp-grid--hide-empty:empty,
.ne-rp-grid--hide-empty[data-rp-state="empty"] {
display: none;
}
/* END_BLOCK:related-products-grid */
/* START_BLOCK:scramble-heading (INDEX:126) */
.ne-scramble-heading {
margin: 0;
line-height: 1.1;
letter-spacing: -0.01em;
text-wrap: balance;
background: transparent !important;
}
/* END_BLOCK:scramble-heading */
/* START_BLOCK:shader-logo (INDEX:127) */
.ne-shlogo {
display: block;
max-width: 100%;
}
.ne-shlogo__stage {
position: relative;
width: 100%;
height: var(--ne-shlogo-h, 360px);
}
.ne-shlogo__canvas,
.ne-shlogo__fallback {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
pointer-events: none;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
}
/* Static shape: a solid gradient of the shader colours, shown when the live
canvas is hidden (reduce-motion / no-WebGL) or before it boots. */
.ne-shlogo__fallback {
z-index: 0;
background: linear-gradient(135deg,
var(--ne-sh-a, #0d0d0f) 0%,
var(--ne-sh-b, #f7931a) 55%,
var(--ne-sh-c, var(--ne-sh-b, #f7931a)) 100%);
}
.ne-shlogo__canvas {
z-index: 1;
display: block;
}
.ne-shlogo__sr {
position: absolute;
width: 1px; height: 1px;
padding: 0; margin: -1px;
overflow: hidden; clip: rect(0, 0, 0, 0);
white-space: nowrap; border: 0;
}
@media (max-width: 749px) {
.ne-shlogo__stage { height: var(--ne-shlogo-hm, 260px); }
}
/* END_BLOCK:shader-logo */
/* START_BLOCK:shape (INDEX:129) */
.ne-shape {
position: relative;
box-sizing: border-box;
display: block;
aspect-ratio: var(--ne-shape-aspect, 1 / 1);
min-width: 0;
max-width: 100%;
background: transparent !important;
}
/* Fill-parent (aspect = "parent"): cover the parent tile edge-to-edge. Uses
ABSOLUTE positioning, not flex/height:100% — a grid item's height is not
"definite" for percentage-height resolution, so a flex-basis-0 / height:100%
child collapses to 0 (verified). position:absolute + inset:0 sizes against the
containing block's used box, which is robust. The bento cell content box is
position:relative, so the shape fills it (padding area included → true full
bleed, padding need not be zeroed). Meant for a shape used as a tile fill. */
.ne-shape--fill {
position: absolute;
inset: 0;
width: auto;
height: auto;
max-width: none;
aspect-ratio: auto;
}
.ne-shape.ne-cov { color: var(--ne-scheme-text); }
/* A color-scheme class paints a full-box background (Rule 173). The Shape is
only the clipped fill, so the box itself must stay transparent — the
cut-away corners show the page behind, never a square background. */
.ne-shape[class*="color-scheme-"] { background: transparent !important; }
.ne-shape__fill {
position: absolute;
inset: 0;
clip-path: var(--ne-shape-clip, none);
-webkit-clip-path: var(--ne-shape-clip, none);
overflow: hidden;
background: transparent;
}
.ne-shape__fill--solid { background: var(--ne-scheme-bg-surface, var(--ne-scheme-bg)); }
.ne-shape[class*="color-scheme-"] .ne-shape__fill--solid {
background: var(--ne-scheme-bg-surface, var(--ne-scheme-bg)) !important;
}
.ne-shape__fill--glass {
background: var(--ne-glass-bg, rgba(255, 255, 255, 0.05));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
}
.ne-shape__shader {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
display: block;
pointer-events: none;
}
.ne-shape__img {
position: absolute;
/* JS sizes the box to the polygon's bounding box (image fits the shape at
100%). Until then, fall back to filling the block. */
top: 0;
left: 0;
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transform-origin: center;
transform: translate(var(--ne-shape-img-tx, 0%), var(--ne-shape-img-ty, 0%)) scale(var(--ne-shape-img-scale, 1));
filter: blur(var(--ne-shape-img-blur, 0px));
opacity: var(--ne-shape-img-opacity, 1);
}
.ne-shape__overlay {
position: absolute;
inset: 0;
pointer-events: none;
}
/* Editor-only corner handles (freeform) */
.ne-shape__handles {
position: absolute;
inset: 0;
pointer-events: none;
z-index: 5;
}
.ne-shape__handle {
position: absolute;
transform: translate(-50%, -50%);
min-width: 18px;
height: 18px;
padding: 0 5px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 11px;
font-weight: 700;
line-height: 1;
color: #fff;
background: var(--ne-scheme-accent, #6366f1);
border: 2px solid #fff;
border-radius: 999px;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.45);
}
.ne-shape__clipsvg { position: absolute; width: 0; height: 0; pointer-events: none; }
.ne-shape__pts { position: absolute; width: 0; height: 0; }
/* END_BLOCK:shape */
/* START_BLOCK:slide (INDEX:130) */
/* Layout: parent section's track is a flex row with scroll-snap.
Slide block is a flex item that fills its track-cell. Internal
__media + __content layers sit absolutely inside the slide. */
.ne-slide {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
}
/* Media — full-bleed; user-chosen object-position keeps the focal
point regardless of crop. */
.ne-slide__media {
position: absolute;
inset: 0;
overflow: hidden;
}
.ne-slide__image,
.ne-slide__video {
width: 100%;
height: 100%;
object-fit: cover;
object-position: var(--ne-slide-img-pos, 50% 50%);
display: block;
}
.ne-slide__placeholder {
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
background: var(--ne-scheme-bg-surface, rgba(127,127,127,0.08));
color: #999;
padding: 8%;
}
.ne-slide__placeholder svg {
width: 100%;
max-width: 480px;
height: auto;
opacity: 0.4;
}
.ne-slide__overlay {
position: absolute;
inset: 0;
background: #000;
opacity: var(--ne-slide-overlay, 0.3);
pointer-events: none;
}
/* Content layer — absolutely positioned over the media using the
v_align / h_align flex props so the card lands at any of the
3×3 positions without explicit top/left math. */
.ne-slide__content {
position: absolute;
inset: 0;
z-index: 2;
display: flex;
align-items: var(--ne-slide-v-align, center);
justify-content: var(--ne-slide-h-align, center);
padding: clamp(24px, 5vw, 64px);
pointer-events: none;
}
.ne-slide__card {
pointer-events: auto;
max-width: var(--ne-slide-content-max, 640px);
text-align: var(--ne-slide-text-align, center);
border-radius: var(--ne-slide-content-radius, 0);
padding: var(--ne-slide-content-pad, 24px);
display: flex;
flex-direction: column;
gap: var(--ne-slide-content-gap, 16px);
align-items: var(--ne-slide-h-align, center);
}
/* Full-width content (slide setting "Full width"): the card fills the slide
content area (minus the content layer's padding) instead of the centered
max-width box — for text-only slides that should span the whole width.
Specificity (0,2,0) beats the base .ne-slide__card max-width. */
.ne-slide--content-full .ne-slide__card {
max-width: none;
width: 100%;
}
/* Theme-block wrapper collapses (Rule 70) so child blocks behave as
direct children of the card flex layout. */
.ne-slide__card > .shopify-block { display: contents; }
/* No blocks on the slide → don't render an empty padded glass/scheme box
(user QA 2026-05-25 #29). */
.ne-slide__card:not(:has(> *)) { display: none; }
/* Glass content card — when enabled, adds a backdrop-filtered
surface behind the text. Tinted variant uses the scheme accent. */
.ne-slide--glass .ne-slide__card {
background: var(--ne-glass-bg, rgba(0,0,0,0.35));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
border: 0 solid var(--ne-glass-border, rgba(255, 255, 255, 0));
}
.ne-slide--glass-tinted .ne-slide__card {
background: color-mix(in srgb, var(--ne-scheme-accent, #88a) 25%, rgba(0,0,0,0.3));
border-color: color-mix(in srgb, var(--ne-scheme-accent, #88a) 35%, rgba(255,255,255,0.18));
}
@media (max-width: 749px) {
.ne-slide__content { padding: clamp(20px, 6vw, 32px); }
.ne-slide__card { max-width: 100%; }
}
/* END_BLOCK:slide */
/* START_BLOCK:slider (INDEX:131) */
.ne-slider {
position: relative;
overflow: hidden;
width: 100%;
}
.ne-slider--fade {
mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
-webkit-mask-image: linear-gradient(to right, transparent, black 6%, black 94%, transparent);
}
.ne-slider__track {
display: flex;
align-items: center;
gap: var(--ne-bs-gap, 48px);
width: max-content;
will-change: transform;
}
/* Infinite marquee — CSS keyframes. `--ne-bs-set-width` is set by JS
to the measured width of ONE original set (sum of item widths + one
gap each). When the keyframe reaches translateX(-set-width) the next
iteration jumps back to translateX(0) — visually seamless because
clones are pixel-identical copies of the originals. */
@keyframes ne-slider-left {
from { transform: translateX(0); }
to { transform: translateX(calc(-1 * var(--ne-bs-set-width, 0px))); }
}
@keyframes ne-slider-right {
from { transform: translateX(calc(-1 * var(--ne-bs-set-width, 0px))); }
to { transform: translateX(0); }
}
/* Schema labels are swapped historically (ltr = content-moves-left was the
JS convention). Keep behaviour, readable names via direction classes. */
.ne-slider--dir-ltr .ne-slider__track {
animation: ne-slider-left var(--ne-bs-duration, 20s) linear infinite;
}
.ne-slider--dir-rtl .ne-slider__track {
animation: ne-slider-right var(--ne-bs-duration, 20s) linear infinite;
}
.ne-slider--pause-hover:hover .ne-slider__track {
animation-play-state: paused;
}
/* Theme-block wrappers collapse so brand items become flex children. */
.ne-slider .shopify-block { display: contents; }
/* Logo height: var set on .ne-slider from default_logo_height;
per-brand override sets the same var on .ne-brand-item (closest
ancestor wins via cascade). */
.ne-slider .ne-brand-item__logo {
height: var(--ne-bs-logo-height, 50px);
}
/* Grayscale — apply filter to the WHOLE brand-item (parent of ![]()
).
This is more robust than targeting the ![]()
directly: filter cascades
visually to the entire subtree as one composited layer, so even if some
descendant rule sets its own filter, the parent's grayscale wins at
paint time. Recolor items handle their own desaturation via
background-color swap below. */
.ne-slider--grayscale .ne-brand-item:not(.ne-brand-item--recolor) {
filter: grayscale(1);
transition: filter 250ms;
}
.ne-slider--grayscale .ne-brand-item:not(.ne-brand-item--recolor):hover {
filter: grayscale(0);
}
/* Recolor variants: swap background-color (filter would have no effect on
a flat-painted ). */
.ne-slider--grayscale .ne-brand-item--recolor .ne-brand-item__logo--mask {
background-color: var(--ne-scheme-text-muted, currentColor) !important;
}
.ne-slider--grayscale .ne-brand-item--recolor:hover .ne-brand-item__logo--mask {
background-color: var(--ne-scheme-accent, currentColor) !important;
}
@media (prefers-reduced-motion: reduce) {
.ne-slider__track {
animation: none !important;
flex-wrap: wrap;
justify-content: center;
width: auto;
padding: 0 var(--page-margin, 20px);
}
.ne-slider__track > [aria-hidden="true"] { display: none; }
}
@media (max-width: 749px) {
.ne-slider .ne-brand-item__logo {
height: calc(var(--ne-bs-logo-height, 50px) * 0.75);
}
.ne-slider__track { gap: calc(var(--ne-bs-gap, 48px) * 0.6); }
}
/* END_BLOCK:slider */
/* START_BLOCK:spacer (INDEX:132) */
.ne-block-spacer {
display: block;
width: 100%;
height: var(--ne-spacer-h, 32px);
pointer-events: none;
}
@media (max-width: 990px) {
.ne-block-spacer { height: var(--ne-spacer-ht, var(--ne-spacer-h, 32px)); }
}
@media (max-width: 640px) {
.ne-block-spacer { height: var(--ne-spacer-hm, var(--ne-spacer-ht, var(--ne-spacer-h, 32px))); }
}
/* END_BLOCK:spacer */
/* START_BLOCK:store-map (INDEX:133) */
.ne-store-map {
position: relative;
width: 100%;
background: transparent !important;
display: flex;
flex-direction: column;
align-items: stretch;
/* Picks up the host section's "Gap between blocks" inline var
(sections set --ne-map-gap on the section element). Falls back
to 16px when the block is used outside the map section. */
gap: var(--ne-map-gap, 16px);
}
/* Map area wraps embed + overlay info card so the card can be
absolute-positioned relative to the embed area only. On mobile
the wrapper switches to flex-column so the overlay card flows
under the map instead. */
.ne-store-map__map-area {
position: relative;
width: 100%;
}
/* Sibling layouts — info card lives next to the map. */
.ne-store-map--info-pos-right {
flex-direction: row;
align-items: stretch;
}
.ne-store-map--info-pos-left {
flex-direction: row-reverse;
align-items: stretch;
}
.ne-store-map--info-pos-right .ne-store-map__map-area,
.ne-store-map--info-pos-left .ne-store-map__map-area {
flex: 1 1 60%;
min-width: 0;
}
.ne-store-map__embed {
position: relative;
width: 100%;
height: var(--ne-store-map-height, 400px);
border-radius: var(--ne-store-map-radius, 12px);
overflow: clip;
isolation: isolate;
background: var(--ne-scheme-bg-muted, rgba(127, 127, 127, 0.06));
}
/* Shadow + glow apply to BOTH the map embed AND the info card so
the two surfaces match. The default info-card shadow defined
further down is overridden when these toggles are on. */
.ne-store-map--shadow .ne-store-map__embed,
.ne-store-map--shadow .ne-store-map__info-card {
box-shadow: 0 calc(12px * var(--ne-fx-shadow-i, 1)) calc(32px * var(--ne-fx-shadow-i, 1)) rgba(0, 0, 0, 0.25);
}
.ne-store-map--glow .ne-store-map__embed,
.ne-store-map--glow .ne-store-map__info-card {
box-shadow: 0 0 calc(32px * var(--ne-fx-glow-i, 1)) var(--ne-scheme-accent-glow, rgba(99, 102, 241, 0.4));
}
.ne-store-map--shadow.ne-store-map--glow .ne-store-map__embed,
.ne-store-map--shadow.ne-store-map--glow .ne-store-map__info-card {
box-shadow:
0 calc(12px * var(--ne-fx-shadow-i, 1)) calc(32px * var(--ne-fx-shadow-i, 1)) rgba(0, 0, 0, 0.25),
0 0 calc(32px * var(--ne-fx-glow-i, 1)) var(--ne-scheme-accent-glow, rgba(99, 102, 241, 0.4));
}
.ne-store-map__iframe {
display: block;
width: 100%;
height: 100%;
border: 0;
}
/* Map invert filter — cheap CSS-filter trick that re-tints Google's
light-theme map tiles for a dark scheme. Imperfect on photos /
satellite, fine for standard road map.
on = always inverted
off = never inverted
auto = follows the global dark/light toggle (data-ne-mode on
: "primary" usually maps to the dark scheme). */
.ne-store-map--invert-on .ne-store-map__iframe {
filter: invert(90%) hue-rotate(180deg);
}
[data-ne-mode="primary"] .ne-store-map--invert-auto .ne-store-map__iframe {
filter: invert(90%) hue-rotate(180deg);
}
[data-ne-mode="alternate"] .ne-store-map--invert-auto .ne-store-map__iframe {
filter: none;
}
/* Info-card overlay — absolutely positioned in any of 4 corners.
Sits above the iframe (z-index: 2). No default shadow here —
overlay layout adds a subtle one separately so it reads against
the map; sibling cards stay flat unless the user toggles shadow. */
.ne-store-map__info-card {
position: absolute;
z-index: 2;
max-width: min(280px, calc(100% - 32px));
padding: 14px 16px;
border-radius: 12px;
color: var(--ne-scheme-text);
font-size: 0.85rem;
line-height: 1.45;
display: flex;
flex-direction: column;
gap: 10px;
}
/* Subtle default shadow ONLY for overlay cards (need separation
from the map). Sibling cards stay flat at default. :where()
drops the rule's specificity to (0,1,0) so the user's --shadow
/ --glow toggle (specificity (0,2,0)) wins regardless of source
order. */
:where(.ne-store-map--info-overlay) .ne-store-map__info-card {
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}
.ne-store-map__info-card--solid {
background: var(--ne-scheme-bg, #fff);
border: 1px solid var(--ne-scheme-border, rgba(127, 127, 127, 0.15));
}
.ne-store-map__info-card--glass {
background: var(--ne-glass-bg, rgba(255, 255, 255, 0.65));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
border: 0 solid var(--ne-glass-border, rgba(255, 255, 255, 0));
}
/* Corner-overlay positions — absolute relative to __map-area
(which is position: relative). Only apply in overlay layout;
sibling resets to static further down. */
.ne-store-map--info-overlay .ne-store-map__info-card--top-left { top: 16px; left: 16px; }
.ne-store-map--info-overlay .ne-store-map__info-card--top-right { top: 16px; right: 16px; }
.ne-store-map--info-overlay .ne-store-map__info-card--bottom-left { bottom: 16px; left: 16px; }
.ne-store-map--info-overlay .ne-store-map__info-card--bottom-right { bottom: 16px; right: 16px; }
/* Sibling layout — card flows in normal block layout next to the
map. Reset overlay-specific positioning; rows shrink to their
content (so icon + text sit together) and the row group aligns
left / center / right inside the side column. NOTE: no
`box-shadow: none` reset here — that was clobbering the
--shadow / --glow toggle below since this rule comes later in
source order. The shadow toggle now controls both card surfaces. */
.ne-store-map--info-sibling .ne-store-map__info-card {
position: static;
max-width: none;
width: 100%;
align-items: var(--ne-info-rows-align, center);
}
.ne-store-map--info-sibling .ne-store-map__info-row {
flex: 0 0 auto;
width: auto;
max-width: 100%;
}
.ne-store-map--info-sibling .ne-store-map__info-row .ne-rte,
.ne-store-map--info-sibling .ne-store-map__info-row a {
flex: 0 0 auto;
}
.ne-store-map--info-align-left { --ne-info-rows-align: flex-start; }
.ne-store-map--info-align-center { --ne-info-rows-align: center; }
.ne-store-map--info-align-right { --ne-info-rows-align: flex-end; }
.ne-store-map--info-align-left .ne-store-map__info-row .ne-rte { text-align: left; }
.ne-store-map--info-align-center .ne-store-map__info-row .ne-rte { text-align: center; }
.ne-store-map--info-align-right .ne-store-map__info-row .ne-rte { text-align: right; }
/* CTA always centered in sibling layouts — independent of info_align
(info_align only affects the address rows). */
.ne-store-map--info-sibling .ne-store-map__cta {
display: flex;
justify-content: center;
}
.ne-store-map__info-row {
display: flex;
gap: 10px;
align-items: flex-start;
color: var(--ne-scheme-text);
}
.ne-store-map__info-row svg {
flex-shrink: 0;
margin-top: 3px;
color: var(--ne-scheme-accent, currentColor);
}
.ne-store-map__info-row .ne-rte,
.ne-store-map__info-row a {
flex: 1;
min-width: 0;
}
.ne-store-map__info-row a {
color: var(--ne-scheme-text);
text-decoration: none;
}
.ne-store-map__info-row a:hover {
color: var(--ne-scheme-accent);
}
.ne-store-map__info-row .ne-rte p {
margin: 0;
}
.ne-store-map__info-row .ne-rte p + p {
margin-top: 4px;
}
@media (max-width: 749px) {
/* Sibling row layouts collapse to column on mobile. Reset all
desktop flex sizing so children take their intrinsic height
and the gap between map and address card equals exactly the
outer --ne-map-gap (no stretching adds phantom space). */
.ne-store-map--info-pos-right,
.ne-store-map--info-pos-left {
flex-direction: column;
}
.ne-store-map--info-pos-right .ne-store-map__map-area,
.ne-store-map--info-pos-left .ne-store-map__map-area,
.ne-store-map--info-pos-right .ne-store-map__side,
.ne-store-map--info-pos-left .ne-store-map__side {
flex: 0 0 auto;
align-self: stretch;
}
.ne-store-map--info-sibling .ne-store-map__side {
justify-content: flex-start;
}
/* Overlay positions also drop to under-the-map flow on mobile —
the corner overlay style cramps the small viewport. The card
leaves absolute positioning and stacks below the embed inside
__map-area, which switches to flex-column with the same
--ne-map-gap as the section. */
.ne-store-map--info-overlay .ne-store-map__map-area {
display: flex;
flex-direction: column;
gap: var(--ne-map-gap, 16px);
}
.ne-store-map--info-overlay .ne-store-map__info-card {
position: static;
top: auto;
right: auto;
bottom: auto;
left: auto;
max-width: none;
width: 100%;
}
}
@media (max-width: 599px) {
.ne-store-map__info-card {
padding: 12px 14px;
font-size: 0.8rem;
}
}
/* Sibling layout wrapper — vertically stacks info-card + directions
CTA into a single column next to the map. Internal gap matches
the section's "Gap between blocks" so the address card sits as
close to the CTA as the user configured. */
.ne-store-map__side {
display: flex;
flex-direction: column;
gap: var(--ne-map-gap, 16px);
justify-content: center;
}
.ne-store-map--info-pos-right .ne-store-map__side,
.ne-store-map--info-pos-left .ne-store-map__side {
flex: 0 0 280px;
align-self: stretch;
}
.ne-store-map__placeholder {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 12px;
height: 100%;
padding: 24px;
color: var(--ne-scheme-text-muted, var(--ne-scheme-text));
opacity: 0.7;
text-align: center;
border: 1px dashed var(--ne-scheme-border, rgba(127, 127, 127, 0.3));
border-radius: inherit;
}
.ne-store-map__placeholder p {
margin: 0;
font-size: 0.9rem;
}
.ne-store-map__cta {
display: flex;
justify-content: var(--ne-bw-justify, flex-start);
}
/* END_BLOCK:store-map */
/* START_BLOCK:tab (INDEX:134) */
.ne-tab__panel {
width: 100%;
color: var(--ne-scheme-text);
line-height: 1.65;
}
.ne-tab__panel > .shopify-block { display: contents; }
.ne-tab__panel > :first-child { margin-top: 0; }
.ne-tab__panel > :last-child { margin-bottom: 0; }
/* END_BLOCK:tab */
/* START_BLOCK:testimonial-list (INDEX:135) */
.ne-tl {
--ne-tl-row-span: 3;
--ne-tl-inner-gap: 12px;
width: 100%;
/* The list is a layout wrapper, not a scheme surface — cards paint
their own bg via --ne-scheme-bg cascading from list.color-scheme-X.
Force transparent so inherited scheme-bg doesn't leak onto the
wrapper itself. */
background: transparent !important;
}
.ne-tl.ne-cov { color: var(--ne-scheme-text); }
/* Theme-block wrapper collapses so each testimonial becomes a direct
grid item — required for subgrid to work (Rule 70 + Rule 127). */
.ne-tl__grid > .shopify-block,
.ne-tl__track > .shopify-block { display: contents; }
/* ──────────────── Grid layout ──────────────── */
.ne-tl--grid .ne-tl__grid {
display: grid;
grid-template-columns: repeat(var(--ne-tl-cols, 3), minmax(0, 1fr));
grid-template-rows: repeat(var(--ne-tl-cols, 3), auto);
gap: var(--ne-tl-gap, 20px);
/* Row template = 3 rows per card: rating / quote (1fr) / author.
Each card spans 3 rows → subgrid aligns content across cards. */
grid-auto-rows: auto 1fr auto;
}
.ne-tl--grid .ne-testimonial {
/* Already set in the child stylesheet but repeat for specificity
when multiple stylesheets load in different orders. */
grid-template-rows: subgrid;
grid-row: span 3;
}
/* Stack layout — one column, cards stack vertically. */
.ne-tl--stack .ne-tl__grid {
display: flex;
flex-direction: column;
gap: var(--ne-tl-gap, 20px);
}
/* ──────────────── Slider layout ──────────────── */
/* padding-inline reserves space for the arrows alongside the cards.
Track (inside carousel) re-computes grid-auto-columns against the
reduced width — cards shrink, arrows sit in the gutter with a
small overlap onto the card edge. */
.ne-tl--slider .ne-tl__carousel {
position: relative;
/* `overflow-x: clip` hard-clips the track's inline bleed at the
carousel's box edge. `overflow-y: visible` keeps the track's
vertical shadow bleed visible past the carousel's top/bottom.
padding-inline: 48 reserves an INSET ZONE: cards are pushed
away from the box edge so their shadow renders inside the
gutter without reaching the visible box border. Arrows
(left:0 / right:0) sit in this gutter alongside cards. */
overflow-x: clip;
overflow-y: visible;
padding-inline: 32px;
}
.ne-tl--slider .ne-tl__track {
display: grid;
grid-auto-flow: column;
grid-auto-columns: calc((100% - (var(--ne-tl-cols, 3) - 1) * var(--ne-tl-gap, 20px)) / var(--ne-tl-cols, 3));
grid-auto-rows: auto 1fr auto;
gap: var(--ne-tl-gap, 20px);
overflow-x: auto;
overflow-y: hidden;
/* proximity (not mandatory) — mandatory aggressively re-snaps on
every sub-pixel drift during smooth scroll, amplifying subgrid
row jitter; proximity only snaps near rest positions. */
scroll-snap-type: x proximity;
scroll-behavior: smooth;
scrollbar-width: none;
/* Rule 205: explicit touch-action so mobile swipe delegates fully to
this scroll container — without this the swipe stops mid-card.
pan-y lets a vertical swipe scroll the page instead of being trapped
by this horizontal carousel. */
touch-action: pan-x pan-y;
-webkit-overflow-scrolling: touch;
/* Track padding-inline = gap (Rule 166). Eliminates next-card peek
at the right edge: peek = padding-inline − gap; setting them
equal makes card-(N+1) start exactly at the track-border-right
(= invisible). Shadow-bleed buffer reduces from 32px → gap
(typically 20px), which still covers default 24px-blur shadow
(alpha fades at outer edges, 4px clip imperceptible). At very
high shadow-intensity (200% global, 48px blur) the outermost
shadow-edge clips by ~28px — acceptable trade-off for the
always-clean no-peek visual. padding-block stays at 32px for
vertical shadow-bleed (unrelated to peek). */
padding-block: 32px;
padding-inline: var(--ne-tl-gap, 20px);
margin-block: -32px;
scroll-padding-inline: var(--ne-tl-gap, 20px);
/* Edge-aware fade: only fade on the side(s) where there's
off-screen content. data-edge is set on the carousel by the
generic edge-detector in hyprism-features.js. Default state
(middle / no attr) fades both sides. */
will-change: scroll-position;
}
/* Edge-fade abandoned — mask-image clips shadow/glow (Rule 158);
gradient overlays look too dark against the section bg.
Cards swipe in/out without a soft fade — shadow/glow visible,
centered geometry preserved. */
/* Glassmorphism + mask-image are mutually exclusive — mask creates
a stacking context that breaks `backdrop-filter` sampling on
glass cards (the blur effect doesn't render). When glass is on
we drop the mask so blur works; the trade-off is no edge fade. */
.ne-tl--glass.ne-tl--slider .ne-tl__track {
-webkit-mask-image: none;
mask-image: none;
}
.ne-tl--slider .ne-tl__track::-webkit-scrollbar { display: none; }
.ne-tl--slider .ne-testimonial {
scroll-snap-align: start;
grid-template-rows: subgrid;
grid-row: span 3;
}
.ne-tl__arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
width: 40px;
height: 40px;
color: var(--ne-scheme-text, currentColor);
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
padding: 0;
}
.ne-tl__arrow:hover { transform: translateY(-50%) scale(1.05); }
/* Arrow sits at the inner edge of the carousel's padding — ~4px
overlap onto the card (arrow width 40px > padding 36px). */
.ne-tl__arrow--prev { left: 6px; }
.ne-tl__arrow--next { right: 6px; }
/* Button style — bg + border + shadow. border-radius lives inline
on the element (Rule 24 — critical.css button-reset wins
specificity fights). */
.ne-tl--arrow-button .ne-tl__arrow {
background: var(--ne-scheme-bg, #fff);
border: 1px solid var(--ne-scheme-border, rgba(127,127,127,0.25));
box-shadow: 0 4px 12px rgba(0,0,0,0.12);
}
/* Plain style — just the arrow icon, no background/border. */
.ne-tl--arrow-plain .ne-tl__arrow {
background: transparent;
border: 0;
box-shadow: none;
width: 32px;
height: 32px;
}
.ne-tl--arrow-plain .ne-tl__arrow:hover { color: var(--ne-scheme-accent, currentColor); }
/* ──────────────── Card chrome ──────────────── */
.ne-tl .ne-testimonial {
padding: var(--ne-tl-card-pad, 24px);
border-radius: var(--ne-tl-card-radius, 16px);
background: transparent;
border: 1px solid var(--ne-scheme-border, rgba(127,127,127,0.2));
/* No isolation/transform transitions — both force additional
compositing layers that shake during smooth-scroll with
mandatory snap / subgrid row reflow (observed as stars jitter). */
transition: box-shadow .2s ease;
}
/* Opt-in: when the list carries a card_scheme, every card paints
its BG using the nearest scheme in the cascade — list's scheme by
default, or the card's own scheme when it overrides. */
.ne-tl--has-card-scheme .ne-testimonial {
background: var(--ne-scheme-bg);
border-color: var(--ne-scheme-border, rgba(127,127,127,0.2));
}
/* Chrome modifiers on the LIST set vars the cards read. Composed
shadow (Rule 130) — glass/glow/shadow stack without conflicts. */
.ne-tl .ne-testimonial {
--ne-tl-shadow-outer: 0 0 0 0 transparent;
--ne-tl-shadow-glow: 0 0 0 0 transparent;
box-shadow: var(--ne-tl-shadow-outer), var(--ne-tl-shadow-glow);
}
/* Effects coupled to global block-intensity (Theme-Settings ×0.6). */
.ne-tl--shadow .ne-testimonial { --ne-tl-shadow-outer: var(--ne-block-shadow-effect, 0 8px 24px rgba(0,0,0,0.12)); }
.ne-tl--glow .ne-testimonial { --ne-tl-shadow-glow: var(--ne-block-glow-effect, 0 0 24px var(--ne-scheme-accent-glow, rgba(120,120,255,0.35))); }
.ne-tl--glass .ne-testimonial {
background: var(--ne-glass-bg, rgba(255,255,255,0.05)) !important;
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
/* No border: 1px glass-border reads as a bottom contour line on dark
bg (same fix as blog/product-card glass, user QA 2026-05-25). */
border: 0;
}
/* Accent-tinted glass — opt-in via card_glass_tint (uses per-scheme
--ne-glass-bg-tinted, same mechanism as the card-glass sweep). */
.ne-tl--glass.ne-tl--glass-tint .ne-testimonial {
background: var(--ne-glass-bg-tinted, var(--ne-glass-bg, rgba(255,255,255,0.05))) !important;
}
/* ──────────────── Coverflow layout ──────────────── */
/* Cards are wrapped in .ne-cf__card by the JS on init. The wrapper owns
glass/tint/glow/shadow (Rule 49: its transform makes a backdrop-root and
clips the inner card's box-shadow), so the inner .ne-testimonial drops its
own chrome and just fills the wrapper. */
/* The JS wraps each content_for block (a .shopify-block holding the
.ne-testimonial) in a .ne-cf__card. display:contents lets the snippet's
`.ne-cf__card > *` rules + the card sizing reach the testimonial. */
.ne-tl--coverflow .ne-cf__card > .shopify-block { display: contents; }
.ne-tl--coverflow .ne-testimonial {
min-height: var(--ne-cf-h);
grid-row: auto;
margin: 0;
border: 0;
--ne-tl-shadow-outer: 0 0 0 0 transparent !important;
--ne-tl-shadow-glow: 0 0 0 0 transparent !important;
box-shadow: none !important;
}
/* Solid surface — the wrapper only paints the drum BACK panel, so the inner
card paints the opaque front face from the same colour (--ne-cf-cbg is
defined on the .ne-cf__card--surface-solid wrapper and inherits down). */
.ne-tl--coverflow:not(.ne-tl--glass) .ne-testimonial {
background: var(--ne-cf-cbg, var(--ne-scheme-card-bg, var(--ne-scheme-bg, #1a1a28))) !important;
}
/* Glass surface — inner transparent so the wrapper's backdrop-filter shows. */
.ne-tl--coverflow.ne-tl--glass .ne-testimonial {
background: transparent !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
/* Decorative giant quote mark before the quote text. */
.ne-tl--decorated .ne-testimonial__quote::before {
content: "\201C";
display: block;
font-family: var(--font-heading--family);
font-size: 3rem;
line-height: 0.8;
color: var(--ne-scheme-accent, currentColor);
opacity: 0.4;
margin-bottom: 8px;
}
/* ──────────────── Responsive ──────────────── */
/* Tablet (600-989px): 2-up slider. Excluded ≤599 so the mobile rules
below don't fight this for cascade priority. */
@media (min-width: 600px) and (max-width: 989px) {
.ne-tl--grid .ne-tl__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ne-tl--slider .ne-tl__track { grid-auto-columns: calc((100% - var(--ne-tl-gap, 20px)) / 2); }
}
@media (max-width: 599px) {
.ne-tl--grid .ne-tl__grid { grid-template-columns: 1fr; }
/* Mobile carousel: 0 peek at rest + 32px glow buffer all sides.
Key math: card 2's visible peek at scrollLeft=0 equals
(track-padding-inline) − (track-gap). Setting them equal at
32px each makes peek = 0. Card 1 fills the visible area exactly;
card 2 starts precisely at the padding-box right edge (clipped
by overflow-x: auto). When swiping, card 2 enters smoothly.
- carousel padding-inline: 0 → track uses full carousel width
- track padding-inline: 32px → 32px glow-buffer each side
- track gap (column-gap): 32px → matches padding so no peek
- card grid-auto-columns: 100% = content-box width = T-64
- card 1 in scroll-port from x=32 to x=T-32 (centered) ✓
- card 2 starts at scroll-port x=T → off-screen, clipped ✓
- Center-snap mathematically perfect for all positions. */
.ne-tl--slider .ne-tl__carousel { padding-inline: 0 !important; }
.ne-tl--slider .ne-tl__track {
grid-auto-columns: 100% !important;
padding-inline: var(--ne-tl-gap, 20px) !important;
scroll-padding-inline: var(--ne-tl-gap, 20px) !important;
column-gap: 32px !important;
gap: 32px !important;
}
.ne-tl--slider .ne-testimonial { scroll-snap-align: center !important; }
}
/* END_BLOCK:testimonial-list */
/* START_BLOCK:testimonial (INDEX:136) */
/* Layout owned by the parent testimonial-list (subgrid rows,
card padding / radius / chrome). This file only styles the
inner content. */
.ne-testimonial {
display: grid;
grid-template-rows: subgrid;
grid-row: span var(--ne-tl-row-span, 3);
gap: var(--ne-tl-inner-gap, 12px);
align-content: start;
}
/* Fallback if the parent doesn't provide subgrid context (e.g. stack
layout). Stacks normally with flex-like gap via row gap on grid. */
@supports not (grid-template-rows: subgrid) {
.ne-testimonial { display: flex; flex-direction: column; }
}
.ne-testimonial__rating {
display: inline-flex;
gap: 2px;
color: var(--ne-color-warning, #f5b042);
line-height: 0;
}
.ne-testimonial__star--empty { color: var(--ne-scheme-border, rgba(127,127,127,0.3)); }
.ne-testimonial__quote {
margin: 0;
padding: 0;
border: 0;
color: var(--ne-scheme-text);
font-family: var(--font-body--family);
font-size: var(--ne-font-size-md, 1rem);
line-height: 1.6;
/* Quote stretches to fill the middle subgrid row so author always
anchors at the card bottom (Rule 127). */
align-self: start;
}
.ne-testimonial__quote p { margin: 0; }
.ne-testimonial__quote p + p { margin-top: 0.5em; }
.ne-testimonial__author {
display: flex;
align-items: center;
gap: 12px;
margin-top: auto;
}
.ne-testimonial__avatar {
width: var(--ne-tl-avatar-size, 48px);
height: var(--ne-tl-avatar-size, 48px);
flex-shrink: 0;
overflow: hidden;
border-radius: var(--ne-tl-avatar-radius, 999px);
background: var(--ne-scheme-border, rgba(127,127,127,0.15));
}
.ne-testimonial__avatar-img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ne-testimonial__author-info {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.ne-testimonial__name {
font-style: normal;
font-weight: 600;
font-size: var(--ne-font-size-sm, 0.9375rem);
color: var(--ne-scheme-text);
}
.ne-testimonial__title {
font-size: var(--ne-font-size-xs, 0.8125rem);
color: var(--ne-scheme-text);
opacity: 0.7;
}
/* Per-card scheme override paints its own background when the card
has a background declared by the parent. `ne-testimonial--has-scheme`
flag lets the parent opt into bg-painting when a scheme is set. */
.ne-testimonial--has-scheme { background-color: var(--ne-scheme-bg); }
/* END_BLOCK:testimonial */
/* START_BLOCK:text (INDEX:137) */
.ne-block-text { background: transparent !important; }
.ne-block-text > :first-child { margin-top: 0; }
.ne-block-text > :last-child { margin-bottom: 0; }
/* Paragraph spacing — global `* { margin: 0 }` reset (critical.css)
strips browser-default margins, so back-to-back paragraphs
stack tight. Restore visible separation between
blocks via
the user-controllable `--ne-text-para-gap` (paragraph_spacing
setting, em-based so it scales with font size). */
.ne-block-text {
--ne-text-para-gap: 14px;
line-height: var(--ne-text-line-height, 1.6);
}
.ne-block-text p { margin-block: 0 var(--ne-text-para-gap); }
.ne-block-text p:last-child { margin-bottom: 0; }
/* Empty-paragraph spacer — Shopify's richtext editor preserves empty
and
when the user presses Enter on a blank
line. Render them as a visible blank line so authors can create
extra spacing without a second text-block (user request 2026-05-23).
Multiple consecutive empty paragraphs stack — each contributes its
own 1em height plus the paragraph gap. */
.ne-block-text p:empty,
.ne-block-text p:has(> br:only-child) {
min-height: 1em;
margin-block: 0 var(--ne-text-para-gap);
}
/* Standalone
inside a non-empty paragraph (shift+enter line-break) —
give it the same baseline height the line-height already provides;
consecutive
s stack and create visible vertical space (matches
the editor's WYSIWYG behavior even when Shopify collapses adjacent
empty s on save). */
.ne-block-text br { display: block; content: ""; margin-block-start: 0; }
/* Lists + blockquote: also restore breathing room. */
.ne-block-text ul,
.ne-block-text ol,
.ne-block-text blockquote { margin-block: 0 var(--ne-text-para-gap); }
.ne-block-text ul,
.ne-block-text ol { padding-inline-start: 1.4em; }
.ne-block-text--drop-cap > p:first-of-type::first-letter {
float: left;
font-size: 3.5em;
line-height: 0.9;
font-weight: 700;
padding: 0.1em 0.1em 0 0;
color: var(--ne-scheme-accent);
}
.ne-block-text--highlight mark,
.ne-block-text--highlight em,
.ne-block-text--highlight strong {
background: linear-gradient(180deg, transparent 55%, var(--ne-scheme-accent-glow, rgba(120,120,255,0.3)) 55%);
padding: 0 0.1em;
border-radius: 2px;
}
.ne-block-text--highlight mark {
color: inherit;
}
/* END_BLOCK:text */
/* START_BLOCK:video (INDEX:138) */
/* CSS-var based alignment — parent can set --ne-iw-align (same var
as image-wrap); block's modifier sets it at element-scope so
per-block setting wins over inherited group default. */
.ne-block-video-wrap {
display: flex;
width: 100%;
flex-direction: column;
align-items: var(--ne-iw-align, center);
}
.ne-block-video-wrap--left { --ne-iw-align: flex-start; }
.ne-block-video-wrap--center { --ne-iw-align: center; }
.ne-block-video-wrap--right { --ne-iw-align: flex-end; }
.ne-block-video {
position: relative;
width: 100%;
overflow: hidden;
background: #000;
}
/* Surface — for videos with a transparent background (alpha webm/mov).
transparent = video sits directly on the section bg; glass = frosted
panel behind it, visible through the video's transparent areas. The
--surface-glass class carries "glass" so the global glass-shine paints
its top highlight automatically (user 2026-05-25). */
.ne-block-video--surface-transparent { background: transparent; }
.ne-block-video--surface-glass {
background: var(--ne-glass-bg, rgba(255, 255, 255, 0.06));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
}
/* Glass-shine top highlight — opt-in glossy edge (mirrors image block). */
.ne-block-video--shine { position: relative; }
.ne-block-video--shine::after {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background-image: var(--ne-glass-shine-bg, linear-gradient(180deg, rgba(255,255,255,0.25) 0%, rgba(255,255,255,0.20) 1px, rgba(255,255,255,0.06) 2px, transparent 3px));
pointer-events: none;
z-index: 3;
border-top-left-radius: inherit;
border-top-right-radius: inherit;
}
/* Embeds need a fallback aspect-ratio when 'auto' is chosen — they have
no intrinsic size like an upload does. */
.ne-block-video:not([style*="aspect-ratio"]):has(iframe) { aspect-ratio: 16 / 9; }
/* YouTube Shorts auto-detected → 9:16. Must be more specific than the iframe rule
above (adding .ne-block-video selector for higher specificity). User's max_width
slider controls the width — no CSS cap here. */
.ne-block-video.ne-block-video--shorts:not([style*="aspect-ratio"]):has(iframe) { aspect-ratio: 9 / 16; }
/* Empty state (no video, no URL) — show placeholder at 16:9 so editors see the block. */
.ne-block-video:not([style*="aspect-ratio"]):has(.ne-block-video__placeholder) {
aspect-ratio: 16 / 9;
background: var(--ne-scheme-card-bg, var(--ne-scheme-bg, #1a1a1a));
border: 1px dashed var(--ne-scheme-border, rgba(255,255,255,0.15));
}
/* With a glass/transparent surface the dashed empty-state outline + card
bg fight the glass look — keep the surface clean (user QA #27). The
dashed hint is editor-only (empty block) anyway. */
.ne-block-video--surface-glass:not([style*="aspect-ratio"]):has(.ne-block-video__placeholder),
.ne-block-video--surface-transparent:not([style*="aspect-ratio"]):has(.ne-block-video__placeholder) {
border: 0 !important;
}
.ne-block-video--surface-transparent:not([style*="aspect-ratio"]):has(.ne-block-video__placeholder) {
background: transparent;
}
.ne-block-video__media {
width: 100%;
height: auto;
display: block;
border: 0;
}
/* When an aspect-ratio is forced on the container, fill it. */
.ne-block-video[style*="aspect-ratio"] .ne-block-video__media,
.ne-block-video:has(iframe) .ne-block-video__media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
.ne-block-video__placeholder {
position: absolute;
inset: 0;
display: grid;
place-items: center;
opacity: 0.6;
color: var(--ne-scheme-text-muted, var(--ne-scheme-text, rgba(255,255,255,0.7)));
}
.ne-block-video__placeholder .placeholder-svg { max-width: 40%; height: auto; fill: currentColor; }
/* Effects coupled to global block-intensity (Theme-Settings ×0.6). */
.ne-block-video--shadow { box-shadow: 0 calc(12px * var(--ne-fx-shadow-i, 1)) calc(32px * var(--ne-fx-shadow-i, 1)) rgba(0,0,0,0.3); }
.ne-block-video--glow { box-shadow: 0 0 calc(36px * var(--ne-fx-glow-i, 1)) calc(6px * var(--ne-fx-glow-i, 1)) var(--ne-scheme-accent-glow, rgba(120,120,255,0.55)); }
.ne-block-video--shadow.ne-block-video--glow {
box-shadow:
0 calc(12px * var(--ne-fx-shadow-i, 1)) calc(32px * var(--ne-fx-shadow-i, 1)) rgba(0,0,0,0.3),
0 0 calc(36px * var(--ne-fx-glow-i, 1)) calc(6px * var(--ne-fx-glow-i, 1)) var(--ne-scheme-accent-glow, rgba(120,120,255,0.55));
}
/* END_BLOCK:video */
/* START_BLOCK:wishlist-grid (INDEX:139) */
.ne-wl-grid {
width: 100%;
background: transparent !important;
display: flex;
flex-direction: column;
gap: 16px;
}
.ne-wl-grid__count {
font-size: var(--ne-font-size-sm, 0.875rem);
color: var(--ne-scheme-text-muted, var(--ne-scheme-text));
opacity: 0.75;
}
.ne-wl-grid__count-label {
margin-left: 4px;
}
.ne-wl-grid__track {
display: grid;
grid-template-columns: repeat(var(--ne-wl-cols, 4), minmax(0, 1fr));
gap: var(--ne-wl-gap, 16px);
padding: var(--ne-space-2, 8px) var(--ne-space-2, 8px) var(--ne-space-4, 16px);
align-items: stretch;
}
@media (max-width: 989px) {
.ne-wl-grid__track { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 749px) {
.ne-wl-grid__track {
grid-template-columns: repeat(var(--ne-wl-cols-m, 2), 1fr);
}
}
.ne-wl-grid__empty {
display: none;
flex-direction: column;
align-items: center;
gap: 16px;
padding: 48px 16px;
text-align: center;
color: var(--ne-scheme-text);
}
.ne-wl-grid__empty p {
margin: 0;
font-size: 1.05rem;
color: var(--ne-scheme-text-muted, var(--ne-scheme-text));
opacity: 0.85;
}
/* Card — own namespace, mirrors .ne-rv-card visual treatment so
wishlist cards look like recently-viewed cards. */
.ne-wl-grid .ne-wl-card {
position: relative;
display: flex;
flex-direction: column;
gap: var(--ne-wl-title-price-gap, 8px);
padding: var(--ne-wl-pad, 0);
border-radius: var(--ne-wl-radius, 12px);
/* overflow:visible (was hidden) so the absolutely-positioned quick-add
cart button's shadow/glow isn't clipped at the card edge. The card
background still rounds itself (border-radius clips backgrounds), and
the image is clipped by .ne-wl-card__media's own overflow:clip — in
flush mode its top corners follow the card radius (rule below). */
overflow: visible;
isolation: isolate;
transform: translate3d(0, 0, 0);
backface-visibility: hidden;
height: 100%;
transition: transform var(--ne-transition-base, 0.2s ease), box-shadow var(--ne-transition-base, 0.2s ease);
}
.ne-wl-grid .ne-wl-card:hover {
transform: translate3d(0, -4px, 0);
}
.ne-wl-grid--surface-solid .ne-wl-card {
background: var(--ne-scheme-bg, transparent);
border: 1px solid var(--ne-scheme-border, rgba(127, 127, 127, 0.15));
}
.ne-wl-grid--surface-glass .ne-wl-card {
background: var(--ne-glass-bg, rgba(255, 255, 255, 0.05));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
border: 1px solid var(--ne-glass-border, rgba(255, 255, 255, 0.12));
will-change: backdrop-filter;
}
.ne-wl-grid--surface-glass.ne-wl-grid--glass-tint .ne-wl-card {
background: var(--ne-glass-bg-tinted, var(--ne-glass-bg, rgba(255, 255, 255, 0.05)));
border-color: var(--ne-glass-border-tinted, var(--ne-glass-border, rgba(255, 255, 255, 0.12)));
}
/* Effects coupled to global block-intensity (Theme-Settings ×0.6). */
.ne-wl-grid--shadow .ne-wl-card { box-shadow: var(--ne-block-shadow-effect, 0 8px 22px rgba(0, 0, 0, 0.22)); }
.ne-wl-grid--glow .ne-wl-card { box-shadow: var(--ne-block-glow-effect, 0 0 22px var(--ne-scheme-accent-glow, rgba(99, 102, 241, 0.35))); }
.ne-wl-grid--shadow.ne-wl-grid--glow .ne-wl-card {
box-shadow:
var(--ne-block-shadow-effect, 0 8px 22px rgba(0, 0, 0, 0.22)),
var(--ne-block-glow-effect, 0 0 22px var(--ne-scheme-accent-glow, rgba(99, 102, 241, 0.35)));
}
.ne-wl-grid .ne-wl-card__media {
position: relative;
width: 100%;
border-radius: var(--ne-wl-img-radius, 0);
overflow: clip;
}
/* Flush mode (card_padding == 0): the card no longer clips (overflow:
visible), so the media must round its own TOP corners to the card
radius — otherwise a square image corner pokes past the rounded card.
max() keeps any explicit image_radius if it's larger. Bottom corners
stay flush against the body row. */
.ne-wl-grid--flush .ne-wl-card__media {
border-top-left-radius: max(var(--ne-wl-img-radius, 0px), var(--ne-wl-radius, 12px));
border-top-right-radius: max(var(--ne-wl-img-radius, 0px), var(--ne-wl-radius, 12px));
}
.ne-wl-grid--ratio-square .ne-wl-card__media { aspect-ratio: 1 / 1; }
.ne-wl-grid--ratio-portrait .ne-wl-card__media { aspect-ratio: 3 / 4; }
.ne-wl-grid--ratio-landscape .ne-wl-card__media { aspect-ratio: 4 / 3; }
.ne-wl-grid--ratio-natural .ne-wl-card__media { aspect-ratio: auto; min-height: 200px; }
.ne-wl-grid .ne-wl-card__media img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 50%;
display: block;
}
.ne-wl-grid .ne-wl-card__link {
color: inherit;
text-decoration: none;
display: contents;
}
.ne-wl-grid .ne-wl-card__vendor {
display: block;
/* Vendor→title gap follows the row-gap slider so all card rows
share rhythm (matches .ne-product-card behaviour). */
margin: 0 0 var(--ne-wl-title-price-gap, 2px);
padding: 0 var(--ne-space-3, 12px);
font-size: var(--ne-font-size-xs, 0.75rem);
text-transform: uppercase;
letter-spacing: 0.05em;
opacity: 0.7;
color: var(--ne-scheme-text);
}
.ne-wl-grid .ne-wl-card__title {
margin: 0;
padding: var(--ne-space-3, 12px) var(--ne-space-3, 12px) 0;
font-family: var(--ne-wl-title-font, inherit);
font-size: var(--ne-font-size-sm, 0.875rem);
font-weight: 500;
line-height: 1.3;
color: var(--ne-scheme-text);
display: -webkit-box;
-webkit-line-clamp: var(--ne-wl-title-lines, 2);
-webkit-box-orient: vertical;
overflow: hidden;
transition: color 0.18s ease, opacity 0.18s ease;
}
.ne-wl-grid--title-bold .ne-wl-card__title { font-weight: 700; }
.ne-wl-grid--title-italic .ne-wl-card__title { font-style: italic; }
.ne-wl-grid--title-no-clamp .ne-wl-card__title {
-webkit-line-clamp: unset;
display: block;
overflow: visible;
}
.ne-wl-grid .ne-wl-card:hover .ne-wl-card__title { opacity: 0.75; }
.ne-wl-grid .ne-wl-card__price {
margin-top: auto;
/* Top padding = row gap above (title→price); bottom is 0 so the
inter-row gap to the remove button comes from the merchant's
row-gap slider alone (matches .ne-product-card pattern). */
padding: var(--ne-wl-title-price-gap, 8px) var(--ne-space-3, 12px) 0;
font-size: var(--ne-font-size-sm, 0.875rem);
font-weight: 500;
color: var(--ne-scheme-text);
}
.ne-wl-grid .ne-wl-card__remove {
align-self: flex-start;
/* Top margin = row gap above (price→remove). Bottom margin keeps
the card's edge spacing. */
margin: var(--ne-wl-title-price-gap, 8px) var(--ne-space-3, 12px) var(--ne-space-3, 12px);
padding: 4px 0;
background: transparent;
border: none;
color: var(--ne-scheme-text-muted, var(--ne-scheme-text));
font-size: var(--ne-font-size-xs, 0.75rem);
text-decoration: underline;
text-underline-offset: 3px;
cursor: pointer;
opacity: 0.7;
transition: color 0.18s ease, opacity 0.18s ease;
}
.ne-wl-grid .ne-wl-card__remove:hover {
color: var(--ne-color-sale, #ef4444);
opacity: 1;
}
/* Quick-add cart button — circular icon button anchored bottom-right
of the card. Sits above all card content via z-index 3. */
.ne-wl-grid .ne-wl-card__add-cart {
position: absolute;
bottom: 8px;
right: 8px;
width: 36px;
height: 36px;
border-radius: 50% !important;
background: var(--ne-scheme-accent, #6366f1);
color: var(--ne-scheme-btn-text, #fff);
display: grid;
place-items: center;
border: none;
cursor: pointer;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
transition: transform 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
z-index: 3;
padding: 0;
}
.ne-wl-grid .ne-wl-card__add-cart:hover {
transform: scale(1.08);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.32),
0 0 16px var(--ne-scheme-accent-glow, rgba(99, 102, 241, 0.5));
}
.ne-wl-grid .ne-wl-card__add-cart svg {
width: 18px;
height: 18px;
}
.ne-wl-grid .ne-wl-card__add-cart[data-state="loading"] {
pointer-events: none;
opacity: 0.7;
}
.ne-wl-grid .ne-wl-card__add-cart[data-state="success"] {
background: var(--ne-color-success, #16a34a);
}
/* Variant popup — fixed overlay; card-styled inner panel. */
.ne-wl-popup {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
}
.ne-wl-popup[hidden] { display: none; }
.ne-wl-popup__backdrop {
/* Visually identical to the cart drawer's overlay: same fixed-cover,
same alpha + blur (read from :root via cart-drawer settings), and
the same fade-in transition tied to a .ne-wl-popup--open class. */
position: fixed;
inset: 0;
background: rgba(0, 0, 0, var(--ne-drawer-overlay-alpha, 0.5));
backdrop-filter: blur(var(--ne-drawer-overlay-blur, 4px));
-webkit-backdrop-filter: blur(var(--ne-drawer-overlay-blur, 4px));
opacity: 0;
transition: opacity var(--ne-transition-base, 0.3s);
}
.ne-wl-popup--open .ne-wl-popup__backdrop { opacity: 1; }
/* Match the drawer's panel slide-in feel — popup card fades + scales. */
.ne-wl-popup__card {
opacity: 0;
transform: translateY(8px);
transition: opacity var(--ne-transition-base, 0.3s), transform var(--ne-transition-base, 0.3s);
}
.ne-wl-popup--open .ne-wl-popup__card { opacity: 1; transform: none; }
.ne-wl-popup__card {
position: relative;
z-index: 1;
width: min(420px, calc(100% - 32px));
max-height: calc(100vh - 64px);
overflow-y: auto;
border-radius: var(--ne-wl-radius, 12px);
/* Card padding cascades 1:1 from .ne-wl-grid wrapper so the popup
mirrors the card spacing exactly (image edge-to-edge when
card_padding=0, framed when card_padding>0). Inner content
(title/price/options/button) gets its own breathing room via
per-element padding below. */
padding: var(--ne-wl-pad, 0px);
color: var(--ne-scheme-text);
display: flex;
flex-direction: column;
gap: 12px;
}
/* When the card runs with padding 0, give title/price/options/button
their own inset so they don't touch the popup edges — the image
stays edge-to-edge as on the card. */
.ne-wl-popup__title,
.ne-wl-popup__price,
.ne-wl-popup__options,
.ne-wl-popup__submit,
.ne-wl-popup__error {
margin-left: max(0px, calc(20px - var(--ne-wl-pad, 0px)));
margin-right: max(0px, calc(20px - var(--ne-wl-pad, 0px)));
}
.ne-wl-popup__title {
margin-top: max(12px, calc(20px - var(--ne-wl-pad, 0px)));
}
/* Bottom breathing room — last visible element gets the same inset
as the sides so the submit/error button doesn't kiss the card edge
when card_padding = 0. */
.ne-wl-popup__submit,
.ne-wl-popup__error:last-child {
margin-bottom: max(0px, calc(20px - var(--ne-wl-pad, 0px)));
}
/* Mirror the card shadow / glow on the popup panel so it inherits
the same chrome as the wishlist cards. */
.ne-wl-popup.ne-wl-grid--shadow .ne-wl-popup__card {
box-shadow: var(--ne-block-shadow-effect, 0 8px 22px rgba(0, 0, 0, 0.22));
}
.ne-wl-popup.ne-wl-grid--glow .ne-wl-popup__card {
box-shadow: var(--ne-block-glow-effect, 0 0 22px var(--ne-scheme-accent-glow, rgba(99, 102, 241, 0.35)));
}
.ne-wl-popup.ne-wl-grid--shadow.ne-wl-grid--glow .ne-wl-popup__card {
box-shadow:
var(--ne-block-shadow-effect, 0 8px 22px rgba(0, 0, 0, 0.22)),
var(--ne-block-glow-effect, 0 0 22px var(--ne-scheme-accent-glow, rgba(99, 102, 241, 0.35)));
}
/* Inherit surface treatment from the grid's surface class on the
popup wrapper. Mirrors .ne-wl-card exactly — same paint, same
border treatment, same overflow clip so the media bleeds into
the radius corners. */
.ne-wl-popup__card {
overflow: clip;
}
.ne-wl-popup.ne-wl-grid--surface-solid .ne-wl-popup__card {
background: var(--ne-scheme-bg);
border: 1px solid var(--ne-scheme-border, rgba(127, 127, 127, 0.15));
}
.ne-wl-popup.ne-wl-grid--surface-glass .ne-wl-popup__card {
background: var(--ne-glass-bg, rgba(127, 127, 127, 0.08));
backdrop-filter: blur(var(--ne-glass-blur, 14px)) saturate(var(--ne-glass-saturate, 1.4));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 14px)) saturate(var(--ne-glass-saturate, 1.4));
border: 0 solid var(--ne-glass-border, rgba(255, 255, 255, 0));
}
.ne-wl-popup.ne-wl-grid--surface-glass.ne-wl-grid--glass-tint .ne-wl-popup__card {
background: var(--ne-glass-bg-tinted, var(--ne-glass-bg, rgba(127, 127, 127, 0.08)));
}
.ne-wl-popup.ne-wl-grid--surface-transparent .ne-wl-popup__card {
/* Truly transparent — content reads against the dark backdrop
blur. Matches the card optic of transparent-surface cards. */
background: transparent;
border: none;
}
.ne-wl-popup__close {
position: absolute;
top: 8px;
right: 8px;
width: 32px;
height: 32px;
border-radius: 50% !important;
border: none;
background: transparent;
color: var(--ne-scheme-text);
cursor: pointer;
display: grid;
place-items: center;
opacity: 0.7;
transition: opacity 0.18s ease, background 0.18s ease;
padding: 0;
}
.ne-wl-popup__close:hover {
opacity: 1;
background: var(--ne-scheme-border, rgba(127, 127, 127, 0.15));
}
.ne-wl-popup__media {
/* Mirror .ne-wl-card__media: own image-radius applied on all four
corners, sits inside the popup padding (so card_padding spaces
it from the card edge just like on a card), no media-fill. */
width: 100%;
aspect-ratio: 1 / 1;
border-radius: var(--ne-wl-img-radius, 0);
overflow: clip;
background: transparent;
}
.ne-wl-popup__media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.ne-wl-popup__title {
/* Use individual margins so the inset rules (margin-left/right
further up) keep working — `margin: 0` shorthand would reset
them and pin the title flush to the card edge. */
margin-top: 0;
margin-bottom: 0;
font-size: 1rem;
font-weight: 500;
/* Title typography mirrors .ne-wl-card__title — inherits font, bold,
italic from the grid's title settings via cascading vars/classes. */
font-family: var(--ne-wl-title-font, inherit);
color: var(--ne-scheme-text);
}
.ne-wl-grid--title-bold .ne-wl-popup__title { font-weight: 700; }
.ne-wl-grid--title-italic .ne-wl-popup__title { font-style: italic; }
.ne-wl-popup__price {
font-size: 0.95rem;
font-weight: 600;
color: var(--ne-scheme-text);
/* Match card's title→price spacing. */
margin-top: calc(var(--ne-wl-title-price-gap, 8px) - 12px);
}
.ne-wl-popup__options {
display: flex;
flex-direction: column;
gap: 10px;
}
.ne-wl-popup__option-label {
display: block;
font-size: 0.8rem;
font-weight: 500;
margin-bottom: 6px;
color: var(--ne-scheme-text);
}
.ne-wl-popup__option-values {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.ne-wl-popup__option-value {
padding: 6px 12px;
border: 1px solid var(--ne-scheme-border, rgba(127, 127, 127, 0.25));
border-radius: 6px;
background: transparent;
color: var(--ne-scheme-text);
cursor: pointer;
font-size: 0.85rem;
transition: border-color 0.15s ease, background 0.15s ease;
}
.ne-wl-popup__option-value:hover {
border-color: var(--ne-scheme-accent);
}
.ne-wl-popup__option-value[aria-pressed="true"] {
background: var(--ne-scheme-accent);
color: var(--ne-scheme-btn-text, #fff);
border-color: var(--ne-scheme-accent);
}
.ne-wl-popup__option-value[disabled] {
opacity: 0.4;
cursor: not-allowed;
text-decoration: line-through;
}
.ne-wl-popup__submit {
/* Flex-column children stretch by default — explicit width:100%
combined with margin-left/right inset would overflow the card,
so let auto-stretch handle width and use individual margins. */
margin-top: 4px;
}
.ne-wl-popup__error {
/* Individual margins so the inset margin-left/right rules above
still apply (margin shorthand would reset them). */
margin-top: 0;
margin-bottom: 0;
color: var(--ne-color-sale, #ef4444);
font-size: 0.85rem;
text-align: center;
}
/* END_BLOCK:wishlist-grid */
/* CSS from snippet stylesheet tags */
/* START_SNIPPET:arc-text (INDEX:143) */
.ne-arctext { position: relative; display: block; margin-inline: auto; }
.ne-arctext__ch {
position: absolute;
top: 0;
left: 50%;
transform-origin: 50% 50%;
white-space: pre;
will-change: transform;
}
.ne-arctext--fade .ne-arctext__ch { opacity: 0; transition: opacity 0.45s ease; }
.ne-arctext--fade.ne-arctext--in .ne-arctext__ch { opacity: 1; }
/* END_SNIPPET:arc-text */
/* START_SNIPPET:back-to-top (INDEX:144) */
.ne-back-to-top {
position: fixed;
z-index: 45;
width: 46px;
height: 46px;
display: grid;
place-items: center;
border-radius: 50%;
cursor: pointer;
opacity: 0;
transform: translateY(12px);
pointer-events: none;
transition: opacity 0.25s ease, transform 0.25s ease, background 0.2s ease, bottom 0.32s cubic-bezier(0.22, 1, 0.36, 1);
}
.ne-back-to-top.is-visible {
opacity: 1;
transform: translateY(0);
pointer-events: auto;
}
.ne-back-to-top:hover { transform: translateY(-2px); }
.ne-back-to-top:focus-visible {
outline: 2px solid var(--ne-scheme-accent, #6366f1);
outline-offset: 3px;
}
/* Position — horizontal (centre uses the `translate` property so it composes
with the transform-based show/hide animation, Rule 232) */
.ne-back-to-top--h-left { left: var(--ne-btt-x, 24px); right: auto; }
.ne-back-to-top--h-right { right: var(--ne-btt-x, 24px); left: auto; }
.ne-back-to-top--h-center { left: 50%; right: auto; translate: -50% 0; }
/* Position — vertical */
.ne-back-to-top--v-top { top: var(--ne-btt-y, 24px); bottom: auto; }
.ne-back-to-top--v-bottom { bottom: var(--ne-btt-y, 24px); top: auto; }
/* When the sticky product bar is visible, a bottom-anchored button lifts to
clear it — but only if its own offset doesn't already sit above the bar
(max() keeps a generously-padded button where it is). Synced to the bar's
slide timing via the `bottom` transition above. */
html[data-sticky-bar-visible] .ne-back-to-top--v-bottom {
bottom: max(var(--ne-btt-y, 24px), calc(var(--ne-sticky-bar-h, 0px) + 12px));
}
/* Surface — solid */
.ne-back-to-top--solid {
background: var(--ne-scheme-btn-bg, var(--ne-scheme-accent, #6366f1));
color: var(--ne-scheme-btn-text, #fff);
border: 1px solid var(--ne-scheme-border, rgba(255, 255, 255, 0.14));
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
}
/* Surface — glass (border:0 → no bottom hairline, Rule LG3) */
.ne-back-to-top--glass {
background-color: var(--ne-glass-bg, rgba(255, 255, 255, 0.08));
backdrop-filter: blur(var(--ne-glass-blur, 18px)) saturate(var(--ne-glass-saturate, 140%));
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 18px)) saturate(var(--ne-glass-saturate, 140%));
color: var(--ne-scheme-text, #fff);
border: 0;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30);
}
/* Glass-buttons toggle → the round button gets the BUTTON-glass optic
(full-height gradient + inset bevel, same recipe as .ne-btn in
critical.css) instead of the flat 5px card shine-bar — the straight
bar read as a dirty chip on the circle (user QA 2026-07-23; the
global shine rule excludes .ne-back-to-top for the same reason).
Drop shadow is kept in the composed box-shadow list. */
body[data-ne-glass-buttons="1"] .ne-back-to-top--glass {
background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.02) 100%);
background-blend-mode: overlay;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.35),
inset 0 -1px 0 rgba(0, 0, 0, 0.12),
0 8px 24px rgba(0, 0, 0, 0.30);
}
/* Surface — transparent (icon only, drop-shadow keeps it legible on any bg) */
.ne-back-to-top--transparent {
background: transparent;
border: 0;
color: var(--ne-scheme-text, #fff);
box-shadow: none;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 4px rgba(0, 0, 0, 0.35));
}
@media (prefers-reduced-motion: reduce) {
.ne-back-to-top { transition: opacity 0.2s ease; transform: none; }
.ne-back-to-top.is-visible { transform: none; }
.ne-back-to-top:hover { transform: none; }
}
/* END_SNIPPET:back-to-top */
/* START_SNIPPET:coverflow (INDEX:154) */
.ne-cf {
position: relative;
width: 100%;
height: var(--ne-cf-h, 460px);
/* The cards are clipped/faded by .ne-cf__viewport (a non-transformed inset:0
layer), NOT by .ne-cf itself — so the chevron arrows (direct children of
.ne-cf, siblings of the viewport) stay outside the clip + fade mask, and
the fan's upward card-arc can bleed vertically past the block top/bottom. */
overflow: visible;
/* The root carries the consumer's color-{scheme} class only so the cards
inherit the scheme CSS vars via cascade — it must NOT paint that scheme's
background itself (.color-scheme-X paints background-color, Rule 173).
Same as product-grid's `.ne-pg { background: transparent !important }`. */
background: transparent !important;
/* No `perspective`/`isolation` here — both form a backdrop-root that kills
the glass cards' backdrop-filter (Rule 49). Perspective is applied
per-card inside the transform() instead, so the card itself carries it. */
--ne-cf-origin: 50%;
}
/* Viewport: a non-transformed inset:0 layer that clips the cards horizontally
(overflow-x:clip = block/section edges) while letting the fan's vertical arc
bleed (overflow-y:visible). The fade mask + clip live here, NOT on .ne-cf, so
the chevrons stay above the fade. Drum extends its ring sideways → no clip. */
.ne-cf__viewport {
position: absolute;
inset: 0;
overflow: visible; /* spill (default) — cards bleed past the edge */
border-radius: inherit;
}
/* Clip mode (coverflow_overflow = clip): the SECTION clips at its own edge
(critical.css drops the spill-guard for .ne-cf--clip), so cards reach the
section edge then stop — not the narrower block edge. The viewport stays
overflow:visible. Only the optional fade needs the viewport to clip+mask. */
.ne-cf--clip.ne-cf--fade .ne-cf__viewport { overflow: hidden; }
/* Optional edge fade-out (clip + coverflow_edge_fade > 0). A horizontal mask
softens the cut instead of a hard line. Mask = a backdrop-root, so it
suppresses glass-card backdrop-filter (Rule 49/356); fade is therefore a
solid/transparent-card treatment. Drum (auto-fit + recentred) is excluded. */
.ne-cf--clip.ne-cf--style-stack.ne-cf--fade .ne-cf__viewport,
.ne-cf--clip.ne-cf--style-fan.ne-cf--fade .ne-cf__viewport {
-webkit-mask-image: linear-gradient(to right, transparent 0, #000 var(--ne-cf-fade, 0px), #000 calc(100% - var(--ne-cf-fade, 0px)), transparent 100%);
mask-image: linear-gradient(to right, transparent 0, #000 var(--ne-cf-fade, 0px), #000 calc(100% - var(--ne-cf-fade, 0px)), transparent 100%);
}
.ne-cf--align-left { --ne-cf-origin: calc(var(--ne-cf-card-w, 340px) * 0.5 + 28px); }
.ne-cf--align-right { --ne-cf-origin: calc(100% - var(--ne-cf-card-w, 340px) * 0.5 - 28px); }
/* Stage wraps the cards (not the arrows). Every coverflow optic shifts +
scales the whole composition so it always fits the coverflow width and
stays centred — no outer card clips at the block edge. */
.ne-cf__stage { position: absolute; inset: 0; }
.ne-cf .ne-cf__stage {
transform: translateX(var(--ne-cf-drum-shift, 0px)) scale(var(--ne-cf-drum-fit, 1));
transform-origin: 50% 50%;
transition: transform .55s cubic-bezier(.22, 1, .36, 1);
}
.ne-cf--no-trans .ne-cf__stage,
.ne-cf--no-trans .ne-cf__card { transition: none !important; }
/* Paging gestures. */
.ne-cf--nav-drag { cursor: grab; touch-action: pan-y; }
.ne-cf--nav-drag.ne-cf--grabbing { cursor: grabbing; }
.ne-cf__card {
position: absolute;
top: 50%;
left: var(--ne-cf-origin, 50%);
width: min(var(--ne-cf-card-w, 320px), 82%);
border-radius: var(--ne-cf-card-radius, 12px);
transform-origin: 50% 50%;
--d: 0;
--ad: 0;
transform:
perspective(3000px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--d) * var(--ne-cf-step, 23%)))
rotateY(calc(var(--d) * -5deg))
translateZ(0px)
scale(calc(1 - var(--ad) * 0.035));
z-index: calc(100 - var(--ad) * 5);
opacity: 1;
transition: transform .55s cubic-bezier(.22,1,.36,1), opacity .55s ease, box-shadow .35s ease;
pointer-events: auto;
cursor: pointer;
will-change: transform;
box-shadow: var(--ne-cf-shadow-inset, 0 0 0 transparent), var(--ne-cf-shadow-outer, 0 0 0 transparent);
}
.ne-cf__card[data-active] { cursor: default; }
/* Equalise card heights across the coverflow — force them all to the tallest
(--ne-cf-h, measured by JS) so the silhouettes line up. Generic: any inner. */
.ne-cf__card,
.ne-cf__card > * { min-height: var(--ne-cf-h); }
/* ── Optics ── base .ne-cf__card transform is "stack"; fan + drum override
only `transform`, reading the same JS-set --d / --ad, so the JS stays
optic-agnostic. */
.ne-cf--style-fan {
height: calc(var(--ne-cf-h, 460px) + 150px);
overflow: visible;
}
.ne-cf--style-fan .ne-cf__card {
transform:
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--gd, var(--d)) * 54%))
translateY(calc(var(--cad, var(--ad)) * var(--cad, var(--ad)) * -12px))
rotate(calc(var(--cd, var(--d)) * 9deg))
scale(calc(1 - var(--ad) * 0.04));
opacity: max(0.88, calc(1 - var(--ad) * 0.045));
}
/* Solid surface = genuinely opaque cards, so don't dim the back ones. */
.ne-cf--style-fan .ne-cf__card--surface-solid:not([data-hidden]) { opacity: 1; }
/* Drum — slide magazine: focus card stands alone on one side; the rest pile on
a turned ring on the other side, face-on → edge-on → reversed backs → fade. */
.ne-cf--style-drum {
height: calc(var(--ne-cf-h, 460px) * 1.28 * var(--ne-cf-drum-fit, 1) + 30px);
overflow: visible;
--ne-cf-origin: 49%;
}
.ne-cf--style-drum.ne-cf--align-right { --ne-cf-origin: 51%; }
.ne-cf--style-drum .ne-cf__card {
transform-origin: 50% 50%;
transform:
perspective(2600px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--ne-cf-drum-dir, 1) * var(--di, var(--ad)) * 13%))
rotateY(calc(var(--ne-cf-drum-dir, 1) * var(--di, var(--ad)) * 15deg))
scale(1.12);
z-index: calc(90 - abs(var(--di, var(--ad)) - 5.6) * 2);
opacity: 1;
}
.ne-cf--style-drum .ne-cf__card[data-active] {
transform-origin: 50% 50%;
transform:
perspective(2600px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--ne-cf-drum-dir, 1) * -130%))
rotateY(0deg)
scale(1.26);
opacity: 1;
z-index: 300;
}
/* Hover-lift on the CF-CARD (via --ne-cf-lift inside every optic's transform)
so the box-shadow lifts WITH the card. The inner card never lifts. */
.ne-cf .ne-cf__card > *:hover { transform: none !important; }
.ne-cf .ne-cf__card:hover { --ne-cf-lift: -12px; }
.ne-cf--style-drum .ne-cf__card:not([data-active]):hover { --ne-cf-lift: 0px; }
.ne-cf--style-drum .ne-cf__card[data-active]:hover {
--ne-cf-lift: -16px;
--ne-cf-shadow-outer: 0 24px 48px rgba(0, 0, 0, 0.42);
}
/* Product-card-specific hover suppressions in the drum (no-op for other cards). */
.ne-cf--style-drum .ne-cf__card:not([data-active]) .ne-product-card--has-secondary:hover .ne-product-card__image--primary { opacity: 1 !important; }
.ne-cf--style-drum .ne-cf__card:not([data-active]) .ne-product-card--has-secondary:hover .ne-product-card__image--secondary { opacity: 0 !important; }
.ne-cf--style-drum .ne-cf__card:not([data-active]) .ne-product-card--hover-zoom:hover .ne-product-card__image--primary { transform: none !important; }
.ne-cf--style-drum .ne-cf__card:not([data-active]) .ne-product-card__quick-view { display: none !important; }
/* Render the reversed face so the back of the card is visible in the drum. */
.ne-cf--style-drum .ne-cf__card > * { backface-visibility: visible; }
/* Clip the blur + back panel to the card edge on side/back cards only — the
focus card stays overflow:visible so its hover-lift isn't clipped. */
.ne-cf--style-drum .ne-cf__card:not([data-active]) { overflow: hidden; }
/* Glass backs frost their content; solid backs are a plain panel (below). */
.ne-cf--style-drum .ne-cf__card--surface-glass > * {
filter: blur(calc(min(1, max(0, (var(--di, var(--ad)) - 5.6) * 100)) * 5px));
}
/* Back-face treatment — overlay that fades in only on the reversed cards. */
.ne-cf--style-drum .ne-cf__card::before {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
z-index: 7;
pointer-events: none;
background: transparent;
opacity: calc(min(1, max(0, (var(--di, var(--ad)) - 5.6) * 100)));
}
.ne-cf--style-drum .ne-cf__card--surface-glass.ne-cf__card--tint::before {
background: var(--ne-glass-bg-tinted, rgba(99, 102, 241, 0.18));
}
.ne-cf--style-drum .ne-cf__card--surface-solid::before {
background:
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
var(--ne-cf-cbg);
}
/* SOLID surface in a coverflow: stack the card colour so it's genuinely opaque
(a scheme "Card background" with alpha would read see-through when cards
overlap / the drum flips them). */
.ne-cf .ne-cf__card--surface-solid {
--ne-cf-cbg: var(--ne-scheme-card-bg, var(--ne-scheme-bg, var(--ne-scheme-bg-surface, #1a1a28)));
}
.ne-cf .ne-cf__card--surface-solid .ne-product-card::before {
background:
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
linear-gradient(var(--ne-cf-cbg), var(--ne-cf-cbg)),
var(--ne-cf-cbg);
}
/* Card chrome modifiers — all plug into --ne-cf-shadow-outer. */
.ne-cf__card--shadow { --ne-cf-shadow-outer: 0 8px 22px rgba(0, 0, 0, 0.28); }
.ne-cf__card--shadow:hover { --ne-cf-shadow-outer: 0 14px 32px rgba(0, 0, 0, 0.38); }
.ne-cf__card--glow:hover { --ne-cf-shadow-outer: 0 0 32px var(--ne-scheme-accent-glow, rgba(127, 127, 127, 0.45)); }
.ne-cf__card--shadow.ne-cf__card--glow:hover {
--ne-cf-shadow-outer: 0 0 30px var(--ne-scheme-accent-glow, rgba(127, 127, 127, 0.4)), 0 12px 28px rgba(0, 0, 0, 0.32);
}
.ne-cf__card[data-hidden] { opacity: 0; pointer-events: none; }
/* Coverflow glass — PROGRESSIVE ENHANCEMENT (real backdrop-filter on
Chromium/WebKit; mock-glass frosted gradient on Firefox via html.ne-ff). */
.ne-cf__card--glass {
background: var(--ne-glass-bg, rgba(255, 255, 255, 0.06)) !important;
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
backdrop-filter: blur(var(--ne-glass-blur, 16px)) saturate(var(--ne-glass-saturate, 1.4));
border-radius: var(--ne-cf-card-radius, 12px);
overflow: hidden;
--ne-cf-shadow-inset: inset 0 1px 0 rgba(255, 255, 255, 0.18), inset 0 0 0 1px rgba(255, 255, 255, 0.06);
will-change: transform, backdrop-filter;
}
.ne-cf__card--glass.ne-cf__card--tint {
background-color: var(--ne-glass-bg, rgba(255, 255, 255, 0.06)) !important;
background-image: linear-gradient(
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5)),
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5))) !important;
}
html.ne-ff .ne-cf__card--glass.ne-cf__card--tint {
background-color: var(--ne-glass-bg, rgba(255, 255, 255, 0.10)) !important;
background-image:
linear-gradient(135deg, rgba(255, 255, 255, 0.12) 0%, rgba(255, 255, 255, 0.02) 55%, rgba(255, 255, 255, 0.07) 100%),
linear-gradient(
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5)),
var(--ne-glass-bg-tinted, rgba(89, 140, 140, 0.5))) !important;
}
html.ne-ff .ne-cf__card--glass {
-webkit-backdrop-filter: none;
backdrop-filter: none;
background:
linear-gradient(135deg, rgba(255, 255, 255, 0.18) 0%, rgba(255, 255, 255, 0.05) 38%, rgba(255, 255, 255, 0.02) 62%, rgba(255, 255, 255, 0.12) 100%),
var(--ne-glass-bg, rgba(255, 255, 255, 0.07)) !important;
--ne-cf-shadow-inset:
inset 0 1px 0 rgba(255, 255, 255, 0.24),
inset 0 -1px 0 rgba(0, 0, 0, 0.06),
inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
/* Glass shine — top light-line over the card (Rule 371/LG1). */
body[data-ne-glass-shine="1"] .ne-cf__card--glass::after {
content: "";
position: absolute;
inset: 0;
z-index: 6;
pointer-events: none;
border-radius: inherit;
background: var(--ne-glass-shine-bg);
}
/* Chevrons — self-contained (button-style circle), sit ON the sides. */
.ne-cf__arrow {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
padding: 0;
color: var(--ne-scheme-text, currentColor);
background: var(--ne-scheme-bg, #fff);
border: 1px solid var(--ne-scheme-border, rgba(127, 127, 127, 0.25));
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
border-radius: 50%;
cursor: pointer;
transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.ne-cf .ne-cf__arrow {
position: absolute;
top: 50%;
bottom: auto;
transform: translateY(-50%);
z-index: 300;
}
.ne-cf .ne-cf__arrow:hover { transform: translateY(-50%) scale(1.05); }
.ne-cf .ne-cf__arrow--prev { left: 8px; right: auto; }
.ne-cf .ne-cf__arrow--next { right: 8px; left: auto; }
.ne-cf__arrow svg { width: 18px; height: 18px; }
/* ── Mobile coverflow ── */
@media (max-width: 749px) {
.ne-cf--style-stack .ne-cf__card,
.ne-cf--style-fan .ne-cf__card,
.ne-cf--style-drum .ne-cf__card {
width: min(var(--ne-cf-card-w, 320px), 94%);
}
.ne-cf--style-stack { overflow: visible; }
.ne-cf--style-stack .ne-cf__card {
transform:
perspective(2600px)
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--d) * 30%))
rotateY(calc(var(--d) * -10deg))
translateZ(calc(var(--ad) * -120px))
scale(calc(1 - var(--ad) * 0.12));
}
.ne-cf--style-fan { overflow: visible; }
.ne-cf--style-fan .ne-cf__card {
transform:
translate(-50%, -50%)
translateY(var(--ne-cf-lift, 0px))
translateX(calc(var(--gd, var(--d)) * 30%))
translateY(calc(var(--cad, var(--ad)) * var(--cad, var(--ad)) * -16px))
rotate(calc(var(--cd, var(--d)) * 11deg))
scale(calc(1 - var(--ad) * 0.06));
}
.ne-cf--style-drum {
height: calc(var(--ne-cf-h, 460px) * 1.7 * var(--ne-cf-drum-fit, 1) + 40px);
overflow: visible;
--ne-cf-origin: 50%;
--ne-cf-ring-shift: 0px;
}
.ne-cf--style-drum.ne-cf--align-right { --ne-cf-origin: 50%; }
.ne-cf--style-drum .ne-cf__card {
transform:
perspective(2400px)
translate(-50%, -50%)
translateY(calc(var(--ne-cf-h, 460px) * 0.48))
translateX(calc(var(--di, var(--ad)) * 13% + var(--ne-cf-ring-shift, 0px)))
rotateY(calc(var(--di, var(--ad)) * -18deg))
scale(0.66);
z-index: calc(90 - var(--di, var(--ad)) * 2);
}
.ne-cf--style-drum .ne-cf__card[data-active] {
transform:
perspective(2400px)
translate(-50%, -50%)
translateY(calc(var(--ne-cf-h, 460px) * -0.39 + var(--ne-cf-lift, 0px)))
rotateY(0deg)
scale(1);
}
.ne-cf--style-drum .ne-cf__card,
.ne-cf--style-drum .ne-cf__card > * { min-height: 0; }
}
@media (prefers-reduced-motion: reduce) {
.ne-cf__card { transition: opacity .2s ease; }
}
/* END_SNIPPET:coverflow */
/* START_SNIPPET:header-styles-2 (INDEX:159) */
.ne-header--left .ne-header__nav-item--flip-v > .ne-header__dropdown,
.ne-header--left .ne-header__nav-item--flip-v > .ne-header__megamenu,
.ne-header--right .ne-header__nav-item--flip-v > .ne-header__dropdown,
.ne-header--right .ne-header__nav-item--flip-v > .ne-header__megamenu {
top: auto;
bottom: 0;
transform: none;
}
.ne-header--right .ne-header__dropdown::before,
.ne-header--right .ne-header__megamenu::before {
top: 0;
bottom: 0;
left: 100%;
right: auto;
height: auto;
width: calc(var(--ne-space-2, 8px) + var(--ne-header-dropdown-gap, 10px) + 4px);
}
.ne-header--right.ne-header--dropdown-slide .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-slide .ne-header__megamenu {
transform: translateX(18px) translateY(-50%);
}
.ne-header--right.ne-header--dropdown-slide .ne-header__nav-item:hover > .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-slide .ne-header__nav-item:focus-within > .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-slide .ne-header__nav-item.is-open > .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-slide .ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header--right.ne-header--dropdown-slide .ne-header__nav-item:focus-within > .ne-header__megamenu,
.ne-header--right.ne-header--dropdown-slide .ne-header__nav-item.is-open > .ne-header__megamenu {
transform: translateX(0) translateY(-50%);
}
/* Sidebar-right + scale: preserve translateY(-50%); scale from right edge */
.ne-header--right.ne-header--dropdown-scale .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-scale .ne-header__megamenu {
transform: translateY(-50%) scale(0.85);
transform-origin: right center;
}
.ne-header--right.ne-header--dropdown-scale .ne-header__nav-item:hover > .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-scale .ne-header__nav-item:focus-within > .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-scale .ne-header__nav-item.is-open > .ne-header__dropdown,
.ne-header--right.ne-header--dropdown-scale .ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header--right.ne-header--dropdown-scale .ne-header__nav-item:focus-within > .ne-header__megamenu,
.ne-header--right.ne-header--dropdown-scale .ne-header__nav-item.is-open > .ne-header__megamenu {
transform: translateY(-50%) scale(1);
}
/* When header has glow effect, dropdown mirrors it subtly.
No --ne-shadow-lg here — mixing shadow into the glow rule produced a
visible dark shadow that made "glow" look like "shadow+glow". Glow should
be pure accent-colored bloom. */
.ne-header--glow .ne-header__dropdown {
box-shadow: 0 0 calc(20px * var(--ne-header-glow-intensity, 0.5)) var(--ne-scheme-accent-glow, rgba(99,102,241,0.25));
}
/* Header shadow effect also mirrors to dropdown + megamenu so the visual
language stays consistent across header and its flyouts. */
.ne-header--shadow .ne-header__dropdown,
.ne-header--shadow .ne-header__megamenu {
box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4), 0 1px 4px rgba(0, 0, 0, 0.2);
}
/* ── MERGE: header-effect glow/shadow must NOT cross the seam ─────────────
The DIRECTIONAL merged-PANEL glow/shadow (per position, off-seam) lives in
menu-styles.liquid (~1291-1346) — the top-header open glow there was the one
symmetric leftover that bloomed up over the bar; fixed in that file. Here we
only redirect the header BAR's OWN effect (below), which menu-styles doesn't
touch. The panel-facing halo the merchant saw (img #40) surfaced only with the
GLOBAL header config (header_effect = glow; the section config used = none). */
/* The header BAR's own effect (.ne-header--glow / --shadow, header-styles.liquid
~867) is a spreadless halo blooming in ALL directions — including DOWN into the
content mouth where the merged panel emerges, so a glow ring hugs the seam even
with the panel glow fixed above. When merged, re-cast the bar effect to spill
only AWAY from the mouth (top → up; left → left; right → right), so the seam edge
stays clean. (0,3,0)+!important beats the base effect (0,1,0). */
.ne-header--top.ne-header--menu-merge.ne-header--glow {
box-shadow:
0 calc(-8px * var(--ne-header-glow-intensity, 0.5)) calc(24px * var(--ne-header-glow-intensity, 0.5)) -4px var(--ne-scheme-accent, rgba(99,102,241,0.5)),
0 calc(-14px * var(--ne-header-glow-intensity, 0.5)) calc(60px * var(--ne-header-glow-intensity, 0.5)) -8px var(--ne-scheme-accent, rgba(99,102,241,0.25)) !important;
}
.ne-header--left.ne-header--menu-merge.ne-header--glow {
box-shadow:
calc(-8px * var(--ne-header-glow-intensity, 0.5)) 0 calc(24px * var(--ne-header-glow-intensity, 0.5)) -4px var(--ne-scheme-accent, rgba(99,102,241,0.5)),
calc(-14px * var(--ne-header-glow-intensity, 0.5)) 0 calc(60px * var(--ne-header-glow-intensity, 0.5)) -8px var(--ne-scheme-accent, rgba(99,102,241,0.25)) !important;
}
.ne-header--right.ne-header--menu-merge.ne-header--glow {
box-shadow:
calc(8px * var(--ne-header-glow-intensity, 0.5)) 0 calc(24px * var(--ne-header-glow-intensity, 0.5)) -4px var(--ne-scheme-accent, rgba(99,102,241,0.5)),
calc(14px * var(--ne-header-glow-intensity, 0.5)) 0 calc(60px * var(--ne-header-glow-intensity, 0.5)) -8px var(--ne-scheme-accent, rgba(99,102,241,0.25)) !important;
}
/* When the dropdown is fully transparent (transparent-on-top header, glass
off, not scrolled) a glow/shadow would render as a floating outline around
an invisible panel — suppress it so "fully transparent" really is. Once
scrolled into the solid state the effect returns via the rules above.
Specificity (0,4,0) beats the (0,2,0) effect rules. */
.ne-header--initial-transparent:not(.ne-header--scrolled):not(.ne-glass) .ne-header__dropdown,
.ne-header--initial-transparent:not(.ne-header--scrolled):not(.ne-glass) .ne-header__megamenu {
box-shadow: none;
}
/* Animation: Fade — visibility delays on hide so opacity can transition out first */
.ne-header--dropdown-fade .ne-header__dropdown {
transition: opacity var(--ne-transition-base), visibility 0s var(--ne-transition-base);
}
.ne-header--dropdown-fade .ne-header__nav-item:hover > .ne-header__dropdown,
.ne-header--dropdown-fade .ne-header__nav-item:focus-within > .ne-header__dropdown,
.ne-header--dropdown-fade .ne-header__nav-item.is-open > .ne-header__dropdown {
transition: opacity var(--ne-transition-base), visibility 0s 0s;
}
/* Animation: Slide down — larger offset (18px) so the motion is clearly distinct
from Fade. Subtle 8px values looked identical to Fade in QA. */
.ne-header--dropdown-slide:not(.ne-header--left):not(.ne-header--right) .ne-header__dropdown {
transform: translateX(-50%) translateY(-18px);
transition: opacity var(--ne-transition-base), visibility var(--ne-transition-base), transform var(--ne-transition-base);
}
/* Animation: Scale — stronger scale down (0.85) + spring easing so the pop is obvious.
0.95 was imperceptible against the Fade baseline. */
.ne-header--dropdown-scale:not(.ne-header--left):not(.ne-header--right) .ne-header__dropdown {
transform: translateX(-50%) scale(0.85);
transform-origin: top center;
transition: opacity var(--ne-transition-base), visibility var(--ne-transition-base), transform var(--ne-transition-spring);
}
/* Mega menu: multi-column layout */
.ne-header__dropdown--mega {
left: 0;
transform: none;
min-width: auto;
width: max-content;
max-width: 800px;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
gap: var(--ne-space-4);
}
/* Show dropdown on hover/focus (CSS fallback + JS is-open class) */
.ne-header__nav-item:hover > .ne-header__dropdown,
.ne-header__nav-item:focus-within > .ne-header__dropdown,
.ne-header__nav-item.is-open > .ne-header__dropdown {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Megamenu open fallback — mirror of the dropdown rule above. Megamenus
otherwise open ONLY via the glass/transparent-gated slide/fade/scale rules,
the sidebar sb-mega-panel rule, or the left/right rules — there is no plain
(non-glass, non-sidebar) reveal. A TOP header that is NOT glass therefore left
promoted megamenus stuck at visibility:hidden even when open. This is exposed
by menu-merge (which forces dropdown-slide): a non-glass merged top header never
opened its megamenus. Give them the same non-gated reveal the dropdown has. */
.ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header__nav-item:focus-within > .ne-header__megamenu,
.ne-header__nav-item.is-open > .ne-header__megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
.ne-header--dropdown-slide:not(.ne-header--left):not(.ne-header--right) .ne-header__nav-item:hover > .ne-header__dropdown,
.ne-header--dropdown-slide:not(.ne-header--left):not(.ne-header--right) .ne-header__nav-item:focus-within > .ne-header__dropdown,
.ne-header--dropdown-slide:not(.ne-header--left):not(.ne-header--right) .ne-header__nav-item.is-open > .ne-header__dropdown {
transform: translateX(-50%) translateY(0);
}
.ne-header--dropdown-scale:not(.ne-header--left):not(.ne-header--right) .ne-header__nav-item:hover > .ne-header__dropdown,
.ne-header--dropdown-scale:not(.ne-header--left):not(.ne-header--right) .ne-header__nav-item:focus-within > .ne-header__dropdown,
.ne-header--dropdown-scale:not(.ne-header--left):not(.ne-header--right) .ne-header__nav-item.is-open > .ne-header__dropdown {
transform: translateX(-50%) scale(1);
}
/* Mega menu: correct initial transforms (no translateX since left:0) — magnitudes
matched to the dropdown values above so all animations read identically. */
.ne-header--dropdown-slide .ne-header__dropdown--mega {
transform: translateY(-18px);
transform-origin: top left;
}
.ne-header--dropdown-scale .ne-header__dropdown--mega {
transform: scale(0.85);
transform-origin: top left;
}
.ne-header--dropdown-slide .ne-header__nav-item:hover > .ne-header__dropdown--mega,
.ne-header--dropdown-slide .ne-header__nav-item:focus-within > .ne-header__dropdown--mega,
.ne-header--dropdown-slide .ne-header__nav-item.is-open > .ne-header__dropdown--mega {
transform: translateY(0);
}
.ne-header--dropdown-scale .ne-header__nav-item:hover > .ne-header__dropdown--mega,
.ne-header--dropdown-scale .ne-header__nav-item:focus-within > .ne-header__dropdown--mega,
.ne-header--dropdown-scale .ne-header__nav-item.is-open > .ne-header__dropdown--mega {
transform: scale(1);
}
.ne-header__dropdown-group-title {
font-size: var(--ne-font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ne-scheme-text-muted);
padding: var(--ne-space-1) var(--ne-space-3);
margin-bottom: var(--ne-space-1);
}
.ne-header__dropdown-link {
display: block;
padding: var(--ne-space-2) var(--ne-space-3);
border-radius: var(--ne-radius-md);
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text-muted);
text-decoration: none;
transition: all var(--ne-transition-fast);
line-height: 1.4;
/* Long labels (e.g. "Crew Sock — Merino Cushion") wrapped to two lines /
widened the chip unevenly. Truncate with an ellipsis instead, bounded by
the panel max-width below (user 2026-06-23). The has-submenu trigger is
display:flex; its label span handles ellipsis (rule further down). */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Cap the panel width so nowrap links actually truncate rather than stretch
the panel; non-megamenu only (megamenus manage their own width). */
.ne-header__dropdown:not(.ne-header__dropdown--mega) {
max-width: 300px;
}
/* Ellipsis inside the flex submenu-trigger: the label must shrink + clip,
the chevron stays fixed. */
.ne-header__dropdown-link-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ne-header__dropdown-link:hover {
color: var(--ne-scheme-text);
background: var(--ne-glass-bg-hover, rgba(255,255,255,0.06));
}
/* ── Panel dropdown links inherit the nav Button-Stil / Hover-Stil ─────────
menu.liquid mirrors the merchant's choice onto the header element:
• Resting button style → .ne-header--nav-btn-{rounded|pill|square}
• Hover style (style=none) → .ne-header--hover-style-{…} / --hover-underline / --hover-bold
The two groups are mutually exclusive (the hover group is only emitted
when nav_button_style == 'none'), so these blocks never both apply.
Until 2026-05-27 both groups targeted only .ne-header__nav-link +
.ne-header__action — the panel links kept their own plain hover. */
/* Resting button style → each panel link becomes a button chip. Same plain
bg/border/text token chain as .ne-header__nav-link--btn-{shape}. The 2px
vertical gap keeps stacked chips from touching. */
.ne-header--nav-btn-rounded .ne-header__dropdown-link,
.ne-header--nav-btn-pill .ne-header__dropdown-link,
.ne-header--nav-btn-square .ne-header__dropdown-link {
border: 1px solid var(--ne-hbtn-plain-border, var(--ne-glass-border, rgba(255, 255, 255, 0)));
background: var(--ne-hbtn-plain-bg, var(--ne-scheme-btn-bg, var(--ne-glass-bg, rgba(255,255,255,0.08))));
color: var(--ne-hbtn-plain-text, var(--ne-scheme-btn-text, var(--ne-scheme-text)));
margin-block: 2px;
}
.ne-header--nav-btn-rounded .ne-header__dropdown-link { border-radius: var(--ne-btn-radius, var(--ne-radius-md)); }
.ne-header--nav-btn-pill .ne-header__dropdown-link { border-radius: var(--ne-radius-full); }
.ne-header--nav-btn-square .ne-header__dropdown-link { border-radius: 0; }
/* Button-optik chips need a symmetric inset. Side/merge panels zero their
horizontal padding (header-styles.liquid ~2004: full-width plain rows so the
hover hitbox reaches the panel edge) — which is right for plain links but
leaves button chips flush against the panel's L/R edges while the T/B panel
padding remains, so chips look glued to the sides (user 2026-07-09). When the
links are styled as buttons, restore the horizontal padding so the chips inset
equally on all four sides. (0,3,1) beats the (0,2,1) padding-inline:0 rule. */
.ne-header.ne-header--nav-btn-rounded .ne-header__dropdown:not(.ne-header__dropdown--mega),
.ne-header.ne-header--nav-btn-pill .ne-header__dropdown:not(.ne-header__dropdown--mega),
.ne-header.ne-header--nav-btn-square .ne-header__dropdown:not(.ne-header__dropdown--mega) {
padding-inline: var(--ne-space-3);
}
/* More-panel row PARITY — the overflow "More" panel mixes row types: simple entries
render as .ne-header__dropdown-link (which DO get the button-chip optik above),
submenu/mega entries as cloned .ne-header__nav-item--more-child carrying a plain
.ne-header__nav-link (which did NOT get the chip fill → transparent bg + muted text
+ a taller 36px fixed height → looked unstyled AND spaced differently, user 2026-07-09).
Give the cloned parent rows the EXACT same chip treatment as .ne-header__dropdown-link
so every row in the panel — and its child flyout — reads identically. (0,3,1) beats the
base more-child rule (0,2,1). */
/* ⚠️ !important is REQUIRED here: the spine clone-reset (header-styles.liquid ~520,
`.ne-header--sb-spine .ne-header__dropdown .ne-header__nav-link`) forces these cloned
nav-links to `background:transparent!important; border:0!important; color:muted!important`
so they read flat "like plain rows". That was right BEFORE button-optik; with button chips
the simple rows (dropdown-link) ARE filled, so the flat clone looked unstyled + off-rhythm.
`.ne-header` prefix → (0,4,0) beats the (0,3,0) spine rule; !important beats its !important. */
.ne-header.ne-header--nav-btn-rounded .ne-header__nav-item--more-child > .ne-header__nav-link,
.ne-header.ne-header--nav-btn-pill .ne-header__nav-item--more-child > .ne-header__nav-link,
.ne-header.ne-header--nav-btn-square .ne-header__nav-item--more-child > .ne-header__nav-link {
border: 1px solid var(--ne-hbtn-plain-border, var(--ne-glass-border, rgba(255, 255, 255, 0))) !important;
background: var(--ne-hbtn-plain-bg, var(--ne-scheme-btn-bg, var(--ne-glass-bg, rgba(255,255,255,0.08)))) !important;
color: var(--ne-hbtn-plain-text, var(--ne-scheme-btn-text, var(--ne-scheme-text))) !important;
height: auto; /* match dropdown-link content height */
padding: var(--ne-space-2) var(--ne-space-3); /* identical to .ne-header__dropdown-link */
margin-block: 2px;
}
.ne-header.ne-header--nav-btn-rounded .ne-header__nav-item--more-child > .ne-header__nav-link { border-radius: var(--ne-btn-radius, var(--ne-radius-md)); }
.ne-header.ne-header--nav-btn-pill .ne-header__nav-item--more-child > .ne-header__nav-link { border-radius: var(--ne-radius-full); }
.ne-header.ne-header--nav-btn-square .ne-header__nav-item--more-child > .ne-header__nav-link { border-radius: 0; }
.ne-header.ne-header--nav-btn-rounded .ne-header__nav-item--more-child > .ne-header__nav-link:hover,
.ne-header.ne-header--nav-btn-pill .ne-header__nav-item--more-child > .ne-header__nav-link:hover,
.ne-header.ne-header--nav-btn-square .ne-header__nav-item--more-child > .ne-header__nav-link:hover {
color: var(--ne-hbtn-hover-text, var(--ne-scheme-btn-text-hover, var(--ne-scheme-btn-text, var(--ne-scheme-text)))) !important;
background: var(--ne-hbtn-hover-bg, var(--ne-scheme-btn-bg-hover, var(--ne-scheme-accent))) !important;
border-color: var(--ne-hbtn-hover-border, var(--ne-scheme-btn-border-hover, var(--ne-scheme-btn-bg-hover, var(--ne-scheme-accent)))) !important;
}
/* UNIFORM panel-row geometry at EVERY level (user 2026-07-09) — the 3 different
"gaps" the merchant saw were actually 3 different ROW HEIGHTS at a constant 2px gap:
simple/child rows ≈ 37.6px, but cloned submenu-parent nav-links inherited
`min-height: var(--ne-nav-btn-length)` from the spine equal-width rule (~43px), and
deeper submenu triggers differed again. Force ONE fixed height + one block margin on
every clickable row — simple dropdown-links, cloned more-child nav-links, and nested
submenu links — so the More panel, its child flyouts and deeper submenus share one
rhythm. Tweakable via --ne-panel-row-h / --ne-panel-row-gap. (0,4,0)+!important beats
the spine equal-width min-height (0,3,0) and the clone-reset (0,3,0)!important. */
.ne-header.ne-header--nav-btn-rounded .ne-header__dropdown-link,
.ne-header.ne-header--nav-btn-pill .ne-header__dropdown-link,
.ne-header.ne-header--nav-btn-square .ne-header__dropdown-link,
.ne-header.ne-header--nav-btn-rounded .ne-header__nav-item--more-child > .ne-header__nav-link,
.ne-header.ne-header--nav-btn-pill .ne-header__nav-item--more-child > .ne-header__nav-link,
.ne-header.ne-header--nav-btn-square .ne-header__nav-item--more-child > .ne-header__nav-link {
height: var(--ne-panel-row-h, 40px) !important;
min-height: 0 !important;
margin-block: var(--ne-panel-row-gap, 3px) !important;
display: flex !important;
align-items: center !important;
box-sizing: border-box !important;
}
/* Resting-button hover → flip to the button hover tokens (mirrors
.ne-header__nav-link--btn:hover). Specificity (0,3,0) beats the base
dropdown-link:hover (0,2,0) — no !important needed. */
.ne-header--nav-btn-rounded .ne-header__dropdown-link:hover,
.ne-header--nav-btn-pill .ne-header__dropdown-link:hover,
.ne-header--nav-btn-square .ne-header__dropdown-link:hover {
color: var(--ne-hbtn-hover-text, var(--ne-scheme-btn-text-hover, var(--ne-scheme-btn-text, var(--ne-scheme-text))));
background: var(--ne-hbtn-hover-bg, var(--ne-scheme-btn-bg-hover, var(--ne-scheme-accent)));
border-color: var(--ne-hbtn-hover-border, var(--ne-scheme-btn-border-hover, var(--ne-scheme-btn-bg-hover, var(--ne-scheme-accent))));
}
/* ── Sub-items inherit the nav-button 3D / glass optic ─────────────────────
The fill/border/text chain above already mirrors the nav buttons; the
panel chips looked "flat" only because the 3D depth + glass were missing
(so a cloned submenu-trigger nav-link-btn stood out). Add them here via the
SAME --ne-scheme-accent-glow / --ne-action-* / --ne-hbtn-* / --ne-glass-*
tokens the nav buttons read (inherited, not hardcoded). DEPTH via box-shadow
only — NO translateY lift: the lift uses `transform`, which the dropdown
open animation needs, so the chips keep animating. */
.ne-header.ne-header--nav-btn-3d .ne-header__dropdown-link {
box-shadow:
0 0 14px var(--ne-scheme-accent-glow, rgba(120,120,255,0.5)),
var(--ne-action-shadow);
}
.ne-header.ne-header--nav-btn-3d .ne-header__dropdown-link:hover {
box-shadow:
0 0 22px var(--ne-scheme-accent-glow, rgba(120,120,255,0.7)),
var(--ne-action-shadow-hover);
}
.ne-header.ne-header--nav-btn-glass .ne-header__dropdown-link {
background:
linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 100%),
var(--ne-hbtn-plain-bg, var(--ne-scheme-btn-bg, rgba(255,255,255,0.06)));
background-blend-mode: overlay;
border-color: var(--ne-hbtn-plain-border, var(--ne-glass-border, rgba(255,255,255,0.12)));
backdrop-filter: blur(var(--ne-glass-blur, 12px)) saturate(1.4);
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 12px)) saturate(1.4);
box-shadow:
inset 0 1px 0 rgba(255,255,255,0.35),
inset 0 -1px 0 rgba(0,0,0,0.12),
var(--ne-action-shadow);
}
/* Header itself is glass → descendant backdrop-filter is neutered (Rule 49),
suppress the wasted GPU work; the gradient + inset highlights carry the look. */
.ne-header.ne-glass.ne-header--nav-btn-glass .ne-header__dropdown-link {
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Glass dropdown-chip HOVER — without this, glass chips show NO hover state:
the glass resting bg above (0,3,0) beats the generic chip hover (2480,
0,2,1), and there was no glass-specific dropdown-link hover (unlike the nav
buttons, which have a dedicated glass hover at 1607). Mirror that nav recipe
— same gradient, swap the base to the hover bg token. The pseudo bumps this
to (0,3,1) so it wins over the resting glass bg without !important. One rule
covers BOTH parent dropdown chips and submenu chips (both are dropdown-links). */
.ne-header.ne-header--nav-btn-glass .ne-header__dropdown-link:hover {
background:
linear-gradient(180deg, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0.02) 100%),
var(--ne-hbtn-hover-bg, var(--ne-scheme-btn-bg-hover, var(--ne-scheme-btn-bg, var(--ne-action-bg-hover))));
background-blend-mode: overlay;
border-color: var(--ne-hbtn-hover-border, var(--ne-scheme-btn-border-hover, var(--ne-scheme-btn-border, var(--ne-glass-border, rgba(255,255,255,0.12)))));
color: var(--ne-hbtn-hover-text, var(--ne-scheme-btn-text-hover, var(--ne-scheme-btn-text, var(--ne-scheme-text))));
}
/* "More" submenu items keep their nav-link (so the submenu + connector trace
survive in the clone), but a nav-link carries the nav/accent FONT (e.g.
Michroma 11px) — override it to the dropdown row font so the cloned row
reads like the plain dropdown rows. Inherit = same body font the
dropdown-links use; size from the shared --ne-font-size-sm token. */
.ne-header__nav-item--more-child > .ne-header__nav-link,
.ne-header__nav-item--more-child > .ne-header__nav-link > span {
font-family: inherit !important;
font-size: var(--ne-font-size-sm, 0.875rem) !important;
font-weight: inherit !important;
letter-spacing: normal !important;
text-transform: none !important;
}
/* Hover style (button-style = none) → hover-only shape + underline + bold,
mirroring the nav-link hover treatment. The base dropdown-link:hover bg
already supplies the highlight; the shape just sets its radius. */
.ne-header--hover-style-rounded .ne-header__dropdown-link:hover { border-radius: var(--ne-btn-radius, var(--ne-radius-md, 8px)); }
.ne-header--hover-style-pill .ne-header__dropdown-link:hover { border-radius: var(--ne-radius-full, 9999px); }
.ne-header--hover-style-square .ne-header__dropdown-link:hover { border-radius: 0; }
:is(.ne-header--ul-static, .ne-header--ul-sweep, .ne-header--ul-fade) .ne-header__dropdown-link:hover {
text-decoration: underline;
text-underline-offset: 4px;
text-decoration-thickness: 2px;
}
.ne-header--hover-bold .ne-header__dropdown-link:hover {
-webkit-text-stroke: 0.4px currentColor;
}
/* Underline/bold hover WITHOUT a hover-shape → text cue is the whole
affordance, so drop the default panel hover-highlight block (matches the
top-level nav-links, which show no background for underline/bold-only
hover — the block only appears in hover-shape mode). The :not() guard
keeps the shaped highlight when a hover shape IS chosen. Specificity
(0,4,0) beats the base dropdown-link:hover (0,2,0). */
:is(.ne-header--ul-static, .ne-header--ul-sweep, .ne-header--ul-fade):not([class*="hover-style-"]) .ne-header__dropdown-link:hover,
.ne-header--hover-bold:not([class*="hover-style-"]) .ne-header__dropdown-link:hover {
background: transparent;
}
.ne-header__dropdown-link--view-all {
font-size: var(--ne-font-size-xs);
color: var(--ne-scheme-accent);
font-weight: 500;
}
/* Cascading submenu (OS-style flyout) — sub-links appear as a nested panel
beside the parent row instead of inline below it. */
.ne-header__dropdown-item {
position: relative;
/* BFC, damit die 3px-Chip-margin-block NICHT durch den Wrapper hinaus
kollabiert (wie im Multicol-Kontext der --more-child-Zeilen). Sonst
Wrapper 40px hier vs. 46px dort → ungleicher Zeilen-Pitch im Mega. */
display: flow-root;
}
.ne-header__dropdown-item--has-submenu > .ne-header__dropdown-link {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ne-space-2);
}
.ne-header__dropdown-chevron {
flex: 0 0 auto;
opacity: 0.7;
transition: transform var(--ne-transition-fast);
}
.ne-header__dropdown-item--has-submenu:hover > .ne-header__dropdown-link .ne-header__dropdown-chevron,
.ne-header__dropdown-item--has-submenu:focus-within > .ne-header__dropdown-link .ne-header__dropdown-chevron {
transform: translateX(2px);
opacity: 1;
}
.ne-header__dropdown--submenu {
/* Reset parent dropdown's top-offset — submenu is not under the header.
Positioning parent is .ne-header__dropdown-item (position: relative),
whose 100% width equals the item's width. The parent .ne-header__dropdown
has padding (--ne-space-3) around the item, so 100% sits INSIDE the
parent dropdown's right padding. Add that padding to the left offset
so the submenu clears the parent dropdown's right border cleanly,
then add --ne-header-dropdown-gap — same visual gap pattern used
between header and first dropdown. */
top: 0;
left: calc(100% + var(--ne-space-3, 12px) + var(--ne-header-dropdown-gap, 10px));
transform: none;
min-width: 220px;
}
/* Viewport-aware submenu (JS toggles via initSubmenuFlip, same logic as the
More-flyout): flip left on right overflow, anchor-bottom (open up) on bottom
clip, cap height + scroll when neither fits. (0,3,0) beats the base (0,1,0);
transform is untouched so the open animation still runs. */
.ne-header__dropdown-item--has-submenu.is-flyout-left > .ne-header__dropdown--submenu {
left: auto;
right: calc(100% + var(--ne-space-3, 12px) + var(--ne-header-dropdown-gap, 10px));
}
.ne-header__dropdown-item--has-submenu.is-flyout-up > .ne-header__dropdown--submenu {
top: auto;
bottom: 0;
}
.ne-header__dropdown-item--has-submenu.is-flyout-cap > .ne-header__dropdown--submenu {
max-height: var(--ne-more-flyout-maxh, 70vh);
overflow-y: auto;
overflow-x: hidden;
}
/* Side hover-bridge follows the flip: default bridge is on the left (right:100%,
see below); when flipped left the submenu sits left of the item, so the
bridge moves to the right side. */
.ne-header__dropdown-item--has-submenu.is-flyout-left > .ne-header__dropdown--submenu::before {
right: auto;
left: 100%;
}
/* Submenu uses the SAME ::after bg layer as the parent dropdown, so it
inherits the parent's FULL optic automatically — base scheme bg, header
glass (1975), custom-optics opacity/blur/tint (1937-1953), custom
color-scheme (2183) AND the soft-edge fade (1905). Every one of those rules
targets .ne-header__dropdown::after, which the submenu IS (compound class).
The previous approach painted bg on the ELEMENT + disabled ::after, which
made the soft-edge mask a no-op (the mask sits on ::after; masking the
element would clip the links too — Rule 49) → the submenu showed no fade
while the parent did (user 2026-06-23). Keep the element transparent; the
base ::after (inset:0; z-index:-1; bg = --ne-scheme-bg, defined at 1858)
sits behind the links and carries every optic the parent has. */
.ne-header__dropdown--submenu {
background-color: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
/* Bridge becomes horizontal for the submenu — spans parent padding + gap */
.ne-header__dropdown--submenu::before {
top: 0;
bottom: 0;
right: 100%;
left: auto;
height: auto;
width: calc(var(--ne-space-3, 12px) + var(--ne-header-dropdown-gap, 10px) + 4px);
}
.ne-header__dropdown-item--has-submenu:hover > .ne-header__dropdown--submenu,
.ne-header__dropdown-item--has-submenu:focus-within > .ne-header__dropdown--submenu,
.ne-header__dropdown-item--has-submenu.is-open > .ne-header__dropdown--submenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transform: none;
}
/* Slide variant: submenu slides in from the left */
.ne-header--dropdown-slide .ne-header__dropdown--submenu {
transform: translateX(-8px);
}
.ne-header--dropdown-slide .ne-header__dropdown-item--has-submenu:hover > .ne-header__dropdown--submenu,
.ne-header--dropdown-slide .ne-header__dropdown-item--has-submenu:focus-within > .ne-header__dropdown--submenu,
.ne-header--dropdown-slide .ne-header__dropdown-item--has-submenu.is-open > .ne-header__dropdown--submenu {
transform: translateX(0);
}
.ne-header--dropdown-scale .ne-header__dropdown--submenu {
transform: scale(0.96);
transform-origin: top left;
}
.ne-header--dropdown-scale .ne-header__dropdown-item--has-submenu:hover > .ne-header__dropdown--submenu,
.ne-header--dropdown-scale .ne-header__dropdown-item--has-submenu:focus-within > .ne-header__dropdown--submenu,
.ne-header--dropdown-scale .ne-header__dropdown-item--has-submenu.is-open > .ne-header__dropdown--submenu {
transform: scale(1);
}
/* Fade variant — submenu flicker fix. Base fade uses `visibility 0s X` which
keeps the element `visibility: hidden` during the opacity fade, then flips
to visible at the end → the submenu pops in abruptly instead of fading.
The top-level dropdown has the same override via `.ne-header__nav-item:hover`,
but that selector doesn't match submenus (parent is .ne-header__dropdown-item,
not .ne-header__nav-item) so the inherited base transition wins. Re-declare
with `visibility 0s 0s` so the fade is visible from the start. */
.ne-header--dropdown-fade .ne-header__dropdown-item--has-submenu:hover > .ne-header__dropdown--submenu,
.ne-header--dropdown-fade .ne-header__dropdown-item--has-submenu:focus-within > .ne-header__dropdown--submenu,
.ne-header--dropdown-fade .ne-header__dropdown-item--has-submenu.is-open > .ne-header__dropdown--submenu {
transition: opacity var(--ne-transition-base), visibility 0s 0s;
}
/* Right-sidebar header: flip submenu to the left of the parent so it
doesn't collide with the already left-placed dropdown. */
.ne-header--right .ne-header__dropdown--submenu {
left: auto;
right: calc(100% + var(--ne-space-3, 12px) + var(--ne-header-dropdown-gap, 10px));
}
.ne-header--right .ne-header__dropdown--submenu::before {
right: auto;
left: 100%;
}
/* ==========================================================================
HEADER - MEGAMENU (block-driven, Horizon-style foundation)
========================================================================== */
/* Megamenu: full-width panel anchored to header bottom edge.
Uses the same visual language as dropdown (glass, radius, border) but spans
the full header width for multi-column layouts with columns + promo tiles. */
/* Megamenu uses position: fixed so it centers to the viewport (or to the
transformed header ancestor in floating/sticky mode) — not to the narrow
nav-item li, which would shift the panel hard to one side when the
trigger isn't near the viewport's horizontal center. */
.ne-header__megamenu {
position: fixed;
/* --ne-header-bottom is published by menu.liquid's JS (getBoundingClientRect
on .ne-header). Falls back to header_height setting + a generous buffer
if JS hasn't run yet. Using actual bottom is critical when a taller logo
pushes the real header height past the configured --ne-header-height. */
top: calc(var(--ne-header-bottom, calc(var(--ne-header-height, 60px) + 10px)) + var(--ne-header-dropdown-gap, 10px));
left: 50%;
transform: translateX(-50%);
/* Width coupled to --content-width formula from critical.css §4 so the
megamenu panel always matches the section grid's content column. */
width: min(
calc(var(--page-width, 90rem) - var(--ne-section-margin, var(--page-margin, 20px)) * 2),
calc(100vw - var(--ne-section-margin, var(--page-margin, 20px)) * 2)
);
padding: var(--ne-space-4) var(--ne-space-5) var(--ne-space-5);
/* Same radius-resolution chain as .ne-header__dropdown (line ~1975) so the
megamenu and dropdowns always share one corner radius — --ne-dropdown-radius
first (future dropdown-specific override), then the header radius setting. */
border-radius: var(--ne-dropdown-radius, var(--ne-header-radius, var(--ne-radius-lg)));
border: 0 solid var(--ne-glass-border, rgba(255, 255, 255, 0));
/* Glass + bg live on ::after pseudo — avoids backdrop-root leakage into descendants. */
background-color: transparent;
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
z-index: var(--ne-z-overlay);
}
/* Top frame active: anchor the megamenu width to the VIEWPORT edges minus the
frame width (offset + per-side padding) PLUS 2px — a CONSTANT clearance to the
frame at ANY window width (independent of page-width / section-margin, which
made the gap width-dependent before). Stays centred via the base translateX(-50%),
so both edges sit exactly frame+2px inside the viewport. Sidebar megas are handled
separately. */
.ne-header--top.ne-header--has-frame .ne-header__megamenu {
width: calc(100vw
- (var(--ne-frame-offset, 8px) + var(--ne-frame-padding-left, 0px) + 2px)
- (var(--ne-frame-offset, 8px) + var(--ne-frame-padding-right, 0px) + 2px)) !important;
}
.ne-header__megamenu::after {
content: '';
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
/* Base = solid scheme bg, matching the dropdown. Was a dark heavy-glass
(--ne-glass-bg-heavy + blur) that always rendered as "blackened glass"
on a solid header regardless of the glass/transparent setting. The glass
rule (.ne-header.ne-glass …::after) and the transparent-on-top rule above
now add / remove the frosted look in lockstep with the dropdown. */
background-color: var(--ne-scheme-bg, rgba(20, 20, 30, 1));
pointer-events: none;
}
/* Top header (not constrained to page width) — widen the megamenu to the
header's content bound. The header bar spans the full viewport (minus its
own padding-x), but the megamenu was capped at --page-width, so it sat
narrower than the nav above it (cramped left column). Floating &
constrained headers already align (their content is inset to page-width),
so this only targets .ne-header--top:not(.ne-header--constrained).
Specificity (0,3,0) beats the base .ne-header__megamenu (0,1,0). */
.ne-header--top:not(.ne-header--constrained) .ne-header__megamenu {
width: calc(100vw - var(--ne-header-padding-x, 20px) * 2);
}
/* Hover-bridge for the megamenu — same purpose as the dropdown's ::before */
.ne-header__megamenu::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: calc(-1 * (var(--ne-header-dropdown-gap, 10px) + 4px));
height: calc(var(--ne-header-dropdown-gap, 10px) + 4px);
background: transparent;
pointer-events: auto;
}
.ne-header--dropdown-fade .ne-header__megamenu {
transition: opacity var(--ne-transition-base), visibility 0s var(--ne-transition-base);
}
.ne-header--dropdown-slide .ne-header__megamenu {
transform: translateX(-50%) translateY(-18px);
transition: opacity var(--ne-transition-base), visibility var(--ne-transition-base), transform var(--ne-transition-base);
}
.ne-header--dropdown-scale .ne-header__megamenu {
transform: translateX(-50%) scale(0.85);
transform-origin: top center;
transition: opacity var(--ne-transition-base), visibility var(--ne-transition-base), transform var(--ne-transition-spring);
}
.ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header__nav-item:focus-within > .ne-header__megamenu,
.ne-header__nav-item.is-open > .ne-header__megamenu {
opacity: 1;
visibility: visible;
pointer-events: auto;
}
/* Fade open-state — override base `visibility 0s base` delay with `0s 0s`
so the panel is already visible when the opacity transition starts
(otherwise it pops in abruptly when the delay elapses = flicker). */
.ne-header--dropdown-fade .ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header--dropdown-fade .ne-header__nav-item:focus-within > .ne-header__megamenu,
.ne-header--dropdown-fade .ne-header__nav-item.is-open > .ne-header__megamenu {
transition: opacity var(--ne-transition-base), visibility 0s 0s;
}
.ne-header--dropdown-slide .ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header--dropdown-slide .ne-header__nav-item:focus-within > .ne-header__megamenu,
.ne-header--dropdown-slide .ne-header__nav-item.is-open > .ne-header__megamenu {
transform: translateX(-50%) translateY(0);
}
.ne-header--dropdown-scale .ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header--dropdown-scale .ne-header__nav-item:focus-within > .ne-header__megamenu,
.ne-header--dropdown-scale .ne-header__nav-item.is-open > .ne-header__megamenu {
transform: translateX(-50%) scale(1);
}
/* ─── Button-menu (dropdown_style = buttons) animation modifiers ───
btn-menu was previously ignoring dropdown_animation completely — its
base transition was opacity-only and per-mode modifiers (.ne-header--
dropdown-fade/slide/scale) only targeted .ne-header__dropdown and
.ne-header__megamenu. Result: user picks "scale" but sees the staggered
opacity-fade (which visually looks like slide-down due to per-button
stagger). Now: each animation mode applies appropriate transform on
btn-menu wrapper. Opacity stays asymmetric (Rule 236) to avoid backdrop-
filter bloom-in-late on inner buttons. Per-button stagger remains
visible inside the wrapper as a sub-animation. */
.ne-header--dropdown-none .ne-header__btn-menu,
.ne-header--dropdown-none .ne-header__nav-item:hover > .ne-header__btn-menu,
.ne-header--dropdown-none .ne-header__nav-item:focus-within > .ne-header__btn-menu,
.ne-header--dropdown-none .ne-header__nav-item.is-open > .ne-header__btn-menu {
transition: none;
}
/* Slide: wrapper translates down 10px on open. Origin top so motion
comes from the trigger direction. */
.ne-header--dropdown-slide .ne-header__btn-menu {
transform: translateY(-10px);
transition: opacity var(--ne-transition-base), visibility 0s linear var(--ne-transition-base), transform var(--ne-transition-base);
}
.ne-header--dropdown-slide .ne-header__nav-item:hover > .ne-header__btn-menu,
.ne-header--dropdown-slide .ne-header__nav-item:focus-within > .ne-header__btn-menu,
.ne-header--dropdown-slide .ne-header__nav-item.is-open > .ne-header__btn-menu {
transform: translateY(0);
transition: opacity 0s linear 0s, visibility 0s linear 0s, transform var(--ne-transition-base);
}
/* Scale: wrapper scales 0.95→1 with top-left transform-origin (matches
btn-menu's anchor position at top:100% left:0 of trigger). */
.ne-header--dropdown-scale .ne-header__btn-menu {
transform: scale(0.95);
transform-origin: top left;
transition: opacity var(--ne-transition-base), visibility 0s linear var(--ne-transition-base), transform var(--ne-transition-base);
}
.ne-header--dropdown-scale .ne-header__nav-item:hover > .ne-header__btn-menu,
.ne-header--dropdown-scale .ne-header__nav-item:focus-within > .ne-header__btn-menu,
.ne-header--dropdown-scale .ne-header__nav-item.is-open > .ne-header__btn-menu {
transform: scale(1);
transition: opacity 0s linear 0s, visibility 0s linear 0s, transform var(--ne-transition-base);
}
/* Flip-left variant: scale transform-origin moves to top-right since
menu now anchors at top:100% right:0 instead of left:0. */
.ne-header--dropdown-scale .ne-header__btn-menu.ne-header__btn-menu--flip-left {
transform-origin: top right;
}
/* Fade: relies on Bug-B-fix base behavior (opacity asymmetric snap-on-
open, fade-on-close). No explicit modifier rule needed — opacity-only
animation matches the "fade" intent without transform interference. */
/* Per-button stagger override per mode. The btn-menu's inner buttons
have `transition-delay: calc(var(--i) * 50ms)` which creates a top-
to-bottom cascade of buttons appearing one-by-one. This stagger is
the DOMINANT visual signature regardless of what the wrapper does —
scale/fade wrapper animations are barely noticeable next to the
button-cascade. To make each animation mode visually distinct:
- slide: keep stagger (the cascade IS the slide-down character)
- scale: disable stagger → buttons fade simultaneously, wrapper scales
- fade: disable stagger but EXTEND duration + add subtle translateY
on children (not wrapper, to avoid backdrop bloom) for a clearly
perceptible fade-in distinct from "none"
- none: disable stagger → instant snap (matches wrapper transition:none) */
/* none mode: instant snap — kill the cascade animation + any transition. */
.ne-header--dropdown-none .ne-header__btn-menu__btn {
transition: none !important;
animation: none !important;
}
/* fade / slide / scale all share the per-button cascade reveal defined on
the open-state rule further below (@keyframes ne-btn-menu-item-in):
• fade = cascade only (no wrapper transform)
• slide = cascade + wrapper translateY (rules above)
• scale = cascade + wrapper scale (rules above)
No fade-specific transform here. A transition-based opacity fade SILENTLY
FAILS for the buttons: the wrapper snaps visibility:hidden→visible
(anti-bloom), so the child opacity transition has no rendered baseline to
animate from and jumps straight to 1. And nav_btn_3d puts
`transform: translateY(-1px) !important` on the buttons, overriding any
fade translateY. The keyframe animation on open fires reliably regardless
of the visibility snap, and being opacity-only it coexists with the 3D
transform (user report 2026-05-24: fade not visible + stagger wanted on
all modes). */
.ne-header--glow .ne-header__megamenu {
box-shadow: 0 0 calc(24px * var(--ne-header-glow-intensity, 0.5)) var(--ne-scheme-accent-glow, rgba(99,102,241,0.25));
}
/* Megamenu panel heading — sits above the inner columns grid. Optional;
block renders the wrapper only when heading or subheading is set. */
.ne-header__megamenu-header {
padding-bottom: var(--ne-space-4);
margin-bottom: var(--ne-space-4);
border-bottom: 1px solid var(--ne-glass-border, rgba(255, 255, 255, 0));
}
.ne-header__megamenu-heading {
font-size: var(--ne-font-size-lg);
font-weight: 700;
color: var(--ne-scheme-heading, var(--ne-scheme-text));
line-height: 1.2;
}
.ne-header__megamenu-subheading {
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text-muted, var(--ne-scheme-text));
margin-top: var(--ne-space-1);
}
/* Megamenu-inner: two-column grid when aside present (links | products/promo),
single column otherwise. Uses 1fr for links so they expand to fill available
space; aside is intrinsic width. */
.ne-header__megamenu-inner {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--ne-space-6);
align-items: start;
}
.ne-header__megamenu--has-aside .ne-header__megamenu-inner {
grid-template-columns: minmax(0, 1fr) auto;
}
/* ── Sidebar mega — PANEL variant (T5.2) ──────────────────────────────────
A sidebar is narrow + tall. Stack the mega: link columns on TOP, a products
ROW on the BOTTOM. The panel is a FIXED, frame-clamped card anchored to the
sidebar's INNER edge (not the individual nav-item) — so:
· consistent position + the dropdown-gap reference is the sidebar edge
(fixes: gap didn't seem to apply on sidebars),
· full frame-height headroom → flyout submenus never need internal scroll,
· it can't overflow the viewport on short/narrow screens (top, bottom AND
right edges all stay frame+2px inside).
Drawer variant (T5.3) overrides this. */
.ne-header--sb-mega-panel .ne-header__megamenu {
position: fixed !important;
/* Fallback vertical anchor; JS (updateSidebarFlip) overrides `top` inline with
the item-centered value, clamped to the frame band — so the panel sits next
to the hovered item and only shifts to the edge when it would overflow. */
top: calc(var(--ne-frame-offset, 8px) + var(--ne-frame-padding-top, 0px) + 2px);
bottom: auto !important;
/* Glass-safe reveal (Rule 231): keep opacity CONSTANT (any 0→1 fade re-samples
the glass backdrop per frame → "puff-in" flicker). Show/hide is INSTANT via
visibility (no transition) — an animated close made the content linger after
the cursor left ("delayed fade-out"). JS sets `top`. */
transform: none !important;
visibility: hidden;
width: min(720px, calc(100vw
- var(--ne-header-sidebar-width, 88px)
- var(--ne-space-2, 8px) - var(--ne-header-dropdown-gap, 10px)
- (var(--ne-frame-offset, 8px) + var(--ne-frame-padding-right, 0px) + 2px))) !important;
/* Fallback cap; JS (place) sets an inline max-height from the MEASURED band so
it can override this — hence NO !important here (inline loses to !important,
which silently defeated the JS clamp in the Customizer's tall iframe). */
max-height: calc(100vh
- (var(--ne-frame-offset, 8px) + var(--ne-frame-padding-top, 0px) + 2px)
- (var(--ne-frame-offset, 8px) + var(--ne-frame-padding-bottom, 0px) + 2px));
/* Scroll lives on the INNER block, not the fixed panel: Firefox does not
reliably clip overflow on a position:fixed element that is capped by
max-height and holds flex/grid content (the content escaped the box).
Canonical fix — panel is a flex column that just clips; the inner grid
flexes to fill and scrolls. Works in Chromium + Firefox. */
display: flex;
flex-direction: column;
overflow: hidden;
opacity: 1 !important;
transition: none !important;
}
.ne-header--sb-mega-panel .ne-header__megamenu-inner {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
overflow-x: hidden;
overscroll-behavior: contain;
}
.ne-header--left.ne-header--sb-mega-panel .ne-header__megamenu {
left: calc(var(--ne-header-sidebar-width, 88px) + var(--ne-space-2, 8px) + var(--ne-header-dropdown-gap, 10px)) !important;
right: auto !important;
}
.ne-header--right.ne-header--sb-mega-panel .ne-header__megamenu {
right: calc(var(--ne-header-sidebar-width, 88px) + var(--ne-space-2, 8px) + var(--ne-header-dropdown-gap, 10px)) !important;
left: auto !important;
}
.ne-header--sb-mega-panel .ne-header__nav-item:hover > .ne-header__megamenu,
.ne-header--sb-mega-panel .ne-header__nav-item.is-open > .ne-header__megamenu,
.ne-header--sb-mega-panel .ne-header__nav-item:focus-within > .ne-header__megamenu {
visibility: visible !important;
}
/* When NOT open, force the panel + its whole subtree hidden INSTANTLY. The base
dropdown effect (equal specificity, later in source) kept visibility for its
fade duration and ran a per-item stagger, so the sub-items lingered after the
panel background was already gone. This wins and kills that trailing fade. */
.ne-header--sb-mega-panel .ne-header__nav-item:not(:hover):not(:focus-within):not(.is-open) > .ne-header__megamenu {
visibility: hidden !important;
}
.ne-header--sb-mega-panel .ne-header__nav-item:not(:hover):not(:focus-within):not(.is-open) > .ne-header__megamenu,
.ne-header--sb-mega-panel .ne-header__nav-item:not(:hover):not(:focus-within):not(.is-open) > .ne-header__megamenu * {
transition: none !important;
animation-duration: 0s !important;
}
/* Keep the glass scrim/border pseudos in LOCKSTEP with the panel on hide: they
must not fade on their own opacity, or the card background vanishes before
the links do (the leave-desync). Opacity constant, no own transition — they
ride the panel's visibility toggle. */
.ne-header--sb-mega-panel .ne-header__megamenu::before,
.ne-header--sb-mega-panel .ne-header__megamenu::after {
opacity: 1 !important;
transition: none !important;
}
/* Plain dropdowns (nav items whose panel has NO submenu/products, so they stay
a .ne-header__dropdown instead of being promoted to a mega) still ran the base
fade → the leave-lag persisted for them. Same instant, glass-safe show/hide:
kill only the dropdown's OWN transition (not inner link/product hovers). */
.ne-header--sb-mega-panel .ne-header__dropdown:not(.ne-header__dropdown--submenu),
.ne-header--sb-mega-panel .ne-header__dropdown:not(.ne-header__dropdown--submenu)::before,
.ne-header--sb-mega-panel .ne-header__dropdown:not(.ne-header__dropdown--submenu)::after {
transition: none !important;
}
/* Stack: link columns on top, products row underneath. Only min-WIDTH:0 here —
min-height:0 on the grid items (links/aside rows) would let their rows
collapse and overlap; the scroll container's min-height:0 lives on .inner. */
.ne-header--sb-mega-panel .ne-header__megamenu-links {
min-width: 0;
}
.ne-header--sb-mega-panel .ne-header__megamenu--has-aside .ne-header__megamenu-inner {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto auto;
}
.ne-header--sb-mega-panel .ne-header__megamenu-aside {
min-width: 0;
}
.ne-header--sb-mega-panel .ne-header__megamenu-aside--products {
grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}
.ne-header--sb-mega-panel .ne-header__megamenu--has-aside .ne-header__megamenu-aside {
padding-top: var(--ne-space-4, 16px);
border-top: 1px solid var(--ne-glass-border, rgba(255, 255, 255, 0.12));
}
/* Columns submenu style in the sidebar panel: a group's children sit in a
column BESIDE its heading (deepest level unfolds sideways), instead of
stacked underneath. Each group becomes a 2-track grid: [heading | children].
Top-level leaf links keep flowing normally. */
.ne-header--sb-mega-panel.ne-header--mm-sub-columns .ne-header__megamenu-links {
columns: unset;
display: flex;
flex-direction: column;
gap: var(--ne-space-4);
}
.ne-header--sb-mega-panel.ne-header--mm-sub-columns .ne-header__megamenu-group {
display: grid;
grid-template-columns: minmax(96px, max-content) minmax(0, 1fr);
column-gap: var(--ne-space-5);
align-items: start;
margin-bottom: 0;
}
/* Heading becomes the left track — drop the underline (it read as a divider
when stacked); the column gap separates it from the children now. */
.ne-header--sb-mega-panel.ne-header--mm-sub-columns .ne-header__megamenu-group-heading {
border-bottom: 0;
padding-bottom: 0;
align-self: start;
}
/* Flyout submenus: the detail pane fills the links container's HEIGHT (it's
absolute top:0/bottom:0). Give that container a tall min-height so the
revealed submenu has room and doesn't need its own scroll — the panel itself
is already frame-clamped, so nothing exceeds the screen. */
.ne-header--sb-mega-panel.ne-header--mm-sub-flyout .ne-header__megamenu-links {
min-height: min(58vh, 440px);
}
/* Hover-bridge INSIDE the flyout: a transparent ::after on the HEADING (not on
the detail list — that has overflow:auto and would CLIP a bridge) extends
right across the gap to the detail pane. It only exists while the group is
hovered, so it never blocks sibling rows; being a group descendant, hovering
it keeps the group :hover alive while the cursor crosses to the detail. */
.ne-header--mm-sub-flyout .ne-header__megamenu-group--flyout > .ne-header__megamenu-group-heading {
position: relative;
}
.ne-header--mm-sub-flyout .ne-header__megamenu-group--flyout:hover > .ne-header__megamenu-group-heading::after,
.ne-header--mm-sub-flyout .ne-header__megamenu-group--flyout:focus-within > .ne-header__megamenu-group-heading::after {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: 100%;
width: calc(var(--ne-space-6) + 16px);
}
/* Menu-links layout — CSS multi-column so each column flows independently.
Grid would bind all groups in a row to the tallest one, so expanding an
accordion in column B would push groups in columns A and C down too.
With `columns:`, each column is its own text-flow: accordion expansion
lengthens only its own column; other columns are unaffected. */
.ne-header__megamenu-links {
columns: var(--ne-mm-link-cols, 3);
column-gap: var(--ne-space-5);
/* `display: block` (default) — columns requires block-level flow. */
}
/* Responsive wrap (opt-in PER-MEGA via the megamenu_link block toggle →
.ne-header__megamenu--wrap on the panel). Swaps the fixed multi-column flow
for an auto-fit grid: each group keeps a readable min width and surplus
columns wrap onto a new row instead of squeezing their text. Scoped OFF for
the sidebar/drawer mega variants and the flyout submenu model (header-level
classes), which drive their own link layout. */
.ne-header:not(.ne-header--sb-mega-panel):not(.ne-header--sb-mega-drawer):not(.ne-header--mm-sub-flyout) .ne-header__megamenu--wrap .ne-header__megamenu-links {
columns: auto;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--ne-space-4) var(--ne-space-5);
align-items: start;
}
/* Hide the "View all" links PER-MEGA when the block toggle is off. The
cloned source anchor keeps its class only until transformSubmenus renames
it (accordion → --accordion-link--view-all, columns/flyout → --link--view-all),
so all three variants are covered. */
.ne-header__megamenu--no-view-all .ne-header__dropdown-link--view-all,
.ne-header__megamenu--no-view-all .ne-header__megamenu-link--view-all,
.ne-header__megamenu--no-view-all .ne-header__megamenu-accordion-link--view-all {
display: none;
}
.ne-header__megamenu-group {
display: block;
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
min-width: 0;
margin-bottom: var(--ne-space-4);
}
.ne-header__megamenu-group:last-child { margin-bottom: 0; }
/* Group heading = the child-link title, clickable (goes to that child's URL) */
.ne-header__megamenu-group-heading {
display: block;
font-size: var(--ne-font-size-sm);
font-weight: 700;
color: var(--ne-scheme-heading, var(--ne-scheme-text));
text-decoration: none;
padding-bottom: var(--ne-space-2);
margin-bottom: var(--ne-space-1);
border-bottom: 1px solid var(--ne-glass-border, rgba(255, 255, 255, 0));
line-height: 1.3;
transition: color var(--ne-transition-fast);
}
.ne-header__megamenu-group-heading:hover {
color: var(--ne-scheme-accent);
}
.ne-header__megamenu-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
/* Flyout submenu mode (megamenu_submenu_style = flyout): master-detail INSIDE
the panel. Group headings + flat links stack in a narrow left column;
hovering a group reveals its children in the pane to the RIGHT — a column
within the mega, NOT a floating overlay. ('columns' shows every group's
list in flow; 'accordion' uses the markup instead of a group.) */
.ne-header--mm-sub-flyout .ne-header__megamenu-links {
columns: unset;
position: relative;
min-height: 180px;
}
/* Left column = headings + leaf rows, capped to a readable width. */
.ne-header--mm-sub-flyout .ne-header__megamenu-links > .ne-header__megamenu-group--flyout,
.ne-header--mm-sub-flyout .ne-header__megamenu-links > .ne-header__dropdown-item {
max-width: 260px;
}
/* Static so the detail list positions against the links container, not the group. */
.ne-header--mm-sub-flyout .ne-header__megamenu-group--flyout {
position: static;
}
.ne-header__megamenu-group--flyout > .ne-header__megamenu-group-heading {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ne-space-2);
cursor: pointer;
border-bottom: 0;
border-radius: var(--ne-radius-md);
padding: var(--ne-space-2);
}
.ne-header__megamenu-group--flyout:hover > .ne-header__megamenu-group-heading,
.ne-header__megamenu-group--flyout:focus-within > .ne-header__megamenu-group-heading {
background: var(--ne-glass-bg-hover, rgba(255, 255, 255, 0.06));
color: var(--ne-scheme-text);
}
.ne-header__megamenu-group--flyout > .ne-header__megamenu-group-heading svg {
flex: 0 0 auto;
}
/* Detail pane: fills the area to the RIGHT of the left column, inside the panel. */
.ne-header--mm-sub-flyout .ne-header__megamenu-group--flyout > .ne-header__megamenu-list {
position: absolute;
top: 0;
bottom: 0;
left: calc(260px + var(--ne-space-6));
right: 0;
padding-left: var(--ne-space-5);
border-left: 1px solid var(--ne-glass-border, rgba(255, 255, 255, 0.08));
overflow-x: hidden;
overflow-y: auto;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ne-transition-fast), visibility 0s linear var(--ne-transition-fast);
}
.ne-header--mm-sub-flyout .ne-header__megamenu-group--flyout:hover > .ne-header__megamenu-list,
.ne-header--mm-sub-flyout .ne-header__megamenu-group--flyout:focus-within > .ne-header__megamenu-list {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition-delay: 0s;
}
.ne-header__megamenu-link {
display: block;
padding: var(--ne-space-2);
border-radius: var(--ne-radius-md);
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text-muted);
text-decoration: none;
transition: all var(--ne-transition-fast);
line-height: 1.4;
position: relative;
}
.ne-header__megamenu-link:hover {
color: var(--ne-scheme-text);
background: var(--ne-glass-bg-hover, rgba(255,255,255,0.06));
transform: translateX(2px);
}
/* Sub-link visual variants */
.ne-header__megamenu-links--pill .ne-header__megamenu-link {
display: inline-block;
padding: var(--ne-space-1) var(--ne-space-3);
border-radius: var(--ne-radius-full);
background: var(--ne-glass-bg, rgba(255,255,255,0.06));
border: 0 solid var(--ne-glass-border, rgba(255, 255, 255, 0));
}
.ne-header__megamenu-links--pill .ne-header__megamenu-link:hover {
transform: none;
background: var(--ne-glass-bg-hover, rgba(255,255,255,0.12));
border-color: var(--ne-scheme-accent);
}
.ne-header__megamenu-links--pill .ne-header__megamenu-list {
flex-direction: row;
flex-wrap: wrap;
gap: var(--ne-space-1);
}
.ne-header__megamenu-links--underline .ne-header__megamenu-link {
background: transparent;
}
.ne-header__megamenu-links--underline .ne-header__megamenu-link::after {
content: '';
position: absolute;
left: var(--ne-space-2);
right: var(--ne-space-2);
bottom: var(--ne-space-1);
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: left;
transition: transform var(--ne-transition-fast);
}
.ne-header__megamenu-links--underline .ne-header__megamenu-link:hover {
background: transparent;
transform: none;
color: var(--ne-scheme-accent);
}
.ne-header__megamenu-links--underline .ne-header__megamenu-link:hover::after {
transform: scaleX(1);
}
/* Inline accordion — replaces cascading sub-submenus inside a
megamenu column (same UX as the drawer's nested accordions). */
.ne-header__megamenu-accordion {
min-width: 0;
}
.ne-header__megamenu-accordion > summary {
list-style: none;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ne-space-2);
padding: var(--ne-space-2);
border-radius: var(--ne-radius-md);
font-size: var(--ne-font-size-sm);
font-weight: 700;
color: var(--ne-scheme-heading, var(--ne-scheme-text));
transition: color var(--ne-transition-fast), background var(--ne-transition-fast);
}
.ne-header__megamenu-accordion > summary::-webkit-details-marker { display: none; }
.ne-header__megamenu-accordion > summary:hover {
color: var(--ne-scheme-accent);
background: var(--ne-glass-bg-hover, rgba(255,255,255,0.06));
}
.ne-header__megamenu-accordion-chevron {
flex: 0 0 auto;
transition: transform var(--ne-transition-fast);
}
.ne-header__megamenu-accordion[open] > summary .ne-header__megamenu-accordion-chevron {
transform: rotate(180deg);
}
.ne-header__megamenu-accordion-content {
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--ne-space-1) 0 var(--ne-space-2) var(--ne-space-3);
margin-left: var(--ne-space-1);
border-left: 1px solid var(--ne-glass-border, rgba(255, 255, 255, 0));
}
.ne-header__megamenu-accordion-link {
display: block;
padding: var(--ne-space-1) var(--ne-space-2);
border-radius: var(--ne-radius-sm);
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text-muted);
text-decoration: none;
line-height: 1.4;
transition: color var(--ne-transition-fast), background var(--ne-transition-fast), transform var(--ne-transition-fast);
}
.ne-header__megamenu-accordion-link:hover {
color: var(--ne-scheme-text);
background: var(--ne-glass-bg-hover, rgba(255,255,255,0.06));
transform: translateX(2px);
}
.ne-header__megamenu-accordion-link--view-all {
color: var(--ne-scheme-accent);
font-weight: 600;
}
/* Synthesized megamenu (no megamenu_link block, upgraded from plain dropdown).
Plain dropdowns that get promoted in "global mega mode" put the original
.ne-header__dropdown-item rows directly into the CSS-columns links slot.
Give those rows the same visual language as the accordion-link inside a
mega (subtle padded row with hover tint), so the look is consistent
across a panel that mixes accordionized and non-accordion items. */
.ne-header__megamenu--synthetic .ne-header__megamenu-links > .ne-header__dropdown-item {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
margin-bottom: 2px;
}
.ne-header__megamenu--synthetic .ne-header__megamenu-links > .ne-header__dropdown-item > .ne-header__dropdown-link {
display: block;
padding: var(--ne-space-2);
border-radius: var(--ne-radius-md);
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text-muted);
text-decoration: none;
}
.ne-header__megamenu--synthetic .ne-header__megamenu-links > .ne-header__dropdown-item > .ne-header__dropdown-link:hover {
color: var(--ne-scheme-text);
background: var(--ne-glass-bg-hover, rgba(255,255,255,0.06));
}
/* More-as-megamenu: the overflow panel matches the full content-width of
other megamenus so More visually reads as "another megamenu slot" rather
than a narrow dropdown. Cloned .ne-header__nav-item--more-child rows keep
their existing stacking layout inside the mega-links slot.
Width + position inherit from the base .ne-header__megamenu rules. */
.ne-header__megamenu--more .ne-header__megamenu-links > .ne-header__nav-item--more-child {
break-inside: avoid;
-webkit-column-break-inside: avoid;
page-break-inside: avoid;
}
/* The cloned More-child carries a nav-LINK (pill button) whose label is laid
out with justify-content:space-between → the text drifted to the middle of
the wide mega row (user 2026-07-02). Inside a mega, read it as a left-aligned
column heading like every other mega row. */
.ne-header__megamenu--more .ne-header__nav-item--more-child > .ne-header__nav-link {
justify-content: flex-start;
text-align: left;
}
/* ==========================================================================
HEADER - BUTTON MENU (dropdown_style = buttons)
--------------------------------------------------------------------------
Variant of the classic dropdown that cascades right as columns of
independent buttons. Buttons carry the same `.ne-header__nav-link--btn`
classes as the top-level nav so shape / 3d depth / glass / glow / shadow
header effects apply 1:1 without re-declaration.
Grid geometry:
- Connector: L-curve on the trigger itself, from trigger-bottom-center
down+left to the column's trunk top.
- Trunk: vertical line at the column's left edge (x = 0 of buttons).
- Branches: horizontal line at each button's top (between siblings).
- Bottom cap: extra branch under the LAST button so the grid closes.
Z-index: the open nav-item is lifted above the header surface so the
connector + trunk render over the header bg, not behind it.
========================================================================== */
.ne-header__btn-menu {
position: absolute;
top: calc(100% + var(--ne-header-dropdown-gap, 10px));
left: 0;
z-index: 1000;
isolation: isolate;
display: flex;
flex-direction: row;
align-items: flex-start;
gap: var(--ne-btn-menu-col-gap, 22px);
padding: 0;
background: transparent;
border: none;
box-shadow: none;
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ne-transition-base), visibility 0s var(--ne-transition-base);
--ne-btn-menu-dur: 200ms;
--ne-btn-menu-line-dur: 180ms;
--ne-btn-menu-col-gap: 22px;
--ne-btn-menu-row-gap: 6px;
color: var(--ne-scheme-text);
}
/* Lift nav-item above header bg while open so connector + trunk render in
front of .ne-header__bg / glass / shadow layers. */
.ne-header--btn-menu .ne-header__nav-item--has-dropdown {
position: relative;
}
.ne-header--btn-menu .ne-header__nav-item--has-dropdown:hover,
.ne-header--btn-menu .ne-header__nav-item--has-dropdown:focus-within,
.ne-header--btn-menu .ne-header__nav-item--has-dropdown.is-open {
z-index: 1001;
}
/* Invisible hover-bridge so the cursor can cross from trigger into menu. */
.ne-header__btn-menu::after {
content: '';
position: absolute;
left: 0;
right: 0;
top: calc(-1 * (var(--ne-header-dropdown-gap, 10px) + 4px));
height: calc(var(--ne-header-dropdown-gap, 10px) + 4px);
background: transparent;
pointer-events: auto;
}
/* Open state — asymmetric opacity transition (Rule 236) snaps opacity to 1
instantly on open. Individual buttons inside have backdrop-filter (when
nav_btn_glass on), and an opacity fade on the wrapper would force a
backdrop-recompute per frame → "bloom-in-late" effect where blur appears
delayed during the open animation. Snap-on-open lets backdrop render at
full strength frame-1; fade-on-close (defined in base rule above) gives
the visual outro without the bloom artifact. Visibility flips with 0s
delay on both directions so the element is interactive immediately. */
.ne-header__nav-item:hover > .ne-header__btn-menu,
.ne-header__nav-item:focus-within > .ne-header__btn-menu,
.ne-header__nav-item.is-open > .ne-header__btn-menu {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity 0s linear 0s, visibility 0s linear 0s;
}
/* Flip to the left when viewport-overflow is detected (toggled by JS). */
.ne-header__btn-menu.ne-header__btn-menu--flip-left {
left: auto;
right: 0;
}
/* Root panel opens UPWARD when the header sits low (open-up), mirroring the
panel dropdown — the btn-menu had no open-up so it clipped the viewport
bottom (user 2026-06-23). Bridge flips to the lower edge too. */
.ne-header--open-up .ne-header__btn-menu {
top: auto;
bottom: calc(100% + var(--ne-header-dropdown-gap, 10px));
}
.ne-header--open-up .ne-header__btn-menu::after {
top: auto;
bottom: calc(-1 * (var(--ne-header-dropdown-gap, 10px) + 4px));
}
/* Long button labels truncate with an ellipsis (parity with panel dropdown). */
.ne-header__btn-menu__label {
display: block;
max-width: 240px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.ne-header__btn-menu__col {
position: relative;
list-style: none;
margin: 0;
padding: 0;
display: inline-flex;
flex-direction: column;
align-items: stretch;
gap: var(--ne-btn-menu-row-gap, 6px);
min-width: max-content;
}
/* Sub-columns open rightward next to their parent item. */
.ne-header__btn-menu__col--sub {
position: absolute;
top: 0;
left: calc(100% + var(--ne-btn-menu-col-gap, 22px));
opacity: 0;
visibility: hidden;
pointer-events: none;
transition: opacity var(--ne-transition-base), visibility 0s var(--ne-transition-base);
}
.ne-header__btn-menu__item:hover > .ne-header__btn-menu__col--sub,
.ne-header__btn-menu__item:focus-within > .ne-header__btn-menu__col--sub {
opacity: 1;
visibility: visible;
pointer-events: auto;
transition: opacity var(--ne-transition-base), visibility 0s 0s;
}
.ne-header__btn-menu--flip-left .ne-header__btn-menu__col--sub {
left: auto;
right: calc(100% + var(--ne-btn-menu-col-gap, 22px));
}
/* Sub-column vertical viewport flip (JS toggles --up / --cap) — a bottom item's
sub-column ran off the screen bottom (user 2026-06-23). --up anchors the
bottom (opens upward); --cap limits height + scrolls when it fits neither. */
.ne-header__btn-menu__col--sub.ne-header__btn-menu__col--up {
top: auto;
bottom: 0;
}
.ne-header__btn-menu__col--sub.ne-header__btn-menu__col--cap {
max-height: var(--ne-bm-col-maxh, 70vh);
overflow-y: auto;
overflow-x: hidden;
}
.ne-header__btn-menu__item {
position: relative;
margin: 0;
padding: 0;
list-style: none;
}
/* Base button. Stagger uses ONLY opacity (no transform) so it can coexist
with the 3D-depth rule's translateY(-1px) !important without fighting.
When show_bg=true the snippet adds .ne-header__nav-link--btn + the shape
class so 3d / glass / glow / shadow header effects apply verbatim. */
.ne-header__btn-menu__btn {
position: relative;
display: inline-flex;
align-items: center;
/* Center button-menu items horizontally — distinct from regular
dropdown which keeps left-aligned text. The chevron (when present
for has-submenu items) still anchors via the parent flex but the
label sits centered. User request 2026-05-23. */
justify-content: center;
text-align: center;
gap: var(--ne-space-2);
width: 100%;
min-width: 100%;
font-family: var(--ne-header-nav--family, inherit);
font-weight: var(--ne-header-nav--weight, 500);
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text);
text-decoration: none;
white-space: nowrap;
opacity: 0;
transition:
opacity var(--ne-btn-menu-dur, 200ms) ease,
color var(--ne-transition-fast),
background-color var(--ne-transition-fast);
transition-delay: calc(var(--i, 0) * var(--ne-btn-menu-speed, 50ms));
}
/* Plain-label mode (show_bg=false). Transparent shell, no shape.
Inherits centered justify from base rule above. */
.ne-header__btn-menu__btn:not(.ne-header__btn-menu__btn--bg) {
background: transparent;
border: 0;
padding: 6px 0;
min-width: 0;
}
.ne-header__btn-menu__btn:not(.ne-header__btn-menu__btn--bg):hover,
.ne-header__btn-menu__btn:not(.ne-header__btn-menu__btn--bg):focus-visible {
color: var(--ne-scheme-accent);
}
/* Button-bg mode — fallback paint ONLY when no shape class is present.
When nav_button_style != 'none', the snippet adds .ne-header__nav-link--btn
+ shape class, which already paints everything (bg / border / radius /
padding / 3d / glass / glow / shadow). The :not() gate keeps our fallback
from double-painting a border on top of top-nav rules. */
.ne-header__btn-menu__btn--bg:not(.ne-header__nav-link--btn) {
background-color: var(--ne-scheme-btn-bg, transparent);
color: var(--ne-scheme-btn-text, var(--ne-scheme-text));
border: 0;
border-radius: var(--ne-radius-md, 6px);
padding: 0 var(--ne-space-3);
min-height: var(--ne-header-btn-height, 36px);
}
.ne-header__btn-menu__btn--bg:not(.ne-header__nav-link--btn):hover,
.ne-header__btn-menu__btn--bg:not(.ne-header__nav-link--btn):focus-visible {
background-color: var(--ne-scheme-btn-bg-hover, var(--ne-glass-bg-hover, rgba(255, 255, 255, 0.14)));
color: var(--ne-scheme-btn-text-hover, var(--ne-scheme-accent));
}
/* Hover-bridge — invisible pseudo covering the gap zone between the trigger
and the first button row so the cursor can traverse without losing :hover
on the nav-item. Pseudo is an abs-pos child of the dropdown (which itself
is abs-pos inside .ne-header__nav-item), so hovering it counts as hovering
the ancestor nav-item. */
.ne-header__btn-menu::before {
content: '';
position: absolute;
top: calc(-1 * var(--ne-header-dropdown-gap, 10px));
left: 0;
right: 0;
height: var(--ne-header-dropdown-gap, 10px);
z-index: -1;
}
/* Sidebar variant — bridge sits on the leading edge instead of the top. */
.ne-header--left .ne-header__btn-menu::before,
.ne-header--right .ne-header__btn-menu::before {
top: 0;
bottom: 0;
height: auto;
width: var(--ne-space-3, 12px);
}
.ne-header--left .ne-header__btn-menu::before {
left: calc(-1 * var(--ne-space-3, 12px));
right: auto;
}
.ne-header--right .ne-header__btn-menu::before {
right: calc(-1 * var(--ne-space-3, 12px));
left: auto;
}
/* Submenu bridge — extends hit-area across the column-gap so cursor keeps
:hover on the parent item while moving into the sub-column. Flip variant
mirrors the bridge to the opposite side. */
.ne-header__btn-menu__col--sub::before {
content: '';
position: absolute;
top: 0;
bottom: 0;
left: calc(-1 * var(--ne-btn-menu-col-gap, 22px));
width: var(--ne-btn-menu-col-gap, 22px);
z-index: -1;
}
.ne-header__btn-menu--flip-left .ne-header__btn-menu__col--sub::before,
.ne-header__btn-menu__item--flip-left > .ne-header__btn-menu__col--sub::before {
left: auto;
right: calc(-1 * var(--ne-btn-menu-col-gap, 22px));
}
/* Glass propagation — add blur to dropdown buttons so they match the
header's glass look. Split by shape:
- Shape-based (pill / rounded / square): KEEP the top-nav's
--ne-header-btn-bg (user's configured color + opacity). Only the
backdrop-filter is added so the button stays recognizable.
- No-shape fallback (nav_button_style='none'): full glass makeover
(translucent --ne-glass-bg + border + blur). */
.ne-header.ne-glass .ne-header__btn-menu__btn--bg {
backdrop-filter: blur(var(--ne-glass-blur, 12px)) saturate(1.2);
-webkit-backdrop-filter: blur(var(--ne-glass-blur, 12px)) saturate(1.2);
}
.ne-header.ne-glass .ne-header__btn-menu__btn--bg:not(.ne-header__nav-link--btn) {
background-color: var(--ne-glass-bg, rgba(255, 255, 255, 0.08));
border: 0 solid var(--ne-glass-border, rgba(255, 255, 255, 0));
}
.ne-header.ne-glass .ne-header__btn-menu__btn--bg:not(.ne-header__nav-link--btn):hover,
.ne-header.ne-glass .ne-header__btn-menu__btn--bg:not(.ne-header__nav-link--btn):focus-visible {
background-color: var(--ne-glass-bg-hover, rgba(255, 255, 255, 0.16));
border-color: var(--ne-glass-border-hover, var(--ne-glass-border, rgba(255, 255, 255, 0)));
}
.ne-header__btn-menu__chevron {
flex: 0 0 auto;
opacity: 0.7;
}
/* Custom-scheme propagation. Keep --ne-header-btn-bg (user's menu setting)
for the button fill so visual intent stays consistent; override text +
border + hover-accent via the scheme tokens. */
.ne-header__btn-menu[class*="color-scheme-"] {
background: transparent;
color: var(--ne-scheme-text);
}
.ne-header__btn-menu[class*="color-scheme-"] .ne-header__btn-menu__btn {
color: var(--ne-scheme-text);
}
.ne-header__btn-menu[class*="color-scheme-"] .ne-header__btn-menu__btn--bg {
border-color: var(--ne-scheme-border, transparent);
}
.ne-header__btn-menu[class*="color-scheme-"] .ne-header__btn-menu__btn:hover,
.ne-header__btn-menu[class*="color-scheme-"] .ne-header__btn-menu__btn:focus-visible {
color: var(--ne-scheme-accent);
}
/* Stagger reveal: each button fades in via a keyframe ANIMATION (not a
transition) when its hosting column opens. Animation beats transition
here because the wrapper snaps visibility:hidden→visible (anti-bloom),
which starves a transition of its baseline; a keyframe fires regardless.
Reveal is opacity-only so it coexists with the nav_btn_3d transform.
animation-delay = --i × speed → top-to-bottom cascade across ALL animated
modes (fade/slide/scale). The trailing opacity:1 is the resting value the
none-mode override (animation:none) falls back to. */
.ne-header__nav-item:hover > .ne-header__btn-menu .ne-header__btn-menu__col > .ne-header__btn-menu__item > .ne-header__btn-menu__btn,
.ne-header__nav-item:focus-within > .ne-header__btn-menu .ne-header__btn-menu__col > .ne-header__btn-menu__item > .ne-header__btn-menu__btn,
.ne-header__nav-item.is-open > .ne-header__btn-menu .ne-header__btn-menu__col > .ne-header__btn-menu__item > .ne-header__btn-menu__btn {
opacity: 1;
animation: ne-btn-menu-item-in var(--ne-btn-menu-item-dur, 300ms) ease-out both;
animation-delay: calc(var(--i, 0) * var(--ne-btn-menu-speed, 50ms));
}
.ne-header__btn-menu__item:hover > .ne-header__btn-menu__col--sub > .ne-header__btn-menu__item > .ne-header__btn-menu__btn,
.ne-header__btn-menu__item:focus-within > .ne-header__btn-menu__col--sub > .ne-header__btn-menu__item > .ne-header__btn-menu__btn {
opacity: 1;
animation: ne-btn-menu-item-in var(--ne-btn-menu-item-dur, 300ms) ease-out both;
animation-delay: calc(var(--i, 0) * var(--ne-btn-menu-speed, 50ms));
}
@keyframes ne-btn-menu-item-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Per-level sub-column flip — JS adds this when a specific sub-column's
right edge overflows the viewport. */
.ne-header__btn-menu__col--sub.ne-header__btn-menu__col--flip-left {
left: auto;
right: calc(100% + var(--ne-btn-menu-col-gap, 22px));
}
/* Sidebar-header variants (.ne-header--left / .ne-header--right) — the
menu opens beside the trigger, vertically centered so it aligns with
icon-nav items. */
.ne-header--left .ne-header__nav-item > .ne-header__btn-menu {
top: 50%;
left: calc(100% + var(--ne-space-3));
transform: translateY(-50%);
}
.ne-header--right .ne-header__nav-item > .ne-header__btn-menu {
top: 50%;
left: auto;
right: calc(100% + var(--ne-space-3));
transform: translateY(-50%);
}
.ne-header--right .ne-header__nav-item > .ne-header__btn-menu .ne-header__btn-menu__col--sub {
left: auto;
right: calc(100% + var(--ne-btn-menu-col-gap, 22px));
}
.ne-header__megamenu-aside {
min-width: 240px;
}
/* Products grid: columns = --ne-mm-aside-cols (1..4), aside uses intrinsic width */
.ne-header__megamenu-aside--products {
display: grid;
grid-template-columns: repeat(var(--ne-mm-aside-cols, 2), minmax(140px, 180px));
gap: var(--ne-space-3);
}
.ne-header__megamenu-product {
display: flex;
flex-direction: column;
gap: var(--ne-space-2);
text-decoration: none;
color: inherit;
transition: transform var(--ne-transition-fast);
overflow: hidden;
}
.ne-header__megamenu-product:hover {
transform: translateY(-2px);
}
.ne-header__megamenu-product-img {
width: 100%;
/* Per-block override (megamenu_link → Image aspect ratio); square default. */
aspect-ratio: var(--ne-mm-product-aspect, 1 / 1);
object-fit: cover;
/* Per-block override (megamenu_link → Image corner radius); falls back to
the theme's medium radius when the block hasn't published the var. */
border-radius: var(--ne-mm-product-radius, var(--ne-radius-md));
display: block;
transition: transform var(--ne-transition-slow, 0.4s);
}
.ne-header__megamenu-product:hover .ne-header__megamenu-product-img {
transform: scale(1.04);
}
.ne-header__megamenu-product-body {
display: flex;
flex-direction: column;
gap: 2px;
}
.ne-header__megamenu-product-title {
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text, var(--ne-scheme-text));
line-height: 1.3;
}
.ne-header__megamenu-product-price {
font-size: var(--ne-font-size-xs);
color: var(--ne-scheme-text-muted);
font-weight: 600;
}
.ne-header__megamenu-product-price s {
opacity: 0.6;
margin-right: var(--ne-space-1);
color: var(--ne-scheme-text-muted);
}
/* Aside promo variant: single promo tile, fixed width so layout stays stable */
.ne-header__megamenu-aside--promo {
width: 280px;
max-width: 100%;
}
/* Promo tile: image + body stacked. Image uses aspect-ratio to stay consistent across breakpoints. */
.ne-header__megamenu-promo {
position: relative;
display: flex;
flex-direction: column;
overflow: hidden;
border-radius: var(--ne-radius-lg);
border: 0 solid var(--ne-glass-border, rgba(255, 255, 255, 0));
background: var(--ne-glass-bg, rgba(255,255,255,0.04));
text-decoration: none;
transition: transform var(--ne-transition-base), box-shadow var(--ne-transition-base);
min-height: 200px;
}
.ne-header__megamenu-promo:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,0.3), 0 0 0 1px var(--ne-scheme-accent-glow, rgba(99,102,241,0.2));
}
.ne-header__megamenu-promo-img {
width: 100%;
aspect-ratio: 3 / 2;
object-fit: cover;
display: block;
transition: transform var(--ne-transition-slow, 0.4s);
}
/* Per-block aspect-ratio modifiers (schema: promo_aspect_ratio) */
.ne-header__megamenu-promo--ratio-square .ne-header__megamenu-promo-img { aspect-ratio: 1 / 1; }
.ne-header__megamenu-promo--ratio-portrait .ne-header__megamenu-promo-img { aspect-ratio: 4 / 5; }
.ne-header__megamenu-promo--ratio-tall .ne-header__megamenu-promo-img { aspect-ratio: 2 / 3; }
.ne-header__megamenu-promo--ratio-landscape .ne-header__megamenu-promo-img { aspect-ratio: 4 / 3; }
.ne-header__megamenu-promo--ratio-wide .ne-header__megamenu-promo-img { aspect-ratio: 16 / 9; }
.ne-header__megamenu-promo--ratio-adapt .ne-header__megamenu-promo-img { aspect-ratio: auto; }
.ne-header__megamenu-promo:hover .ne-header__megamenu-promo-img {
transform: scale(1.04);
}
.ne-header__megamenu-promo-body {
display: flex;
flex-direction: column;
gap: var(--ne-space-1);
padding: var(--ne-space-3);
}
.ne-header__megamenu-promo-eyebrow {
font-size: var(--ne-font-size-xs);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--ne-scheme-accent);
}
.ne-header__megamenu-promo-heading {
font-size: var(--ne-font-size-lg);
font-weight: 700;
color: var(--ne-scheme-heading, var(--ne-scheme-text));
line-height: 1.2;
}
.ne-header__megamenu-promo-sub {
font-size: var(--ne-font-size-sm);
color: var(--ne-scheme-text-muted);
line-height: 1.4;
}
.ne-header__megamenu-promo-btn {
display: inline-flex;
align-items: center;
gap: var(--ne-space-1);
margin-top: var(--ne-space-1);
font-size: var(--ne-font-size-sm);
font-weight: 600;
color: var(--ne-scheme-accent);
transition: gap var(--ne-transition-fast);
}
.ne-header__megamenu-promo:hover .ne-header__megamenu-promo-btn { gap: var(--ne-space-2); }
/* ==========================================================================
HEADER - ACTIONS
========================================================================== */
.ne-header__actions {
display: flex;
align-items: center;
/* Same gap token as nav so the menu setting drives both — merchant
configures one value to control spacing across all header buttons. */
gap: var(--ne-header-nav-gap, var(--ne-space-2));
}
/* Specificity 0,2,0 beats a:not(.ne-btn) (0,1,1) — without this,