/* ZOVII skin: editorial look from the Susanna homepage mockup (ZALECENIA/Zovii-homepage-mockup).
   Appearance only. Every rule is scoped to body.zovii; HORSECHAMP / TECHNOHORSE / EMG are untouched.
   `:not(#zs)` lifts specificity above the shared system.css/tokens.css rules without touching them. */
body.zovii{--zs-ink:#27241f;--zs-wine:#63001f;--zs-wine-h:#7e1737;--zs-bone:#f4f1e9;--zs-paper:#faf9f6;--zs-yellow:#fdce66;--zs-line:#dedbd3;--zs-mute:#706b63;
  background:#fff!important;color:var(--zs-ink)!important;font-family:Arial,Helvetica,sans-serif!important}

/* ---------- 1. Sharp edges, no glass, no soft shadows ---------- */
html body.zovii:not(#zs):not(#zt) *,html body.zovii:not(#zs):not(#zt) *::before,html body.zovii:not(#zs):not(#zt) *::after{border-radius:0!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;box-shadow:none!important}
html body.zovii:not(#zs):not(#zt) :is(a,button,input,select,textarea,summary,[tabindex]):focus-visible{outline:2px solid var(--zs-wine)!important;outline-offset:4px!important}
/* Selected states used to be drawn with shadows: draw them with a 1px ink frame instead (mockup swatch). */
html body.zovii:not(#zs):not(#zt) :is(button,label,i,span):is([aria-pressed=true],[aria-checked=true],.is-active,.selected,.is-on){outline:1px solid var(--zs-ink)!important;outline-offset:2px!important}
html body.zovii:not(#zs):not(#zt) :is(input[type=checkbox],input[type=radio],input[type=range]){accent-color:var(--zs-wine)!important}

/* ---------- 2. Typography ---------- */
html body.zovii:not(#zs):not(#zt){--hc-sans:Arial,Helvetica,sans-serif!important;--hc-serif:Georgia,'Times New Roman',serif!important;--hc-btn-radius:0!important;--hc-r-pill:0!important;--hc-field-radius:0!important;--hc-card-radius:0!important;--hc-r-media:0!important}
body.zovii:not(#zs):not(#zt) .zs-quote :is(blockquote,blockquote *,q,p:first-of-type){font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important;letter-spacing:-.01em!important}
/* Word-by-word reveal keeps its opacity steps, without the blur. */
body.zovii:not(#zs):not(#zt) .zvs-reveal *{filter:none!important}
/* Text reveals and the interior steps fade in without a blur (photos keep their own filters). */
body.zovii:not(#zs):not(#zt) :is(h1,h2,h3,p,li,span,em,b,strong,small,dt,dd){filter:none!important}
body.zovii:not(#zs):not(#zt) .zvs-reveal{font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important;letter-spacing:-.01em!important;line-height:1.35!important}
body.zovii:not(#zs):not(#zt) :is(main,footer,.topbar){font-family:Arial,Helvetica,sans-serif!important}
body.zovii:not(#zs):not(#zt) :is(h1,h2,.hc-h2){font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important;letter-spacing:-.025em!important}
body.zovii:not(#zs):not(#zt) h3{font-family:Georgia,'Times New Roman',serif!important;font-weight:400!important;letter-spacing:-.01em!important}
body.zovii:not(#zs):not(#zt) main :is(h1,h2,h3) em{font-weight:400!important}
body.zovii:not(#zs):not(#zt) .zv-kicker{font-family:Arial,Helvetica,sans-serif!important;font-size:11px!important;font-weight:400!important;letter-spacing:1.5px!important;text-transform:uppercase!important;color:var(--zs-wine)!important;background:none!important;border:0!important;padding:0!important}

/* ---------- 3. Header: full width, sticky, white, 1px rule ---------- */
body.zovii:not(#zs):not(#zt) .topbar{position:sticky!important;top:0!important;margin:0!important;width:100%!important;max-width:none!important;height:90px!important;padding:0 5%!important;background:rgba(255,255,255,.96)!important;border:0!important;border-bottom:1px solid var(--zs-line)!important;color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .topbar nav{gap:30px!important}
body.zovii:not(#zs):not(#zt) .topbar nav a:not(.nav-cta){font-size:14px!important;font-weight:600!important;color:var(--zs-ink)!important;padding:12px 0!important;border-bottom:2px solid transparent!important;background:none!important;opacity:1!important}
body.zovii:not(#zs):not(#zt) .topbar nav a:not(.nav-cta):is(:hover,.active,[aria-current=page]){border-bottom-color:var(--zs-wine)!important;color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .topbar nav a:not(.nav-cta)::after{display:none!important}
body.zovii:not(#zs):not(#zt) .topbar .nav-cta{background:var(--zs-wine)!important;color:#fff!important;border:1px solid var(--zs-wine)!important;padding:12px 21px!important;font-size:14px!important;font-weight:600!important}
body.zovii:not(#zs):not(#zt) .topbar .nav-cta:hover{background:var(--zs-wine-h)!important;border-color:var(--zs-wine-h)!important}
body.zovii:not(#zs):not(#zt) .topbar .lang,body.zovii:not(#zs):not(#zt) .topbar .lang a{font-size:11px!important;color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .topbar .lang a.active{color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) .topbar .menu-toggle{background:none!important;border:1px solid var(--zs-line)!important;color:var(--zs-ink)!important}
/* The photo hero no longer slides under a glass bar: it starts below the white header. */
body.zovii.hero-under:not(#zs):not(#zt) #main{margin-top:0!important}
@media(max-width:900px){
  body.zovii:not(#zs):not(#zt) .topbar{height:72px!important;padding:0 6%!important}
  body.zovii:not(#zs):not(#zt) .topbar nav{gap:16px!important}
  body.zovii:not(#zs):not(#zt) .topbar nav a:not(.nav-cta){font-size:12px!important}
  body.zovii:not(#zs):not(#zt) .topbar nav[id]{background:#fff!important;border-bottom:1px solid var(--zs-line)!important}
  body.zovii:not(#zs):not(#zt) .topbar nav[id] a:not(.nav-cta){font-size:15px!important;border-bottom:1px solid var(--zs-line)!important}
  body.zovii:not(#zs):not(#zt) .topbar nav[id] a:not(.nav-cta):is(:hover,.active){border-bottom-color:var(--zs-wine)!important}
}

/* ---------- 4. Buttons and links ---------- */
body.zovii:not(#zs):not(#zt) :is(.zv-btn,.button,.config-open){display:inline-flex!important;align-items:center!important;justify-content:space-between!important;gap:28px!important;padding:13px 23px!important;background:var(--zs-wine)!important;color:#fff!important;border:1px solid var(--zs-wine)!important;font-family:Arial,Helvetica,sans-serif!important;font-size:14px!important;font-weight:600!important;letter-spacing:0!important;text-transform:none!important;transform:none!important}
body.zovii:not(#zs):not(#zt) :is(.zv-btn,.button,.config-open):hover{background:var(--zs-wine-h)!important;border-color:var(--zs-wine-h)!important;color:#fff!important}
/* Secondary actions become the mockup's underlined text link. */
body.zovii:not(#zs):not(#zt) :is(.zv-btn-line,.zv-btn-ghost,.button.secondary){background:transparent!important;color:var(--zs-ink)!important;border:0!important;border-bottom:1px solid #a9a399!important;padding:9px 0!important;gap:20px!important;font-weight:600!important}
body.zovii:not(#zs):not(#zt) :is(.zv-btn-line,.zv-btn-ghost,.button.secondary):hover{background:transparent!important;color:var(--zs-wine)!important;border-bottom-color:var(--zs-wine)!important}
/* A second button in an action row reads as the mockup's text link (one filled action per row). */
body.zovii:not(#zs):not(#zt) .zvp-actions .zv-btn~.zv-btn{background:transparent!important;color:var(--zs-ink)!important;border:0!important;border-bottom:1px solid #a9a399!important;padding:9px 0!important;gap:20px!important}
body.zovii:not(#zs):not(#zt) .zv-link{color:var(--zs-ink)!important;border-bottom:1px solid #a9a399!important;padding:9px 0!important;font-size:13px!important;background:none!important;text-decoration:none!important}
body.zovii:not(#zs):not(#zt) .zv-link:hover{color:var(--zs-wine)!important;border-bottom-color:var(--zs-wine)!important}

/* ---------- 5. Surfaces: flat cards with hairlines ---------- */
body.zovii:not(#zs):not(#zt) .hc-panel{background-image:none!important}
body.zovii:not(#zs):not(#zt) :is(.zv2-mo,.zwk-card,.zwo-card,.zwo-out,.zvf-card,.zv-steps,.zv3-list,.zv-table-wrap,.zwb-col,.hc-company,.notice,.zws-copy){background:#fff!important;border:1px solid var(--zs-line)!important}
body.zovii:not(#zs):not(#zt) .zwb-col.is-us{background:var(--zs-wine)!important;border-color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) :is(details.hc-round-s,.zv3-faq details,.zv-faq details,main details){background:transparent!important;border:0!important;border-bottom:1px solid var(--zs-line)!important}
body.zovii:not(#zs):not(#zt) main summary::after{background:none!important;color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) :is(input:not([type=checkbox]):not([type=radio]):not([type=range]),select,textarea){background:#fff!important;border:1px solid var(--zs-line)!important;color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) :is(input,select,textarea):focus{border-color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) label.choice{background:#fff!important;border:1px solid var(--zs-line)!important}
body.zovii:not(#zs):not(#zt) label.choice.selected{border-color:var(--zs-ink)!important;background:var(--zs-paper)!important}
body.zovii:not(#zs):not(#zt) .zv-toggle{background:#fff!important;border:1px solid var(--zs-line)!important;padding:3px!important}
body.zovii:not(#zs):not(#zt) .zv-toggle button.is-active{background:var(--zs-wine)!important;color:#fff!important;outline:0!important}
body.zovii:not(#zs):not(#zt) .zv-toggle button.is-active *{color:#fff!important}

/* Inset rounded panels become full-bleed bands (mockup .drive / .manufactory). */
body.zovii:not(#zs):not(#zt) #main .hc-panel{margin-left:0!important;margin-right:0!important}
/* Captions on photos: no dark gradient, a small white label instead (mockup .asset-label). */
body.zovii:not(#zs):not(#zt) .zv2-mo-ph::after{background:none!important}
body.zovii:not(#zs):not(#zt) .zv2-mo-tag{background:rgba(255,255,255,.92)!important;color:var(--zs-ink)!important;padding:7px 11px!important;font-size:11px!important;letter-spacing:1.2px!important;text-transform:uppercase!important;font-family:Arial,Helvetica,sans-serif!important}
body.zovii:not(#zs):not(#zt) .zv2-mo-tag b{color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) .zv2-mud figcaption{background:rgba(255,255,255,.92)!important;color:var(--zs-mute)!important;left:22px!important;right:auto!important;bottom:20px!important;padding:10px 14px!important;max-width:calc(100% - 44px)!important}
body.zovii:not(#zs):not(#zt) .zv2-mud figcaption b{color:var(--zs-ink)!important;font-family:Georgia,serif!important;font-weight:400!important}
body.zovii:not(#zs):not(#zt) .zv2-card-copy{background:#fff!important}
body.zovii:not(#zs):not(#zt) .zv2-c1 .zv2-card-copy{width:min(460px,90%)!important;padding:26px 30px!important;margin:0 0 24px 24px!important}
body.zovii:not(#zs):not(#zt) .zv2-card-copy :is(h3,p){color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .zv2-card-copy p{color:var(--zs-mute)!important}
body.zovii:not(#zs):not(#zt) .zv2-n{color:var(--zs-wine)!important;background:none!important;border:0!important}
body.zovii:not(#zs):not(#zt) .zv2-card{border:1px solid var(--zs-line)!important;background:#fff!important}

/* ---------- 6. Photo heroes: no dark gradient. Copy sits on a flat white panel (mockup hero). ---------- */
body.zovii:not(#zs):not(#zt) :is(.zvc-hero,.zvh-hero)::after{background:none!important}
body.zovii:not(#zs):not(#zt) .zvc-hero-copy,body.zovii:not(#zs):not(#zt) .zvh-hero :is(.zvh-copy,.zvh-hero-copy){background:#fff!important;color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .zvc-hero-copy{left:0!important;top:0!important;bottom:0!important;width:min(760px,54vw)!important;padding:48px 56px 40px 5vw!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important}
body.zovii:not(#zs):not(#zt) .zvh-hero{position:relative!important}
body.zovii:not(#zs):not(#zt) .zvh-hero .zvh-copy{position:absolute!important;z-index:2!important;left:0!important;top:0!important;bottom:0!important;width:min(820px,58vw)!important;max-width:none!important;margin:0!important;padding:40px 56px 36px 5vw!important;display:flex!important;flex-direction:column!important;justify-content:center!important;align-items:flex-start!important;transform:none!important}
body.zovii:not(#zs):not(#zt) .zvh-hero :is(.zv-crumbs,.zv-crumbs *,.zvk-strip,.zvk-strip *,.zvh-chip){color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .zvh-hero :is(.zvk-strip dd,.zv-crumbs){color:var(--zs-mute)!important}
body.zovii:not(#zs):not(#zt) .zvh-hero .zvk-strip{max-width:100%!important;flex-wrap:wrap!important;border-top:1px solid var(--zs-line)!important;padding-top:18px!important}
body.zovii:not(#zs):not(#zt) .zvh-hero .zvk-strip dt{font-family:Georgia,serif!important;color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) .zvh-chip{background:transparent!important;border:1px solid var(--zs-line)!important;padding:5px 10px!important;font-size:11px!important}
@media(max-width:900px){
  /* Phone and tablet: the white copy panel sits on the lower part of the photo, rider and trunk stay visible above it. */
  /* Phone: photo first, copy on white below it (mockup mobile order), so the photo is never covered. */
  body.zovii:not(#zs):not(#zt) :is(.zvc-hero,.zvh-hero){height:auto!important;min-height:0!important;display:block!important;padding:0!important;margin:0!important;background:#fff!important}
  body.zovii:not(#zs):not(#zt) .zvc-hero-media{transform:none!important;margin:0!important}
  body.zovii:not(#zs):not(#zt) :is(.zvc-hero-media,.zvh-hero>picture){position:relative!important;inset:auto!important;display:block!important;height:56svh!important}
  body.zovii:not(#zs):not(#zt) :is(.zvc-hero-media,.zvh-hero>picture) img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important}
  body.zovii:not(#zs):not(#zt) :is(.zvc-hero-copy,.zvh-hero .zvh-copy){position:relative!important;left:auto!important;right:auto!important;top:auto!important;bottom:auto!important;width:100%!important;padding:30px 6% 34px!important;opacity:1!important}
  body.zovii:not(#zs):not(#zt) :is(.zvc-hero-foot,.zvh-foot){display:none!important}
}
body.zovii:not(#zs):not(#zt) .zvc-hero-foot{color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .zvc-hero-copy :is(h1,h1 *,p,dt,dd,.zv-lead),body.zovii:not(#zs):not(#zt) .zvh-hero :is(h1,h1 *,p){color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-hero,.zvh-hero) h1 em,body.zovii:not(#zs):not(#zt) :is(.zvc-hero,.zvh-hero) h1 em *{color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) .zvc-hero-copy :is(dd,.zv-lead){color:var(--zs-mute)!important}
body.zovii:not(#zs):not(#zt) .zvc-hero-copy dt{color:var(--zs-wine)!important;font-family:Georgia,serif!important;font-style:italic!important}
body.zovii:not(#zs):not(#zt) .zvc-facts{border-top:1px solid var(--zs-line)!important}
body.zovii:not(#zs):not(#zt) .zvc-facts>div{border-color:var(--zs-line)!important}
body.zovii:not(#zs):not(#zt) .zvc-bar{display:none!important}

/* ---------- 7. Closing sections: flat wine field, yellow call to action (mockup .closing) ---------- */
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final)::after{background:rgba(99,0,31,.9)!important}
body.zovii:not(#zs):not(#zt) .zv-final{background:var(--zs-wine)!important;background-image:none!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) .zv-kicker{color:var(--zs-yellow)!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) :is(h2,h2 *){color:#fff!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) p{color:#d9c4ca!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) .zv-btn:not(.zv-btn-line):not(.zv-btn-ghost){background:var(--zs-yellow)!important;color:var(--zs-wine)!important;border-color:var(--zs-yellow)!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) .zv-btn:not(.zv-btn-line):not(.zv-btn-ghost):hover{background:#fff!important;border-color:#fff!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) :is(.zv-btn-line,.zv-btn-ghost){color:#fff!important;border-bottom-color:rgba(255,255,255,.5)!important}

/* Summary cards on the wine field: hairline frames, no white boxes. */
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) :is(.zvf-card,.zv-steps,.zv-steps li){background:transparent!important;border-color:rgba(255,255,255,.32)!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) :is(.zvf-card,.zv-steps) *{color:#fff!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) :is(.zvf-card,.zv-steps) :is(p,small,.zvf-k){color:#d9c4ca!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-finale,.zs-final,.zv-final) .zv-steps span{color:var(--zs-yellow)!important}

/* ---------- 8. Interior chapter: bone stage instead of the dark radial glow ---------- */
body.zovii:not(#zs):not(#zt) .zvc-open{background:var(--zs-bone)!important;color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .zvc-open .zv-kicker{color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) .zvc-open *:not(.zv-kicker):not(em){color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .zvc-open h2 em{color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) :is(.zvc-studio,.zvc-studio-stage){background:var(--zs-paper)!important;background-image:none!important}

/* ---------- 9. Footer: white, hairline, as the mockup ---------- */
body.zovii:not(#zs):not(#zt) .footer{background:#fff!important;color:var(--zs-ink)!important;border-top:1px solid var(--zs-line)!important}
body.zovii:not(#zs):not(#zt) .footer :is(a,p,b,span,small,div){color:var(--zs-ink)!important}
body.zovii:not(#zs):not(#zt) .footer p,body.zovii:not(#zs):not(#zt) .footer small{color:var(--zs-mute)!important}
body.zovii:not(#zs):not(#zt) .footer a:hover{color:var(--zs-wine)!important}
body.zovii:not(#zs):not(#zt) .footer .brand-logo{filter:none!important;mix-blend-mode:normal!important}