/** Shopify CDN: Minification failed

Line 3379:69 Unexpected "*"

**/
/* SHOPIFY_STYLESHEETS_VERSION: 1.0 */


/* CSS from section stylesheet tags */
/* START_SECTION:vn-modern-account (INDEX:73) */
.vn-account { padding: 48px var(--vn-container-pad-desktop) 96px; box-sizing: border-box; }
.vn-account__form-wrap { max-width: 480px; margin: 0 auto; }
.vn-account__head { padding-bottom: 24px; border-bottom: 1px solid var(--vn-hair); margin-bottom: 32px; }
.vn-account__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(32px, 5vw, 56px);
  line-height: 1;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 12px 0 0;
}
.vn-account__sub {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.vn-account__hint { font-family: var(--vn-font-serif); color: var(--vn-fg-mute); margin-top: 12px; font-style: italic; }
.vn-account__form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 32px; }
.vn-account__row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.vn-account__label {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin: 6px 0 -6px;
}
.vn-account__form input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--vn-fg);
  background: transparent;
  padding: 10px 0;
  font: inherit;
  font-size: 16px;
  color: var(--vn-fg);
  min-height: 44px;
  border-radius: 0;
}
.vn-account__form input:focus { outline: 0; border-bottom-width: 2px; }
.vn-account__form input:focus-visible {
  outline: 2px solid var(--vn-fg);
  outline-offset: 2px;
}
.vn-account__error {
  border: 1px solid var(--vn-fg);
  padding: 12px 14px;
  font-size: 13px;
  font-family: var(--vn-font-mono);
  color: var(--vn-fg);
}
.vn-account__notice {
  border: 1px solid var(--vn-hair-strong);
  padding: 12px 14px;
  font-size: 13px;
}
.vn-account__alt {
  display: flex;
  gap: 12px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin-top: 14px;
}
.vn-account__alt a { color: var(--vn-fg); text-decoration: underline; text-underline-offset: 3px; }

.vn-account__grid {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: 48px;
  align-items: start;
}
.vn-account__nav { display: flex; flex-direction: column; gap: 8px; }
.vn-account__nav a {
  font-family: var(--vn-font-display);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 12px 0;
  border-bottom: 1px solid var(--vn-hair);
  color: var(--vn-fg);
  text-decoration: none;
}
.vn-account__nav a[aria-current="page"] { font-weight: 800; }
.vn-account__nav a:hover { opacity: 0.7; }

.vn-account__order-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.vn-account__order-table th {
  text-align: left;
  padding: 12px 16px;
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  border-bottom: 1px solid var(--vn-hair);
}
.vn-account__order-table td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--vn-hair);
  vertical-align: top;
}
.vn-account__order-table a { color: var(--vn-fg); text-decoration: underline; text-underline-offset: 3px; }
.vn-account__order-meta {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--vn-hair);
  border: 1px solid var(--vn-hair);
  margin-bottom: 32px;
}
.vn-account__order-meta > div { background: var(--vn-bg); padding: 16px; }
.vn-account__order-meta span:first-child {
  display: block;
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.vn-account__order-meta span:last-child {
  font-family: var(--vn-font-display);
  font-size: 16px;
  font-weight: 700;
}
.vn-account__order-item { display: flex; gap: 12px; align-items: flex-start; }
.vn-account__order-item img { width: 56px; height: 70px; object-fit: cover; flex-shrink: 0; }
.vn-account__order-item-lot {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  margin-bottom: 4px;
}
.vn-account__order-item-title {
  font-family: var(--vn-font-display);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.vn-account__addresses { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; }
.vn-account__address-card { border: 1px solid var(--vn-hair-strong); padding: 20px; }
.vn-account__address-title {
  font-family: var(--vn-font-display);
  font-size: 14px;
  margin: 0 0 10px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.vn-account__default {
  font-family: var(--vn-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  background: var(--vn-fg);
  color: var(--vn-bg);
  padding: 2px 6px;
}
.vn-account__address-body { font-family: var(--vn-font-serif); font-size: 14px; line-height: 1.55; color: var(--vn-fg); }
.vn-account__address-body p { margin: 0; }
.vn-account__address-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-top: 14px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.vn-account__address-actions a { color: var(--vn-fg); text-decoration: underline; text-underline-offset: 2px; }
.vn-account__empty { color: var(--vn-fg-mute); font-style: italic; }

@media (max-width: 1024px) {
  .vn-account__grid { grid-template-columns: 1fr; gap: 32px; }
  .vn-account__nav { flex-direction: row; flex-wrap: wrap; gap: 14px; border-bottom: 1px solid var(--vn-hair); padding-bottom: 14px; }
  .vn-account__nav a { padding: 0; border-bottom: 0; }
}
@media (max-width: 768px) {
  .vn-account { padding: 24px 16px 64px; }
  .vn-account__addresses { grid-template-columns: 1fr; }
  .vn-account__order-meta { grid-template-columns: 1fr 1fr; }
  .vn-account__order-table { font-size: 12px; }
  .vn-account__order-table th,
  .vn-account__order-table td { padding: 10px 8px; }
}
/* END_SECTION:vn-modern-account */

/* START_SECTION:vn-modern-archive (INDEX:74) */
/* IMPORTANT: .vn-archive section also carries .vn-wrap, whose
   `padding: 0 var(--vn-container-pad-desktop)` from vn-modern.css overrides
   our vertical padding to 0. We use body.vn-modern + !important so the
   product grid sits a comfortable distance below the filter divider line. */
body.vn-modern .vn-archive {
  padding-top: 32px !important;
  padding-bottom: 64px !important;
  padding-left: var(--vn-container-pad-desktop) !important;
  padding-right: var(--vn-container-pad-desktop) !important;
  box-sizing: border-box;
}
/* IMPORTANT: this header has both `vn-archive__header` AND `vn-wrap`
   classes. `.vn-wrap` from vn-modern.css declares
   `padding: 0 var(--vn-container-pad-desktop)` and loads later, so its
   `0` vertical padding wins over our 80px top padding. We use
   `body.vn-modern` selector + !important to defeat .vn-wrap. */
body.vn-modern .vn-archive__header {
  padding-top: 24px !important;
  padding-bottom: 12px !important;
  padding-left: var(--vn-container-pad-desktop) !important;
  padding-right: var(--vn-container-pad-desktop) !important;
  max-width: var(--vn-container-max);
  margin: 0 auto;
}
.vn-archive__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 16px;
  text-wrap: balance;
}
.vn-archive__lede {
  font-family: var(--vn-font-serif);
  font-size: 17px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  max-width: 56ch;
}
.vn-archive__filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.vn-archive__filter {
  position: relative;
}
.vn-archive__filter summary {
  list-style: none;
  cursor: pointer;
  padding: 6px 12px;
  border: 1px solid var(--vn-hair);
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vn-fg);
  background: var(--vn-bg);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: border-color var(--vn-dur-fast) var(--vn-ease), background var(--vn-dur-fast) var(--vn-ease);
}
.vn-archive__filter summary:hover { border-color: var(--vn-fg); }
.vn-archive__filter summary::-webkit-details-marker { display: none; }
.vn-archive__filter summary::marker { display: none; content: ''; }
.vn-archive__filter-caret {
  display: inline-block;
  width: 8px;
  height: 8px;
  position: relative;
}
.vn-archive__filter-caret::before {
  content: '';
  position: absolute;
  inset: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform var(--vn-dur-fast) var(--vn-ease);
}
.vn-archive__filter[open] .vn-archive__filter-caret::before {
  transform: translateY(2px) rotate(225deg);
}
.vn-archive__filter[open] summary {
  background: var(--vn-fg);
  color: var(--vn-bg);
  border-color: var(--vn-fg);
}
.vn-archive__filter-count {
  font-size: 10px;
  opacity: 0.7;
  font-variant-numeric: tabular-nums;
}

/* Dropdown body — appears below summary, supports up to ~320px scrollable */
.vn-archive__filter-body {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--vn-bg);
  border: 1px solid var(--vn-fg);
  margin: 0;
  padding: 8px 0;
  min-width: 240px;
  max-width: 320px;
  z-index: var(--vn-z-overlay);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
}
.vn-archive__filter-list {
  list-style: none;
  margin: 0;
  padding: 0;
  /* Scrollable when many values (brands / categories) */
  max-height: 320px;
  overflow-y: auto;
}
.vn-archive__filter-list::-webkit-scrollbar { width: 4px; }
.vn-archive__filter-list::-webkit-scrollbar-thumb {
  background: var(--vn-hair);
  border-radius: 0;
}
.vn-archive__filter-opt {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  font-family: var(--vn-font-display);
  font-size: 12.5px;
  color: var(--vn-fg);
  cursor: pointer;
  user-select: none;
  transition: background var(--vn-dur-fast) var(--vn-ease);
}
.vn-archive__filter-opt:hover { background: var(--vn-bg-subtle); }
.vn-archive__filter-opt input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border: 1px solid var(--vn-fg);
  background: var(--vn-bg);
  cursor: pointer;
  position: relative;
  margin: 0;
  flex-shrink: 0;
}
.vn-archive__filter-opt input[type="checkbox"]:checked {
  background: var(--vn-fg);
}
.vn-archive__filter-opt input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 0;
  width: 5px;
  height: 9px;
  border-right: 1.5px solid var(--vn-bg);
  border-bottom: 1.5px solid var(--vn-bg);
  transform: rotate(45deg);
}
.vn-archive__filter-label {
  flex: 1 1 auto;
  min-width: 0;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.vn-archive__filter-num {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  color: var(--vn-fg-mute);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.vn-archive__filter-opt.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* Price range input pair */
.vn-archive__price-range {
  padding: 12px 14px;
  min-width: 240px;
}
.vn-archive__price-row {
  display: flex;
  align-items: flex-end;
  gap: 8px;
}
.vn-archive__price-input {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.vn-archive__price-input span {
  font-family: var(--vn-font-mono);
  font-size: 9px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
.vn-archive__price-input input {
  font-family: var(--vn-font-display);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  border: 1px solid var(--vn-fg);
  background: var(--vn-bg);
  color: var(--vn-fg);
  padding: 8px 10px;
  width: 100%;
  outline: 0;
  appearance: textfield;
  -moz-appearance: textfield;
}
.vn-archive__price-input input::-webkit-outer-spin-button,
.vn-archive__price-input input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.vn-archive__price-sep {
  color: var(--vn-fg-mute);
  padding: 0 2px 8px;
  font-size: 14px;
}
.vn-archive__price-note {
  margin: 8px 0 0;
  font-family: var(--vn-font-mono);
  font-size: 9px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
}
.vn-archive__filter-clear {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-decoration: underline;
  text-underline-offset: 3px;
  margin-left: 4px;
  text-transform: uppercase;
}
.vn-archive__filter-clear:hover { color: var(--vn-fg); }

.vn-archive__sort { display: flex; align-items: center; gap: 8px; }
.vn-archive__sort label {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
}
.vn-archive__sort select {
  background: transparent;
  border: 0;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--vn-fg);
  cursor: pointer;
  padding: 4px 4px;
  min-height: 32px;
}

.vn-archive__empty { grid-column: 1 / -1; padding: 60px 0; text-align: center; }

.vn-archive__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  /* Removed border-top + padding-top per request: pagination should sit
     directly under the product grid without a divider line. Bottom margin
     keeps comfortable breathing room from the footer's border-top. */
  margin-top: 32px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.vn-archive__pager-btn {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-fg);
  text-decoration: none;
  transition: opacity var(--vn-dur-fast) var(--vn-ease);
}
.vn-archive__pager-btn:hover { opacity: 0.6; }
.vn-archive__pager-nums {
  display: flex;
  gap: 16px;
  font-family: var(--vn-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.06em;
}
.vn-archive__pager-nums a { color: var(--vn-fg-mute); text-decoration: none; min-width: 24px; text-align: center; transition: color var(--vn-dur-fast) var(--vn-ease); }
.vn-archive__pager-nums a:hover { color: var(--vn-fg); }
.vn-archive__pager-nums span.is-active { color: var(--vn-fg); border-bottom: 1px solid var(--vn-fg); padding-bottom: 1px; }
.vn-archive__pager-nums span:not(.is-active) { color: var(--vn-fg-mute); }

@media (max-width: 768px) {
  body.vn-modern .vn-archive {
    padding-top: 24px !important;
    padding-bottom: 48px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  body.vn-modern .vn-archive__header {
    padding-top: 16px !important;
    padding-bottom: 8px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .vn-archive__filters { gap: 6px; }
  .vn-archive__filter summary { padding: 4px 10px; font-size: 10px; }
  .vn-archive__pager-nums a:nth-child(n+8) { display: none; }
}
/* END_SECTION:vn-modern-archive */

/* START_SECTION:vn-modern-arrivals (INDEX:75) */
.vn-modern-arrivals__empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
}

/* Below-grid centered "VIEW ALL PRODUCTS" button — Modern editorial */
body.vn-modern .vn-modern-arrivals__cta-row {
  display: flex;
  justify-content: center;
  margin-top: clamp(36px, 5vw, 56px);
}
body.vn-modern .vn-modern-arrivals__cta {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 18px 36px;
  background: var(--vn-fg);
  color: var(--vn-bg);
  border: 1px solid var(--vn-fg);
  border-radius: 0;
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background 220ms var(--vn-ease), color 220ms var(--vn-ease);
}
body.vn-modern .vn-modern-arrivals__cta:hover {
  background: var(--vn-bg);
  color: var(--vn-fg);
}
body.vn-modern .vn-modern-arrivals__cta-arrow {
  font-size: 16px;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-modern-arrivals__cta:hover .vn-modern-arrivals__cta-arrow {
  transform: translateX(4px);
}
@media (max-width: 768px) {
  body.vn-modern .vn-modern-arrivals__cta {
    padding: 16px 28px;
    font-size: 11.5px;
    letter-spacing: 0.16em;
  }
}
/* END_SECTION:vn-modern-arrivals */

/* START_SECTION:vn-modern-article (INDEX:76) */
/* ================================================================
   Modern Article — Prestige main-article re-skinned and CENTERED
   ================================================================ */

/* Sticky toolbar (desktop) — quietly anchors the reader's place */
body.vn-modern .vn-article__toolbar {
  position: sticky;
  top: 0;
  z-index: 5;
  background: var(--vn-bg);
  border-bottom: 1px solid var(--vn-hair);
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-article__toolbar-inner {
  max-width: var(--vn-container-max);
  margin: 0 auto;
  padding: 14px var(--vn-container-pad-desktop);
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  gap: 24px;
  align-items: center;
}
body.vn-modern .vn-article__toolbar-back { color: var(--vn-fg-mute); text-decoration: none; }
body.vn-modern .vn-article__toolbar-back:hover { color: var(--vn-fg); }
body.vn-modern .vn-article__toolbar-title {
  text-align: center;
  color: var(--vn-fg);
  letter-spacing: 0.08em;
  text-transform: none;
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
body.vn-modern .vn-article__toolbar-share {
  display: flex;
  gap: 16px;
  justify-content: flex-end;
}
body.vn-modern .vn-article__toolbar-share a { color: var(--vn-fg-mute); text-decoration: none; }
body.vn-modern .vn-article__toolbar-share a:hover { color: var(--vn-fg); }

/* Article container — narrow centered column. Header is LEFT-aligned
   (eyebrow tag / title / meta), body prose is CENTER-aligned per the
   user's revised direction. Footer share + pager align inside the same
   container with appropriate alignment per element. */
body.vn-modern .vn-article {
  padding: 64px var(--vn-container-pad-desktop) 96px;
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
}

body.vn-modern .vn-article__header {
  padding-bottom: 36px;
  margin-bottom: 36px;
  border-bottom: 1px solid var(--vn-hair);
  text-align: left;
}
body.vn-modern .vn-article__eyebrow {
  display: inline-block;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.20em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  text-decoration: none;
  margin-bottom: 18px;
  padding: 4px 10px;
  border: 1px solid var(--vn-hair-strong);
  transition: color 160ms ease, border-color 160ms ease;
}
body.vn-modern .vn-article__eyebrow:hover {
  color: var(--vn-fg);
  border-color: var(--vn-fg);
}
body.vn-modern .vn-article__title {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 28px;
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--vn-fg);
  margin: 0 0 16px;
  text-wrap: balance;
  /* JS in the inline script below shrinks font-size to fit 2 lines
     without truncating any text, even for very long Japanese titles. */
}
body.vn-modern .vn-article__meta {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  display: inline-flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
}
body.vn-modern .vn-article__meta-sep { opacity: 0.5; }

body.vn-modern .vn-article__hero {
  margin: 0 0 40px;
  background: var(--vn-bg-subtle);
}
body.vn-modern .vn-article__hero img {
  display: block;
  width: 100%;
  height: auto;
}

/* Body content — kept centered per user request, with sensible widths
   so paragraphs stay readable. Inline elements + media are centered. */
body.vn-modern .vn-article__body {
  font-family: var(--vn-font-body), var(--vn-font-body-jp);
  font-size: 16px;
  line-height: 1.85;
  color: var(--vn-fg);
  text-align: center;
}
body.vn-modern .vn-article__body--serif {
  font-family: var(--vn-font-serif);
  font-size: 17px;
  line-height: 1.85;
}
body.vn-modern .vn-article__body p,
body.vn-modern .vn-article__body div { margin: 0 0 20px; }
body.vn-modern .vn-article__body p:last-child,
body.vn-modern .vn-article__body div:last-child { margin-bottom: 0; }
body.vn-modern .vn-article__body img,
body.vn-modern .vn-article__body video,
body.vn-modern .vn-article__body iframe {
  max-width: 100%;
  height: auto;
  margin: 28px auto;
  display: block;
}
body.vn-modern .vn-article__body h2 {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 56px 0 18px;
  text-align: center;
}
body.vn-modern .vn-article__body h3 {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin: 36px 0 12px;
  text-align: center;
}
body.vn-modern .vn-article__body a {
  color: var(--vn-fg);
  text-decoration: underline;
  text-underline-offset: 3px;
}
body.vn-modern .vn-article__body ul,
body.vn-modern .vn-article__body ol {
  list-style-position: inside;
  padding: 0;
  margin: 0 0 20px;
  text-align: center;
}
body.vn-modern .vn-article__body li { margin-bottom: 8px; }
body.vn-modern .vn-article__body blockquote {
  margin: 32px auto;
  padding: 0 32px;
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--vn-fg-mute);
  max-width: 36em;
  text-align: center;
}
body.vn-modern .vn-article__body table {
  margin: 24px auto;
  border-collapse: collapse;
  font-size: 14px;
  text-align: center;
}
body.vn-modern .vn-article__body th,
body.vn-modern .vn-article__body td {
  padding: 12px 16px;
  border: 1px solid var(--vn-hair);
  vertical-align: top;
}
body.vn-modern .vn-article__body th {
  background: var(--vn-bg-subtle);
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* Footer share */
body.vn-modern .vn-article__footer {
  border-top: 1px solid var(--vn-hair);
  margin-top: 56px;
  padding-top: 36px;
}
body.vn-modern .vn-article__share-label {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin: 0 0 14px;
}
body.vn-modern .vn-article__share-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: inline-flex;
  flex-wrap: wrap;
  gap: 18px;
  justify-content: center;
}
body.vn-modern .vn-article__share-list a {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid var(--vn-hair-strong);
  transition: background 160ms ease, color 160ms ease;
}
body.vn-modern .vn-article__share-list a:hover {
  background: var(--vn-fg);
  color: var(--vn-bg);
  border-color: var(--vn-fg);
}

/* Prev / Next pager */
body.vn-modern .vn-article__pager {
  margin-top: 56px;
  padding-top: 36px;
  border-top: 1px solid var(--vn-hair);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
body.vn-modern .vn-article__pager-link {
  text-decoration: none;
  color: var(--vn-fg);
  display: flex;
  flex-direction: column;
  gap: 8px;
  transition: opacity 200ms ease;
}
body.vn-modern .vn-article__pager-link:hover { opacity: 0.7; }
body.vn-modern .vn-article__pager-link--prev { text-align: left; }
body.vn-modern .vn-article__pager-link--next { text-align: right; }
body.vn-modern .vn-article__pager-dir {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-article__pager-title {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  text-wrap: balance;
}

/* ===== Mobile ===== */
@media (max-width: 768px) {
  body.vn-modern .vn-article__toolbar { display: none; }
  body.vn-modern .vn-article {
    padding: 32px 18px 56px;
  }
  body.vn-modern .vn-article__header {
    padding-bottom: 28px;
    margin-bottom: 28px;
  }
  body.vn-modern .vn-article__title { font-size: clamp(22px, 6vw, 32px); }
  body.vn-modern .vn-article__hero { margin: 0 0 28px; }
  body.vn-modern .vn-article__body { font-size: 15px; }
  body.vn-modern .vn-article__body--serif { font-size: 16px; }
  body.vn-modern .vn-article__body h2 { margin: 36px 0 12px; font-size: 18px; }
  body.vn-modern .vn-article__body h3 { margin: 28px 0 10px; font-size: 15px; }
  body.vn-modern .vn-article__share-list { gap: 12px; }
  body.vn-modern .vn-article__share-list a { padding: 6px 12px; font-size: 10px; letter-spacing: 0.12em; }
  body.vn-modern .vn-article__pager { grid-template-columns: 1fr; gap: 18px; margin-top: 36px; padding-top: 28px; }
  body.vn-modern .vn-article__pager-link--next { text-align: left; }
}
/* END_SECTION:vn-modern-article */

/* START_SECTION:vn-modern-blog (INDEX:77) */
.vn-blog { padding: 0 var(--vn-container-pad-desktop) 128px; box-sizing: border-box; max-width: var(--vn-container-max); margin: 0 auto; }

/* Pagination — same visual language as vn-archive__pager.
   margin-top と margin-bottom を等しくして、blog grid 末尾と footer 区切り線
   の縦方向中央に pager が配置されるように。区切り線との被りも解消。 */
.vn-blog__pager {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 24px;
  margin-top: 64px;
  margin-bottom: 64px;
  flex-wrap: wrap;
}
.vn-blog__pager-btn {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-fg);
  text-decoration: none;
  transition: opacity var(--vn-dur-fast) var(--vn-ease);
}
.vn-blog__pager-btn:hover { opacity: 0.6; }
.vn-blog__pager-nums {
  display: flex;
  gap: 12px;
  align-items: center;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.vn-blog__pager-nums a { color: var(--vn-fg-mute); text-decoration: none; }
.vn-blog__pager-nums a:hover { color: var(--vn-fg); }
.vn-blog__pager-nums .is-active { color: var(--vn-fg); border-bottom: 1px solid var(--vn-fg); padding-bottom: 2px; }

/* Head */
.vn-blog__head {
  padding: 128px 0 80px;
  display: grid;
  grid-template-columns: 7fr 5fr;
  gap: 64px;
  align-items: end;
  border-bottom: 1px solid var(--vn-hair);
}
.vn-blog__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(48px, 8vw, 120px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 14px 0 0;
}
.vn-blog__title em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.vn-blog__lede {
  font-family: var(--vn-font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  max-width: 46ch;
  margin: 0;
}

/* Feature article */
.vn-blog__feature {
  padding: 96px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 80px;
  align-items: center;
  border-bottom: 1px solid var(--vn-hair);
  text-decoration: none;
  color: var(--vn-fg);
  transition: opacity 200ms cubic-bezier(.2,.8,.2,1);
}
.vn-blog__feature:hover { opacity: 0.85; }
.vn-blog__feature-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vn-bg-subtle);
}
body.vn-modern .vn-blog__feature-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.vn-blog__meta {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  margin-bottom: 14px;
}
.vn-blog__feature-title {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1.32;
  letter-spacing: -0.005em;
  margin: 0 0 18px;
  text-wrap: balance;
  /* JS in vn-blog__fit-title fits to 2 lines by progressively shrinking
     font-size until scrollHeight <= 2 * line-height. We set a generous
     upper bound here; the JS handles the down-shrink so even long
     Japanese titles render their full text within 2 lines. */
}
.vn-blog__feature-title em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.vn-blog__feature-lede {
  font-family: var(--vn-font-serif);
  font-size: 17px;
  color: var(--vn-fg-mute);
  line-height: 1.6;
  margin: 0 0 24px;
}

/* Grid */
.vn-blog__grid {
  padding: 96px 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 80px 48px;
}
.vn-blog__card {
  display: block;
  text-decoration: none;
  color: inherit;
  transition: opacity 200ms cubic-bezier(.2,.8,.2,1);
}
.vn-blog__card:hover { opacity: 0.85; }
.vn-blog__card-media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--vn-bg-subtle);
  margin-bottom: 24px;
}
body.vn-modern .vn-blog__card-media img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}
.vn-blog__card-meta {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.vn-blog__card-title {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.42;
  letter-spacing: 0;
  margin: 0;
  text-wrap: balance;
  /* Same JS-fit treatment as the feature title — see vn-blog__fit-title.
     Starts at 17px and shrinks (down to 9px floor) until the headline
     fits in 2 lines without ellipsis truncation. */
}
.vn-blog__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  text-align: center;
  padding: 0 16px;
}

@media (max-width: 900px) {
  .vn-blog__head { grid-template-columns: 1fr; padding: 64px 0 48px; gap: 32px; }
  .vn-blog__feature { grid-template-columns: 1fr; gap: 32px; padding: 64px 0; }
  .vn-blog__grid { grid-template-columns: 1fr 1fr; padding: 64px 0; gap: 48px 24px; }
}
@media (max-width: 600px) {
  .vn-blog { padding: 0 16px 64px; }
  .vn-blog__grid { grid-template-columns: 1fr; gap: 48px 0; padding: 48px 0; }
  .vn-blog__head { padding: 48px 0 32px; }
  .vn-blog__feature { padding: 48px 0; }
}
/* END_SECTION:vn-modern-blog */

/* START_SECTION:vn-modern-cart (INDEX:78) */
/* ===== ROOT WRAPPER ===== */
body.vn-modern .vn-mc {
  max-width: 1240px;
  margin: 0 auto;
  padding: 64px var(--vn-container-pad-desktop) 96px;
  background: var(--vn-bg);
  color: var(--vn-fg);
  box-sizing: border-box;
}

/* ===== HERO ===== */
body.vn-modern .vn-mc__hero {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
body.vn-modern .vn-mc__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 110px);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin: 0;
}
body.vn-modern .vn-mc__lots {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  white-space: nowrap;
  padding-bottom: 12px;
}
body.vn-modern .vn-mc__hr {
  border: 0;
  border-top: 1px solid var(--vn-hair);
  margin: 0 0 32px;
}

/* Cart sub-section wrappers: switch to flex column so whitespace-only text
   nodes (between the Liquid render of inner snippets) do not produce phantom
   anonymous line boxes from the inherited 26.4px line-height. Without this,
   each block-level child gains ~26px of unwanted vertical padding. */
body.vn-modern .vn-mc__notice {
  display: flex;
  flex-direction: column;
  margin: 0 0 12px !important;
}
/* Square the stock notice corners and force a clearly visible black hairline
   to match the rest of Modern. The snippet defaults to a faint gray border. */
body.vn-modern .vn-mc__notice .vn-cart-stock-notice {
  border-radius: 0 !important;
  border: 1px solid var(--vn-hair) !important;
}

body.vn-modern .vn-mc__delivery-row {
  display: flex;
  flex-direction: column;
  margin: 0 0 24px !important;
  border: 1px solid var(--vn-hair);
  background: rgba(28, 28, 28, 0.03);
  padding: 14px 18px;
}
/* Remove the snippet's own border / radius / background so we don't get
   a double frame inside the cart's black hairline wrapper. */
body.vn-modern .vn-mc__delivery-row .vn-delivery-estimate {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
}

body.vn-modern .vn-mc__form { margin: 0; }
body.vn-modern .vn-mc__layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 380px;
  gap: 56px;
  align-items: start;
}
body.vn-modern .vn-mc__main { min-width: 0; }

/* ===== LINE ITEMS ===== */
body.vn-modern .vn-mc__lines {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--vn-hair);
  margin-bottom: 40px;
}
body.vn-modern .vn-mc__line {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 24px;
  padding: 28px 0;
  border-bottom: 1px solid var(--vn-hair);
  align-items: start;
}
body.vn-modern .vn-mc__line-img {
  display: block;
  width: 92px; aspect-ratio: 4/5;
  background: var(--vn-bg-subtle);
  overflow: hidden;
  text-decoration: none;
}
body.vn-modern .vn-mc__line-img img {
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-mc__line-img:hover img { transform: scale(1.04); }

body.vn-modern .vn-mc__line-meta {
  display: flex; flex-direction: column;
  gap: 6px;
  min-width: 0;
  padding-top: 4px;
}
body.vn-modern .vn-mc__line-title {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-style: normal;
  font-size: clamp(15px, 1.4vw, 17px);
  line-height: 1.4;
  letter-spacing: 0.005em;
  color: var(--vn-fg);
  text-decoration: none;
  text-transform: none;
}
body.vn-modern .vn-mc__line-title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.vn-modern .vn-mc__line-sku {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-mc__line-variant {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--vn-fg-mute);
}

body.vn-modern .vn-mc__line-side {
  display: flex; flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-top: 4px;
}
body.vn-modern .vn-mc__line-price {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(15px, 1.4vw, 17px);
  letter-spacing: 0.005em;
  font-variant-numeric: tabular-nums;
  color: var(--vn-fg);
}
body.vn-modern .vn-mc__line-compare {
  font-family: var(--vn-font-mono);
  font-size: 12px;
  text-decoration: line-through;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-mc__line-qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vn-hair);
  height: 32px;
  background: var(--vn-bg);
}
body.vn-modern .vn-mc__qty-btn {
  appearance: none; -webkit-appearance: none;
  border: 0;
  background: transparent;
  width: 28px; height: 30px;
  font: inherit;
  font-family: var(--vn-font-display);
  font-size: 16px;
  color: var(--vn-fg);
  line-height: 1;
  cursor: pointer;
  transition: background 200ms var(--vn-ease);
  padding: 0;
}
body.vn-modern .vn-mc__qty-btn:hover { background: var(--vn-bg-subtle); }
body.vn-modern .vn-mc__qty-input {
  appearance: textfield; -moz-appearance: textfield;
  width: 36px; height: 30px;
  border: 0;
  border-left: 1px solid var(--vn-hair);
  border-right: 1px solid var(--vn-hair);
  background: transparent;
  text-align: center;
  font-family: var(--vn-font-mono);
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  color: var(--vn-fg);
  outline: none;
}
body.vn-modern .vn-mc__qty-input::-webkit-outer-spin-button,
body.vn-modern .vn-mc__qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none; margin: 0;
}
body.vn-modern .vn-mc__line-remove {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  text-decoration: none;
  border-bottom: 1px solid var(--vn-fg-mute);
  padding-bottom: 1px;
  transition: color 200ms var(--vn-ease), border-color 200ms var(--vn-ease);
}
body.vn-modern .vn-mc__line-remove:hover {
  color: var(--vn-fg);
  border-color: var(--vn-fg);
}

