/* vivopageelement: front-end styles for builder pages. */
.vpe{--vr:6px;line-height:1.55;overflow-x:clip}
.vpe *,.vpe *::before,.vpe *::after{box-sizing:border-box}
.vpe-title{padding-top:20px}
.vpe-title h1{margin:0;font-size:30px}
.vpe img{max-width:100%;height:auto;display:block}

/* sections and columns */
.vs{position:relative;isolation:isolate;padding:48px 0}
.vs-in{position:relative;z-index:2;margin:0 auto;max-width:1240px;padding:0 16px}
.vs-row{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-start}
.vc{flex:1 1 0;min-width:0;position:relative}
.vc>.vw:last-child{margin-bottom:0}
.vs-ov{position:absolute;inset:0;z-index:1;pointer-events:none}
.vs-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.vs-shape{position:absolute;left:0;right:0;z-index:1;line-height:0;pointer-events:none;height:60px}
.vs-shape svg{width:100%;height:100%;display:block}
.vs-shape.top{top:-1px;transform:rotate(180deg)}
.vs-shape.bot{bottom:-1px}
.vs-sticky{position:sticky;top:0;z-index:40}
@media (max-width:767px){
  .vs:not(.vs-keep) .vs-row{flex-direction:column;align-items:stretch}
  .vs:not(.vs-keep) .vc{flex:1 1 auto!important;max-width:100%!important;width:100%}
  .vs.vs-rev .vs-row{flex-direction:column-reverse}
}

/* show / hide per device */
@media (min-width:1025px){.vpe .vh-d{display:none!important}}
@media (min-width:768px) and (max-width:1024px){.vpe .vh-t{display:none!important}}
@media (max-width:767px){.vpe .vh-m{display:none!important}}

