/* ============================================================
   VESANNE — Sylius shop chrome (dark "Ombre & Champagne" palette)
   Styles the storefront pages the editorial export has no design for
   (auth / account / cart / checkout / contact / errors) so they read as
   Vesanne. The export's own pages (home / collection / PDP / atelier / maison /
   account dashboard) are styled by vesanne.css + vesanne-editorial.css — this
   sheet does NOT restyle those. Loaded after vesanne.css.

   The shop-page rules below are ported from the Furéllea/MarcoVarni shop chrome
   and recoloured to the Vesanne dark palette via the token aliases here: the
   ported rules reference --vs-marble/--vs-wine/--vs-gold/--vs-cream/--vs-line,
   which we map onto Vesanne's noir / pearl / champagne / ivory tokens (defined
   in vesanne.css). --vs-ink/-soft/-faint, --vs-ease, --vs-sans, --vs-serif are
   already Vesanne tokens and are intentionally NOT re-aliased.
   ============================================================ */
:root {
  --vs-marble: var(--vs-noir);
  --vs-marble-raised: var(--vs-noir-raised);
  --vs-marble-deep: var(--vs-pearl);
  --vs-wine: var(--vs-champagne-bright);
  --vs-cream: var(--vs-ivory);
  --vs-cream-soft: var(--vs-ivory-soft);
  --vs-cream-faint: var(--vs-ivory-faint);
  --vs-gold: var(--vs-champagne);
  --vs-gold-bright: var(--vs-champagne-bright);
  --vs-gold-deep: var(--vs-champagne);
  --vs-gold-faint: var(--vs-champagne-faint);
  --vs-gold-line: var(--vs-champagne-line);
  --vs-line: var(--vs-noir-line);
  --vs-line-soft: var(--vs-noir-line-soft);
}

/* ---- Fixed-header clearance ----
   vesanne.css keeps .vs-header position:fixed on every route; the export pages
   clear it with .vs-pagehead top padding. Auth + error pages have no pagehead,
   so give them their own header clearance. (cart/checkout/contact/dashboard
   already carry a .vs-pagehead.) */
.vs-auth, .vs-error, .vs-shop-page { padding-top: clamp(96px, 12vh, 140px); }

/* ---- Sylius core beats section-inherited heading colour on dark sections.
   The vendor shop stylesheet sets h1..h6{color:#1a1a1a}; force headings to
   inherit so .vs-display over the dark maison bg stays ivory. ---- */
.vs-display, .vs-panel__title, .vs-empty__title, .vs-auth__head .vs-display { color: inherit; }
/* The editorial hero/pagehead display headings (h1) have no explicit base colour,
   so the vendor h1 rule paints them near-black — invisible on the dark scrim.
   Force ivory (their `em` stays champagne via vesanne-editorial.css). */
.vse-hero-display, .vse-pagehead-display { color: var(--vs-ivory); }
/* Comprehensive: the vendor h1..h6{color:#1a1a1a} also hits plain section
   headings (e.g. the Maison "protocol" step <h3>s, chain/step titles) that rely
   on inheriting the section's ivory. Reset every heading inside the storefront
   main to inherit; explicit-colour heading classes (display, em→champagne) keep
   their higher specificity and still win. */
main h1, main h2, main h3, main h4, main h5, main h6 { color: inherit; }

/* ---- Inactive locale link (matches the .vs-lang button look in vesanne.css) ---- */
.vs-lang__link { color: var(--vs-ivory-faint); transition: color 200ms var(--vs-ease); }
.vs-lang__link:hover { color: var(--vs-champagne-bright); }

/* ============================================================
   SHOP PAGES — auth / account / cart / checkout / contact / errors
   Marco Varni override pages (login, register, account, cart, …) render
   self-contained mv markup; this layer styles the shared affordances
   (form fields, panels, tables, alerts, badges) plus each page's chrome.
   Tokens come from marcovarni.css (:root --vs-*).
   ============================================================ */

/* ---- Shared page shell ---- */
.vs-shop-page { padding-bottom: clamp(64px, 10vh, 120px); }
.vs-shop-page__head { display: grid; gap: 16px; }
.vs-shop-page__lead { max-width: 60ch; }