/* ===== APPS / RECEIPT / NOTE ===== */
body.vn-modern .vn-mc__sec-label {
  display: block;
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin: 0 0 8px !important;
}
body.vn-modern .vn-mc__apps { margin-bottom: 28px; }
body.vn-modern .vn-mc__apps-list {
  display: flex; flex-direction: column; gap: 14px;
  border: 1px solid var(--vn-hair);
  padding: 20px 22px;
}
body.vn-modern .vn-mc__app-block label {
  font-family: var(--vn-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--vn-fg-mute) !important;
}
body.vn-modern .vn-mc__app-block input[type="text"],
body.vn-modern .vn-mc__app-block input[type="date"],
body.vn-modern .vn-mc__app-block input[type="email"],
body.vn-modern .vn-mc__app-block select {
  border: 1px solid var(--vn-hair) !important;
  border-radius: 0 !important;
  background: var(--vn-bg) !important;
  padding: 10px 14px !important;
  font: inherit !important;
  font-size: 14px !important;
  color: var(--vn-fg) !important;
}

body.vn-modern .vn-mc__receipt {
  display: flex;
  flex-direction: column;
  margin: 0 0 14px !important;
}
body.vn-modern .vn-mc__receipt-card {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--vn-hair);
  padding: 12px 14px;
}
/* Kill the receipt snippet's internal #vn-receipt-note-snippet margin-top: 14px
   plus any Prestige-injected margins that inflate the card height. The snippet
   wrapper inherits a 26.4px line-height which combined with whitespace text nodes
   between block children adds ~105px of phantom vertical space. Switching to
   flex collapses those anonymous inline boxes. */
body.vn-modern .vn-mc__receipt-card .vn-receipt-note,
body.vn-modern .vn-mc__receipt-card #vn-receipt-note-snippet {
  display: flex !important;
  flex-direction: column !important;
  margin: 0 !important;
  line-height: 1 !important;
}
body.vn-modern .vn-mc__receipt-card .vn-receipt-note__fields[hidden] {
  display: none !important;
}
body.vn-modern .vn-mc__receipt .vn-receipt-note { margin: 0 !important; }
body.vn-modern .vn-mc__receipt .vn-receipt-note__toggle-row {
  font-family: var(--vn-font-mono);
  font-size: 12.5px;
  letter-spacing: 0.04em;
  margin: 0 !important;
  padding: 0 !important;
}
body.vn-modern .vn-mc__receipt .vn-receipt-note__label {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 13.5px;
  letter-spacing: 0.02em;
  color: var(--vn-fg);
}
body.vn-modern .vn-mc__receipt .vn-receipt-note__fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
body.vn-modern .vn-mc__receipt .vn-receipt-note__fields .form-control {
  display: flex; flex-direction: column; gap: 6px;
}
body.vn-modern .vn-mc__receipt .vn-receipt-note__fields label {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-mc__receipt .vn-receipt-note__fields input.input {
  border: 1px solid var(--vn-hair);
  border-radius: 0;
  background: var(--vn-bg);
  padding: 10px 12px;
  font: inherit;
  font-size: 14px;
  color: var(--vn-fg);
  outline: none;
}
body.vn-modern .vn-mc__receipt .vn-receipt-note__fields input.input:focus {
  box-shadow: 0 0 0 3px rgba(28,28,28,0.5);
}
body.vn-modern .vn-mc__receipt .vn-receipt-note__error {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  color: #b14545;
}

body.vn-modern .vn-mc__note {
  display: flex;
  flex-direction: column;
  margin: 0 0 20px !important;
}
body.vn-modern .vn-mc__note-wrap { display: flex; flex-direction: column; margin: 0 !important; }
body.vn-modern .vn-mc__note .vn-mc__note-input { margin: 0 !important; }
body.vn-modern .vn-mc__note-input {
  width: 100%;
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  padding: 14px 16px;
  font: inherit;
  font-family: var(--vn-font-body), var(--vn-font-body-jp);
  font-size: 14px;
  line-height: 1.6;
  color: var(--vn-fg);
  outline: none;
  resize: vertical;
  min-height: 96px;
  border-radius: 0;
  box-sizing: border-box;
  transition: box-shadow 200ms var(--vn-ease);
}
body.vn-modern .vn-mc__note-input::placeholder {
  color: var(--vn-fg-mute);
  font-style: italic;
  font-family: var(--vn-font-serif);
  opacity: 0.75;
}
body.vn-modern .vn-mc__note-input:focus {
  box-shadow: 0 0 0 3px rgba(28,28,28,0.5);
}

/* ===== SUMMARY ===== */
body.vn-modern .vn-mc__summary {
  position: sticky;
  top: 96px;
  align-self: start;
}
body.vn-modern .vn-mc__summary-card {
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  padding: 28px 32px 32px;
}
body.vn-modern .vn-mc__summary-eyebrow {
  display: block;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin-bottom: 16px;
}
body.vn-modern .vn-mc__summary-hr {
  border: 0;
  border-top: 1px solid var(--vn-hair);
  margin: 0;
}
body.vn-modern .vn-mc__summary-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0;
  border-bottom: 1px solid var(--vn-hair);
}
body.vn-modern .vn-mc__summary-row:last-of-type { border-bottom: 0; }
body.vn-modern .vn-mc__summary-row-l {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 13.5px;
  color: var(--vn-fg);
  letter-spacing: 0.005em;
}
body.vn-modern .vn-mc__summary-row-r {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: 0.005em;
  color: var(--vn-fg);
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-mc__summary-row-r--note {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 13px;
  color: var(--vn-fg-mute);
}

body.vn-modern .vn-mc__summary-total {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 18px 0 22px;
}
body.vn-modern .vn-mc__summary-total-l {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vn-fg);
}
body.vn-modern .vn-mc__summary-total-r {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2vw, 24px);
  letter-spacing: -0.005em;
  color: var(--vn-fg);
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-mc__summary-total-note {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--vn-fg-mute);
  margin: -8px 0 14px;
}

body.vn-modern .vn-mc__summary-actions {
  display: flex; flex-direction: column;
  gap: 10px;
  margin: 4px 0 16px;
}
body.vn-modern .vn-mc__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 100%;
  height: 52px;
  padding: 0 20px;
  border-radius: 0;
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none;
  text-align: center;
  transition: background 220ms var(--vn-ease), color 220ms var(--vn-ease), border-color 220ms var(--vn-ease);
}
body.vn-modern .vn-mc__btn--primary {
  background: var(--vn-fg);
  color: var(--vn-bg);
  border: 1px solid var(--vn-fg);
}
body.vn-modern .vn-mc__btn--primary:hover { background: #000; }
body.vn-modern .vn-mc__btn--outline {
  background: var(--vn-bg);
  color: var(--vn-fg);
  border: 1px solid var(--vn-hair);
}
body.vn-modern .vn-mc__btn--outline:hover {
  border-color: var(--vn-fg);
  background: var(--vn-bg-subtle);
}

/* Accelerated checkout buttons (Shop Pay / PayPal / Google Pay / Apple Pay)
   Shopify renders these with their official styling — we just control
   spacing and ensure the container stacks them vertically. */
body.vn-modern .vn-mc__accel,
body.vn-modern .vn-mc__accel.additional-checkout-buttons {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}
body.vn-modern .vn-mc__accel > * {
  margin: 0 !important;
  width: 100% !important;
}
body.vn-modern .vn-mc__accel .shopify-cleanslate {
  width: 100% !important;
}

body.vn-modern .vn-mc__summary-foot {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  margin: 0 0 18px;
}

body.vn-modern .vn-mc__trust {
  list-style: none; margin: 0; padding: 14px 0 0;
  display: flex; flex-direction: column;
  gap: 10px;
  border-top: 1px solid var(--vn-hair);
}
body.vn-modern .vn-mc__trust li {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg);
}

/* ===== BELOW SECTION — installment + trust stats 2-col ===== */
body.vn-modern .vn-mc__below {
  margin-top: 64px;
  padding-top: 56px;
  border-top: 1px solid var(--vn-hair);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: start;
}
body.vn-modern .vn-mc__below-col {
  min-width: 0;
}

