/* VOENGEAR V2 motion: reveal on scroll, hover and press transitions, dialog entrances. Loaded last. */
:root{--vg-ease:cubic-bezier(.2,.65,.3,1)}
html.vg-motion [data-reveal]{opacity:0;transform:translateY(18px);transition:opacity .7s var(--vg-ease),transform .7s var(--vg-ease);transition-delay:var(--reveal-delay,0ms)}
html.vg-motion [data-reveal].is-in{opacity:1;transform:none}
/* Cards: the same transition list drives the reveal and the hover lift, so the two never fight. */
.product-grid>[data-card]{transition:opacity .7s var(--vg-ease),transform .45s var(--vg-ease),box-shadow .45s var(--vg-ease);transition-delay:var(--reveal-delay,0ms)}
.product-grid>[data-card]:hover{transition-delay:0ms}
.product-grid>[data-card]:not([data-reveal]):hover,.product-grid>[data-card].is-in:hover{transform:translateY(-3px);box-shadow:0 14px 32px #00000012}
.category-card,.promo-card,.editorial-category,.journal-card,.catalog-child-grid a,.carrier-tile,.card-swatches>a{transition:transform .35s var(--vg-ease),box-shadow .35s var(--vg-ease),border-color .2s,background-color .2s,color .2s,opacity .7s var(--vg-ease)}
.category-card:hover,.promo-card:hover,.journal-card:hover{transform:translateY(-3px);box-shadow:0 14px 32px #00000012}
a,.text-button,.icon-button,.favorite,.quick-view,.primary-nav a,.mobile-bottom>a,.mobile-bottom>button{transition:color .2s,background-color .2s,border-color .2s,opacity .2s,transform .2s var(--vg-ease)}
.button,.card-order,.button-accent{transition:background-color .22s,color .22s,border-color .22s,transform .18s var(--vg-ease),box-shadow .22s}
.button:active,.card-order:active,.icon-button:active,.phone-launcher:active,.chat-launcher:active{transform:translateY(1px) scale(.985)}
.favorite[aria-pressed=true] .icon{animation:vg-pop .35s var(--vg-ease)}
@keyframes vg-pop{0%{transform:scale(.7)}60%{transform:scale(1.18)}100%{transform:scale(1)}}
.phone-launcher,.chat-launcher{transition:transform .3s var(--vg-ease),opacity .3s,visibility .3s,box-shadow .3s}
.phone-launcher:hover,.chat-launcher:hover{transform:translateY(-2px);box-shadow:0 10px 30px #0003}
.favorites-count,.cart-count{transition:transform .25s var(--vg-ease)}
.mobile-bottom .cart-count:not([hidden]),.header-tools .cart-count:not([hidden]){animation:vg-pop .4s var(--vg-ease)}
/* Dialog entrances: fade and lift for centred windows, slide for the side menu and the chat panel. */
@keyframes vg-dialog-in{from{opacity:0;transform:translateY(16px) scale(.985)}to{opacity:1;transform:none}}
@keyframes vg-slide-left{from{opacity:0;transform:translateX(-24px)}to{opacity:1;transform:none}}
@keyframes vg-rise{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes vg-fade{from{opacity:0}to{opacity:1}}
dialog[open].modal,dialog[open].welcome-dialog,dialog[open].photo-dialog{animation:vg-dialog-in .32s var(--vg-ease)}
dialog[open].mobile-menu{animation:vg-slide-left .3s var(--vg-ease)}
dialog[open].chat-panel{animation:vg-rise .3s var(--vg-ease)}
dialog[open]::backdrop{animation:vg-fade .3s ease}
/* Accordion and tab content */
.product-accordions details[open]>*:not(summary){animation:vg-fade .3s ease}
[data-product-panel]:not([hidden]),.tab-panel:not([hidden]){animation:vg-fade .35s ease}
/* Marquee keeps moving; hovering the strip pauses it so a brand can be clicked. */
.brand-marquee{scrollbar-width:none;overflow:hidden}
.brand-marquee::-webkit-scrollbar{display:none}
.brand-track{animation:brand-drift 46s linear infinite}
.brand-marquee:hover .brand-track,.brand-marquee:focus-within .brand-track{animation-play-state:paused}
.brand-run[aria-hidden=true]{display:flex}
@media(prefers-reduced-motion:reduce){html.vg-motion [data-reveal]{transition-duration:.35s}}

/* Navigation: the accent underline grows in instead of appearing at once. */
.primary-nav>a{position:relative;box-shadow:none!important}
.primary-nav>a::after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--vg-ease)}
.primary-nav>a:hover::after,.primary-nav>a:focus-visible::after,.primary-nav>a[aria-expanded=true]::after{transform:scaleX(1)}
/* Catalogue menu: sections, brand list and panes cross-fade. */
.catalog-section-link,.catalog-brand-list>a,.catalog-child-grid a,.catalog-view-all,.brand-menu-list a{transition:background-color .22s,color .22s,box-shadow .22s,padding-left .22s var(--vg-ease)}
@keyframes vg-pane{from{opacity:0}to{opacity:1}}
.catalog-mega,.catalog-content,.catalog-brand-details,.brand-mega{overflow-x:hidden}
.catalog-mega::-webkit-scrollbar,.catalog-content::-webkit-scrollbar{width:8px;height:0}
.catalog-pane:not([hidden]),.catalog-brand-details>div:not([hidden]),.brand-menu-categories>div:not([hidden]){animation:vg-pane .28s var(--vg-ease)}
.catalog-photo img{transition:transform .6s var(--vg-ease),opacity .4s}
.catalog-photo:hover img{transform:scale(1.04)}
/* Brand strip: logos as images when the brand has a picture, otherwise the styled name. */
.brand-tile{transition:background-color .25s,color .25s}
.brand-tile .brand-logo{display:block;max-height:40px;max-width:150px;width:auto;height:auto;object-fit:contain;filter:grayscale(1);opacity:.78;transition:filter .3s,opacity .3s,transform .3s var(--vg-ease)}
.brand-tile:hover .brand-logo{filter:none;opacity:1;transform:scale(1.04)}
@media(max-width:800px){.brand-tile .brand-logo{max-height:30px;max-width:120px}}
/* Lenis drives the scroll position itself; the native smooth behaviour must not animate its steps. */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth iframe{pointer-events:none}

/* Page scrollbar: 7 px, black thumb that turns accent on hover. The track piece above the thumb is black and
   the piece below stays grey, so the bar reads as a progress fill of the page. Chromium drops the
   ::-webkit-scrollbar styling as soon as scrollbar-color is set, so the standard properties go to Firefox only. */
@supports not selector(::-webkit-scrollbar){html{scrollbar-color:#161616 #ededed;scrollbar-width:thin}}
::-webkit-scrollbar{width:7px;height:7px}
::-webkit-scrollbar-track{background:#ededed}
::-webkit-scrollbar-track-piece:start{background:#161616}
::-webkit-scrollbar-track-piece:end{background:#ededed}
::-webkit-scrollbar-thumb{background:#161616;border:0;border-radius:0}
::-webkit-scrollbar-thumb:hover,::-webkit-scrollbar-thumb:active{background:#f36d21}
::-webkit-scrollbar-corner{background:#ededed}

/* Brands pane of the catalogue menu: the marks form a picture on graphite, the hovered brand lights up. */
.catalog-brand-pane{grid-template-columns:220px minmax(0,1fr) minmax(240px,32%)}
.catalog-brand-wall{display:grid;grid-template-columns:1fr 1fr;align-content:center;gap:26px 18px;padding:34px 28px;background:#171717 radial-gradient(circle at 30% 20%,#2a2a2a 0,#171717 60%);color:#fff;overflow:hidden;position:relative}
.catalog-brand-wall::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(135deg,transparent 0 22px,#ffffff05 22px 23px);pointer-events:none}
.brand-wall-item{display:flex;align-items:center;justify-content:center;min-height:38px;opacity:.72;transition:opacity .3s,transform .35s var(--vg-ease),color .3s;position:relative;z-index:1}
.brand-wall-item.is-current{opacity:1;color:var(--accent);transform:scale(1.12)}
.brand-wall-item .wm{display:inline-flex;align-items:center;gap:6px;line-height:1;white-space:nowrap;letter-spacing:-.04em;font-weight:700}
.brand-wall-item .wm em{font-style:normal;color:var(--accent)}
.brand-wall-item.is-current .wm em{color:#fff}
.wm-prabos{flex-direction:column;align-items:flex-start;gap:4px;font-size:20px;font-weight:800;letter-spacing:-.06em}
.wm-prabos i{display:block;width:100%;height:3px;background:var(--accent)}
.wm-helikon{font-size:12px;font-weight:600;letter-spacing:.2em;gap:0}
.wm-apex{font-size:20px;font-weight:800;letter-spacing:.06em;gap:8px}
.wm-apex i{width:0;height:0;border-left:7px solid transparent;border-right:7px solid transparent;border-bottom:12px solid var(--accent)}
.wm-miltec{font-size:15px;font-weight:700;letter-spacing:.04em;gap:0;padding:5px 9px;border:2px solid currentColor}
.wm-lowa{font-size:27px;font-weight:900;font-style:italic;letter-spacing:-.09em}
.wm-emerson{font-size:19px;font-weight:500;letter-spacing:-.03em;gap:0}
.wm-emerson em{font-weight:800}
.wm-511{flex-direction:column;align-items:center;gap:1px}
.wm-511 b{font-size:25px;font-weight:900;letter-spacing:-.06em}
.wm-511 small{font-size:9px;font-weight:600;letter-spacing:.3em;text-transform:uppercase}
.wm-armytek{font-size:20px;font-weight:700;font-style:italic;letter-spacing:-.04em;gap:0}
.wm-vindex{font-size:14px;font-weight:600;letter-spacing:.28em;gap:8px}
.wm-vindex i{width:16px;height:1.5px;background:currentColor}
.wm-pentagon{font-size:16px;font-weight:800;letter-spacing:.1em;gap:8px}
.wm-pentagon i{width:14px;height:14px;background:var(--accent);clip-path:polygon(50% 0,100% 38%,81% 100%,19% 100%,0 38%)}
.wm-milgear{font-size:21px;font-weight:700;letter-spacing:-.05em;gap:0}
.wm-tactec{font-size:22px;font-weight:800;letter-spacing:-.05em;gap:0}
.wm-skif{flex-direction:column;align-items:center;gap:2px}
.wm-skif b{font-size:20px;font-weight:800;letter-spacing:.16em}
.wm-skif small{font-size:9px;font-weight:600;letter-spacing:.42em}
@media(max-width:1200px){.catalog-brand-pane{grid-template-columns:190px minmax(0,1fr)}.catalog-brand-wall{display:none}}
/* Back to top: thin black outline on white, appears after the first screen. */
.to-top{position:fixed;right:24px;bottom:90px;z-index:36;width:48px;height:48px;border-radius:50%;border:1.5px solid #171717;background:#fff;color:#171717;display:flex;align-items:center;justify-content:center;padding:0;opacity:0;visibility:hidden;transform:translateY(14px);transition:opacity .35s var(--vg-ease),transform .35s var(--vg-ease),visibility .35s,background-color .25s,color .25s,box-shadow .25s}
.to-top.is-visible{opacity:1;visibility:visible;transform:none}
.to-top:hover,.to-top:focus-visible{background:#171717;color:#fff;box-shadow:0 10px 28px #0002}
.to-top .icon{width:20px;height:20px;transition:transform .3s var(--vg-ease)}
.to-top:hover .icon{transform:translateY(-2px)}
@media(max-width:800px){.to-top{left:14px;right:auto;bottom:78px;width:42px;height:42px}.to-top .icon{width:18px;height:18px}.purchase-visible .to-top{opacity:0;visibility:hidden}}

/* Hero slider: three banners on a horizontal track, timer bars in the pagination, swipe and drag. */
.studio-hero{overflow:hidden;touch-action:pan-y;user-select:none}
.studio-hero .hero-track{position:absolute;inset:0;display:flex;width:100%;height:100%;transition:transform .7s var(--vg-ease);will-change:transform}
.studio-hero .hero-slide{flex:0 0 100%;position:relative;height:100%;overflow:hidden}
.studio-hero .hero-slide picture,.studio-hero .hero-slide picture img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.studio-hero .hero-slide picture img{object-position:center 53%;transition:transform 12s linear;transform:scale(1.02)}
.studio-hero .hero-slide.is-active picture img{transform:scale(1.08)}
.studio-hero .hero-slide[data-hero-index="1"] picture img{object-position:center 40%}
.studio-hero.is-dragging .hero-track{transition:none}
.studio-hero.is-dragging{cursor:grabbing}
.studio-hero .hero-shade,.studio-hero .hero-content{position:relative;z-index:1}
.studio-hero .hero-shade{position:absolute}
.hero-copy{transition:opacity .22s ease,transform .22s var(--vg-ease)}
.hero-copy.is-switching{opacity:0;transform:translateX(-10px)}
.hero-pagination button{position:relative;border-top:0!important;padding-top:10px;overflow:hidden}
.hero-pagination button::before{content:'';position:absolute;left:0;top:0;width:100%;height:2px;background:#ffffff55}
.hero-pagination button i{position:absolute;left:0;top:0;height:2px;width:0;background:var(--accent);display:block}
.hero-pagination button.active{color:#fff}
@media(max-width:800px){.hero-pagination button{padding-top:6px}.studio-hero .hero-slide picture img{object-position:64% center}}