/* ---- Generic panel (cards, account sections, summaries) ---- */
.vs-panel {
  background: var(--vs-marble-raised);
  border: 1px solid var(--vs-line-soft);
  padding: clamp(24px, 3vw, 34px);
  display: grid; gap: 20px; align-content: start;
}
.vs-panel__title {
  font-family: var(--vs-serif); font-size: 21px; font-weight: 500; line-height: 1.2;
}
.vs-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }

/* ---- Form fields (extends .vs-field from marcovarni.css) ---- */
.vs-field textarea {
  background: var(--vs-marble); border: 1px solid var(--vs-line); color: var(--vs-ink);
  font-family: var(--vs-sans); font-size: 14.5px; font-weight: 400; line-height: 1.6;
  padding: 13px 14px; resize: vertical; min-height: 120px;
  transition: border-color 200ms var(--vs-ease);
}
.vs-field textarea:focus { outline: none; border-color: var(--vs-gold); }
.vs-field--error input, .vs-field--error select, .vs-field--error textarea { border-color: #c0392b; }
.vs-field__hint { font-size: 12px; color: var(--vs-ink-faint); font-weight: 400; letter-spacing: 0; }
.vs-field__error { font-size: 12.5px; color: #c0392b; font-weight: 500; letter-spacing: 0; margin: 0; }
.vs-field__required { color: var(--vs-gold-deep); }

/* Password reveal — input + inline toggle button */
.vs-password { position: relative; display: flex; }
.vs-password input { flex: 1; padding-right: 46px; }
.vs-password__toggle {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center;
  color: var(--vs-ink-faint); transition: color 200ms var(--vs-ease);
}
.vs-password__toggle:hover { color: var(--vs-gold-deep); }
.vs-password__toggle svg { width: 18px; height: 18px; }
.vs-password__toggle .vs-password__eye-off { display: none; }
.vs-password__toggle[aria-pressed="true"] .vs-password__eye-on { display: none; }
.vs-password__toggle[aria-pressed="true"] .vs-password__eye-off { display: block; }

/* Inline check + label row */
.vs-check { display: flex; align-items: flex-start; gap: 10px; font-size: 13.5px; color: var(--vs-ink-soft); }
.vs-check input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--vs-gold); flex: none; }
.vs-check label { cursor: pointer; }

/* Two-column field grid */
.vs-form-grid { display: grid; gap: 18px; }
.vs-form-grid--2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 560px) { .vs-form-grid--2 { grid-template-columns: 1fr; } }

/* ---- form_widget() fallback (address book, checkout — Sylius form theme markup) ----
   These pages render Symfony/Sylius form widgets we don't hand-author cell by cell.
   Style the generated Bootstrap-ish markup so it reads as Marco Varni. */
.vs-formwidget { display: grid; gap: 16px; }
.vs-formwidget .form-group,
.vs-formwidget [class*="mb-"] { display: grid; gap: 7px; margin: 0; }
.vs-formwidget label,
.vs-formwidget .form-label {
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--vs-ink-faint);
}
.vs-formwidget input:not([type="checkbox"]):not([type="radio"]),
.vs-formwidget select,
.vs-formwidget textarea,
.vs-formwidget .form-control,
.vs-formwidget .form-select {
  width: 100%; background: var(--vs-marble); border: 1px solid var(--vs-line); border-radius: 0;
  color: var(--vs-ink); font-family: var(--vs-sans); font-size: 14.5px; font-weight: 400;
  padding: 13px 14px; transition: border-color 200ms var(--vs-ease);
}
.vs-formwidget input:focus, .vs-formwidget select:focus, .vs-formwidget textarea:focus,
.vs-formwidget .form-control:focus, .vs-formwidget .form-select:focus {
  outline: none; border-color: var(--vs-gold); box-shadow: none;
}
.vs-formwidget .form-check { display: flex; align-items: center; gap: 10px; }
.vs-formwidget .form-check input { width: 16px; height: 16px; accent-color: var(--vs-gold); }
.vs-formwidget .form-check label { letter-spacing: 0; text-transform: none; font-size: 13.5px; color: var(--vs-ink-soft); }
.vs-formwidget .invalid-feedback, .vs-formwidget .form-error-message {
  display: block; font-size: 12.5px; color: #c0392b; font-weight: 500;
}
.vs-formwidget legend, .vs-formwidget .col-form-label {
  font-family: var(--vs-serif); font-size: 17px; font-weight: 500; color: var(--vs-ink);
  text-transform: none; letter-spacing: 0; margin-bottom: 8px;
}

