/* ============================================================
   VendorsHub "Royal Light" (2026-10-31) — loaded AFTER vh-royal.css on the website.
   Owner asked for a white background and a wider page (no big empty sides on
   computer screens). Keeps the royal look (serif headings, gold buttons, story
   rings) but on white; gold used as TEXT is deepened so it stays readable.
   Full-screen photo viewers (stories, Explore reels) stay dark on purpose.
   ============================================================ */
:root{
  --r-bg:#FFFFFF; --r-bg2:#F8F7F4; --r-card:#FFFFFF; --r-card2:#F6F4EE;
  --r-line:rgba(168,132,42,.30); --r-line2:#E8E6EE;
  --r-ink:#16122E; --r-ink2:#4A4662; --r-ink3:#66627C;
  --r-gold:#8E6B17; --r-gold2:#7A5A0E; --r-gold-deep:#C9A245;
  --r-shadow:0 1px 2px rgba(22,18,46,.05),0 10px 28px -16px rgba(22,18,46,.22);
  --r-glow:0 0 0 3px rgba(226,194,106,.35),0 10px 28px -14px rgba(168,132,42,.4);
  --s-shadow-lg:0 26px 60px -28px rgba(22,18,46,.35),0 0 0 1px var(--r-line2);
}
html{background:#fff;scrollbar-color:#CFCBDA #fff}
body{background:#fff;color:var(--r-ink)}
::-webkit-scrollbar-track{background:#fff}
::-webkit-scrollbar-thumb{background:#CFCBDA;border-color:#fff}
.page-loader{background:#fff}

/* dark photo viewers keep the dark colour set */
.rs-viewer,.vx-reels{
  --r-bg:#07070D; --r-card:#13131F; --r-card2:#1A1A29; --r-line:rgba(226,194,106,.16); --r-line2:rgba(255,255,255,.08);
  --r-ink:#F4EFE1; --r-ink2:#B9B4C9; --r-ink3:#8C88A0; --r-gold:#E2C26A; --r-gold2:#F6DE8E;
}

/* ---------- wider page ---------- */
.container,.header-inner{max-width:1680px}
.header-inner{padding-left:32px;padding-right:32px}
@media (max-width:760px){.header-inner{padding-left:14px;padding-right:14px}}
.rh-wrap{max-width:1680px;padding:0 32px;grid-template-columns:minmax(0,1fr) 360px;gap:40px}
/* computer: businesses + offers as a grid of cards instead of one tall column */
@media (min-width:981px){
  .rf-feed{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px;align-items:start}
  .rf-feed > .rf-divider,.rf-feed > .rf-empty,.rf-feed > .rf-skel{grid-column:1/-1}
}
@media (max-width:980px){.rh-wrap{grid-template-columns:minmax(0,1fr);padding:0 16px}}

/* gold TEXT (logo, headline word) uses a deeper gold so it reads on white; gold buttons keep the bright gold */
.brand-text .name,.rh h1 span{background:linear-gradient(135deg,#B8892A 0%,#8E6B17 45%,#A97F22 100%);-webkit-background-clip:text;background-clip:text}
.rf-biz.is-demo .rf-label{color:#8A5A00}

/* ---------- surfaces that were hard-coded dark ---------- */
header.site{background:rgba(255,255,255,.92);border-bottom:1px solid var(--r-line2)}
header.site.scrolled{box-shadow:0 8px 24px -18px rgba(22,18,46,.45)}
.rs-av{background:#F6EFDA;color:var(--r-gold2)}
.rs-ring > .rs-av{border-color:#fff}
.rf-media{background:#F1EFF5}
.rf-biz-cover{background:linear-gradient(135deg,#F6EFDA,#EEEAF6)}
.rf-offer{background:linear-gradient(110deg,#FFF6DC,#fff 60%)}
.rh-gold{background:linear-gradient(150deg,#FFF4D6,#fff 70%)}
.rh-card .eyebrow{background:#E8F7EF;border-color:#A7DDBF;color:#13683D}
.rf-divider{border-color:rgba(168,132,42,.45);background:#FFFBEF}
.rf-divider b{color:var(--r-gold2)}
.vc-cat{background:rgba(255,255,255,.94);color:var(--r-gold2)}
.cta-band{background:linear-gradient(110deg,#FFF4D6,#fff 55%,#F6F3FF)}
footer.site{background:#F8F7F4;border-top:1px solid var(--r-line2)}
.vh-bnav{background:rgba(255,255,255,.96);border-top:1px solid var(--r-line2);box-shadow:0 -8px 24px -18px rgba(22,18,46,.4)}
header.ex-top{background:#fff;border-bottom:1px solid var(--r-line2)}
.vp-top{background:rgba(255,255,255,.94);border-bottom:1px solid var(--r-line2)}
.vp-cover{background:linear-gradient(135deg,#F6EFDA,#EEEAF6)}
.ig-ring .vp-avatar{background:#F6EFDA;color:var(--r-gold2);border-color:#fff}
.vp-actionbar{background:rgba(255,255,255,.96);border-top:1px solid var(--r-line2)}
.rd-card,.rd .rd-card{background:linear-gradient(150deg,#FFF4D6,#fff 65%)}

/* Explore: white top bar as wide as the rest of the site; light page around the photo column on computers */
header.ex-top .ex-top-in{max-width:1680px;padding:0 16px}
header.ex-top .ex-brand{background:linear-gradient(135deg,#B8892A 0%,#8E6B17 45%,#A97F22 100%);-webkit-background-clip:text;background-clip:text}
@media (min-width:761px){.vx-reels{background:#F4F3F7}}

/* footer + small print that the dark theme had made pale */
footer.site{color:var(--r-ink2)}
footer.site h4{color:var(--r-ink)}
footer.site p,footer.site a{color:var(--r-ink2)}
footer.site a:hover{color:var(--r-gold2)}
footer.site .footer-bottom{color:var(--r-ink3);border-top-color:var(--r-line2)}
.vh-offer-card .vh-offer-valid.soon,.vp-offer .vh-offer-valid.soon{color:#B24A00}