/* ==========================================================================
   Voléfanka — theme styles.
   Design values are FINAL (hi-fi handoff). Do not "tidy" the numbers.
   Tokens, buttons, nav, reveal, flip and panel layout come verbatim from
   the design reference; the section blocks below are the design's inline
   styles lifted into classes with identical values.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  --color-bg:#f3f2f2;
  --color-surface:#eae9e9;
  --color-text:#201e1d;
  --color-accent:#ec3013;
  --color-accent-700:#ae1800;
  --color-divider:color-mix(in srgb,#201e1d 40%,transparent);
  --font-heading:"Archivo",system-ui,sans-serif;
  --font-body:"Archivo",system-ui,sans-serif;
  --edge:clamp(20px,5vw,72px);
  --maxw:1280px;
}

/* Fallback for browsers without color-mix() */
@supports not (color:color-mix(in srgb,#000 40%,transparent)){
  :root{ --color-divider:rgba(32,30,29,.4); }
}

/* --------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:var(--color-bg); color:var(--color-text);
  font-family:var(--font-body); font-size:15px; line-height:1.55; font-weight:400;
  text-wrap:pretty; -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
img{ max-width:100%; }
h1,h2,h3,h4,h5,h6{
  font-family:var(--font-heading); font-weight:800;
  line-height:1.12; letter-spacing:-.015em; margin:0 0 8px;
}
a{ color:var(--color-accent-700); text-decoration:none; }
a:hover{ color:var(--color-accent); }

/* Never leave the browser default focus ring. */
:focus-visible{ outline:2px solid var(--color-accent); outline-offset:2px; }

.vf-wrap{ max-width:var(--maxw); margin:0 auto; padding:0 var(--edge); }
.vf-section{ border-top:2px solid var(--color-divider); padding:clamp(72px,9vw,140px) 0; }

.screen-reader-text{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
  position:absolute; left:-9999px; top:0; z-index:100;
  background:var(--color-accent); color:#fff; padding:12px 18px;
  font-family:var(--font-heading); font-weight:800; font-size:14px;
}
.skip-link:focus{ left:0; color:#fff; }

/* --------------------------------------------------------------------------
   3. Buttons + inputs. Zero radius, 2px rules, flush-left labels.
   -------------------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:flex-start;
  font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:1.2;
  border:2px solid var(--color-text); border-radius:0; cursor:pointer;
  padding:12px 22px; background:transparent; color:var(--color-text);
  text-align:left; text-decoration:none;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover{ color:var(--color-text); }
.btn-primary{ background:var(--color-accent); border-color:var(--color-accent); color:#fff; }
.btn-primary:hover{ background:#dd2b0f; border-color:#dd2b0f; color:#fff; }
.btn-primary:active{ background:#ae1800; border-color:#ae1800; }
.btn-secondary:hover{ background:color-mix(in srgb,var(--color-accent) 10%,transparent); }
.btn-block{ width:100%; }
.btn[disabled],.btn.is-busy{ opacity:.6; pointer-events:none; }

.input{
  font-family:var(--font-body); font-size:15px; color:var(--color-text);
  background:var(--color-bg); border:2px solid var(--color-text); border-radius:0;
  padding:12px 14px; min-height:48px;
}
.input::placeholder{ color:color-mix(in srgb,var(--color-text) 50%,transparent); }

/* --------------------------------------------------------------------------
   4. Sticky header. Gains a rule once scrolled (JS adds data-scrolled).
   -------------------------------------------------------------------------- */
.vf-nav{
  position:sticky; top:0; z-index:60;
  display:flex; align-items:center; gap:clamp(16px,3vw,40px);
  padding:18px var(--edge);
  background:color-mix(in srgb,var(--color-bg) 82%,transparent);
  -webkit-backdrop-filter:saturate(1.5) blur(14px);
  backdrop-filter:saturate(1.5) blur(14px);
  border-bottom:2px solid transparent;
  transition:border-color .35s ease;
}
.vf-nav[data-scrolled]{ border-bottom-color:var(--color-divider); }
.vf-brand{
  font-family:var(--font-heading); font-weight:800; font-size:20px;
  letter-spacing:-.01em; color:var(--color-text); margin-right:auto;
}
.vf-brand:hover{ color:var(--color-text); }
.vf-nav-link{ font-size:14px; color:var(--color-text); }
.vf-nav-link:hover{ color:var(--color-accent); }
.vf-cart-btn{ gap:8px; text-decoration:none; }
.vf-cart-count{
  min-width:20px; height:20px; display:inline-flex; align-items:center; justify-content:center;
  background:var(--color-accent); color:var(--color-bg);
  font-size:11px; font-weight:800; padding:0 5px;
}

/* --------------------------------------------------------------------------
   5. Marquee
   -------------------------------------------------------------------------- */
@keyframes vf-marquee{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
.vf-marquee{
  border-top:2px solid var(--color-divider);
  border-bottom:2px solid var(--color-divider);
  overflow:hidden; padding:16px 0;
}
.vf-marquee-track{ display:flex; width:max-content; animation:vf-marquee 26s linear infinite; }
.vf-marquee-track span{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(22px,2.6vw,34px); letter-spacing:-.01em; white-space:nowrap;
}

/* --------------------------------------------------------------------------
   6. Scroll reveal + entrance effects.
   NOTE: motion is deliberately NOT gated behind prefers-reduced-motion,
   because the client asked for the effects to always run. If you prefer to
   respect the OS setting, wrap the transitions in a no-preference query.
   -------------------------------------------------------------------------- */
body.reveal-ready [data-reveal]{
  opacity:0; transform:translateY(48px);
  transition:opacity 1s cubic-bezier(.16,1,.3,1), transform 1.1s cubic-bezier(.16,1,.3,1);
  will-change:opacity,transform;
}
body.reveal-ready [data-reveal].in{ opacity:1; transform:none; }

body.reveal-ready [data-fx]{ will-change:transform,filter,clip-path; }
body.reveal-ready [data-fx="ken"]  { transform:scale(1.14); transition:transform 2.6s cubic-bezier(.16,1,.3,1); }
body.reveal-ready [data-fx="slide"]{ transform:translateX(-11%); transition:transform 1.7s cubic-bezier(.16,1,.3,1); }
body.reveal-ready [data-fx="rise"] { transform:translateY(14%) scale(.92); transition:transform 1.8s cubic-bezier(.16,1,.3,1); }
body.reveal-ready [data-fx="wipe"] { clip-path:inset(0 0 100% 0); transition:clip-path 1.6s cubic-bezier(.16,1,.3,1); }
body.reveal-ready [data-fx="wipex"]{ clip-path:inset(0 100% 0 0); transition:clip-path 1.6s cubic-bezier(.16,1,.3,1); }
body.reveal-ready [data-fx="blur"] { filter:blur(26px); transform:scale(1.08); transition:filter 1.5s ease, transform 2s cubic-bezier(.16,1,.3,1); }
body.reveal-ready [data-fx].in{ transform:none; clip-path:inset(0 0 0 0); filter:none; }

/* --------------------------------------------------------------------------
   7. Front/back crossfade. Hover on desktop, tap on touch (JS toggles
      [data-flipped]). Needs descendant selectors, so it lives in CSS.
   -------------------------------------------------------------------------- */
[data-face]{ transition:opacity .7s cubic-bezier(.16,1,.3,1); }
[data-face="back"]{ opacity:0; }
[data-flip]:hover [data-face="back"],
[data-flip][data-flipped] [data-face="back"]{ opacity:1; }
[data-flip]:hover [data-face="front"],
[data-flip][data-flipped] [data-face="front"]{ opacity:0; }
[data-flip]{ cursor:pointer; }

/* --------------------------------------------------------------------------
   8. Panel layout
   -------------------------------------------------------------------------- */
.vf-panel{
  position:relative; overflow:hidden;
  border-top:2px solid var(--color-divider);
  height:min(92vh,900px);
}
.vf-split{
  height:100%; max-width:var(--maxw); margin:0 auto; padding:0 var(--edge);
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:clamp(24px,4vw,64px); align-items:center;
}
.vf-panel figure{ margin:0; position:relative; max-height:76vh; }
.vf-panel figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

.vf-fx{ position:absolute; inset:0; overflow:hidden; }
.vf-face{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center; }

/* White-background photography: drop the ground out instead of plating it. */
.vf-figure--contain .vf-face,
.vf-figure--contain img{ object-fit:contain; mix-blend-mode:multiply; }

.vf-caption{
  position:absolute; bottom:-26px; left:0;
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 55%,transparent);
  margin:0;
}

/* Shared copy-side typography (hero + panels) */
.vf-kicker{
  font-size:13px; letter-spacing:.1em; text-transform:uppercase;
  color:var(--color-accent-700); margin:0 0 20px;
}
.vf-h1{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(44px,7vw,96px); line-height:.96; letter-spacing:-.03em;
  margin:0 0 26px; transition-delay:.08s;
}
.vf-h2{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(34px,4.8vw,64px); line-height:1; letter-spacing:-.03em;
  margin:0 0 22px; transition-delay:.08s;
}
.vf-lead{
  font-size:clamp(17px,1.6vw,21px); line-height:1.55; max-width:44ch;
  margin:0 0 32px; color:color-mix(in srgb,var(--color-text) 82%,transparent);
  transition-delay:.16s;
}
.vf-blurb{
  font-size:clamp(16px,1.5vw,19px); line-height:1.55; max-width:42ch;
  margin:0 0 30px; color:color-mix(in srgb,var(--color-text) 80%,transparent);
  transition-delay:.16s;
}
.vf-actions{
  display:flex; align-items:center; gap:20px; flex-wrap:wrap;
  transition-delay:.24s;
}
.vf-buy{ font-size:15px; padding:12px 22px; }
/* One flex item, so the space around the em dash survives. */
.vf-buy-label{ display:inline; white-space:normal; }
.vf-buy-label .amount,
.vf-buy-label .woocommerce-Price-amount{ color:inherit; font-weight:inherit; }
.vf-textlink{ font-family:var(--font-heading); font-weight:800; font-size:15px; }

/* --------------------------------------------------------------------------
   9. Hero
   -------------------------------------------------------------------------- */
.vf-hero{
  position:relative; overflow:hidden; background:var(--color-bg);
  padding:clamp(32px,4vw,56px) 0 0;
}
.vf-hero .vf-split{ height:auto; min-height:min(78vh,820px); }
.vf-hero .vf-kicker{ margin-bottom:22px; }
.vf-hero figure{ margin:0; position:relative; aspect-ratio:4/5; background:var(--color-bg); }
.vf-hero figure img{ position:absolute; inset:0; width:100%; height:100%; }
.vf-hero .vf-caption{ bottom:0; }

/* --------------------------------------------------------------------------
   10. Story
   -------------------------------------------------------------------------- */
.vf-story .vf-split{
  height:auto;
  grid-template-columns:minmax(0,5fr) minmax(0,7fr);
  gap:clamp(28px,5vw,88px);
}
.vf-story h2{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(30px,3.6vw,46px); line-height:1.04; letter-spacing:-.02em;
  margin:0 0 24px;
}
.vf-story p{
  font-size:16px; line-height:1.6; margin:0 0 16px;
  color:color-mix(in srgb,var(--color-text) 82%,transparent);
}
.vf-story p:last-child{ margin-bottom:0; }
.vf-story figure{
  margin:0; position:relative; aspect-ratio:4/3; overflow:hidden;
  background:var(--color-surface); transition-delay:.1s;
}
.vf-story figure img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.vf-story figure.vf-figure--contain img{ object-fit:contain; mix-blend-mode:multiply; }

/* --------------------------------------------------------------------------
   11. Materials
   -------------------------------------------------------------------------- */
#materials .vf-kicker{ margin-bottom:36px; }
.vf-mat-row{
  display:grid;
  grid-template-columns:minmax(48px,120px) minmax(0,360px) minmax(0,1fr);
  gap:20px clamp(24px,4vw,72px); align-items:baseline; padding:28px 0;
}
.vf-mat-row + .vf-mat-row{ border-top:2px solid var(--color-divider); }
.vf-mat-num{ font-family:var(--font-heading); font-weight:800; font-size:15px; margin:0; }
.vf-mat-row h3{
  font-family:var(--font-heading); font-weight:800; font-size:24px;
  letter-spacing:-.01em; margin:0;
}
.vf-mat-row p{
  font-size:15.5px; line-height:1.6; margin:0; max-width:52ch;
  color:color-mix(in srgb,var(--color-text) 78%,transparent);
}

/* --------------------------------------------------------------------------
   12. Size guide
   -------------------------------------------------------------------------- */
.vf-sizes-intro{ margin-bottom:clamp(28px,3.5vw,44px); max-width:44ch; }
.vf-sizes-intro .vf-kicker{ margin-bottom:16px; }
.vf-sizes-intro h2{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(30px,3.6vw,46px); line-height:1.04; letter-spacing:-.02em;
  margin:0 0 14px;
}
.vf-sizes-intro p{
  font-size:15.5px; line-height:1.6; margin:0;
  color:color-mix(in srgb,var(--color-text) 78%,transparent);
}
.vf-table-scroll{ overflow-x:auto; }
.table{ width:100%; border-collapse:collapse; }
.table th,.table td{
  text-align:left; padding:14px 16px;
  border-bottom:2px solid var(--color-divider); font-size:15px;
}
.table th{
  font-family:var(--font-heading); font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
}
.vf-size-table{ min-width:520px; }
.vf-size-table td.vf-size{ font-weight:800; }

/* --------------------------------------------------------------------------
   13. Reviews
   -------------------------------------------------------------------------- */
#reviews .vf-kicker{ margin-bottom:clamp(32px,4vw,56px); }
.vf-reviews-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr));
  gap:clamp(24px,3vw,48px);
}
.vf-review{ margin:0; }
.vf-review blockquote{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(20px,1.8vw,26px); line-height:1.3; letter-spacing:-.015em;
  margin:0 0 20px;
}
.vf-review figcaption{
  font-size:14px; color:color-mix(in srgb,var(--color-text) 62%,transparent);
}

