/* =============================================================================
   Victor Rose 8 — Signature Site
   The production direction: combines Prototype 01 "African Luxury" (restrained
   black/charcoal/ivory/gold palette, generous slow pacing, RML as the quiet
   confident parent brand) with Prototype 04 "Editorial Luxury" (oversized
   high-contrast display type, the product image visible immediately via an
   overlapping hero panel, asymmetric editorial story/serve sections). Order
   page stays plain and highly usable — no drama where a real order is placed.
   No prices anywhere: this is an order-request site, not a checkout.
   ============================================================================= */

@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:wght@300;400;500;600;700&display=swap");

:root {
  --vr-black: #0c0b09;
  --vr-charcoal: #17140f;
  --vr-ivory: #f6f1e6;
  --vr-ivory-dim: #ece2cd;
  --vr-paper: #fbf8f2;
  --vr-gold: #ab8a49;
  --vr-gold-soft: #c7a869;
  --vr-gold-deep: #86672f;
  --vr-line-dark: rgba(246, 241, 230, 0.16);
  --vr-line-light: rgba(12, 11, 9, 0.14);
  --vr-ink-muted: #5c5344;
  --vr-success: #3c6b4c;
  --vr-danger: #9c3b2c;
  --vr-font-display: "Bodoni Moda", "Times New Roman", Georgia, serif;
  --vr-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --vr-shadow: 0 18px 48px -20px rgba(12, 11, 9, 0.45);
  --vr-shadow-sm: 0 8px 20px -10px rgba(12, 11, 9, 0.3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  font-family: var(--vr-font-body);
  font-weight: 300;
  color: var(--vr-black);
  background: var(--vr-paper);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, .vr-display {
  font-family: var(--vr-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1;
  margin: 0;
}
p { margin: 0; line-height: 1.75; }
a { color: inherit; }
img { display: block; max-width: 100%; }

.vr-skip-link {
  position: absolute; left: -999px; top: 0;
  background: var(--vr-gold); color: var(--vr-black);
  padding: 0.85rem 1.5rem; z-index: 2000; font-weight: 700; text-decoration: none;
}
.vr-skip-link:focus { left: 0; }
:focus-visible { outline: 2px solid var(--vr-gold); outline-offset: 3px; }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.vr-eyebrow {
  display: inline-flex; align-items: center; gap: 0.6rem;
  font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase;
  font-weight: 600; color: var(--vr-gold-soft);
}
.vr-eyebrow::before { content: ""; display: inline-block; width: 28px; height: 1px; background: var(--vr-gold); }
.vr-eyebrow--dark { color: var(--vr-gold-deep); }
.vr-eyebrow--dark::before { background: var(--vr-gold-deep); }

/* ---------- Buttons ---------------------------------------------------- */
.vr-btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0.9rem 1.75rem;
  font-family: var(--vr-font-body); font-weight: 600; font-size: 0.82rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  border: 1px solid transparent; border-radius: 2px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}
.vr-btn--gold { background: var(--vr-gold); border-color: var(--vr-gold); color: var(--vr-black); }
.vr-btn--gold:hover, .vr-btn--gold:focus-visible { background: var(--vr-gold-deep); border-color: var(--vr-gold-deep); color: var(--vr-ivory); }
.vr-btn--line-dark { border: 1px solid rgba(246,241,230,0.55); color: var(--vr-ivory); background: transparent; }
.vr-btn--line-dark:hover, .vr-btn--line-dark:focus-visible { border-color: var(--vr-gold); color: var(--vr-gold-soft); }
.vr-btn--line-light { border: 1px solid rgba(12,11,9,0.35); color: var(--vr-black); background: transparent; }
.vr-btn--line-light:hover, .vr-btn--line-light:focus-visible { border-color: var(--vr-gold-deep); color: var(--vr-gold-deep); }
.vr-btn.is-disabled, .vr-btn[disabled], .vr-btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }

/* ---------- Order-type toggle -------------------------------------------- */
.vr-type-toggle { display: inline-flex; border: 1px solid var(--vr-line-dark); border-radius: 999px; padding: 3px; gap: 2px; }
.vr-type-toggle--light { border-color: var(--vr-line-light); }
.vr-type-toggle button {
  border: 0; background: transparent; color: rgba(246,241,230,0.75);
  font-weight: 600; font-size: 0.72rem; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.55rem 1.1rem; border-radius: 999px; cursor: pointer; min-height: 40px;
}
.vr-type-toggle--light button { color: var(--vr-ink-muted); }
.vr-type-toggle button.is-active { background: var(--vr-gold); color: var(--vr-black); }

/* ---------- Header (RML micro-strip + slim brand header) ---------------- */
.vr-microstrip { background: var(--vr-black); color: rgba(246,241,230,0.65); padding: 0.5rem 0; font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; }
.vr-microstrip .container { display: flex; align-items: center; justify-content: center; gap: 0.6rem; }
.vr-microstrip img { height: 12px; width: auto; opacity: 0.85; }

.vr-header { background: var(--vr-charcoal); color: var(--vr-ivory); position: sticky; top: 0; z-index: 1030; border-bottom: 1px solid var(--vr-line-dark); }
.vr-header__row { display: flex; align-items: center; justify-content: space-between; padding: 0.85rem 0; gap: 1rem; }
.vr-brand { display: flex; align-items: center; gap: 0.65rem; text-decoration: none; color: var(--vr-ivory); }
.vr-brand img { height: 38px; width: auto; }
.vr-brand span { font-family: var(--vr-font-display); font-size: 1.3rem; letter-spacing: 0.02em; }
.vr-nav { display: flex; align-items: center; gap: 0.25rem; }
.vr-nav a { color: rgba(246,241,230,0.8); text-decoration: none; font-weight: 500; font-size: 0.82rem; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.6rem 1rem; }
.vr-nav a:hover { color: var(--vr-gold-soft); }
.vr-header__actions { display: flex; align-items: center; gap: 0.75rem; }
.vr-burger { border: 1px solid var(--vr-line-dark); background: transparent; color: var(--vr-ivory); width: 46px; height: 46px; border-radius: 2px; }
.offcanvas.vr-offcanvas { background: var(--vr-charcoal); color: var(--vr-ivory); }
.vr-offcanvas .vr-nav { flex-direction: column; align-items: flex-start; gap: 0; }
.vr-offcanvas .vr-nav a { padding: 0.85rem 0; font-size: 1.05rem; }

/* ---------- Hero — bottle visible immediately, integrated side-by-side with
   the type on one continuous background (no separate overlapping panel). On
   mobile the bottle stacks above the type via `order`; on desktop they sit
   left/right in the same frame so nothing reads as a box dropped on a photo. */
.vr-hero {
  position: relative;
  background: radial-gradient(140% 100% at 78% 20%, #2a2117 0%, var(--vr-charcoal) 45%, var(--vr-black) 100%);
  padding: 2.5rem 0;
  overflow: hidden;
}
.vr-hero__grid {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  max-width: 1320px;
  margin: 0 auto;
  padding: 0 1.25rem;
}
.vr-hero__art { order: -1; display: flex; justify-content: center; min-width: 0; }
.vr-hero__art img {
  /* a true alpha-transparent cutout — no background of its own, so it
     blends straight into the hero's dark background with no mask needed. */
  max-height: 46vh; width: auto; max-width: 100%;
  filter: drop-shadow(0 30px 50px rgba(0,0,0,0.5));
}
.vr-hero__copy { order: 2; color: var(--vr-ivory); text-align: center; padding: 0 0.5rem; }
.vr-hero__h1 { font-size: clamp(1.9rem, 9.5vw, 3.6rem); text-transform: uppercase; color: var(--vr-ivory); white-space: nowrap; }
.vr-hero__meta { font-size: 0.92rem; letter-spacing: 0.05em; color: rgba(246,241,230,0.8); margin: 0.9rem 0 0.4rem; }
.vr-hero__tagline { font-family: var(--vr-font-display); font-style: italic; font-weight: 600; font-size: clamp(1.35rem, 4.2vw, 1.9rem); letter-spacing: 0.01em; color: var(--vr-gold-soft); text-shadow: 0 2px 18px rgba(199, 168, 105, 0.35); margin: 0.65rem 0 1.85rem; }
.vr-hero__ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }
.vr-hero .vr-eyebrow { justify-content: center; }

@media (min-width: 992px) {
  .vr-hero { padding: 0; }
  .vr-hero__grid {
    flex-direction: row; align-items: center; justify-content: space-between;
    min-height: 84vh; gap: 2rem;
  }
  .vr-hero__art { order: 2; flex: 0 1 46%; }
  .vr-hero__art img { max-height: 74vh; }
  .vr-hero__copy { order: 1; flex: 0 1 50%; text-align: left; padding: 0; }
  .vr-hero__h1 { font-size: clamp(3rem, 6vw, 4.75rem); }
  .vr-hero__ctas { justify-content: flex-start; }
  .vr-hero .vr-eyebrow { justify-content: flex-start; }
}
@media (min-width: 1300px) {
  .vr-hero__grid { padding: 0 3vw; }
  .vr-hero__h1 { font-size: clamp(3.5rem, 5.5vw, 5.5rem); }
}

/* ---------- Provenance band — full-bleed photo + scrim + centered statement */
.vr-band {
  position: relative; min-height: 55vh; display: flex; align-items: center;
  justify-content: center; overflow: hidden; background: var(--vr-black);
}
.vr-band__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 35%; opacity: 0.92; }
.vr-band__scrim { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(12,11,9,0.78) 0%, rgba(12,11,9,0.2) 55%, rgba(12,11,9,0.55) 100%); }
.vr-band__content { position: relative; z-index: 2; text-align: center; color: var(--vr-ivory); max-width: 640px; padding: 2rem 1.25rem; }
.vr-band h2 { font-size: clamp(0.9rem, calc(5.7vw - 2.5px), 2.1rem); margin: 0.75rem 0; white-space: nowrap; }
.vr-band p { color: rgba(246,241,230,0.9); font-size: 1.02rem; font-family: var(--vr-font-body); }