/* ---- Alerts ---- */
.vs-alert {
  border: 1px solid var(--vs-gold-line); border-left-width: 3px;
  background: var(--vs-marble-raised); padding: 14px 18px;
  font-size: 13.5px; line-height: 1.6; color: var(--vs-ink-soft);
}
.vs-alert--danger { border-color: #c0392b; background: rgba(192, 57, 43, 0.06); color: #8e2c22; }
.vs-alert--success { border-color: var(--vs-gold); background: var(--vs-gold-faint); color: var(--vs-gold-deep); }
.vs-alert--info { border-color: var(--vs-gold-line); }
.vs-alert strong { font-weight: 600; }

/* ---- Vendor Bootstrap alerts (flash messages + the empty-cart notice render
   via Sylius hooks we don't hand-author) — re-skin off the default blue/green
   so they read as Marco Varni instead of stock Bootstrap. ---- */
.alert {
  border: 1px solid var(--vs-gold-line); border-left-width: 3px; border-radius: 0;
  background: var(--vs-marble-raised); color: var(--vs-ink-soft);
  font-family: var(--vs-sans); font-size: 13.5px; line-height: 1.6; padding: 14px 18px;
}
.alert-info, .alert-primary, .alert-secondary, .alert-light, .alert-dark {
  background: var(--vs-marble-raised); border-color: var(--vs-gold-line); color: var(--vs-ink-soft);
}
.alert-success { background: var(--vs-gold-faint); border-color: var(--vs-gold); color: var(--vs-gold-deep); }
.alert-warning { background: var(--vs-gold-faint); border-color: #b8860b; color: #8a6608; }
.alert-danger { background: rgba(192, 57, 43, 0.06); border-color: #c0392b; color: #8e2c22; }
.alert .alert-link, .alert a { color: var(--vs-gold-deep); }

/* ---- Badges ---- */
.vs-badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px;
  border: 1px solid var(--vs-gold-line);
  font-size: 9.5px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--vs-gold-deep); white-space: nowrap;
}
.vs-badge--success { border-color: var(--vs-gold); background: var(--vs-gold-faint); color: var(--vs-gold-deep); }
.vs-badge--warning { border-color: #b8860b; color: #8a6608; }
.vs-badge--info { border-color: var(--vs-wine); color: var(--vs-wine); }
.vs-badge--danger { border-color: #c0392b; color: #a4291e; }

/* ---- Empty state ---- */
.vs-empty {
  border: 1px solid var(--vs-line-soft); padding: clamp(40px, 6vw, 72px) 28px;
  text-align: center; display: grid; gap: 16px; justify-items: center;
}
.vs-empty__title { font-family: var(--vs-serif); font-size: 26px; font-weight: 500; }
.vs-empty__text { color: var(--vs-ink-soft); font-size: 14.5px; max-width: 44ch; }

/* ---- Definition list (dashboard profile) ---- */
.vs-deflist { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 28px; margin: 0; }
.vs-deflist dt { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vs-ink-faint); margin-bottom: 4px; }
.vs-deflist dd { margin: 0; font-size: 15px; color: var(--vs-ink); }
@media (max-width: 560px) { .vs-deflist { grid-template-columns: 1fr; } }

/* ============================================================
   AUTH — login / register / password
   ============================================================ */
.vs-auth { padding-block: clamp(48px, 8vh, 96px); }
.vs-auth__inner { display: grid; place-items: center; }
.vs-auth__card {
  width: 100%; max-width: 460px;
  background: var(--vs-marble-raised); border: 1px solid var(--vs-line-soft);
  padding: clamp(30px, 4vw, 46px); display: grid; gap: 26px;
}
.vs-auth__card--wide { max-width: 580px; }
.vs-auth__head { display: grid; gap: 12px; text-align: center; justify-items: center; }
.vs-auth__head .vs-display { font-size: clamp(28px, 3.2vw, 38px); }
.vs-auth__head .vs-eyebrow { color: var(--vs-gold-deep); }
.vs-auth__form { display: grid; gap: 18px; }
.vs-auth__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.vs-auth__link { font-size: 12.5px; color: var(--vs-gold-deep); border-bottom: 1px solid var(--vs-gold-line); padding-bottom: 2px; transition: color 200ms var(--vs-ease); }
.vs-auth__link:hover { color: var(--vs-gold); }
.vs-auth__footer { text-align: center; font-size: 13.5px; color: var(--vs-ink-soft); padding-top: 8px; border-top: 1px solid var(--vs-line-soft); }
.vs-auth__footer a { color: var(--vs-gold-deep); border-bottom: 1px solid var(--vs-gold-line); padding-bottom: 1px; }
.vs-auth__footer a:hover { color: var(--vs-gold); }
.vs-auth__actions { display: grid; gap: 12px; }

/* ============================================================
   ACCOUNT — two-column shell (sidebar nav + main)
   ============================================================ */
.vs-account { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.vs-account__nav { display: grid; gap: 2px; align-content: start; position: sticky; top: 110px; }
.vs-account__nav-title { font-size: 10px; font-weight: 500; letter-spacing: 0.26em; text-transform: uppercase; color: var(--vs-gold-deep); margin-bottom: 12px; }
.vs-account__link {
  padding: 12px 14px; font-size: 13px; font-weight: 500; letter-spacing: 0.06em;
  color: var(--vs-ink-soft); border-left: 2px solid transparent;
  transition: color 200ms var(--vs-ease), background 200ms var(--vs-ease), border-color 200ms var(--vs-ease);
}
.vs-account__link:hover { color: var(--vs-ink); background: var(--vs-marble-raised); }
.vs-account__link[aria-current="page"] { color: var(--vs-gold-deep); border-left-color: var(--vs-gold); background: var(--vs-marble-raised); }
.vs-account__divider { height: 1px; background: var(--vs-line-soft); margin: 12px 14px; }
.vs-account__main { display: grid; gap: 24px; align-content: start; min-width: 0; }
.vs-account__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.vs-account__head h1 { font-family: var(--vs-serif); font-size: clamp(28px, 3.2vw, 40px); font-weight: 500; line-height: 1.1; }
@media (max-width: 880px) {
  .vs-account { grid-template-columns: 1fr; }
  .vs-account__nav { position: static; grid-auto-flow: column; grid-auto-columns: max-content; overflow-x: auto; gap: 4px; padding-bottom: 4px; }
  .vs-account__nav-title { display: none; }
  .vs-account__link { border-left: none; border-bottom: 2px solid transparent; white-space: nowrap; }
  .vs-account__link[aria-current="page"] { border-left: none; border-bottom-color: var(--vs-gold); }
  .vs-account__divider { display: none; }
}

/* ---- Address cards ---- */
.vs-address-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.vs-address { font-style: normal; line-height: 1.6; font-size: 14.5px; color: var(--vs-ink-soft); }
.vs-address strong { color: var(--vs-ink); font-weight: 600; }
.vs-card-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
@media (max-width: 640px) { .vs-address-grid { grid-template-columns: 1fr; } }

/* ---- Order detail ---- */
.vs-order-meta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vs-order-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 640px) { .vs-order-cols { grid-template-columns: 1fr; } }
.vs-table--orders td, .vs-table--orders th { vertical-align: middle; }
.vs-table .vs-text-end { text-align: right; }

/* ============================================================
   CART
   ============================================================ */
.vs-cart-header { padding-bottom: clamp(20px, 3vh, 34px); }
.vs-cart { padding-bottom: clamp(56px, 9vh, 104px); }
.vs-cart__grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.vs-cart__main { position: relative; min-width: 0; }
.vs-cart__aside { position: sticky; top: 110px; display: grid; gap: 18px; }
@media (max-width: 980px) {
  .vs-cart__grid { grid-template-columns: 1fr; }
  .vs-cart__aside { position: static; }
}

.vs-cart__table { width: 100%; border-collapse: collapse; }
.vs-cart__th {
  text-align: left; padding: 0 12px 14px; border-bottom: 1px solid var(--vs-line);
  font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vs-ink-faint);
}
.vs-cart__th--center { text-align: center; }
.vs-cart__th--end { text-align: right; }
.vs-cart__table tbody tr { border-bottom: 1px solid var(--vs-line-soft); }
.vs-cart__table tbody td { padding: 20px 12px; vertical-align: middle; }
.vs-cart__table .vs-cart__qty-cell { text-align: center; }
.vs-cart__table .vs-cart__total-cell { text-align: right; }
.vs-cart__total-amount { font-family: var(--vs-serif); font-size: 17px; color: var(--vs-wine); font-weight: 500; }
.vs-cart__unit-price { font-size: 13.5px; color: var(--vs-ink-soft); }
.vs-cart__unit-price-original { display: block; font-size: 12px; color: var(--vs-ink-faint); text-decoration: line-through; }
.vs-cart__design-img { width: 72px; height: 90px; object-fit: cover; border: 1px solid var(--vs-line); float: left; margin-right: 16px; }
.vs-cart__remove-cell { text-align: left; width: 40px; }
.vs-cart__th--remove { width: 40px; }
.vs-cart__remove-btn {
  width: 34px; height: 34px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid transparent; color: var(--vs-ink-faint);
  transition: color 200ms var(--vs-ease), border-color 200ms var(--vs-ease);
}
.vs-cart__remove-btn:hover { color: var(--vs-wine); border-color: var(--vs-gold-line); }
/* Sylius live-component quantity input */
.vs-cart__qty-cell input { width: 64px; text-align: center; background: var(--vs-marble); border: 1px solid var(--vs-line); color: var(--vs-ink); font-family: var(--vs-sans); font-size: 14px; padding: 9px 6px; }
.vs-cart__qty-cell input:focus { outline: none; border-color: var(--vs-gold); }

/* Coupon + clear */
.vs-cart__tools { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 28px; }
.vs-cart__coupon-input { display: flex; gap: 10px; }
.vs-cart__coupon-input input { flex: 1; min-width: 160px; background: var(--vs-marble); border: 1px solid var(--vs-line); color: var(--vs-ink); font-family: var(--vs-sans); font-size: 14px; padding: 12px 14px; }
.vs-cart__coupon-input input:focus { outline: none; border-color: var(--vs-gold); }
.vs-cart__coupon-applied { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--vs-ink-soft); }
.vs-cart__coupon-remove { color: var(--vs-ink-faint); transition: color 200ms var(--vs-ease); }
.vs-cart__coupon-remove:hover { color: var(--vs-wine); }

