/** Shopify CDN: Minification failed

Line 1857:0 All "@import" rules must come first

**/
/* ==========================================================================
   Veroni theme.css — brand layer on top of Horizon base.css
   Loaded after base.css + theme-styles-variables + color-palette, so these
   rules can safely refine tokens Horizon's settings UI can't reach directly:
   heading tracking, label treatment, gemstone swatches/rail, trust strip,
   ring-size selector, sticky header condense, cart shipping note.
   See CHANGES.md for the full file list this pairs with.
   ========================================================================== */

:root {
  --veroni-bone: #fbf8f2;
  --veroni-sand: #f0eadf;
  --veroni-sand-deep: #e7dcc9;
  --veroni-ink: #211e1a;
  --veroni-ink-2: #625848;
  /* 2026-07-22: darkened from #9a8e7d (3.0:1 on bone — WCAG AA fail for the
     10-12px text this colors: variant legends, captions, breadcrumbs). */
  --veroni-muted: #7a6f5d;
  --veroni-line: #e4dbcc;
  --veroni-gold: #c2a06b;
  --veroni-gold-deep: #a98853;
  --veroni-clay: #b98c6d;

  /* Headlines: sentence case, tight tracking, never wide */
  --letter-spacing--heading-tight: -0.01em;
  --letter-spacing--heading-normal: -0.01em;
}

/* -------------------------------------------------------------------------
   Headings — sentence case only, tight tracking. Horizon's badge/label
   transforms are opted into per-component below, never globally on h*.
   ------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  text-transform: none;
  letter-spacing: -0.01em;
}

/* -------------------------------------------------------------------------
   Small uppercase label / eyebrow utility — 11-12px, weight 600, .14em
   tracking. This is the ONLY place wide tracking is allowed per BRAND.md.
   ------------------------------------------------------------------------- */
.v-label,
.v-eyebrow {
  display: inline-block;
  font-family: var(--font-body--family);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  /* 2026-07-22: was var(--veroni-gold-deep) #A98853 — 3.1:1 on bone, an AA
     fail at 11px. Deeper gold keeps the accent and passes 4.5:1; dark
     sections override to #e2c588 as before. */
  color: #8a6c3e;
}

/* -------------------------------------------------------------------------
   Buttons — ink-on-light / bone-on-dark, minimal radius, lightly tracked.
   Horizon's palette settings already route primary → ink bg / bone text;
   this layer only tightens tracking + radius to brand spec and guarantees
   gold never fills a button.
   ------------------------------------------------------------------------- */
.button,
button.button,
a.button {
  letter-spacing: 0.04em;
  border-radius: 2px;
}

/* -------------------------------------------------------------------------
   Announcement bar — ink background, bone text, tracked uppercase, matches
   the prototype's rotating strip. Horizon's native multi-block + autoplay
   already provides the rotation; this is purely visual.
   ------------------------------------------------------------------------- */
.announcement-bar {
  background: var(--veroni-ink);
  color: var(--veroni-bone);
}

.announcement-bar .announcement-bar__text,
.announcement-bar__slide {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--veroni-bone);
}

.announcement-bar a {
  color: var(--veroni-bone);
}

/* -------------------------------------------------------------------------
   Header wordmark (fix #6). settings.logo is intentionally left blank (see
   CHANGES.md) so Horizon's native text-fallback renders shop.name as plain
   text inside .header-logo__image-container--original (snippets/image.liquid's
   `text_fallback` branch, no wrapping element of its own). Style that text
   as the tracked-out uppercase "VERONI" wordmark per brand spec — the
   underlying text content stays shop.name (full "Veroni Jewelers") for a11y
   and SEO, this is a visual-only transform.
   ------------------------------------------------------------------------- */
.header-logo[data-testid],
.header-logo {
  text-transform: uppercase;
}

.header-logo .header-logo__image-container--original {
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-weight: 500;
  font-size: 20px;
  line-height: 1;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--veroni-ink, #211e1a);
}

.header-logo {
  flex-direction: column;
  gap: 5px;
}

.veroni-header-tagline {
  display: block;
  font-family: 'Hanken Grotesk', var(--font-body--family), sans-serif;
  font-size: 8.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.13em;
  /* letter-spacing adds a dead gap after the last glyph — pull that back.
     Nudge ~1 character right so it optically centers under VERONI. */
  margin-inline-start: 0.65em;
  margin-inline-end: -0.13em;
  text-transform: none;
  white-space: nowrap;
  color: currentColor;
  opacity: 0.72;
}

/* -------------------------------------------------------------------------
   Header condense-on-scroll. assets/veroni-header.js toggles [data-condensed]
   on #header-component once the page scrolls past a small threshold; this
   is a purely additive state on top of Horizon's native sticky mechanism
   (settings.enable_sticky_header), not a replacement for it.
   ------------------------------------------------------------------------- */
#header-component {
  transition: padding-block 0.3s cubic-bezier(0.4, 0.02, 0.2, 1);
}

#header-component[data-condensed='true'] .header__row--top {
  padding-block: 0.4em;
}

#header-component[data-condensed='true'] .header__logo img,
#header-component[data-condensed='true'] .header__logo svg {
  transform: scale(0.88);
  transition: transform 0.3s cubic-bezier(0.4, 0.02, 0.2, 1);
}

/* -------------------------------------------------------------------------
   Variant picker — option labels above every fieldset, Mejuri-register
   (fix #5): 11px uppercase, .08em tracking, muted color. Applies to the
   native variant-picker's <legend> for both Gemstone and Gold Color rows.
   ------------------------------------------------------------------------- */
variant-picker legend,
.variant-option > legend {
  display: block;
  font-family: var(--font-body--family);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--veroni-muted);
  margin-block-end: 10px;
}

variant-picker .variant-option__swatch-value {
  text-transform: none;
  letter-spacing: 0;
  color: var(--veroni-ink);
  font-weight: 400;
  margin-left: 4px;
}

variant-picker .variant-option {
  margin-block-end: 20px;
}

/* -------------------------------------------------------------------------
   Gemstone swatches (PDP variant picker) — circular color chips rendered
   SERVER-SIDE by snippets/variant-main-picker.liquid (Veroni fork of
   Horizon's native snippet), via snippets/veroni-gemstone-hex.liquid's
   Liquid case/when color map. Fix #2/#8: tightened to 24px bare circles,
   selected state = 1px ink ring offset 2px (not a thick border/scale
   treatment), no button/pill chrome from Horizon's native
   `.variant-option__button-label` box. Selected state is driven by the
   native `input:checked` (no JS, no [aria-checked] attribute) so it
   survives Horizon's AJAX variant morph automatically — the morph re-fetches
   this same server-rendered markup for the new variant.
   ------------------------------------------------------------------------- */

/* Horizon renders each fieldset as flex-wrap with big gap-sm spacing and
   min-height/min-width-driven "pill" buttons (see
   .variant-option__button-label in base.css: flex: 0 0 3.25em,
   min-height: 3.25em, padding-block/inline). That chrome is what produced
   the "huge empty pill rows" bug — reset it to a tight wrap row wherever a
   label has been server-rendered as a swatch/pill/square
   (snippets/variant-main-picker.liquid). */
fieldset.variant-option--buttons:has(.v-gem-swatch-wrap, .v-gem-pill-wrap, .v-gold-square-wrap) {
  gap: 8px 10px;
}

label.variant-option__button-label.v-gem-swatch-wrap,
label.variant-option__button-label.v-gold-square-wrap {
  display: inline-flex;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  min-width: 0;
  min-height: 0;
  overflow: visible;
}

/* Kill Horizon's native ::before/::after fake-border layers and the
   absolutely-positioned .variant-option__button-label__pill fill — these
   are what left an empty box (or swallowed our swatch's dot) behind/under
   our injected circle on the selected item. Fix #5a extends this same
   suppression to .v-initial-chip-wrap: without it, Horizon's native
   animated pill/border chrome shows through underneath the tidy-grid chip
   styling below, the same "double border" contamination bug fixed for the
   gemstone/gold-color swatches. */
label.variant-option__button-label.v-gem-swatch-wrap::before,
label.variant-option__button-label.v-gem-swatch-wrap::after,
label.variant-option__button-label.v-gold-square-wrap::before,
label.variant-option__button-label.v-gold-square-wrap::after,
label.variant-option__button-label.v-initial-chip-wrap::before,
label.variant-option__button-label.v-initial-chip-wrap::after {
  content: none;
  display: none;
}

label.variant-option__button-label.v-gem-swatch-wrap .variant-option__button-label__pill,
label.variant-option__button-label.v-gold-square-wrap .variant-option__button-label__pill,
label.variant-option__button-label.v-initial-chip-wrap .variant-option__button-label__pill {
  display: none;
}