/* Installment frame — wraps the snippet */
body.vn-modern .vn-mc__installment-frame {
  border: 1px solid var(--vn-hair);
  padding: 28px 32px;
}
/* Override the installment snippet's internal styling to match Modern */
body.vn-modern .vn-mc__installment-frame .vn-eps {
  background: var(--vn-bg) !important;
  border: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
  font-family: var(--vn-font-body), var(--vn-font-body-jp) !important;
  color: var(--vn-fg) !important;
  box-shadow: none !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__title {
  font-family: var(--vn-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(18px, 1.8vw, 22px) !important;
  line-height: 1.1 !important;
  letter-spacing: -0.005em !important;
  text-transform: uppercase !important;
  color: var(--vn-fg) !important;
  text-align: left !important;
  margin: 0 0 6px !important;
  word-break: keep-all !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__amount {
  font-family: var(--vn-font-display) !important;
  font-weight: 800 !important;
  font-size: clamp(28px, 3vw, 38px) !important;
  letter-spacing: -0.01em !important;
  font-variant-numeric: tabular-nums !important;
  color: var(--vn-fg) !important;
  text-align: left !important;
  margin: 8px 0 18px !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__row {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  gap: 16px !important;
  padding: 12px 0 !important;
  border-top: 1px solid var(--vn-hair) !important;
  border-bottom: 1px solid var(--vn-hair) !important;
  margin: 0 0 16px !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__label {
  font-family: var(--vn-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--vn-fg-mute) !important;
  margin: 0 !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps select {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid var(--vn-hair) !important;
  border-radius: 0 !important;
  background: var(--vn-bg) !important;
  padding: 8px 32px 8px 12px !important;
  font-family: var(--vn-font-display) !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  color: var(--vn-fg) !important;
  cursor: pointer !important;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%231C1C1C' stroke-width='1.5'><polyline points='4 9 12 17 20 9'/></svg>") !important;
  background-repeat: no-repeat !important;
  background-position: right 10px center !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps input[type="checkbox"] {
  appearance: none !important;
  -webkit-appearance: none !important;
  width: 16px !important;
  height: 16px !important;
  border: 1px solid var(--vn-hair) !important;
  background: var(--vn-bg) !important;
  cursor: pointer !important;
  position: relative !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps input[type="checkbox"]:checked {
  background: var(--vn-fg) !important;
  border-color: var(--vn-fg) !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps input[type="checkbox"]:checked::after {
  content: '' !important;
  position: absolute !important;
  left: 4px !important; top: 1px !important;
  width: 5px !important; height: 9px !important;
  border-right: 2px solid var(--vn-bg) !important;
  border-bottom: 2px solid var(--vn-bg) !important;
  transform: rotate(45deg) !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__row label {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-family: var(--vn-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.06em !important;
  color: var(--vn-fg-mute) !important;
  cursor: pointer !important;
  opacity: 1 !important;
  margin: 0 !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__caption {
  font-family: var(--vn-font-body), var(--vn-font-body-jp) !important;
  font-size: 13px !important;
  line-height: 1.7 !important;
  color: var(--vn-fg) !important;
  margin: 0 0 14px !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__caption strong {
  font-family: var(--vn-font-display) !important;
  font-weight: 700 !important;
  display: block !important;
  font-size: 13.5px !important;
  margin-bottom: 4px !important;
  color: var(--vn-fg) !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__caption a {
  color: var(--vn-fg) !important;
  text-decoration: underline !important;
  text-underline-offset: 3px !important;
}
body.vn-modern .vn-mc__installment-frame .vn-eps__note {
  font-family: var(--vn-font-serif) !important;
  font-style: italic !important;
  font-size: 12px !important;
  line-height: 1.6 !important;
  color: var(--vn-fg-mute) !important;
  margin: 0 !important;
  padding-top: 12px !important;
  border-top: 1px solid var(--vn-hair) !important;
  background: transparent !important;
}

/* Trust stats frame */
body.vn-modern .vn-mc__trust-stats-frame {
  border: 1px solid var(--vn-hair);
  padding: 28px 32px;
  display: flex; flex-direction: column;
  gap: 18px;
}
body.vn-modern .vn-mc__trust-stats-frame .vn-trust-support {
  display: flex; flex-direction: column; gap: 18px;
}
body.vn-modern .vn-mc__trust-stats-frame .vn-trust-badges-wrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px 32px;
}
body.vn-modern .vn-mc__trust-stats-frame .vn-trust-badges {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-direction: column;
  gap: 10px;
}
body.vn-modern .vn-mc__trust-stats-frame .vn-trust-badges__item {
  display: flex; align-items: center;
  gap: 10px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--vn-fg);
}
body.vn-modern .vn-mc__trust-stats-frame .vn-trust-badges__icon {
  width: 16px; height: 16px;
  color: var(--vn-fg);
  flex-shrink: 0;
}
body.vn-modern .vn-mc__trust-stats-frame .vn-trust-badges__value {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 14px;
  color: var(--vn-fg);
  font-variant-numeric: tabular-nums;
  margin-right: 2px;
}

/* ===== EMPTY STATE ===== */
body.vn-modern .vn-mc__empty-card {
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  padding: 80px 32px 64px;
  text-align: center;
  margin-bottom: 64px;
}
body.vn-modern .vn-mc__empty-eyebrow {
  display: inline-block;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin-bottom: 16px;
}
body.vn-modern .vn-mc__empty-h {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(36px, 4vw, 56px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin: 0;
}
body.vn-modern .vn-mc__empty-p {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--vn-fg-mute);
  max-width: 50ch;
  margin: 22px auto 32px;
}
body.vn-modern .vn-mc__empty-cta {
  display: inline-flex;
  align-items: center; gap: 14px;
  padding: 16px 32px;
  background: var(--vn-fg);
  color: var(--vn-bg);
  border: 1px solid var(--vn-fg);
  text-decoration: none;
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  transition: opacity 200ms var(--vn-ease);
}
body.vn-modern .vn-mc__empty-cta:hover { opacity: 0.85; }

/* ===== YOU MAY ALSO LIKE / RECENTLY VIEWED ===== */
body.vn-modern .vn-mc__rv-sec {
  margin-top: 96px;
  padding-top: 56px;
  border-top: 1px solid var(--vn-hair);
}
body.vn-modern .vn-mc__rv-head {
  display: flex; align-items: baseline;
  gap: 16px;
  margin-bottom: 36px;
}
body.vn-modern .vn-mc__rv-title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin: 0;
}
body.vn-modern .vn-mc__rv-sub {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 14px;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-mc__rv-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 28px;
}
body.vn-modern .vn-mc__pcard {
  display: flex; flex-direction: column;
  gap: 8px;
  text-decoration: none;
  color: var(--vn-fg);
}
body.vn-modern .vn-mc__pcard-img {
  width: 100%; aspect-ratio: 4/5;
  background: var(--vn-bg-subtle);
  overflow: hidden;
}
body.vn-modern .vn-mc__pcard-img img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-mc__pcard:hover .vn-mc__pcard-img img { transform: scale(1.04); }
body.vn-modern .vn-mc__pcard-title {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 13.5px;
  line-height: 1.4;
  color: var(--vn-fg);
  margin-top: 4px;
}
body.vn-modern .vn-mc__pcard-price {
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--vn-fg-mute);
  font-variant-numeric: tabular-nums;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 1024px) {
  body.vn-modern .vn-mc__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.vn-modern .vn-mc__summary { position: static; }
  body.vn-modern .vn-mc__below {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  body.vn-modern .vn-mc__rv-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 768px) {
  /* ===== Mobile cart — Modern editorial overhaul ===== */
  body.vn-modern .vn-mc {
    padding: 28px var(--vn-container-pad-mobile, 16px) calc(110px + env(safe-area-inset-bottom));
  }

  /* HERO — smaller, two-line balanced */
  body.vn-modern .vn-mc__hero {
    flex-direction: row;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 14px;
  }
  body.vn-modern .vn-mc__title {
    font-size: clamp(36px, 11vw, 56px);
    line-height: 0.92;
    letter-spacing: -0.02em;
  }
  body.vn-modern .vn-mc__lots {
    padding-bottom: 6px;
    font-size: 10px;
    letter-spacing: 0.18em;
  }
  body.vn-modern .vn-mc__hr { margin-bottom: 22px; }
  body.vn-modern .vn-mc__notice { margin: 0 0 10px !important; }
  body.vn-modern .vn-mc__delivery-row { margin: 0 0 18px !important; padding: 12px 14px; }
  body.vn-modern .vn-mc__sec-label { margin: 0 0 6px !important; }
  body.vn-modern .vn-mc__receipt { margin: 0 0 12px !important; }
  body.vn-modern .vn-mc__receipt-card { padding: 10px 12px; }
  body.vn-modern .vn-mc__note { margin: 0 0 16px !important; }

  /* LINE ITEMS — image left, full-width meta + side stacked, hairline rows */
  body.vn-modern .vn-mc__lines { margin-bottom: 32px; }
  body.vn-modern .vn-mc__line {
    grid-template-columns: 80px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
    align-items: stretch;
  }
  body.vn-modern .vn-mc__line-img { width: 80px; aspect-ratio: 4/5; }
  body.vn-modern .vn-mc__line-meta { padding-top: 0; gap: 4px; }
  body.vn-modern .vn-mc__line-title { font-size: 14px; line-height: 1.45; }
  body.vn-modern .vn-mc__line-sku { font-size: 9.5px; letter-spacing: 0.14em; }
  body.vn-modern .vn-mc__line-variant { font-size: 10.5px; }

  /* SIDE — moved into row 2, spans full width, single inline strip */
  body.vn-modern .vn-mc__line-side {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap;
    gap: 12px;
    padding-top: 14px;
    margin-top: 14px;
    border-top: 1px solid var(--vn-hair);
  }
  body.vn-modern .vn-mc__line-price {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.005em;
    flex: 0 0 auto;
    margin-right: auto;
  }
  body.vn-modern .vn-mc__line-compare { font-size: 11px; }
  body.vn-modern .vn-mc__line-qty {
    height: 30px;
    flex: 0 0 auto;
  }
  body.vn-modern .vn-mc__qty-btn {
    width: 26px; height: 28px;
    min-height: 0;
    font-size: 14px;
  }
  body.vn-modern .vn-mc__qty-input {
    width: 30px; height: 28px;
    font-size: 11.5px;
  }
  body.vn-modern .vn-mc__line-remove {
    font-size: 9.5px;
    letter-spacing: 0.16em;
    flex: 0 0 auto;
    border-bottom-width: 1px;
  }

  /* SUMMARY card — mobile dimensions */
  body.vn-modern .vn-mc__summary-card { padding: 22px 18px 24px; }
  body.vn-modern .vn-mc__summary-eyebrow { font-size: 10px; margin-bottom: 12px; }
  body.vn-modern .vn-mc__summary-row { padding: 12px 0; }
  body.vn-modern .vn-mc__summary-row-l,
  body.vn-modern .vn-mc__summary-row-r { font-size: 13px; }
  body.vn-modern .vn-mc__summary-total { padding: 16px 0 18px; }
  body.vn-modern .vn-mc__summary-total-l { font-size: 13px; }
  body.vn-modern .vn-mc__summary-total-r { font-size: 22px; }
  body.vn-modern .vn-mc__summary-total-note { font-size: 11px; }
  body.vn-modern .vn-mc__summary-foot { font-size: 12px; margin-bottom: 14px; }
  body.vn-modern .vn-mc__btn { height: 48px; font-size: 11.5px; letter-spacing: 0.14em; }
  body.vn-modern .vn-mc__trust li { font-size: 10px; letter-spacing: 0.12em; }

  /* BELOW (installment + trust) */
  body.vn-modern .vn-mc__below {
    margin-top: 40px;
    padding-top: 32px;
    gap: 24px;
  }
  body.vn-modern .vn-mc__installment-frame,
  body.vn-modern .vn-mc__trust-stats-frame {
    padding: 20px 18px;
  }
  body.vn-modern .vn-mc__trust-stats-frame .vn-trust-badges-wrap {
    grid-template-columns: 1fr;
  }

  /* RECOMMENDED below */
  body.vn-modern .vn-mc__rv-sec { margin-top: 48px; padding-top: 28px; }
  body.vn-modern .vn-mc__rv-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* EMPTY state */
  body.vn-modern .vn-mc__empty-card { padding: 48px 20px 40px; margin-bottom: 40px; }
  body.vn-modern .vn-mc__receipt .vn-receipt-note__fields { grid-template-columns: 1fr; }

  /* Hide the floating mini-cart CTA when the user is already on the cart page —
     showing both the page checkout AND a floating cart icon is redundant and
     pushes a third visible action onto the bottom of the screen alongside the
     sticky checkout bar and the chat widget. */
  body.vn-modern .template-cart .vn-mini-cart-cta,
  body.vn-modern.template-cart .vn-mini-cart-cta {
    display: none !important;
  }

  /* Push 3rd-party chat widgets above the sticky checkout bar so they don't
     overlap the CHECKOUT button. The sticky bar height (~88px) + safe area +
     16px breathing room = ~120px total bottom offset for chat. Targets common
     widgets (Tidio, Crisp, Intercom, Drift, Shopify Inbox, custom Vieux AI). */
  body.vn-modern .template-cart #tidio-chat,
  body.vn-modern.template-cart #tidio-chat,
  body.vn-modern .template-cart .crisp-client,
  body.vn-modern.template-cart .crisp-client,
  body.vn-modern .template-cart #intercom-container,
  body.vn-modern.template-cart #intercom-container,
  body.vn-modern .template-cart #ShopifyChatWidget-container,
  body.vn-modern.template-cart #ShopifyChatWidget-container,
  body.vn-modern .template-cart .shop-with-ai,
  body.vn-modern.template-cart .shop-with-ai,
  body.vn-modern .template-cart [class*="vieux-chatbot"],
  body.vn-modern.template-cart [class*="vieux-chatbot"] {
    bottom: calc(110px + env(safe-area-inset-bottom)) !important;
  }
}
/* END_SECTION:vn-modern-cart */

/* START_SECTION:vn-modern-custom-liquid (INDEX:79) */
.vn-modern-custom-liquid__inner { width: 100%; }
.vn-modern-custom-liquid__inner--start  { text-align: left; }
.vn-modern-custom-liquid__inner--center { text-align: center; }
.vn-modern-custom-liquid__inner--end    { text-align: right; }
/* END_SECTION:vn-modern-custom-liquid */

/* START_SECTION:vn-modern-discover (INDEX:80) */
/* === Container === */
body.vn-modern .vn-disc__pool { display: block; }

/* Desktop (≥1025px): 4 columns × 2 rows = 8 cards in a static grid. */
body.vn-modern .vn-disc__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 13px;
}

/* Tablet / Mobile (≤1024px): 2-row horizontal-scroll grid.
   `grid-auto-flow: column` fills column-by-column → first 2 columns
   (= 4 cards: 2 visible top + 2 below) sit in viewport, swiping right
   reveals the next 2 columns (= 4 more cards). */
@media (max-width: 1024px) {
  body.vn-modern .vn-disc__grid {
    grid-template-columns: none;
    grid-template-rows: 1fr 1fr;
    grid-auto-flow: column;
    grid-auto-columns: calc((100vw - var(--vn-container-pad-desktop, 32px) * 2 - 10px) / 2);
    gap: 10px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    scroll-snap-type: x mandatory;
    /* Full-bleed scroll within the section's container padding */
    margin-left: calc(var(--vn-container-pad-desktop, 32px) * -1);
    margin-right: calc(var(--vn-container-pad-desktop, 32px) * -1);
    padding: 0 var(--vn-container-pad-desktop, 32px) 8px;
  }
  body.vn-modern .vn-disc__grid::-webkit-scrollbar { display: none; }
  body.vn-modern .vn-disc__card { scroll-snap-align: start; }
}

@media (max-width: 768px) {
  body.vn-modern .vn-disc__grid {
    grid-auto-columns: calc((100vw - var(--vn-container-pad-mobile, 16px) * 2 - 10px) / 2);
    margin-left: calc(var(--vn-container-pad-mobile, 16px) * -1);
    margin-right: calc(var(--vn-container-pad-mobile, 16px) * -1);
    padding: 0 var(--vn-container-pad-mobile, 16px) 8px;
  }
}

body.vn-modern .vn-disc__source[hidden] { display: none !important; }

/* === Card === */
body.vn-modern .vn-disc__card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  /* Golden landscape: 8/5 = 1.6 ≈ φ. Compact while preserving vertical
     rhythm for the 3-row text stack (eyebrow / title / cta). */
  aspect-ratio: 8 / 5;
  padding: 13px 16px;
  background: var(--vn-bg);
  border: 1px solid var(--vn-hair);
  color: var(--vn-fg);
  text-decoration: none;
  overflow: hidden;
  isolation: isolate;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-disc__card:hover { transform: translateY(-3px); }
body.vn-modern .vn-disc__card:hover .vn-disc__bg { opacity: 0.32; }
body.vn-modern .vn-disc__card:hover .vn-disc__arrow { transform: translateX(4px); }

@media (max-width: 768px) {
  body.vn-modern .vn-disc__card { padding: 11px 13px; aspect-ratio: 5 / 4; }
}

/* === SVG-based pattern backgrounds (data URL → crisp at any size) === */
body.vn-modern .vn-disc__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.16;
  pointer-events: none;
  transition: opacity 320ms cubic-bezier(.2,.8,.2,1);
}

/* ── ERA: vintage (early 20th C) — bold horizontal stripes ── */
body.vn-modern .vn-disc__card[data-pattern="era-vintage"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Cline x1='0' y1='1' x2='21' y2='1' stroke='%231C1C1C' stroke-width='2'/%3E%3C/svg%3E");
  background-size: 21px 21px;
}

/* ── ERA: archive (mid-century 1920–1940s) — fine horizontal lines, golden gap 13px ── */
body.vn-modern .vn-disc__card[data-pattern="era-archive"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="lines-h"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cline x1='0' y1='0.5' x2='13' y2='0.5' stroke='%231C1C1C' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 13px 13px;
}

/* ── ERA: modernist (1950–1970s) — sparse horizontal pairs ── */
body.vn-modern .vn-disc__card[data-pattern="era-modernist"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='34'%3E%3Cline x1='0' y1='1' x2='34' y2='1' stroke='%231C1C1C' stroke-width='1'/%3E%3Cline x1='0' y1='4' x2='34' y2='4' stroke='%231C1C1C' stroke-width='1'/%3E%3C/svg%3E");
  background-size: 34px 34px;
}

/* ── ERA: grid (1980s+) — fine grid 13px ── */
body.vn-modern .vn-disc__card[data-pattern="era-grid"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="grid"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M0 0 L13 0 M0 0 L0 13' stroke='%231C1C1C' stroke-width='0.6' fill='none'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  opacity: 0.13;
}

/* ── TYPE workwear: diagonal twill weave (denim) ── */
body.vn-modern .vn-disc__card[data-pattern="workwear-twill"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="lines-d"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cpath d='M0 8 L8 0' stroke='%231C1C1C' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  opacity: 0.13;
}

/* ── TYPE military: chevron V ── */
body.vn-modern .vn-disc__card[data-pattern="military-chevron"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="bars"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='13'%3E%3Cpolyline points='0,12 10.5,2 21,12' stroke='%231C1C1C' stroke-width='0.7' fill='none'/%3E%3C/svg%3E");
  background-size: 21px 13px;
  opacity: 0.16;
}

/* ── TYPE tailoring: pinstripe ── */
body.vn-modern .vn-disc__card[data-pattern="tailoring-pinstripe"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="lines-v"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="hatch"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='5' height='5'%3E%3Cline x1='0.5' y1='0' x2='0.5' y2='5' stroke='%231C1C1C' stroke-width='0.7'/%3E%3C/svg%3E");
  background-size: 5px 5px;
  opacity: 0.13;
}

/* ── TYPE hunting: organic foliage (offset dot pairs) ── */
body.vn-modern .vn-disc__card[data-pattern="hunting-foliage"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="dots"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='21'%3E%3Ccircle cx='4' cy='4' r='1' fill='%231C1C1C'/%3E%3Ccircle cx='14' cy='10' r='0.7' fill='%231C1C1C'/%3E%3Ccircle cx='8' cy='17' r='1' fill='%231C1C1C'/%3E%3C/svg%3E");
  background-size: 21px 21px;
  opacity: 0.18;
}

/* ── TYPE knitwear: cross-stitch X ── */
body.vn-modern .vn-disc__card[data-pattern="knitwear-stitch"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Cpath d='M2 2 L11 11 M11 2 L2 11' stroke='%231C1C1C' stroke-width='0.6'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  opacity: 0.16;
}

/* ── TYPE generic: subtle dotted grid ── */
body.vn-modern .vn-disc__card[data-pattern="category-grid"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13'%3E%3Ccircle cx='6.5' cy='6.5' r='0.7' fill='%231C1C1C'/%3E%3C/svg%3E");
  background-size: 13px 13px;
  opacity: 0.18;
}

/* ── BRAND: monogram corner frame (Fibonacci 21px length) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-monogram"] .vn-disc__bg,
body.vn-modern .vn-disc__card[data-pattern="frame"] .vn-disc__bg {
  background:
    linear-gradient(#1C1C1C, #1C1C1C) top left / 21px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) top left / 1px 21px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) top right / 21px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) top right / 1px 21px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom left / 21px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom left / 1px 21px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom right / 21px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom right / 1px 21px no-repeat;
  opacity: 0.5;
}
body.vn-modern .vn-disc__card[data-pattern="brand-monogram"] .vn-disc__bg::before,
body.vn-modern .vn-disc__card[data-pattern="frame"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(45deg);
  width: 13px; height: 13px;
  border: 1px solid #1C1C1C;
}

/* ── BRAND luxury: radial fan (Hermès / Armani etc.) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-fan"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='50' viewBox='0 0 80 50'%3E%3Cg stroke='%231C1C1C' stroke-width='0.6' fill='none'%3E%3Cpath d='M0 50 L20 0'/%3E%3Cpath d='M0 50 L40 0'/%3E%3Cpath d='M0 50 L60 0'/%3E%3Cpath d='M0 50 L80 0'/%3E%3Cpath d='M0 50 L80 25'/%3E%3Cpath d='M0 50 L80 50'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-position: bottom left;
  background-repeat: no-repeat;
  opacity: 0.13;
}

/* ── COUNTRY: simple emblem (concentric rectangles, golden ratio) ── */
body.vn-modern .vn-disc__card[data-pattern="country-emblem"] .vn-disc__bg {
  background:
    linear-gradient(#1C1C1C, #1C1C1C) top    / 100% 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom / 100% 1px no-repeat;
  opacity: 0.18;
}
body.vn-modern .vn-disc__card[data-pattern="country-emblem"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  /* Inner rect uses golden ratio: 62% × 38% */
  width: 62%;
  height: 38%;
  border: 1px solid #1C1C1C;
}

/* ── CONCENTRIC (legacy backward compat) ── */
body.vn-modern .vn-disc__card[data-pattern="circle"] .vn-disc__bg::before,
body.vn-modern .vn-disc__card[data-pattern="square"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 62%;
  aspect-ratio: 1;
  border: 1px solid #1C1C1C;
}
body.vn-modern .vn-disc__card[data-pattern="circle"] .vn-disc__bg::before { border-radius: 50%; }
body.vn-modern .vn-disc__card[data-pattern="circle"] .vn-disc__bg::after,
body.vn-modern .vn-disc__card[data-pattern="square"] .vn-disc__bg::after {
  content: '';
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: 38%;
  aspect-ratio: 1;
  border: 1px solid #1C1C1C;
}
body.vn-modern .vn-disc__card[data-pattern="circle"] .vn-disc__bg::after { border-radius: 50%; }

/* ── WAVE (legacy backward compat) ── */
body.vn-modern .vn-disc__card[data-pattern="wave"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='13'%3E%3Cpath d='M0 6.5 Q 8.5 0, 17 6.5 T 34 6.5' stroke='%231C1C1C' stroke-width='0.6' fill='none'/%3E%3C/svg%3E");
  background-size: 34px 13px;
}

/* =========================================================
   New themed patterns (extra variety to avoid duplicates)
   ========================================================= */

/* ── ERA: zigzag (modernist alt) ── */
body.vn-modern .vn-disc__card[data-pattern="era-zigzag"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='13'%3E%3Cpolyline points='0,12 8.5,2 17,12 25.5,2 34,12' stroke='%231C1C1C' stroke-width='0.7' fill='none'/%3E%3C/svg%3E");
  background-size: 34px 13px;
  opacity: 0.16;
}

/* ── ERA: thick bars (military rank style, era-bars-thick) ── */
body.vn-modern .vn-disc__card[data-pattern="era-bars-thick"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='34'%3E%3Cline x1='0' y1='6' x2='40' y2='6' stroke='%231C1C1C' stroke-width='2.5'/%3E%3Cline x1='0' y1='17' x2='40' y2='17' stroke='%231C1C1C' stroke-width='2.5'/%3E%3Cline x1='0' y1='28' x2='40' y2='28' stroke='%231C1C1C' stroke-width='2.5'/%3E%3C/svg%3E");
  background-size: 40px 34px;
  opacity: 0.12;
}

/* ── ERA: rings (single concentric circle, off-center) ── */
body.vn-modern .vn-disc__card[data-pattern="era-rings"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  right: -8%;
  top: 50%;
  transform: translateY(-50%);
  width: 55%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #1C1C1C;
  opacity: 1;
}
body.vn-modern .vn-disc__card[data-pattern="era-rings"] .vn-disc__bg::after {
  content: '';
  position: absolute;
  right: 8%;
  top: 50%;
  transform: translateY(-50%);
  width: 30%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #1C1C1C;
}

/* ── ERA: fade — gradient fade horizontal (slow rhythm) ── */
body.vn-modern .vn-disc__card[data-pattern="era-fade"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Cline x1='0' y1='4' x2='8' y2='4' stroke='%231C1C1C' stroke-width='0.5'/%3E%3C/svg%3E");
  background-size: 8px 8px;
  opacity: 0.10;
}

/* ── BRAND: arch (bottom-anchored semicircle) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-arch"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -20%;
  margin: 0 auto;
  width: 80%;
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #1C1C1C;
  border-bottom: 0;
}

/* ── BRAND: cross (centered plus) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-cross"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 21px;
  height: 1px;
  background: #1C1C1C;
}
body.vn-modern .vn-disc__card[data-pattern="brand-cross"] .vn-disc__bg::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 1px;
  height: 21px;
  background: #1C1C1C;
}

/* ── BRAND: triangle (centered) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-triangle"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 100 60' preserveAspectRatio='xMidYMid meet'%3E%3Cpolygon points='50,18 70,42 30,42' stroke='%231C1C1C' stroke-width='0.6' fill='none'/%3E%3C/svg%3E");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.55;
}

/* ── BRAND: vertical bar (left-third thick stroke) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-vbar"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 38.2%; /* φ⁻² approx */
  top: 0;
  bottom: 0;
  width: 2px;
  background: #1C1C1C;
}

/* ── BRAND: asterisk (8-point star) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-asterisk"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 50 50' preserveAspectRatio='xMidYMid meet'%3E%3Cg stroke='%231C1C1C' stroke-width='0.6'%3E%3Cline x1='25' y1='15' x2='25' y2='35'/%3E%3Cline x1='15' y1='25' x2='35' y2='25'/%3E%3Cline x1='18' y1='18' x2='32' y2='32'/%3E%3Cline x1='32' y1='18' x2='18' y2='32'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 60% auto;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}

/* ── BRAND: rings (3 concentric circles centered) ── */
body.vn-modern .vn-disc__card[data-pattern="brand-rings"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 60 60' preserveAspectRatio='xMidYMid meet'%3E%3Cg stroke='%231C1C1C' stroke-width='0.6' fill='none'%3E%3Ccircle cx='30' cy='30' r='20'/%3E%3Ccircle cx='30' cy='30' r='13'/%3E%3Ccircle cx='30' cy='30' r='7'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 70% auto;
  background-repeat: no-repeat;
  background-position: center;
  opacity: 0.5;
}

/* ── COUNTRY: stripes (3 horizontal flag-like bars) ── */
body.vn-modern .vn-disc__card[data-pattern="country-stripes"] .vn-disc__bg {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100%25' height='100%25' viewBox='0 0 80 60' preserveAspectRatio='none'%3E%3Cg stroke='%231C1C1C' stroke-width='5'%3E%3Cline x1='0' y1='10' x2='80' y2='10'/%3E%3Cline x1='0' y1='30' x2='80' y2='30'/%3E%3Cline x1='0' y1='50' x2='80' y2='50'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0.10;
}

/* ── COUNTRY: single circle (Japan-style mark) ── */
body.vn-modern .vn-disc__card[data-pattern="country-circle"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 38%; /* φ⁻² */
  aspect-ratio: 1;
  border-radius: 50%;
  border: 1px solid #1C1C1C;
}

/* ── COUNTRY: cross (large centered cross like flags) ── */
body.vn-modern .vn-disc__card[data-pattern="country-cross"] .vn-disc__bg::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: #1C1C1C;
  transform: translateY(-50%);
}
body.vn-modern .vn-disc__card[data-pattern="country-cross"] .vn-disc__bg::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  left: 38.2%;
  width: 1.5px;
  background: #1C1C1C;
}

/* ── COUNTRY: 4 corner brackets (archive-style) ── */
body.vn-modern .vn-disc__card[data-pattern="country-corners"] .vn-disc__bg {
  background:
    linear-gradient(#1C1C1C, #1C1C1C) top    left  / 13px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) top    left  / 1px 13px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) top    right / 13px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) top    right / 1px 13px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom left  / 13px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom left  / 1px 13px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom right / 13px 1px no-repeat,
    linear-gradient(#1C1C1C, #1C1C1C) bottom right / 1px 13px no-repeat;
  opacity: 0.7;
}

/* === Foreground content === */
body.vn-modern .vn-disc__head {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-disc__num { font-variant-numeric: tabular-nums; }
body.vn-modern .vn-disc__sep { opacity: 0.4; }

body.vn-modern .vn-disc__title-wrap {
  position: relative;
  z-index: 1;
  margin: auto 0;
}
body.vn-modern .vn-disc__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: -0.005em;
  line-height: 1;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin: 0;
  text-wrap: balance;
}
@media (max-width: 768px) {
  body.vn-modern .vn-disc__title { font-size: clamp(16px, 4.5vw, 22px); }
}

body.vn-modern .vn-disc__cta {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg);
}
body.vn-modern .vn-disc__arrow {
  font-size: 12px;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}

@media (prefers-reduced-motion: reduce) {
  body.vn-modern .vn-disc__card,
  body.vn-modern .vn-disc__bg,
  body.vn-modern .vn-disc__arrow { transition: none; }
  body.vn-modern .vn-disc__card:hover { transform: none; }
}
/* END_SECTION:vn-modern-discover */

/* START_SECTION:vn-modern-editorial-notes (INDEX:81) */
body.vn-modern .vn-en__list {
  border-top: 1px solid var(--vn-hair);
}
body.vn-modern .vn-en__row {
  display: grid;
  grid-template-columns: 60px minmax(0, 1fr) auto;
  gap: 28px;
  align-items: start;
  padding: 28px 0;
  border-bottom: 1px solid var(--vn-hair);
  text-decoration: none;
  color: var(--vn-fg);
  transition: background 220ms var(--vn-ease);
}
body.vn-modern .vn-en__row:hover { background: var(--vn-bg-subtle); padding-left: 14px; padding-right: 14px; }
body.vn-modern .vn-en__num {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  padding-top: 10px;
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-en__body {
  min-width: 0;
}
body.vn-modern .vn-en__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(20px, 2.4vw, 32px);
  letter-spacing: -0.005em;
  line-height: 1.15;
  margin: 0 0 8px;
  text-wrap: balance;
}
body.vn-modern .vn-en__lede {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.65;
  color: var(--vn-fg-mute);
  margin: 0;
  max-width: 60ch;
}
body.vn-modern .vn-en__meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  padding-top: 10px;
}
body.vn-modern .vn-en__date {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-en__arrow {
  font-family: var(--vn-font-display);
  font-size: 18px;
  color: var(--vn-fg);
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-en__row:hover .vn-en__arrow {
  transform: translateX(4px);
}
@media (max-width: 768px) {
  body.vn-modern .vn-en__row {
    grid-template-columns: 40px minmax(0, 1fr);
    gap: 14px;
    padding: 22px 0;
  }
  body.vn-modern .vn-en__row:hover { padding-left: 8px; padding-right: 8px; }
  body.vn-modern .vn-en__meta {
    grid-column: 1 / -1;
    flex-direction: row;
    justify-content: space-between;
    padding-top: 4px;
    margin-left: 54px;
  }
  body.vn-modern .vn-en__lede { font-size: 13.5px; }
}
/* END_SECTION:vn-modern-editorial-notes */

/* START_SECTION:vn-modern-episodes (INDEX:82) */
.vn-modern-episodes__list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px 32px;
}
.vn-modern-ep-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-top: 1px solid var(--vn-hair);
  align-items: start;
  text-decoration: none;
  color: var(--vn-fg);
}
.vn-modern-ep-row__media {
  aspect-ratio: 1;
  overflow: hidden;
  position: relative;
  background: var(--vn-bg-subtle);
}
.vn-modern-ep-row__media img,
.vn-modern-ep-row__media .vn-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vn-modern-ep-row__num {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  margin-bottom: 6px;
  font-variant-numeric: tabular-nums;
}
.vn-modern-ep-row__h3 {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 19px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 10px;
  text-wrap: balance;
}
.vn-modern-ep-row__excerpt {
  font-family: var(--vn-font-serif);
  font-size: 14px;
  color: var(--vn-fg-mute);
  line-height: 1.55;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
@media (max-width: 768px) {
  .vn-modern-episodes__list { grid-template-columns: 1fr; gap: 0; }
  .vn-modern-ep-row { grid-template-columns: 80px 1fr; gap: 16px; }
  .vn-modern-ep-row__h3 { font-size: 16px; }
}
/* END_SECTION:vn-modern-episodes */

/* START_SECTION:vn-modern-error (INDEX:83) */
.vn-error__inner { max-width: 720px; margin: 0 auto; text-align: left; }
.vn-error__h1 {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(48px, 9vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 16px 0 32px;
  text-wrap: pretty;
}
.vn-error__h1 em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.vn-error__lede {
  font-family: var(--vn-font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  margin: 0 auto 32px;
  max-width: 56ch;
  text-align: center;
}
.vn-error__cta {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
}
/* END_SECTION:vn-modern-error */

/* START_SECTION:vn-modern-footer (INDEX:84) */
.vn-footer__rail {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
  padding: 24px 0 20px;
  border-top: 1px solid var(--vn-hair);
  margin-top: 24px;
}
.vn-footer__sns,
.vn-footer__pay {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
}
.vn-footer__pay { gap: 8px; }
.vn-footer__sns a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  color: var(--vn-fg);
  text-decoration: none;
  transition: opacity 180ms ease-out;
}
.vn-footer__sns a:hover { opacity: 0.6; }
.vn-footer__sns svg {
  width: 18px;
  height: 18px;
  display: block;
}
/* Shopify's payment_type_svg_tag returns an inline <svg>. Force a uniform
   visual treatment regardless of which payment was returned. Custom
   image_picker uploads (.vn-footer__pay-img) get the same framed look
   so the row reads as one consistent strip. */
.vn-footer__pay li svg,
.vn-footer__pay svg.payment-icon,
.vn-footer__pay .vn-footer__pay-img {
  display: block;
  width: 38px;
  height: 24px;
  background: var(--vn-bg);
  border: 1px solid var(--vn-hair);
  border-radius: 3px;
  padding: 2px;
  box-sizing: border-box;
  object-fit: contain;
}
@media (max-width: 640px) {
  .vn-footer__rail {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
    padding: 18px 0;
  }
  .vn-footer__sns { gap: 10px; }
  .vn-footer__sns a { width: 30px; height: 30px; }
  .vn-footer__pay li svg,
  .vn-footer__pay svg.payment-icon,
  .vn-footer__pay .vn-footer__pay-img { width: 34px; height: 22px; }
}
/* END_SECTION:vn-modern-footer */

/* START_SECTION:vn-modern-header (INDEX:85) */
.vn-mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--vn-bg);
  z-index: var(--vn-z-modal);
  transform: translateX(-100%);
  transition: transform 350ms cubic-bezier(.2,.8,.2,1);
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  pointer-events: none;
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}
.vn-mobile-menu.is-open {
  transform: translateX(0);
  visibility: visible;
  pointer-events: auto;
}
.vn-mobile-menu__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 16px;
  border-bottom: 1px solid var(--vn-hair);
  position: sticky;
  top: 0;
  background: var(--vn-bg);
  z-index: 1;
}
.vn-mobile-menu__brand {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}
.vn-mobile-menu__close {
  background: none;
  border: 0;
  color: var(--vn-fg);
  cursor: pointer;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vn-mobile-menu__nav {
  display: flex;
  flex-direction: column;
  padding: 16px 0;
}
.vn-mobile-menu__nav a {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  padding: 14px 24px;
  border-bottom: 1px solid var(--vn-hair);
  color: var(--vn-fg);
  text-decoration: none;
  display: block;
}
.vn-mobile-menu__nav a:last-child { border-bottom: 0; }
.vn-mobile-menu__nav a[aria-current="page"] { font-weight: 800; }

/* Mobile accordion menus (Prestige parity for nested links) */
.vn-mobile-menu__group-acc { border-bottom: 1px solid var(--vn-hair); }
.vn-mobile-menu__group-acc[open] { background: var(--vn-bg-subtle); }
.vn-mobile-menu__sum,
.vn-mobile-menu__subgroup-acc > summary {
  list-style: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 22px;
  letter-spacing: -0.005em;
  text-transform: uppercase;
  color: var(--vn-fg);
  user-select: none;
  border: 0;
}
.vn-mobile-menu__sum::-webkit-details-marker,
.vn-mobile-menu__sum::marker,
.vn-mobile-menu__subgroup-acc > summary::-webkit-details-marker,
.vn-mobile-menu__subgroup-acc > summary::marker {
  display: none; content: '';
}
.vn-mobile-menu__caret {
  display: inline-block;
  width: 10px; height: 10px;
  position: relative;
  flex-shrink: 0;
}
.vn-mobile-menu__caret::before {
  content: '';
  position: absolute; inset: 0;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-3px) rotate(45deg);
  transform-origin: center;
  transition: transform var(--vn-dur-fast) var(--vn-ease);
}
.vn-mobile-menu__group-acc[open] > .vn-mobile-menu__sum .vn-mobile-menu__caret::before,
.vn-mobile-menu__subgroup-acc[open] > summary .vn-mobile-menu__caret::before {
  transform: translateY(3px) rotate(225deg);
}
.vn-mobile-menu__sub-list,
.vn-mobile-menu__sub2-list {
  display: flex;
  flex-direction: column;
  background: var(--vn-bg);
}
.vn-mobile-menu__sub-link {
  font-family: var(--vn-font-display);
  font-weight: 500;
  font-size: 15px;
  letter-spacing: 0.04em;
  text-transform: none;
  padding: 12px 32px;
  border-bottom: 1px solid var(--vn-hair);
  color: var(--vn-fg);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.vn-mobile-menu__sub-link:last-child { border-bottom: 0; }
.vn-mobile-menu__sub-link--top {
  font-weight: 700;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--vn-fg-mute);
}
.vn-mobile-menu__sub-link--has-sub {
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
}
.vn-mobile-menu__sub-link--depth2 {
  padding-left: 48px;
  font-size: 13px;
  color: var(--vn-fg-mute);
  /* Inner span carries data-vn-fit-text — keep nowrap on it so the JS can
     measure scrollWidth without word-wrap interference. The JS sets the
     final font-size; CSS just provides the starting baseline. */
}
.vn-mobile-menu__sub-link--depth2 [data-vn-fit-text] {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: clip;
  display: inline-block;
  max-width: 100%;
}

.vn-mobile-menu__sub {
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  border-top: 1px solid var(--vn-hair);
  margin-top: auto;
}
.vn-mobile-menu__group h6 {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin: 0 0 10px;
}
.vn-mobile-menu__group a {
  display: block;
  padding: 8px 0;
  font-family: var(--vn-font-display);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--vn-fg);
  text-decoration: none;
  border-bottom: 1px solid var(--vn-hair);
}
.vn-mobile-menu__group a:last-child { border-bottom: 0; }
.vn-mobile-menu__lang {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.vn-mobile-menu__locale {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px !important;
  border: 1px solid var(--vn-hair-strong) !important;
  font-family: var(--vn-font-mono) !important;
  font-size: 11px !important;
  letter-spacing: 0.14em !important;
  background: transparent;
  color: var(--vn-fg);
  border-bottom: 1px solid var(--vn-hair-strong) !important;
}
.vn-mobile-menu__locale.is-active { background: var(--vn-fg); color: var(--vn-bg); }
.vn-mobile-menu__bgm {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: transparent;
  border: 1px solid var(--vn-hair-strong);
  font-family: var(--vn-font-display);
  font-size: 12px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 10px 16px;
  color: var(--vn-fg);
  cursor: pointer;
  min-height: 44px;
}
.vn-mobile-menu__foot {
  padding: 16px 24px 24px;
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  border-top: 1px solid var(--vn-hair);
}

body.vn-modern.vn-menu-open { overflow: hidden; }

@media (min-width: 1181px) {
  .vn-mobile-menu { display: none; }
}
/* END_SECTION:vn-modern-header */

/* START_SECTION:vn-modern-hero (INDEX:86) */
.vn-modern-hero {
  position: relative;
  width: 100%;
  height: 80vh;
  height: 80dvh;
  min-height: 560px;
  max-height: 880px;
  overflow: hidden;
  background: #1C1C1C;
  color: var(--vn-bg);
  isolation: isolate;
  box-sizing: border-box;
  display: block;
}
.vn-modern-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* === Slides (crossfade) === */
.vn-modern-hero__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
  z-index: 0;
  will-change: opacity;
}
.vn-modern-hero__slide.is-active { opacity: 1; }
.vn-modern-hero__slide picture,
.vn-modern-hero__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* === Overlay === */
.vn-modern-hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(0, 0, 0, var(--vn-hero-overlay-alpha, 0.45));
}

/* === Placeholder === */
.vn-modern-hero__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  color: rgb(255 255 255 / 0.45);
  text-transform: uppercase;
  background:
    linear-gradient(135deg, transparent 49%, rgb(255 255 255 / 0.06) 49.5%, rgb(255 255 255 / 0.06) 50.5%, transparent 51%),
    linear-gradient(45deg, transparent 49%, rgb(255 255 255 / 0.06) 49.5%, rgb(255 255 255 / 0.06) 50.5%, transparent 51%);
  background-size: 40px 40px, 40px 40px;
}

.vn-modern-hero__meta {
  position: absolute;
  left: var(--vn-container-pad-desktop);
  top: var(--vn-s-6);
  z-index: 2;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  display: flex;
  gap: 32px;
  color: rgb(255 255 255 / 0.7);
}
.vn-modern-hero__meta div span {
  display: block;
  color: var(--vn-bg);
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.06em;
  margin-top: 4px;
  font-variant-numeric: tabular-nums;
}
.vn-modern-hero__copy {
  position: absolute;
  left: var(--vn-container-pad-desktop);
  right: var(--vn-container-pad-desktop);
  bottom: var(--vn-s-7);
  z-index: 2;
  max-width: 760px;
}
.vn-modern-hero__eyebrow {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 18px;
}
.vn-modern-hero__h1 {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(36px, 8vw, 128px);
  line-height: 0.86;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 var(--vn-s-5);
  text-wrap: balance;
  overflow-wrap: anywhere;
  word-break: break-word;
  max-width: 100%;
  hyphens: auto;
}
.vn-modern-hero__h1 em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.vn-modern-hero__lede {
  font-family: var(--vn-font-serif);
  font-size: 18px;
  line-height: 1.55;
  max-width: 50ch;
  margin: 0 0 var(--vn-s-6);
  opacity: 0.92;
}
.vn-modern-hero__cta {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Secondary CTA on the dark hero */
body.vn-modern .vn-modern-hero .vn-btn--invert.vn-btn--ghost {
  background: rgba(255, 255, 255, 0.10) !important;
  color: #ffffff !important;
  border: 1.5px solid #ffffff !important;
  font-weight: 700 !important;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
body.vn-modern .vn-modern-hero .vn-btn--invert.vn-btn--ghost:hover {
  background: #ffffff !important;
  color: #1c1c1c !important;
  border-color: #ffffff !important;
}

@media (prefers-reduced-motion: reduce) {
  .vn-modern-hero__slide { transition: none; }
}

@media (max-width: 768px) {
  .vn-modern-hero {
    height: 70vh;
    height: 70dvh;
    min-height: 440px;
    max-height: 680px;
  }
  .vn-modern-hero__meta {
    left: 16px;
    right: 16px;
    top: 16px;
    gap: 12px;
    font-size: 9px;
    letter-spacing: 0.12em;
    flex-wrap: wrap;
    max-width: calc(100% - 32px);
  }
  .vn-modern-hero__meta > div { flex: 0 0 auto; }
  .vn-modern-hero__meta div span { font-size: 10px; letter-spacing: 0.04em; margin-top: 2px; }
  .vn-modern-hero__copy {
    left: 16px;
    right: 16px;
    bottom: max(24px, env(safe-area-inset-bottom));
    max-width: calc(100% - 32px);
    width: calc(100% - 32px);
    box-sizing: border-box;
  }
  .vn-modern-hero__eyebrow {
    font-size: 10px;
    letter-spacing: 0.16em;
    margin-bottom: 14px;
  }
  .vn-modern-hero__h1 {
    font-size: clamp(28px, 9vw, 56px);
    letter-spacing: -0.02em;
    line-height: 0.92;
  }
  .vn-modern-hero__lede { font-size: 14px; line-height: 1.5; max-width: 100%; }
  .vn-modern-hero__cta { gap: 8px; }
  .vn-modern-hero__cta .vn-btn { padding: 12px 14px; font-size: 10px; min-height: 44px; }
}
@media (max-width: 480px) {
  .vn-modern-hero { min-height: 420px; }
  .vn-modern-hero__meta { gap: 10px; }
  .vn-modern-hero__meta > div:nth-child(3) { display: none; }
  .vn-modern-hero__h1 { font-size: clamp(26px, 9vw, 48px); }
  .vn-modern-hero__lede { font-size: 13px; }
}
/* END_SECTION:vn-modern-hero */

/* START_SECTION:vn-modern-journal (INDEX:87) */
.vn-modern-journal__strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
}
.vn-modern-j-card { display: block; color: inherit; text-decoration: none; }
.vn-modern-j-card__media {
  aspect-ratio: 4/3;
  margin-bottom: 18px;
  overflow: hidden;
  background: var(--vn-bg-subtle);
  position: relative;
}
.vn-modern-j-card__media img,
.vn-modern-j-card__media .vn-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.vn-modern-j-card__meta {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  margin-bottom: 8px;
  font-variant-numeric: tabular-nums;
}
.vn-modern-j-card__h3 {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 22px;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin: 0 0 8px;
  text-wrap: balance;
}
.vn-modern-j-card__excerpt {
  font-family: var(--vn-font-serif);
  font-size: 14px;
  color: var(--vn-fg-mute);
  line-height: 1.55;
  margin: 0;
}
@media (max-width: 768px) {
  .vn-modern-journal__strip { grid-template-columns: 1fr; }
}
/* END_SECTION:vn-modern-journal */

/* START_SECTION:vn-modern-newsletter (INDEX:88) */
/* Vertical padding is now driven by the section's pad_top_*/pad_bot_*
   settings via the vn-section-padding snippet (inline style on the root
   element). Only horizontal padding + center alignment stay here. */
body.vn-modern .vn-modern-newsletter,
body.vn-modern .vn-modern-newsletter * {
  text-align: center;
}
body.vn-modern .vn-modern-newsletter {
  padding-left: var(--vn-container-pad-desktop);
  padding-right: var(--vn-container-pad-desktop);
}
body.vn-modern .vn-modern-newsletter__h2 {
  text-align: center !important;
}
.vn-modern-newsletter__h2 {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 0 0 16px;
  text-wrap: balance;
}
.vn-modern-newsletter__h2 em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.vn-modern-newsletter__lede {
  font-family: var(--vn-font-serif);
  font-size: 14px;
  line-height: 1.7;
  color: var(--vn-fg-mute);
  margin: 0 auto 32px;
  max-width: 52ch;
  text-align: center;
}
@media (max-width: 768px) {
  .vn-modern-newsletter__lede {
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
  }
}
.vn-modern-newsletter__form {
  max-width: 520px;
  margin: 0 auto;
}
/* The input + button are now in a flex row container so the button can never
   be visually clipped or hidden. Uniform 48px height on both for parity. */
.vn-modern-newsletter__row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.vn-modern-newsletter__row input[type="email"] {
  flex: 1 1 auto;
  min-width: 0;
  border: 1px solid var(--vn-fg);
  background: var(--vn-bg);
  font: inherit;
  font-size: 15px;
  padding: 0 16px;
  outline: 0;
  color: var(--vn-fg);
  height: 48px;
}
.vn-modern-newsletter__row input[type="email"]::placeholder {
  color: var(--vn-fg-mute);
  letter-spacing: 0.02em;
}
/* Prestige's theme.css ships a `[type="submit"], button { background:
   rgba(0,0,0,0) }` reset that has the SAME specificity (0,1,0) as our
   class rule and loads AFTER it, so the transparent background wins and
   the submit button reads as a thin black outline (white-on-white text).
   We use !important here to ensure the visible black solid button. */
body.vn-modern .vn-modern-newsletter__btn {
  font-family: var(--vn-font-display) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  padding: 0 24px !important;
  background: var(--vn-fg) !important;
  background-color: var(--vn-fg) !important;
  color: var(--vn-bg) !important;
  border: 1px solid var(--vn-fg) !important;
  cursor: pointer !important;
  height: 48px !important;
  flex: 0 0 auto !important;
  white-space: nowrap !important;
  transition: opacity var(--vn-dur-fast) var(--vn-ease) !important;
}
body.vn-modern .vn-modern-newsletter__btn:hover {
  background: #000 !important;
  background-color: #000 !important;
  opacity: 1 !important;
}
.vn-modern-newsletter__notice {
  margin-top: 16px;
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--vn-fg-mute);
}
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0,0,0,0); border: 0;
}
/* END_SECTION:vn-modern-newsletter */

/* START_SECTION:vn-modern-numbers (INDEX:89) */
.vn-modern-numbers { padding: 0; }
.vn-modern-numbers__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--vn-hair);
  border: 1px solid var(--vn-hair);
}
.vn-modern-numbers__cell { padding: 32px 24px; background: var(--vn-bg); }
.vn-modern-numbers__n {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
}
.vn-modern-numbers__l {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
  margin-top: 10px;
}
@media (max-width: 900px) {
  .vn-modern-numbers__grid { grid-template-columns: 1fr 1fr; }
  .vn-modern-numbers__n { font-size: 32px; }
  .vn-modern-numbers__cell { padding: 24px 16px; }
}
@media (max-width: 480px) {
  .vn-modern-numbers__n { font-size: 26px; }
  .vn-modern-numbers__l { font-size: 9px; letter-spacing: 0.10em; }
  .vn-modern-numbers__cell { padding: 20px 14px; }
}
/* END_SECTION:vn-modern-numbers */