/* Summary card */
.vs-cart__summary { position: relative; background: var(--vs-marble-raised); border: 1px solid var(--vs-line-soft); padding: clamp(24px, 3vw, 32px); }
.vs-cart__summary-title { font-family: var(--vs-serif); font-size: 22px; font-weight: 500; margin-bottom: 18px; }
.vs-cart__summary-body { display: grid; gap: 4px; }
/* Vendor summary rows render as .hstack; restyle as labelled rows */
.vs-cart__summary-body .hstack { display: flex; align-items: baseline; gap: 12px; padding: 8px 0; font-size: 14px; color: var(--vs-ink-soft); }
.vs-cart__summary-body .ms-auto { margin-left: auto; text-align: right; color: var(--vs-ink); }
.vs-cart__summary-body small { font-size: 11px; color: var(--vs-ink-faint); }
.vs-cart__summary-body .border-top { border-top: 1px solid var(--vs-line); padding-top: 16px; margin-top: 10px; }
.vs-cart__summary-body .h5 { font-family: var(--vs-serif); font-size: 19px; font-weight: 600; color: var(--vs-wine); }
.vs-cart__checkout-cta { margin-top: 20px; }

/* ============================================================
   CHECKOUT — one page
   ============================================================ */
.vs-checkout { padding-bottom: clamp(56px, 9vh, 104px); }
.vs-checkout__layout { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: start; }
.vs-checkout__main { min-width: 0; display: grid; gap: 18px; }
.vs-checkout__aside { position: sticky; top: 110px; }
@media (max-width: 980px) {
  .vs-checkout__layout { grid-template-columns: 1fr; }
  .vs-checkout__aside { position: static; }
}

