/* ============================================================
   Vegan Royalty — 2026 redesign design system
   Palette: cream #F4ECDD · plum #6B2A55 · deep plum #2A0F1F /
   #3A1530 · gold #C2973F / #E4C46B · green #6E7C54
   Fonts: Tenor Sans (display) · Hanken Grotesk (body)
   Brand colours come from CSS vars (set in header.php from admin
   Site Settings, with these hexes as the fallback defaults).
   ============================================================ */

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--vr-cream,#F4ECDD);
  font-family:'Hanken Grotesk',sans-serif;
  color:var(--vr-dark,#2A0F1F);
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
::selection{background:var(--vr-plum,#6B2A55);color:var(--vr-cream,#F4ECDD)}
a{color:inherit}

/* the old theme injected a #page / preloader; neutralise leftovers */
#preloader{display:none!important}

.vr-bricolage{font-family:var(--vr-heading,'Fraunces',serif)}
.vr-container{max-width:1240px;margin:0 auto;padding:0 32px}
.vr-shell{overflow-x:hidden;width:100%}

/* ---------- buttons & link hovers (replaces builder style-hover) ---------- */
.vr-btn-plum{background:var(--vr-plum,#6B2A55);color:var(--vr-cream,#F4ECDD);transition:background .2s ease}
.vr-btn-plum:hover{background:var(--vr-dark,#2A0F1F);color:var(--vr-cream,#F4ECDD)}
.vr-btn-gold{background:var(--vr-gold,#C2973F);color:var(--vr-dark,#2A0F1F);transition:.2s ease}
.vr-btn-gold:hover{background:var(--vr-dark,#2A0F1F);color:var(--vr-cream,#F4ECDD)}
.vr-btn-cream{background:var(--vr-gold2,#E4C46B);color:var(--vr-dark,#2A0F1F);transition:background .2s ease}
.vr-btn-cream:hover{background:var(--vr-cream,#F4ECDD);color:var(--vr-dark,#2A0F1F)}
.vr-btn-outline{border:1.5px solid color-mix(in srgb,var(--vr-dark) 25%,transparent);color:var(--vr-dark,#2A0F1F);transition:border-color .2s ease}
.vr-btn-outline:hover{border-color:var(--vr-dark,#2A0F1F)}
.vr-btn-outline-light{border:1.5px solid color-mix(in srgb,var(--vr-cream) 40%,transparent);color:var(--vr-cream,#F4ECDD);transition:border-color .2s ease}
.vr-btn-outline-light:hover{border-color:var(--vr-cream,#F4ECDD)}
.vr-cartbtn{transition:background .2s ease}
.vr-cartbtn:hover{background:var(--vr-dark,#2A0F1F)!important}

.vr-navlink{transition:color .2s ease}
.vr-navlink:hover{color:var(--vr-plum,#6B2A55)}
.vr-footlink{transition:color .2s ease}
.vr-footlink:hover{color:var(--vr-gold2,#E4C46B)}
.vr-seeall{transition:opacity .2s ease}
.vr-seeall:hover{opacity:.7}

.vr-card{transition:transform .25s ease,box-shadow .25s ease}
.vr-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px color-mix(in srgb,var(--vr-dark) 16%,transparent)}
.vr-contact-card{transition:border-color .2s ease}
.vr-contact-card:hover{border-color:var(--vr-plum,#6B2A55)}

/* ---------- animations ---------- */
@keyframes vr-rise{0%{opacity:0;transform:translateY(24px)}100%{opacity:1;transform:translateY(0)}}
@keyframes vr-float{0%,100%{transform:translateY(0) rotate(-12deg)}50%{transform:translateY(-12px) rotate(-12deg)}}
.vr-rise{animation:vr-rise .8s ease both}
.vr-rise-slow{animation:vr-rise 1s ease both}
.vr-float{animation:vr-float 5s ease-in-out infinite}

/* ---------- responsive grids (defined here so media queries can override) ---------- */
.vr-hero{display:grid;grid-template-columns:1.05fr .95fr;gap:56px;align-items:center}
.vr-about{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.vr-band{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.vr-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.vr-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.vr-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.vr-footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px}
.vr-contact-grid{display:grid;grid-template-columns:.95fr 1.05fr;gap:60px;align-items:start}
.vr-products-grid{display:grid;grid-template-columns:1.55fr .9fr;gap:40px;align-items:start}
.vr-treats-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}

/* ---------- nav ---------- */
.vr-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--vr-cream) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid color-mix(in srgb,var(--vr-dark) 10%,transparent)}
.vr-nav-inner{max-width:1240px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between}
.vr-nav-links{display:flex;align-items:center;gap:34px}
.vr-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:#2A0F1F}

/* ---------- breakpoints ---------- */
@media (max-width:980px){
  .vr-hero,.vr-about,.vr-band,.vr-contact-grid,.vr-products-grid{grid-template-columns:1fr;gap:40px}
  .vr-grid-4{grid-template-columns:repeat(2,1fr)}
  .vr-treats-grid{grid-template-columns:repeat(2,1fr)}
  .vr-footer-grid{grid-template-columns:1fr 1fr;gap:32px}
  .vr-products-grid .vr-order-summary{position:static!important}
}
@media (max-width:860px){
  .vr-burger{display:block}
  .vr-nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:#F4ECDD;border-bottom:1px solid color-mix(in srgb,var(--vr-dark) 12%,transparent);
    padding:8px 20px 18px;box-shadow:0 16px 30px color-mix(in srgb,var(--vr-dark) 12%,transparent)
  }
  .vr-nav-links.open{display:flex}
  .vr-nav-links>a{padding:13px 4px;border-bottom:1px solid color-mix(in srgb,var(--vr-dark) 7%,transparent)}
  .vr-nav-links>a:last-child{justify-content:center;margin-top:10px;border-bottom:none}
}
@media (max-width:620px){
  .vr-container,.vr-nav-inner{padding-left:20px;padding-right:20px}
  .vr-grid-3,.vr-grid-4,.vr-treats-grid{grid-template-columns:1fr}
  .vr-footer-grid{grid-template-columns:1fr}
  h1.vr-h1{font-size:48px!important}
  .vr-h2{font-size:34px!important}
}

/* ============================================================
   Recipe-book layout (2026-07) — editorial "cookbook" styling
   layered on the SAME brand tokens (plum / gold / cream / dark).
   Only the layout is borrowed; colours + fonts stay ours, and no
   copy implies recipes to download or bakes to make at home.
   ============================================================ */

/* framed "book cover" double border */
.rb-frame{border:1px solid var(--vr-plum,#6B2A55);padding:8px}
.rb-frame-inner{border:1px solid color-mix(in srgb,var(--vr-plum) 35%,transparent)}

/* drop cap for the author's note */
.rb-dropcap::first-letter{
  float:left;font-family:var(--vr-heading,'Fraunces',serif);font-weight:700;
  font-size:74px;line-height:.72;padding:8px 12px 0 0;color:var(--vr-plum,#6B2A55)
}

/* corner flourish + hairline rule */
.rb-flourish{font-family:var(--vr-heading,'Fraunces',serif);color:var(--vr-gold,#C2973F);font-size:22px;line-height:1}
.rb-rule{height:1px;flex:1;max-width:44px;background:var(--vr-plum,#6B2A55);opacity:.4}

/* dotted-leader contents rows */
.rb-lead{flex:1;border-bottom:1.5px dotted color-mix(in srgb,var(--vr-dark) 30%,transparent);transform:translateY(-4px)}
.rb-toc{transition:color .2s ease}
.rb-toc:hover{color:var(--vr-plum,#6B2A55)}

/* ---------- recipe-book nav ---------- */
.rb-nav{position:sticky;top:0;z-index:40;background:color-mix(in srgb,var(--vr-cream) 92%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:2px solid var(--vr-plum,#6B2A55)}
.rb-nav-inner{max-width:1240px;margin:0 auto;padding:0 32px;display:flex;align-items:stretch;justify-content:space-between;height:66px}
.rb-brand{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--vr-dark,#2A0F1F)}
.rb-nav-links{display:flex;align-items:stretch}
.rb-navcell{display:flex;align-items:center;padding:0 18px;border-left:1px solid color-mix(in srgb,var(--vr-plum) 15%,transparent);text-decoration:none;color:var(--vr-dark,#2A0F1F);font-size:13px;font-weight:600;letter-spacing:.04em;transition:background .2s ease}
.rb-navcell:hover{background:color-mix(in srgb,var(--vr-plum) 6%,transparent)}
.rb-navcell .rb-ch{opacity:.4;font-size:10px;font-style:italic;margin-right:5px}
.rb-navcell.active{background:var(--vr-plum,#6B2A55);color:var(--vr-cream,#F4ECDD);font-weight:700}
.rb-navcell.active .rb-ch{opacity:.65}
.rb-cartcell{display:flex;align-items:center;gap:8px;padding:0 20px;border-left:1px solid color-mix(in srgb,var(--vr-plum) 15%,transparent);text-decoration:none;background:var(--vr-royal,#6A2C91);color:var(--vr-cream,#F4ECDD);font-size:13px;font-weight:700;transition:background .2s ease}
.rb-cartcell:hover{background:color-mix(in srgb,var(--vr-royal,#6A2C91),#000 16%)}
.rb-burger{display:none;background:none;border:none;cursor:pointer;padding:8px;color:var(--vr-dark,#2A0F1F);align-self:center}

/* ---------- recipe-book grids ---------- */
.rb-hero{display:grid;grid-template-columns:1.08fr .92fr;gap:56px;align-items:center}
.rb-contents{display:grid;grid-template-columns:.7fr 1.3fr;gap:56px;align-items:start}
.rb-author{display:grid;grid-template-columns:.9fr 1.1fr;gap:64px;align-items:center}
.rb-playful{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}

@media (max-width:980px){
  .rb-hero,.rb-contents,.rb-author,.rb-playful{grid-template-columns:1fr;gap:40px}
}
@media (max-width:860px){
  .rb-burger{display:block}
  .rb-nav-links{
    display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;
    background:var(--vr-cream,#F4ECDD);border-bottom:2px solid var(--vr-plum,#6B2A55);
    box-shadow:0 16px 30px color-mix(in srgb,var(--vr-dark) 12%,transparent)
  }
  .rb-nav-links.open{display:flex}
  .rb-navcell,.rb-cartcell{padding:15px 24px;border-left:none;border-top:1px solid color-mix(in srgb,var(--vr-plum) 10%,transparent);justify-content:flex-start}
}
@media (max-width:620px){
  .rb-nav-inner{padding-left:20px;padding-right:20px}
}

/* Treats grid — desktop column count is admin-selectable via --treats-cols
   (2/3/4); always collapses to 2 on tablet and 1 on phone for responsiveness. */
.vr-treats-cols{display:grid;grid-template-columns:repeat(var(--treats-cols,4),1fr);gap:22px}
@media (max-width:980px){.vr-treats-cols{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.vr-treats-cols{grid-template-columns:1fr}}