/* VirtGold 4.6 - decision-first layer. Gold marks what matters (price, next step, promise); everything else stays quiet. */

/* Hero: the highlighted words get a gold marker instead of gradient text - readable in light and dark. */
.vg-hero__title em { font-style:normal; color:inherit; -webkit-text-fill-color:currentColor; background:linear-gradient(transparent 64%, color-mix(in srgb, var(--vg-primary) 46%, transparent) 64% 90%, transparent 90%); -webkit-background-clip:border-box; background-clip:border-box; -webkit-box-decoration-break:clone; box-decoration-break:clone; padding-inline:.04em; }

/* Section labels: quiet ink with a short gold rule (no coloured shouting). */
.vg-eyebrow { gap:9px; color:color-mix(in srgb, var(--vg-text) 62%, var(--vg-bg)); letter-spacing:.09em; }
.vg-eyebrow::before { content:""; flex:none; width:18px; height:2px; border-radius:2px; background:var(--vg-primary); }
.vg-promo .vg-eyebrow::before, .vg-cta .vg-eyebrow::before { display:none; }

/* Feature icons follow the gold brand instead of the link colour. */
.vg-feature__icon, .vg-benefit__icon { background:var(--vg-primary-soft); color:color-mix(in srgb, var(--vg-primary) 62%, var(--vg-text)); }

/* Benefits - one calm strip that reads in a single glance. */
.vg-ledger { padding-block:0 clamp(18px, 3vw, 36px); }
.vg-hero + .vg-ledger { margin-top:calc(clamp(12px, 2vw, 32px) * -1); }
.vg-ledger__list { display:grid; grid-template-columns:repeat(var(--n, 4), minmax(0, 1fr)); margin:0; padding:0; list-style:none; border:1px solid var(--vg-border); border-radius:var(--vg-radius); background:var(--vg-surface); box-shadow:var(--vg-shadow-sm); overflow:hidden; }
.vg-ledger__item { position:relative; display:flex; align-items:flex-start; gap:14px; min-width:0; padding:22px clamp(16px, 2vw, 24px); }
.vg-ledger__item + .vg-ledger__item { border-inline-start:1px solid var(--vg-border); }
.vg-ledger__icon { display:grid; place-items:center; flex:none; width:40px; height:40px; border-radius:10px; background:var(--vg-primary-soft); color:color-mix(in srgb, var(--vg-primary) 62%, var(--vg-text)); }
.vg-ledger__item strong { display:block; font-size:15.5px; line-height:1.3; letter-spacing:-.01em; }
.vg-ledger__item div > span { display:block; margin-top:3px; color:var(--vg-muted); font-size:14px; line-height:1.45; }
@media (max-width:960px) {
  .vg-ledger__list { grid-template-columns:repeat(2, minmax(0, 1fr)); }
  .vg-ledger__item:nth-child(odd) { border-inline-start:0; }
  .vg-ledger__item:nth-child(n+3) { border-top:1px solid var(--vg-border); }
}
@media (max-width:560px) {
  .vg-ledger__item { flex-direction:column; gap:10px; padding:18px 14px 16px; }
  .vg-ledger__icon { width:34px; height:34px; }
  .vg-ledger__item strong { font-size:14.5px; }
  .vg-ledger__item div > span { font-size:13px; }
}