/* START_SECTION:vn-modern-page (INDEX:90) */
/* Page wrapper — narrow centered column. Header is LEFT-aligned (matches
   the editorial NEWS heading treatment); only the body prose is centered
   per the user's revised direction. */
body.vn-modern .vn-page {
  padding: 48px var(--vn-container-pad-desktop) 96px;
  box-sizing: border-box;
  max-width: 760px;
  margin: 0 auto;
}
body.vn-modern .vn-page__header {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vn-hair);
  margin-bottom: 48px;
  text-align: left;
}
body.vn-modern .vn-page__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  /* Match the SOLD OUT ITEMS / archive collection heading scale so static
     pages (NEWS landing, etc.) carry the same editorial weight. */
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 16px 0 0;
  text-wrap: balance;
  text-align: left;
}
body.vn-modern .vn-page__title em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
body.vn-modern .vn-page__lede {
  font-family: var(--vn-font-serif);
  font-size: 18px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  margin: 18px 0 0;
  max-width: 56ch;
  font-style: italic;
  text-align: left;
}
body.vn-modern .vn-page__body {
  font-family: var(--vn-font-body), var(--vn-font-body-jp);
  font-size: 16px;
  line-height: 1.85;
  text-align: center;
}
body.vn-modern .vn-page__body--serif { font-family: var(--vn-font-serif); font-size: 17px; }
body.vn-modern .vn-page__body p,
body.vn-modern .vn-page__body div { margin: 0 0 18px; text-align: center; }
body.vn-modern .vn-page__body h2 {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.6vw, 26px);
  margin: 48px 0 16px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  text-align: center;
}
body.vn-modern .vn-page__body h3 {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 17px;
  margin: 32px 0 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-align: center;
}
body.vn-modern .vn-page__body a { color: var(--vn-fg); text-decoration: underline; text-underline-offset: 3px; }
body.vn-modern .vn-page__body img,
body.vn-modern .vn-page__body video,
body.vn-modern .vn-page__body iframe {
  max-width: 100%;
  height: auto;
  margin: 24px auto;
  display: block;
}
body.vn-modern .vn-page__body table {
  margin: 24px auto;
  border-collapse: collapse;
  font-size: 14px;
  text-align: center;
}
body.vn-modern .vn-page__body table th,
body.vn-modern .vn-page__body table td {
  padding: 12px 16px;
  border: 1px solid var(--vn-hair);
  vertical-align: top;
}
body.vn-modern .vn-page__body table th {
  background: var(--vn-bg-subtle);
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
body.vn-modern .vn-page__body ul,
body.vn-modern .vn-page__body ol {
  list-style-position: inside;
  padding: 0;
  margin: 0 0 18px;
  text-align: center;
}
body.vn-modern .vn-page__body li { margin-bottom: 8px; }
body.vn-modern .vn-page__body blockquote {
  margin: 32px auto;
  padding: 0 32px;
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 19px;
  line-height: 1.5;
  color: var(--vn-fg-mute);
  max-width: 36em;
  text-align: center;
}

@media (max-width: 768px) {
  .vn-page { padding: 32px 16px 64px; }
  .vn-page__header { margin-bottom: 32px; padding-bottom: 24px; }
  .vn-page__lede { font-size: 16px; }
  .vn-page__body { font-size: 15px; }
  .vn-page__body table { font-size: 13px; }
  .vn-page__body table th,
  .vn-page__body table td { padding: 10px 12px; }
}
/* END_SECTION:vn-modern-page */

/* START_SECTION:vn-modern-password (INDEX:91) */
.vn-pw {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 64px 16px;
  background: var(--vn-bg);
}
.vn-pw__inner { max-width: 480px; width: 100%; text-align: center; }
.vn-pw__h1 {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(36px, 6vw, 64px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 16px 0 24px;
}
.vn-pw__lede {
  font-family: var(--vn-font-serif);
  font-size: 16px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  margin: 0 0 32px;
  font-style: italic;
}
.vn-pw__form { text-align: left; margin-bottom: 32px; }
.vn-pw__form input {
  width: 100%;
  border: 0;
  border-bottom: 1px solid var(--vn-fg);
  background: transparent;
  padding: 12px 0;
  font: inherit;
  font-size: 16px;
  min-height: 44px;
  border-radius: 0;
}
.vn-pw__error { font-family: var(--vn-font-mono); font-size: 11px; color: var(--vn-fg); border: 1px solid var(--vn-fg); padding: 10px 14px; margin-bottom: 16px; }
.vn-pw__newsletter { padding-top: 32px; border-top: 1px solid var(--vn-hair); margin-bottom: 24px; }
.vn-pw__signature { font-family: var(--vn-font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--vn-fg-mute); text-transform: uppercase; }
/* END_SECTION:vn-modern-password */

/* START_SECTION:vn-modern-payment (INDEX:92) */
/* ============================================================
   PAYMENT page — editorial layout
   Uses tokens defined in theme/assets/vn-modern.css
   ============================================================ */

body.vn-modern .vn-paypage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px var(--vn-container-pad-desktop) 96px;
  box-sizing: border-box;
}

/* ---------- Reveal-on-scroll ---------- */
body.vn-modern [data-vn-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms cubic-bezier(.2,.8,.2,1), transform 480ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
body.vn-modern [data-vn-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.vn-modern [data-vn-reveal],
  body.vn-modern [data-vn-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- HERO ---------- */
body.vn-modern .vn-paypage__hero {
  padding-bottom: 40px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--vn-hair);
}
body.vn-modern .vn-paypage__hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin-bottom: 18px;
}
body.vn-modern .vn-paypage__sep { opacity: 0.5; }
body.vn-modern .vn-paypage__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin: 0;
  text-wrap: balance;
}
body.vn-modern .vn-paypage__title em {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vn-fg-mute);
  display: block;
  font-size: 0.5em;
  margin-top: 8px;
  opacity: 0.85;
}
body.vn-modern .vn-paypage__lede {
  font-family: var(--vn-font-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--vn-fg-mute);
  max-width: 60ch;
  margin: 24px 0 0;
  font-style: italic;
}