/* --------------------------------------------------------------------------
   14. Newsletter — the one place red runs as a full field
   -------------------------------------------------------------------------- */
.vf-newsletter{ background:var(--color-accent); color:var(--color-bg); }
.vf-newsletter .vf-wrap{ padding:clamp(64px,8vw,120px) var(--edge); }
.vf-newsletter h2{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(36px,5.4vw,72px); line-height:.98; letter-spacing:-.03em;
  margin:0 0 24px; max-width:16ch;
}
.vf-newsletter p{
  font-size:clamp(16px,1.4vw,19px); line-height:1.55; max-width:46ch;
  margin:0 0 36px; opacity:.9; transition-delay:.06s;
}
.vf-newsletter form{
  display:flex; gap:12px; flex-wrap:wrap; max-width:520px; transition-delay:.12s;
}
.vf-newsletter .input{
  flex:1; min-width:220px; min-height:48px;
  background:var(--color-bg); border-color:transparent; color:var(--color-text);
}
.vf-newsletter .vf-subscribe{
  min-height:48px; background:var(--color-bg); color:var(--color-text);
  border-color:transparent; padding:0 22px; font-size:15px;
}
.vf-newsletter .vf-subscribe:hover{ background:#fff; color:var(--color-text); }
.vf-newsletter :focus-visible{ outline-color:var(--color-bg); }
.vf-note{ margin:16px 0 0; font-size:14px; opacity:.9; }
.vf-note:empty{ display:none; margin:0; }

/* --------------------------------------------------------------------------
   15. Footer
   -------------------------------------------------------------------------- */
.vf-footer{ padding:clamp(48px,6vw,80px) 0 40px; }
.vf-footer-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr));
  gap:40px 24px; align-items:start;
  padding-bottom:48px; border-bottom:2px solid var(--color-divider);
}
.vf-footer-logo{ height:96px; width:auto; display:block; margin:-16px 0 12px -8px; }
.vf-footer-blurb{
  font-size:14px; line-height:1.55; max-width:26ch; margin:0;
  color:color-mix(in srgb,var(--color-text) 70%,transparent);
}
.vf-footer-title{
  font-size:12px; letter-spacing:.08em; text-transform:uppercase;
  color:color-mix(in srgb,var(--color-text) 60%,transparent); margin:0 0 14px;
}
.vf-footer-links{ display:flex; flex-direction:column; gap:10px; }
.vf-footer-links a{ font-size:14px; color:var(--color-text); }
.vf-footer-links a:hover{ color:var(--color-accent); }
.vf-footer-bottom{
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; padding-top:24px;
}
.vf-footer-bottom p{
  font-size:13px; margin:0;
  color:color-mix(in srgb,var(--color-text) 60%,transparent);
}

