/** Shopify CDN: Minification failed Line 1637:19 Expected identifier but found whitespace Line 1637:69 Unexpected "`" **/ /* ============================================================================ NEAT VALUES — VISUAL OVERHAUL ---------------------------------------------------------------------------- Baseline commit: 90c2682 ("baseline: Shrine PRO v1.6.1 as deployed") Tokens: snippets/nv-tokens.liquid (loads BEFORE base.css) This file: loads AFTER base.css, in , in both layouts. ---------------------------------------------------------------------------- HOW THIS FILE WINS ---------------------------------------------------------------------------- Every component rule is scoped `body.nv ...` — specificity (0,2,1). That is not defensive over-qualification. 36 sections in this theme load their own stylesheet with {{ 'x.css' | asset_url | stylesheet_tag }} inside — AFTER everything in . On a tie, source order wins, so a plainly-written override here would apply on the homepage and silently lose on collection, account and search pages. `body.nv` beats them on specificity regardless of order. It is also the kill switch: remove `nv` from the body class in layout/theme.liquid and layout/password.liquid and this entire overhaul switches off. No deploy required. ---------------------------------------------------------------------------- RULES FOR THIS FILE ---------------------------------------------------------------------------- 1. NO !important, except in three sanctioned places: the REDUCED MOTION block below (an accessibility reset must beat everything), and the two banner-fenced zones at the bottom (THIRD-PARTY and LEGACY). If you reach for it anywhere else, the selector is wrong. 2. Mobile-first. Base rules are mobile; step up with min-width. 3. Breakpoints: 750 and 990 ONLY. See KNOWN ISSUES below. 4. Never edit assets/base.css. Override it here. 5. This must stay a plain .css file. As .css.liquid, a Liquid error yields a SILENTLY EMPTY stylesheet rather than an error — an afternoon lost to "my CSS isn't applying". Liquid belongs in nv-tokens.liquid. 6. No directional properties (margin-left, text-align: left, ...) — this file loads after rtl.css and would undo it if RTL is ever enabled. ---------------------------------------------------------------------------- KNOWN ISSUES IN base.css (do not "fix" — just don't trip on them) ---------------------------------------------------------------------------- - Six competing mobile breakpoints exist theme-wide: 740, 749, 750, 767, 768, 769. base.css owns 214 queries at 749/750/990 and wins by weight of numbers, so those are canon. Never introduce a new value. - base.css has off-by-one overlaps: `max-width:750px` (x5) alongside `min-width:750px`, and `min-width:749px` (x2) alongside `max-width:749px`. At exactly 749px and 750px both rulesets can apply. This is why that 1px band can look odd. It is pre-existing. - CSS custom properties CANNOT be used in media queries. The breakpoints above are a convention, not a token. `@media (min-width: var(--x))` is invalid CSS and fails silently. ============================================================================ */ /* ============================================================================ MOTION Rebound here rather than in nv-tokens.liquid: base.css:1031-1035 declares these three at :root and loads after the snippet, so it would win there. ============================================================================ */ :root { --duration-short: 120ms; --duration-default: 220ms; --duration-long: 420ms; --nv-ease: cubic-bezier(.2, 0, 0, 1); --nv-ease-out: cubic-bezier(.16, 1, .3, 1); } /* ============================================================================ DESKTOP TOKEN STEP-UP ============================================================================ */ @media screen and (min-width: 750px) { :root { --nv-gutter: 3.2rem; --nv-section-y: 8.8rem; --nv-stack: 2.4rem; --nv-text-xl: 2.4rem; --nv-text-2xl: 3.2rem; --nv-text-3xl: 4.0rem; --nv-text-4xl: 5.6rem; --nv-price-size: 3.2rem; } } /* ============================================================================ REDUCED MOTION ---------------------------------------------------------------------------- Third sanctioned !important zone. This is the standard accessibility reset: it has to beat author styles unconditionally, including the fenced legacy and third-party rules below, so !important is correct here and only here outside the fences. Migrated and widened from the legacy block, which only covered four button selectors. base.css has just 2 prefers-reduced-motion queries of its own across 21,709 lines, so most of the theme's motion was unguarded. Animation and transition are neutralised globally. `transform: none` is NOT applied globally on purpose — plenty of elements use transform for layout (centring via translate, slider track positioning), and blanket-killing it would break them. It stays scoped to interactive hover/active states, which is what the legacy rules were actually protecting. ============================================================================ */ @media (prefers-reduced-motion: reduce) { body.nv *, body.nv *::before, body.nv *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; animation-delay: 0ms !important; transition-duration: 1ms !important; transition-delay: 0ms !important; } html { scroll-behavior: auto !important; } body.nv .button:hover, body.nv .button:active, body.nv .main-product-atc:hover, body.nv .main-product-atc:active, body.nv .cart__checkout-button:hover, body.nv .cart__checkout-button:active, body.nv #CartDrawer-Checkout:hover, body.nv #CartDrawer-Checkout:active, body.nv .kaching-bundles-sticky-atc__button:hover, body.nv .kaching-bundles-sticky-atc__button:active { transform: none !important; } } /* ============================================================================ COMPONENTS Populated in later phases. Order: buttons/forms, product card, header + drawer, footer, sticky ATC, touch targets. ============================================================================ */ /* ---------------------------------------------------------------------------- Generic buttons and form controls ---------------------------------------------------------------------------- These are the site-wide primitives, NOT the buy buttons — those are handled separately further down. base.css already sizes .button at 49px and inputs at 45px, so this is purely about how they read: flatter, softer corners, a real focus ring, and a hover that lifts rather than glows. ---------------------------------------------------------------------------- */ body.nv .button, body.nv .shopify-challenge__button, body.nv .customer button { border-radius: var(--nv-radius-sm); font-weight: var(--nv-weight-semibold); letter-spacing: var(--nv-tracking-wide); transition: background-color var(--duration-default) var(--nv-ease), box-shadow var(--duration-default) var(--nv-ease), transform var(--duration-default) var(--nv-ease-out); } body.nv .button:not([disabled]):hover, body.nv .customer button:not([disabled]):hover { box-shadow: var(--nv-shadow-2); } /* base.css draws focus with an outline + offset; a ring reads cleaner against the warm ground and does not clip inside overflow:hidden containers. */ body.nv .button:focus-visible, body.nv .field__input:focus-visible, body.nv .select__select:focus-visible, body.nv .customer button:focus-visible { box-shadow: var(--nv-focus-ring); outline: none; } body.nv .field__input, body.nv .select__select, body.nv .text-area { border-radius: var(--nv-radius-sm); transition: border-color var(--duration-default) var(--nv-ease), box-shadow var(--duration-default) var(--nv-ease); } /* ---------------------------------------------------------------------------- Product card ---------------------------------------------------------------------------- card_style is "card" and card_text_alignment is "center" in settings, so the card renders as a filled surface. Cream surface, soft elevation, and a restrained hover — base.css's default card shadow was a 15px blur at 10% opacity offset 2/6, which reads as a drop shadow rather than elevation. ---------------------------------------------------------------------------- */ body.nv .card-wrapper .card { border-radius: var(--nv-radius-md); overflow: hidden; } body.nv .card--card { box-shadow: var(--nv-shadow-1); transition: box-shadow var(--duration-default) var(--nv-ease), transform var(--duration-default) var(--nv-ease-out); } @media (hover: hover) and (pointer: fine) { body.nv .card-wrapper:hover .card--card { box-shadow: var(--nv-shadow-2); transform: translateY(-2px); } } body.nv .card__heading { font-size: var(--nv-text-base); font-weight: var(--nv-weight-medium); letter-spacing: var(--nv-tracking-normal); line-height: var(--nv-lh-snug); } body.nv .card__content { padding-block-start: var(--nv-space-xs); } body.nv .card-information > * + * { margin-block-start: var(--nv-space-3xs); } /* Quick-add sits inside the card; keep it visually secondary to the PDP CTA while still clearing 44px. */ body.nv .quick-add__submit { min-height: var(--nv-tap-min); border-radius: var(--nv-radius-sm); font-size: var(--nv-text-sm); } /* ---------------------------------------------------------------------------- Page gutter ---------------------------------------------------------------------------- base.css:399 hardcodes `padding: 0 1.5rem` on .page-width and steps to 5rem at 750px. 15px is tight on a phone; 20px gives the content room to breathe without losing grid width. ---------------------------------------------------------------------------- */ body.nv .page-width { padding-inline: var(--nv-gutter); } /* ---------------------------------------------------------------------------- Price badges (retired from the legacy fence) ---------------------------------------------------------------------------- Colours come from --color-base-* rather than --color-foreground/-background on purpose. The sale badge carries a colour-scheme class (.color-accent-2), which remaps the semantic tokens locally — so reading the semantic ones here would tint the badge with whatever scheme it happens to sit in. The base tokens are global and give a consistent ink chip everywhere. The legacy version was a burgundy gradient (#7A2030 -> #5F1825) with three stacked shadows, 800 weight and a coloured glow. Flat ink reads as considered rather than shouty, and stops the badge competing with the buy button for attention. ---------------------------------------------------------------------------- */ body.nv .badge.price__badge-sale, body.nv .badge.price__badge-sale.color-accent-2 { background: rgb(var(--nv-cta)); background-color: rgb(var(--nv-cta)); color: #FFFFFF; border: none; font-weight: var(--nv-weight-semibold); letter-spacing: var(--nv-tracking-wide); font-size: var(--nv-text-xs); padding: 0.7rem var(--nv-space-xs); border-radius: var(--nv-radius-xs); display: inline-flex; align-items: center; gap: var(--nv-space-3xs); text-transform: uppercase; white-space: nowrap; align-self: center; margin: 0; box-shadow: 0 1px 2px rgba(var(--nv-shadow-color), .10), 0 3px 8px rgba(var(--nv-cta), .32), 0 8px 20px rgba(var(--nv-cta), .18); position: relative; } /* Kept from the legacy block: the discount glyph is intentionally suppressed so the badge reads as pure text. */ body.nv .badge.price__badge-sale .icon-discount { display: none; } body.nv .badge.price__badge-sale .badge__percentage-saved { font-weight: var(--nv-weight-bold); font-size: var(--nv-text-xs); letter-spacing: var(--nv-tracking-wide); } body.nv .badge.price__badge-sale .nowrap { display: inline-flex; align-items: center; gap: var(--nv-space-3xs); } /* Sold-out was 10px in the legacy block — under the 11px floor for this file. */ body.nv .badge.price__badge-sold-out { background: rgba(var(--color-base-text), .55); color: rgb(var(--color-base-background-1)); font-weight: var(--nv-weight-semibold); letter-spacing: var(--nv-tracking-wide); font-size: var(--nv-text-2xs); padding: 0.6rem 1.1rem; border-radius: var(--nv-radius-xs); text-transform: uppercase; border: none; } /* ---------------------------------------------------------------------------- Price block (retired from the legacy fence) ---------------------------------------------------------------------------- LOAD-BEARING: the .price__regular { display: none } rule below is NOT cosmetic. On a sale, this theme renders BOTH .price__regular and .price__sale. Without this rule the regular price appears a second time, beside the sale price. Do not remove it without checking an on-sale product. Sizing moved from a hardcoded 36px/900 to --nv-price-size (2.8rem mobile, 3.2rem desktop) at weight 600. 900 on a 36px number was the least premium element on the page; the smaller, lighter figure still dominates the block because everything around it got quieter too. ---------------------------------------------------------------------------- */ body.nv .price.price--on-sale { display: flex; align-items: center; flex-wrap: wrap; gap: var(--nv-space-xs); margin: 0 0 var(--nv-space-sm); } body.nv .price.price--on-sale .price__container { display: inline-flex; align-items: baseline; flex-wrap: nowrap; gap: var(--nv-space-xs); width: auto; } /* See the LOAD-BEARING note above. */ body.nv .price.price--on-sale .price__regular { display: none; } body.nv .price.price--on-sale .price__sale { display: inline-flex; align-items: baseline; gap: var(--nv-space-xs); margin: 0; } body.nv .price .price-item.price-item--sale.main-price, body.nv .price .price-item--sale.accent-color-accent-1 { color: rgb(var(--color-base-text)); font-family: var(--font-heading-family); font-size: var(--nv-price-size); font-weight: var(--nv-weight-semibold); letter-spacing: var(--nv-tracking-tight); line-height: var(--nv-lh-tight); } body.nv .price__compare-price { display: inline-flex; align-items: baseline; } body.nv .price__compare-price s, body.nv .price__compare-price .price-item--regular, body.nv .price .main-comapre-price { font-size: var(--nv-text-base); font-weight: var(--nv-weight-regular); color: var(--nv-ink-4); text-decoration: line-through; text-decoration-thickness: 1px; letter-spacing: var(--nv-tracking-normal); font-family: var(--font-body-family); } /* ---------------------------------------------------------------------------- Buy buttons — add to cart AND checkout (retired from the legacy fence) ---------------------------------------------------------------------------- The legacy fence styled these as two separate ~180-line blocks that were declaration-for-declaration identical apart from the selectors and which label element carried the arrow. They are one ruleset here. .main-product-atc is worn by BOTH the main product-form button and the sticky bar's button (blocks/product_sticky-atc.liquid gives it "sticky-atc__add_button button main-product-atc"). Sizing overrides for the sticky variant live in the sticky-ATC section, later in this file. The legacy version set --color-button and --color-base-accent-1 on the element itself with !important, which is why no palette change could ever reach these buttons. Same technique here minus the !important — element-level custom properties still beat :root, and body.nv (0,2,1) beats base.css's .button (0,1,0), so nothing has to shout. :not(.sticky-atc__add_button) matters. The sticky bar's button wears .main-product-atc too, but it lives in a horizontal bar alongside a thumbnail, title and price — applying width:100% and a 56px height to it would wreck that layout and fight base.css's own .sticky-atc--mobile-btn-full / --desktop-btn-full handling. The bar's button is styled separately in the MOBILE section below. ---------------------------------------------------------------------------- */ body.nv .main-product-atc:not(.sticky-atc__add_button), body.nv #CartDrawer-Checkout, body.nv .cart__checkout-button { --color-button: var(--nv-cta); --color-button-text: 255, 255, 255; --alpha-button-background: 1; --alpha-button-border: 0; background: rgb(var(--nv-cta)); background-image: none; color: #FFFFFF; font-family: var(--font-heading-family); font-size: var(--nv-text-sm); font-weight: var(--nv-weight-bold); letter-spacing: var(--nv-tracking-wide); text-transform: uppercase; text-decoration: none; line-height: 1; border: none; border-radius: var(--nv-radius-sm); padding: 2rem var(--nv-space-md); min-height: 5.6rem; width: 100%; box-sizing: border-box; box-shadow: var(--nv-shadow-2); cursor: pointer; transition: transform var(--duration-default) var(--nv-ease-out), box-shadow var(--duration-default) var(--nv-ease), background-color var(--duration-default) var(--nv-ease); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; gap: var(--nv-space-2xs); -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; outline: none; animation: nvAtcBreathe 6s ease-in-out infinite; } /* Softened from the legacy atcBreathe. The old version pulsed scale 1 -> 1.005 AND swelled a six-layer shadow with a 32px -> 40px coloured glow every 4.5s; the shadow swell, not the scale, is what read as a throb. Scale is now 1.003, the glow is gone, and the cycle is slower. Still catches the eye in peripheral vision; no longer looks like the page is breathing. */ @keyframes nvAtcBreathe { 0%, 100% { transform: scale(1); box-shadow: var(--nv-shadow-2); } 50% { transform: scale(1.003); box-shadow: var(--nv-shadow-3); } } /* Softened from atcShimmer: highlight opacity .22 -> .10, cycle 5.5s -> 8s. ---------------------------------------------------------------------------- :not(.sticky-atc__add_button) IS LOAD-BEARING — do not drop it. The sizing rule above already excludes the sticky bar's button, and that rule is where `position: relative` and `overflow: hidden` are declared. This shimmer rule originally did NOT carry the same exclusion, so the pseudo element was created on the sticky bar's button but had no positioned, clipping parent to live in. It therefore resolved its containing block to the fixed bar and swept the FULL WIDTH of the bar (-100% -> 200%) before snapping back — a rogue band tracking across the bar on a loop, with nothing to clip it. Reported as "this weird border on desktop that animates across the bar then jumps back to the original position". The sticky bar's button is a scroll trigger, not the primary CTA; it gets no shimmer at all now, which is also why it needs no clipping context. */ body.nv .main-product-atc:not(.sticky-atc__add_button)::before, body.nv #CartDrawer-Checkout::before, body.nv .cart__checkout-button::before { content: ''; position: absolute; top: 0; inset-inline-start: -100%; width: 55%; height: 100%; background: linear-gradient(115deg, transparent, rgba(255, 255, 255, .10), transparent); animation: nvAtcShimmer 8s ease-in-out infinite; pointer-events: none; z-index: 1; } @keyframes nvAtcShimmer { 0%, 70% { inset-inline-start: -100%; } 100% { inset-inline-start: 200%; } } body.nv .main-product-atc:hover, body.nv #CartDrawer-Checkout:hover, body.nv .cart__checkout-button:hover { background: rgb(var(--nv-cta-hover)); color: #FFFFFF; transform: translateY(-2px); box-shadow: var(--nv-shadow-3); animation: none; } body.nv .main-product-atc:active, body.nv #CartDrawer-Checkout:active, body.nv .cart__checkout-button:active { background: rgb(var(--nv-cta)); transform: translateY(0) scale(.995); box-shadow: var(--nv-shadow-1); animation: none; transition-duration: var(--duration-short); } body.nv .main-product-atc:focus, body.nv #CartDrawer-Checkout:focus, body.nv .cart__checkout-button:focus { outline: none; } body.nv .main-product-atc:focus-visible, body.nv #CartDrawer-Checkout:focus-visible, body.nv .cart__checkout-button:focus-visible { box-shadow: var(--nv-focus-ring); outline: none; animation: none; } body.nv .main-product-atc:disabled, body.nv .main-product-atc[disabled], body.nv #CartDrawer-Checkout:disabled, body.nv .cart__checkout-button:disabled, body.nv .cart__checkout-button[disabled] { background: rgba(var(--color-base-text), .22); color: #FFFFFF; cursor: not-allowed; opacity: .75; transform: none; animation: none; box-shadow: none; } body.nv .main-product-atc:disabled::before, body.nv .main-product-atc[disabled]::before, body.nv #CartDrawer-Checkout:disabled::before, body.nv .cart__checkout-button:disabled::before { display: none; } /* Label sits above the shimmer layer. */ body.nv .main-product-atc .main-atc__label, body.nv .main-product-atc .button__label, body.nv #CartDrawer-Checkout .button__label, body.nv .cart__checkout-button .button__label { display: inline-flex; align-items: center; justify-content: center; gap: var(--nv-space-2xs); position: relative; z-index: 2; color: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; line-height: inherit; margin: 0; background: transparent; } body.nv .main-product-atc .main-atc__label__text { position: relative; z-index: 2; color: inherit; display: inline-flex; align-items: center; } /* The arrow is kept — it was a deliberate affordance in the original. The ATC hangs it off .main-atc__label__text; the checkout buttons hang it off .button__label. Both are listed so the two stay identical. */ body.nv .main-product-atc .main-atc__label__text::after, body.nv #CartDrawer-Checkout .button__label::after, body.nv .cart__checkout-button .button__label::after { content: ' \2192'; display: inline-block; margin-inline-start: var(--nv-space-2xs); font-weight: var(--nv-weight-semibold); opacity: .85; transition: transform var(--duration-default) var(--nv-ease); } body.nv .main-product-atc:hover .main-atc__label__text::after, body.nv #CartDrawer-Checkout:hover .button__label::after, body.nv .cart__checkout-button:hover .button__label::after { transform: translateX(4px); opacity: 1; } body.nv .main-product-atc:active .main-atc__label__text::after, body.nv #CartDrawer-Checkout:active .button__label::after, body.nv .cart__checkout-button:active .button__label::after { transform: translateX(2px); } body.nv .main-product-atc .loading-overlay__spinner, body.nv #CartDrawer-Checkout .loading-overlay__spinner, body.nv .cart__checkout-button .loading-overlay__spinner { position: relative; z-index: 2; } body.nv .main-product-atc .spinner .path, body.nv #CartDrawer-Checkout .spinner .path, body.nv .cart__checkout-button .spinner .path { stroke: #FFFFFF; } body.nv .main-product-atc .main-atc__error { position: relative; z-index: 2; color: #FFFFFF; font-weight: var(--nv-weight-semibold); } /* Desktop step-up for the buy buttons. The base rules above are the mobile tier — the legacy CSS had this the other way round, with a max-width:767px block cutting desktop values down. Same end sizes, mobile-first, and no 767px seam. */ @media screen and (min-width: 750px) { body.nv .main-product-atc, body.nv #CartDrawer-Checkout, body.nv .cart__checkout-button { font-size: var(--nv-text-base); min-height: 6rem; padding: 2.2rem var(--nv-space-md); } } /* ============================================================================ SHARED COMPONENT LANGUAGE — site-wide ---------------------------------------------------------------------------- Originally scoped to the homepage so it could be judged before the proven funnel moved. That scope turned into a bug: testimonial-carousel is used by the homepage AND every product template. With the review-card rules pinned to the homepage, product pages fell back to the section's own stylesheet — pale yellow rating pill, bare verified text, no card treatment. The same component rendering two different ways purely because of where the rules were scoped. Now site-wide. Genuinely page-specific rules keep their own scope: the hero targets .hero-banner__* (homepage-only by markup) and product rules sit under body.nv-tpl--product further down. Nothing here changes copy, section order, or any merchant setting. ============================================================================ */ /* ---- Section rhythm --------------------------------------------------------- spacing_sections is 0 and stays 0 (raising it double-pads the 58 sections that carry their own padding). Instead the homepage gets its air here, where it can be tuned per-section without touching any JSON. -------------------------------------------------------------------------- */ body.nv .shopify-section { --nv-band: transparent; } /* min-block-size, NOT padding. An earlier pass set padding-block here, which REPLACED the per-section padding merchants had already tuned — several sections got visibly shorter as a result. A minimum can only ever add height, so a section that was already generous is left exactly as it was. */ body.nv main > .shopify-section { min-block-size: 0; } /* NO inter-section margin. It was added to restore height after the padding mistake, but every section already carries its own padding — stacking a margin on top produced a dead white band between the hero and the section below it. Sections provide their own rhythm; this only zeroes any inherited margin so nothing doubles up. */ body.nv main > .shopify-section + .shopify-section { margin-block-start: 0; } /* ---- Section headings ------------------------------------------------------- EVERY homepage section names its heading differently — .title, .furniture- heading, .product-showcase__title, .cf-title, .reviews-header h2, .results__content__heading. An earlier pass only caught `.title`, which is why "Our Favorites" went large while "Browse Collections" stayed small. The full list is enumerated here so the page has ONE heading size, not six. -------------------------------------------------------------------------- */ body.nv .title, body.nv .title-wrapper h2, body.nv .section-heading, body.nv .furniture-heading, body.nv .product-showcase__title, body.nv .collection__title > .title, body.nv .results__content__heading, body.nv .reviews-header h2, body.nv .cf-title { font-size: clamp(2.8rem, 4.4vw, 5.2rem); font-weight: var(--nv-weight-bold); letter-spacing: -0.03em; line-height: 1.04; margin-block-end: var(--nv-space-md); text-wrap: balance; } @media screen and (min-width: 750px) { body.nv .title, body.nv .title-wrapper h2, body.nv .furniture-heading, body.nv .product-showcase__title, body.nv .reviews-header h2, body.nv .cf-title { margin-block-end: var(--nv-space-lg); } } body.nv .title-wrapper { margin-block-end: var(--nv-space-lg); } /* ---- Hero ------------------------------------------------------------------- The previous rule targeted .hero-section2__heading, which does not exist — the class is .hero-banner__heading. That is why the hero never changed. -------------------------------------------------------------------------- */ body.nv .hero-banner__heading { font-size: clamp(4.2rem, 8vw, 9.6rem); font-weight: var(--nv-weight-bold); letter-spacing: -0.04em; line-height: 0.95; margin-block-end: var(--nv-space-md); text-wrap: balance; } body.nv .hero-banner__subheading { font-size: clamp(1.6rem, 1.6vw, 2.1rem); line-height: var(--nv-lh-body); max-width: 46ch; margin-block-end: var(--nv-space-lg); opacity: .92; } /* Hero CTA — the accent's first appearance on the page. It was a flat white slab, which disappeared into a pale photo. Coral pill, real elevation. */ body.nv .hero-banner__button { background: rgb(var(--nv-cta)); color: #FFFFFF; border: none; border-radius: var(--nv-radius-pill); padding: 1.8rem 3.4rem; font-weight: var(--nv-weight-bold); letter-spacing: var(--nv-tracking-wide); box-shadow: var(--nv-shadow-3); transition: background-color var(--duration-default) var(--nv-ease), transform var(--duration-default) var(--nv-ease-out), box-shadow var(--duration-default) var(--nv-ease); } @media (hover: hover) and (pointer: fine) { body.nv .hero-banner__button:hover { background: rgb(var(--nv-cta-hover)); transform: translateY(-3px); box-shadow: var(--nv-shadow-4); } } /* ---- Collection circles (Browse Collections) -------------------------------- Static circles read as clip-art. A ring that closes in on hover, plus a lift, makes them feel like controls rather than decoration. -------------------------------------------------------------------------- */ body.nv .collection-title { font-size: var(--nv-text-lg); font-weight: var(--nv-weight-semibold); letter-spacing: var(--nv-tracking-normal); line-height: var(--nv-lh-snug); } /* CLIPPING FIX. .collections-carousel is `overflow-x: auto; overflow-y: hidden`. Per spec, once one axis is auto/scroll the other can never compute to `visible` — so the hover lift and the ring were being sliced off. The only real fix is interior room: pad the scroll box, then pull the same amount back with negative margin so the section's own spacing is unchanged. */ body.nv .collections-carousel { padding-block: var(--nv-space-md); margin-block: calc(var(--nv-space-md) * -1); /* The section draws a visible grey scrollbar under the circles. It has prev/next arrows either side, so the bar is redundant and reads as a stray rule across the layout. Scrolling still works — by drag, wheel, trackpad and keyboard. */ scrollbar-width: none; -ms-overflow-style: none; } body.nv .collections-carousel::-webkit-scrollbar { display: none; } body.nv .collection-image-wrapper { transition: transform var(--duration-default) var(--nv-ease-out), box-shadow var(--duration-default) var(--nv-ease), border-color var(--duration-default) var(--nv-ease); } /* Bigger on desktop — 180px circles were small for a five-across row. */ @media screen and (min-width: 990px) { body.nv .collection-item { width: 26rem; } body.nv .collection-image-wrapper { width: 24rem; height: 24rem; } body.nv .collection-title { font-size: var(--nv-text-xl); } } @media (hover: hover) and (pointer: fine) { body.nv .collection-item:hover .collection-image-wrapper { transform: translateY(-6px) scale(1.03); box-shadow: 0 0 0 3px rgb(var(--color-base-background-1)), 0 0 0 5px rgba(var(--nv-cta), .55), var(--nv-shadow-3); } body.nv .collection-item:hover .collection-title { color: rgb(var(--nv-cta)); } } body.nv .collection-title { transition: color var(--duration-default) var(--nv-ease); } /* "View collection" reads as fine print; make it a deliberate affordance. */ body.nv .view-collection-link { font-size: var(--nv-text-xs); font-weight: var(--nv-weight-semibold); letter-spacing: var(--nv-tracking-wide); text-transform: uppercase; color: var(--nv-ink-3); transition: color var(--duration-default) var(--nv-ease); } @media (hover: hover) and (pointer: fine) { body.nv .collection-item:hover .view-collection-link { color: rgb(var(--nv-cta)); } } body.nv .carousel-nav { width: var(--nv-tap-min); height: var(--nv-tap-min); border-radius: 50%; background: rgb(var(--color-base-background-1)); border: 1px solid var(--nv-line); box-shadow: var(--nv-shadow-2); transition: transform var(--duration-default) var(--nv-ease-out), box-shadow var(--duration-default) var(--nv-ease); } @media (hover: hover) and (pointer: fine) { body.nv .carousel-nav:hover { transform: scale(1.08); box-shadow: var(--nv-shadow-3); } } /* ---- Product / collection cards --------------------------------------------- White cards on the grey band, with a real border rather than relying on a shadow alone. The image scales inside a fixed frame on hover — the card itself does not move, so nothing reflows and nothing shifts under a thumb. -------------------------------------------------------------------------- */ body.nv .card-wrapper .card, body.nv .card--card { background: rgb(var(--color-base-background-1)); border: 1px solid var(--nv-line); border-radius: var(--nv-radius-md); box-shadow: none; overflow: hidden; transition: border-color var(--duration-default) var(--nv-ease), box-shadow var(--duration-default) var(--nv-ease); } body.nv .card__media, body.nv .card .media { overflow: hidden; } body.nv .card__media img, body.nv .card .media img { transition: transform var(--duration-long) var(--nv-ease-out); } @media (hover: hover) and (pointer: fine) { body.nv .card-wrapper:hover .card, body.nv .card-wrapper:hover .card--card { border-color: rgba(var(--color-foreground), .22); box-shadow: var(--nv-shadow-2); } body.nv .card-wrapper:hover .card__media img, body.nv .card-wrapper:hover .card .media img { transform: scale(1.04); } } body.nv .card__content { padding: var(--nv-space-sm); } body.nv .card__heading, body.nv .card__heading a { font-size: var(--nv-text-base); font-weight: var(--nv-weight-medium); line-height: var(--nv-lh-snug); letter-spacing: var(--nv-tracking-normal); } /* ---- Vendor / eyebrow ------------------------------------------------------- The "NEAT VALUES" line above a product title reads as an afterthought at default size. Small-caps with real tracking turns it into a brand signal. -------------------------------------------------------------------------- */ body.nv .caption-with-letter-spacing, body.nv .card__vendor, body.nv .product-showcase__vendor { font-size: var(--nv-text-2xs); font-weight: var(--nv-weight-semibold); letter-spacing: var(--nv-tracking-eyebrow); text-transform: uppercase; color: var(--nv-ink-3); } /* ============================================================================ CUSTOMER REVIEWS — full rebuild ---------------------------------------------------------------------------- The section ships its own