/* ---------- Section heads ---------- */
body.vn-modern .vn-paypage__sec { margin: 80px 0; }
body.vn-modern .vn-paypage__sec-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 32px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--vn-hair);
}
body.vn-modern .vn-paypage__sec-no {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-paypage__sec-title {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2.4vw, 28px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
  color: var(--vn-fg);
}
body.vn-modern .vn-paypage__sec-lede {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  margin: 4px 0 0;
  max-width: 56ch;
}

/* ---------- Method grid ---------- */
body.vn-modern .vn-paypage__eyebrow {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-paypage__eyebrow--dark { color: var(--vn-fg); }
body.vn-modern .vn-paypage__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
body.vn-modern .vn-paypage__card {
  display: flex;
  flex-direction: column;
  gap: 14px;
  padding: 20px;
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  transition: border-color 200ms var(--vn-ease), transform 200ms var(--vn-ease);
  min-height: 142px;
}
body.vn-modern .vn-paypage__card:hover {
  border-color: var(--vn-fg);
  transform: translateY(-2px);
}
body.vn-modern .vn-paypage__card-icon {
  display: inline-flex;
  align-items: center;
  height: 36px;
  color: var(--vn-fg);
}
body.vn-modern .vn-paypage__card-img {
  max-height: 32px;
  width: auto;
  object-fit: contain;
}
body.vn-modern .vn-paypage__card-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: auto;
}
body.vn-modern .vn-paypage__card-cat {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-paypage__card-label {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--vn-fg);
  text-transform: uppercase;
}
body.vn-modern .vn-paypage__card-note {
  font-family: var(--vn-font-body), var(--vn-font-body-jp);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--vn-fg-mute);
  margin-top: 2px;
}

/* ---------- Featured (GMO Epsilon) ---------- */
body.vn-modern .vn-paypage__featured {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 56px;
  align-items: center;
  margin: 96px 0;
  padding: 56px var(--vn-container-pad-desktop);
  background: var(--vn-bg-subtle);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  padding-left: max(var(--vn-container-pad-desktop), calc(50vw - 550px));
  padding-right: max(var(--vn-container-pad-desktop), calc(50vw - 550px));
}
body.vn-modern .vn-paypage__featured-art {
  display: flex;
  align-items: center;
  justify-content: center;
}
body.vn-modern .vn-paypage__cc-svg {
  width: 100%;
  max-width: 360px;
  height: auto;
  color: var(--vn-fg);
}
body.vn-modern .vn-paypage__featured-title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 12px 0 18px;
}
body.vn-modern .vn-paypage__featured-text {
  font-family: var(--vn-font-body), var(--vn-font-body-jp);
  font-size: 15px;
  line-height: 1.7;
  color: var(--vn-fg);
}
body.vn-modern .vn-paypage__featured-text p { margin: 0 0 12px; }
body.vn-modern .vn-paypage__featured-brands {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin: 24px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--vn-hair);
}

/* ---------- Editorial table ---------- */
body.vn-modern .vn-paypage__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--vn-font-body), var(--vn-font-body-jp);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-paypage__table thead th {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  text-align: left;
  padding: 14px 18px;
  background: var(--vn-bg-subtle);
  border-bottom: 1px solid var(--vn-hair);
  font-weight: 500;
}
body.vn-modern .vn-paypage__table tbody td {
  padding: 18px;
  border-bottom: 1px solid var(--vn-hair);
  color: var(--vn-fg);
  vertical-align: top;
  line-height: 1.55;
}
body.vn-modern .vn-paypage__table tbody td:first-child { width: 60px; }
body.vn-modern .vn-paypage__td-meta {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--vn-fg-mute);
}

/* ---------- CTA cards ---------- */
body.vn-modern .vn-paypage__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 80px;
}
body.vn-modern .vn-paypage__cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 32px;
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  text-decoration: none;
  color: var(--vn-fg);
  overflow: hidden;
  transition: color 240ms var(--vn-ease), border-color 240ms var(--vn-ease);
}
body.vn-modern .vn-paypage__cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vn-fg);
  transform: translateY(101%);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
body.vn-modern .vn-paypage__cta-card:hover {
  color: var(--vn-bg);
  border-color: var(--vn-fg);
}
body.vn-modern .vn-paypage__cta-card:hover::before { transform: translateY(0); }
body.vn-modern .vn-paypage__cta-card > * { position: relative; z-index: 1; }
body.vn-modern .vn-paypage__cta-eyebrow {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
body.vn-modern .vn-paypage__cta-title {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.vn-modern .vn-paypage__cta-arrow {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vn-font-display);
  font-size: 24px;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-paypage__cta-card:hover .vn-paypage__cta-arrow {
  transform: translateY(-50%) translateX(6px);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  body.vn-modern .vn-paypage {
    padding: 32px var(--vn-container-pad-mobile, 16px) 64px;
  }
  body.vn-modern .vn-paypage__title {
    font-size: clamp(36px, 11vw, 60px);
  }
  body.vn-modern .vn-paypage__title em { font-size: 0.55em; margin-top: 6px; }
  body.vn-modern .vn-paypage__hero { padding-bottom: 28px; margin-bottom: 36px; }
  body.vn-modern .vn-paypage__sec { margin: 56px 0; }
  body.vn-modern .vn-paypage__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 8px;
  }
  body.vn-modern .vn-paypage__card { padding: 16px; min-height: 124px; }
  body.vn-modern .vn-paypage__featured {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 40px var(--vn-container-pad-mobile, 16px);
    margin: 56px 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
    padding-left: var(--vn-container-pad-mobile, 16px);
    padding-right: var(--vn-container-pad-mobile, 16px);
  }
  body.vn-modern .vn-paypage__cc-svg { max-width: 240px; }
  body.vn-modern .vn-paypage__table thead th,
  body.vn-modern .vn-paypage__table tbody td { padding: 12px 10px; font-size: 13px; }
  body.vn-modern .vn-paypage__cta {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 56px;
  }
  body.vn-modern .vn-paypage__cta-card { padding: 22px 24px; }
}
/* END_SECTION:vn-modern-payment */

/* START_SECTION:vn-modern-pdp (INDEX:93) */
.vn-pdp {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 460px;
  gap: 48px;
  padding: 24px var(--vn-container-pad-desktop) 64px;
  max-width: var(--vn-container-max);
  margin: 0 auto;
  width: 100%;
  /* `align-items: start` keeps the right aside at its natural content
     height. The aside (with title, price, ATC, description, all
     accordions) is sticky-positioned below — sticky stays at the top
     of the viewport while the gallery (left column, much taller)
     scrolls past. Once the gallery's bottom reaches the aside's
     bottom, sticky releases and the aside scrolls naturally with the
     remaining page. */
  align-items: start;
  box-sizing: border-box;
}

/* Gallery — desktop: image #1 spans full width, images #2..N tile in 2 columns */
.vn-pdp__gallery {
  display: block;
}
.vn-pdp__gallery-track {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.vn-pdp__img {
  display: block;
  position: relative;
  background: var(--vn-bg);
  overflow: hidden;
  text-decoration: none;
  cursor: zoom-in;
  aspect-ratio: 4 / 5;
}
.vn-pdp__img--hero {
  grid-column: 1 / -1;
  aspect-ratio: 4 / 5;
}
/* Thumbnails: hidden on desktop, shown on mobile */
.vn-pdp__thumbs { display: none; }
.vn-pdp__thumb {
  background: var(--vn-bg);
  border: 1px solid var(--vn-hair);
  padding: 0;
  cursor: pointer;
  flex: 0 0 auto;
  width: 56px;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  position: relative;
  transition: border-color var(--vn-dur-fast) var(--vn-ease);
}
.vn-pdp__thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--vn-bg);
  padding: 4px;
}
.vn-pdp__thumb.is-active,
.vn-pdp__thumb[aria-current="true"] {
  border-color: var(--vn-fg);
}
body.vn-modern .vn-pdp__img img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
  background: var(--vn-bg) !important;
  display: block !important;
  padding: 12px;
}
.vn-pdp__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--vn-fg-mute);
  text-transform: uppercase;
}

/* Info panel — non-sticky so the ATC + accordions scroll naturally with
   the page. The floating ATC bar (added later) takes over once the main
   ATC scrolls past the top of the viewport. This matches Prestige's PDP
   behavior. (Sticky was removed because the info column can be 7000px+
   tall when all accordions expand — sticky was effectively a no-op then,
   but it still prevented the IntersectionObserver-based floating ATC from
   ever firing.) */
/* Info aside is sticky on desktop so the user sees the buy panel +
   description + accordions all on the right while the gallery (left)
   scrolls. Once the user has scrolled all the way past the gallery,
   the grid's bottom reaches the aside's bottom and sticky releases —
   from then on the aside scrolls naturally with the page (continuing
   to reveal anything that follows the PDP grid, e.g. RECOMMENDED
   ITEMS section). */
@media (min-width: 1025px) {
  .vn-pdp__info {
    position: sticky;
    top: var(--vn-header-h, 100px);
    align-self: start;
  }
}

/* Info panel */
.vn-pdp__info { padding: 0; }
.vn-pdp__taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--vn-fg-mute);
  margin-bottom: 18px;
}
.vn-pdp__taglist .vn-row__sep { font-style: normal; opacity: 0.5; }
.vn-pdp__title {
  font-family: var(--vn-font-display);
  font-weight: 700;
  /* Both desktop AND mobile use the same compact clamp so long bilingual
     product names always fit in 1-2 lines. Smaller than the previous
     "headline" treatment — title is now sized like a section heading,
     not a hero. */
  font-size: clamp(15px, 1.4vw + 9px, 20px);
  line-height: 1.3;
  letter-spacing: -0.005em;
  margin: 0;
  text-wrap: balance;
}
.vn-pdp__subtitle {
  font-family: var(--vn-font-serif);
  font-size: 16px;
  color: var(--vn-fg-mute);
  margin: 10px 0 0;
  line-height: 1.45;
  font-style: italic;
}

/* Price row — STRICT single line: [価格] [税込] [chip].
   Items pack from the left with small gap, then chip floats right via
   margin-left: auto. NO space-between — that pushed 税込 to mid-row.
   Font sizes auto-scale via clamp() so the row always fits 1 line. */
.vn-pdp__price-row {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  gap: clamp(4px, 1.2vw, 12px);
  flex-wrap: nowrap;
  line-height: 1;
  min-width: 0;
}
.vn-pdp__price {
  font-family: var(--vn-font-display);
  font-weight: 700;
  /* clamp scales price 18px→32px proportionally with viewport. */
  font-size: clamp(18px, 2.4vw + 12px, 32px);
  letter-spacing: -0.01em;
  font-variant-numeric: tabular-nums;
  display: flex;
  align-items: center;
  gap: clamp(6px, 1vw, 12px);
  flex-wrap: nowrap;
  min-width: 0;
  line-height: 1;
  /* IMPORTANT: don't grow. flex 0 0 auto makes the price box hug its digits
     so 税込 (next sibling) sits right after them with only `gap` separation. */
  flex: 0 0 auto;
}
.vn-pdp__price-amount,
.vn-pdp__price-compare {
  flex: 0 0 auto;
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.vn-pdp__price-compare {
  font-size: clamp(11px, 0.9vw + 7px, 16px);
  font-weight: 400;
  text-decoration: line-through;
  color: var(--vn-fg-mute);
}
/* Price meta — sibling between 価格 and 分割 chip. Just "税込" now (single
   short word, italics). flex-shrink: 0 keeps it visible at all widths. */
.vn-pdp__price-meta {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: clamp(9px, 0.6vw + 7px, 13px);
  letter-spacing: 0.02em;
  color: var(--vn-fg-mute);
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
  flex-shrink: 0;
  line-height: 1;
}

/* ===== Installment chip (next to price, JA only) =====
   Replaces the removed 分割払いシミュレーション accordion.
   Default state shows compact "月々 ¥X〜" pill alongside the price.
   Click expands an inline panel with a 回数 select + per-month total. */
/* Installment chip is now a SIBLING of .vn-pdp__price and .vn-pdp__price-meta
   inside .vn-pdp__price-row (3-column layout: 価格 / 税込 / 分割).
   When opened, the panel drops below by toggling flex-wrap on the row. */
.vn-pdp__installment-chip {
  align-self: center;
  font-family: var(--vn-font-display);
  font-weight: 500;
  flex: 0 1 auto;
  min-width: 0;
  margin-left: auto;  /* push to right of the price-row when room allows */
}
.vn-pdp__installment-chip[open] { flex: 0 1 auto; }
.vn-pdp__price-row:has(.vn-pdp__installment-chip[open]) {
  flex-wrap: wrap;
}
.vn-pdp__installment-chip__head {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: clamp(3px, 0.6vw, 6px);
  /* Compact padding so chip stays narrow in the 3-column price row. */
  padding: clamp(4px, 0.8vw, 6px) clamp(6px, 1.2vw, 10px);
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  /* Tight text — just "分割 ¥X〜" — auto-scales with row width. */
  font-size: clamp(8px, 0.5vw + 6px, 11px);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--vn-fg);
  white-space: nowrap;
  user-select: none;
  line-height: 1;
  transform: translateY(-2px);
  transition: background 200ms cubic-bezier(.2,.8,.2,1), color 200ms cubic-bezier(.2,.8,.2,1);
}
.vn-pdp__installment-chip__label,
.vn-pdp__installment-chip__amount {
  line-height: 1;
  display: inline-flex;
  align-items: center;
}
.vn-pdp__installment-chip__head::-webkit-details-marker { display: none; }
.vn-pdp__installment-chip__head::marker { display: none; content: ''; }
.vn-pdp__installment-chip__head:hover {
  background: var(--vn-fg);
  color: var(--vn-bg);
}
.vn-pdp__installment-chip__label {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  color: inherit;
  opacity: 0.75;
  font-weight: 500;
}
.vn-pdp__installment-chip__amount {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
  color: inherit;
}
.vn-pdp__installment-chip__chevron {
  width: 8px;
  height: 8px;
  display: inline-block;
  position: relative;
  margin-left: 2px;
}
.vn-pdp__installment-chip__chevron::before {
  content: '';
  position: absolute;
  inset: 0;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transform-origin: center;
  transition: transform 200ms cubic-bezier(.2,.8,.2,1);
}
.vn-pdp__installment-chip[open] .vn-pdp__installment-chip__chevron::before {
  transform: translateY(2px) rotate(225deg);
}
.vn-pdp__installment-chip__panel {
  margin-top: 12px;
  padding: 16px;
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.vn-pdp__installment-chip__row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.vn-pdp__installment-chip__field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
.vn-pdp__installment-chip__field select {
  font-family: var(--vn-font-display);
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.02em;
  padding: 8px 10px;
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  color: var(--vn-fg);
  border-radius: 0;
  min-height: 36px;
  cursor: pointer;
}
.vn-pdp__installment-chip__per {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  color: var(--vn-fg);
  margin-left: auto;
}
.vn-pdp__installment-chip__note {
  margin: 0;
  font-family: var(--vn-font-body-jp);
  font-size: 11px;
  line-height: 1.7;
  color: var(--vn-fg-mute);
}

/* Variant chips */
.vn-pdp__option-row {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.vn-pdp__option-name {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--vn-fg-mute);
  flex-shrink: 0;
  min-width: 50px;
}
.vn-pdp__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.vn-visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.vn-pdp__chip {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  border: 1px solid var(--vn-hair-strong);
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  cursor: pointer;
  background: var(--vn-bg);
  color: var(--vn-fg);
  transition: all var(--vn-dur-fast) var(--vn-ease);
  min-height: 36px;
}
.vn-pdp__chip:hover { border-color: var(--vn-fg); }
input:checked + .vn-pdp__chip {
  background: var(--vn-fg);
  color: var(--vn-bg);
  border-color: var(--vn-fg);
}
input:focus-visible + .vn-pdp__chip {
  outline: 2px solid var(--vn-fg);
  outline-offset: 2px;
}

/* Delivery estimate (Prestige-style) — restored to framed 3-line box */
.vn-pdp__delivery {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 20px;
  border: 1px solid var(--vn-hair);
  margin: 24px 0 0;
}
.vn-pdp__delivery-icon {
  color: var(--vn-fg-mute);
  flex-shrink: 0;
  padding-top: 2px;
}
.vn-pdp__delivery-body { flex: 1; min-width: 0; }
.vn-pdp__delivery-label,
.vn-pdp__delivery-carrier {
  font-family: "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Yu Gothic", "游ゴシック", YuGothic, "Noto Sans JP", "Meiryo", sans-serif;
  font-weight: 400;
  letter-spacing: 0.02em;
}
.vn-pdp__delivery-label {
  font-size: 13px;
  color: var(--vn-fg-mute);
  margin-bottom: 4px;
}
.vn-pdp__delivery-date {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.005em;
  color: var(--vn-fg);
  font-variant-numeric: tabular-nums;
  margin-bottom: 6px;
  line-height: 1.4;
}
.vn-pdp__delivery-carrier {
  font-size: 12.5px;
  color: var(--vn-fg-mute);
  line-height: 1.4;
  font-variant-numeric: tabular-nums;
}

/* 3 info chips (anchor links to accordion) */
.vn-pdp__chips-row {
  display: flex;
  gap: 8px;
  margin: 16px 0;
  flex-wrap: wrap;
}
.vn-pdp__info-chip {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 6px;
  border: 1px solid var(--vn-hair-strong);
  background: var(--vn-bg);
  font-family: var(--vn-font-display);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--vn-fg);
  text-decoration: none;
  text-align: center;
  cursor: pointer;
  transition: all 200ms cubic-bezier(.2,.8,.2,1);
  min-height: 44px;
  line-height: 1.3;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.vn-pdp__info-chip:hover {
  background: var(--vn-fg);
  color: var(--vn-bg);
  border-color: var(--vn-fg);
}

/* Quantity + CTA */
.vn-pdp__qty-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 24px;
  margin-bottom: 14px;
  gap: 16px;
}
.vn-pdp__qty {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--vn-hair-strong);
  height: 44px;
}
.vn-pdp__qty-btn {
  width: 38px;
  height: 100%;
  background: transparent;
  border: 0;
  border-right: 1px solid var(--vn-hair-strong);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--vn-fg);
}
.vn-pdp__qty-btn:last-child { border-right: 0; border-left: 1px solid var(--vn-hair-strong); }
.vn-pdp__qty-input {
  width: 50px;
  height: 100%;
  border: 0;
  background: transparent;
  text-align: center;
  font-family: var(--vn-font-mono);
  font-size: 14px;
  font-variant-numeric: tabular-nums;
  -moz-appearance: textfield;
  appearance: textfield;
}
.vn-pdp__qty-input::-webkit-outer-spin-button,
.vn-pdp__qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.vn-pdp__stock {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--vn-fg-mute);
}
/* CTA primary button area */
.vn-pdp__cta { margin-top: 16px; }