.v-gem-swatch {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid rgba(33, 30, 26, 0.12);
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: box-shadow 0.15s ease;
  position: relative;
  z-index: 2;
  overflow: hidden;
  background-color: #f3efe7;
}

/* Photographic webp swatches (Galaxy Gold style) — preferred when the
   stone has a theme asset. Falls back to CSS hex fills for unmapped stones. */
.v-gem-swatch--photo {
  width: 40px;
  height: 40px;
  border-color: rgba(33, 30, 26, 0.18);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4), 0 1px 2px rgba(33, 30, 26, 0.08);
}

.v-gem-swatch--photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  pointer-events: none;
}

/* Make gemstone photo options easier to see / tap (GG-style presence) */
label.variant-option__button-label.v-gem-swatch-wrap:has(.v-gem-swatch--photo) {
  padding: 2px;
}
.variant-option__button-label input:checked ~ .v-gem-swatch--photo {
  box-shadow: 0 0 0 1px var(--veroni-ink, #211e1a), 0 0 0 3px var(--veroni-bone, #fbf8f2);
  outline: 1px solid var(--veroni-ink, #211e1a);
  outline-offset: 2px;
}

/* Deploy stamp 2026-08-03e — Mejuri grids + UX pass */
.v-deploy-stamp-20260803e { --v-deploy: 5; }

.variant-option__button-label input:checked ~ .v-gem-swatch {
  box-shadow: 0 0 0 1px var(--veroni-ink, #211e1a), 0 0 0 3px var(--veroni-bone, #fbf8f2);
  outline: 1px solid var(--veroni-ink, #211e1a);
  outline-offset: 2px;
}

.v-gem-swatch:focus-visible {
  outline: 1px solid var(--veroni-gold-deep);
  outline-offset: 2px;
}

.v-gem-swatch--multi {
  background: conic-gradient(from 20deg, #a83246, #d99f38, #2f8f66, #2f5389, #9b6bb0, #a83246);
}

/* Fix #5b (owner report, 2026-07-14): Diamond needs to read PREMIUM and be
   visually distinct from White Topaz — both share the same base hex
   (#E6E1D7) but White Topaz stays a flat milky circle while Diamond gets a
   glassy/prismatic treatment: a radial-gradient white "core" (::before,
   layered via the swatch's own background so it still respects the 24px
   circle's border-radius) + a faint conic prismatic rim (::after, additive
   blend so it only ever brightens/tints, never muddies) + a small inner
   highlight. Tasteful, not gaudy — no rainbow saturation, just a hint of
   color at the rim. Assigned server-side in snippets/variant-main-picker.liquid
   via snippets/veroni-gemstone-hex.liquid's "special" tag. */
.v-gem-swatch--diamond {
  background: radial-gradient(circle at 32% 28%, #ffffff 0%, #ffffff 24%, #f2f0ea 48%, #e2ddd1 76%, #cec8ba 100%);
}

.v-gem-swatch--diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(184, 214, 255, 0.32) 20deg,
    rgba(255, 255, 255, 0) 45deg,
    rgba(255, 205, 214, 0.28) 90deg,
    rgba(255, 255, 255, 0) 115deg,
    rgba(206, 255, 214, 0.28) 160deg,
    rgba(255, 255, 255, 0) 185deg,
    rgba(255, 240, 180, 0.28) 230deg,
    rgba(255, 255, 255, 0) 255deg,
    rgba(184, 214, 255, 0.28) 300deg,
    rgba(255, 255, 255, 0) 330deg,
    rgba(255, 255, 255, 0) 360deg
  );
  mix-blend-mode: screen;
  pointer-events: none;
}

.v-gem-swatch--diamond::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 32%;
  height: 20%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 75%);
  pointer-events: none;
}

/* Text-pill fallback for unmapped gemstone values / Initial chips — kept
   compact (not the 3.25em native button box) but still legible as a chip. */
.v-gem-pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 30px;
  height: 24px;
  padding: 0 10px;
  border-radius: 100px;
  border: 1px solid var(--veroni-line);
  background: var(--veroni-bone);
  font-size: 11px;
  color: var(--veroni-ink);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.variant-option__button-label input:checked ~ .v-gem-pill {
  border-color: var(--veroni-ink);
  background: var(--veroni-ink);
  color: var(--veroni-bone);
}

.v-gem-swatch-label {
  margin-block-start: 8px;
  font-size: 13px;
  color: var(--veroni-ink-2);
}

/* "Gemstone — Ruby" microlabel above the swatch row, mirrors the Gold
   Color microtext treatment (fix #2). */
.v-gem-swatch-microtext {
  font-family: var(--font-body--family);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--veroni-ink-2);
  margin: -4px 0 10px;
}

label.variant-option__button-label.v-gem-pill-wrap {
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
  flex: 0 0 auto;
}

label.variant-option__button-label.v-gem-pill-wrap::before,
label.variant-option__button-label.v-gem-pill-wrap::after {
  content: none;
  display: none;
}

.v-initial-fieldset .variant-option__button-label {
  border-radius: 2px;
}

/* "Initial" option values (A-Z) always stay plain text chips, never
   swatches — server-rendered as .v-initial-chip inside Horizon's native
   .variant-option__button-label__text span (variant-main-picker.liquid). */
.v-initial-chip {
  font-weight: 500;
}

/* Fix #5a (owner report, 2026-07-14): Ilaria's "Initial" chips (A-Z) inherit
   Horizon's native variable-width pill button (flex: 0 0 3.25em + min-width:
   fit-content — see base.css), which produces a ragged, unevenly-sized row
   as letter widths differ. Reset to a uniform tidy grid: equal-size chips,
   consistent padding, aligned rows, 8px gaps, ink border when selected
   (never a swatch/gradient — Initial stays text per spec). */
label.variant-option__button-label.v-initial-chip-wrap {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-width: 36px;
  height: 36px;
  padding: 0 8px;
  margin: 0;
  border: 1px solid var(--veroni-line, #e4dbcc);
  border-radius: 2px;
  background: var(--veroni-bone, #fbf8f2);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* Equal 8px gaps specifically for the Initial fieldset — takes priority
   over the generic 10px gap the "czar polish pass" rule below applies to
   every .product-details fieldset.variant-option--buttons. */
.product-details fieldset.variant-option--buttons.v-initial-fieldset {
  gap: 8px;
}

label.variant-option__button-label.v-initial-chip-wrap:has(input:checked) {
  border-color: var(--veroni-ink, #211e1a);
  box-shadow: inset 0 0 0 1px var(--veroni-ink, #211e1a);
}

label.variant-option__button-label.v-initial-chip-wrap:has(input:focus-visible) {
  outline: 1px solid var(--veroni-ink, #211e1a);
  outline-offset: 2px;
}

/* -------------------------------------------------------------------------
   Gold Color squares (PDP variant picker) — fix #3: Mejuri-style ~28px
   squares, rounded 4px, metal-tone fills, selected = 1px ink border.
   "Gold color — Yellow" microtext rendered SERVER-SIDE above the row by
   snippets/variant-main-picker.liquid, via veroni-gold-color-hex.liquid.
   ------------------------------------------------------------------------- */
.v-gold-color-microtext {
  font-family: var(--font-body--family);
  font-size: 11px;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--veroni-ink-2);
  margin: -4px 0 10px;
}

.v-gold-square {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  border: 1px solid rgba(33, 30, 26, 0.14);
  margin: 0;
  cursor: pointer;
  transition: border-color 0.15s ease;
  position: relative;
  z-index: 2;
}

.variant-option__button-label input:checked ~ .v-gold-square {
  border: 1px solid var(--veroni-ink, #211e1a);
  box-shadow: 0 0 0 1px var(--veroni-ink, #211e1a), 0 0 0 3px var(--veroni-bone, #fbf8f2);
  outline: 1px solid var(--veroni-ink, #211e1a);
  outline-offset: 2px;
}

/* Box-model reset for .v-gold-square-wrap lives in the gemstone-swatch
   block above (shared selector with .v-gem-swatch-wrap) so both native
   pill/border/pseudo-element chrome sources are killed identically. */

/* -------------------------------------------------------------------------
   Trust strip — under add-to-bag on PDP, and the global strip under the
   hero. Neutral text, one small gold dot marker — never a colored block.
   ------------------------------------------------------------------------- */
.v-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-size: 12px;
  letter-spacing: 0.02em;
  color: var(--veroni-ink-2);
  margin-block: 18px;
}

.v-trust-strip__item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.v-trust-strip__item::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--veroni-gold);
  flex: 0 0 auto;
}

/* -------------------------------------------------------------------------
   Ring size selector — required line-item property dropdown.
   ------------------------------------------------------------------------- */
.v-ring-size {
  margin-block: 18px;
}

.v-ring-size label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--veroni-ink);
  margin-block-end: 8px;
}

.v-ring-size select {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--veroni-line);
  border-radius: 2px;
  background: var(--veroni-bone);
  color: var(--veroni-ink);
  font-family: var(--font-body--family);
  font-size: 14px;
}

.v-ring-size__note {
  margin-block-start: 8px;
  font-size: 12px;
  color: var(--veroni-muted);
}

/* -------------------------------------------------------------------------
   Gemstone rail (homepage) — circular collection links.
   ------------------------------------------------------------------------- */
.v-gem-rail {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  padding-block-end: 8px;
  scrollbar-width: thin;
}

.v-gem-rail__item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  width: 76px;
}

.v-gem-rail__dot {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  box-shadow: 0 3px 12px rgba(33, 30, 26, 0.16), inset 0 2px 5px rgba(255, 255, 255, 0.4);
  transition: transform 0.22s cubic-bezier(0.4, 0.02, 0.2, 1);
}

.v-gem-rail__item:hover .v-gem-rail__dot {
  transform: translateY(-4px) scale(1.05);
}

.v-gem-rail__label {
  font-size: 11.5px;
  color: var(--veroni-ink-2);
  letter-spacing: 0.01em;
}

/* -------------------------------------------------------------------------
   Cart drawer — always-on free-shipping message (no threshold meter, since
   shipping is free on every order).
   ------------------------------------------------------------------------- */
.v-ship-message {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  font-size: 12.5px;
  color: var(--veroni-ink-2);
  border-block-end: 1px solid var(--veroni-line);
}

.v-ship-message::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--veroni-gold);
  flex: 0 0 auto;
}

