.vh{position:relative;width:100%;aspect-ratio:738/414;min-height:262px;max-height:calc(100vh - 24px);overflow:hidden;background:#2b241d;color:#fff}.vh-img{position:absolute;top:0;right:0;bottom:0;left:0;width:100%;height:100%;object-fit:cover;object-position:28% 50%;max-width:none}.vh-shade{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;background:linear-gradient(to bottom,#140f0a61,#140f0a00 26%),linear-gradient(to left,#16110cb8,#16110c80 42%,#16110c24 72%,#16110c00 88%)}.vh-box{position:absolute;top:52px;bottom:0;right:5%;width:56%;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:start;padding-bottom:6px}.vh-lbl{margin:0 0 4px;font-size:clamp(11px,1.35vw + 6px,19px);font-weight:500;line-height:1.5;color:#f3ede4;text-shadow:0 1px 10px rgba(0,0,0,.25)}.vh-h{margin:0;font-family:Fraunces,Georgia,serif;font-weight:400;font-size:clamp(22px,3.9vw + 7px,62px);line-height:1.08;letter-spacing:-.01em;color:#fff;text-shadow:0 2px 18px rgba(0,0,0,.25)}.vh-h em{font-style:normal;color:#e8cfa6}html[lang=ar] .vh-h{font-family:Alexandria,IBM Plex Sans Arabic,sans-serif;font-weight:700;font-size:clamp(26px,4.4vw + 9px,68px);line-height:1.28;letter-spacing:0}.vh-p{margin:clamp(6px,1vw,14px) 0 0;font-size:clamp(11px,.9vw + 7.5px,19px);line-height:1.6;color:#f6f1ea;max-width:30em;text-shadow:0 1px 10px rgba(0,0,0,.3)}html[lang=ar] .vh-p{line-height:1.75}.vh-cta{margin-top:clamp(10px,1.6vw,26px);display:inline-flex;align-items:center;gap:clamp(8px,1vw,14px);min-height:clamp(36px,2.6vw + 24px,58px);padding:0 clamp(18px,2.4vw,36px);border-radius:999px;background:#f6ebdd;color:#2b2620;text-decoration:none;font-weight:600;font-size:clamp(12.5px,.8vw + 9.5px,18px);white-space:nowrap;box-shadow:0 6px 22px #0000002e}.vh-cta:hover{background:#fff}html:not([dir=rtl]) .vh-arr{transform:scaleX(-1)}.vh-cta svg{width:clamp(16px,1.2vw + 10px,24px);height:auto}.tb{display:none}.hdr{position:absolute;top:0;left:0;right:0;z-index:30;background:transparent;transition:background .25s ease,box-shadow .25s ease}.hdr:not(.solid) .ib,.hdr:not(.solid) .logo,.hdr:not(.solid) .dnav button{color:#fff}.hdr:not(.solid) .logo svg circle,.hdr:not(.solid) .logo svg path{stroke:#fff}.hdr .langb>span{direction:ltr;height:28px;padding:0 12px;font-size:12.5px}.hdr:not(.solid) .langb>span{background:#fff;border-color:#fff;color:#2b2620}.hdr .langb>span:after{content:"";width:5px;height:5px;margin-left:7px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-2px) rotate(45deg)}.hdr.solid{position:fixed;background:var(--cream);box-shadow:0 1px 0 var(--line);animation:vhdr .25s ease}@keyframes vhdr{0%{transform:translateY(-100%)}to{transform:none}}.side-title{display:none!important}.pg{position:relative;padding-top:16px}.pg-main{position:relative}.pg-track{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding-inline:16px;scroll-padding-inline:16px;scrollbar-width:none;overscroll-behavior-x:contain;-webkit-overflow-scrolling:touch}.pg-track::-webkit-scrollbar{display:none}.pg-s{position:relative;flex:0 0 calc(100% - 46px);scroll-snap-align:start;scroll-snap-stop:always;aspect-ratio:4/5;margin:0;padding:0;border:0;border-radius:22px;overflow:hidden;background:#e9ece4;cursor:zoom-in;-webkit-tap-highlight-color:transparent}.pg-s:last-child{scroll-snap-align:end}.pg-s img{display:block;width:100%;height:100%;object-fit:cover}.pg-zi{position:absolute;top:12px;inset-inline-end:12px;width:34px;height:34px;border-radius:50%;background:#f6f2eaeb;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000001a}.pg-s:focus-visible{outline:2px solid #2F4A3C;outline-offset:-4px}.pg-dots{display:flex;justify-content:center;gap:6px;padding:12px 0 2px}.pg-dots i{display:block;width:6px;height:6px;border-radius:3px;background:#cdd5ca;transition:width .25s ease,background .25s ease}.pg-dots i.on{width:20px;background:#2f4a3c}.pg-thumbs{display:none}.pg-ar{display:none;position:absolute;top:50%;z-index:2;width:42px;height:42px;margin-top:-21px;border:0;border-radius:50%;background:#f6f2eaf0;color:#2b2620;align-items:center;justify-content:center;box-shadow:0 2px 12px #00000024;cursor:pointer;transition:opacity .2s ease,background .2s ease}.pg-ar:hover{background:#fff}.pg-prev{inset-inline-start:14px}.pg-next{inset-inline-end:14px}html[dir=rtl] .pg-ar svg{transform:scaleX(-1)}@media(min-width:600px){.pg{display:grid;grid-template-columns:68px minmax(0,1fr);gap:14px;max-width:620px;margin:0 auto;padding:22px 20px 0}.pg-thumbs{display:flex;flex-direction:column;gap:10px}.pg-th{display:block;width:68px;aspect-ratio:4/5;padding:0;border:1.5px solid transparent;border-radius:12px;overflow:hidden;background:#e9ece4;opacity:.62;cursor:pointer;transition:opacity .2s ease,border-color .2s ease}.pg-th img{display:block;width:100%;height:100%;object-fit:cover}.pg-th:hover{opacity:.9}.pg-th.on{opacity:1;border-color:#2f4a3c}.pg-track{gap:0;padding-inline:0;scroll-padding-inline:0;border-radius:24px}.pg-s{flex-basis:100%;border-radius:0}.pg-ar{display:flex}.pg-dots{display:none}}@media(min-width:900px){.pg{max-width:none;margin:0;padding:0;grid-template-columns:76px minmax(0,1fr);gap:16px;position:sticky;top:84px}.pg-th{width:76px}.pg-main{width:100%;max-width:calc((100vh - 116px)*.8);justify-self:start}.pg-ar{opacity:0}.pg-main:hover .pg-ar,.pg-ar:focus-visible{opacity:1}}@media(max-width:599px){.hdr .langb>span{padding:0 10px;font-size:12px}}@media(max-width:420px){.hdr .langb>span:after{display:none}}@media(min-width:600px){.vh-box{width:46%}.hdr .langb>span{height:32px;padding:0 14px;font-size:13px}.vh-shade{background:linear-gradient(to bottom,#140f0a61,#140f0a00 26%),linear-gradient(to left,#16110ca8,#16110c6b 36%,#16110c14 62%,#16110c00 72%)}}@media(min-width:900px){.vh-box{top:64px;width:42%;right:max(5%,calc((100vw - 1180px)/2 + 24px));max-width:580px}.hero{padding-top:40px}}@media(max-width:374px){.vh-box{width:60%;right:4%}.vh-h,html[lang=ar] .vh-h{font-size:22px}}@media(prefers-reduced-motion:reduce){.pg-track{scroll-behavior:auto}.pg-dots i{transition:none}}
/*# sourceMappingURL=/cdn/shop/t/3/assets/vilano-hero.css.map */