/* CTA + Wishlist heart side-by-side variant.
   The ATC button takes remaining space (flex:1) and the heart button is a
   fixed-width square pinned on the right. Both share the same height for a
   visually balanced row. */
.vn-pdp__cta--with-heart {
  display: flex;
  align-items: stretch;
  gap: 10px;
}
.vn-pdp__cta--with-heart .vn-pdp__cta-main {
  flex: 1 1 auto;
  min-width: 0;
  width: auto;
}
.vn-pdp__wishlist-btn--inline {
  flex: 0 0 auto;
  width: 52px;
  min-width: 52px;
  align-self: stretch;
}
/* Box around the WK <wishlist-button-collection> so the heart icon sits
   inside a framed tile (matches the visual the user wants — the same
   square box that the legacy custom <button> rendered). The wrapper is
   a span; WK draws its own heart SVG inside the wishlist-button-collection.
   We size the inner WK button to fill the box and remove WK's default
   background so the user's chosen border style shows through. */
.vn-pdp__wishlist-box {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  min-width: 52px;
  align-self: stretch;
  border: 1px solid var(--vn-hair-strong);
  background: var(--vn-bg);
  transition: border-color var(--vn-dur-fast) var(--vn-ease);
  cursor: pointer;
}
.vn-pdp__wishlist-box:hover { border-color: var(--vn-fg); }
.vn-pdp__wishlist-box .vn-pdp__wishlist-block {
  display: inline-flex;
  width: 100%;
  height: 100%;
  align-items: center;
  justify-content: center;
}
.vn-pdp__wishlist-box wk-button,
.vn-pdp__wishlist-box .wk-button {
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  min-height: 0 !important;
}
.vn-pdp__wishlist-box .wk-icon {
  display: inline-flex !important;
  width: 18px;
  height: 18px;
}
.vn-pdp__wishlist-box .wk-icon svg {
  width: 18px;
  height: 18px;
  color: var(--vn-fg);
  fill: none;
  stroke: currentColor;
}
/* When the item IS in the wishlist, WK adds .wk-selected on the inner
   <button>. Fill the heart black to match the card-grid pattern. */
.vn-pdp__wishlist-box .wk-button.wk-selected .wk-icon svg {
  fill: var(--vn-fg);
  stroke: var(--vn-fg);
}
/* Heart icon stack — show outline by default, swap to filled-black when
   the item is in the user's wishlist. Color matches the card-grid heart
   (`.vn-card__wishlist[aria-pressed="true"]` → var(--vn-fg)) so the same
   visual language applies on PDP as on the listing pages. */
.vn-pdp__wishlist-icon { display: inline-flex; transition: transform 200ms cubic-bezier(.2,.8,.2,1); }
.vn-pdp__wishlist-icon--on { display: none; color: var(--vn-fg); }
.vn-pdp__wishlist-btn[aria-pressed="true"] .vn-pdp__wishlist-icon--off,
.vn-pdp__wishlist-link[aria-pressed="true"] .vn-pdp__wishlist-icon--off { display: none; }
.vn-pdp__wishlist-btn[aria-pressed="true"] .vn-pdp__wishlist-icon--on,
.vn-pdp__wishlist-link[aria-pressed="true"] .vn-pdp__wishlist-icon--on { display: inline-flex; }
/* When pressed, KEEP the button background transparent (don't fill the
   whole tile black like other .vn-pdp__icon-btn instances do — that
   would make the heart disappear into the bg). The black-filled heart
   is the only signal of saved state, matching the card design. */
.vn-pdp__wishlist-btn[aria-pressed="true"],
.vn-pdp__wishlist-link[aria-pressed="true"] {
  background: var(--vn-bg) !important;
  color: var(--vn-fg) !important;
  border-color: var(--vn-fg) !important;
}
.vn-pdp__wishlist-btn[aria-pressed="true"] .vn-pdp__wishlist-icon--on,
.vn-pdp__wishlist-link[aria-pressed="true"] .vn-pdp__wishlist-icon--on {
  color: var(--vn-fg);
}
.vn-pdp__wishlist-btn[aria-pressed="true"] .vn-pdp__wishlist-icon--on {
  animation: vnHeartPop 360ms cubic-bezier(.2,.8,.2,1);
}
@keyframes vnHeartPop {
  0%   { transform: scale(0.4); }
  60%  { transform: scale(1.25); }
  100% { transform: scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .vn-pdp__wishlist-icon { transition: none; animation: none !important; }
}

/* Sub-CTA stack — wishlist / RESERVE 24H / TRY-ON / LINE 全てに適切なマージン */
.vn-pdp__sub-cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 14px;
}
.vn-pdp__sub-cta-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
}
.vn-pdp__icon-btn {
  width: 46px;
  min-height: 46px;
  border: 1px solid var(--vn-hair-strong);
  background: var(--vn-bg);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all var(--vn-dur-fast) var(--vn-ease);
}
.vn-pdp__icon-btn[aria-pressed="true"] {
  background: var(--vn-fg);
  color: var(--vn-bg);
  border-color: var(--vn-fg);
}
.vn-pdp__icon-btn:hover { border-color: var(--vn-fg); }
.vn-pdp__line-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

/* Product description block — 商品説明（Prestige description block 相当） */
.vn-pdp__description {
  margin: 0 0 8px;
}
.vn-pdp__section-heading {
  font-family: var(--vn-font-mono);
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin: 0 0 18px;
}
.vn-pdp__description-body,
.vn-pdp__description-body *,
.vn-pdp__rich,
.vn-pdp__rich * {
  font-family: 'Shippori Mincho B1', 'Noto Serif JP', 'YuMincho', 'Hiragino Mincho ProN', 'EB Garamond', Georgia, serif !important;
  font-style: normal !important;
}
.vn-pdp__description-body {
  /* Section-controlled (PC). Mobile keeps clamp() for readability since the
     user wants 商品説明文 mobile size 現状維持. */
  font-size: var(--vn-pdp-fs-desc-pc, 15.5px);
  line-height: 1.85;
  color: var(--vn-fg);
}
@media (max-width: 749px) {
  .vn-pdp__description-body {
    font-size: clamp(12.5px, 2.6vw + 4px, 15.5px);
  }
}

/* Dropcap — Notion: 商品説明文 文頭ドロップキャップ */
.vn-pdp__rich--dropcap > p:first-of-type::first-letter,
.vn-pdp__rich--dropcap::first-letter {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: 3.2em;
  line-height: 0.85;
  float: left;
  margin: 0.05em 0.1em -0.05em 0;
  color: var(--vn-fg);
  letter-spacing: -0.02em;
}

/* ============================================================
   Description Plan A + D — applied to BOTH desktop and mobile.
   - Plan D: accordion stays CLOSED by default on every viewport
     (JS skips `data-vn-auto-open`)
   - Plan A: when opened, the body is clipped at a reading-friendly
     height with a soft fade-out and a "READ MORE / 続きを読む" CTA.
     Tapping expands fully and a "閉じる ↑" CTA collapses again.
   ============================================================ */
[data-vn-pdp-desc-body][data-vn-clipped="1"] {
  position: relative;
  max-height: 18em;
  overflow: hidden;
  padding-bottom: 56px;
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
          mask-image: linear-gradient(to bottom, #000 calc(100% - 80px), transparent 100%);
}
[data-vn-pdp-desc-body][data-vn-clipped="1"] .vn-pdp__inline-cta { display: none; }
.vn-pdp__desc-toggle {
  margin-top: 12px;
  width: 100%;
  background: transparent;
  border: 1px solid var(--vn-fg);
  color: var(--vn-fg);
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 12px 16px;
  cursor: pointer;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
}
.vn-pdp__desc-toggle::after {
  content: "↓";
  display: inline-block;
  font-size: 13px;
  transition: transform 200ms ease-out;
}
.vn-pdp__desc-toggle[aria-expanded="true"]::after { transform: rotate(180deg); }
/* Slightly taller clip on desktop where the column is wider so a
   sensible amount of intro text is visible before the fade. */
@media (min-width: 769px) {
  [data-vn-pdp-desc-body][data-vn-clipped="1"] { max-height: 22em; }
}

/* ============================================================
   Image lightbox (.vn-pdp-lightbox)
   Full-viewport overlay with:
   - Tap-to-zoom (1x ↔ 2x) on the image itself
   - Prev/next arrow buttons (and ←/→ keyboard, swipe on touch)
   - Close button (and Escape key, background click)
   - Image counter (e.g. "3 / 18")
   ============================================================ */
.vn-pdp-lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0, 0, 0, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 5vh 5vw;
  cursor: zoom-out;
}
.vn-pdp-lightbox[hidden] { display: none; }
.vn-pdp-lightbox__stage {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: zoom-in;
}
/* Zoomed state — Size Guide パターン (overflow:visible + transition) +
   ドラッグでパン可能 (画像内移動)。transform は JS で動的に
   translate+scale を inline で上書き、CSS の transform: scale(2) は
   initial state 用 fallback。 */
.vn-pdp-lightbox__stage.is-zoomed {
  cursor: grab;
  overflow: visible;
}
.vn-pdp-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  cursor: zoom-in;
  user-select: none;
  -webkit-user-drag: none;
  transition: transform 280ms cubic-bezier(.2,.8,.2,1);
  transform-origin: center center;
}
.vn-pdp-lightbox__img.is-zoomed {
  transform: scale(2);
  cursor: grab;
}
/* パン中は transition を切ってスナッピーに、cursor を grabbing に */
.vn-pdp-lightbox__img.is-panning {
  transition: none;
  cursor: grabbing;
}
.vn-pdp-lightbox__stage.is-zoomed.is-panning {
  cursor: grabbing;
}
.vn-pdp-lightbox__close {
  position: fixed;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
}
.vn-pdp-lightbox__close:hover,
.vn-pdp-lightbox__close:focus-visible {
  background: rgba(0, 0, 0, 0.7);
  border-color: rgba(255, 255, 255, 0.8);
  outline: 0;
}
.vn-pdp-lightbox__nav {
  position: fixed;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.4);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  z-index: 1001;
  transition: background 180ms ease-out, border-color 180ms ease-out;
}
.vn-pdp-lightbox__nav:hover,
.vn-pdp-lightbox__nav:focus-visible {
  background: rgba(0, 0, 0, 0.75);
  border-color: rgba(255, 255, 255, 0.85);
  outline: 0;
}
.vn-pdp-lightbox__nav--prev { left: 24px; }
.vn-pdp-lightbox__nav--next { right: 24px; }
.vn-pdp-lightbox__count {
  position: fixed;
  top: 32px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
  z-index: 1001;
}
@media (max-width: 768px) {
  .vn-pdp-lightbox { padding: 24px 12px; }
  .vn-pdp-lightbox__img { max-height: 92vh; }
  .vn-pdp-lightbox__close {
    top: 12px;
    right: 12px;
    width: 40px;
    height: 40px;
  }
  .vn-pdp-lightbox__nav {
    width: 40px;
    height: 40px;
  }
  .vn-pdp-lightbox__nav--prev { left: 8px; }
  .vn-pdp-lightbox__nav--next { right: 8px; }
  .vn-pdp-lightbox__count {
    top: 18px;
    font-size: 11px;
  }
}

/* Accordion (Description / Size / Condition / Detail / Support).
   IMPORTANT: every summary — both the description's <h2> child and the
   inline <span> labels in SIZE / CONDITION / DETAIL / PAYMENT etc — must
   read identically. Font-size auto-scales via clamp() so long bilingual
   labels like "SIZE INFORMATION / サイズインフォメーション" fit on a single
   line at every viewport. nowrap + flex with min-width:0 prevents wrapping. */
.vn-pdp__accordion {
  border-bottom: 1px solid var(--vn-hair);
}
.vn-pdp__accordion summary {
  list-style: none;
  cursor: pointer;
  padding: 18px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: clamp(6px, 1.5vw, 14px);
  min-height: 44px;
  position: relative;
  font-family: var(--vn-font-display) !important;
  font-weight: 700 !important;
  /* clamp scales 8px (~280px viewport) → 14px (full desktop). */
  font-size: clamp(8px, 1.6vw + 4px, 14px) !important;
  letter-spacing: clamp(0.04em, 0.2vw, 0.10em) !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: var(--vn-fg) !important;
  white-space: nowrap;
  overflow: hidden;
}
.vn-pdp__accordion summary > *:not(.vn-pdp__accordion-icon) {
  font-family: var(--vn-font-display) !important;
  font-weight: 700 !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: uppercase !important;
  font-style: normal !important;
  color: var(--vn-fg) !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.2 !important;
  white-space: nowrap;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  flex: 1 1 auto;
}
.vn-pdp__accordion summary::-webkit-details-marker { display: none; }
.vn-pdp__accordion summary::marker { display: none; content: ''; }
.vn-pdp__accordion-icon {
  width: 12px;
  height: 12px;
  position: relative;
  flex-shrink: 0;
}
.vn-pdp__accordion-icon::before,
.vn-pdp__accordion-icon::after {
  content: '';
  position: absolute;
  background: var(--vn-fg);
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transition: transform 250ms cubic-bezier(.2,.8,.2,1);
}
.vn-pdp__accordion-icon::before {
  width: 12px; height: 1px;
}
.vn-pdp__accordion-icon::after {
  width: 1px; height: 12px;
}
.vn-pdp__accordion[open] .vn-pdp__accordion-icon::after {
  transform: translate(-50%, -50%) rotate(90deg);
  opacity: 0;
}
.vn-pdp__accordion[open] summary { font-style: normal; color: var(--vn-fg); }
.vn-pdp__accordion-body {
  padding: 4px 0 24px;
}
.vn-pdp__rich {
  /* Match `.vn-pdp__description-body` exactly. All accordion bodies (SIZE
     INFORMATION / CONDITION / OTHER DETAIL / PAYMENT / SHIPPING / RETURN
     / CONTACT) inherit this so typography stays consistent with the product
     description. */
  font-family: 'Shippori Mincho B1', 'Noto Serif JP', 'YuMincho', 'Hiragino Mincho ProN', 'EB Garamond', Georgia, serif !important;
  font-size: 15.5px;
  line-height: 1.85;
  color: var(--vn-fg);
}
/* AGGRESSIVE override: when the user enters rich text via the metafield or
   theme editor, content often comes wrapped in <h6>/<h5>/<strong>/<dl>
   etc. The theme's default heading sizing (~10.4px for h6) makes the
   accordion body look NOTHING like the product description. Force every
   text-bearing descendant of `.vn-pdp__rich` (and `.vn-pdp__accordion-body`
   when used as a rich-text container) to the description's 15.5px / 1.85
   typography so all 7 accordions are visually identical to the description. */