/* ---------- Section rhythm ------------------------------------------------ */
section { padding: 6rem 0; }
@media (max-width: 767.98px) { section { padding: 4rem 0; } }
.vr-section-head { max-width: 640px; margin: 0 auto 3rem; text-align: center; }
.vr-section-head h2 { font-size: clamp(2.1rem, 4.5vw, 3rem); margin: 0.75rem 0; }
.vr-section-head p { color: var(--vr-ink-muted); font-size: 1.02rem; font-family: var(--vr-font-body); }

/* ---------- Full-bleed typographic statement ------------------------------ */
.vr-statement { background: var(--vr-black); color: var(--vr-ivory); padding: clamp(3.5rem, 12vw, 7rem) 1.25rem; display: flex; justify-content: center; text-align: center; }
.vr-statement__inner { max-width: 780px; }
.vr-statement__text { font-family: var(--vr-font-display); font-weight: 700; font-style: italic; font-size: clamp(1rem, calc(6.8vw - 3px), 3.3rem); line-height: 1.15; letter-spacing: -0.01em; color: var(--vr-gold-soft); white-space: nowrap; }
.vr-statement__sub { font-family: var(--vr-font-body); font-size: clamp(0.95rem, 1.8vw, 1.1rem); font-weight: 300; color: rgba(246,241,230,0.7); line-height: 1.7; margin-top: 1.5rem; }
.vr-statement__sub strong { font-weight: 600; color: var(--vr-ivory); }