/* Steps - a short timeline: numbered gold nodes joined by a rule. */
.vg-timeline { --gap:clamp(20px, 3.4vw, 48px); position:relative; display:grid; grid-template-columns:repeat(var(--n, 3), minmax(0, 1fr)); gap:var(--gap); margin:0; padding:clamp(24px, 3.4vw, 40px); list-style:none; border:1px solid var(--vg-border); border-radius:var(--vg-radius); background:var(--vg-surface); box-shadow:var(--vg-shadow-sm); }
.vg-timeline__step { position:relative; min-width:0; text-align:center; }
.vg-timeline__step:not(:last-child)::after { content:""; position:absolute; top:21px; inset-inline-start:calc(50% + 32px); width:calc(100% + var(--gap) - 64px); height:2px; border-radius:2px; background:color-mix(in srgb, var(--vg-primary) 42%, var(--vg-border)); }
.vg-timeline__node { display:inline-grid; place-items:center; width:44px; height:44px; border:2px solid var(--vg-primary); border-radius:50%; background:var(--vg-surface); color:var(--vg-text); font-size:16px; font-weight:800; font-variant-numeric:tabular-nums; }
.vg-timeline__step:first-child .vg-timeline__node { background:var(--vg-primary); color:var(--vg-on-primary); }
.vg-timeline h3 { margin:16px 0 6px; font-size:clamp(17px, 1.6vw, 19px); line-height:1.3; letter-spacing:-.015em; }
.vg-timeline p { max-width:34ch; margin:0 auto; color:var(--vg-muted); font-size:15px; line-height:1.55; }
@media (max-width:720px) {
  .vg-timeline { --gap:22px; grid-template-columns:minmax(0, 1fr); padding:22px 18px; }
  .vg-timeline__step { display:grid; grid-template-columns:44px minmax(0, 1fr); column-gap:14px; text-align:start; }
  .vg-timeline__node { grid-row:span 2; }
  .vg-timeline h3 { margin:9px 0 4px; }
  .vg-timeline p { margin:0; }
  .vg-timeline__step:not(:last-child)::after { top:50px; bottom:calc(var(--gap) * -1 + 6px); inset-inline-start:21px; width:2px; height:auto; }
}

/* Prices: "From $17" - the label is quiet, the number is the hero. */
.vg-from { color:var(--vg-muted); font-size:.68em; font-weight:600; letter-spacing:0; }
.vg-card__price .vg-from, ul.products li.vg-card.product .price .vg-from { align-self:baseline; }

/* Product page: say why Add to cart is still disabled. */
.vg-choose-hint { display:none; align-items:center; gap:8px; margin:0 0 12px; color:var(--vg-muted); font-size:14px; line-height:1.4; }
.vg-choose-hint svg { flex:none; color:color-mix(in srgb, var(--vg-primary) 70%, var(--vg-text)); }
form.variations_form:has(.wc-variation-selection-needed) .vg-choose-hint { display:flex; }

/* Product page: trust tiles stay 2 × 2 on phones instead of a long single column. */
@media (max-width:480px) {
  .vg-trust-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:8px; }
  .vg-trust-grid li { flex-direction:column; gap:8px; padding:11px; }
  .vg-trust-grid__icon { width:30px; height:30px; border-radius:9px; }
  .vg-trust-grid strong { font-size:13px; }
  .vg-trust-grid small { font-size:12px; }
}
/* The guarantee explains the policy; keep it quieter than the buttons above it. */
.vg-guarantee { border-color:var(--vg-border); background:var(--vg-surface); }

/* Cards: long external-link labels may wrap instead of overflowing small cards. */
.vg-card__btn { white-space:normal; }

/* Cards without a photo: brand monogram, not a "broken image" drawing. */
.vg-monogram { display:grid; place-items:center; width:100%; height:100%; aspect-ratio:1; background:var(--vg-image-bg); }
.vg-monogram span { display:grid; place-items:center; width:42%; aspect-ratio:1; border:2px solid color-mix(in srgb, var(--vg-primary) 55%, transparent); border-radius:50%; color:color-mix(in srgb, var(--vg-primary) 55%, var(--vg-text)); font-family:var(--vg-font-heading); font-size:clamp(22px, 3.4vw, 40px); font-weight:800; letter-spacing:-.02em; }

/* Phones: feature cards sit 2 × 2 so the reasons to buy fit in one screen. */
@media (max-width:640px) {
  html body .vg-features .vg-feature-grid { grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; }
  .vg-features .vg-feature { padding:16px 14px; }
  .vg-features .vg-feature__icon { width:36px; height:36px; margin-bottom:10px; border-radius:10px; }
  .vg-features .vg-feature h3 { font-size:15px; line-height:1.3; }
  .vg-features .vg-feature p { font-size:13px; line-height:1.45; }
  .vg-features .vg-feature-grid--icon-start .vg-feature { display:block; }
}