.v-ship-message b {
  color: var(--veroni-ink);
  font-weight: 600;
}

/* -------------------------------------------------------------------------
   Editorial strip / value props (homepage)
   ------------------------------------------------------------------------- */
.v-editorial-strip {
  text-align: center;
  padding-block: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}

.v-editorial-strip h2 {
  max-width: 24ch;
  margin-inline: auto;
}

.v-editorial-strip h2 em {
  font-family: var(--font-secondary--family, Georgia, serif);
  font-style: italic;
  font-weight: 400;
  color: var(--veroni-gold-deep);
}

.v-value-props {
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  margin-block-start: 28px;
  font-size: 13px;
  color: var(--veroni-ink-2);
}

/* -------------------------------------------------------------------------
   "You may also like" recommendations (fix #7). Horizon renders 4 skeleton
   ghost boxes server-side (section.settings.columns) before the
   <product-recommendations> custom element hydrates via the Section
   Rendering API — with only 1-2 real products in the store, that mismatch
   (4 empty boxes -> 1-2 real cards) is what showed up as "empty ghost
   cards" on live inspection. Horizon already self-hides the whole element
   when the hydrated fetch finds zero products
   (`product-recommendations:has([data-has-recommendations='false'])` in
   base.css); this adds the "fewer than 2" threshold from the spec and
   hides the pre-hydration skeleton flash entirely rather than showing it.
   assets/veroni-recommendations.js does the post-hydration product-count
   check (an attribute selector can't count children).
   ------------------------------------------------------------------------- */
product-recommendations .product-recommendations__skeleton-item {
  display: none;
}

product-recommendations[data-veroni-hide] {
  display: none !important;
}

/* =========================================================================
   PDP rebuild — fix #5 (typography/spacing pass, PDP priority) + fix #2
   (buy box above the fold, sticky, 2-col media grid, mobile carousel).
   Owner rejected the previous pass as "amateur"; this section is the
   canonical token set — title/price/labels/body/buttons/hairlines/
   section-spacing all pinned to exact values rather than left to Horizon
   presets, and any bold-heavy/oversized remnants from the old pass are
   overridden here (scoped to the PDP surfaces, so it can't regress other
   pages that may still want Horizon defaults).
   ========================================================================= */

html {
  scroll-behavior: smooth;
}

/* Global elegance pass: slightly denser, quieter type scale so the site
   reads as refined luxury rather than large-display marketing. Fonts stay
   the same (Cormorant / Inter / Hanken); only sizes pull back. */