/* --------------------------------------------------------------------------
   16. Responsive
   -------------------------------------------------------------------------- */
@media (max-width:860px){
  .vf-split{ grid-template-columns:1fr; align-content:center; }
  .vf-split figure{ order:-1 !important; }
  .vf-split .vf-copy{ order:0 !important; }
  .vf-panel{ height:auto; padding:clamp(56px,10vw,96px) 0; }
  .vf-mat-row{ grid-template-columns:1fr; gap:8px 0; }
  .vf-caption{ position:static; margin-top:26px; }
  .vf-hero .vf-caption{ margin-top:12px; }
}
@media (max-width:560px){
  .vf-nav .vf-nav-link{ display:none; }
  .vf-nav{ gap:12px; }
}

/* Keep every tap target ≥44px on touch. */
@media (hover:none){
  .vf-nav-link{ padding:12px 0; }
  .vf-footer-links a{ padding:3px 0; }
}

/* --------------------------------------------------------------------------
   17. WooCommerce pages (shop / single / cart / checkout / account)
        Same flat Modernist language: zero radius, 2px rules, Archivo.
   -------------------------------------------------------------------------- */
.vf-page{ padding:clamp(48px,6vw,88px) 0 clamp(72px,9vw,120px); }
.vf-page-title{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(34px,4.8vw,64px); line-height:1; letter-spacing:-.03em;
  margin:0 0 32px;
}
.vf-entry h1,.vf-entry h2,.vf-entry h3,.vf-entry h4{
  font-family:var(--font-heading); font-weight:800; letter-spacing:-.02em;
}
.vf-entry p,.vf-entry li{ font-size:16px; line-height:1.65; }