/* widgets */
.vw{position:relative;margin:0 0 16px}
.vh{margin:0;font-weight:700;line-height:1.25}
.vh a{color:inherit;text-decoration:none}
.vh mark{background:none;color:inherit}
.vt>*:first-child{margin-top:0}.vt>*:last-child{margin-bottom:0}
.vt h2{font-size:1.5em;margin:1.2em 0 .5em}.vt h3{font-size:1.25em;margin:1em 0 .4em}
.vt ul,.vt ol{padding-left:1.3em}
.vt a{color:var(--brand)}
.vt img{border-radius:var(--vr);margin:12px 0}
.vt table{border-collapse:collapse;width:100%;margin:12px 0;display:block;overflow-x:auto}
.vt td,.vt th{border:1px solid #e5e7eb;padding:8px 10px;text-align:left}
.vimg{margin:0;display:inline-block;max-width:100%;width:100%;vertical-align:top}
.vimg img{width:100%;height:auto}
.vimg figcaption{font-size:13px;color:#6b7280;margin-top:6px}
.vimg a{display:block;overflow:hidden;border-radius:inherit}
.vimg-zoom img{transition:transform .5s}.vimg-zoom:hover img{transform:scale(1.06)}
.vimg-lift img{transition:transform .3s,box-shadow .3s}.vimg-lift:hover img{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.vimg-gray img{filter:grayscale(1);transition:filter .4s}.vimg-gray:hover img{filter:none}
.vph{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-height:140px;background:repeating-linear-gradient(45deg,#f3f4f6,#f3f4f6 10px,#eceef2 10px,#eceef2 20px);color:#6b7280;border-radius:var(--vr);font-size:13px;text-align:center;padding:16px}
.vph .vi{width:34px;height:34px;fill:#9ca3af}
.vi{width:1.1em;height:1.1em;fill:currentColor;flex:none;vertical-align:middle}
.vcard{background:#fff;border-radius:10px;box-shadow:0 1px 3px rgba(16,24,40,.08),0 1px 2px rgba(16,24,40,.04);padding:22px;color:#1f2937}
a.vcard{display:block;text-decoration:none;transition:transform .2s,box-shadow .2s}
a.vcard:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(16,24,40,.12)}
.vnote{font-size:12px;color:#6b7280;margin:8px 0 0}

/* buttons */
.vbtn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font-weight:700;text-decoration:none;border:2px solid transparent;border-radius:4px;cursor:pointer;line-height:1.2;text-transform:uppercase;letter-spacing:.02em;transition:filter .15s,transform .15s,background .15s;font-family:inherit}
.vbtn:hover{filter:brightness(1.07);transform:translateY(-1px)}
.vbtn-sm{padding:8px 14px;font-size:13px}.vbtn-md{padding:12px 22px;font-size:14px}.vbtn-lg{padding:16px 30px;font-size:16px}
.vbtn-cta{background:var(--cta,#fb641b);color:#fff}
.vbtn-brand{background:var(--brand,#2b44d8);color:#fff}
.vbtn-outline{border-color:currentColor;color:var(--brand,#2b44d8);background:transparent}
.vbtn-white{background:#fff;color:var(--brand,#2b44d8)}
.vbtn-dark{background:#111827;color:#fff}
.vbtn-link{background:none;color:var(--brand,#2b44d8);padding-left:0;padding-right:0;text-transform:none}
.vbtn-full{display:flex;width:100%}
@media (max-width:767px){.vbtn-fullm{display:flex;width:100%}}
.vw-button .vbtn+.vbtn,.vcta-b .vbtn+.vbtn{margin-left:10px}

/* icon box, image box, lists */
.vic{display:inline-flex;line-height:0}
.vw-icon .vi{fill:var(--brand,#2b44d8)}
.vib{display:flex;flex-direction:column;gap:12px;height:100%}
.vib-left{flex-direction:row;align-items:flex-start}
.vib-i{display:inline-flex;align-items:center;justify-content:center;width:max-content;padding:12px;border-radius:12px;background:color-mix(in srgb,var(--brand,#2b44d8) 10%,#fff)}
.vib-i .vi{fill:var(--brand,#2b44d8)}
.vib h3{margin:0 0 4px;font-size:18px;color:inherit}
.vib p{margin:0;color:#6b7280;font-size:14.5px}
.vimb{overflow:hidden;padding:0!important;height:100%}
.vimb-img{overflow:hidden;background:#f3f4f6}
.vimb-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.vimb:hover .vimb-img img{transform:scale(1.05)}
.vimb-b{padding:16px 18px 18px}
.vimb-b h3{margin:0 0 6px;font-size:18px}
.vimb-b p{margin:0 0 6px;color:#6b7280;font-size:14.5px}
.vimb:not(.vcard) .vimb-b{padding:12px 0 0}
.vil{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
.vil-inline{flex-direction:row;flex-wrap:wrap;gap:10px 24px}
.vil li a,.vil li{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none}
.vil .vi{fill:var(--brand,#2b44d8);width:20px;height:20px}
.vbq{margin:0;padding:6px 0 6px 20px;border-left:4px solid var(--brand,#2b44d8);font-size:19px;font-style:italic}
.vbq p{margin:0}.vbq cite{display:block;margin-top:8px;font-size:14px;font-style:normal;color:#6b7280}

/* carousel */
.vcar{--per:1;--gap:12px;--rad:6px;position:relative;overflow:hidden;border-radius:var(--rad)}
.vcar-track{display:flex;gap:var(--gap);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.vcar-track::-webkit-scrollbar{display:none}
.vcar-s{flex:0 0 calc((100% - (var(--per) - 1) * var(--gap)) / var(--per));scroll-snap-align:start;position:relative;overflow:hidden;border-radius:var(--rad);min-height:60px}
.vcar-s picture,.vcar-s>img,.vcar-a>picture{display:block;width:100%;height:100%}
.vcar-s img{width:100%;height:100%;object-fit:cover}
.vcar-s .vph{height:100%;border-radius:0}
.vcar-a{display:block;height:100%;color:inherit;text-decoration:none}
.vcar-cap{position:absolute;inset:0;display:flex;align-items:flex-end;padding:28px 32px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.35),transparent 90%)}
.vcar-cap>div{max-width:560px}
.vcar-cap-center{justify-content:center;text-align:center}.vcar-cap-right{justify-content:flex-end;text-align:right}
.vcar-cap h3{margin:0 0 6px;font-size:clamp(20px,3vw,36px);line-height:1.15;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.vcar-cap p{margin:0 0 12px;font-size:clamp(14px,1.5vw,17px);opacity:.95}
.vcar-btn{position:absolute;top:50%;transform:translateY(-50%);width:42px;height:42px;border-radius:50%;border:0;background:rgba(255,255,255,.92);box-shadow:0 2px 10px rgba(0,0,0,.2);display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:3}
.vcar-btn .vi{width:26px;height:26px;fill:#111}
.vcar-btn.prev{left:10px}.vcar-btn.next{right:10px}
.vcar-btn[disabled]{opacity:0;pointer-events:none}
.vcar-dots{position:absolute;left:0;right:0;bottom:10px;display:flex;justify-content:center;gap:6px;z-index:3}
.vcar-dots button{width:8px;height:8px;border-radius:8px;border:0;padding:0;background:rgba(255,255,255,.6);cursor:pointer;transition:width .2s}
.vcar-dots button.on{width:22px;background:#fff}
.vtm .vcar-dots{position:static;margin-top:12px}.vtm .vcar-dots button{background:#d1d5db}.vtm .vcar-dots button.on{background:var(--brand,#2b44d8)}
@media (max-width:767px){.vcar-btn{width:34px;height:34px}.vcar-cap{padding:16px 18px}}

/* gallery + lightbox */
.vgal{--cols:3;--gap:10px;--rad:6px;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:var(--gap)}
.vgal-i{position:relative;display:block;overflow:hidden;border-radius:var(--rad);background:#f3f4f6}
.vgal-i img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
a.vgal-i:hover img{transform:scale(1.06)}
.vgal-cap{position:absolute;left:0;right:0;bottom:0;padding:8px 10px;font-size:13px;color:#fff;background:linear-gradient(0deg,rgba(0,0,0,.6),transparent)}
.vgal-mas{display:block;columns:var(--cols);column-gap:var(--gap)}
.vgal-mas .vgal-i{margin-bottom:var(--gap);break-inside:avoid}
.vlb{position:fixed;inset:0;z-index:300;background:rgba(5,8,20,.92);display:flex;align-items:center;justify-content:center;padding:40px 56px}
.vlb[hidden]{display:none}
.vlb img,.vlb iframe,.vlb video{max-width:100%;max-height:100%;border-radius:6px;background:#000}
.vlb iframe{width:min(1100px,100%);aspect-ratio:16/9;height:auto;border:0}
.vlb-cap{position:absolute;bottom:14px;left:0;right:0;text-align:center;color:#e5e7eb;font-size:14px}
.vlb button{position:absolute;border:0;background:rgba(255,255,255,.12);width:44px;height:44px;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center}
.vlb button .vi{fill:#fff;width:26px;height:26px}
.vlb .x{top:14px;right:14px}.vlb .p{left:10px;top:50%;transform:translateY(-50%)}.vlb .n{right:10px;top:50%;transform:translateY(-50%)}
@media (max-width:767px){.vlb{padding:56px 8px}}

/* video */
.vvid{position:relative;overflow:hidden;background:#000;aspect-ratio:16/9;width:100%}
.vvid iframe,.vvid video,.vvid>img{position:absolute;inset:0;width:100%;height:100%;border:0;object-fit:cover}
.vvid.vph{background:#111;color:#9ca3af}
.vvid-lb{display:block;cursor:pointer}
.vvid-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:72px;height:72px;border-radius:50%;background:rgba(255,255,255,.95);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 30px rgba(0,0,0,.35);transition:transform .2s}
.vvid-lb:hover .vvid-play{transform:translate(-50%,-50%) scale(1.08)}
.vvid-play .vi{width:36px;height:36px;fill:var(--cta,#fb641b);margin-left:4px}

/* testimonials */
.vtm{--per:3}
.vtm-grid{display:grid;grid-template-columns:repeat(var(--per),minmax(0,1fr));gap:16px}
.vtm-i{margin:0;display:flex;flex-direction:column;gap:12px}
.vtm .vcar-track{padding:4px 2px 8px}
.vtm-stars{display:flex;gap:2px}.vtm-stars .vi{fill:#f5a524;width:18px;height:18px}
.vtm-i blockquote{margin:0;font-size:15.5px;line-height:1.6;flex:1}
.vtm-i figcaption{display:flex;align-items:center;gap:10px}
.vtm-i figcaption img,.vtm-av{width:42px;height:42px;border-radius:50%;object-fit:cover;flex:none}
.vtm-av{display:flex;align-items:center;justify-content:center;background:var(--brand,#2b44d8);color:#fff;font-weight:700}
.vtm-i figcaption small{display:block;color:#6b7280}

/* accordion + tabs */
.vacc{display:flex;flex-direction:column;gap:10px}
.vacc-i{background:#fff;border-radius:8px;box-shadow:0 1px 3px rgba(16,24,40,.08)}
.vacc-line{gap:0}.vacc-line .vacc-i{box-shadow:none;border-radius:0;border-bottom:1px solid #e5e7eb;background:none}
.vacc-i summary{list-style:none;cursor:pointer;padding:16px 18px;font-weight:600;display:flex;align-items:center;justify-content:space-between;gap:12px}
.vacc-i summary::-webkit-details-marker{display:none}
.vacc-i summary .vi{transition:transform .2s;fill:#6b7280}
.vacc-i[open] summary .vi{transform:rotate(180deg)}
.vacc-b{padding:0 18px 16px;color:#374151}
.vacc-line .vacc-i summary,.vacc-line .vacc-b{padding-left:0;padding-right:0}
.vacc-b>*:first-child{margin-top:0}.vacc-b>*:last-child{margin-bottom:0}
.vtab-n{display:flex;gap:4px;border-bottom:1px solid #e5e7eb;overflow-x:auto;scrollbar-width:none}
.vtab-center{justify-content:center}.vtab-right{justify-content:flex-end}
.vtab-n button{border:0;background:none;padding:12px 16px;font:inherit;font-weight:600;color:#6b7280;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.vtab-n button.on{color:var(--brand,#2b44d8);border-bottom-color:var(--brand,#2b44d8)}
.vtab-p{padding:16px 2px}
.vtab-p>*:first-child{margin-top:0}

/* counter, progress, countdown */
.vcnt-n{font-size:44px;font-weight:800;line-height:1.1;color:var(--brand,#2b44d8);font-variant-numeric:tabular-nums}
.vcnt-l{color:#6b7280;margin-top:4px}
.vpr{display:flex;flex-direction:column;gap:14px}
.vpr-l{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.vpr-b{height:10px;background:#eef0f4;border-radius:99px;overflow:hidden}
.vpr-b i{display:block;height:100%;width:0;background:var(--brand,#2b44d8);border-radius:99px;transition:width 1.4s cubic-bezier(.2,.7,.2,1)}
.vpr.in .vpr-b i,.vpr-static .vpr-b i{width:var(--p)}
.vcd-t{font-weight:700;margin-bottom:10px;font-size:18px}
.vcd-row{display:flex;gap:10px;flex-wrap:wrap}

.vcd-u{background:rgba(255,255,255,.12);border:1px solid rgba(127,127,127,.25);border-radius:8px;padding:10px 12px;min-width:74px;text-align:center}
.vcd-u b{display:block;font-size:30px;line-height:1.1;font-variant-numeric:tabular-nums}
.vcd-u small{font-size:11px;text-transform:uppercase;letter-spacing:.06em;opacity:.8}

/* marketing */
.vcta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:34px 36px;background:var(--brand,#2b44d8);color:#fff;flex-wrap:wrap}
.vcta-center{flex-direction:column;text-align:center;justify-content:center}
.vcta h3{margin:0 0 6px;font-size:clamp(20px,2.6vw,30px)}
.vcta p{margin:0;opacity:.92;max-width:620px}
.vcta-b{display:flex;gap:10px;flex-wrap:wrap}
@media (max-width:767px){.vcta{padding:24px 20px}.vcta-b,.vcta-b .vbtn{width:100%}.vcta-b .vbtn+.vbtn{margin-left:0}}
.vprice{position:relative;text-align:center;display:flex;flex-direction:column;gap:8px;height:100%;border:2px solid transparent}
.vprice.hl{border-color:var(--brand,#2b44d8)}
.vprice h3{margin:6px 0 0;font-size:20px}
.vprice-p b{font-size:32px}.vprice-p s{color:#9ca3af;margin-left:6px}
.vprice-n{margin:0;color:#16a34a;font-size:13.5px;font-weight:600}
.vprice ul{list-style:none;padding:0;margin:8px 0 14px;text-align:left;display:flex;flex-direction:column;gap:8px;flex:1}
.vprice li{display:flex;gap:8px;align-items:flex-start;font-size:14.5px}.vprice li .vi{fill:#16a34a;margin-top:2px}
.vprice-rb{position:absolute;top:12px;right:-30px;transform:rotate(45deg);background:var(--cta,#fb641b);color:#fff;font-size:11px;font-weight:700;padding:4px 34px;text-transform:uppercase}
.vprice{overflow:hidden}
.vflip{perspective:1200px;height:260px;outline:none}
.vflip-in{position:relative;width:100%;height:100%;transition:transform .7s;transform-style:preserve-3d}
.vflip:hover .vflip-in,.vflip:focus .vflip-in,.vflip.on .vflip-in{transform:rotateY(180deg)}
.vflip-f,.vflip-b{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:10px;color:#fff;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;gap:6px}
.vflip-b{transform:rotateY(180deg)}
.vflip .vi{width:46px;height:46px;fill:#fff}
.vflip h3{margin:6px 0 0;font-size:20px}.vflip p{margin:0;opacity:.92}
.valert{display:flex;gap:12px;align-items:flex-start;padding:14px 16px;border-radius:8px;border-left:4px solid;position:relative}
.valert .vi{width:22px;height:22px;margin-top:1px}
.valert b{display:block;margin-bottom:2px}.valert p{margin:0}
.valert-info{background:#eef4ff;border-color:#3b82f6;color:#1e3a8a}.valert-info .vi{fill:#3b82f6}
.valert-success{background:#ecfdf3;border-color:#16a34a;color:#14532d}.valert-success .vi{fill:#16a34a}
.valert-warning{background:#fff7ed;border-color:#f59e0b;color:#7c2d12}.valert-warning .vi{fill:#f59e0b}
.valert-danger{background:#fef2f2;border-color:#dc2626;color:#7f1d1d}.valert-danger .vi{fill:#dc2626}
.valert-x{margin-left:auto;border:0;background:none;cursor:pointer;padding:0;line-height:0}

/* shop widgets */
.vprod{--cols:4;display:grid;grid-template-columns:repeat(var(--cols),minmax(0,1fr));gap:12px}
.vprod-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.vprod-row>*{flex:0 0 calc((100% - (var(--cols) - 1) * 12px) / var(--cols));scroll-snap-align:start}
.vprod .tile{background:#fff}
.vstores h3{margin:0 0 4px;font-size:20px}.vstores p{margin:0 0 12px;color:#6b7280}
.vstores-in{display:flex;gap:8px}
.vstores-in input{flex:1;min-width:0;height:46px;border:1px solid #d1d5db;border-radius:4px;padding:0 12px;font:inherit;font-size:16px}
.vmap{display:block;width:100%;height:380px;border:0;background:#e5e7eb}
.vsoc{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.vsoc a,.vsoc button{width:40px;height:40px;border-radius:50%;background:var(--brand,#2b44d8);display:inline-flex;align-items:center;justify-content:center;border:0;cursor:pointer;transition:transform .2s}
.vsoc a:hover,.vsoc button:hover{transform:translateY(-2px)}
.vsoc svg{width:50%;height:50%;fill:#fff}
.vtoc b{display:block;margin-bottom:8px}
.vtoc ol{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
.vtoc .lv3{margin-left:16px;font-size:.95em}
.vtoc a{color:var(--brand,#2b44d8);text-decoration:none}
.vanchor{display:block;position:relative;top:-90px;visibility:hidden}

/* alignment helpers when the widget is centred */

/* entrance animations */
@media (prefers-reduced-motion:no-preference){
  .vpe [data-anim]{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1);transition-delay:var(--vd,0ms)}
  .vpe [data-anim="fade-up"]{transform:translateY(34px)}
  .vpe [data-anim="fade-left"]{transform:translateX(44px)}
  .vpe [data-anim="fade-right"]{transform:translateX(-44px)}
  .vpe [data-anim="zoom-in"]{transform:scale(.9)}
  .vpe [data-anim="flip"]{transform:perspective(800px) rotateX(18deg)}
  .vpe [data-anim="bounce"]{transform:translateY(40px)}
  .vpe [data-anim].in{opacity:1;transform:none}
  .vpe [data-anim="bounce"].in{animation:vbounce .8s cubic-bezier(.3,1.6,.5,1)}
}
@keyframes vbounce{0%{transform:translateY(40px)}60%{transform:translateY(-8px)}100%{transform:none}}
.vh-grow{transition:transform .25s}.vh-grow:hover{transform:scale(1.04)}
.vh-float{transition:transform .25s}.vh-float:hover{transform:translateY(-6px)}
.vh-shrink{transition:transform .25s}.vh-shrink:hover{transform:scale(.97)}

/* responsive defaults */
@media (max-width:1024px){.vtm-grid{gap:12px}}
@media (max-width:767px){
  .vs{padding:28px 0}
  .vcard{padding:18px}
  .vib-left{flex-direction:row}
  .vcd-u{min-width:64px;padding:8px}
  .vcd-u b{font-size:24px}
  .vprod{gap:8px}
}