/* ---------- Story (asymmetric overlap, Prototype 04's grid technique) ----- */
.vr-story { background: var(--vr-paper); padding: clamp(3.5rem, 8vw, 6.5rem) 0; }
.vr-story__grid { max-width: 1320px; margin: 0 auto; padding: 0 1.25rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.vr-story__grid > * { min-width: 0; }
.vr-story__img img { width: 100%; height: auto; box-shadow: var(--vr-shadow); }
.vr-story__copy h2 { font-size: clamp(2rem, 4.5vw, 2.9rem); margin-bottom: 1.1rem; }
.vr-story__copy p { color: #45392a; font-size: 1.03rem; font-family: var(--vr-font-body); }
.vr-story__copy p + p { margin-top: 1rem; }
.vr-story__pull { font-family: var(--vr-font-display); font-style: italic; font-size: 1.4rem; color: var(--vr-gold-deep); margin: 1.5rem 0; line-height: 1.4; }
.vr-story__subhead { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--vr-gold-deep); margin-top: 1.75rem !important; margin-bottom: 0.4rem; }
.vr-story__placeholder { font-family: var(--vr-font-body); font-size: 0.85rem; color: var(--vr-ink-muted); background: var(--vr-ivory-dim); border: 1px dashed rgba(134,103,47,0.45); padding: 1rem 1.25rem; margin-top: 1.25rem; }
.vr-story__credit { display: flex; align-items: center; gap: 0.6rem; margin-top: 1.75rem; padding-top: 1.25rem; border-top: 1px solid var(--vr-line-light); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--vr-ink-muted); }
.vr-story__credit img { height: 16px; width: auto; opacity: 0.85; }
@media (min-width: 992px) {
  .vr-story__grid { grid-template-columns: repeat(12, 1fr); align-items: stretch; }
  .vr-story__img { grid-column: 1 / 8; grid-row: 1; }
  .vr-story__img img { position: sticky; top: 96px; width: 100%; max-height: calc(100vh - 130px); object-fit: cover; }
  .vr-story__copy { grid-column: 6 / 13; grid-row: 1; background: var(--vr-paper); padding: 2.75rem; margin-left: 1rem; position: relative; z-index: 2; box-shadow: -2px 0 0 var(--vr-gold); }
}