.vn-pdp__rich,
.vn-pdp__rich p,
.vn-pdp__rich div,
.vn-pdp__rich span,
.vn-pdp__rich dl,
.vn-pdp__rich dt,
.vn-pdp__rich dd,
.vn-pdp__rich ul,
.vn-pdp__rich ol,
.vn-pdp__rich li,
.vn-pdp__rich h1,
.vn-pdp__rich h2,
.vn-pdp__rich h3,
.vn-pdp__rich h4,
.vn-pdp__rich h5,
.vn-pdp__rich h6,
.vn-pdp__rich strong,
.vn-pdp__rich em,
.vn-pdp__rich a {
  font-family: 'Shippori Mincho B1', 'Noto Serif JP', 'YuMincho', 'Hiragino Mincho ProN', 'EB Garamond', Georgia, serif !important;
  /* Section-controlled accordion font-size — defaults to 15.5px (PC) /
     12px (mobile) per user spec. Editable in the theme editor. */
  font-size: var(--vn-pdp-fs-acc-pc, 15.5px) !important;
  line-height: 1.85 !important;
  font-style: normal !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
@media (max-width: 749px) {
  .vn-pdp__rich,
  .vn-pdp__rich p,
  .vn-pdp__rich div,
  .vn-pdp__rich span,
  .vn-pdp__rich dl,
  .vn-pdp__rich dt,
  .vn-pdp__rich dd,
  .vn-pdp__rich ul,
  .vn-pdp__rich ol,
  .vn-pdp__rich li,
  .vn-pdp__rich h1,
  .vn-pdp__rich h2,
  .vn-pdp__rich h3,
  .vn-pdp__rich h4,
  .vn-pdp__rich h5,
  .vn-pdp__rich h6,
  .vn-pdp__rich strong,
  .vn-pdp__rich em,
  .vn-pdp__rich a {
    font-size: var(--vn-pdp-fs-acc-sp, 12px) !important;
  }
}
/* Headings inside accordion content: keep them slightly heavier so user-
   added emphasis still reads as a heading, but use the same size/line-
   height as body so the rhythm matches the description. */
.vn-pdp__rich h1,
.vn-pdp__rich h2,
.vn-pdp__rich h3,
.vn-pdp__rich h4,
.vn-pdp__rich h5,
.vn-pdp__rich h6 {
  font-weight: 600 !important;
  margin: 0 0 8px !important;
}
/* Preserve empty paragraphs / headings as visible blank lines.
   The richtext editor outputs `<h6></h6>` (or `<p></p>`) for every
   empty line the user types, but with no content these collapse to
   zero height and the visible "blank line" disappears. Forcing a
   min-height of 1 full line-height makes them render at the same
   vertical extent as the editor: empty editor line → empty rendered
   line (1:1 mapping, ~28.7px at 15.5px / 1.85). */
.vn-pdp__rich p:empty,
.vn-pdp__rich h1:empty,
.vn-pdp__rich h2:empty,
.vn-pdp__rich h3:empty,
.vn-pdp__rich h4:empty,
.vn-pdp__rich h5:empty,
.vn-pdp__rich h6:empty,
.vn-pdp__rich div:empty {
  min-height: 1.85em !important;
  margin: 0 !important;
}
.vn-pdp__rich p { margin: 0 0 14px; }
.vn-pdp__rich p:last-child { margin-bottom: 0; }
.vn-pdp__rich a { color: var(--vn-fg); text-decoration: underline; text-underline-offset: 3px; }
.vn-pdp__rich h2, .vn-pdp__rich h3 {
  font-family: var(--vn-font-display);
  font-weight: 700;
  margin: 24px 0 10px;
  letter-spacing: -0.005em;
}
.vn-pdp__rich h2 { font-size: 18px; }
.vn-pdp__rich h3 { font-size: 15px; text-transform: uppercase; letter-spacing: 0.06em; }
.vn-pdp__rich img { max-width: 100%; height: auto; margin: 16px 0; }
.vn-pdp__rich ul, .vn-pdp__rich ol { padding-left: 20px; margin: 0 0 14px; }
.vn-pdp__specs {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 14px 16px;
  margin: 0;
  font-family: var(--vn-font-serif);
  font-size: 15px;
  font-variant-numeric: tabular-nums;
  line-height: 1.55;
}
.vn-pdp__specs dt {
  font-style: italic;
  color: var(--vn-fg-mute);
  letter-spacing: 0.02em;
}
.vn-pdp__specs dd { margin: 0; color: var(--vn-fg); }

/* Bottom stats wrap — frameless, single-line, **no truncation**.
   Sits directly above the final ADD TO CART stack with minimal margin.
   Font-size scales fluidly via clamp() so all 3 items always fit on one line
   without ellipsis on any viewport from 320px upward.
   - Desktop (~380px aside col): ~10.5px / gap 14px
   - Mobile narrow (~320px viewport): ~7.5px / gap 6px
   The clamp() formula: min 7.5px → max 10.5px, scaled against viewport width
   so it shrinks proportionally as the column gets narrower. */
.vn-pdp__stats-wrap {
  /* Generous space ABOVE (visual break from the preceding accordion stack)
     while staying flush BELOW so stats reads as part of the CTA cluster. */
  margin: 48px 0 0;
  padding: 0;
  border: 0;
  display: flex;
  justify-content: center;
  box-sizing: border-box;
  max-width: 100%;
  overflow: visible;
}
/* Prefix with body.vn-modern to beat the global vn-modern.css rule
   `body.vn-modern [class*="vn-stats-inline"] { font-size: 11px !important }`
   that otherwise hard-pins font-size to 11px and breaks our clamp(). */
body.vn-modern .vn-pdp__stats-wrap .vn-stats-inline {
  margin: 0 !important;
  font-family: var(--vn-font-mono) !important;
  letter-spacing: 0.02em !important;
  text-transform: uppercase !important;
  /* All locales: stay on a single line. JS in vn-stats-inline.liquid measures
     scrollWidth vs clientWidth post-fetch and shrinks font-size in 0.25px steps
     until it fits (min 6px). The clamp() below is the *initial* / max ceiling. */
  font-size: clamp(6px, 1.5vw, 10px) !important;
  flex-wrap: nowrap !important;
  gap: clamp(8px, 2vw, 18px) !important;
  max-width: 100% !important;
  overflow: visible !important;
  align-items: center !important;
  justify-content: center !important;
  color: var(--vn-fg-mute) !important;
}
/* Backward-compat: --nowrap class still maps to nowrap (JS handles autofit globally). */
body.vn-modern .vn-pdp__stats-wrap .vn-stats-inline.vn-stats-inline--nowrap {
  flex-wrap: nowrap !important;
}
body.vn-modern .vn-pdp__stats-wrap .vn-stats-inline__item {
  white-space: nowrap !important;
  font-size: inherit !important;
  overflow: visible !important;
  text-overflow: clip !important;
  flex: 0 1 auto !important;
  gap: clamp(2px, 0.6vw, 4px) !important;
  align-items: center !important;
}
body.vn-modern .vn-pdp__stats-wrap .vn-stats-inline__icon {
  width: clamp(8px, 1.4vw, 11px) !important;
  height: clamp(8px, 1.4vw, 11px) !important;
  flex: 0 0 auto !important;
  opacity: 0.65 !important;
}

/* View count pill near price — Modern tone (gray pill → minimal underline) */
.vn-pdp__viewcount-wrap { margin: 4px 0 14px; }
.vn-pdp__viewcount-wrap .vn-view-count {
  background: transparent;
  border: 1px solid var(--vn-hair);
  border-radius: 0;
  font-family: var(--vn-font-mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-size: 10.5px;
}

/* Legacy `.vn-pdp__sticky` styles removed — superseded by
   `.vn-pdp__floating-atc` (rendered after </section>). See its block
   below. The body padding-bottom hack from the legacy mobile sticky was
   removed too; the new floating bar overlays content instead of pushing
   it. */

/* Tablet: info below gallery */
@media (max-width: 1100px) {
  .vn-pdp {
    grid-template-columns: 1fr;
    padding: 16px 16px 32px;
    gap: 32px;
  }
  .vn-pdp__info {
    position: static;
    max-width: 720px;
    width: 100%;
  }
  .vn-pdp__gallery { gap: 10px; }
}

@media (max-width: 768px) {
  .vn-pdp {
    padding: 12px;
    gap: 16px;
    max-width: 100vw;
    box-sizing: border-box;
    overflow: hidden;
  }
  /* Force every PDP child to respect viewport bounds — fixes button/text overflow */
  .vn-pdp,
  .vn-pdp *,
  .vn-pdp form,
  .vn-pdp .vn-pdp__info,
  .vn-pdp .vn-pdp__cta,
  .vn-pdp .vn-pdp__sub-cta,
  .vn-pdp .vn-pdp__sub-cta-row,
  .vn-pdp .vn-pdp__chips-row,
  .vn-pdp .vn-pdp__qty-row,
  .vn-pdp .vn-pdp__delivery,
  .vn-pdp .vn-pdp__price-row {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Title: smaller on mobile so even long product names fit in ~2 lines */
  .vn-pdp__title {
    font-size: clamp(15px, 4.4vw, 22px);
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.3;
    margin-right: 0;
  }
  /* Mobile: price-row stays on a SINGLE line. Font sizes are owned by the
     desktop clamp() so the row scales fluidly; we only adjust gap/padding
     here (no font-size override — let clamp handle it). */
  .vn-pdp__price-row {
    gap: clamp(4px, 1.6vw, 10px);
    flex-wrap: nowrap;
    align-items: center;
  }
  .vn-pdp__price {
    flex-wrap: nowrap;
    align-items: center;
    gap: clamp(4px, 1.4vw, 8px);
    min-width: 0;
  }
  .vn-pdp__installment-chip {
    /* Push the chip to the right edge of the price-row, so its right side
     aligns flush with the divider line below (per-request). */
    margin-left: auto;
    margin-top: 0;
    flex: 0 0 auto;
    align-self: center;
  }
  .vn-pdp__installment-chip__head {
    padding: 4px 8px;
    gap: 5px;
  }
  /* Chip text auto-scales with viewport — never wraps below the price */
  .vn-pdp__installment-chip__label { font-size: clamp(7px, 1.2vw + 4px, 10px); }
  .vn-pdp__installment-chip__amount { font-size: clamp(8px, 1.4vw + 5px, 12px); }
  .vn-pdp__installment-chip__row { gap: 10px; }
  .vn-pdp__installment-chip__per { margin-left: 0; font-size: 14px; }
  .vn-pdp__option-row { gap: 10px; flex-wrap: wrap; }
  /* Accordion summary font-size is owned by the desktop clamp() above —
     don't override here or long bilingual labels will wrap to 2 lines. */
  .vn-pdp__accordion summary { padding: 16px 0 !important; }
  .vn-pdp__rich { font-size: 14px; word-break: break-word; }
  body.vn-modern .vn-pdp__img img { padding: 8px; }
  /* Buttons: full width within parent, no minimum that overflows */
  .vn-pdp .vn-btn,
  .vn-pdp .vn-pdp__line-btn,
  .vn-pdp button[type="submit"],
  .vn-pdp .vn-pdp__cta button {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    padding-left: 14px !important;
    padding-right: 14px !important;
    font-size: 12px !important;
    box-sizing: border-box !important;
    white-space: normal !important;
  }
  /* Sub CTA row: wishlist icon (fixed) + RESERVE (flex 1) — keep tight */
  .vn-pdp__sub-cta-row { gap: 8px; align-items: stretch; }
  .vn-pdp__sub-cta-row .vn-pdp__icon-btn {
    width: 44px !important;
    min-width: 44px !important;
    flex: 0 0 44px !important;
  }
  .vn-pdp__sub-cta-row > .vn-btn { flex: 1 1 auto !important; min-width: 0 !important; }
  /* Info chips row: wrap to 2/3 columns, smaller padding/text */
  .vn-pdp__chips-row { gap: 6px; }
  .vn-pdp__info-chip {
    padding: 8px 4px !important;
    font-size: 8.5px !important;
    min-height: 40px !important;
    flex: 1 1 0 !important;
    min-width: 0 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
  }
  /* Delivery box: prevent overflow from carrier name */
  .vn-pdp__delivery { flex-wrap: wrap; }
  .vn-pdp__delivery-body { min-width: 0; flex: 1 1 0; }
  .vn-pdp__delivery-date,
  .vn-pdp__delivery-carrier { word-break: break-word; }

  /* Mobile gallery: horizontal scroll-snap carousel (Prestige-style) */
  .vn-pdp__gallery {
    margin: 0 -12px;  /* full bleed (counteract .vn-pdp padding) */
  }
  .vn-pdp__gallery-track {
    display: flex;
    flex-wrap: nowrap;
    gap: 0;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .vn-pdp__gallery-track::-webkit-scrollbar { display: none; }
  .vn-pdp__img {
    flex: 0 0 100%;
    width: 100%;
    aspect-ratio: 4 / 5;
    scroll-snap-align: center;
    scroll-snap-stop: always;
  }
  .vn-pdp__img--hero {
    grid-column: auto;
  }
  /* Thumbnails: visible on mobile, sticky scroll synced */
  .vn-pdp__thumbs {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 12px;
    margin: 0;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .vn-pdp__thumbs::-webkit-scrollbar { display: none; }
  .vn-pdp__thumb { width: 48px; }
}

/* ============================================================
   PDP Modal — RESERVE / TRY-ON / ASK
   Native <dialog>, Modern minimal tone
   ============================================================ */
.vn-pdp__dialog {
  border: none;
  background: transparent;
  padding: 0;
  margin: auto;
  max-width: 92vw;
  width: 480px;
  color: var(--vn-fg);
}
.vn-pdp__dialog::backdrop {
  background: rgba(28, 28, 28, 0.55);
  backdrop-filter: blur(2px);
}
.vn-pdp__dialog[open] {
  animation: vnPdpDialogIn 240ms cubic-bezier(.2,.8,.2,1);
}
/* Div-modal variant — used by hold-email so Shopify can inject
   CAPTCHA into the contained {% form 'contact' %}. Native <dialog>
   hides the form at server render and Shopify skips CAPTCHA. */
.vn-pdp__dialog--div {
  position: fixed !important;
  inset: 0 !important;
  width: auto !important;
  max-width: none !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: rgba(28, 28, 28, 0.55);
  backdrop-filter: blur(2px);
  z-index: 9999;
  padding: 16px;
  box-sizing: border-box;
  animation: vnPdpDialogIn 240ms cubic-bezier(.2,.8,.2,1);
  overflow-y: auto;
}
.vn-pdp__dialog--div[hidden] { display: none !important; }
.vn-pdp__dialog--div .vn-pdp__dialog-inner {
  max-width: 480px;
  width: 100%;
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
@keyframes vnPdpDialogIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
.vn-pdp__dialog-inner {
  background: var(--vn-bg);
  border: 1px solid var(--vn-fg);
  padding: 0;
  display: flex;
  flex-direction: column;
}
.vn-pdp__dialog-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  border-bottom: 1px solid var(--vn-hair);
}
.vn-pdp__dialog-title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0;
}
.vn-pdp__dialog-close {
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 6px;
  margin: -6px;
  color: var(--vn-fg);
  display: inline-flex;
}
.vn-pdp__dialog-body {
  padding: 24px;
}
.vn-pdp__dialog-meta {
  border: 1px solid var(--vn-hair);
  margin-bottom: 18px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.vn-pdp__dialog-meta > div {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--vn-hair);
}
.vn-pdp__dialog-meta > div:last-child { border-bottom: none; }
.vn-pdp__dialog-meta > div > span:first-child {
  color: var(--vn-fg-mute);
  letter-spacing: 0.14em;
  flex-shrink: 0;
}
.vn-pdp__dialog-meta > div > span:last-child {
  color: var(--vn-fg);
  text-align: right;
  text-transform: none;
  letter-spacing: 0.04em;
  font-feature-settings: "tnum";
}
.vn-pdp__dialog-lede {
  font-family: var(--vn-font-serif);
  font-size: 14.5px;
  line-height: 1.65;
  margin: 0 0 12px;
  color: var(--vn-fg);
}
.vn-pdp__dialog-note {
  font-family: var(--vn-font-serif);
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  color: var(--vn-fg-mute);
  font-style: italic;
}
.vn-pdp__dialog-foot {
  padding: 0 24px 24px;
}
.vn-pdp__dialog-login-prompt {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px dashed var(--vn-hair-strong);
  background: var(--vn-bg-subtle);
  text-align: center;
}
.vn-pdp__dialog-login-prompt p {
  margin: 0 0 12px;
  font-family: var(--vn-font-serif);
  font-size: 13px;
  color: var(--vn-fg-mute);
  line-height: 1.55;
}
.vn-pdp__dialog-login-actions {
  display: flex;
  gap: 8px;
}
.vn-pdp__dialog-login-actions a { padding: 10px 14px !important; min-height: 40px; }

/* Email-request dialog form */
.vn-pdp__dialog-label {
  display: block;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin: 14px 0 6px;
}
.vn-pdp__dialog-input,
.vn-pdp__dialog-textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--vn-hair-strong);
  border-radius: 0;
  background: var(--vn-bg);
  color: var(--vn-fg);
  font-family: var(--vn-font-body);
  font-size: 14.5px;
  line-height: 1.5;
  box-sizing: border-box;
  min-height: 44px;
}
.vn-pdp__dialog-input:focus,
.vn-pdp__dialog-textarea:focus {
  outline: 0;
  border-color: var(--vn-fg);
}
.vn-pdp__dialog-textarea {
  resize: vertical;
  min-height: 96px;
}
.vn-pdp__dialog-success {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--vn-fg);
  background: var(--vn-bg);
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--vn-fg);
}
.vn-pdp__dialog-error {
  margin: 0 0 16px;
  padding: 12px 14px;
  border: 1px solid var(--vn-fg);
  background: var(--vn-bg);
  font-family: var(--vn-font-mono);
  font-size: 12px;
  color: var(--vn-fg);
}
.vn-pdp__dialog--email .vn-pdp__dialog-inner-form {
  display: contents;
}
.vn-pdp__hold-date-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.vn-pdp__hold-date-row .vn-pdp__dialog-input {
  width: auto;
  flex: 1 1 180px;
  min-width: 160px;
}
.vn-pdp__hold-date-rel {
  font-family: var(--vn-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--vn-fg-mute);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vn-pdp__dialog-thanks {
  font-family: var(--vn-font-serif);
  font-size: 16px;
  line-height: 1.7;
  color: var(--vn-fg);
  text-align: center;
  margin: 24px 0;
}
.vn-pdp__hold-email-iframe {
  position: absolute;
  width: 0;
  height: 0;
  border: 0;
  visibility: hidden;
  pointer-events: none;
}

@media (max-width: 480px) {
  .vn-pdp__dialog { width: 92vw; }
  .vn-pdp__dialog-head { padding: 14px 18px; }
  .vn-pdp__dialog-body { padding: 18px; }
  .vn-pdp__dialog-foot { padding: 0 18px 18px; }
}

/* ============================================================
   Floating sticky ATC
   ============================================================ */
.vn-pdp__floating-atc {
  position: fixed;
  left: 0;
  right: 0;
  z-index: 60;
  background: var(--vn-bg);
  border-top: 1px solid var(--vn-hair);
  box-shadow: 0 -10px 28px -16px rgba(0,0,0,0.18);
  pointer-events: none;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 200ms ease-out, transform 200ms ease-out;
}
.vn-pdp__floating-atc.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.vn-pdp__floating-atc__inner {
  max-width: var(--vn-container-max, 1440px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr) auto;
  gap: 14px;
  align-items: center;
  padding: 10px var(--vn-container-pad-desktop, 32px);
}
.vn-pdp__floating-atc__thumb {
  display: block;
  width: 56px;
  height: 56px;
  overflow: hidden;
  background: var(--vn-bg-subtle);
  flex-shrink: 0;
}
.vn-pdp__floating-atc__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}
.vn-pdp__floating-atc__meta {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 2px;
}
.vn-pdp__floating-atc__title {
  font-family: var(--vn-font-display);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--vn-fg);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.25;
}
.vn-pdp__floating-atc__price {
  font-family: var(--vn-font-mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--vn-fg-mute);
  font-feature-settings: "tnum";
}
.vn-pdp__floating-atc__btn {
  white-space: nowrap;
  padding: 12px 24px !important;
  min-height: 44px;
}

/* Desktop: anchor under the sticky header. The header wrapper is sticky at
   top:0 with height ≈ ubar + brand-row + util-row; we use 0 here too and
   rely on z-index ordering to stack the floating bar UNDER the header.
   Header z-index is var(--vn-z-sticky, 50); floater is z-index: 60 to sit
   on top of content but the visual effect is "right under header" because
   the bar lives at the very top of the viewport directly below the header. */
@media (min-width: 769px) {
  .vn-pdp__floating-atc {
    top: var(--vn-header-h, 100px);
    bottom: auto;
    border-top: 1px solid var(--vn-hair);
    border-bottom: 0;
    box-shadow: 0 10px 28px -16px rgba(0,0,0,0.18);
  }
  .vn-pdp__floating-atc.is-visible { transform: translateY(0); }
  .vn-pdp__floating-atc:not(.is-visible) { transform: translateY(-8px); }
}

/* Mobile: pinned to the bottom of the viewport. */
@media (max-width: 768px) {
  .vn-pdp__floating-atc {
    bottom: 0;
    top: auto;
    padding-bottom: env(safe-area-inset-bottom, 0);
  }
  .vn-pdp__floating-atc__inner {
    padding: 8px 12px;
    gap: 10px;
    grid-template-columns: 44px minmax(0, 1fr) auto;
  }
  .vn-pdp__floating-atc__thumb { width: 44px; height: 44px; }
  .vn-pdp__floating-atc__title { font-size: 12.5px; }
  .vn-pdp__floating-atc__price { font-size: 11.5px; }
  .vn-pdp__floating-atc__btn {
    padding: 10px 16px !important;
    font-size: 12px !important;
    letter-spacing: 0.06em !important;
    min-height: 40px;
  }
}

/* ===== Condition photo carousel — used inside the CONDITION accordion =====
   Mirrors the modal carousel from `vn-product-detail-buttons.liquid`. The CSS
   variables / arrow / dot dimensions are duplicated here so the accordion
   gallery renders correctly even when the user collapses to no offers/no
   buttons. */
.vn-carousel--accordion {
  position: relative;
  margin: 16px 0 4px;
  width: 100%;
  max-width: 600px;
}
.vn-carousel--accordion .vn-carousel__track {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.vn-carousel--accordion .vn-carousel__track::-webkit-scrollbar { display: none; }
.vn-carousel--accordion .vn-carousel__image {
  width: 100%;
  height: auto;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  scroll-snap-align: start;
  display: block;
  background: var(--vn-bg-subtle, #f6f4ee);
}
.vn-carousel--accordion .vn-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  max-width: 36px !important;
  max-height: 36px !important;
  flex: 0 0 36px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.95);
  /* Black hairline so the white circle stays visible against bright
     image regions / page background. */
  border: 1px solid #1c1c1c !important;
  cursor: pointer;
  border-radius: 50% !important;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  color: #1c1c1c;
  transition: background 0.15s ease, color 0.15s ease;
  z-index: 2;
}
.vn-carousel--accordion .vn-carousel__arrow:hover {
  background: #1c1c1c;
  color: #ffffff;
}
.vn-carousel--accordion .vn-carousel__arrow--prev { left: 8px; }
.vn-carousel--accordion .vn-carousel__arrow--next { right: 8px; }
.vn-carousel--accordion .vn-carousel__dots {
  position: absolute;
  bottom: 10px; left: 0; right: 0;
  display: flex; justify-content: center; gap: 6px;
}
.vn-carousel--accordion .vn-carousel__dot {
  width: 6px !important;
  height: 6px !important;
  min-width: 6px !important;
  min-height: 6px !important;
  max-width: 6px !important;
  max-height: 6px !important;
  flex: 0 0 6px !important;
  aspect-ratio: 1 / 1 !important;
  padding: 0 !important;
  border: none; border-radius: 50% !important;
  background: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.vn-carousel--accordion .vn-carousel__dot.is-active {
  background: #ffffff;
  transform: scale(1.25);
}
@media (max-width: 749px) {
  .vn-carousel--accordion .vn-carousel__arrow {
    width: 32px !important; height: 32px !important;
    min-width: 32px !important; min-height: 32px !important;
    max-width: 32px !important; max-height: 32px !important;
    flex: 0 0 32px !important;
  }
  .vn-carousel--accordion .vn-carousel__arrow--prev { left: 6px; }
  .vn-carousel--accordion .vn-carousel__arrow--next { right: 6px; }
}
/* END_SECTION:vn-modern-pdp */

/* START_SECTION:vn-modern-philosophy (INDEX:94) */
.vn-modern-philosophy { padding-left: 0; padding-right: 0; }
.vn-modern-philosophy__grid {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 48px;
  align-items: center;
}
.vn-modern-philosophy__media {
  position: relative;
  aspect-ratio: 4/5;
  overflow: hidden;
  background: var(--vn-bg-subtle);
}
.vn-modern-philosophy__media img,
.vn-modern-philosophy__media .vn-card__placeholder {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* === Slides (crossfade) === */
.vn-modern-philosophy__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 1400ms ease-in-out;
  z-index: 0;
  will-change: opacity;
}
.vn-modern-philosophy__slide.is-active { opacity: 1; }
.vn-modern-philosophy__slide picture,
.vn-modern-philosophy__slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.vn-modern-philosophy__h2 {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(36px, 5vw, 72px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin: 14px 0 24px;
  text-wrap: balance;
}
.vn-modern-philosophy__h2 em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: 0;
}
.vn-modern-philosophy__body {
  font-family: var(--vn-font-serif);
  font-size: 15px;
  line-height: 1.75;
  color: var(--vn-fg-mute);
  max-width: 52ch;
  text-wrap: pretty;
}
.vn-modern-philosophy__body p { margin: 0 0 14px; }
.vn-modern-philosophy__body p:last-child { margin-bottom: 0; }
.vn-modern-philosophy__sig {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  margin-top: 32px;
  color: var(--vn-fg-mute);
}
@media (prefers-reduced-motion: reduce) {
  .vn-modern-philosophy__slide { transition: none; }
}
@media (max-width: 900px) {
  .vn-modern-philosophy__grid { grid-template-columns: 1fr; gap: 32px; }
  .vn-modern-philosophy__media { aspect-ratio: 4/3; }
  .vn-modern-philosophy__body { font-size: 14px; line-height: 1.7; }
}
/* END_SECTION:vn-modern-philosophy */

/* START_SECTION:vn-modern-related (INDEX:96) */
.vn-modern-related { position: relative; display: block; }
.vn-modern-related .vn-sec__head { margin-bottom: 24px; }
.vn-modern-related__rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(220px, 24%);
  gap: 24px 16px;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x proximity;
  scroll-padding-left: var(--vn-container-pad-desktop, 32px);
  -webkit-overflow-scrolling: touch;
  padding-bottom: 8px;
  scrollbar-width: thin;
}
.vn-modern-related__rail::-webkit-scrollbar { height: 4px; }
.vn-modern-related__rail::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.18); border-radius: 999px; }
.vn-modern-related__rail::-webkit-scrollbar-track { background: transparent; }
.vn-modern-related__card { scroll-snap-align: start; min-width: 0; }