.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt{
  font-family:var(--font-heading); font-weight:800; font-size:15px; line-height:1.2;
  border:2px solid var(--color-accent); border-radius:0;
  background:var(--color-accent); color:#fff; padding:12px 22px; text-shadow:none;
  transition:background .2s ease,border-color .2s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover{
  background:#dd2b0f; border-color:#dd2b0f; color:#fff;
}
.woocommerce .button:disabled,
.woocommerce .button.disabled{ opacity:.5; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .quantity .qty,
.woocommerce-page input[type="text"],
.woocommerce-page input[type="email"],
.woocommerce-page input[type="tel"],
.woocommerce-page input[type="password"],
.woocommerce-page select,
.woocommerce-page textarea{
  font-family:var(--font-body); font-size:15px; color:var(--color-text);
  background:var(--color-bg); border:2px solid var(--color-text); border-radius:0;
  padding:10px 12px; min-height:48px; box-shadow:none;
}
.woocommerce .quantity .qty{ min-width:72px; text-align:center; }

.woocommerce ul.products{
  display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:clamp(24px,3vw,48px); margin:0; padding:0; list-style:none;
}
.woocommerce ul.products::before,
.woocommerce ul.products::after{ content:none; }
.woocommerce ul.products li.product{
  width:auto !important; margin:0 !important; float:none !important; text-align:left;
}
.woocommerce ul.products li.product a img{ margin:0 0 16px; border-radius:0; }
.woocommerce ul.products li.product .woocommerce-loop-product__title{
  font-family:var(--font-heading); font-weight:800; font-size:20px;
  letter-spacing:-.01em; color:var(--color-text); padding:0; margin:0 0 8px;
}
.woocommerce ul.products li.product .price,
.woocommerce div.product p.price,
.woocommerce div.product span.price{
  color:var(--color-text); font-size:16px; font-weight:600;
}
.woocommerce ul.products li.product .onsale,
.woocommerce span.onsale{
  border-radius:0; background:var(--color-accent); color:#fff;
  font-family:var(--font-heading); font-weight:800; min-height:0; min-width:0;
  line-height:1; padding:8px 12px; top:0; right:0; left:auto; margin:0;
}

.woocommerce div.product .product_title{
  font-family:var(--font-heading); font-weight:800;
  font-size:clamp(30px,3.6vw,52px); line-height:1.02; letter-spacing:-.03em;
  margin:0 0 18px;
}
.woocommerce div.product .woocommerce-tabs ul.tabs{ padding:0; margin:0 0 24px; }
.woocommerce div.product .woocommerce-tabs ul.tabs::before{ border-bottom:2px solid var(--color-divider); }
.woocommerce div.product .woocommerce-tabs ul.tabs li{
  border-radius:0; border:2px solid var(--color-divider); background:var(--color-surface);
}
.woocommerce div.product .woocommerce-tabs ul.tabs li.active{ background:var(--color-bg); border-bottom-color:var(--color-bg); }
.woocommerce div.product .woocommerce-tabs ul.tabs li a{
  font-family:var(--font-heading); font-weight:800; color:var(--color-text);
}

.woocommerce table.shop_table,
.woocommerce table.shop_attributes{
  border:2px solid var(--color-divider); border-radius:0; border-collapse:collapse;
}
.woocommerce table.shop_table th,
.woocommerce table.shop_table td{
  border-top:2px solid var(--color-divider); padding:14px 16px;
}
.woocommerce table.shop_table th{
  font-family:var(--font-heading); font-weight:800; font-size:13px;
  letter-spacing:.06em; text-transform:uppercase;
}
.woocommerce .cart_totals h2,
.woocommerce-checkout h3,
.woocommerce-billing-fields h3{
  font-family:var(--font-heading); font-weight:800; letter-spacing:-.02em;
}
.woocommerce-message,
.woocommerce-info,
.woocommerce-error{
  border-top-color:var(--color-accent); border-radius:0; background:var(--color-surface);
}
.woocommerce-message::before,
.woocommerce-info::before{ color:var(--color-accent); }
.woocommerce .woocommerce-breadcrumb{ font-size:13px; color:color-mix(in srgb,var(--color-text) 60%,transparent); }

/* Editor/admin-bar nicety: keep the sticky nav under the WP admin bar. */
body.admin-bar .vf-nav{ top:32px; }
@media (max-width:782px){ body.admin-bar .vf-nav{ top:46px; } }