body {
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* SKU predictive search: tighter product tiles for staff lookup */
.v-search--sku .predictive-search-results__title {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.v-search--sku .predictive-search-results__wrapper-products {
  gap: 8px;
}

.product-information {
  /* Buy column ~ Mejuri-scale sticky panel; gallery takes the rest */
  --v-buybox-max-width: min(420px, 35vw);
}

/* Kill any leftover bold-heavy / oversized headings inside the PDP details
   column — h1 here is the product title, governed by .v-title instead. */
.product-details h1,
.product-details h2,
.product-details h3 {
  font-weight: 400;
}

/* Hairlines everywhere on the PDP: one consistent color/weight. */
.product-information hr,
.product-information ._divider,
.v-accordion,
.v-accordion__item {
  border-color: var(--veroni-line, #e4dbcc) !important;
}

/* Buy box column: sticky under the header, capped width, generous internal
   rhythm so title/price/swatches/ring-size/quantity+ATC all fit above the
   fold at 1440x900 without scrolling (fix #2). */
@media screen and (min-width: 750px) {
  .product-details.sticky-content--desktop {
    position: sticky;
    top: calc(var(--header-group-height, 0px) + 32px);
    max-width: var(--v-buybox-max-width);
    align-self: start;
    /* Let the complete buy box determine the product row height. */
    max-height: none;
    overflow: visible;
  }

  .product-information .product-details > .group-block {
    max-width: var(--v-buybox-max-width);
  }
}

/* Buy-buttons block: quantity + Add to Cart only (accelerated-checkout is
   stripped from the block tree in templates/product.json — fix #6). Fill
   width, 44px height, ink fill, no radius > 2px, tracked uppercase label. */
.product-information .buy-buttons-block {
  display: block;
  margin-block-start: 22px;
}

.product-information .product-form-buttons {
  gap: 12px;
}

.product-information button.add-to-cart-button,
.product-information .add-to-cart-button.button {
  width: 100%;
  height: 44px;
  border-radius: 2px;
  background: var(--veroni-ink, #211e1a);
  color: var(--veroni-bone, #fbf8f2);
  border: none;
  font-family: var(--font-body--family);
  font-size: 12px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.product-information .quantity-selector {
  height: 44px;
  border-radius: 2px;
  border-color: var(--veroni-line, #e4dbcc);
}

/* Never render Buy-with-Shop / dynamic checkout anywhere (fix #6):
   belt-and-suspenders alongside removing the block from the JSON tree —
   this hides it even if a merchant re-adds the block via the editor. */
.accelerated-checkout-block,
.shopify-payment-button {
  display: none !important;
}

/* Section spacing — generous, editorial (48-72px), replacing tighter
   Horizon defaults on the PDP's own sections only. */
.product-information {
  padding-block: 48px;
}

@media screen and (min-width: 990px) {
  .product-information {
    padding-block: 72px;
  }
}

/* Mobile: buy box immediately follows the edge-to-edge carousel, no sticky
   positioning, generous top spacing instead of a hard cut. */
@media screen and (max-width: 749px) {
  .product-details {
    margin-block-start: 28px;
  }
}

/* === czar polish pass 2026-07-09: swatch rows + quiet scrollbar === */
.product-details fieldset.variant-option--buttons{display:flex !important;flex-wrap:wrap;gap:10px;align-items:center;border:0;padding:0;margin:0 0 4px}
.product-details fieldset.variant-option--buttons > *{flex:0 0 auto;width:auto;min-width:0;margin:0}
.product-details .v-gem-swatch-microtext{flex:0 0 100%;margin:0 0 6px}
.sticky-content--desktop{scrollbar-width:thin;scrollbar-color:transparent transparent}
.sticky-content--desktop::-webkit-scrollbar{width:0;height:0}

/* === accordion-center pass 2026-07-09 === */
#more-details .veroni-pdp-details__inner, #more-details details, #more-details .accordion, #more-details > div{max-width:720px;margin-left:auto;margin-right:auto}

/* === layout stability pass 2026-07-09 (v1-beta prep) === */
/* option labels + legends occupy their own full row — the swatch grid below
   never reflows, no matter how long the selected value's name is */
.product-details fieldset.variant-option--buttons > legend{flex:0 0 100%;width:100%}
.product-details fieldset.variant-option--buttons > [class*="microtext"]{flex:0 0 100%;width:100%;margin:0 0 6px;min-height:18px}
/* uniform initial chips: fixed square cells regardless of glyph width */
.product-details label.v-initial-chip-wrap{flex:0 0 40px;width:40px;height:40px !important;min-height:40px !important;display:inline-flex;align-items:center;justify-content:center;padding:0 !important;box-sizing:border-box}

/* ==========================================================================
   FULL-SITE DESIGN SYSTEM (2026-07-17) — homepage, collections, birthstones
   hub, about, utility pages, mega-menu, cart cross-sell. Ports the
   owner-approved mockup (_design/mockups_v1/veroni.css) into Horizon's
   idiom: reuses .section / .section--page-width (base.css) for containers
   instead of a competing wrapper class, and the existing --veroni-* tokens
   above instead of redefining them. Component CSS lives with its section
   file via {% stylesheet %} where it's single-use; only primitives shared
   across multiple templates (gem dots, quiet link, body copy, mega menu)
   live here.
   ========================================================================== */

/* ---- Shared type utilities ------------------------------------------------ */
.v-link-quiet {
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--veroni-ink);
  border-bottom: 1px solid var(--veroni-gold);
  padding-bottom: 2px;
  transition: color 0.2s, border-color 0.2s;
}
.v-link-quiet:hover {
  color: var(--veroni-gold-deep);
  border-bottom-color: var(--veroni-gold-deep);
}
.v-body-2 {
  font-size: 14px;
  line-height: 1.65;
  color: var(--veroni-ink-2);
}
.v-micro {
  font-size: 12px;
  color: var(--veroni-muted);
  letter-spacing: 0.02em;
}
.v-hairline {
  border: none;
  border-top: 1px solid var(--veroni-line);
  margin: 0;
}
.v-fx {
  font-family: var(--font-secondary--family, Georgia, serif);
  font-style: italic;
  font-weight: 400;
}

/* ---- Gem dot — the swatch language shared by mega-menu, product cards,
   gemstone rail, filter panels, month tiles, password page (24px PDP scale,
   with --sm/--cab/--diamond/--multi/--alexandrite modifiers, matching the
   approved mockup's .gem system 1:1 but namespaced .v-gem to match this
   theme's existing .v-gem-swatch / .v-gem-rail conventions). ---- */
.v-gem {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex: 0 0 auto;
  border: 1px solid rgba(33, 30, 26, 0.12);
  position: relative;
  display: inline-block;
}
.v-gem--sm {
  width: 10px;
  height: 10px;
  border-width: 0.5px;
}
.v-gem--multi {
  background: conic-gradient(from 20deg, #a83246, #d99f38, #2f8f66, #2f5389, #9b6bb0, #a83246);
}
.v-gem--diamond {
  background: radial-gradient(circle at 32% 28%, #fff 0%, #fff 24%, #f2f0ea 48%, #e2ddd1 76%, #cec8ba 100%);
}
.v-gem--diamond::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  mix-blend-mode: screen;
  pointer-events: none;
  background: conic-gradient(
    from 0deg,
    rgba(255, 255, 255, 0) 0deg,
    rgba(184, 214, 255, 0.32) 20deg,
    rgba(255, 255, 255, 0) 45deg,
    rgba(255, 205, 214, 0.28) 90deg,
    rgba(255, 255, 255, 0) 115deg,
    rgba(206, 255, 214, 0.28) 160deg,
    rgba(255, 255, 255, 0) 185deg,
    rgba(255, 240, 180, 0.28) 230deg,
    rgba(255, 255, 255, 0) 255deg,
    rgba(184, 214, 255, 0.28) 300deg,
    rgba(255, 255, 255, 0) 330deg
  );
}
.v-gem--diamond::after {
  content: '';
  position: absolute;
  top: 18%;
  left: 22%;
  width: 32%;
  height: 20%;
  border-radius: 50%;
  pointer-events: none;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0) 75%);
}
.v-gem--alexandrite {
  background: linear-gradient(135deg, #4e8c7e 20%, #6355a8 80%);
}
/* Cabochon treatment — jewel-case rails & month tiles (gloss + rest shadow) */
.v-gem--cab {
  box-shadow: 0 3px 12px rgba(33, 30, 26, 0.16), inset 0 2px 5px rgba(255, 255, 255, 0.4),
    inset 0 -3px 6px rgba(33, 30, 26, 0.18);
  background-image: radial-gradient(
    circle at 34% 26%,
    rgba(255, 255, 255, 0.5) 0%,
    rgba(255, 255, 255, 0.14) 26%,
    rgba(255, 255, 255, 0) 44%
  );
}
.v-gem--cab.v-gem--multi {
  background-image: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0) 44%),
    conic-gradient(from 20deg, #a83246, #d99f38, #2f8f66, #2f5389, #9b6bb0, #a83246);
}
.v-gem--cab.v-gem--diamond {
  background-image: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.55) 0%, rgba(255, 255, 255, 0.16) 26%, rgba(255, 255, 255, 0) 44%),
    radial-gradient(circle at 32% 28%, #fff 0%, #fff 24%, #f2f0ea 48%, #e2ddd1 76%, #cec8ba 100%);
}
.v-gem--cab.v-gem--alexandrite {
  background-image: radial-gradient(circle at 34% 26%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.14) 26%, rgba(255, 255, 255, 0) 44%),
    linear-gradient(135deg, #4e8c7e 20%, #6355a8 80%);
}

/* ---- "Gemstones" mega-menu (forked blocks/_header-menu.liquid renders
   veroni-mega-gemstones inside Horizon's stock .menu-list__submenu chrome,
   so open/close/positioning/animation stay native — only this inner content
   is custom). ---- */
.v-mega-menu {
  padding-block: 36px 40px;
}
.v-mega-menu .v-mega-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
}
.v-mega__stones {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px 28px;
  align-content: start;
}
.v-mega__stone-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 7px 0;
  font-size: 13.5px;
  color: var(--veroni-ink);
  transition: color 0.15s;
}
.v-mega__stone-link:hover {
  color: var(--veroni-gold-deep);
}
.v-mega__all {
  margin-top: 22px;
  display: inline-block;
}
.v-mega__aside {
  border-left: 1px solid var(--veroni-line);
  padding-left: 44px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.v-mega__aside img,
.v-mega__aside-swatch {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: 2px;
}
@media screen and (max-width: 989px) {
  .v-mega-menu .v-mega-inner {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  .v-mega__aside {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid var(--veroni-line);
    padding-top: 24px;
  }
}

/* ---- Homepage video banner — copy sits lower on desktop without clipping ---- */
.vhc--banner .vhc__overlay {
  padding: 0 5% clamp(20px, 10%, 48px) !important;
  box-sizing: border-box;
}
@media screen and (min-width: 750px) {
  .vhc--banner .vhc__overlay {
    /* ~10% of frame lower than original 11.5% bottom padding; floor keeps clear of edge */
    padding: 0 5% clamp(22px, 4.5vh, 5.5%) !important;
  }
}
@media screen and (min-width: 1200px) {
  .vhc--banner .vhc__overlay {
    padding-bottom: clamp(24px, 4.2%, 5%) !important;
  }
}
@media screen and (max-width: 749px) {
  .vhc--banner .vhc__overlay {
    padding: 0 4% clamp(18px, 9%, 36px) !important;
  }
}
.vhc--banner .vhc__copy-block {
  max-height: 42%;
}

/* ---- Product grid + card — Mejuri-style: clean white plate, sharp product,
   quiet type, generous rhythm. Shared homepage / collections / search.
   Thumbnails ~20% larger via wider page, roomier min tracks, tighter plate padding. ---- */
.v-product-grid {
  display: grid;
  /* fewer/wider tracks so each plate is ~20% larger than the old 4-up */
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 22px;
}
@media screen and (min-width: 1280px) {
  .v-product-grid {
    grid-template-columns: repeat(4, minmax(240px, 1fr));
    gap: 48px 22px;
  }
}
@media screen and (max-width: 900px) {
  .v-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px 14px;
  }
}
@media screen and (max-width: 480px) {
  .v-product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 10px;
  }
}
.v-card {
  position: relative;
}
.v-card__media {
  display: block;
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 0;
  background: #fff;
  border: 1px solid rgba(33, 30, 26, 0.06);
}
.v-card__img,
.v-card__img--placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  /* less plate padding = product reads ~20% larger inside the box */
  padding: var(--veroni-thumb-pad, 2.5%);
  transition: opacity 0.28s ease, transform 0.55s cubic-bezier(0.22, 1, 0.36, 1);
  image-rendering: auto;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Horizon native product cards + resource cards — same larger plate treatment */
.product-card__image,
.product-card .product-media img,
.product-card__media img,
.card-gallery img,
.resource-card__image img,
.collection-card img {
  object-fit: contain !important;
  object-position: center;
  padding: var(--veroni-thumb-pad, 2.5%);
  box-sizing: border-box;
}
.product-card__image-wrapper,
.product-card__media,
.card-gallery,
.resource-card__media {
  background: #fff;
}
.v-card__img--placeholder {
  background: linear-gradient(135deg, #f7f3eb, #efe7d8);
  padding: 0;
}
.v-card__img-alt {
  opacity: 0;
}
.v-card:hover .v-card__img-alt {
  opacity: 1;
}
.v-card:hover .v-card__media .v-card__img {
  transform: scale(1.03);
}
.v-card__quick {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40px;
  background: rgba(255, 255, 255, 0.96);
  border: none;
  border-top: 1px solid rgba(33, 30, 26, 0.06);
  border-radius: 0;
  color: var(--veroni-ink);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.v-card__availability {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 3;
  padding: 5px 8px;
  background: rgba(255,255,255,.92);
  color: var(--veroni-ink);
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.v-card:hover .v-card__quick {
  opacity: 1;
  transform: none;
}
@media (hover: none) {
  .v-card__quick {
    display: none;
  }
}
.v-card__info {
  padding-top: 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.v-card__name {
  font-size: 13px;
  font-weight: 500;
  margin: 0;
  letter-spacing: 0.01em;
  line-height: 1.3;
}
.v-card__desc {
  font-size: 11.5px;
  color: var(--veroni-muted, #7a6f5d);
  margin: 0;
}
.v-card__price {
  font-size: 12.5px;
  color: var(--veroni-ink);
  margin: 4px 0 0;
}
.v-card__from {
  color: var(--veroni-muted);
}
.v-card__stones {
  display: flex;
  align-items: center;
  gap: 5px;
  margin-top: 7px;
}
.v-card__more {
  font-size: 11px;
  color: var(--veroni-muted);
  margin-left: 2px;
  letter-spacing: 0.02em;
}
.v-card__name a {
  color: inherit;
}
.v-card__metals {
  display: flex;
  align-items: center;
  gap: 3px;
  margin-top: 7px;
  min-height: 24px;
}
.v-card__metal-label {
  color: var(--veroni-muted);
  font-size: 10px;
  letter-spacing: 0.06em;
  margin-right: 3px;
  text-transform: uppercase;
}
.v-card__metal {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid transparent;
  border-radius: 50%;
  padding: 0;
  background: transparent;
  cursor: pointer;
}
.v-card__metal:hover,
.v-card__metal.is-selected {
  border-color: var(--veroni-ink-2);
}
.v-card__metal:focus-visible {
  outline: 2px solid var(--veroni-ink);
  outline-offset: 2px;
}
.v-card__metal-dot {
  width: 14px;
  height: 14px;
  display: block;
  border-radius: 50%;
  border: 1px solid rgba(33, 30, 26, 0.14);
}
.v-card__metal-dot--yellow {
  background: linear-gradient(135deg, #f7e7b7, #c49a42);
}
.v-card__metal-dot--white {
  background: linear-gradient(135deg, #ffffff, #b9bdc3);
}
.v-card__metal-dot--rose {
  background: linear-gradient(135deg, #f2d4cc, #bd7f72);
}

/* Editorial tile — one per collection grid, spans 2 columns, on-body imagery
   over a headline; see sections/veroni-collection-grid.liquid. */
.v-card--edit {
  grid-column: span 2;
}
.v-card--edit .v-card__media {
  aspect-ratio: 1.64 / 1;
}
.v-card--edit .v-card__media::after {
  content: '';
  position: absolute;
  inset: 0;
  /* Top scrim added so the tag label stays legible over light photo tops. */
  background:
    linear-gradient(to bottom, rgba(33, 30, 26, 0.32), rgba(33, 30, 26, 0) 32%),
    linear-gradient(to top, rgba(33, 30, 26, 0.38), rgba(33, 30, 26, 0) 46%);
}
.v-card--edit .v-card__line {
  position: absolute;
  left: 22px;
  bottom: 18px;
  right: 22px;
  z-index: 2;
  color: var(--veroni-bone);
  font-family: var(--font-secondary--family, Georgia, serif);
  font-style: italic;
  font-size: clamp(17px, 1.6vw, 22px);
  line-height: 1.35;
}
.v-card--edit .v-card__tag {
  position: absolute;
  left: 22px;
  top: 18px;
  z-index: 2;
  color: rgba(251, 248, 242, 0.85);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
@media screen and (max-width: 760px) {
  .v-card--edit {
    grid-column: span 2;
  }
}

/* === legacy-viewport fallback 2026-07-17: older Safari lacks dvh === */
@supports not (height: 100dvh) {
  .page-wrapper { height: 100vh; }
}

/* ==========================================================================
   VERONI REDESIGN — LOS ANGELES COLOR ATELIER (2026-07-20)
   A complete visual system over Horizon's reliable commerce primitives.
   Cinematic campaign surfaces, gallery-scale whitespace, square controls,
   and a consistent high-contrast editorial register across every template.
   ========================================================================== */

:root {
  --veroni-canvas: #f8f5ee;
  --veroni-paper: #fffdf8;
  --veroni-night: #171513;
  --veroni-bronze: #8c6546;
  /* ~20% wider canvas so product thumbnails can grow with it */
  --page-width: 1920px;
  --veroni-thumb-pad: 2.5%;
}

body {
  background: var(--veroni-canvas);
  color: var(--veroni-ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::selection { background: #c9a772; color: #171513; }

a { text-underline-offset: .18em; }

.section--page-width,
.page-width {
  width: min(100%, var(--page-width));
  margin-inline: auto;
}

.button,
button.button,
a.button,
.button-secondary {
  min-height: 50px;
  padding-inline: 28px;
  border-radius: 0 !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .11em;
  text-transform: uppercase;
  transition: background-color .24s ease, color .24s ease, border-color .24s ease, transform .24s ease;
}
.button:hover,
button.button:hover,
a.button:hover { transform: translateY(-1px); }

/* Global header — transparent over campaign pages; ivory glass on scroll. */
#header-component {
  backdrop-filter: saturate(130%);
}
#header-component .header__row--top {
  min-height: 74px;
  padding-inline: var(--page-margin, clamp(20px, 4vw, 56px));
}
#header-component .header__columns {
  gap: clamp(18px, 2vw, 34px);
}
#header-component .menu-list__link {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .055em;
}
.header-logo .header-logo__image-container--original {
  font-size: clamp(18px, 1.55vw, 23px);
  letter-spacing: .24em;
}
.header[transparent]:not([data-sticky-state='active']) .header-logo .header-logo__image-container--original {
  color: currentColor;
}
#header-component[data-sticky-state='active'] .header__underlay-closed {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(16px);
}
.announcement-bar .announcement-bar__text,
.announcement-bar__slide {
  font-size: 9.5px;
  letter-spacing: .18em;
}

/* Shared section typography becomes campaign-scale, not theme-default. */
.v-section-head {
  align-items: end;
  margin-block-end: clamp(38px, 5.5vw, 76px);
}
.v-section-head__h {
  max-width: 16ch;
  margin-top: 14px;
  font-size: clamp(42px, 5.7vw, 82px);
  font-weight: 400;
  line-height: .95;
  letter-spacing: -.045em;
}
.v-link-quiet {
  padding-bottom: 5px;
  border-bottom-color: var(--veroni-ink);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
}

/* Product merchandising — dense enough for a large catalog, luxurious in
   rhythm, and still fast: two images only, no hidden carousel machinery. */
.v-product-grid {
  gap: clamp(42px, 5vw, 78px) 12px;
}
.v-card__media {
  border-radius: 0;
  background: #fff;
}
.v-card__img,
.v-card__img--placeholder {
  transition: opacity .4s ease, transform 1s cubic-bezier(.22,1,.36,1);
}
.v-card:hover .v-card__media .v-card__img { transform: scale(1.035); }
.v-card__quick {
  inset: auto 0 0;
  height: 46px;
  border-radius: 0;
  background: rgba(23,21,19,.94);
  color: #fffaf2;
  backdrop-filter: blur(8px);
}
.v-card__info { gap: 4px; padding-top: 15px; }
.v-card__name { font-size: 15px; font-weight: 500; letter-spacing: -.01em; }
.v-card__desc { max-width: 34ch; font-size: 12.5px; }
.v-card__price { font-size: 13px; }
.v-card__stones { margin-top: 10px; }
.v-card__metals { margin-top: 6px; }
.v-card__metal { width: 27px; height: 27px; }
.v-card__metal-dot { width: 13px; height: 13px; }
.v-card--edit .v-card__media { border-radius: 0; }

@media screen and (min-width: 1320px) {
  .v-product-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media screen and (max-width: 760px) {
  .v-product-grid { gap: 34px 8px; }
  .v-card__quick { display: none; }
  .v-card__desc { font-size: 11.5px; }
  .v-card__name { font-size: 13.5px; }
}

/* Product detail — Mejuri-adjacent: large vertical gallery + sticky buy panel */
.product-information {
  background: #fff;
  padding-block: 0;
  --v-buybox-max-width: min(400px, 34vw);
}
.product-information .product-information__grid,
.product-information [class*='product-information__grid'] {
  align-items: start;
  gap: clamp(28px, 6vw, 80px) !important;
  max-width: none;
}
/* Media column: dominant (~52–56%); buy column: calm sticky panel */
@media screen and (min-width: 990px) {
  .product-information .product-information__grid,
  .product-information [class*='product-information__grid'] {
    display: grid !important;
    grid-template-columns: minmax(0, 1.35fr) minmax(320px, 0.85fr) !important;
    column-gap: clamp(40px, 8vw, 120px) !important;
    padding-inline: clamp(20px, 3.5vw, 56px);
  }
  .product-information .product-information__media,
  .product-information [class*='product-information__media'],
  .product-information .product-information__grid > :first-child {
    max-width: none;
    width: 100%;
  }
}
.product-information .product-details {
  background: #fff;
  padding: clamp(28px, 3.5vw, 48px) clamp(8px, 2vw, 24px) clamp(48px, 6vw, 80px);
  border-left: 0;
}
@media screen and (min-width: 750px) {
  .product-details.sticky-content--desktop {
    position: sticky;
    top: calc(var(--header-group-height, 0px) + 28px);
    max-width: var(--v-buybox-max-width);
    width: 100%;
    align-self: start;
    max-height: none;
    overflow: visible;
    padding-top: 8px;
  }
}
.product-information .v-gallery__grid { gap: 0; }
.product-information .v-gallery__item {
  border-radius: 0;
  background: #f7f4ee;
  margin: 0;
}
.product-information .v-gallery__img,
.product-information .v-gallery__item img {
  object-fit: cover;
  object-position: center;
}
/* Desktop product images never taller than 82vh */
@media screen and (min-width: 750px) {
  .product-information .v-gallery,
  .product-information .v-gallery__frame,
  .product-information .v-gallery__grid,
  .product-information .v-gallery__item,
  .product-information .v-gallery__item img,
  .product-information .v-gallery__img,
  .product-information .v-gallery__zoom-trigger {
    max-height: 82vh;
  }
  .product-information .v-gallery__frame {
    max-width: min(100%, calc(82vh * 5 / 6));
  }
}
.product-information .v-title {
  max-width: 16ch;
  font-family: var(--font-secondary--family, Georgia, serif);
  font-size: clamp(28px, 2.8vw, 40px);
  font-weight: 400;
  line-height: 1.08;
  letter-spacing: -0.03em;
  overflow-wrap: normal;
  word-break: normal;
  color: var(--veroni-ink, #211e1a);
}
.product-information .v-price {
  margin-top: 14px;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.product-information .v-lead {
  margin-top: 16px;
  font-size: 13.5px;
  line-height: 1.65;
  color: var(--veroni-ink-2, #625848);
  max-width: 36ch;
}
.product-information variant-picker { display: block; padding-block: 10px 4px; }
.product-information variant-picker legend,
.product-information .variant-option > legend {
  margin-block-end: 12px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--veroni-ink, #211e1a);
}
.product-information button.add-to-cart-button,
.product-information .add-to-cart-button.button {
  height: 52px;
  border-radius: 0;
  letter-spacing: 0.14em;
  font-size: 11.5px;
}
.product-information .quantity-selector { height: 52px; border-radius: 0; }
.v-ring-size select { min-height: 50px; border-radius: 0; background: #fff; }
.v-shipping-estimate { border-radius: 0 !important; }
.sticky-add-to-cart__bar { border-radius: 0 !important; background: rgba(255, 255, 255, 0.96); }

/* Breadcrumbs — quiet label trail like modern jewelry PDPs */
.v-breadcrumb,
[data-testid='veroni-breadcrumb'],
.veroni-breadcrumb,
nav[aria-label*='breadcrumb' i],
nav[aria-label*='Breadcrumb' i] {
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: capitalize;
  color: var(--veroni-muted, #7a6f5d);
}
.v-breadcrumb a,
.veroni-breadcrumb a,
nav[aria-label*='breadcrumb' i] a {
  color: inherit;
  text-decoration: none;
  font-weight: 400;
}
.v-breadcrumb a:hover,
.veroni-breadcrumb a:hover {
  color: var(--veroni-ink, #211e1a);
}
.shopify-section:has(.v-breadcrumb),
.shopify-section:has(.veroni-breadcrumb),
.shopify-section:has([data-testid='veroni-breadcrumb']) {
  padding-block: 12px 4px;
  background: #fff;
}

.v-details {
  padding-block: clamp(78px, 10vw, 150px);
  background: var(--veroni-night);
  color: #fffaf2;
}
/* 2026-07-22: 'THE VERONI STANDARD' moved from CSS generated content into
   real markup (.v-details__label in veroni-pdp-details.liquid) so assistive
   tech and translation can reach it. */
.v-details__label {
  display: block;
  width: min(100% - 40px, 720px);
  margin: 0 auto 34px;
  color: #d4b67b;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.v-details .v-accordion { border-top-color: rgba(255,250,242,.28) !important; }
.v-details .v-accordion__item { border-bottom-color: rgba(255,250,242,.28) !important; }
.v-details .v-accordion__trigger { color: #fffaf2; padding-block: 26px; font-size: 12px; letter-spacing: .1em; }
.v-details .v-accordion__icon::before,
.v-details .v-accordion__icon::after { background: #fffaf2; }
.v-details .v-accordion__panel { color: rgba(255,250,242,.7); font-size: 15px; }

/* Search, policy and customer surfaces share the same editorial cadence. */
.v-search-hero {
  min-height: 46vh;
  justify-content: center;
  background: var(--veroni-night) !important;
  color: #fffaf2;
  max-width: none !important;
  width: 100%;
}
.v-search-hero .v-search-field input {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.v-search-hero .v-search-field button {
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}
.v-search-hero .v-search-field { width: min(780px, calc(100% - 40px)); border-bottom-color: rgba(255,250,242,.65); }
.v-search-hero .v-search-field input { color: #fffaf2; font-size: clamp(26px, 4vw, 50px); padding-block: 18px; }
.v-search-hero .v-search-field button { color: #fffaf2; }
.v-search-hero .v-body-2 { color: rgba(255,250,242,.68); }
.shopify-policy__container {
  max-width: 840px !important;
  padding: clamp(72px, 9vw, 140px) var(--page-margin, 20px) !important;
}
.shopify-policy__title { margin-bottom: clamp(44px, 6vw, 76px); }
.shopify-policy__title h1 { font-size: clamp(54px, 7vw, 96px); font-weight: 400; line-height: .9; letter-spacing: -.055em; }
.shopify-policy__body { color: var(--veroni-ink-2); font-size: 15px; line-height: 1.78; }
.shopify-policy__body h2,
.shopify-policy__body h3 { margin-top: 2.5em; color: var(--veroni-ink); font-weight: 500; }
.customer,
.customer-account,
[class*='customer-account'] { border-radius: 0 !important; }

/* Drawers and checkout handoff affordances: quiet, decisive and square. */
.theme-drawer__dialog { border-radius: 0 !important; }
#cart-drawer .theme-drawer__dialog { width: min(var(--theme-drawer-width, 30rem), 100vw); }
#cart-drawer .theme-drawer__header { min-height: 78px; border-bottom: 1px solid var(--veroni-line); }
#cart-drawer .theme-drawer__title { font-size: 22px; font-weight: 400; }
#cart-drawer .cart-drawer__summary { padding: 30px; }
#cart-drawer .cart__checkout-button { min-height: 54px; border-radius: 0; text-transform: uppercase; letter-spacing: .12em; }

/* Footer is the final campaign frame, not a generic utility grid. */
footer { background: var(--veroni-night); color: #fffaf2; }
footer .shopify-section,
footer .section { background: var(--veroni-night); }
footer h2,
footer h3,
footer h4 { color: #fffaf2; font-weight: 400; }
footer a,
footer p,
footer summary,
footer label { color: rgba(255,250,242,.7); }
footer a:hover { color: #fffaf2; }
footer h2 {
  font-size: clamp(52px, 8vw, 128px) !important;
  line-height: .8 !important;
  letter-spacing: .12em !important;
}
footer input { border-radius: 0 !important; }
footer .footer-utilities { border-color: rgba(255,250,242,.2); }

@media screen and (max-width: 749px) {
  #header-component .header__row--top { min-height: 64px; padding-inline: var(--page-margin, 16px); }
  /* Keep the text wordmark on one line between the icon clusters. */
  .header-logo .header-logo__image-container--original {
    font-size: 13px;
    letter-spacing: 0.2em;
    white-space: nowrap;
  }
  .header-logo { gap: 4px; }
  .veroni-header-tagline {
    font-size: 7.5px;
    letter-spacing: 0.1em;
    margin-inline-start: 0.55em;
    margin-inline-end: -0.1em;
  }
  /* Keep the full-bleed PDP carousel inside the viewport. The media column is
     already full width, so no negative page-margin compensation is needed. */
  .product-information .v-gallery { width: 100%; margin-inline: 0; }
  .product-information .v-gallery__grid { gap: 0; }
  .product-information .product-details { border-left: 0; padding: 34px 20px 52px; }
  .product-information .v-title { font-size: 34px; }
  .v-details__label { width: calc(100% - 40px); }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .v-card__img,
  .v-category-tile__media img { transition-duration: .01ms !important; }
}

/* ==========================================================================
   Designer polish pass — 2026-07-22
   Micro-interactions only: nothing here changes layout, color roles, or
   component structure. All motion respects prefers-reduced-motion.
   ========================================================================== */

/* Scroll reveal (classes applied only by veroni-reveal.js — no-JS safe). */
.v-reveal {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 0.65s ease var(--v-reveal-delay, 0ms),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1) var(--v-reveal-delay, 0ms);
}
.v-reveal--in {
  opacity: 1;
  transform: none;
}

/* Quiet links draw their underline in gold instead of snapping. */
.v-link-quiet,
.v-atelier__link,
.v-hero__secondary {
  background-image: linear-gradient(var(--veroni-gold-deep, #a98853), var(--veroni-gold-deep, #a98853));
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 0% 1px;
  transition-property: color, border-color, background-size;
  transition-duration: 0.35s;
  transition-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}
.v-link-quiet:hover,
.v-link-quiet:focus-visible,
.v-atelier__link:hover,
.v-atelier__link:focus-visible,
.v-hero__secondary:hover,
.v-hero__secondary:focus-visible {
  background-size: 100% 1px;
}

/* Buttons acknowledge the press. */
.button:active,
.v-card__quick:active {
  transform: translateY(1px);
}

/* Keyboard focus baseline — zero specificity so component-level rings win. */
:where(a, button, summary, input, select, textarea):focus-visible {
  outline: 1px solid var(--veroni-ink, #211e1a);
  outline-offset: 3px;
  border-radius: 1px;
}
footer :where(a, button, input):focus-visible,
.v-atelier :where(a):focus-visible,
.v-hero :where(a):focus-visible {
  outline-color: #e2c588;
}

@media (prefers-reduced-motion: reduce) {
  .v-reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}


/* ── Header top-level nav sized up (2026-07-30) ────────────────────────
   The _header-menu block has no font-size setting. Raising the custom
   properties alone lost the cascade, so the rendered link elements are
   targeted directly. Desktop only — .menu-drawer__* (mobile) untouched. */
@media screen and (min-width: 750px) {
  .header .menu-list__link,
  .header .menu-list__link-title,
  .header-menu .menu-list__link,
  .header-menu .menu-list__link-title,
  .header-menu__inner .menu-list__link,
  .header-menu__inner .menu-list__link-title {
    font-size: clamp(15px, 1.05vw, 17px) !important;
    line-height: 1.3;
  }
  .header-menu,
  .header-menu__inner {
    --menu-top-level-font-size: clamp(15px, 1.05vw, 17px);
    --menu-top-level-font-size-desktop: clamp(15px, 1.05vw, 17px);
  }
}


/* ── Header action icons nudged right (2026-07-30) ─────────────────────
   Search / account / cart sit in .header__column--right. Shifted with a
   transform so sibling columns and the centred logo are unaffected.
   Desktop only. */
@media screen and (min-width: 750px) {
  .header__column--right {
    transform: translateX(14px);
  }
}

/* ══════════════════════════════════════════════════════════════════════
   VERONI — local mockup design system, ported 1:1 (2026-07-31)
   Source: ~/Desktop/veroni-deploy/index.html
   Loaded after Horizon's tokens so these win the cascade.
   ══════════════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@400;500&family=Inter:wght@300;400;500;600&display=swap');

:root,
.color-scheme-1, .color-scheme-2, .color-scheme-3, .color-scheme-4, .color-scheme-5 {
  /* ── colour tokens straight from the mockup ── */
  --veroni-bone:      #ffffff;
  --veroni-canvas:    #fafafa;
  --veroni-sand:      #f3f0eb;
  --veroni-paper:     #ffffff;
  --veroni-ink:       #1a1a1a;
  --veroni-ink-2:     #3a3a3a;
  --veroni-muted:     #707070;
  --veroni-line:      #e6e3dd;
  --veroni-gold:      #b6915e;
  --veroni-gold-deep: #9c7a49;
  --veroni-accent:    #7d2929;

  /* ── type families ── */
  --font-body--family:              'Inter', -apple-system, system-ui, sans-serif;
  --font-heading--family:           'Cormorant Garamond', Georgia, serif;
  --font-secondary--family:         'Cormorant Garamond', Georgia, serif;
  --font-editorial-italic--family:  'Cormorant Garamond', Georgia, serif;
  --font-subheading--family:        'Inter', -apple-system, system-ui, sans-serif;
  --font-accent--family:            'Inter', -apple-system, system-ui, sans-serif;
  --font-heading--weight: 400;
  --font-body--weight: 400;
}

body {
  background: #ffffff;
  color: #1a1a1a;
  font-family: 'Inter', -apple-system, system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── headings use the serif, mockup scale ── */
h1, h2, h3, h4,
.h1, .h2, .h3, .h4 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 400;
  letter-spacing: 0.005em;
  color: #1a1a1a;
}
h2, .h2 { font-size: clamp(32px, 3.6vw, 46px); line-height: 1.1; }
h3, .h3 { font-size: 24px; font-weight: 500; }

/* ── buttons: flat, wide-tracked caps ── */
.button, .button--primary, button.button, a.button {
  font-family: 'Inter', sans-serif;
  font-size: 11.5px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-weight: 500;
  border-radius: 0;
  padding: 15px 34px;
}

/* ── hero: serif display, mockup sizing ── */
.vhc__heading {
  font-family: 'Cormorant Garamond', Georgia, serif !important;
  font-weight: 400;
}
.vhc__eyebrow, .vlc__eyebrow { color: #b6915e; }
.vhc__cta a {
  font-size: 11.5px;
  letter-spacing: 0.24em;
  border-width: 1.5px;
}

/* ── section headings on the ported sections ── */
.vlc__h2 { font-family: 'Cormorant Garamond', Georgia, serif; color: #1a1a1a; }
.vlc__overlay h3 { font-family: 'Cormorant Garamond', Georgia, serif; color: #fff; }
.vlt__icon { color: #b6915e; }
.vlt__title { font-family: 'Inter', sans-serif; color: #1a1a1a; }
.vlt__sub { color: #707070; }

/* hairlines + surfaces to the mockup's warm grey */
.vlt { border-bottom-color: #e6e3dd; }


/* ── Header forced white at every scroll state (2026-07-31) ────────────
   Horizon paints the header from several sources: top row, bottom row, the
   navigation-bar row and per-block color-custom schemes. Setting the section
   colours alone left the cream palette default (#FBF8F2) showing on scroll,
   so every header surface is pinned to white here. */
.header,
.header__row,
.header__row--top,
.header__row--bottom,
.header__navigation-bar-row,
.header-section .section-background,
header-component.header,
.header .overflow-menu,
.header .menu-drawer,
.header .menu-list,
.header-section [class*="color-custom-"][class*="header-menu"] {
  --color-background: #FFFFFF;
  --color-background-rgb: 255 255 255;
  --color-background-top-row: rgba(255 255 255 / 1);
  --color-background-bottom-row: rgba(255 255 255 / 1);
  background-color: #FFFFFF;
}


/* ── Sticky-scroll underlay forced white (2026-07-31) ──────────────────
   This element is the one that actually paints the header on scroll:
   #header-component[data-sticky-state='active'] .header__underlay-closed.
   It only exists once sticky mode engages, which is why the beige survived
   every section/row/menu colour change. */
#header-component[data-sticky-state='active'] .header__underlay-closed,
#header-component[data-sticky-state='active'] .header__underlay-open,
.header__underlay, .header__underlay-closed, .header__underlay-open {
  background: rgba(255,255,255,0.96) !important;
}

/* ==========================================================================
   VERONI LIVE SEARCH — futuristic tile field (modal + search page)
   2026-08-03 redesign: clean grid, staggered fade-in, luxury quiet chrome
   ========================================================================== */

/* Modal shell — full-bleed, quiet, editorial */
#search-modal .search-modal__content.dialog-modal,
.search-modal .dialog-modal {
  max-width: min(1120px, 96vw) !important;
  width: min(1120px, 96vw) !important;
  max-height: min(88dvh, 920px) !important;
  border: 1px solid rgba(33, 30, 26, 0.08) !important;
  border-radius: 4px !important;
  background: #fbf8f2 !important;
  box-shadow: 0 28px 80px rgba(18, 17, 15, 0.22) !important;
  overflow: hidden;
}

#search-modal .predictive-search-form__header,
.search-modal .predictive-search-form__header {
  background: #fbf8f2 !important;
  border-bottom: 1px solid rgba(33, 30, 26, 0.08) !important;
  padding: 18px 20px 14px !important;
}

#search-modal .predictive-search-form__header-inner,
.search-modal .predictive-search-form__header-inner {
  border: 1px solid rgba(33, 30, 26, 0.12) !important;
  border-radius: 2px !important;
  background: #fff !important;
  min-height: 52px;
  padding-inline: 14px 10px;
  transition: border-color 0.2s ease, box-shadow 0.25s ease;
}

#search-modal .predictive-search-form__header-inner:focus-within,
.search-modal .predictive-search-form__header-inner:focus-within {
  border-color: rgba(33, 30, 26, 0.35) !important;
  box-shadow: 0 0 0 3px rgba(194, 160, 107, 0.18);
}

#search-modal .search-input,
.search-modal .search-input {
  font-size: 15px !important;
  letter-spacing: 0.01em;
  background: transparent !important;
  padding-block: 14px !important;
}

#search-modal .predictive-search-form__content,
.search-modal .predictive-search-form__content {
  max-height: min(68dvh, 720px) !important;
  overflow-y: auto;
  padding: 0 !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(33,30,26,0.2) transparent;
}

#search-modal .predictive-search-form__footer,
.search-modal .predictive-search-form__footer {
  border-top: 1px solid rgba(33, 30, 26, 0.08);
  background: #fbf8f2;
  padding: 12px 18px 16px;
}

#search-modal .predictive-search__search-button,
.search-modal .predictive-search__search-button {
  width: 100%;
  height: 44px;
  border-radius: 2px;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: #211e1a;
  color: #fbf8f2;
  border: 0;
}

/* Results shell */
.v-search-live,
#predictive-search-results.v-search-live,
.predictive-search-dropdown {
  background: transparent;
}

.v-search-live__inner,
.predictive-search-results__inner {
  padding: 12px 16px 20px !important;
}

.v-search-live__label,
.predictive-search-results__title.v-search-live__label,
.predictive-search-results__title {
  font-size: 10px !important;
  font-weight: 600 !important;
  letter-spacing: 0.2em !important;
  text-transform: uppercase !important;
  color: #8a6c3e !important;
  margin: 4px 4px 14px !important;
  width: auto !important;
}

.v-search-live__status {
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #9a8e7d;
  margin: 0 4px 14px;
  animation: v-search-pulse 1.1s ease-in-out infinite;
}

@keyframes v-search-pulse {
  0%, 100% { opacity: 0.45; }
  50% { opacity: 1; }
}

/* Hide noisy secondary predictive blocks — pure tile field */
#search-modal .predictive-search-results__wrapper-queries,
#search-modal .predictive-search-resource-carousel,
#search-modal [class*="resource-carousel"],
.search-modal .predictive-search-results__wrapper-queries {
  display: none !important;
}

/* —— Tile grid —— */
.v-search-tile-grid,
.predictive-search-results__wrapper-products.v-search-tile-grid,
.predictive-search-results__list.v-search-tile-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  list-style: none;
  margin: 0;
  padding: 0;
}

@media screen and (max-width: 989px) {
  .v-search-tile-grid,
  .predictive-search-results__wrapper-products.v-search-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 649px) {
  .v-search-tile-grid,
  .predictive-search-results__wrapper-products.v-search-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }
}

/* Reset Horizon card wrappers so only the tile paints */
.v-search-tile-grid > .predictive-search-results__card,
.v-search-tile-grid > li,
.v-search-tile-grid > .predictive-search-results__card--product {
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  list-style: none;
  min-width: 0;
}

/* Product tile */
.v-tile {
  --v-tile-i: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: inherit;
  min-width: 0;
  position: relative;
}

.v-tile__media {
  position: relative;
  display: block;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: #fff;
  border: 1px solid rgba(33, 30, 26, 0.06);
  border-radius: 0;
}

.v-tile__media img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  padding: 8%;
  display: block;
  transition: transform 0.55s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
  will-change: transform;
}

.v-tile:hover .v-tile__media img {
  transform: scale(1.045);
}

.v-tile__veil {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 55%, rgba(18, 17, 15, 0.06) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.v-tile:hover .v-tile__veil { opacity: 1; }

.v-tile__meta {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 2px 2px;
  min-height: 3.4em;
}

.v-tile__name {
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  color: #211e1a;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-tile__sub {
  font-size: 10.5px;
  color: #8a8070;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.v-tile__price {
  font-size: 11.5px;
  color: #211e1a;
  margin-top: 2px;
}

.v-tile__from {
  color: #8a8070;
  margin-right: 4px;
  font-size: 10.5px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.v-tile__ph {
  display: block;
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #f0eadf, #e7dcc9);
}

/* Staggered enter — futuristic clean fade + lift */
.v-tile-enter,
.v-tile.v-tile-enter,
.predictive-search-results__card.v-tile-enter {
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  filter: blur(4px);
  transition:
    opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    filter 0.45s ease;
  transition-delay: calc(var(--v-tile-i, 0) * 42ms);
}

.v-tile-enter.is-in,
.v-tile.v-tile-enter.is-in,
.predictive-search-results__card.v-tile-enter.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Skeleton shimmer tiles */
.v-tile--skeleton .v-tile__media {
  background: linear-gradient(110deg, #f0eadf 25%, #f8f4ec 40%, #f0eadf 55%);
  background-size: 200% 100%;
  animation: v-tile-shimmer 1.15s linear infinite;
  border-color: transparent;
}

.v-tile--skeleton .v-tile__skel-line {
  display: block;
  height: 10px;
  width: 72%;
  border-radius: 2px;
  background: #ebe4d6;
  margin-top: 4px;
}

.v-tile--skeleton .v-tile__skel-line--sm {
  width: 42%;
  height: 8px;
}

@keyframes v-tile-shimmer {
  0% { background-position: 100% 0; }
  100% { background-position: -100% 0; }
}

/* Searching state — slight dim on chrome */
predictive-search-component.is-searching .predictive-search-form__header-inner {
  border-color: rgba(194, 160, 107, 0.45) !important;
}

/* SKU mode — tighter status */
.v-search--sku .v-search-live__label,
.v-search--sku .predictive-search-results__title {
  color: #211e1a !important;
}

/* Full search page redesign */
.v-search-page {
  padding: 36px 0 72px;
}

.v-search-page__hero {
  max-width: 720px;
  margin: 0 auto 28px;
  padding: 0 20px;
  text-align: center;
}

.v-search-page__eyebrow {
  margin: 0 0 12px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: #8a6c3e;
}

.v-search-page__field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid rgba(33, 30, 26, 0.14);
  background: #fff;
  border-radius: 2px;
  padding: 4px 4px 4px 16px;
  transition: border-color 0.2s, box-shadow 0.25s;
}

.v-search-page__field:focus-within {
  border-color: rgba(33, 30, 26, 0.35);
  box-shadow: 0 0 0 3px rgba(194, 160, 107, 0.16);
}

.v-search-page__field input[type='search'] {
  flex: 1;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 15px;
  padding: 12px 0;
  color: #211e1a;
  min-width: 0;
}

.v-search-page__field button[type='submit'] {
  flex: 0 0 auto;
  width: 48px;
  height: 44px;
  border: 0;
  background: #211e1a;
  color: #fbf8f2;
  border-radius: 1px;
  cursor: pointer;
  display: grid;
  place-items: center;
}

.v-search-page__status {
  margin: 16px 0 0;
  font-size: 13px;
  color: #625848;
}

.v-search-page__status strong {
  color: #211e1a;
  font-weight: 500;
}

.v-search-page__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-top: 18px;
}

.v-search-page__chips a {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 7px 12px;
  border: 1px solid #e4dbcc;
  border-radius: 100px;
  font-size: 12px;
  color: #625848;
  text-decoration: none;
  background: #fff;
  transition: border-color 0.15s, color 0.15s, transform 0.2s;
}

.v-search-page__chips a:hover {
  border-color: #211e1a;
  color: #211e1a;
  transform: translateY(-1px);
}

.v-search-page__grid-wrap {
  max-width: 1320px;
  margin: 0 auto;
  padding: 8px 20px 0;
}

.v-search-page .v-search-tile-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 12px;
}

@media screen and (max-width: 989px) {
  .v-search-page .v-search-tile-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media screen and (max-width: 649px) {
  .v-search-page .v-search-tile-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 8px;
  }
}

.v-search-page .v-tile__name { font-size: 13px; }
.v-search-page .v-tile__media { border-color: rgba(33, 30, 26, 0.07); }

/* Page-load tile cascade */
.v-search-page .v-tile {
  opacity: 0;
  transform: translateY(16px);
  animation: v-page-tile-in 0.55s cubic-bezier(0.22, 1, 0.36, 1) forwards;
  animation-delay: calc(var(--v-tile-i, 0) * 48ms);
}

@keyframes v-page-tile-in {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .v-tile-enter,
  .v-search-page .v-tile,
  .v-tile--skeleton .v-tile__media {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }
}

/* cache-bust-2026-08-05-thumb-scale */

/* thumb-scale-v2 */