/* ══ SELF-HOSTED BRAND FACES ═══════════════════════════════════════════════
The 09-06 build enqueued these from fonts.googleapis.com. Measured live
2026-09-09: ZERO font requests were made and document.fonts held only
WooCommerce's icon font — LiteSpeed's CSS optimisation had stripped the
stylesheet, leaving only a dns-prefetch. Every visitor was seeing
-apple-system and the system monospace, which is why the page read generic.
Self-hosted here so no optimiser, blocker or third party can remove them.
🩸document.fonts.check() returned TRUE for both while nothing had loaded —
it answers "can this be rendered", and both faces are installed locally on
the build machine. It is NOT evidence a webfont downloaded. */
@font-face {
font-family: 'Chivo Mono';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(fonts/chivo-mono-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Chivo Mono';
font-style: normal;
font-weight: 300 600;
font-display: swap;
src: url(fonts/chivo-mono-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(fonts/fraunces-latin-ext.woff2) format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Fraunces';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url(fonts/fraunces-latin.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Veritas Mercantile — the shell. Fluid, not breakpointed. */
:root{
--ink:#12211E; --ink2:#1D302B; --paper:#FBFAF7; --bone:#F2EFE8; --sand:#E7E1D5;
--verd:#0A5B4E; --verd2:#12857A; --verd-l:#7FC9BB;
--walnut:#4A3B2E; --rule:#DCD6CC; --body:#3F3A34; --mute:#6E675E;
--s1:clamp(.72rem,.68rem + .12vw,.8rem);
--s2:clamp(.84rem,.8rem + .16vw,.95rem);
--s3:clamp(1rem,.95rem + .22vw,1.12rem);
--s4:clamp(1.2rem,1.1rem + .5vw,1.5rem);
--s5:clamp(1.6rem,1.3rem + 1.4vw,2.4rem);
--s6:clamp(2.1rem,1.6rem + 2.4vw,3.4rem);
--s7:clamp(2.8rem,1.9rem + 4.2vw,5.4rem);
--s8:clamp(3.4rem,2rem + 6vw,7.6rem);
--gut:clamp(1.1rem,.7rem + 2.2vw,3.6rem);
--sec:clamp(3.6rem,2.4rem + 4.6vw,7.4rem);
}
/* scope resets with :where so they never beat a component */
:where(html body){margin:0;background:var(--paper);color:var(--body);
font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto;
font-size:var(--s3);line-height:1.6;-webkit-font-smoothing:antialiased}
:where(.vm-head, .vm-foot, #vm-main) *{box-sizing:border-box}
.vm-skip{position:absolute;left:-9999px}
.vm-skip:focus{left:1rem;top:1rem;z-index:100;background:var(--ink);color:var(--paper);padding:.6rem 1rem}
/* hide the theme's own chrome — we ship our own on every theme */
html body .ast-primary-header-bar, html body .site-header, html body header.site-header,
html body .ast-above-header, html body .ast-below-header, html body footer.site-footer,
html body header.wp-block-template-part, html body footer.wp-block-template-part,
html body .wp-block-post-title, html body .ast-single-post-order, html body .entry-header{display:none!important}
html body .site-content, html body .ast-container, html body .entry-content{max-width:100%!important;padding:0!important;margin:0!important}
:root{--wp--style--global--content-size:100%!important;--wp--style--global--wide-size:100%!important}
html body .has-global-padding{padding-left:0!important;padding-right:0!important}
html body .wp-site-blocks>*{margin-block-start:0!important}
/* ── header ───────────────────────────────────────────────────────────── */
.vm-head{position:fixed;inset:0 0 auto 0;z-index:60;transition:background .35s,border-color .35s}
.vm-head-in{display:flex;align-items:center;gap:var(--gut);
padding:clamp(.7rem,.5rem + .6vw,1.15rem) var(--gut);max-width:1680px;margin:0 auto}
.vm-brand{display:block;flex:0 0 auto}
.vm-lg{display:block;height:clamp(26px,1.5vw + 18px,38px);width:auto}
.vm-lg-l{display:none}
.vm-head.is-stuck{background:rgba(251,250,247,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--rule)}
.vm-head.is-stuck .vm-lg-d{display:none} .vm-head.is-stuck .vm-lg-l{display:block}
.vm-nav{margin-left:auto} .vm-nav ul{display:flex;gap:clamp(.9rem,1.4vw,2rem);list-style:none;margin:0;padding:0}
.vm-nav a,.vm-cart{font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.1em;
text-transform:uppercase;color:var(--bone);text-decoration:none;padding:.35rem 0;
border-bottom:1px solid transparent;transition:border-color .25s,color .25s}
.vm-nav a:hover{border-bottom-color:var(--verd-l)}
.vm-head.is-stuck .vm-nav a,.vm-head.is-stuck .vm-cart{color:var(--ink)}
.vm-head-r{display:flex;align-items:center;gap:1rem}
.vm-burger{display:none;background:none;border:0;padding:.4rem;cursor:pointer}
.vm-burger span{display:block;width:22px;height:1.5px;background:var(--bone);margin:5px 0}
.vm-head.is-stuck .vm-burger span{background:var(--ink)}
.vm-drawer{position:fixed;inset:0;z-index:59;background:var(--ink);padding:6rem var(--gut) 2rem;overflow:auto}
.vm-drawer ul{list-style:none;margin:0;padding:0}
.vm-drawer a{display:block;padding:.9rem 0;border-bottom:1px solid rgba(242,239,232,.14);
color:var(--bone);text-decoration:none;font-size:var(--s4)}
@media(max-width:940px){.vm-nav{display:none}.vm-burger{display:block}.vm-head-r{margin-left:auto}}
/* ── reveal: visible by default, JS opts in ───────────────────────────── */
.rvon .rv:not(.in){opacity:0;transform:translateY(14px)}
.rv{transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
/* ── sections ─────────────────────────────────────────────────────────── */
.vm-sec{padding:var(--sec) var(--gut)}
.vm-wrap{max-width:1360px;margin:0 auto}
.vm-kick{font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.19em;
text-transform:uppercase;color:var(--verd);margin:0 0 1.1rem}
.on-ink .vm-kick{color:var(--verd-l)}
h1,h2,h3{font-weight:400;line-height:1.06;letter-spacing:-.018em;color:var(--ink);margin:0}
.on-ink h1,.on-ink h2,.on-ink h3{color:var(--paper)}
.on-ink{background:var(--ink);color:#C9D6D2}
.on-bone{background:var(--bone)}
p{margin:0 0 1.05em}
a{color:var(--verd)}
/* hero: photograph + an opaque card breaking its corner (never text on the photo) */
.vm-hero{position:relative;min-height:clamp(560px,86vh,940px);display:flex;align-items:flex-end;
background:var(--ink) center/cover no-repeat;padding:var(--gut)}
.vm-hero-card{position:relative;z-index:2;background:var(--paper);padding:clamp(1.6rem,1rem + 2.6vw,3.4rem);
max-width:min(680px,92%);margin:0 0 clamp(-2rem,-3vw,-3.4rem) 0;border-top:3px solid var(--verd)}
.vm-hero-card h1{font-size:var(--s7)}
.vm-hero-card p:not(.vm-kick){font-size:var(--s4);color:var(--body);margin:1.1rem 0 1.6rem;line-height:1.4}
.vm-btn{display:inline-block;font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.13em;
text-transform:uppercase;background:var(--verd);color:#fff;padding:.95rem 1.9rem;text-decoration:none;
transition:background .25s}
.vm-btn:hover{background:var(--ink)}
.vm-btn-o{background:transparent;color:var(--verd);border:1.5px solid var(--verd)}
.vm-btn-o:hover{background:var(--verd);color:#fff}
/* accent band — one sentence, huge */
.vm-band{background:var(--verd);color:#fff;padding:var(--sec) var(--gut)}
.vm-band p{font-size:var(--s6);line-height:1.14;max-width:22ch;margin:0;color:#fff;letter-spacing:-.017em}
.vm-band .vm-kick{color:rgba(255,255,255,.72)}
/* THE SIGNATURE COMPONENT — the department board.
Painted enamel aisle signs. Material and light, not a wireframe table. */
.vm-board{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(310px,100%),1fr));
gap:clamp(.7rem,.5vw + .5rem,1.1rem);margin-top:clamp(2rem,3vw,3.4rem)}
.vm-sign{position:relative;display:block;text-decoration:none;overflow:hidden;
aspect-ratio:5/3.4;background:var(--ink2);isolation:isolate}
.vm-sign img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
filter:saturate(.72) brightness(.62);transform:scale(1.04);
transition:transform .9s cubic-bezier(.2,.7,.2,1),filter .6s}
.vm-sign::after{content:"";position:absolute;inset:0;z-index:1;
background:linear-gradient(180deg,rgba(18,33,30,.18),rgba(18,33,30,.86));
box-shadow:inset 0 1px 0 rgba(242,239,232,.16), inset 0 -2px 6px rgba(0,0,0,.4)}
.vm-sign-t{position:relative;z-index:2;height:100%;display:flex;flex-direction:column;
justify-content:flex-end;padding:clamp(1rem,1.6vw,1.7rem)}
.vm-sign-n{font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.2em;
color:var(--verd-l);margin-bottom:auto}
.vm-sign h3{color:var(--paper);font-size:var(--s5);margin:0 0 .35rem}
.vm-sign p{color:rgba(242,239,232,.76);font-size:var(--s2);margin:0;line-height:1.4;
max-width:34ch;opacity:0;transform:translateY(6px);transition:opacity .45s,transform .45s}
.vm-sign:hover img{transform:scale(1.11);filter:saturate(.95) brightness(.72)}
.vm-sign:hover p{opacity:1;transform:none}
/* full-bleed photographic mosaic */
.vm-mosaic{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:0}
.vm-tile{position:relative;aspect-ratio:1/1;overflow:hidden}
.vm-tile img{width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.vm-tile:hover img{transform:scale(1.06)}
.vm-tile-l{position:absolute;left:0;bottom:clamp(1.2rem,3vw,2.6rem);background:var(--paper);
padding:.85rem 1.5rem .85rem clamp(1.1rem,3vw,2.6rem);
clip-path:polygon(0 0,100% 0,calc(100% - 14px) 100%,0 100%)}
.vm-tile-l span{font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.14em;
text-transform:uppercase;color:var(--ink)}
/* data on ink, oversized numerals */
.vm-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));
gap:clamp(1.6rem,3vw,3.4rem)}
.vm-stat .n{font-size:var(--s8);line-height:.86;color:var(--paper);letter-spacing:-.04em;
display:block;margin-bottom:.7rem}
.vm-stat .l{font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.13em;
text-transform:uppercase;color:var(--verd-l);display:block;margin-bottom:.5rem}
.vm-stat p{font-size:var(--s2);color:#C9D6D2;margin:0;line-height:1.5}
/* split: text beside a photograph */
.vm-split{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
gap:clamp(2rem,4vw,5rem);align-items:center}
.vm-split img{width:100%;height:100%;max-height:640px;object-fit:cover;display:block}
.vm-split h2{font-size:var(--s6);margin-bottom:1.2rem}
.vm-lead{font-size:var(--s4);line-height:1.42;color:var(--body)}
.on-ink .vm-lead{color:#C9D6D2}
/* full-bleed macro with the text on its OWN opaque panel */
.vm-macro{position:relative;min-height:clamp(420px,64vh,760px);display:flex;align-items:center;
background:var(--ink) center/cover no-repeat;padding:var(--gut)}
.vm-macro-p{position:relative;background:var(--ink);color:#C9D6D2;
padding:clamp(1.6rem,1rem + 2.4vw,3.2rem);max-width:min(560px,92%);border-left:3px solid var(--verd-l)}
.vm-macro-p h2{font-size:var(--s5);margin-bottom:.9rem}
/* product grid */
.vm-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(250px,100%),1fr));
gap:clamp(1rem,2vw,2.2rem)}
.vm-card{display:flex;flex-direction:column;text-decoration:none}
.vm-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.vm-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.vm-card:hover .vm-card-img img{transform:scale(1.05)}
.vm-card h3{font-size:var(--s3);margin:.9rem 0 .3rem;min-height:2.5em;line-height:1.25}
.vm-card .pr{font-family:"Chivo Mono",monospace;font-size:var(--s2);color:var(--verd)}
/* ── footer ───────────────────────────────────────────────────────────── */
.vm-foot{background:var(--ink);color:#A9B8B3;padding:var(--sec) var(--gut) 2rem}
.vm-foot-in{max-width:1360px;margin:0 auto;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr));gap:clamp(2rem,3vw,3.6rem)}
.vm-foot h3{font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.16em;
text-transform:uppercase;color:var(--verd-l);margin:0 0 1.1rem}
.vm-foot ul{list-style:none;margin:0;padding:0}
.vm-foot li{margin-bottom:.55rem}
.vm-foot a{color:#C9D6D2;text-decoration:none;font-size:var(--s2)}
.vm-foot a:hover{color:var(--paper);text-decoration:underline}
.vm-foot-name{font-size:var(--s4);color:var(--paper);margin:.9rem 0 .5rem}
.vm-foot-line{font-size:var(--s2);color:#A9B8B3;max-width:34ch}
.vm-nap address{font-style:normal;display:grid;gap:.75rem;font-size:var(--s2);color:#C9D6D2}
.vm-cards{display:flex;gap:.5rem;margin-top:1.4rem}
.vm-cards svg{width:46px;height:31px;display:block}
.vm-foot-base{max-width:1360px;margin:clamp(2.4rem,4vw,4rem) auto 0;padding-top:1.5rem;
border-top:1px solid rgba(242,239,232,.13);display:flex;flex-wrap:wrap;gap:1rem;
justify-content:space-between;font-size:var(--s1);color:#8FA6A0}
.vm-foot-base p{margin:0}
/* ── fixes found by rendering, not by reading ─────────────────────────────── */
/* 1 · the macro panel is a dark ground but was not .on-ink, so its h2 inherited
the near-black ink colour and became unreadable on its own panel. */
.vm-macro-p h2{color:var(--paper)}
.vm-macro-p .vm-kick{color:var(--verd-l)}
.vm-macro-p p{color:#C9D6D2}
/* 2 · every link inside a card must take the card's colour, never the UA blue.
Astra + the block theme both ship an `a` colour; be explicit. */
.vm-sign,.vm-sign:visited,.vm-card,.vm-card:visited{color:inherit;text-decoration:none}
.vm-sign h3,.vm-sign:visited h3{color:var(--paper);text-decoration:none}
.vm-sign p{color:rgba(242,239,232,.76)}
.vm-card h3,.vm-card:visited h3{color:var(--ink);text-decoration:none}
.vm-card .pr{color:var(--verd);text-decoration:none}
.vm-foot a,.vm-foot a:visited{text-decoration:none}
#vm-main a:where(:not(.vm-btn):not(.vm-btn-o):not(.vm-sign):not(.vm-card)){text-decoration-thickness:1px;text-underline-offset:3px}
/* 3 · the mosaic tiles must fill their cell even when the source is 1:1 */
.vm-mosaic .vm-tile{min-height:clamp(280px,26vw,460px)}
/* ── the department board, rebuilt with material and light ───────────────── */
.vm-board{grid-template-columns:repeat(auto-fit,minmax(min(270px,100%),1fr));
gap:clamp(.9rem,.6vw + .6rem,1.4rem)}
.vm-sign{aspect-ratio:4/4.6;background:var(--ink2);
transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.vm-sign img{filter:saturate(.9) brightness(.86);transform:scale(1.02)}
.vm-sign::after{background:linear-gradient(180deg,rgba(18,33,30,.06) 0%,rgba(18,33,30,.30) 42%,rgba(18,33,30,.90) 100%);
box-shadow:inset 0 1px 0 rgba(242,239,232,.22), inset 0 0 0 1px rgba(0,0,0,.25)}
/* the painted enamel plate the name sits on — this is the material */
.vm-sign-t{justify-content:flex-end;padding:clamp(1rem,1.4vw,1.5rem)}
.vm-sign h3{position:relative;display:inline-block;background:var(--verd);color:#fff;
padding:.5rem .85rem;font-size:var(--s4);letter-spacing:-.01em;
box-shadow:0 1px 0 rgba(255,255,255,.28) inset, 0 6px 14px rgba(0,0,0,.34);
transform:translateY(0);transition:transform .45s cubic-bezier(.2,.7,.2,1),background .3s}
.vm-sign-n{position:absolute;top:clamp(.9rem,1.4vw,1.4rem);left:clamp(1rem,1.4vw,1.5rem);
font-size:var(--s1);color:var(--paper);opacity:.9;
background:rgba(18,33,30,.55);padding:.2rem .5rem;backdrop-filter:blur(2px)}
.vm-sign:hover{transform:translateY(-5px)}
.vm-sign:hover img{transform:scale(1.09);filter:saturate(1) brightness(.94)}
.vm-sign:hover h3{transform:translateY(-3px);background:var(--verd2)}
.vm-sign p{margin-top:.6rem}
/* ── mosaic: full-bleed, not a strip ─────────────────────────────────────── */
.vm-mosaic .vm-tile{min-height:clamp(340px,32vw,620px);aspect-ratio:auto}
.vm-tile-l{bottom:0;left:0;padding:1rem 1.8rem 1rem clamp(1.2rem,3vw,2.6rem)}
/* ── trust band under the hero ───────────────────────────────────────────── */
.vm-trust{background:var(--paper);border-bottom:1px solid var(--rule);
padding:clamp(1.1rem,1.6vw,1.8rem) var(--gut)}
.vm-trust ul{max-width:1360px;margin:0 auto;padding:0;list-style:none;display:grid;
grid-template-columns:repeat(auto-fit,minmax(min(200px,100%),1fr));gap:1rem 2rem}
.vm-trust li{display:flex;gap:.7rem;align-items:baseline;
font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.09em;
text-transform:uppercase;color:var(--ink)}
.vm-trust b{color:var(--verd);font-weight:500}
/* ── header legibility over a bright hero ────────────────────────────────── */
.vm-head{position:sticky;top:0;isolation:isolate;background:var(--ink);
border-bottom:1px solid rgba(242,239,232,.14)}
.vm-head.is-stuck{background:var(--ink);backdrop-filter:none;
border-bottom-color:rgba(242,239,232,.24)}
.vm-nav a,.vm-cart{color:#F2EFE8;text-shadow:none}
.vm-head.is-stuck .vm-nav a,.vm-head.is-stuck .vm-cart{color:#F2EFE8}
.vm-nav a:hover,.vm-cart:hover{border-bottom-color:var(--verd-l)}
.vm-head .vm-lg-d{display:block} .vm-head .vm-lg-l{display:none}
.vm-head.is-stuck .vm-lg-d{display:block} .vm-head.is-stuck .vm-lg-l{display:none}
.vm-burger span,.vm-head.is-stuck .vm-burger span{background:#F2EFE8}
/* ── nine departments read as 3x3, never 4/4/1 ───────────────────────────── */
@media(min-width:1120px){ .vm-board{grid-template-columns:repeat(3,1fr)} }
@media(min-width:760px) and (max-width:1119px){ .vm-board{grid-template-columns:repeat(2,1fr)} }
/* ── a fixed header must not swallow the thing you scrolled to ───────────── */
html{scroll-padding-top:clamp(74px,7vw,104px)}
.vm-head{pointer-events:auto}
.vm-head-in,.vm-head .vm-brand,.vm-head .vm-nav,.vm-head .vm-head-r{pointer-events:auto}
.vm-lg{max-height:44px}
/* ══ WOOCOMMERCE SURFACES ═══════════════════════════════════════════════════
Every surface designed, not themed. */
/* header: on any page without a dark hero, start in the light state */
#vm-main{padding-top:0}
/* tap targets: WCAG 2.2 AA floor is 24x24; this build commits to 40x40 */
.vm-nav a,.vm-cart,.vm-foot-col a,.vm-foot-base a{min-height:40px;
display:inline-flex;align-items:center}
.vm-cart{min-width:40px;justify-content:center}
.vm-burger{min-width:44px;min-height:44px}
.vm-skip{min-height:40px;display:inline-flex;align-items:center}
.vm-brand{min-height:44px;display:inline-flex;align-items:center}
/* the WooCommerce container */
.woocommerce-page .site-content,.woocommerce .site-content{background:var(--paper)}
.woocommerce-page .ast-container,.woocommerce .ast-container{max-width:1360px!important;
margin:0 auto!important;padding:0 var(--gut) var(--sec)!important}
/* archive header */
.woocommerce-breadcrumb{font-family:"Chivo Mono",monospace;font-size:var(--s1);
letter-spacing:.11em;text-transform:uppercase;color:var(--mute);
padding:clamp(1.4rem,3vw,2.6rem) 0 0;margin:0 0 .8rem}
.woocommerce-breadcrumb a{color:var(--verd);text-decoration:none}
.woocommerce-products-header{padding:0 0 1.4rem}
.woocommerce-products-header__title{font-size:var(--s6)!important;color:var(--ink)}
.term-description{max-width:64ch;color:var(--body)}
.woocommerce-result-count{font-family:"Chivo Mono",monospace;font-size:var(--s1);
letter-spacing:.09em;text-transform:uppercase;color:var(--mute);margin:0 0 1.6rem}
.woocommerce-ordering select{font-family:"Chivo Mono",monospace;font-size:var(--s1);
border:1px solid var(--rule);background:var(--paper);padding:.6rem 1rem;color:var(--ink)}
/* the product grid */
.woocommerce ul.products{display:grid!important;
grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))!important;
gap:clamp(1.2rem,2.2vw,2.4rem)!important;margin:0!important;padding:0!important;list-style:none}
.woocommerce ul.products::before,.woocommerce ul.products::after{content:none!important;display:none!important}
.woocommerce ul.products li.product{width:auto!important;margin:0!important;float:none!important;
display:flex!important;flex-direction:column;text-align:left}
.woocommerce ul.products li.product a img,.astra-shop-thumbnail-wrap img{
aspect-ratio:4/3;object-fit:cover;width:100%;margin:0 0 .9rem;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.woocommerce ul.products li.product:hover a img{transform:scale(1.04)}
.astra-shop-thumbnail-wrap{overflow:hidden}
.woocommerce ul.products li.product .ast-woo-product-category,
.woocommerce ul.products li.product .ast-shop-product-out-of-stock{
font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.11em;
text-transform:uppercase;color:var(--verd);margin-bottom:.35rem}
.woocommerce ul.products li.product .woocommerce-loop-product__title{
font-size:var(--s3)!important;color:var(--ink)!important;line-height:1.28;
margin:0 0 .35rem!important;padding:0!important;min-height:2.55em;font-weight:400}
.woocommerce ul.products li.product .price{font-family:"Chivo Mono",monospace!important;
font-size:var(--s2)!important;color:var(--verd)!important;margin:0 0 .9rem!important;display:block}
.woocommerce ul.products li.product .price del{color:var(--mute)!important;opacity:.7}
/* buttons — never the framework blue */
.woocommerce a.button,.woocommerce button.button,.woocommerce input.button,
.woocommerce a.button.alt,.woocommerce button.button.alt,.woocommerce #respond input#submit,
.woocommerce .widget_shopping_cart a.button,.wc-block-components-button{
font-family:"Chivo Mono",monospace!important;font-size:var(--s1)!important;
letter-spacing:.13em!important;text-transform:uppercase!important;font-weight:500!important;
background:var(--verd)!important;color:#fff!important;border:0!important;border-radius:0!important;
padding:.9rem 1.6rem!important;line-height:1.2!important;transition:background .25s!important;
margin-top:auto!important;width:100%!important;white-space:nowrap!important;text-align:center}
.woocommerce a.button:hover,.woocommerce button.button:hover,.woocommerce input.button:hover,
.woocommerce a.button.alt:hover,.woocommerce button.button.alt:hover{background:var(--ink)!important}
.woocommerce .button.wc-backward{width:auto!important}
.woocommerce a.added_to_cart{display:block;font-family:"Chivo Mono",monospace;font-size:var(--s1);
letter-spacing:.1em;text-transform:uppercase;color:var(--verd);margin-top:.6rem}
/* pagination */
.woocommerce nav.woocommerce-pagination ul{border:0!important;display:flex;gap:.5rem;justify-content:center;margin-top:3rem}
.woocommerce nav.woocommerce-pagination ul li{border:0!important}
.woocommerce nav.woocommerce-pagination ul li a,.woocommerce nav.woocommerce-pagination ul li span{
font-family:"Chivo Mono",monospace;font-size:var(--s2);padding:.6rem .95rem!important;
border:1px solid var(--rule);color:var(--ink);text-decoration:none;background:var(--paper)}
.woocommerce nav.woocommerce-pagination ul li span.current{background:var(--verd);color:#fff;border-color:var(--verd)}
/* ── the product page ────────────────────────────────────────────────────── */
.single-product div.product{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(400px,100%),1fr));
gap:clamp(2rem,4vw,4.5rem);align-items:start}
.single-product .woocommerce-product-gallery{margin:0!important;width:auto!important;float:none!important}
.single-product .woocommerce-product-gallery img{width:100%;height:auto;display:block}
.single-product div.product .summary{margin:0!important;width:auto!important;float:none!important}
.single-product .product_title{font-size:var(--s6)!important;color:var(--ink);margin:0 0 .7rem!important;line-height:1.06}
.single-product div.product p.price,.single-product div.product span.price{
font-family:"Chivo Mono",monospace!important;font-size:var(--s5)!important;
color:var(--verd)!important;margin:0 0 1.4rem!important}
.single-product .woocommerce-product-details__short-description{font-size:var(--s3);color:var(--body);
padding-bottom:1.4rem;border-bottom:1px solid var(--rule);margin-bottom:1.4rem}
.single-product form.cart{display:flex;gap:.8rem;align-items:stretch;margin:0 0 1.8rem!important}
.single-product form.cart .quantity input{width:76px;height:100%;border:1px solid var(--rule);
background:var(--paper);font-family:"Chivo Mono",monospace;text-align:center;padding:.9rem .4rem}
.single-product form.cart .single_add_to_cart_button{flex:1 1 auto;width:auto!important;margin-top:0!important}
.single-product .product_meta{font-family:"Chivo Mono",monospace;font-size:var(--s1);
letter-spacing:.07em;color:var(--mute);border-top:1px solid var(--rule);padding-top:1.2rem}
.single-product .product_meta a{color:var(--verd);text-decoration:none}
.woocommerce-tabs{grid-column:1/-1;margin-top:clamp(2.4rem,4vw,4rem);border-top:1px solid var(--rule);padding-top:2rem}
.woocommerce-tabs ul.tabs{padding:0!important;margin:0 0 1.6rem!important;list-style:none;display:flex;gap:1.6rem}
.woocommerce-tabs ul.tabs::before{display:none!important}
.woocommerce-tabs ul.tabs li{background:none!important;border:0!important;border-radius:0!important;padding:0!important}
.woocommerce-tabs ul.tabs li::before,.woocommerce-tabs ul.tabs li::after{display:none!important}
.woocommerce-tabs ul.tabs li a{font-family:"Chivo Mono",monospace!important;font-size:var(--s1)!important;
letter-spacing:.13em;text-transform:uppercase;color:var(--mute)!important;padding:.4rem 0!important;
border-bottom:2px solid transparent}
.woocommerce-tabs ul.tabs li.active a{color:var(--ink)!important;border-bottom-color:var(--verd)}
.woocommerce-tabs .panel h2{font-size:var(--s5);margin-bottom:.9rem}
.woocommerce-tabs .panel h3{font-family:"Chivo Mono",monospace;font-size:var(--s1);letter-spacing:.12em;
text-transform:uppercase;color:var(--verd);margin:1.6rem 0 .5rem}
.related.products{grid-column:1/-1;margin-top:clamp(2.4rem,4vw,4rem);border-top:1px solid var(--rule);padding-top:2.4rem}
.related.products > h2{font-size:var(--s5);margin-bottom:1.6rem}
/* ── cart + checkout ─────────────────────────────────────────────────────── */
.woocommerce table.shop_table{border:0!important;border-radius:0!important}
.woocommerce table.shop_table th{font-family:"Chivo Mono",monospace;font-size:var(--s1);
letter-spacing:.11em;text-transform:uppercase;color:var(--mute);border-bottom:1px solid var(--rule);padding:1rem .6rem}
.woocommerce table.shop_table td{border-top:1px solid var(--rule);padding:1.1rem .6rem;font-size:var(--s2)}
.woocommerce .cart_totals h2,.woocommerce-checkout h3,.woocommerce-billing-fields h3{
font-size:var(--s4)!important;color:var(--ink);margin-bottom:1rem}
.woocommerce form .form-row input.input-text,.woocommerce form .form-row textarea,
.woocommerce form .form-row select,.select2-container .select2-selection{
border:1px solid var(--rule)!important;border-radius:0!important;padding:.85rem 1rem!important;
background:var(--paper)!important;font-family:"Fraunces",serif!important;font-size:var(--s2)!important;
color:var(--ink)!important;height:auto!important}
.woocommerce form .form-row label{font-family:"Chivo Mono",monospace;font-size:var(--s1);
letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-bottom:.4rem}
.woocommerce-checkout #payment{background:var(--bone)!important;border-radius:0!important;padding:1.4rem}
.woocommerce-checkout #payment ul.payment_methods{border-bottom:1px solid var(--rule)!important;padding:0 0 1rem!important}
.woocommerce-checkout #payment div.form-row{padding:1rem 0 0!important}
.woocommerce-info,.woocommerce-message,.woocommerce-error{border-top-color:var(--verd)!important;
background:var(--bone)!important;font-size:var(--s2)}
.woocommerce-info::before,.woocommerce-message::before{color:var(--verd)!important}
/* ── two measured fixes ──────────────────────────────────────────────────── */
/* 1 · WooCommerce ships the gallery at opacity:0 and reveals it with JS.
LiteSpeed defers that JS, so the product photo never appears. Force it. */
.woocommerce-product-gallery,.woocommerce div.product div.images.woocommerce-product-gallery{
opacity:1!important;visibility:visible!important}
.woocommerce div.product div.images{opacity:1!important}
/* 2 · Astra does not stretch ul.products, so the grid computed 2 columns
inside an 819px list in a 1274px container. */
.woocommerce ul.products,.woocommerce-page ul.products{width:100%!important;max-width:100%!important;
flex:1 1 100%!important}
.ast-woocommerce-container{width:100%!important}
/* result count and ordering must not collide with the grid */
.woocommerce .woocommerce-result-count{float:none!important;display:block}
.woocommerce .woocommerce-ordering{float:none!important;display:block;margin:0 0 1.6rem}
@media(min-width:760px){
.woocommerce-products-header + .woocommerce-result-count,.woocommerce .woocommerce-result-count{display:inline-block;margin-right:1.5rem}
.woocommerce .woocommerce-ordering{display:inline-block;vertical-align:middle}
}
/* pagination — Astra renders .page-numbers, not span.current */
.woocommerce nav.woocommerce-pagination ul li a.page-numbers,
.woocommerce nav.woocommerce-pagination ul li span.page-numbers{
background:var(--paper)!important;color:var(--ink)!important;border:1px solid var(--rule)!important;
font-family:"Chivo Mono",monospace;font-size:var(--s2);padding:.6rem .95rem!important;
text-decoration:none;border-radius:0!important}
.woocommerce nav.woocommerce-pagination ul li .page-numbers.current,
.woocommerce nav.woocommerce-pagination ul li span.current{
background:var(--verd)!important;color:#fff!important;border-color:var(--verd)!important}
.woocommerce nav.woocommerce-pagination ul li a.page-numbers:hover{background:var(--bone)!important}
/* the count / sorting row */
.woocommerce .woocommerce-result-count{margin:0 1.5rem 1.6rem 0}
.woocommerce .woocommerce-ordering{margin:0 0 1.6rem}
/* ══ TYPOGRAPHY — the display face must win over the theme ═════════════════
Measured 2026-09-09: .vm-hero-card h1 computed to -apple-system at 86.4px
with line-height 120.96px (ratio 1.40). Display type at that size wants
~1.02-1.06; 1.40 is what makes a headline read as unstyled body copy. */
:where(#vm-main, .vm-head, .vm-foot) h1,
:where(#vm-main, .vm-head, .vm-foot) h2,
:where(#vm-main, .vm-head, .vm-foot) h3,
.vm-hero-card h1, .vm-band p, .vm-macro h2, .vm-sign h3, .vm-card h3{
font-family:"Fraunces",Georgia,"Times New Roman",serif;
font-optical-sizing:auto}
.vm-hero-card h1{line-height:1.04;letter-spacing:-.022em;font-weight:500;
text-wrap:balance;max-width:15ch}
.vm-band p{line-height:1.06;letter-spacing:-.018em;text-wrap:balance}
.vm-macro h2{line-height:1.05;letter-spacing:-.018em;text-wrap:balance}
.vm-sign h3{line-height:1.12;letter-spacing:-.012em}
h2{line-height:1.07;letter-spacing:-.016em;text-wrap:balance}
/* Body copy is the serif; the mono is the RECORD layer and must keep it.
.vm-kick is a inside .vm-hero-card, so an unscoped rule steals it. */
.vm-hero-card p:not(.vm-kick), .vm-sign p:not(.vm-kick),
.vm-card p:not(.vm-kick), .vm-prose p:not(.vm-kick){
font-family:"Fraunces",Georgia,serif;font-optical-sizing:auto}
.vm-kick,.vm-sign-n,.vm-tile-l span,.vm-stat .l,.vm-btn,.vm-nav a,.vm-cart,
.vm-foot h3,.vm-card .pr{font-family:"Chivo Mono",monospace!important}
/* the kicker is a
, so every .vm-hero-card p rule lands on it. It is a
RECORD label and holds the mono scale, not the body scale. */
.vm-kick{font-size:var(--s1)!important;line-height:1.5!important}
/* ══ the hero meets the masthead with no gutter ════════════════════════════
#vm-main gained a top pad so inner pages clear the now-opaque bar. On the
home page the hero is the first thing under the bar and must butt against
it, or a white band opens between them. Measured: 66px of dead white. */
body.home .vm-hero{margin-top:0}
/* Astra puts a hard 60px margin-top on .content-area. With a sticky opaque
masthead that renders as a white gutter between the bar and the hero —
measured 60px at 1440. Sections own their own top spacing here. */
#primary.content-area,.site-content .content-area,.ast-container .content-area{margin-top:0!important}
body.home .vm-hero{padding-top:0}