/* ---------- Products (renamed from "Shop" — a lineup, more to come) ------- */
.vr-products-section { background: var(--vr-ivory-dim); scroll-margin-top: 96px; }
.vr-products-section__toggle-wrap { display: flex; justify-content: center; margin-top: 1.5rem; }

.vr-products {
  display: grid; grid-template-columns: 1fr; gap: 2rem;
  max-width: 980px; margin: 0 auto;
}
@media (min-width: 768px) { .vr-products { grid-template-columns: 1fr 1fr; gap: 2.25rem; } }

.vr-card { background: var(--vr-paper); border: 1px solid var(--vr-line-light); padding: 2rem 1.75rem 1.75rem; display: flex; flex-direction: column; gap: 1.1rem; box-shadow: var(--vr-shadow-sm); }
.vr-card__img { display: flex; justify-content: center; align-items: center; min-height: 260px; }
.vr-card__img img { max-height: 300px; width: auto; }
.vr-card__title { text-align: center; }
.vr-card__title [data-field="name"] { display: block; font-family: var(--vr-font-display); font-size: 1.55rem; }
.vr-card__title [data-field="size"] { display: block; font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vr-gold-deep); font-weight: 600; margin-top: 0.15rem; }
.vr-card [data-field="note"] { display: block; text-align: center; font-size: 0.74rem; color: var(--vr-ink-muted); text-transform: uppercase; letter-spacing: 0.06em; min-height: 1.2em; }

.vr-qty { display: flex; align-items: stretch; border: 1px solid var(--vr-black); overflow: hidden; align-self: center; width: 100%; max-width: 220px; }
.vr-qty button { width: 52px; border: 0; background: var(--vr-ivory-dim); font-size: 1.25rem; font-weight: 600; cursor: pointer; min-height: 52px; color: var(--vr-black); }
.vr-qty button:hover { background: var(--vr-gold); }
.vr-qty input { flex: 1; border: 0; border-left: 1px solid var(--vr-black); border-right: 1px solid var(--vr-black); text-align: center; font-size: 1.05rem; font-weight: 700; min-width: 0; background: var(--vr-paper); }

