/* =============================================================
NYCL Product Skin — v2 container style experiment
Loaded ONLY on nycl-woven-labels-skin-test-v2.html
(body has class `nycl-v2-exp`).
GOAL: Port the homepage / category "dark card with lime title +
lavender eyebrow tag" design language to the on-page trust
containers (Fastest Turnaround / Fast Approval Process), and
any other container we want to align to the same family.
Brand tokens (from nycl-homepage-v1.1.html .nycl-products):
--nycl-card-bg: #0e0e0e (deep near-black)
--nycl-card-border: #444 (2px subtle grey stroke)
--nycl-accent-lime: #c8f542 (titles, accents)
--nycl-accent-lav: #e5c6ff (eyebrow tag bg)
--nycl-body-on-dark: #bbb (body text on dark)
============================================================= */
/* Align the top of the product image (.product.media) with the top of the
H1+pills row by pulling it up 81px. The pills are inside the title-wrapper
on the left, and the right column where the image sits is otherwise empty
in that row — so the overlap is safe. */
@media (min-width: 1025px) {
body.nycl.nycl-v2-exp .product-info-main > .product.media {
margin-top: -49px !important;
}
/* When the H1 logos wrap to their own row, the title-wrapper grows taller
and the floated product image would otherwise drop with them. Pull the
image up by the extra logo-row height (--h1logo-row-h, set by the
companion JS on .product-info-main) so the image TOP stays aligned with
the H1 top regardless of logo wrap. */
body.nycl.nycl-v2-exp .product-info-main > .page-title-wrapper.product.h1-logos-wrapped + .product.media {
margin-top: calc(-49px - var(--h1logo-row-h, 0px)) !important;
}
}
/* ============================================================
FROSTED STUDIO: MAIN product image (2026-06-22)
Thin light-grey 1px #e5e7eb stroke, no drop shadow (matches info pills /
EOP). Thumbnail strokes/states are handled at their canonical rules below
(search .mt-thumb-switcher img).
============================================================ */
body.nycl.nycl-v2-exp .product.media #mtImageContainer img,
body.nycl.nycl-v2-exp .product.media .mz-figure img {
border: 1px solid #e5e7eb !important;
box-shadow: none !important;
}
/* ------------------------------------------------------------------
GREY DROP SHADOW on main image + thumbnails (Myles 2026-07-02).
The MagicZoom/MagicToolbox library applies a lime green (#d9f644)
border-bottom on the active .MagicZoom and selected .mt-thumb-switcher
(its default "selected" affordance). Override that green underline with
a normal neutral-grey drop shadow instead. Scoped to desktop-and-up feel
but applied at all widths on the media element; harmless on mobile. */
body.nycl.nycl-v2-exp .product.media .MagicZoom,
body.nycl.nycl-v2-exp .product.media .mz-figure {
border-bottom: 0 !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.15) !important;
}
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher.active-selector,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher.mz-thumb-selected {
border-bottom: 0 !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}
/* Above 768px, shrink the large product image (now 284px) so the rest
of the top section (description text, EOP, pills) gets more room to expand. */
@media (min-width: 769px) {
body.nycl.nycl-v2-exp .product-info-main > .product.media,
body.nycl.nycl-v2-exp .product.media .MagicZoom,
body.nycl.nycl-v2-exp .product.media .mz-figure,
body.nycl.nycl-v2-exp .product.media #mtImageContainer {
width: 284px !important;
max-width: 284px !important;
}
body.nycl.nycl-v2-exp .product.media .mz-figure,
body.nycl.nycl-v2-exp .product.media .mz-figure img,
body.nycl.nycl-v2-exp .product.media #mtImageContainer img {
height: auto !important;
}
}
/* ---------- Image carousel thumbnails (SINGLE SCROLLABLE ROW) ----------
A single horizontal strip of thumbnails directly under the main product
image, with modern left/right scroll arrows that overlay the edges and
fade in only when there is more to scroll in that direction.
DOM: .MagicToolboxSelectorsContainer > .MagicScroll (the scroll viewport),
thumbs are .mt-thumb-switcher anchors (direct children of .MagicScroll on
this proto; MagicScroll may also wrap them in .mcs-wrapper/.mcs-items-
container/.mcs-item — both layouts are flattened to one flex row below).
Companion JS injects .pdp-thumb-arrow buttons and toggles edge classes.
CLS PREVENTION: reserve a fixed row height (min-height) so the strip does
not cause layout shift when thumbs paint. Thumbs render immediately with the
page (no opacity gate) to match QWL speed — the earlier opacity:0 +
.pdp-thumbs-ready fade was a 4s worst-case reveal delay (MagicScroll never
cleanly stabilized 3 poll ticks, so it always hit the ceiling). Removed
2026-07-02. Dedupe observer still runs as a harmless safety net. */
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer {
position: relative !important;
height: auto !important;
min-height: 72px !important;
max-height: none !important;
overflow: visible !important;
margin-top: 12px !important;
width: 100% !important;
opacity: 1 !important;
contain: layout !important;
}
/* The scroll viewport: one nowrap flex row, horizontal scroll, snap. */
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .MagicScroll {
height: auto !important;
min-height: 0 !important;
display: flex !important;
flex-wrap: nowrap !important;
align-items: center !important;
gap: 8px !important;
overflow-x: auto !important;
overflow-y: hidden !important;
width: 100% !important;
max-width: 100% !important;
scroll-behavior: smooth !important;
scroll-snap-type: x proximity !important;
-webkit-overflow-scrolling: touch !important;
/* Extra padding so the thumbnails' grey drop shadow has room to render
inside the horizontal scroller before overflow clips it (Myles
2026-07-02: grey shadow on thumbs across all sizes). */
padding: 6px 6px 12px !important;
scrollbar-width: none !important; /* Firefox: hide native bar */
-ms-overflow-style: none !important; /* old Edge */
}
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .MagicScroll::-webkit-scrollbar {
display: none !important; /* WebKit: hide native bar */
}
/* Flatten MagicScroll's optional wrappers into the same flex row. */
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-wrapper,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-items-container {
position: static !important;
transform: none !important;
display: contents !important; /* children join the flex row */
width: auto !important;
height: auto !important;
max-width: none !important;
min-width: 0 !important;
white-space: nowrap !important;
inset: auto !important;
}
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-item[data-pdp-dup] {
display: none !important;
}
/* Each thumbnail: fixed square cell, snap to start, no shrink. */
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .MagicScroll > .mt-thumb-switcher,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-item,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-item > .mt-thumb-switcher {
flex: 0 0 auto !important;
width: 64px !important;
height: 64px !important;
min-width: 64px !important;
min-height: 64px !important;
max-height: 64px !important;
margin: 0 !important;
padding: 0 !important;
display: block !important;
overflow: hidden !important;
scroll-snap-align: start !important;
aspect-ratio: 1 / 1 !important;
}
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-item {
vertical-align: top !important;
}
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher {
line-height: 0 !important;
font-size: 0 !important;
border-radius: 6px !important;
cursor: pointer !important;
}
/* Match the thumbnails' 6px corner radius on the LARGE product image too. */
body.nycl.nycl-v2-exp .product.media .MagicZoom,
body.nycl.nycl-v2-exp .product.media .mz-figure,
body.nycl.nycl-v2-exp .product.media .mz-figure img,
body.nycl.nycl-v2-exp .product.media #mtImageContainer img {
border-radius: 6px !important;
overflow: hidden !important;
}
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher img {
display: block !important;
width: 100% !important;
height: 100% !important;
min-width: 0 !important;
min-height: 0 !important;
object-fit: cover !important;
/* Thin light-grey stroke only (matches info pills / EOP). No shadow. */
border: 1px solid #e5e7eb !important;
box-shadow: none !important;
border-radius: 6px !important;
box-sizing: border-box !important;
padding: 0 !important;
margin: 0 !important;
vertical-align: top !important;
transition: border-color 0.15s ease !important;
}
/* All thumb states keep the SAME thin grey stroke — no lime, no 2px, no
shadow (Myles: omit the green "drop shadow", grey stroke only). */
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher:hover img,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher.mz-thumb-selected img,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mt-thumb-switcher.active-selector img {
border: 1px solid #e5e7eb !important;
border-color: #e5e7eb !important;
border-width: 1px !important;
box-shadow: none !important;
}
/* Kill MagicScroll's own arrow buttons — we use our own .pdp-thumb-arrow. */
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-button-arrow,
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer .mcs-button {
display: none !important;
}
/* ----- Modern left/right scroll arrows (injected by companion JS) ----- */
body.nycl.nycl-v2-exp .pdp-thumb-strip {
position: relative !important;
width: 100% !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-arrow {
position: absolute !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 5 !important;
width: 32px !important;
height: 32px !important;
border-radius: 50% !important;
border: 1px solid rgba(0, 0, 0, 0.08) !important;
background: #fff !important;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
cursor: pointer !important;
padding: 0 !important;
color: #1d1d1d !important;
font-size: 14px !important;
line-height: 1 !important;
opacity: 0 !important;
pointer-events: none !important;
transition: opacity 0.18s ease, background 0.15s ease, transform 0.1s ease !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-arrow.is-visible {
opacity: 1 !important;
pointer-events: auto !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-arrow:hover {
background: var(--nycl-accent, #c8f542) !important;
border-color: var(--nycl-accent, #c8f542) !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-arrow:active {
transform: translateY(-50%) scale(0.92) !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-arrow--prev { left: -6px !important; }
body.nycl.nycl-v2-exp .pdp-thumb-arrow--next { right: -6px !important; }
/* Soft edge fades that show only when content overflows that side. */
body.nycl.nycl-v2-exp .pdp-thumb-strip::before,
body.nycl.nycl-v2-exp .pdp-thumb-strip::after {
content: "" !important;
position: absolute !important;
top: 0 !important;
bottom: 8px !important;
width: 36px !important;
z-index: 4 !important;
pointer-events: none !important;
opacity: 0 !important;
transition: opacity 0.18s ease !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-strip::before {
/* Extend 1px past the edge + anchor solid white a touch wider so the fade
fully covers the clipped thumbnail's last pixel column (no edge sliver). */
left: -1px !important;
width: 40px !important;
background: linear-gradient(to right, #fff 0, #fff 20%, rgba(255,255,255,0)) !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-strip::after {
/* Extend 1px past the right edge + wider solid-white anchor. Fixes the thin
bright vertical sliver where the fade left the clipped last thumbnail's
rightmost pixel uncovered on tablet/mobile (Myles 2026-07-02). */
right: -1px !important;
width: 40px !important;
background: linear-gradient(to left, #fff 0, #fff 20%, rgba(255,255,255,0)) !important;
}
body.nycl.nycl-v2-exp .pdp-thumb-strip.can-prev::before { opacity: 1 !important; }
body.nycl.nycl-v2-exp .pdp-thumb-strip.can-next::after { opacity: 1 !important; }
/* Sticky Order Summary: pin BELOW the 91px page header.
The companion JS (in v2 HTML) strips Porto's jQuery `stickem`/`stickit`
classes + watches for them being re-added — that plugin was hijacking
position/left inline and shifting the panel ~16px on scroll. With stickem
killed, plain CSS sticky works cleanly. */
@media (min-width: 1025px) {
body.nycl.nycl-v2-exp .product-add-form > form > .product-options-bottom {
top: 100px !important;
}
/* Order Summary widened to fill the right column with a BALANCED gutter on
both sides (was 360px pinned hard-right via margin-left:auto, which left a
~64px dead gap on its left and 0 on its right). Now it sits centered in the
available right-side track so margins match left & right. */
body.nycl.nycl-v2-exp .product-options-bottom {
/* Wider than the original 360px, but stays RIGHT-FLUSH (aligned under the
product image) via margin-left:auto + margin-right:0. The extra width
grows LEFTWARD into the old dead gap, so the left gutter shrinks while the
right edge keeps lining up with the image above. */
width: 400px !important;
max-width: 400px !important;
margin-left: auto !important;
margin-right: 0 !important;
}
}
/* ============================================================
FROSTED STUDIO: Order Summary card (desktop)
Adopt the same look as the option containers — charcoal 3px frame,
10px radius, soft drop shadow, and a #f0f0f0 header bar (replacing the
near-black --nycl-primary #1d1d1d "Your Quote" bar) with dark ink text.
The .box-tocart sets overflow:hidden (for internal scrollbar suppression)
so the frame goes directly on the element + the header rounds its own top
corners to match. No ::before overlay here (it'd be clipped).
============================================================ */
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart {
border: 3px solid var(--fs-hairline, #242424) !important;
border-radius: var(--fs-card-radius, 10px) !important;
box-shadow: var(--fs-shadow-rest) !important;
background: linear-gradient(180deg, var(--fs-card-grad-top) 0%, var(--fs-card-grad-bot) 60%) !important;
}
/* "Your Quote" header bar: charcoal (#242424 / --fs-hairline) + white text,
matching the option-container header bars. */
body.nycl.nycl-v2-exp .product-options-bottom .product-options-bottom-details .details.your-quote {
background: var(--fs-hairline, #242424) !important;
color: #ffffff !important;
border-top-left-radius: calc(var(--fs-card-radius, 10px) - 3px) !important;
border-top-right-radius: calc(var(--fs-card-radius, 10px) - 3px) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important; /* subtle top bevel on charcoal */
}
body.nycl.nycl-v2-exp .product-options-bottom .product-options-bottom-details .details.your-quote * {
color: #ffffff !important;
}
/* Title bar bottom stroke (was missing on the desktop summary header). */
body.nycl.nycl-v2-exp .product-options-bottom .product-options-bottom-details .details.your-quote {
border-bottom: 1px solid var(--fs-hairline, #242424) !important;
}
/* Desktop (>1024) Order Summary bar: make qty ("5 pcs") match the unit-price
and total spans, which render at 19px. qty has no inner span so its visible
text is the .qty-label — it was stuck at 16px, reading smaller than the two
prices. Force all three visible figures to 19px (Myles 2026-07-02). */
@media (min-width: 1025px) {
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .qty-label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .field.qty .qty-label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price span,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price span {
font-size: 19px !important;
}
}
/* ===== Bottom section of the Order Summary (the qty/price/cart bar) =====
Charcoal (#242424 / --fs-hairline) fill + white text, matching the
"Your Quote" header bar and the option-container header bars (top + bottom
of the summary now share one charcoal treatment). */
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset {
background-color: var(--fs-hairline, #242424) !important;
background: var(--fs-hairline, #242424) !important;
border-top: 1px solid var(--fs-hairline, #242424) !important;
}
/* Desktop (>1024) Order Summary: the charcoal .fieldset is the last child and
sits at the box's bottom. The box has a 3px border + 10px radius + transparent
bg; the square fieldset used to stop ~1 sub-pixel short of the border's inner
edge, so on first paint a hairline of the transparent box bg (page white)
showed between the border stroke and the fill — vanishing after scroll when
rasterization realigned. Round the fieldset's bottom to match the box interior
AND push it 1px past the inner bottom (clipped by the box's overflow:hidden)
so it meets the border with zero sub-pixel seam at any scroll position
(Myles 2026-07-02). */
@media (min-width: 1025px) {
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset {
border-radius: 0 0 8px 8px !important;
margin-bottom: -1px !important;
}
}
/* Flip the bar's qty / unit price / total text to white. */
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .field.qty,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .qty-label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .field.qty > .label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price,
/* The price values sit in an inner span — force the whole subtree to white
so unit price + total are legible on the charcoal bar. */
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price *,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price * {
color: #ffffff !important;
}
/* ===== ADD TO CART button: black text + icon, 3px charcoal stroke ===== */
body.nycl.nycl-v2-exp .product-options-bottom .action.tocart,
body.nycl.nycl-v2-exp .product-options-bottom .action.tocart span {
color: #000 !important;
}
body.nycl.nycl-v2-exp .product-options-bottom .action.tocart::before {
color: #000 !important;
}
body.nycl.nycl-v2-exp .product-options-bottom .action.tocart {
border: 3px solid var(--fs-hairline, #242424) !important;
}
/* Hover: brand pink (#e5c6ff, same as the step-number badges), NO movement
(override skin-v1's coral gradient + translateY lift). */
body.nycl.nycl-v2-exp .product-options-bottom .action.tocart:hover {
background: var(--vexp-accent-lav, #e5c6ff) !important;
transform: none !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
}
/* Align top of Order Summary with top of the first option card (Upload
Artwork). Each option card has margin-top:20px for inter-card spacing,
which pushed the first card 20px below the summary's top. The true first
child is a hidden ".field.area" node, so :first-of-type can't target the
first VISIBLE card — target the Upload Artwork card (.field.file) directly
to zero its top margin and line both columns up. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field.file {
margin-top: 0 !important;
}
/* Reduce dead space between the product info/thumbnails row and the
options/order-summary row below it. (Trimmed 16 -> 4 -> 2px.) */
body.nycl.nycl-v2-exp .product-add-form {
margin-top: 2px !important;
}
/* Fix sticky Order Summary on desktop.
Porto sets `overflow-x: hidden; overflow-y: auto` on html/body,
which makes them register as scroll containers and breaks position:sticky
on .product-options-bottom (it scrolls away with the page instead of
pinning at top:20px). Switch to overflow-x: clip + overflow-y: visible
so the window/HTML is the actual scrolling element and sticky binds
to the viewport as intended. */
/* Leave at its browser default (overflow: visible) so the WINDOW
keeps its normal vertical scrollbar (draggable thumb) and is the scroll
element that position:sticky binds to. We only neutralize Porto's
body-level scroll container. (Earlier this was scoped to the non-existent
`html.linux-magic` class, and a later bare-`html { overflow-x:clip;
overflow-y:visible }` attempt backfired: x:clip + y:visible is an invalid
pair that computes y to auto, turning into a scroll container and
killing the window scrollbar thumb. So: do NOT set overflow on .) */
body.nycl.nycl-v2-exp {
overflow-x: clip !important;
overflow-y: visible !important;
}
body.nycl-v2-exp {
--vexp-card-bg: #0e0e0e;
--vexp-card-border: #444; /* dark charcoal stroke (matches homepage) */
--vexp-header-bg: #2e2e2e; /* slightly lighter dark charcoal header fill */
--vexp-accent-lime: #c8f542;
--vexp-accent-lav: #e5c6ff;
--vexp-body-on-dark: #bbb;
/* ===== Frosted Studio option-card tokens (2026-06-22) ===== */
--fs-card-radius: 10px; /* matches EOP container radius */
--fs-chip-radius: 10px;
--fs-card-grad-top: #fafbff; /* faint cool gradient top */
--fs-card-grad-bot: #ffffff; /* to white at bottom */
--fs-glass-tint: #f0f0f0; /* solid light-grey header bar */
--fs-glass-rim: rgba(255,255,255,0.55); /* bright top rim of glass */
--fs-hairline: #242424; /* charcoal stroke + option header bar fill */
--fs-ink: #1d2433; /* dark text on glass */
--fs-ink-soft: #5b6472; /* secondary text */
--fs-shadow-rest: 0 1px 2px rgba(16,24,40,0.04), 0 8px 24px rgba(16,24,40,0.08);
--fs-shadow-hover: 0 2px 4px rgba(16,24,40,0.05), 0 14px 36px rgba(16,24,40,0.12);
--fs-accent: #c8f542; /* lime brand pop (premium-toned in use) */
--fs-accent-soft: rgba(200,245,66,0.32);
}
/* ---------- TOP SECTION CARD (background-only, non-invasive) ----------
We draw a white container behind the top section. JS sizes it to span
from the top of .product-info-main down to just above .product-add-form,
so the existing flex layout is untouched. */
body.nycl-v2-exp .product-info-main {
position: relative !important;
z-index: 0 !important;
padding: 24px !important;
box-sizing: border-box !important;
}
/* Exact match to homepage .nycl-info-bar__inner trust-bar container.
High-specificity selector (body.nycl.nycl-v2-exp + direct child path)
is required to beat the v1 "nuclear transparent" rule that targets
body.nycl .product-info-main > *:not(.product-add-form). */
body.nycl.nycl-v2-exp .product-info-main > .pdp-top-bg {
position: absolute !important;
/* top + height are managed by JS (sizeBg) so the card can extend up to
the header and down to wrap the order options. */
left: 0 !important;
right: 0 !important;
z-index: -1 !important;
background: #fff !important;
background-color: #fff !important;
border: 2px solid #ddd !important;
border-top: none !important; /* tucks under the header — matches homepage trust bar */
border-radius: 0 !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
pointer-events: none !important;
}
/* Inner children should NOT paint their own opaque background that would
block the card behind them. (The trust cards stay dark on purpose.) */
body.nycl-v2-exp .product-info-main > .product.attribute.overview,
body.nycl-v2-exp .product-info-main > .page-title-wrapper,
body.nycl-v2-exp .product-info-main > .product.media {
background: transparent !important;
}
/* Force inner accents to read as pure white inside the top card */
body.nycl.nycl-v2-exp .pdp-info-pill {
background: #fff !important;
border: 1px solid #e5e7eb !important; /* thin soft-grey stroke */
border-radius: 10px !important; /* gentle rounded corners */
box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04) !important;
transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
body.nycl.nycl-v2-exp .pdp-info-pill:hover {
box-shadow: 0 4px 12px rgba(16,24,40,0.10), 0 2px 4px rgba(16,24,40,0.06) !important;
transform: translateY(-1px) !important;
}
@media (max-width: 768px) {
body.nycl-v2-exp .product-info-main { padding: 16px !important; }
}
/* ---------- Manufacturer / cert logos beside the H1 ----------
4 logos (Jakob Muller, GRS, ISO, OEKO-TEX) to the right of the H1 on desktop
— where the info pills used to sit. On mobile they wrap into a row under
the H1. The title wrapper is already display:flex row align-items:center. */
body.nycl.nycl-v2-exp .page-title-wrapper.product {
/* This wrapper is its own full-width flex row (flex:0 0 100%); the H1 sits
left, logos pushed to the right. Do NOT cap width here — doing so breaks
the flex-wrap and pulls the overview/media columns up beside it. */
flex-wrap: wrap !important;
gap: 12px 20px !important;
}
body.nycl.nycl-v2-exp .pdp-h1-logos {
display: flex !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 18px !important;
margin-left: auto !important; /* push to the right of the H1 ... */
/* ...but stop before the right-side product image. The media is now
284px pulled into the top-right and overlaps this full-width
title row, so reserve that column + gap on the right. */
margin-right: 308px !important;
}
/* When the logo row wraps onto its own line below the H1, align it LEFT
(directly under the product name) instead of right. The .h1-logos-wrapped
class is toggled by the companion JS based on measured vertical position.
flex:0 0 100% forces the logos onto their own full-width row so removing
the right reserve can't pull them back up beside the H1; margin 0 +
justify-content:flex-start then left-aligns them under the title. */
body.nycl.nycl-v2-exp .page-title-wrapper.product.h1-logos-wrapped .pdp-h1-logos {
flex: 0 0 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
justify-content: flex-start !important;
}
body.nycl.nycl-v2-exp .pdp-h1-logo {
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 auto !important;
}
body.nycl.nycl-v2-exp .pdp-h1-logo img {
display: block !important;
width: auto !important;
object-fit: contain !important;
}
/* Normalize visual weight across very different aspect ratios by capping
HEIGHT (not width). Wide marks (Jakob Muller, GRS, ISO) + the square-ish
OEKO-TEX badge all read at a consistent line height. */
body.nycl.nycl-v2-exp .pdp-h1-logo--wide img {
height: 34px !important;
max-width: 150px !important;
}
body.nycl.nycl-v2-exp .pdp-h1-logo--oeko img {
height: 52px !important;
max-width: 60px !important;
}
@media (max-width: 768px) {
body.nycl.nycl-v2-exp .page-title-wrapper.product {
flex-direction: column !important;
align-items: center !important;
text-align: center !important;
}
body.nycl.nycl-v2-exp .pdp-h1-logos {
margin-left: 0 !important;
margin-right: 0 !important;
justify-content: center !important;
gap: 16px !important;
}
/* At <=768 the H1 + logos are always centered. Override the .h1-logos-
wrapped left-align rule (which has higher base specificity) so logos
stay centered for ALL sizes <=768 — including 767px where the JS may
still have the wrapped class applied. */
body.nycl.nycl-v2-exp .page-title-wrapper.product.h1-logos-wrapped .pdp-h1-logos {
justify-content: center !important;
margin-left: 0 !important;
margin-right: 0 !important;
}
/* ----- White container on mobile -----
The desktop white card is a JS-sized absolute .pdp-top-bg; that height
calc collapses on mobile (box-tocart goes position:fixed, layout differs)
so the card vanished. Paint .product-info-main white DIRECTLY on mobile
so the container persists at every size, and neutralize the JS bg so the
two don't fight. */
body.nycl.nycl-v2-exp .product-info-main {
background: #fff !important;
border: 2px solid #ddd !important;
border-radius: 0 !important;
box-shadow: 0 4px 24px rgba(0,0,0,0.08) !important;
box-sizing: border-box !important;
}
/* ----- Full-bleed the white container at <=768 -----
The grey page bg shows on the sides because the Magento wrappers
(.page-main / .column.main) carry horizontal padding that insets
.product-info-main. Zero that side padding so the white container
spans edge-to-edge (no grey gutters) and the content gets slightly
wider on small screens. Keep .product-info-main's own 16px padding
for inner breathing room. */
body.nycl.nycl-v2-exp .page-main,
body.nycl.nycl-v2-exp #maincontent.page-main,
body.nycl.nycl-v2-exp #maincontent .columns,
body.catalog-product-view.nycl-v2-exp #maincontent .columns,
body.nycl.nycl-v2-exp #maincontent .columns > .column.main {
padding-left: 0 !important;
padding-right: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
max-width: 100% !important;
}
body.nycl.nycl-v2-exp .product-info-main > .pdp-top-bg {
display: none !important;
}
/* Close the header gap on mobile so the white container touches the header
(no gap at any size). The gap = .page-main margin-top(8px) + padding-top
(16px) above the columns. Zero the TOP spacing only; keep side padding. */
body.nycl.nycl-v2-exp .page-main,
body.nycl.nycl-v2-exp #maincontent.page-main {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Thumbnail strip spacing on mobile. The main image is collapsed on mobile
(#mtImageContainer max-height:0, tap-to-expand), so .product.media is
effectively just the thumbnail row. The base v1 rule pulls it up -40px
(overlapping the Easy Order Process above) and leaves 28px below = uneven.
Give equal breathing room above and below the thumbnails. */
body.nycl.nycl-v2-exp .product-info-main > .product.media {
margin-top: 20px !important;
margin-bottom: 20px !important;
}
/* The strip's own margin/padding stacks on top of the media margin; zero it
so the .product.media margins are the single source of equal spacing. */
body.nycl.nycl-v2-exp .MagicToolboxSelectorsContainer {
margin-top: 0 !important;
margin-bottom: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* ----- Tap-a-thumbnail to show the large image (QWL-parity lightbox) -----
At <=768 the large product image is collapsed (max-height:0). The
companion JS adds .mobile-show on thumb click (and injects a close
button); these rules make the container expand on .mobile-show and
style the close (x) control. Mirrors the shipped QWL v2.2 behavior:
tap thumb -> large image appears + scrollable; tap x -> collapses. */
body.nycl.nycl-v2-exp #mtImageContainer {
max-height: 0 !important;
overflow: hidden !important;
}
body.nycl.nycl-v2-exp #mtImageContainer.mobile-show {
max-height: 800px !important;
overflow: visible !important;
position: relative !important;
}
/* Make the opened image FULL-WIDTH inside the container so it matches the
side margins of the content below. MagicZoom inset the anchor/figure/img
to ~562px (centered), leaving a gutter that pushed the close (x) off the
image edge. Force the MagicZoom anchor, figure, and the figure's direct
img to fill the container width and left-align. (2026-06-25) */
body.nycl.nycl-v2-exp #mtImageContainer.mobile-show .MagicZoom,
body.nycl.nycl-v2-exp #mtImageContainer.mobile-show .mz-figure,
body.nycl.nycl-v2-exp #mtImageContainer.mobile-show .mz-figure > img {
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
display: block !important;
}
body.nycl.nycl-v2-exp #mtImageContainer .mobile-close-btn {
display: none !important;
}
/* Hide the thumbnail-row scroll arrows at <=768px — users swipe the strip
with their finger on mobile, so the arrows are redundant. (2026-06-25) */
body.nycl.nycl-v2-exp .pdp-thumb-arrow {
display: none !important;
}
body.nycl.nycl-v2-exp #mtImageContainer.mobile-show .mobile-close-btn {
display: block !important;
position: absolute;
top: 8px;
right: 8px;
z-index: 100;
background: rgba(0,0,0,0.6);
color: #fff;
border: none;
border-radius: 50%;
width: 32px;
height: 32px;
font-size: 18px;
line-height: 32px;
text-align: center;
cursor: pointer;
}
/* Neutralize the neighbours' margins that would otherwise stack with the
media margins and make the above/below gaps unequal (overview mb:12 above,
form mt:24 below). With these zeroed, the media's 20px top/bottom margins
are the only spacing -> equal padding above and below the thumbnails. */
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview {
margin-bottom: 0 !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product-add-form {
margin-top: 0 !important;
}
/* ----- Fix option swatches on mobile -----
Desktop forces .field.choice (esp. :has(.pdp-swatch-img)) to flex-basis
25%. Inside the mobile grid that collapses non-swatch cells to 0 width
and breaks the swatch grid. Force every choice to fill its grid cell. */
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice,
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice:has(.pdp-swatch-img) {
flex: 1 1 auto !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
box-sizing: border-box !important;
}
}
/* ---------- Easy Order Process: float right of the description text --------
The EOP box sits at the top-right of the product description; paragraphs
wrap to its left. The 4-pill row then clears below everything. */
body.nycl.nycl-v2-exp .pdp-eop-float {
float: right !important;
width: 300px !important;
max-width: 42% !important;
margin: 0 0 16px 24px !important; /* gap from the wrapping text on the left */
}
/* ---------- Pills row: 4 info pills in a single full-width row ----------
Sits below the description text + EOP, clearing the float. */
body.nycl.nycl-v2-exp .pdp-pills-row {
clear: both !important;
display: block !important;
margin: 18px 0 24px !important;
}
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pills {
display: grid !important;
/* Pills hold a constant width and wrap one-by-one (4→3→2→1) as the row
narrows, instead of stretching to full width. auto-fit packs as many
fixed-width tracks as fit; minmax(195px,215px) keeps each pill ~constant
width. justify-content:start sends leftover space to the right gap so the
pills never stretch. */
grid-template-columns: repeat(auto-fit, minmax(180px, 195px)) !important;
justify-content: start !important;
grid-auto-rows: 1fr !important;
gap: 8px !important;
margin: 0 !important;
}
/* Mobile: EOP no longer floats (full width, stacks), pills 1 column. */
@media (max-width: 768px) {
body.nycl.nycl-v2-exp .pdp-eop-float {
float: none !important;
width: 100% !important;
max-width: 100% !important;
margin: 16px 0 0 0 !important; /* gap above, since it now sits below text */
}
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pills {
grid-template-columns: 1fr !important;
}
}
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pill {
display: flex !important;
align-items: center !important;
gap: 10px !important;
padding: 7px 14px !important;
white-space: normal !important; /* allow text to wrap as columns shrink rather
than overflow when row is in nowrap mode */
min-width: 0 !important;
}
/* Simplified stacked Easy Order Process (1-2-3, titles only). Now lives inside
.pdp-eop-float (floated right of the description text), so it fills that
wrapper's width. */
body.nycl.nycl-v2-exp .pdp-eop-simple {
width: 100% !important;
box-sizing: border-box !important;
display: flex !important;
flex-direction: column !important;
gap: 12px !important;
background: #fff !important; /* white card, matches pills */
color: #1d1d1d !important;
border: 1px solid #e5e7eb !important; /* thin soft-grey stroke */
border-radius: 10px !important;
box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04) !important;
padding: 16px 18px !important;
box-sizing: border-box !important;
}
body.nycl.nycl-v2-exp .pdp-eop-simple-title {
font-family: 'Archivo SemiExpanded', sans-serif !important;
font-weight: 800 !important;
font-size: 1rem !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
color: #1d1d1d !important;
margin: 0 0 2px !important;
}
body.nycl.nycl-v2-exp .pdp-eop-simple-step {
display: flex !important;
align-items: flex-start !important;
gap: 12px !important;
}
body.nycl.nycl-v2-exp .pdp-eop-simple-num {
flex: 0 0 auto !important;
width: 26px !important;
height: 26px !important;
background: #fff !important; /* white fill */
color: #1d1d1d !important;
border: 1.5px solid #1d1d1d !important; /* thin black stroke */
border-radius: 6px !important; /* rounded square, not circle */
font-weight: 700 !important;
font-size: 0.85rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
line-height: 1 !important;
margin-top: 1px !important;
}
body.nycl.nycl-v2-exp .pdp-eop-simple-body {
display: flex !important;
flex-direction: column !important;
line-height: 1.25 !important;
}
body.nycl.nycl-v2-exp .pdp-eop-simple-label {
font-size: 0.92rem !important;
font-weight: 700 !important;
color: #1d1d1d !important;
line-height: 1.2 !important;
}
body.nycl.nycl-v2-exp .pdp-eop-simple-sub {
font-size: 0.74rem !important;
font-weight: 400 !important;
color: #6b7280 !important; /* muted grey, readable on white */
line-height: 1.25 !important;
margin-top: 1px !important;
}
/* (769–992px pill override removed: the responsive auto-fit grid above now
handles every width — pills keep their width and wrap one-by-one rather than
collapsing to a single full-width column.) */
@media (max-width: 768px) {
body.nycl.nycl-v2-exp .pdp-pills-row { flex-direction: column !important; gap: 14px !important; }
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pills,
body.nycl.nycl-v2-exp .pdp-eop-simple { flex: 1 1 auto !important; width: 100% !important; }
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pills { grid-template-columns: 1fr !important; }
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pill { white-space: normal !important; }
}
/* ---------- Tablet image (769–1024px only): float top-right + lift ----------
ONLY in the tablet band do we float the product image top-right and lift it
to the H1 top. At <=768 the whole section stacks, so the image must NOT be
floated/lifted — it sits in normal flow directly under the logos. Scoping
this to min-width:769 keeps it out of the <=768 stacked layout. */
@media (min-width: 769px) and (max-width: 1024px) {
body.nycl.nycl-v2-exp .product-info-main > .product.media {
float: right !important;
width: 300px !important;
max-width: 40% !important;
margin-left: 24px !important;
/* Pull the floated image up by the full title-wrapper height so its TOP
aligns with the H1 top (the right side of the H1/logos row is empty).
--title-wrap-h is published by the companion JS; falls back to 0. */
margin-top: calc(0px - var(--title-wrap-h, 0px)) !important;
}
}
/* ---------- Tablet (<=1024px): split order summary ----------
The companion JS moves .product-options-bottom-details out of the fixed
bottom sticky and into normal flow under the quantity section (.pdp-summary
-instream). The sticky then holds only qty / unit / total / Add-to-Cart. */
@media (max-width: 1024px) {
/* (0) ANTI-FLASH GUARD: at <=1024 the summary belongs in normal flow under
the quantity section (with .pdp-summary-instream), NOT in the fixed
bottom sticky. The companion JS moves it synchronously at the 1024px
boundary (matchMedia), but as a belt-and-suspenders against any single
paint frame where the node is still inside .box-tocart before the move,
never render an un-moved summary inside the sticky bar. Only targets the
pre-move copy (still a child of .box-tocart, no instream class); the
relocated .pdp-summary-instream block is unaffected. */
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart > .product-options-bottom-details:not(.pdp-summary-instream) {
display: none !important;
}
/* (1) Options section goes full width once the summary leaves its right
column — no more 50/50 split on tablet. */
body.nycl.nycl-v2-exp .product-add-form,
body.nycl.nycl-v2-exp .product-options-wrapper {
float: none !important;
width: 100% !important;
max-width: 100% !important;
}
/* (1b) Keep the product image TOP-RIGHT, aligned to the H1 top, and let the
description text flow UP beside it (no dead space under the logos). The
image floats right; the overview must NOT establish a block formatting
context (no overflow:hidden / flex) or it will sit below the float
instead of wrapping beside it. The pills row clears the float so the
info boxes + EOP span full width BELOW the image. The image only stacks
full-width once the whole section collapses at <=768. */
body.nycl.nycl-v2-exp .product-info-main {
display: block !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview {
display: block !important; /* not flex — allow text to wrap the float */
overflow: visible !important; /* kill the BFC so text flows beside image */
width: auto !important;
max-width: none !important;
float: none !important;
clear: none !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .value {
display: block !important; /* was flex — flex won't wrap the float */
overflow: visible !important;
clear: none !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description {
display: block !important;
overflow: visible !important;
}
/* Info boxes + EOP clear the floated image and span the full width. */
body.nycl.nycl-v2-exp .pdp-pills-row {
clear: both !important;
width: 100% !important;
}
/* (2) In-stream summary = same look as the desktop summary card (white
card, black "Order Summary" header, bold row labels, regular-weight
values) — just without the fixed-bottom price/cart footer (that stays in
the sticky). The desktop rules are scoped to .product-options-bottom so
they don't reach the relocated block; re-apply them here. */
body.nycl.nycl-v2-exp .product-options-bottom-details.pdp-summary-instream {
position: static !important;
width: 100% !important;
max-width: 100% !important;
margin: 16px 0 0 !important;
box-sizing: border-box !important;
/* Frosted Studio: charcoal 3px frame + 10px radius (matches options). */
background: linear-gradient(180deg, var(--fs-card-grad-top) 0%, var(--fs-card-grad-bot) 60%) !important;
color: var(--fs-ink, #1d2433) !important;
box-shadow: var(--fs-shadow-rest) !important;
border: 3px solid var(--fs-hairline, #242424) !important;
border-radius: var(--fs-card-radius, 10px) !important;
padding: 0 !important;
overflow: hidden !important;
}
/* Order Summary header bar (mobile in-stream): charcoal + white text,
matching the desktop summary header + option-container headers. */
body.nycl.nycl-v2-exp .product-options-bottom-details.pdp-summary-instream .details.your-quote {
font-size: 1.1rem !important;
font-weight: 700 !important;
line-height: 1.4 !important;
margin: 0 !important;
padding: 0.75rem 1rem !important;
border-bottom: 1px solid var(--fs-hairline, #242424) !important;
background: var(--fs-hairline, #242424) !important;
color: #ffffff !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important; /* subtle top bevel on charcoal */
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
}
body.nycl.nycl-v2-exp .product-options-bottom-details.pdp-summary-instream .details.your-quote * {
color: #ffffff !important;
}
/* Product name row (2nd child) */
body.nycl.nycl-v2-exp .product-options-bottom-details.pdp-summary-instream .details:nth-child(2) {
font-size: 0.95rem !important;
font-weight: 600 !important;
text-align: center !important;
color: var(--nycl-primary, #1d1d1d) !important;
padding: 0.6rem 1rem !important;
}
/* Each option row: bold label, divider line */
body.nycl.nycl-v2-exp .product-options-bottom-details.pdp-summary-instream .details {
font-size: 0.85rem !important;
padding: 0.5rem 1rem !important;
color: var(--nycl-primary, #1d1d1d) !important;
border-bottom: 1px solid rgba(74,45,42,0.08) !important;
}
/* Bold row label, regular-weight selected value */
body.nycl.nycl-v2-exp .product-options-bottom-details.pdp-summary-instream .details .title {
color: var(--nycl-primary, #1d1d1d) !important;
font-weight: 700 !important;
}
body.nycl.nycl-v2-exp .product-options-bottom-details.pdp-summary-instream .details .highlight {
color: var(--nycl-primary, #1d1d1d) !important;
font-weight: 400 !important;
}
/* The remaining fixed bar now wraps only the fieldset; let it size to its
content instead of the old tall details+fieldset height. */
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart {
height: auto !important;
/* Square corners on the sticky at <=1024: the experiment desktop rule
(line ~300) applies --fs-card-radius unscoped and, loading after
skin-v1, beats skin-v1's media-scoped border-radius:0. Re-assert 0
here so the fixed bottom sticky is flush edge-to-edge on tablet/mobile. */
border-radius: 0 !important;
/* Brand-green 3px stroke on the top edge of the bottom sticky (Myles
2026-07-02). #c8f542 = brand green (--nycl-accent). Overrides skin-v1. */
border-top: 3px solid var(--nycl-accent, #c8f542) !important;
}
/* Sticky qty / unit price / total: all three EQUAL and ~20% larger than the
desktop summary figures (Myles 2026-07-02). Base was 16px -> 19px here
(+~20%). qty-label, unit-price(+span), total-price(+span) all forced. */
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .qty-label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .field.qty .qty-label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price span,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price span {
font-size: 19px !important;
}
/* At <=480 keep all three equal and ~20% larger than the base sticky size:
22px (was 18px). */
@media (max-width: 480px) {
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .qty-label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .field.qty .qty-label,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-unit-price span,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price,
body.nycl.nycl-v2-exp .product-options-bottom .box-tocart .fieldset .product-total-price span {
font-size: 22px !important;
}
}
}
/* ---------- Mobile (≤768px): Easy Order Process below the info text --------
The EOP block is prepended first in the DOM (so it can float top-right on
desktop). When everything stacks at ≤768px it would otherwise render ABOVE
the product description text. Re-assert a flex column on .styled-description
here — placed AFTER the max-width:1024px block so it wins on source order
over that block's display:block — and reorder to: info text → Easy Order
Process → trust badges → info pills. */
@media (max-width: 768px) {
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description {
display: flex !important;
flex-direction: column !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-eop-float {
order: 1 !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-trust-badges-wrapper,
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-pills-row {
order: 2 !important;
}
}
/* ---------- Trust card: "Fast Approval Process" only ----------
v1 builds two trust cards side-by-side (Fastest Turnaround + Fast
Approval). For v2 we hide the turnaround card and switch the duo to a
single full-width card. */
body.nycl.nycl-v2-exp .pdp-turnaround-card {
display: none !important;
}
body.nycl.nycl-v2-exp .pdp-trust-duo {
grid-template-columns: 1fr !important;
}
/* Easy Order Process: 3 compact horizontal steps. Numeral + (title / subtext)
side-by-side. Tight vertical footprint. */
body.nycl.nycl-v2-exp .pdp-howitworks-card {
padding: 16px 18px !important;
}
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-trust-badges-title {
margin: 0 0 12px !important;
font-size: 20px !important;
}
/* Remove the lavender ORDER WORKFLOW eyebrow on this card */
body.nycl.nycl-v2-exp .pdp-trust-duo > .pdp-trust-card .pdp-trust-badges-title::before,
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-trust-badges-title::before {
content: none !important;
display: none !important;
}
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-howitworks-steps {
display: grid !important;
grid-template-columns: repeat(3, 1fr) !important;
gap: 12px !important;
flex-direction: row !important;
}
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-howitworks-step {
display: flex !important;
flex-direction: row !important;
align-items: flex-start !important;
gap: 10px !important;
padding: 0 !important;
background: transparent !important;
border: 0 !important;
border-left: 0 !important;
}
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-step-num {
width: 28px !important;
height: 28px !important;
min-width: 28px !important;
border-radius: 50% !important;
background: var(--nycl-accent, #c8f542) !important;
color: #1d1d1d !important;
font-family: 'Archivo', sans-serif !important;
font-weight: 800 !important;
font-size: 0.9rem !important;
display: inline-flex !important;
align-items: center !important;
justify-content: center !important;
flex: 0 0 28px !important;
margin-top: 1px !important;
}
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-step-body {
display: flex !important;
flex-direction: column !important;
gap: 2px !important;
min-width: 0 !important;
}
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-step-title {
font-family: 'Archivo SemiExpanded', 'Archivo', sans-serif !important;
font-weight: 700 !important;
font-size: 0.92rem !important;
line-height: 1.2 !important;
color: #fff !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
}
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-step-sub {
font-size: 0.78rem !important;
line-height: 1.35 !important;
color: var(--vexp-body-on-dark, #bbb) !important;
font-weight: 400 !important;
}
@media (max-width: 768px) {
body.nycl.nycl-v2-exp .pdp-howitworks-card .pdp-howitworks-steps {
grid-template-columns: 1fr !important;
}
}
/* ---------- Trust cards: dark card + lime title + lavender eyebrow ----------
Note: no drop shadow on these — they sit on the white top-card and the
shadow was leaking grey into the surrounding white. */
body.nycl-v2-exp .pdp-trust-duo > .pdp-trust-card {
background: var(--vexp-card-bg) !important;
border: 2px solid var(--vexp-card-border) !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 22px !important;
position: relative !important;
}
/* Lavender eyebrow tag injected above the title via ::before */
body.nycl-v2-exp .pdp-trust-duo > .pdp-trust-card .pdp-trust-badges-title::before {
content: attr(data-eyebrow);
display: block;
width: max-content;
max-width: 100%;
background: var(--vexp-accent-lav);
color: #1d1d1d;
font-family: 'Archivo SemiExpanded', 'Archivo', sans-serif;
font-weight: 700;
font-size: 12px;
font-stretch: 125%;
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 4px 14px;
margin-bottom: 10px;
}
/* Per-card eyebrow text (fallback when data-eyebrow isn't on the element) */
body.nycl-v2-exp .pdp-trust-duo > .pdp-trust-card:nth-child(1) .pdp-trust-badges-title::before {
content: "PRODUCTION SPEED";
}
body.nycl-v2-exp .pdp-trust-duo > .pdp-trust-card:nth-child(2) .pdp-trust-badges-title::before {
content: "ORDER WORKFLOW";
}
/* Big lime title — kill the old black bar, restyle the title element */
body.nycl-v2-exp .pdp-trust-badges-title {
display: block !important;
background: transparent !important;
color: var(--vexp-accent-lime) !important;
text-align: left !important;
font-family: 'Archivo', sans-serif !important;
font-weight: 800 !important;
font-stretch: 110% !important;
font-size: 22px !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
margin: 0 0 16px !important;
padding: 0 !important;
line-height: 1.15 !important;
border-bottom: 0 !important;
}
/* Recolor inner content for dark bg */
body.nycl-v2-exp .pdp-trust-duo .pdp-turnaround-line {
background: rgba(255,255,255,0.04) !important;
border-left: 3px solid var(--vexp-accent-lime) !important;
}
body.nycl-v2-exp .pdp-trust-duo .pdp-turnaround-text,
body.nycl-v2-exp .pdp-trust-duo .pdp-step-text {
color: #fff !important;
}
body.nycl-v2-exp .pdp-trust-duo .pdp-turnaround-text strong,
body.nycl-v2-exp .pdp-trust-duo .pdp-step-text strong {
color: var(--vexp-accent-lime) !important;
}
body.nycl-v2-exp .pdp-trust-duo .pdp-turnaround-icon {
color: var(--vexp-accent-lime) !important;
}
/* Numbered circles: lime fill, dark text (matches homepage tier-price palette) */
body.nycl-v2-exp .pdp-trust-duo .pdp-step-num {
background: var(--vexp-accent-lime) !important;
color: #1d1d1d !important;
}
/* ============================================================
OPTION CARD CLEANUP (v2)
The v1 skin positions each option's title bar at top:-41px and
clips it with overflow:hidden on the .field — which only works
when live Magento JS adjusts layout. In the static prototype the
title bar gets cut off. Fix: let the title bar sit flush at the
top edge of the card, give the field room, and tidy the body.
============================================================ */
/* The asw2024 theme sets overflow:hidden on the options wrapper/fieldset,
which crops each card's side shadows flat. Force the chain to visible so
shadows radiate on all 4 sides. */
body.nycl.nycl-v2-exp .product-options-wrapper,
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset,
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .options-list {
overflow: visible !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field {
overflow: visible !important; /* let the drop shadow radiate on all 4 sides (no flat L/R cutoff) */
position: relative !important;
padding-top: 0 !important; /* title bar is in-flow now; no reserved gap */
margin-top: 22px !important;
/* Align the card's LEFT edge with the H1 / description / info pills (all at
the column's left edge). The earlier 6px left inset (added for shadow
room) pushed it out of alignment — removed. Ancestors are overflow:visible
now, so the left shadow renders into the gutter without being clipped.
Keep a small RIGHT inset so the right shadow still has room. */
margin-left: 0 !important;
margin-right: 6px !important;
/* ===== Frosted Studio: borderless floating panel =====
The asw2024 theme injects inline `border-top:none !important` on .field,
which breaks any top border drawn on the card itself. So we draw NO
border on .field at all and render the full 3px rounded frame as a
::before overlay (inline styles can't touch a pseudo-element). One
continuous frame = no top-edge gap, no L/R doubling. */
border: none !important;
border-radius: var(--fs-card-radius) !important;
background: linear-gradient(180deg, var(--fs-card-grad-top) 0%, var(--fs-card-grad-bot) 60%) !important;
box-shadow: var(--fs-shadow-rest) !important;
transition: box-shadow 0.18s ease, transform 0.18s ease !important;
}
/* The single continuous frame, drawn over everything so the header's top
corners sit INSIDE it and follow the same radius. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
border: 3px solid var(--fs-hairline) !important;
border-radius: var(--fs-card-radius) !important;
pointer-events: none !important;
z-index: 4 !important;
}
/* Hover lift intentionally NOT applied to the large option containers (Myles:
the movement shift is fine for swatches but not the big cards). The chips
keep their own hover lift further down. */
/* Title bar: in normal flow at the top of the card so it occupies its own
height. A 2-line title (e.g. "Size Symbols or Color Versions?") now grows
the bar and pushes the swatch body down instead of overlapping it. The old
approach pinned this bar position:absolute over a fixed 44px padding gap,
which only fit a single line.
Also kill the asw2024 theme's rotate:-1deg that skews the bar diagonally. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field > .label,
body.nycl.nycl-v2-exp .product-options-wrapper > .fieldset > .field > label.label {
position: static !important;
width: 100% !important;
box-sizing: border-box !important;
margin: 0 0 0 0 !important;
order: -1 !important; /* ensure header renders above the control */
/* ===== Charcoal header bar =====
Solid charcoal fill matching the card stroke (#242424 / --fs-hairline) with
white text for contrast. (Replaced the earlier frosted light-grey tint.) */
background: var(--fs-hairline) !important;
color: #ffffff !important;
/* No borders on the header — the ::before overlay draws the whole frame.
The header just rounds its OWN top corners (inset 3px so it tucks behind
the overlay stroke). */
border: none !important;
border-bottom: 1px solid var(--fs-hairline) !important;
border-top-left-radius: calc(var(--fs-card-radius) - 3px) !important;
border-top-right-radius: calc(var(--fs-card-radius) - 3px) !important;
margin: 0 !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.12) !important; /* subtle top bevel on charcoal */
rotate: none !important;
transform: none !important;
translate: none !important;
}
/* Header text reads white on charcoal. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field > .label,
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field > .label * {
color: #ffffff !important;
}
/* EXCEPT the pink step-number badge: black numerals for contrast against the
lavender (#e5c6ff) square (the white-on-charcoal rule above would otherwise
force the numeral white, which reads poorly on pink). */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field > .label .step-number {
color: #000000 !important;
}
/* Body padding: tighten so cards aren't cavernous */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field > .control {
padding: 4px 16px 16px !important;
}
/* Each option value: clean swatch chip (text-only chips; swatch chips get
their own rule below with uniform padding). */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice {
/* Charcoal swatch chips: interior #242424; OUTER stroke is 2px #444 grey
(matches the homepage resource-card frame + the swatch image stroke) so
the chip edge is visible against the charcoal chip body. White text. */
border: 2px solid #444 !important;
border-radius: var(--fs-chip-radius) !important;
padding: 8px 12px !important;
background: var(--fs-hairline, #242424) !important;
min-height: 38px !important;
align-items: center !important;
box-shadow: 0 1px 2px rgba(16,24,40,0.04) !important;
transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease !important;
}
/* Swatch chips: override the generic padding above with uniform padding. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice:has(.pdp-swatch-img) {
padding: 10px !important;
}
/* Full-card click target for swatches (Myles 2026-07-02): previously only the
swatch IMAGE (and the label text) reliably selected the option; clicks on the
card padding / empty areas did not. The radio input is a direct child of the
.field.choice, so stretch it as an invisible full-bleed overlay: clicking
ANYWHERE on the swatch card now natively checks the radio (no reliance on JS
event delegation reaching the right element). opacity:0 keeps the swatch image
+ label fully visible; cursor:pointer signals the whole card is clickable. The
selected-ring ::before/::after (drawn on :has(input:checked)) still render
because the overlay is transparent. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice:has(.pdp-swatch-img) {
position: relative !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice:has(.pdp-swatch-img) > input[type="radio"] {
display: block !important;
position: absolute !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
opacity: 0 !important;
cursor: pointer !important;
z-index: 2 !important;
-webkit-appearance: none !important;
appearance: none !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice:hover {
border-color: #444 !important;
box-shadow: 0 4px 14px rgba(16,24,40,0.10) !important;
transform: translateY(-1px) !important;
}
/* SELECTED swatch highlight: clear lime border + inner glow + soft lift so the
chosen option reads at a glance. Matches the .field.choice specificity tier
used above so it wins over the default 1px #ddd border. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice.active,
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice:has(input:checked) {
/* Selected = light-grey (#f0f0f0, matches header bar) fill. The charcoal
ring is drawn as ::before below — the asw2024 theme JS sets an inline
`box-shadow !important` on the selected swatch which beats any stylesheet
box-shadow, so we can't ring via box-shadow here. A pseudo-element ring
can't be clobbered by inline styles. */
/* Make the element's own border transparent so it doesn't stack with the
::before ring (that stacking read as ~4px). */
border-color: transparent !important;
/* Selected stays charcoal (matches the default chip); the lime ::before ring
+ lime check badge signal selection instead of a fill change. */
background: var(--fs-hairline, #242424) !important;
}
/* Charcoal 2px selected ring as an overlay (immune to the theme's inline
box-shadow). Sits just under the check badge (::after, z-index 3). */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice.active::before,
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice:has(input:checked)::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
/* Lime ring (not charcoal) so selection is visible against the charcoal
chip fill. */
border: 3px solid var(--vexp-accent-lime, #c8f542) !important;
border-radius: var(--fs-chip-radius) !important;
box-shadow: 0 4px 16px rgba(16,24,40,0.10) !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Small lime check badge in the corner of the selected swatch */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice.active::after,
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice:has(input:checked)::after {
content: "\2713";
position: absolute !important;
top: 6px !important;
right: 6px !important;
/* 50% larger badge: 18->27px, line-height + font scaled to match. */
width: 27px !important;
height: 27px !important;
line-height: 27px !important;
text-align: center !important;
font-size: 16.5px !important;
font-weight: 700 !important;
color: #1d1d1d !important;
background: var(--vexp-accent-lime, #c8f542) !important;
border-radius: 50% !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
z-index: 3 !important;
pointer-events: none !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice {
position: relative !important;
}
/* Option value text: let the v1 skin's centered-swatch pattern render.
(Earlier overrides here fought the working v1 rules and collapsed the
label to 0 width — removed. We only ensure the label + its span are in
normal flow and visible.) */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice > label.admin__field-label {
position: static !important;
display: block !important;
width: 100% !important;
color: #ffffff !important;
text-align: center !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice > label.admin__field-label > span {
position: static !important;
display: inline !important;
width: auto !important;
color: #ffffff !important;
}
/* Porto/asw2024 (cross-origin) sets option text spans to opacity:0 as a
reveal-on-JS-init pattern. That JS never runs in the static prototype,
so the text stays invisible. Force it visible. */
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice label,
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice label span,
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice .admin__field-label,
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice .admin__field-label span {
opacity: 1 !important;
visibility: visible !important;
}
/* keep the radio inline with its text */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field .options-list .field.choice > input.radio {
position: static !important;
margin: 0 6px 0 0 !important;
flex: none !important;
}
/* ---------- Injected option swatch images (pdp-swatch-img) ----------
The companion script appends a swatch ![]()
into each .field.choice.
Larger thumbnail (close to live), full-bleed to the chip's inner padding
with uniform padding on all sides and no side dead space. */
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice .pdp-swatch-img {
display: block !important;
width: 100% !important;
max-width: 100% !important;
height: auto !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
margin: 0 0 8px !important;
/* Image stroke matches the homepage resource-card image frame: 2px #444
grey (NOT the white #e3e3e3 from before, NOT the lime button border). */
border: 2px solid #444 !important;
border-radius: 3px !important;
background: transparent !important;
opacity: 1 !important;
box-sizing: border-box !important;
}
/* Chips with a swatch: 4 per row on desktop, vertical stack, uniform padding.
border-box + explicit basis so 4 columns fit cleanly without wrapping to 3. */
body.nycl.nycl-v2-exp .product-options-wrapper .options-list .field.choice:has(.pdp-swatch-img) {
box-sizing: border-box !important;
flex: 0 0 calc(25% - 12px) !important;
max-width: calc(25% - 12px) !important;
min-width: 0 !important;
margin: 0 !important; /* v1/asw theme adds 24px L/R margin -> kills 4-up */
flex-direction: column !important;
align-items: stretch !important;
text-align: center !important;
padding: 10px !important;
}
/* Tighten the grid gap + pack from the left so 4 columns fit cleanly.
(v1 sets justify-content:space-around, which reserves space around each
item and forces the 4th to wrap even when widths fit.) */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list.nested:has(.pdp-swatch-img) {
gap: 12px !important;
justify-content: center !important;
}
/* ---------- Tablet (769–1024px): keep swatches 4 per row, centered --------
The v1 skin renders the swatch list as a CSS grid via
.field.style .options-list.nested { grid-template-columns:
repeat(auto-fill, minmax(160px,1fr)); }, which collapses to 3 columns in
this width band. Override it back to FLEXBOX (like desktop) — NOT a fixed
grid — so 4 chips fit per row AND partial rows stay centered via
justify-content:center. (A grid would place orphan last-row chips into
fixed left columns instead of centering them.) The flex-basis matches the
desktop swatch rule so 4 columns fit cleanly. */
@media (min-width: 769px) and (max-width: 1024px) {
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list.nested:has(.pdp-swatch-img) {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice:has(.pdp-swatch-img) {
flex: 0 0 calc(25% - 12px) !important;
max-width: calc(25% - 12px) !important;
width: auto !important;
}
}
/* ---------- 481–768px: keep swatches CENTERED (Myles 2026-07-02) ----------
In this band the v1 skin renders the swatch list as a CSS grid
(grid-template-columns: repeat(auto-fill, minmax(160px,1fr))). Grid places
the last row's orphan chips into fixed LEFT columns, so partial rows read as
left-aligned even though the track group is centered. Force FLEXBOX (like the
769–1024 tablet block) so wrapped rows center via justify-content:center.
Chips keep a ~3-up basis and wrap/center naturally as the row narrows. */
@media (min-width: 481px) and (max-width: 768px) {
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list.nested:has(.pdp-swatch-img) {
display: flex !important;
flex-wrap: wrap !important;
justify-content: center !important;
gap: 12px !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field:not(.quantity) .options-list .field.choice:has(.pdp-swatch-img) {
flex: 0 0 calc(33.333% - 12px) !important;
max-width: calc(33.333% - 12px) !important;
width: auto !important;
}
}
/* ============================================================================
QUANTITY TABLE — v2 redesign (2026-06-23) — "premium spec sheet"
Clean stacked-rows pricing table. One continuous rounded container holds the
column header + tier rows + custom-qty + wholesale footer, so there is no
seam and no row-radius mismatch. Distinct LIGHT column header (not a second
charcoal bar). Lime selected row with a left check (never overlaps price).
JS builds this ONCE (no rebuild loop) so there is no flicker.
All rules scoped to .field.quantity.
========================================================================== */
/* Field body: comfortable inset so the table breathes inside the card frame. */
body.nycl.nycl-v2-exp .product-options-wrapper .fieldset > .field.quantity > .control {
padding: 14px 16px 16px !important;
}
/* ---- The single continuous table container (the options-list) ---- */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table {
display: flex !important;
flex-direction: column !important;
flex-wrap: nowrap !important;
gap: 0 !important;
padding: 0 !important;
margin: 0 !important;
width: 100% !important;
border: 1px solid #e6e6e6 !important;
border-radius: 12px !important;
overflow: hidden !important; /* rows clip to the rounded container */
background: #fff !important;
box-shadow: 0 1px 2px rgba(16,24,40,0.04), 0 10px 28px rgba(16,24,40,0.06) !important;
justify-content: flex-start !important;
}
/* Shared 3-col grid template for header + footer (whole-element grids). */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-wholesale-row {
display: grid !important;
grid-template-columns: 1.25fr 1fr 1fr !important;
align-items: center !important;
column-gap: 10px !important;
}
/* Tier ROW is a flex container; the .relabeled child is the actual 3-col grid
(spanning full width). This sidesteps the empty raw label span entirely —
only the 3 .relabeled cells form the grid, so nothing can mis-place them. */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table .field.choice.qty-row {
display: flex !important;
align-items: stretch !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row > label.admin__field-label {
display: flex !important;
align-items: center !important;
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row .relabeled {
display: grid !important;
grid-template-columns: 1.25fr 1fr 1fr !important;
align-items: center !important;
column-gap: 10px !important;
flex: 1 1 100% !important;
width: 100% !important;
min-width: 0 !important;
}
/* ---- Column header: LIGHT, refined — NOT a second charcoal bar ---- */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head {
background: #fafafa !important;
color: #8a8f98 !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
text-transform: uppercase !important;
padding: 9px 18px !important; /* tightened from 12px */
border-bottom: 1px solid #ececec !important;
margin: 0 !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head .qty,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head .unitprice,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head .totalprice {
color: #8a8f98 !important;
font-size: 0.7rem !important;
font-weight: 700 !important;
letter-spacing: 0.08em !important;
opacity: 1 !important;
/* Fill the grid track + flex so the label aligns over its column (a bare
span shrink-wraps to the track start, defeating text-align). */
width: 100% !important;
justify-self: stretch !important;
display: flex !important;
align-items: center !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head .qty { justify-content: flex-start !important; text-align: left !important; }
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head .unitprice,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-table-head .totalprice { justify-content: flex-end !important; text-align: right !important; }
/* ---- Tier rows ---- */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table .field.choice.qty-row {
width: 100% !important;
max-width: 100% !important;
flex: 0 0 auto !important;
box-sizing: border-box !important;
margin: 0 !important;
padding: 9px 18px !important; /* tightened from 14px */
background: #fff !important;
border: none !important;
border-bottom: 1px solid #f0f0f0 !important;
border-radius: 0 !important;
box-shadow: none !important;
cursor: pointer !important;
min-height: 0 !important;
position: relative !important;
align-items: center !important; /* vertically center cells in the row */
transition: background 0.12s ease !important;
}
/* Zebra striping: subtle grey on alternating rows for scan-ability. */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table .field.choice.qty-row:nth-child(even) {
background: #f6f6f6 !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table .field.choice.qty-row:hover {
background: #eef2e2 !important; /* faint lime-tinted hover (over zebra) */
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table .field.choice.qty-row:last-child {
border-bottom: none !important;
}
/* Hide the empty raw label span (the " 5" placeholder), item-heading, and the
native radio — only the 3 .relabeled cells render. (label.margin/padding 0
handled in the flex rule above.) */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row > label.admin__field-label > span:not(.relabeled),
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row .item-heading {
display: none !important;
width: 0 !important;
height: 0 !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row input.radio,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row > label > input.radio {
position: absolute !important;
opacity: 0 !important;
width: 1px !important;
height: 1px !important;
pointer-events: none !important;
}
/* Cells */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row .relabeled .qty {
text-align: left !important;
font-size: 0.98rem !important;
font-weight: 700 !important;
color: var(--fs-ink, #1d2433) !important;
text-decoration: none !important;
white-space: nowrap !important;
display: flex !important;
align-items: center !important;
gap: 8px !important;
position: relative !important;
padding-left: 22px !important; /* reserve room for the left check */
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row .relabeled .unitprice {
text-align: right !important;
font-size: 0.9rem !important;
font-weight: 500 !important;
color: var(--fs-ink-soft, #5b6472) !important;
text-decoration: none !important;
/* flex so the value is vertically centered in the row (matches .qty) */
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
height: 100% !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row .relabeled .totalprice {
text-align: right !important;
font-size: 0.98rem !important;
font-weight: 800 !important;
color: var(--fs-ink, #1d2433) !important;
display: flex !important;
align-items: center !important;
justify-content: flex-end !important;
height: 100% !important;
text-decoration: none !important;
}
/* "Get N Free" badge — lime pill inline with the qty. */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row .relabeled .free-badge {
display: inline-block !important;
background: var(--vexp-accent-lime, #c8f542) !important;
color: #1d1d1d !important;
font-size: 0.6rem !important;
font-weight: 800 !important;
letter-spacing: 0.02em !important;
text-transform: uppercase !important;
padding: 2px 7px !important;
border-radius: 999px !important;
line-height: 1.4 !important;
}
/* ---- SELECTED tier row: clean lime fill, left checkmark, NO black corners ---- */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table .field.choice.qty-row.qty-row--selected,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .options-list.qty-table .field.choice.qty-row:has(input:checked) {
background: var(--vexp-accent-lime, #c8f542) !important;
border-bottom-color: rgba(0,0,0,0.08) !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row.qty-row--selected:hover,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row:has(input:checked):hover {
background: var(--vexp-accent-lime, #c8f542) !important;
}
/* Selected text → black for contrast on lime. */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row.qty-row--selected .relabeled .qty,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row.qty-row--selected .relabeled .unitprice,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row.qty-row--selected .relabeled .totalprice,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row:has(input:checked) .relabeled .qty,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row:has(input:checked) .relabeled .unitprice,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row:has(input:checked) .relabeled .totalprice {
color: #1d1d1d !important;
}
/* Left checkmark inside the qty cell on the selected row — never overlaps price. */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row.qty-row--selected .relabeled .qty::before,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-row:has(input:checked) .relabeled .qty::before {
content: "✓" !important;
position: absolute !important;
left: 0 !important;
top: 50% !important;
transform: translateY(-50%) !important;
font-size: 0.95rem !important;
font-weight: 900 !important;
color: #1d1d1d !important;
line-height: 1 !important;
}
/* ---- Custom-quantity row ---- */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-custom-row {
display: flex !important;
align-items: center !important;
gap: 12px !important;
padding: 13px 18px !important;
background: #fff !important;
border: 1px solid #e6e6e6 !important;
border-radius: 12px !important; /* round all corners incl. top edge */
margin-top: 10px !important;
box-shadow: 0 1px 2px rgba(16,24,40,0.04) !important;
}
/* When the table footer (wholesale) is present, the custom row sits ABOVE it
so it shouldn't round its own bottom — handled by JS ordering; default
keeps rounded for the standalone case. */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-custom-row.has-footer-below {
border-radius: 0 !important;
margin-top: 10px !important;
border-top: 1px solid #e6e6e6 !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-custom-row.custom-active {
background: #f7faef !important;
border-color: var(--vexp-accent-lime, #c8f542) !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-custom-label {
font-size: 0.85rem !important;
font-weight: 700 !important;
color: var(--fs-ink, #1d2433) !important;
margin: 0 !important;
white-space: nowrap !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-custom-field {
display: flex !important;
align-items: center !important;
gap: 10px !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity input.customqty {
width: 150px !important;
text-align: left !important;
border: 1.5px solid #d4d4d4 !important;
border-radius: 8px !important;
padding: 8px 12px !important;
font-size: 0.9rem !important;
font-weight: 600 !important;
color: var(--fs-ink, #1d2433) !important;
box-sizing: border-box !important;
background: #fff !important;
-moz-appearance: textfield !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity input.customqty:focus {
outline: none !important;
border-color: var(--vexp-accent-lime, #c8f542) !important;
box-shadow: 0 0 0 3px rgba(200,245,66,0.35) !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .customqtyunitprice,
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .customqtytotalprice {
font-size: 0.82rem !important;
color: var(--fs-ink-soft, #5b6472) !important;
font-weight: 600 !important;
}
/* ---- Wholesale / Get-a-Quote footer row ---- */
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-wholesale-row {
padding: 13px 18px !important;
background: #fafafa !important;
border: 1px solid #e6e6e6 !important;
border-top: 1px solid #ececec !important;
border-radius: 0 0 12px 12px !important;
margin-top: 0 !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-wholesale-row .qty {
text-align: left !important;
font-size: 0.9rem !important;
font-weight: 700 !important;
color: var(--fs-ink, #1d2433) !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-wholesale-row .unitprice {
text-align: right !important;
font-size: 0.82rem !important;
font-weight: 500 !important;
color: var(--fs-ink-soft, #5b6472) !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-wholesale-row .get-a-quote {
text-align: right !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-wholesale-row .get-a-quote a {
display: inline-block !important;
background: var(--vexp-accent-lime, #c8f542) !important;
color: #1d1d1d !important;
font-size: 0.8rem !important;
font-weight: 800 !important;
text-decoration: none !important;
padding: 8px 18px !important;
border-radius: 8px !important;
white-space: nowrap !important;
box-shadow: 0 1px 3px rgba(0,0,0,0.12) !important;
transition: filter 0.12s ease, transform 0.12s ease !important;
}
body.nycl.nycl-v2-exp .product-options-wrapper .field.quantity .qty-wholesale-row .get-a-quote a:hover {
filter: brightness(1.04) !important;
transform: translateY(-1px) !important;
}
/* ===================================================================== */
/* NYCL Homepage Reviews+FAQ section (.nycl-rfaq) — ported onto the PDP. */
/* Source: tmp/rfaq-homepage-css.txt + inline experts CSS from homepage. */
/* Bare selectors mirror the homepage; the .nycl-rfaq wrapper also */
/* carries .pdp-reviews-faq-section so the full-bleed + YMAL anchor work. */
/* ===================================================================== */
.nycl-rfaq {
margin-top: 0;
padding: 48px 0 20px;
background: #0e0e0e;
border: 2px solid #444;
}
.nycl-rfaq__inner {
max-width: 1110px;
margin: 0 auto;
padding: 0 24px;
}
.nycl-rfaq__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 48px;
align-items: start;
}
/* Reviews Column */
.nycl-rfaq__reviews-header {
display: flex;
align-items: center;
gap: 14px;
margin-bottom: 24px;
padding-bottom: 20px;
border-bottom: 2px solid #c8f542;
}
.nycl-rfaq__google-icon {
width: 36px;
height: 36px;
flex-shrink: 0;
}
.nycl-rfaq__stars {
color: #fbbc04;
font-size: 18px;
letter-spacing: 2px;
line-height: 1;
}
.nycl-rfaq__rating {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: rgba(255,255,255,0.6);
font-weight: 600;
}
.nycl-rfaq__review-card {
background: rgba(255,255,255,0.06);
border-radius: 10px;
padding: 20px 22px;
margin-bottom: 12px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); border: 1px solid rgba(255,255,255,0.08);
transition: transform 0.2s, box-shadow 0.2s;
}
.nycl-rfaq__review-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.nycl-rfaq__review-stars {
color: #fbbc04;
font-size: 14px;
letter-spacing: 2px;
margin-bottom: 8px;
}
.nycl-rfaq__review-text {
font-family: 'Open Sans', sans-serif;
font-size: 13.5px;
line-height: 1.7;
color: rgba(255,255,255,0.8);
font-style: italic;
margin: 0 0 10px;
}
.nycl-rfaq__review-author {
font-family: 'Archivo SemiExpanded', sans-serif;
font-weight: 600;
font-size: 12px;
color: #c8f542;
letter-spacing: 0.03em;
}
/* FAQ Column */
.nycl-rfaq__faq-title {
font-family: 'Archivo', sans-serif;
font-weight: 800;
font-stretch: 110%;
font-size: 20px;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #fff;
margin: 0 0 20px;
padding-bottom: 20px;
border-bottom: 2px solid #c8f542;
line-height: 1.15;
}
/* FAQ Item */
.nycl-rfaq__faq-item { margin-bottom: 10px; }
.nycl-rfaq__faq-q {
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
font-family: 'Archivo SemiExpanded', sans-serif;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.04em;
color: #fff !important;
background: rgba(255,255,255,0.08) !important;
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid #c8f542 !important;
outline: none !important;
cursor: pointer;
text-align: left;
line-height: 1.4;
gap: 12px;
transition: filter 0.2s;
}
/* FAQ question button: let a box grow ONLY when its question wraps to two lines
(Myles 2026-07-02). The theme pins a fixed height:32px, so single-line boxes
look right but a 2-line question overflows past the top/bottom borders. Swap
the fixed height for min-height:32px + height:auto: single-line boxes stay
pixel-identical (32px, same padding), and only 2-line boxes grow to fit with
the exact same 1px top/bottom spacing. Nothing else changes. All widths. */
html body .page-wrapper .page-main .nycl-rfaq button.nycl-rfaq__faq-q {
height: auto !important;
min-height: 32px !important;
/* Match the <=768 treatment exactly (Myles 2026-07-02): line-height 20px so
wrapped lines sit close, and 5px top/bottom padding so a 2-line question
keeps ~6px of breathing room above/below the text inside the green stroke
(instead of being cramped against it). Single-line boxes stay ~32px. */
line-height: 20px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
.nycl-rfaq__faq-q:hover {
background: rgba(255,255,255,0.14) !important;
border-color: #d9f644 !important;
box-shadow: none !important;
}
.nycl-rfaq__faq-q:focus,
.nycl-rfaq__faq-q:active {
outline: none !important;
box-shadow: none !important;
}
.nycl-rfaq__faq-toggle {
color: #fff;
font-size: 20px;
font-weight: 700;
flex-shrink: 0;
transition: 0.3s;
}
/* FAQ Answer — dark glass card matching review cards */
.nycl-rfaq__faq-a { display: none; }
.nycl-rfaq__faq-item.open .nycl-rfaq__faq-a { display: block; }
.nycl-rfaq__faq-a p {
font-family: 'Open Sans', sans-serif;
font-size: 13.5px;
color: rgba(255,255,255,0.8);
line-height: 1.7;
margin: 0;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 0;
padding: 18px 22px;
}
/* Shared Link Style */
.nycl-rfaq__link,
.nycl-rfaq__link:link,
.nycl-rfaq__link:visited {
display: inline-flex;
align-items: center;
gap: 6px;
margin-top: 16px;
font-family: 'Archivo SemiExpanded', sans-serif;
font-weight: 600;
font-size: 12px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: #fff;
text-decoration: none;
border-bottom: 2px solid #c8f542;
padding-bottom: 2px;
transition: 0.2s;
}
.nycl-rfaq__link:hover {
color: #c8f542;
}
.nycl-rfaq__link .cta-arrow {
color: #c8f542;
font-size: 10px;
}
.nycl-rfaq__brand-intro {
font-family: 'Archivo SemiExpanded', sans-serif;
font-size: 13px;
line-height: 1.7;
color: #888;
margin: 24px 0 0;
}
/* Work With Our Experts footer (was inline on homepage) */
.nycl-faq-experts {
margin-top: 24px;
padding: 4px 0 0;
text-align: center;
}
.nycl-faq-experts__heading {
display: inline-flex;
align-items: center;
gap: 12px;
margin-bottom: 10px;
}
.nycl-faq-experts__icon {
width: 40px;
height: 40px;
background: linear-gradient(135deg, #c8f542, #a8d830);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.nycl-faq-experts__icon svg { width: 22px; height: 22px; }
.nycl-faq-experts h4 {
font-family: 'Archivo', sans-serif;
font-weight: 700;
font-stretch: 110%;
font-size: 18px;
text-transform: uppercase;
letter-spacing: 0.02em;
color: #fff;
margin: 0;
line-height: 1.15;
}
.nycl-faq-experts__sub {
font-family: 'Open Sans', sans-serif;
font-size: 13px;
color: #bbb;
line-height: 1.5;
margin: 0 0 18px;
}
.nycl-faq-experts__avatars {
display: flex;
justify-content: center;
gap: 8px;
margin-bottom: 10px;
flex-wrap: wrap;
}
.nycl-faq-experts__avatars img {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
border: 2px solid #c8f542;
}
.nycl-faq-experts__names {
font-family: 'Archivo SemiExpanded', sans-serif;
font-size: 11px;
letter-spacing: 0.06em;
color: #aaa;
text-transform: uppercase;
}
/* Mobile */
@media (max-width: 768px) {
.nycl-rfaq {
margin-top: 48px;
padding: 40px 0 32px;
}
.nycl-rfaq__grid {
grid-template-columns: 1fr;
gap: 36px;
}
html body .page-wrapper .page-main .nycl-rfaq button.nycl-rfaq__faq-q {
height: auto !important;
line-height: 20px !important;
padding-top: 5px !important;
padding-bottom: 5px !important;
}
}
/* --------------------------------------------------------------------- */
/* Scoped overrides: the .nycl-rfaq wrapper also carries */
/* .pdp-reviews-faq-section (YMAL after()-anchor + full-bleed). v1.css */
/* styles that class with `body.nycl .pdp-reviews-faq-section{...!important}`*/
/* (light #eee bg, padding, green top border). Re-assert the homepage */
/* dark theme at higher specificity (body.nycl.nycl-v2-exp = 3 classes). */
/* --------------------------------------------------------------------- */
body.nycl.nycl-v2-exp .nycl-rfaq {
background: #0e0e0e !important;
background-color: #0e0e0e !important;
border: 2px solid #444 !important;
border-top: 2px solid #444 !important;
padding: 48px 0 20px !important;
position: relative !important;
box-sizing: border-box !important;
}
body.nycl.nycl-v2-exp .nycl-rfaq .nycl-rfaq__inner {
background: transparent !important;
max-width: 1110px !important;
margin: 0 auto !important;
padding: 0 24px !important;
}
body.nycl.nycl-v2-exp .nycl-rfaq .nycl-rfaq__review-card {
background: rgba(255,255,255,0.06) !important;
}
body.nycl.nycl-v2-exp .nycl-rfaq .nycl-rfaq__faq-a p {
background: rgba(255,255,255,0.06) !important;
}
/* --------------------------------------------------------------------- */
/* FIX 2: FAQ title — kill the theme's grey heading box + wrong font. */
/* On the PDP the bare .nycl-rfaq__faq-title (1 class) loses to Magento's */
/* .product-info-main heading rules (grey bg box + theme font). Re-assert */
/* the homepage styling at body.nycl.nycl-v2-exp specificity. */
/* --------------------------------------------------------------------- */
body.nycl.nycl-v2-exp .nycl-rfaq .nycl-rfaq__faq-title {
font-family: 'Archivo', sans-serif !important;
font-weight: 800 !important;
font-stretch: 110% !important;
font-size: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
color: #fff !important;
margin: 0 0 20px !important;
padding: 0 0 20px !important;
background: none !important;
background-color: transparent !important;
border: none !important;
border-bottom: 2px solid #c8f542 !important;
border-radius: 0 !important;
box-shadow: none !important;
line-height: 1.15 !important;
}
/* ===================================================================== */
/* YMAL ("You May Also Like") — restyle to match the homepage */
/* "Explore Our Product Categories" cards (.nycl-cat-section__card). */
/* Dark #0e0e0e card on the white YMAL band, #444 frame, lime CTA line. */
/* Scoped body.nycl.nycl-v2-exp (3 classes) to beat v1.css bare classes. */
/* ===================================================================== */
/* YMAL band background = same light grey as SEO + page bg (#f0f0f0).
CSS baseline so the grey holds even where the companion JS full-bleed
hasn't run; the JS also sets the same value. */
body.nycl.nycl-v2-exp .ymal-section {
background: #f0f0f0 !important;
background-color: #f0f0f0 !important;
}
/* Section title — match homepage section heading (Archivo, dark). */
body.nycl.nycl-v2-exp .ymal-section .ymal-title {
font-family: 'Archivo', sans-serif !important;
font-weight: 700 !important;
font-stretch: 110% !important;
font-size: 28px !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
color: #1d1d1d !important;
text-align: left !important;
margin: 0 0 24px !important;
padding: 0 0 0 5px !important;
background: none !important;
line-height: 1.15 !important;
}
/* Carousel spacing — a touch more breathing room for taller cards. */
body.nycl.nycl-v2-exp .ymal-section .ymal-carousel {
gap: 18px !important;
padding: 0.5rem 0.25rem 1rem 5px !important;
align-items: stretch !important;
}
/* Card — dark category-card look. */
body.nycl.nycl-v2-exp .ymal-section .ymal-card,
body.nycl.nycl-v2-exp .ymal-section .ymal-card:visited,
body.nycl.nycl-v2-exp .ymal-section .ymal-card:active {
flex: 0 0 200px !important;
display: block !important;
background: #0e0e0e !important;
border: 2px solid #444 !important;
border-radius: 0 !important;
box-shadow: none !important;
padding: 0 !important;
overflow: hidden !important;
text-decoration: none !important;
color: inherit !important;
transition: border-color 0.2s, transform 0.15s, box-shadow 0.3s !important;
}
body.nycl.nycl-v2-exp .ymal-section .ymal-card:hover {
text-decoration: none !important;
box-shadow: 0 6px 28px rgba(0,0,0,0.25) !important;
transform: translateY(-3px) !important;
}
/* Image — framed (matches .nycl-cat-section__img-frame + __img). */
body.nycl.nycl-v2-exp .ymal-section .ymal-card .ymal-img-wrap {
width: auto !important;
height: auto !important;
display: block !important;
margin: 0 !important;
padding: 14px 14px 8px !important;
border-radius: 0 !important;
overflow: visible !important;
}
body.nycl.nycl-v2-exp .ymal-section .ymal-card .ymal-img-wrap img {
width: 100% !important;
height: auto !important;
max-width: none !important;
max-height: none !important;
aspect-ratio: 1 / 1 !important;
object-fit: cover !important;
display: block !important;
border: 2px solid #444 !important;
border-radius: 0 !important;
transition: transform 0.4s !important;
}
body.nycl.nycl-v2-exp .ymal-section .ymal-card:hover .ymal-img-wrap img {
transform: scale(1.04) !important;
}
/* Product name — render as the lime-bordered CTA line at the card base. */
body.nycl.nycl-v2-exp .ymal-section .ymal-card .ymal-name {
display: flex !important;
align-items: center !important;
justify-content: center !important;
text-align: center !important;
font-family: 'Archivo SemiExpanded', sans-serif !important;
font-weight: 600 !important;
font-size: 12px !important;
text-transform: uppercase !important;
letter-spacing: 0.04em !important;
color: #fff !important;
background: rgba(255,255,255,0.12) !important;
-webkit-backdrop-filter: blur(8px) !important;
backdrop-filter: blur(8px) !important;
border: 2px solid #c8f542 !important;
margin: 6px 14px 14px !important;
padding: 10px 12px !important;
line-height: 1.25 !important;
min-height: 42px !important;
transition: background 0.2s, border-color 0.2s !important;
}
body.nycl.nycl-v2-exp .ymal-section .ymal-card:hover .ymal-name {
background: rgba(255,255,255,0.22) !important;
border-color: #d9f644 !important;
}
@media (max-width: 768px) {
body.nycl.nycl-v2-exp .ymal-section .ymal-card {
flex: 0 0 170px !important;
}
body.nycl.nycl-v2-exp .ymal-section .ymal-title {
font-size: 24px !important;
}
}
/* ===================================================================== */
/* SEO SECTION (.custom-description) — cohesion pass to the v2 design */
/* language. Simple, restrained: Archivo lime-accented headings, framed */
/* images (#444 stroke like the homepage cards), clean readable body. */
/* Scoped body.nycl.nycl-v2-exp + !important to beat the inline styles. */
/* ===================================================================== */
/* Light-grey section band (per Myles). The companion JS full-bleed also
sets this on .custom-description; this CSS is the baseline so the grey
holds even where the JS hasn't run. The inner .footer wrappers carry an
inline `background-color: white` (page HTML) that would otherwise paint
over the grey — force them transparent so the grey shows behind the
white content panels. */
body.nycl.nycl-v2-exp .custom-description {
background: #f0f0f0 !important;
background-color: #f0f0f0 !important;
}
body.nycl.nycl-v2-exp .custom-description .footer {
background: transparent !important;
background-color: transparent !important;
}
/* Section rhythm: consistent vertical spacing between the .footer blocks. */
body.nycl.nycl-v2-exp .custom-description > .footer {
padding: 0 2rem !important;
margin: 0 auto 8px !important;
}
body.nycl.nycl-v2-exp .custom-description .footer .container .row {
gap: 2.5rem 3rem !important;
align-items: start !important;
}
/* Dead-space fix: the "VS" (Sewing Margin vs Seam Allowance) row has a
single cell authored with an EMPTY class (not col-lg-6), so the 2-col
grid leaves the right column empty = a big dead gap. This exists in the
live HTML too. Collapse any single-cell row to one full-width column so
the lone cell spans the row (no empty second column). Pure CSS, no HTML
edit needed for Akshay. */
body.nycl.nycl-v2-exp .custom-description .footer .container .row:has(> div:only-child) {
grid-template-columns: 1fr !important;
}
body.nycl.nycl-v2-exp .custom-description .footer .container .row > div:only-child {
grid-column: 1 / -1 !important;
}
/* Each text+image cell becomes a light card so the section reads as a set
of deliberate panels rather than raw text/image drops. */
body.nycl.nycl-v2-exp .custom-description .footer .container .row > [class*="col-"] > div {
background: #fff !important;
border: 2px solid #e5e7eb !important;
border-radius: 0 !important;
padding: 24px 26px 26px !important;
box-shadow: 0 1px 3px rgba(16,24,40,0.06), 0 1px 2px rgba(16,24,40,0.04) !important;
height: 100% !important;
box-sizing: border-box !important;
transition: box-shadow 0.2s, transform 0.15s !important;
}
body.nycl.nycl-v2-exp .custom-description .footer .container .row > [class*="col-"] > div:hover {
box-shadow: 0 6px 24px rgba(16,24,40,0.10) !important;
transform: translateY(-2px) !important;
}
/* Headings — brand Archivo, uppercase, lime underline (matches FAQ /
category section titles). Overrides the inline 38px/900/black. */
body.nycl.nycl-v2-exp .custom-description .footer-menu-item-title {
font-family: 'Archivo', sans-serif !important;
font-weight: 800 !important;
font-stretch: 110% !important;
font-size: 22px !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
color: #1d1d1d !important;
margin: 0 0 16px !important;
padding: 0 0 12px !important;
border-bottom: 2px solid #c8f542 !important;
line-height: 1.18 !important;
}
/* Body copy — clean, readable, consistent. */
body.nycl.nycl-v2-exp .custom-description .footer .container .row > [class*="col-"] > div {
font-family: 'Open Sans', sans-serif !important;
font-size: 14.5px !important;
line-height: 1.7 !important;
color: #374151 !important;
text-align: left !important;
}
/* Images — framed like the homepage category cards (#444 stroke). */
body.nycl.nycl-v2-exp .custom-description .footer img {
display: block !important;
width: 100% !important;
height: auto !important;
margin: 18px 0 0 !important;
padding: 0 !important; /* kill the page's inline `.col-lg-6 img { padding-top: 2% }`
which pushed the photo down inside its own border
(white sliver at the top of the frame). */
border: 2px solid #444 !important;
border-radius: 0 !important;
box-shadow: 0 2px 10px rgba(0,0,0,0.10) !important;
box-sizing: border-box !important;
}
/* ----- "VS" comparison block (Sewing Margin vs Seam Allowance) -----
Make the watermark + the two labels feel deliberate: lime watermark,
dark labels. The heading carries 3 pieces (vs-first / containerbackground
"VS" / .vs span). Treat its panel as a single centered comparison card. */
body.nycl.nycl-v2-exp .custom-description .vs-title {
position: relative !important;
text-align: center !important;
display: block !important;
border-bottom: 2px solid #c8f542 !important;
padding-bottom: 14px !important;
min-height: 64px !important;
}
body.nycl.nycl-v2-exp .custom-description .vs-first,
body.nycl.nycl-v2-exp .custom-description .vs {
position: static !important;
display: inline-block !important;
margin: 0 14px !important;
font-family: 'Archivo', sans-serif !important;
font-weight: 800 !important;
font-stretch: 110% !important;
font-size: 20px !important;
text-transform: uppercase !important;
letter-spacing: 0.02em !important;
color: #1d1d1d !important;
text-align: center !important;
vertical-align: middle !important;
}
body.nycl.nycl-v2-exp .custom-description .containerbackground {
position: static !important;
display: inline-block !important;
transform: none !important;
-webkit-transform: none !important;
font-family: 'Archivo', sans-serif !important;
font-weight: 800 !important;
font-size: 22px !important;
color: #c8f542 !important;
margin: 0 6px !important;
vertical-align: middle !important;
line-height: 1 !important;
}
/* Drop the stray
s inside the VS heading so the 3 pieces sit on one row. */
body.nycl.nycl-v2-exp .custom-description .vs-title br {
display: none !important;
}
@media (max-width: 768px) {
body.nycl.nycl-v2-exp .custom-description > .footer {
padding: 0 1rem !important;
}
body.nycl.nycl-v2-exp .custom-description .footer-menu-item-title {
font-size: 19px !important;
}
body.nycl.nycl-v2-exp .custom-description .footer .container .row > [class*="col-"] > div {
padding: 18px 18px 20px !important;
}
}
/* ============================================================================
EOP + PILLS SIDE-BY-SIDE (500–768px band) [added 2026-07-02]
Between 500px and 768px, place the Easy Order Process card on the LEFT and
the info-pills box on the RIGHT, both shrinking to ~48% each. The product
description text and trust badges take full-width rows above/below.
This block is placed at the END of the file so it wins on source order over
the earlier @media(max-width:768px) stacking rules. Below 500px those
earlier rules resume and everything stacks full-width again.
============================================================================ */
@media (min-width: 500px) and (max-width: 768px) {
/* Parent becomes a wrapping row so EOP + pills can share one line. */
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap !important;
align-items: stretch !important;
column-gap: 14px !important;
row-gap: 16px !important;
}
/* Description text + trust badges each take their own full-width row. */
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .grid-container,
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-trust-badges-wrapper {
flex: 0 0 100% !important;
width: 100% !important;
max-width: 100% !important;
min-width: 0 !important;
}
/* Order: description (0) -> pills (1, LEFT) -> EOP (2, RIGHT) -> trust (3, below).
(Myles 2026-07-02: pills on the left, EOP on the right in this band.) */
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .grid-container {
order: 0 !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-pills-row {
order: 1 !important;
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
margin: 0 !important;
clear: none !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-eop-float {
order: 2 !important;
flex: 1 1 0 !important;
width: auto !important;
max-width: none !important;
min-width: 0 !important;
float: none !important;
margin: 0 !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-trust-badges-wrapper {
order: 3 !important;
}
/* --- Kill intrinsic min-content floors so both columns shrink to ~48%. --- */
body.nycl.nycl-v2-exp .pdp-eop-float,
body.nycl.nycl-v2-exp .pdp-eop-simple,
body.nycl.nycl-v2-exp .pdp-eop-simple-step,
body.nycl.nycl-v2-exp .pdp-eop-simple-body,
body.nycl.nycl-v2-exp .pdp-pills-row,
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pills {
min-width: 0 !important;
}
body.nycl.nycl-v2-exp .pdp-eop-simple {
width: 100% !important;
}
/* Pills-row must NOT be a vertical flex column here; let its grid child fill. */
body.nycl.nycl-v2-exp .pdp-pills-row {
display: block !important;
flex-direction: row !important;
}
/* Single narrow pill column that can collapse below its content min. */
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pills {
display: grid !important;
grid-template-columns: minmax(0, 1fr) !important;
width: 100% !important;
gap: 8px !important;
}
/* Pill internals: allow text to wrap so a pill fits ~200px. */
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pill {
min-width: 0 !important;
white-space: normal !important;
}
body.nycl.nycl-v2-exp .pdp-pills-row .pdp-info-pill * {
min-width: 0 !important;
white-space: normal !important;
}
}
/* ---------- <=499px: stack full-width, INFO PILLS on TOP, EOP on BOTTOM ----
(Myles 2026-07-02.) The base @media(max-width:768px) block orders EOP above
pills; below 500 we flip it so the pills lead and the EOP card sits last.
Order: description text (0) -> pills (1) -> trust badges (2) -> EOP (3). */
@media (max-width: 499px) {
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-pills-row {
order: 1 !important;
margin: 16px 0 0 0 !important; /* tighten: no oversized 24px bottom gap */
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-trust-badges-wrapper {
order: 2 !important;
}
body.nycl.nycl-v2-exp .product-info-main > .product.attribute.overview .styled-description > .pdp-eop-float {
order: 3 !important;
/* Equal gap above and below the EOP card when stacked (Myles 2026-07-02).
Above gap is ~16px (pills-row bottom spacing); the section already leaves
~10px below, so a 6px bottom margin brings the below gap to ~16px to
match. Verified: above 16 / below 16. */
margin: 0 0 6px 0 !important;
}
}
/* ============================================================
Custom Size sliders (Width + Height) — shown when a "Custom"
size swatch is selected. Ported from QWL's finalized layout
(Akshay's production areaslider look), re-tinted to NYCL tokens
(lime accent / ink text) so it reads on the light size card.
Structure/classes (.custom-size-row, #custom-width-slider, etc.)
are produced by nycl-product-companion-v1.js.
============================================================ */
body.nycl .custom-size-row {
display: flex !important;
gap: 1.5rem !important;
padding: 1rem 0.75rem !important;
border-top: 1px solid rgba(29,36,51,0.10) !important;
width: 100% !important;
box-sizing: border-box !important;
}
body.nycl .custom-size-field {
flex: 1 !important;
position: relative !important;
}
body.nycl .custom-size-label {
display: block !important;
font-size: 0.85rem !important;
font-weight: 600 !important;
color: var(--fs-ink, #1d2433) !important;
margin-bottom: 0.4rem !important;
}
body.nycl .custom-size-input-wrap {
display: inline-flex !important;
align-items: center !important;
gap: 0 !important;
}
body.nycl .custom-size-input-wrap .custom-size-input {
width: 90px !important;
box-sizing: border-box !important;
border: 2px solid #ddd !important;
border-radius: 0.5rem !important;
padding: 0.4rem 0.5rem !important;
padding-right: 16px !important;
font-size: 1rem !important;
color: var(--fs-ink, #1d2433) !important;
background: #fff !important;
text-align: center !important;
}
body.nycl .custom-size-input-wrap .custom-size-input:focus {
border-color: var(--nycl-accent-lime, #c8f542) !important;
outline: none !important;
}
body.nycl .custom-size-input-wrap .inches-symbol {
font-size: 0.75rem !important;
color: var(--fs-ink-soft, #5b6472) !important;
margin-left: -14px !important;
margin-right: 4px !important;
align-self: flex-start !important;
margin-top: 6px !important;
pointer-events: none !important;
position: relative !important;
z-index: 1 !important;
}
/* Slider track + handle */
body.nycl .custom-size-slider {
margin: 0.75rem 0 0.25rem !important;
}
body.nycl .custom-size-slider.ui-slider {
background: #e2e6ee !important;
border: none !important;
height: 6px !important;
border-radius: 3px !important;
position: relative !important;
}
body.nycl .custom-size-slider .ui-slider-range {
background: var(--nycl-accent-lime, #c8f542) !important;
}
body.nycl .custom-size-slider .ui-slider-handle {
background: var(--nycl-accent-lime, #c8f542) !important;
border: 2px solid #1d2433 !important;
border-radius: 50% !important;
width: 18px !important;
height: 18px !important;
top: 50% !important;
margin-top: -9px !important;
cursor: pointer !important;
box-shadow: 0 2px 6px rgba(0,0,0,0.2) !important;
}
/* ============================================================
NYCL Product Skin — Specificity Fixes
Load AFTER BOTH nycl-product-skin-v1.css AND nycl-product-skin-experiment-v2.css
============================================================ */
/* Option card border + square corners */
body.nycl.nycl-v2-exp.catalog-product-view .product-options-wrapper .fieldset > .field {
border: 3px solid #1d1d1d !important;
border-radius: 0 !important;
background: var(--nycl-card-bg, #fff) !important;
box-shadow: var(--nycl-card-shadow, 0 3px 12px rgba(0,0,0,0.12)) !important;
overflow: hidden !important;
}
/* Keep border stable on hover */
body.nycl.nycl-v2-exp.catalog-product-view .product-options-wrapper .fieldset > .field:hover {
border: 3px solid #1d1d1d !important;
border-radius: 0 !important;
box-shadow: var(--nycl-card-shadow, 0 3px 12px rgba(0,0,0,0.12)) !important;
}
/* Active / selected option card accent border */
body.nycl.nycl-v2-exp.catalog-product-view .product-options-wrapper .fieldset > .field.active,
body.nycl.nycl-v2-exp.catalog-product-view .product-options-wrapper .fieldset > .field:focus-within {
border: 3px solid var(--nycl-accent, #c8f542) !important;
border-radius: 0 !important;
}
/* Inner label/control edges: no rounding */
body.nycl.nycl-v2-exp.catalog-product-view .product-options-wrapper .fieldset > .field > .label,
body.nycl.nycl-v2-exp.catalog-product-view .product-options-wrapper .fieldset > .field > .control {
border-radius: 0 !important;
}
/* Hide ::before pseudo-element border from experiment-v2.css (prevents double border) */
body.nycl.nycl-v2-exp.catalog-product-view .product-options-wrapper .fieldset > .field::before {
display: none !important;
content: none !important;
}