@media (max-width: 1024px) {
  .vn-modern-related__rail { grid-auto-columns: minmax(200px, 32%); }
}
@media (max-width: 768px) {
  .vn-modern-related__rail {
    grid-auto-columns: minmax(160px, 48%);
    gap: 16px 12px;
  }
}
@media (max-width: 480px) {
  .vn-modern-related__rail { grid-auto-columns: minmax(150px, 60%); }
}
/* END_SECTION:vn-modern-related */

/* START_SECTION:vn-modern-search (INDEX:97) */
body.vn-modern .vn-search { padding: 56px var(--vn-container-pad-desktop) 96px; }
body.vn-modern .vn-search__header {
  padding-bottom: 32px;
  border-bottom: 1px solid var(--vn-hair);
  margin-bottom: 56px;
}
body.vn-modern .vn-search__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  margin: 0 0 24px;
}
body.vn-modern .vn-search__form {
  display: flex;
  align-items: center;
  border-bottom: 2px solid var(--vn-fg);
  max-width: 720px;
}
body.vn-modern .vn-search__form input {
  flex: 1;
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: clamp(18px, 2vw, 22px);
  letter-spacing: -0.005em;
  border: 0;
  background: transparent;
  padding: 14px 0;
  outline: 0;
  color: var(--vn-fg);
  min-height: 48px;
}
body.vn-modern .vn-search__form input::placeholder {
  color: var(--vn-fg-mute);
  font-weight: 500;
  font-style: italic;
  font-family: var(--vn-font-serif);
}
body.vn-modern .vn-search__btn {
  background: none;
  border: 0;
  padding: 8px;
  cursor: pointer;
  color: var(--vn-fg);
  min-width: 44px;
  min-height: 44px;
  transition: opacity 200ms ease;
}
body.vn-modern .vn-search__btn:hover { opacity: 0.65; }
body.vn-modern .vn-search__hint {
  margin: 16px 0 0;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}

body.vn-modern .vn-search__status {
  margin: 0 0 24px;
  padding: 12px 16px;
  border: 1px solid var(--vn-hair);
  font-family: var(--vn-font-mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}

/* === Results grid === */
body.vn-modern .vn-search__results .vn-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 36px 24px;
}
@media (max-width: 1024px) {
  body.vn-modern .vn-search__results .vn-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; }
}
@media (max-width: 540px) {
  body.vn-modern .vn-search__results .vn-grid-3 { grid-template-columns: 1fr; gap: 24px; }
}

body.vn-modern .vn-search__card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
  color: var(--vn-fg);
}
body.vn-modern .vn-search__card-media {
  position: relative;
  aspect-ratio: 4 / 5;
  background: var(--vn-bg-subtle);
  overflow: hidden;
}
body.vn-modern .vn-search__card-media img,
body.vn-modern .vn-search__card-media .vn-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 360ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-search__card:hover .vn-search__card-media img { transform: scale(1.04); }
body.vn-modern .vn-search__card-sold {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 8px;
  background: var(--vn-bg);
  border: 1px solid var(--vn-fg);
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
body.vn-modern .vn-search__card-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}
body.vn-modern .vn-search__card-lot {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-search__card-title {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 14px;
  line-height: 1.4;
  letter-spacing: 0.005em;
  margin: 0;
  color: var(--vn-fg);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.vn-modern .vn-search__card-price {
  font-family: var(--vn-font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-search__card-price--sold { font-style: italic; }

/* === Empty / placeholder states === */
body.vn-modern .vn-search__empty,
body.vn-modern .vn-search__placeholder {
  padding: 80px 0 96px;
  text-align: center;
}
body.vn-modern .vn-search__empty-title {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(20px, 3vw, 28px);
  letter-spacing: -0.005em;
  margin: 12px 0 16px;
  text-wrap: balance;
}
body.vn-modern .vn-search__empty-lede,
body.vn-modern .vn-search__placeholder-text {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 15px;
  color: var(--vn-fg-mute);
  margin: 0;
}

/* === Pager === */
body.vn-modern .vn-search__pager {
  margin-top: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 24px;
  border-top: 1px solid var(--vn-hair);
  padding-top: 32px;
}
body.vn-modern .vn-search__pager-btn,
body.vn-modern .vn-search__pager-nums a,
body.vn-modern .vn-search__pager-nums span {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  text-decoration: none;
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-search__pager-btn { padding: 8px 14px; border: 1px solid var(--vn-hair); color: var(--vn-fg); transition: background 220ms ease, color 220ms ease; }
body.vn-modern .vn-search__pager-btn:hover { background: var(--vn-fg); color: var(--vn-bg); }
body.vn-modern .vn-search__pager-nums { display: flex; gap: 12px; align-items: center; }
body.vn-modern .vn-search__pager-nums .is-active { color: var(--vn-fg); border-bottom: 1px solid var(--vn-fg); padding-bottom: 2px; }

@media (max-width: 768px) {
  body.vn-modern .vn-search { padding: 28px 16px 56px; }
  body.vn-modern .vn-search__header { padding-bottom: 22px; margin-bottom: 32px; }
}
/* END_SECTION:vn-modern-search */

/* START_SECTION:vn-modern-shipping (INDEX:98) */
/* ============================================================
   SHIPPING page — editorial layout
   ============================================================ */

body.vn-modern .vn-shippage {
  max-width: 1100px;
  margin: 0 auto;
  padding: 56px var(--vn-container-pad-desktop) 96px;
  box-sizing: border-box;
}

/* Reveal animation (shared with payment page; safe to redeclare) */
body.vn-modern .vn-shippage [data-vn-reveal] {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 480ms cubic-bezier(.2,.8,.2,1), transform 480ms cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform;
}
body.vn-modern .vn-shippage [data-vn-reveal].is-visible {
  opacity: 1;
  transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  body.vn-modern .vn-shippage [data-vn-reveal],
  body.vn-modern .vn-shippage [data-vn-reveal].is-visible {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ---------- HERO ---------- */
body.vn-modern .vn-shippage__hero {
  padding-bottom: 40px;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--vn-hair);
}
body.vn-modern .vn-shippage__hero-meta {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  margin-bottom: 18px;
}
body.vn-modern .vn-shippage__sep { opacity: 0.5; }
body.vn-modern .vn-shippage__title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(40px, 6vw, 80px);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin: 0;
  text-wrap: balance;
}
body.vn-modern .vn-shippage__title em {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vn-fg-mute);
  display: block;
  font-size: 0.5em;
  margin-top: 8px;
  opacity: 0.85;
}
body.vn-modern .vn-shippage__lede {
  font-family: var(--vn-font-serif);
  font-size: 17px;
  line-height: 1.65;
  color: var(--vn-fg-mute);
  max-width: 60ch;
  margin: 24px 0 0;
  font-style: italic;
}

/* ---------- STAT STRIP ---------- */
body.vn-modern .vn-shippage__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border: 1px solid var(--vn-hair);
  margin: 64px 0 96px;
}
body.vn-modern .vn-shippage__stat {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 24px 24px;
  border-right: 1px solid var(--vn-hair);
}
body.vn-modern .vn-shippage__stat:last-child { border-right: 0; }
body.vn-modern .vn-shippage__stat-label {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-shippage__stat-value {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 22px);
  letter-spacing: 0.02em;
  color: var(--vn-fg);
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

/* ---------- SECTION TWO-COLUMN SPREAD (DOMESTIC) ---------- */
body.vn-modern .vn-shippage__sec { margin: 96px 0; }
body.vn-modern .vn-shippage__sec-grid {
  display: grid;
  grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
  gap: 48px;
  align-items: start;
}
body.vn-modern .vn-shippage__sec-head {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
body.vn-modern .vn-shippage__sec-no {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-shippage__sec-title {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(28px, 3.6vw, 52px);
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--vn-fg);
  margin: 0;
}
body.vn-modern .vn-shippage__sec-title em {
  display: block;
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: 0.45em;
  text-transform: none;
  letter-spacing: 0;
  color: var(--vn-fg-mute);
  margin-top: 8px;
}
body.vn-modern .vn-shippage__sec-lede {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--vn-fg-mute);
  margin: 8px 0 0;
}

/* ---------- INFO ROWS ---------- */
body.vn-modern .vn-shippage__sec-body { display: flex; flex-direction: column; gap: 0; }
body.vn-modern .vn-shippage__row {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 24px;
  padding: 24px 0;
  border-bottom: 1px solid var(--vn-hair);
}
/* Scope the no-top-padding rule to the domestic body only. The overseas
   grid is wrapped in a bordered container so its first row needs padding
   to clear the top hairline. */
body.vn-modern .vn-shippage__sec-body > .vn-shippage__row:first-child { padding-top: 0; }
body.vn-modern .vn-shippage__sec-body > .vn-shippage__row:last-child { border-bottom: 0; }
body.vn-modern .vn-shippage__row-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  color: var(--vn-fg);
  flex-shrink: 0;
}
body.vn-modern .vn-shippage__row-body { display: flex; flex-direction: column; gap: 4px; }
body.vn-modern .vn-shippage__row-label {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-shippage__row-value {
  font-family: var(--vn-font-display);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.02em;
  color: var(--vn-fg);
  text-transform: uppercase;
}
body.vn-modern .vn-shippage__row-note {
  font-family: var(--vn-font-body), var(--vn-font-body-jp);
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--vn-fg-mute);
  margin: 4px 0 0;
}

/* ---------- OVERSEAS — full-bleed feature ---------- */
body.vn-modern .vn-shippage__overseas {
  position: relative;
  padding: 96px 0;
  margin: 96px 0;
  background: var(--vn-bg-subtle);
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
}
body.vn-modern .vn-shippage__map {
  position: absolute;
  inset: 0;
  pointer-events: none;
  color: var(--vn-fg);
  opacity: 0.55;
}
body.vn-modern .vn-shippage__map-svg { width: 100%; height: 100%; }
body.vn-modern .vn-shippage__overseas-inner {
  position: relative;
  z-index: 1;
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 var(--vn-container-pad-desktop);
}
body.vn-modern .vn-shippage__sec-head--centered {
  align-items: center;
  text-align: center;
}
body.vn-modern .vn-shippage__sec-head--centered .vn-shippage__sec-title {
  text-wrap: balance;
}
body.vn-modern .vn-shippage__country-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  margin: 56px 0;
  padding: 32px 24px;
  background: var(--vn-bg);
  border: 1px solid var(--vn-hair);
  text-align: center;
}
body.vn-modern .vn-shippage__country-num {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(56px, 8vw, 96px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--vn-fg);
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-shippage__country-label {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-shippage__os-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0 32px;
  background: var(--vn-bg);
  border: 1px solid var(--vn-hair);
}
body.vn-modern .vn-shippage__row--overseas {
  padding: 24px 24px;
  border-bottom: 1px solid var(--vn-hair);
}
body.vn-modern .vn-shippage__os-grid > .vn-shippage__row--overseas:nth-last-child(-n+2) {
  border-bottom: 0;
}
body.vn-modern .vn-shippage__row--overseas:nth-child(odd) { border-right: 1px solid var(--vn-hair); }

/* ---------- PULL QUOTE ---------- */
body.vn-modern .vn-shippage__quote-wrap {
  text-align: center;
  margin: 96px auto;
  max-width: 720px;
  padding: 0 var(--vn-container-pad-desktop);
}
body.vn-modern .vn-shippage__quote-eyebrow {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  display: inline-block;
  padding: 4px 10px;
  border: 1px solid var(--vn-hair);
}
body.vn-modern .vn-shippage__quote {
  font-family: var(--vn-font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: clamp(20px, 2.4vw, 28px);
  line-height: 1.5;
  color: var(--vn-fg);
  margin: 24px 0 0;
  padding: 0 24px;
  border-left: 0;
  text-wrap: balance;
}

/* ---------- CTA cards (mirrors payment page) ---------- */
body.vn-modern .vn-shippage__eyebrow {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
}
body.vn-modern .vn-shippage__cta {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 80px;
}
body.vn-modern .vn-shippage__cta-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px 32px;
  border: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  text-decoration: none;
  color: var(--vn-fg);
  overflow: hidden;
  transition: color 240ms var(--vn-ease), border-color 240ms var(--vn-ease);
}
body.vn-modern .vn-shippage__cta-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--vn-fg);
  transform: translateY(101%);
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
  z-index: 0;
}
body.vn-modern .vn-shippage__cta-card:hover {
  color: var(--vn-bg);
  border-color: var(--vn-fg);
}
body.vn-modern .vn-shippage__cta-card:hover::before { transform: translateY(0); }
body.vn-modern .vn-shippage__cta-card > * { position: relative; z-index: 1; }
body.vn-modern .vn-shippage__cta-eyebrow {
  font-family: var(--vn-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  opacity: 0.7;
}
body.vn-modern .vn-shippage__cta-title {
  font-family: var(--vn-font-display);
  font-weight: 700;
  font-size: clamp(20px, 2vw, 26px);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
body.vn-modern .vn-shippage__cta-arrow {
  position: absolute;
  right: 28px;
  top: 50%;
  transform: translateY(-50%);
  font-family: var(--vn-font-display);
  font-size: 24px;
  transition: transform 320ms cubic-bezier(.2,.8,.2,1);
}
body.vn-modern .vn-shippage__cta-card:hover .vn-shippage__cta-arrow {
  transform: translateY(-50%) translateX(6px);
}

/* ============================================================
   MOBILE
   ============================================================ */
@media (max-width: 768px) {
  body.vn-modern .vn-shippage {
    padding: 32px var(--vn-container-pad-mobile, 16px) 64px;
  }
  body.vn-modern .vn-shippage__title {
    font-size: clamp(36px, 11vw, 60px);
  }
  body.vn-modern .vn-shippage__title em { font-size: 0.55em; margin-top: 6px; }
  body.vn-modern .vn-shippage__hero { padding-bottom: 28px; margin-bottom: 36px; }

  body.vn-modern .vn-shippage__stats {
    grid-template-columns: repeat(2, 1fr);
    margin: 40px 0 56px;
  }
  body.vn-modern .vn-shippage__stat {
    padding: 18px 16px;
    border-right: 1px solid var(--vn-hair);
    border-bottom: 1px solid var(--vn-hair);
  }
  body.vn-modern .vn-shippage__stat:nth-child(2n) { border-right: 0; }
  body.vn-modern .vn-shippage__stat:nth-last-child(-n+2) { border-bottom: 0; }

  body.vn-modern .vn-shippage__sec { margin: 56px 0; }
  body.vn-modern .vn-shippage__sec-grid {
    grid-template-columns: 1fr;
    gap: 28px;
  }
  body.vn-modern .vn-shippage__sec-title {
    font-size: clamp(28px, 9vw, 44px);
  }

  body.vn-modern .vn-shippage__overseas {
    padding: 64px 0;
    margin: 56px 0;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
  }
  body.vn-modern .vn-shippage__overseas-inner {
    padding: 0 var(--vn-container-pad-mobile, 16px);
  }
  body.vn-modern .vn-shippage__country-banner { padding: 24px 18px; }
  body.vn-modern .vn-shippage__os-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  body.vn-modern .vn-shippage__row--overseas {
    border-right: 0 !important;
    border-bottom: 1px solid var(--vn-hair) !important;
  }
  body.vn-modern .vn-shippage__os-grid > .vn-shippage__row--overseas:last-child {
    border-bottom: 0 !important;
  }

  body.vn-modern .vn-shippage__quote-wrap { margin: 56px auto; padding: 0 var(--vn-container-pad-mobile, 16px); }
  body.vn-modern .vn-shippage__quote { padding: 0 4px; }

  body.vn-modern .vn-shippage__cta {
    grid-template-columns: 1fr;
    gap: 12px;
    margin-top: 48px;
  }
  body.vn-modern .vn-shippage__cta-card { padding: 22px 24px; }
}
/* END_SECTION:vn-modern-shipping */

/* START_SECTION:vn-modern-tape (INDEX:99) */
.vn-modern-tape {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(48px, 12vw, 180px);
  line-height: 0.85;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  text-align: center;
  /* Vertical padding driven by section settings via vn-section-padding;
     hardcoded value removed. */
  overflow: hidden;
  white-space: nowrap;
  text-wrap: nowrap;
  color: var(--vn-fg);
}
.vn-modern-tape em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
  letter-spacing: -0.01em;
}
/* END_SECTION:vn-modern-tape */

/* START_SECTION:vn-modern-themes (INDEX:100) */
.vn-modern-themes__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.vn-modern-themes__grid[data-blocks="3"] { grid-template-columns: repeat(3, 1fr); }
.vn-modern-themes__grid[data-blocks="2"] { grid-template-columns: repeat(2, 1fr); }
.vn-modern-themes__grid[data-blocks="1"] { grid-template-columns: 1fr; }
.vn-modern-theme-card {
  display: block;
  position: relative;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: var(--vn-bg-subtle);
  color: var(--vn-bg);
  text-decoration: none;
  transition: transform var(--vn-dur-slow) var(--vn-ease);
  isolation: isolate;
}
.vn-modern-theme-card:hover { transform: translateY(-4px); }
.vn-modern-theme-card__media { position: absolute; inset: 0; z-index: 0; }
.vn-modern-theme-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.vn-modern-theme-card__media .vn-card__placeholder { background: #1C1C1C; color: rgb(255 255 255 / 0.45); }
.vn-modern-theme-card::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, transparent 40%, rgb(28 28 28 / 0.7) 100%);
  z-index: 1;
}
.vn-modern-theme-card__copy { position: absolute; left: 18px; right: 18px; bottom: 18px; z-index: 2; }
.vn-modern-theme-card__nm {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-bottom: 8px;
}
.vn-modern-theme-card__h3 {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: 24px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin: 0 0 8px;
  text-wrap: balance;
}
.vn-modern-theme-card__h3 em {
  font-family: var(--vn-font-serif);
  font-weight: 400;
  font-style: italic;
  text-transform: none;
}
.vn-modern-theme-card__ct {
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.04em;
  opacity: 0.85;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) { .vn-modern-themes__grid { grid-template-columns: 1fr 1fr; } }
/* END_SECTION:vn-modern-themes */

/* START_SECTION:vn-modern-ticker (INDEX:101) */
.vn-modern-ticker {
  /* border-top removed to avoid stacking with the header's border-bottom
     above (which would render as a 2px doubled line). The previous section's
     border-bottom owns the upper divider; this section owns only its lower. */
  border-bottom: 1px solid var(--vn-hair);
  background: var(--vn-bg);
  overflow: hidden;
  height: 36px;
  display: flex;
  align-items: center;
  width: 100%;
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .vn-modern-ticker { height: 32px; }
  .vn-modern-ticker__item { padding: 0 16px; font-size: 10px; gap: 8px; letter-spacing: 0.10em; }
  .vn-modern-ticker__track { animation-duration: 45s; }
}
.vn-modern-ticker__track {
  display: flex;
  width: max-content;
  animation: vn-ticker-scroll 60s linear infinite;
  will-change: transform;
}
.vn-modern-ticker:hover .vn-modern-ticker__track,
.vn-modern-ticker:focus-within .vn-modern-ticker__track {
  animation-play-state: paused;
}
.vn-modern-ticker__row {
  display: flex;
  flex: 0 0 auto;
}
.vn-modern-ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 28px;
  font-family: var(--vn-font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--vn-fg);
  text-transform: uppercase;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.vn-modern-ticker__lbl { font-weight: 500; }
.vn-modern-ticker__sep { opacity: 0.4; }
.vn-modern-ticker__lot { color: var(--vn-fg-mute); }
.vn-modern-ticker__date { color: var(--vn-fg-mute); }
.vn-modern-ticker__era { color: var(--vn-fg-mute); }
.vn-modern-ticker__gap { width: 0; }

@keyframes vn-ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
  .vn-modern-ticker__track { animation: none; transform: none; }
}
/* END_SECTION:vn-modern-ticker */

/* START_SECTION:vn-modern-timeline (INDEX:102) */
body.vn-modern .vn-modern-timeline {
  /* Section padding handled by vn-section-padding inline vars */
}
body.vn-modern .vn-tl__rail {
  display: flex;
  gap: 12px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
  padding: 4px 0 12px;
  margin: 0 calc(var(--vn-container-pad-desktop, 32px) * -1);
  padding-left: var(--vn-container-pad-desktop, 32px);
  padding-right: var(--vn-container-pad-desktop, 32px);
}
body.vn-modern .vn-tl__rail::-webkit-scrollbar { display: none; }
body.vn-modern .vn-tl__pill {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  flex-shrink: 0;
  padding: 14px 22px;
  border: 1px solid var(--vn-hair);
  border-radius: 0;
  background: var(--vn-bg);
  color: var(--vn-fg);
  text-decoration: none;
  scroll-snap-align: start;
  transition: background 220ms var(--vn-ease), color 220ms var(--vn-ease);
}
body.vn-modern .vn-tl__pill:hover {
  background: var(--vn-fg);
  color: var(--vn-bg);
}
body.vn-modern .vn-tl__pill-label {
  font-family: var(--vn-font-display);
  font-weight: 800;
  font-size: clamp(18px, 1.8vw, 22px);
  letter-spacing: -0.005em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
body.vn-modern .vn-tl__pill-sub {
  font-family: var(--vn-font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--vn-fg-mute);
  transition: color 220ms var(--vn-ease);
}
body.vn-modern .vn-tl__pill:hover .vn-tl__pill-sub {
  color: rgba(255, 255, 255, 0.7);
}
@media (max-width: 768px) {
  body.vn-modern .vn-tl__rail {
    margin: 0 calc(var(--vn-container-pad-mobile, 16px) * -1);
    padding-left: var(--vn-container-pad-mobile, 16px);
    padding-right: var(--vn-container-pad-mobile, 16px);
  }
  body.vn-modern .vn-tl__pill { padding: 12px 18px; }
}
/* END_SECTION:vn-modern-timeline */