.vr-cart-bar {
  position: sticky; bottom: 0; z-index: 1020; background: var(--vr-black); color: var(--vr-ivory);
  padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  margin-top: 2.5rem; box-shadow: 0 -14px 34px rgba(0,0,0,0.3);
  max-width: 980px; margin-left: auto; margin-right: auto;
}
.vr-cart-bar__info { font-size: 0.85rem; }
.vr-cart-bar__info strong { font-size: 1.2rem; display: block; font-family: var(--vr-font-display); color: var(--vr-gold-soft); }

/* ---------- Serve (asymmetric, reversed) ----------------------------------- */
.vr-serve { padding: clamp(3.5rem, 8vw, 6.5rem) 1.25rem; background: var(--vr-ivory-dim); }
.vr-serve__grid { max-width: 1320px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 2.5rem; }
.vr-serve__grid > * { min-width: 0; }
.vr-serve__copy h2 { font-size: clamp(1.9rem, 4vw, 2.6rem); margin-bottom: 1.1rem; }
.vr-serve__copy p { color: #45392a; font-size: 1.02rem; font-family: var(--vr-font-body); }
.vr-serve__img img { width: 100%; height: auto; box-shadow: var(--vr-shadow); }
@media (min-width: 992px) {
  .vr-serve__grid { grid-template-columns: repeat(12, 1fr); align-items: center; }
  .vr-serve__copy { grid-column: 1 / 7; grid-row: 1; padding-right: 2rem; position: relative; z-index: 2; }
  .vr-serve__img { grid-column: 6 / 13; grid-row: 1; margin-top: 2.5rem; }
}

/* ---------- Footer ---------------------------------------------------------- */
.vr-footer { background: var(--vr-black); color: rgba(246,241,230,0.75); padding: 4.5rem 0 2rem; }
.vr-footer__brand { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; }
.vr-footer__brand img { height: 26px; }
.vr-footer p, .vr-footer li { font-size: 0.88rem; line-height: 1.75; font-family: var(--vr-font-body); }
.vr-footer h3 { font-size: 0.72rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--vr-gold-soft); margin-bottom: 1rem; font-family: var(--vr-font-body); }
.vr-footer ul { list-style: none; padding: 0; margin: 0; }
.vr-footer a { text-decoration: none; color: inherit; }
.vr-footer a:hover { color: var(--vr-gold-soft); }
.vr-footer__bottom { border-top: 1px solid var(--vr-line-dark); margin-top: 3rem; padding-top: 1.5rem; font-size: 0.74rem; color: rgba(246,241,230,0.45); }
.vr-responsible { font-size: 0.76rem; color: rgba(246,241,230,0.5); margin-top: 0.6rem; }

/* ============================================================================
   ORDER PAGE — plain, conventional, highly usable. No editorial drama here.
   ============================================================================ */
.vr-order-hero { background: var(--vr-charcoal); color: var(--vr-ivory); padding: 2.5rem 0 2.25rem; }
.vr-order-hero .container { text-align: center; }
.vr-order-hero h1 { font-size: clamp(1.9rem, 5vw, 2.7rem); }
.vr-order-hero p { font-size: 0.92rem; color: rgba(246,241,230,0.8); margin-top: 0.5rem; font-family: var(--vr-font-body); }
.vr-order-hero a { color: var(--vr-gold-soft); text-decoration: underline; }
.vr-order-hero__toggle { display: inline-flex; margin-top: 1.25rem; }

.vr-order-main { padding: 3rem 0 6rem; background: var(--vr-paper); }
.vr-order-grid { display: grid; grid-template-columns: 1fr; gap: 2.25rem; }
@media (min-width: 992px) { .vr-order-grid { grid-template-columns: 0.9fr 1.15fr; } }