/* Accordion sections */
.vs-accordion { display: grid; gap: 14px; }
.vs-accordion__item { border: 1px solid var(--vs-line-soft); background: var(--vs-marble-raised); }
.vs-accordion__summary {
  list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 20px clamp(20px, 3vw, 28px);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vs-ink);
}
.vs-accordion__summary::-webkit-details-marker { display: none; }
.vs-accordion__summary::after { content: "+"; font-family: var(--vs-serif); font-size: 22px; color: var(--vs-gold); transition: transform 240ms var(--vs-ease); }
.vs-accordion__item[open] > .vs-accordion__summary::after { transform: rotate(45deg); }
.vs-accordion__body { padding: 4px clamp(20px, 3vw, 28px) 26px; display: grid; gap: 16px; }

.vs-checkout__methods { display: grid; gap: 10px; }
.vs-checkout__submit { margin-top: 8px; }

/* Checkout summary */
.vs-checkout__summary { background: var(--vs-marble-raised); border: 1px solid var(--vs-line-soft); padding: clamp(24px, 3vw, 32px); display: grid; gap: 18px; }
.vs-checkout__summary-title { font-family: var(--vs-serif); font-size: 22px; font-weight: 500; }
.vs-checkout__design { display: grid; gap: 8px; }
.vs-checkout__design-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--vs-line); }
.vs-checkout__design-label { font-size: 10px; font-weight: 500; letter-spacing: 0.2em; text-transform: uppercase; color: var(--vs-gold-deep); text-align: center; }
.vs-checkout__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.vs-checkout__item { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; font-size: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--vs-line-soft); }
.vs-checkout__item strong { font-weight: 500; }
.vs-checkout__item-qty { color: var(--vs-ink-faint); font-size: 12.5px; }
.vs-checkout__item-price { text-align: right; align-self: center; font-weight: 500; }
.vs-checkout__totals { display: grid; grid-template-columns: 1fr auto; gap: 10px 16px; margin: 0; font-size: 14px; color: var(--vs-ink-soft); }
.vs-checkout__totals dt { margin: 0; }
.vs-checkout__totals dd { margin: 0; text-align: right; color: var(--vs-ink); }
.vs-checkout__totals .vs-checkout__grand { font-family: var(--vs-serif); font-size: 19px; font-weight: 600; color: var(--vs-wine); padding-top: 12px; border-top: 1px solid var(--vs-line); margin-top: 4px; }

