/* Velolaikas 2026-11-07: nothing moves while a page loads; one left edge on every page. */

/* Same space as the real fonts, so text does not reflow when they arrive. Measured against the shipped files. */
@font-face{font-family:'VL Roboto Fallback';font-weight:100 500;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:99.9%;ascent-override:92.9%;descent-override:24.4%;line-gap-override:0%}
@font-face{font-family:'VL Roboto Fallback';font-weight:600 900;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:92.8%;ascent-override:100%;descent-override:26.3%;line-gap-override:0%}
@font-face{font-family:'VL Barlow Fallback';font-weight:600;src:local('Arial Bold'),local('Arial-BoldMT'),local('Helvetica Bold'),local('Liberation Sans Bold');size-adjust:77%;ascent-override:129.9%;descent-override:26%;line-gap-override:0%}
h1,h2,h3,h4,h5,h6,.h1,.h2,.h3,.h4,.h5,.h6{font-family:'Barlow Semi Condensed','VL Barlow Fallback',Arial,sans-serif}
body,.form-control,select,textarea,.btn-primary,.btn-secondary,.form-control-submit,.vl-btn,#footer p,#footer .h3,#footer .h4,#footer h3,#footer h4,#footer .text-uppercase{font-family:Roboto,'VL Roboto Fallback',Arial,Helvetica,sans-serif}

/* Icons stay hidden until their font is ready, instead of showing the words "shopping_cart" and "search". */
@font-face{font-family:'Material Icons';font-style:normal;font-weight:400;font-display:block;src:url('2d8017489da689caedc1.woff2') format('woff2')}

/* The icon's word must not give the search box its own scrollbar before the icon font arrives. */
#header #search_widget{overflow:hidden}

/* Phone search is narrower than the page and centred, on the homepage and every other page. */
@media(max-width:767px){#header .header-top #search_widget,body#index #header #search_widget{width:min(72vw,420px);max-width:100%;margin-inline:auto}}

/* Phone header: logo, account and cart are moved here by theme.js. Show them in place until it runs. */
@media(max-width:767px){
 #header .header-nav .top-logo:empty{height:64px;background:url('/img/velolaikas-logo.png') center/contain no-repeat}
 #header #_mobile_user_info:empty,#header #_mobile_cart:empty{height:24px}
 #header #_mobile_cart:empty{width:47.5px}
 #header #_mobile_user_info:empty::before,#header #_mobile_cart:empty::before{display:block;width:24px;height:24px;font:24px/1 'Material Icons';font-feature-settings:'liga';color:#fff}
 #header #_mobile_user_info:empty::before{content:'\e7ff'}
 #header #_mobile_cart:empty::before{content:'\e8cc';color:#7a7a7a}
}

/* Up to 802px the Lithuanian menu takes three rows. Keep that height while its fonts arrive. */
@media(min-width:768px) and (max-width:802px){html[lang^=lt] #header #_desktop_top_menu{min-height:109px}}

/* A visible scrollbar must not push the page sideways, either during load or between pages. */
html{scrollbar-gutter:stable}

/* The homepage inset is measured from the page width, without the scrollbar, the same as .container. */
:root{--vl-inset:max(var(--vl-gutter),calc((100% - 1160px)/2))}

/* Hero text keeps a fixed position. The tone matches the photograph until it appears. */
#vl-single-home .vl-single-hero{align-items:flex-start;background-color:#797b75}
#vl-single-home .vl-hero__inner{padding-top:305px}
@media(max-width:767px){#vl-single-home .vl-hero__inner{padding-top:232px}}

/* Desktop photo placement, shared by the homepage and inner headers: the helmet, 29.5% down the photograph
   (which is 56.31% as tall as wide), starts just under the search box. */
:root{--vl-photo-w:max(100vw,1350px);--vl-photo-y:calc(224px - var(--vl-photo-w)*.1661)}
@media(min-width:768px) and (max-width:802px){:root{--vl-photo-w:max(100vw,1450px);--vl-photo-y:calc(240px - var(--vl-photo-w)*.1661)}}
@media(min-width:768px){#vl-single-home .vl-single-photo img{position:absolute;left:50%;top:var(--vl-photo-y);width:var(--vl-photo-w);max-width:none;height:auto;transform:translateX(-50%)}}

/* The inner-page header shows the top of the homepage photograph, at the same size and position.
   It is dark before the photograph arrives. */
body:not(#index) #header{background-color:#263033;background-repeat:no-repeat;background-image:linear-gradient(#0d191cc2,#0d191cc2),image-set(url('/img/cms/vl-single-hero-d1600-v1.webp') 1x,url('/img/cms/vl-single-hero-d1920-v1.webp') 2x);background-size:auto,var(--vl-photo-w) auto;background-position:0 0,50% var(--vl-photo-y)}
@media(min-width:1601px){body:not(#index) #header{background-image:linear-gradient(#0d191cc2,#0d191cc2),url('/img/cms/vl-single-hero-d1920-v1.webp')}}
@media(max-width:767px){body:not(#index) #header{background-image:linear-gradient(#0d191cc2,#0d191cc2),image-set(url('/img/cms/vl-single-hero-m480-v1.webp') 1x,url('/img/cms/vl-single-hero-m768-v1.webp') 2x);background-size:auto,max(100%,471px) auto;background-position:0 0,50% calc((700px - max(100vw,471px)*1.486)*.35)}}

/* Product gallery starts on the shared left edge. */
body#product #content{max-width:none;margin:0}

/* Cart title and lines start on the shared left edge. */
body#cart .cart-grid-body .card-block,body#cart .cart-overview{padding-left:0;padding-right:0}

/* Sign-in and password recovery use the same left-aligned layout as registration. */
#login-form .form-group.row,.forgotten-password .form-group.row,.forgotten-password .form-group{display:block;margin:0 0 24px}
#login-form .form-group>.col-md-3,#login-form .form-group>.col-md-6,.forgotten-password .form-group>[class*=col-md-]{float:none;max-width:none;width:100%;padding:0;text-align:left}
#login-form .form-control-label,.forgotten-password .form-control-label{display:block;margin:0 0 8px;padding:0;font-size:16px;text-align:left}
#login-form .form-control-comment:empty{display:none}
body#authentication .forgot-password,body#authentication .no-account,body#authentication #login-form .form-footer,body#password .page-footer,body#password .form-footer{text-align:left!important}
body#authentication #login-form .form-footer .btn{float:none!important}