.vr-summary-card { background: #fff; border: 1px solid var(--vr-line-light); padding: 1.75rem; box-shadow: var(--vr-shadow-sm); height: fit-content; }
@media (min-width: 992px) { .vr-summary-card { position: sticky; top: 96px; } }
.vr-summary-card h2 { font-size: 1.3rem; margin-bottom: 1.1rem; }
.vr-order-line { display: grid; grid-template-columns: 1fr auto; gap: 0.75rem; align-items: center; padding: 0.75rem 0; border-bottom: 1px solid var(--vr-line-light); font-size: 0.94rem; font-family: var(--vr-font-body); }
.vr-order-line [data-line-qty]::before { content: "× "; }
.vr-order-line [data-line-qty] { font-weight: 700; }
[data-order-empty-state] { color: var(--vr-ink-muted); font-size: 0.92rem; padding: 1rem 0; font-family: var(--vr-font-body); }
[data-order-empty-state] a { color: var(--vr-gold-deep); }

.vr-payment-notice { background: var(--vr-ivory-dim); border: 1px solid rgba(134,103,47,0.3); padding: 1rem 1.1rem; font-size: 0.86rem; margin-top: 1.5rem; color: #453a2a; font-family: var(--vr-font-body); }

.vr-form-card { background: #fff; border: 1px solid var(--vr-line-light); padding: 2rem; box-shadow: var(--vr-shadow-sm); }
.vr-form-card h2 { font-size: 1.3rem; margin-bottom: 0.25rem; }
.vr-form-hint { color: var(--vr-ink-muted); font-size: 0.88rem; margin-bottom: 1.25rem; font-family: var(--vr-font-body); }
.vr-form-card .form-label { font-family: var(--vr-font-body); font-weight: 600; font-size: 0.82rem; letter-spacing: 0.03em; color: var(--vr-black); }
.vr-form-card .form-control, .vr-form-card .form-select { min-height: 48px; border-radius: 2px; border: 1px solid var(--vr-line-light); background: var(--vr-paper); font-family: var(--vr-font-body); }
.vr-form-card .form-control:focus, .vr-form-card .form-select:focus { border-color: var(--vr-gold); box-shadow: 0 0 0 0.2rem rgba(171,138,73,0.22); }
.is-invalid { border-color: var(--vr-danger) !important; }
[data-error-for] { color: var(--vr-danger); font-size: 0.78rem; display: block; margin-top: 0.3rem; font-family: var(--vr-font-body); }
[data-form-error-summary] { background: #f7e8e3; border: 1px solid var(--vr-danger); color: #6f2a1c; border-radius: 2px; padding: 0.9rem 1.1rem; margin-bottom: 1.4rem; font-size: 0.88rem; font-family: var(--vr-font-body); }

.vr-place-order-btn { width: 100%; font-size: 0.9rem; padding: 1.1rem; margin-top: 1.5rem; }
.vr-form-note { text-align: center; margin-top: 0.75rem; font-size: 0.78rem; color: var(--vr-ink-muted); font-family: var(--vr-font-body); }

[data-confirmation] { background: #eef4ef; border: 1px solid var(--vr-success); padding: 2.5rem 2rem; text-align: center; }
[data-confirmation] h2 { font-size: 1.4rem; margin-bottom: 0.75rem; }
[data-confirmation] p { max-width: 480px; margin: 0 auto 0.75rem; font-family: var(--vr-font-body); font-size: 0.94rem; color: #2f4436; }
[data-confirmation] .vr-check { width: 56px; height: 56px; border-radius: 50%; background: var(--vr-success); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto 1.25rem; }
[data-confirmation-order-id] { font-weight: 700; font-family: var(--vr-font-display); font-size: 1.2rem; }
[data-confirmation] .vr-payment-notice { text-align: left; }
[data-confirmation] .vr-btn { margin-top: 0.75rem; }

.vr-mobile-order-bar { display: none; position: sticky; bottom: 0; z-index: 1020; background: var(--vr-black); color: var(--vr-ivory); padding: 0.9rem 1.1rem; align-items: center; justify-content: space-between; gap: 1rem; box-shadow: 0 -12px 28px rgba(0,0,0,0.3); }
@media (max-width: 991.98px) { .vr-mobile-order-bar { display: flex; } .vr-summary-card { position: static; } }
.vr-mobile-order-bar__label { font-size: 0.72rem; opacity: 0.75; font-family: var(--vr-font-body); }
.vr-mobile-order-bar strong { font-family: var(--vr-font-display); font-size: 1.2rem; color: var(--vr-gold-soft); }