/* ============================================================
   CONTACT
   ============================================================ */
.vs-contact { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.vs-contact__aside { display: grid; gap: 22px; align-content: start; }
.vs-contact__channel { display: grid; gap: 4px; }
.vs-contact__channel small { font-size: 10px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--vs-gold-deep); }
.vs-contact__channel a, .vs-contact__channel span { font-size: 15px; color: var(--vs-ink); }
.vs-contact__channel a:hover { color: var(--vs-gold-deep); }
.vs-contact__form { display: grid; gap: 18px; }
@media (max-width: 820px) { .vs-contact { grid-template-columns: 1fr; } }

/* ============================================================
   ERROR PAGES
   ============================================================ */
.vs-error { min-height: 52vh; display: grid; place-content: center; justify-items: center; text-align: center; gap: 22px; padding-block: clamp(60px, 12vh, 140px); }
.vs-error__code { font-family: var(--vs-serif); font-size: clamp(72px, 14vw, 150px); font-weight: 600; line-height: 0.9; color: var(--vs-gold); }
.vs-error__text { font-size: clamp(15px, 1.4vw, 18px); color: var(--vs-ink-soft); max-width: 46ch; }

/* ---- Full-width button modifier (structural pages: auth/cart/checkout) ---- */
.vs-btn--block { width: 100%; justify-content: center; }