/* =========================================================
   TM LAND – VRI PRODUCT EXPLORER v1.2.8
   Web-app product section for Elementor
========================================================= */


/* Full-width background even when the widget sits inside a boxed Elementor container. */
.elementor-widget-tmland_vri_product_explorer,
.elementor-widget-tmland_vri_product_explorer > .elementor-widget-container{
  max-width:none !important;
  overflow:visible !important;
}

.vri-pe{
  --vri-navy:#082f49;
  --vri-navy-deep:#051f31;
  --vri-gold:#c89a44;
  --vri-gold-soft:#e0ad48;
  --vri-green:#177348;

  --vri-content-width:1320px;
  --vri-sidebar-width:350px;
  --vri-column-gap:24px;
  --vri-stage-min:390px;
  --vri-sidebar-thumb-height:58px;

  --vri-bg-start:#fbf8f2;
  --vri-bg-end:#f5ecdf;
  --vri-info-bg:rgba(255,255,255,.82);
  --vri-info-width:430px;
  --vri-info-blur:16px;

  --vri-highrise-pad-top:15px;
  --vri-highrise-pad-right:15px;
  --vri-highrise-pad-bottom:15px;
  --vri-highrise-pad-left:15px;

  position:relative;
  isolation:isolate;
  overflow:hidden;
  width:100vw;
  max-width:100vw;
  margin-left:calc(50% - 50vw);
  margin-right:calc(50% - 50vw);
  padding:64px 0 70px;
  color:var(--vri-navy);
  background:linear-gradient(180deg,var(--vri-bg-start) 0%,var(--vri-bg-end) 100%);
  font-family:inherit;
}

.vri-pe,
.vri-pe *{
  box-sizing:border-box;
}

.vri-pe button,
.vri-pe a{
  -webkit-tap-highlight-color:transparent;
}

.vri-pe__decor{
  position:absolute;
  z-index:0;
  pointer-events:none;
  border-radius:50%;
  border:1px solid rgba(181,132,45,.10);
}

.vri-pe__decor--left{
  width:520px;
  height:520px;
  top:-365px;
  left:-135px;
  box-shadow:
    0 0 0 88px rgba(181,132,45,.022),
    0 0 0 176px rgba(181,132,45,.014);
}

.vri-pe__decor--right{
  width:430px;
  height:430px;
  right:-250px;
  bottom:-275px;
  box-shadow:
    0 0 0 78px rgba(181,132,45,.018),
    0 0 0 156px rgba(181,132,45,.011);
}

.vri-pe__inner{
  position:relative;
  z-index:1;
  width:min(var(--vri-content-width),calc(100% - 48px));
  margin:0 auto;
}

/* =========================================================
   SECTION HEADING
========================================================= */

.vri-pe__heading{
  max-width:none;
  margin:0 0 28px;
}

.vri-pe__eyebrow{
  display:flex;
  align-items:center;
  gap:12px;
  color:#a86d1d;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  letter-spacing:2.1px;
  text-transform:uppercase;
}

.vri-pe__eyebrow::before{
  content:"";
  width:34px;
  height:1px;
  flex:0 0 34px;
  background:var(--vri-gold);
}

.vri-pe__title{
  max-width:1180px;
  margin:13px 0 13px;
  color:var(--vri-navy);
  font-size:44px;
  line-height:1.06;
  letter-spacing:-1.15px;
  font-weight:800;
  text-wrap:balance;
}

.vri-pe__description{
  max-width:800px;
  margin:0;
  color:#526574;
  font-size:16px;
  line-height:1.68;
}

/* =========================================================
   TWO-COLUMN APP SHELL
   The left and right columns share the same grid-row height.
========================================================= */

.vri-pe__shell{
  display:grid;
  grid-template-columns:minmax(0,1fr) var(--vri-sidebar-width);
  gap:var(--vri-column-gap);
  align-items:stretch;
}

.vri-pe__main{
  min-width:0;
  min-height:0;
  display:grid;
  grid-template-rows:auto minmax(0,1fr);
}

/* =========================================================
   WEB-APP TABS
========================================================= */

.vri-pe__tabs-shell{
  position:relative;
}

.vri-pe__tabs-hint{
  display:none;
}

.vri-pe__tabs{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:4px;
  min-width:0;
  padding:5px;
  border:1px solid rgba(8,47,73,.09);
  border-radius:16px;
  background:rgba(255,255,255,.68);
  box-shadow:
    0 9px 26px rgba(20,42,55,.06),
    inset 0 1px 0 rgba(255,255,255,.88);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
}

.vri-pe__tab{
  appearance:none;
  -webkit-appearance:none;
  min-width:0;
  min-height:50px;
  margin:0;
  padding:0 12px;
  border:0;
  border-radius:12px;
  outline:0;
  background:transparent;
  color:var(--vri-navy);
  cursor:pointer;
  font:inherit;
  font-size:13px;
  line-height:1.2;
  font-weight:800;
  letter-spacing:.2px;
  transition:
    background .22s ease,
    color .22s ease,
    box-shadow .22s ease,
    transform .22s ease;
}

.vri-pe__tab:hover{
  background:rgba(8,47,73,.045);
}

.vri-pe__tab:focus-visible{
  box-shadow:0 0 0 3px rgba(200,154,68,.28);
}

.vri-pe__tab.is-active,
.vri-pe__tab[aria-selected="true"]{
  color:#fff;
  background:linear-gradient(145deg,#0b3e5f 0%,#062a42 100%);
  box-shadow:
    0 8px 18px rgba(5,38,59,.20),
    inset 0 -2px 0 var(--vri-gold);
}

.vri-pe__panels{
  min-height:0;
  padding-top:15px;
  display:grid;
}

.vri-pe__panel{
  min-height:0;
  height:100%;
  animation:vriPeFade .22s ease;
}

.vri-pe__panel[hidden]{
  display:none !important;
}

@keyframes vriPeFade{
  from{opacity:.35;transform:translateY(4px)}
  to{opacity:1;transform:none}
}

/* =========================================================
   MEDIA / GALLERY
========================================================= */

.vri-pe__media{
  min-height:0;
  height:100%;
  display:block;
}

.vri-pe__stage{
  position:relative;
  min-height:var(--vri-stage-min);
  height:100%;
  overflow:hidden;
  border-radius:21px;
  background:#e8e2d8;
  box-shadow:0 16px 42px rgba(37,37,37,.09);
}

.vri-pe__slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  pointer-events:none;
  transform:scale(1.012);
  transition:opacity .38s ease,transform .5s ease;
}

.vri-pe__slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}

.vri-pe__slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.vri-pe__empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:28px;
  background:linear-gradient(135deg,#e9e2d7,#f7f2e9);
  color:#756f67;
  text-align:center;
  font-size:14px;
  font-weight:700;
}

/* arrows: circle and glyph share the exact same flex centre */
.vri-pe__arrow{
  position:absolute;
  top:50%;
  z-index:8;
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.22);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  transform:translateY(-50%);
  background:rgba(5,38,59,.88);
  color:#fff;
  cursor:pointer;
  box-shadow:0 8px 20px rgba(5,38,59,.22);
  font:inherit;
  line-height:1;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  transition:background .2s ease,box-shadow .2s ease;
}

.vri-pe__arrow span{
  position:static;
  display:flex;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  margin:0;
  padding:0 0 3px;
  font-family:Arial,sans-serif;
  font-size:28px;
  font-weight:400;
  line-height:1;
  transform:none;
}

.vri-pe__arrow--prev{left:16px}
.vri-pe__arrow--next{right:16px}

.vri-pe__arrow:hover{
  background:var(--vri-gold);
  box-shadow:0 9px 24px rgba(93,62,17,.26);
}

.vri-pe__arrow:focus-visible{
  outline:3px solid rgba(255,255,255,.72);
  outline-offset:2px;
}

.vri-pe__counter{
  position:absolute;
  z-index:8;
  top:16px;
  right:16px;
  min-width:64px;
  height:34px;
  padding:0 12px;
  border-radius:20px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:3px;
  background:rgba(5,38,59,.88);
  color:#fff;
  font-size:10px;
  line-height:1;
  font-weight:800;
  letter-spacing:.4px;
  backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
}

/* =========================================================
   GLASS INFO CARD
========================================================= */

.vri-pe__info{
  position:absolute;
  z-index:7;
  left:20px;
  bottom:20px;
  width:min(var(--vri-info-width),calc(100% - 40px));
  padding:18px 20px;
  border:1px solid rgba(255,255,255,.66);
  border-radius:18px;
  background:var(--vri-info-bg);
  box-shadow:0 16px 38px rgba(19,38,50,.13);
  backdrop-filter:blur(var(--vri-info-blur)) saturate(1.06);
  -webkit-backdrop-filter:blur(var(--vri-info-blur)) saturate(1.06);
}

.vri-pe__counter-label{
  color:#a86d1d;
  font-size:11px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:1px;
  text-transform:uppercase;
}

.vri-pe__info h3{
  margin:7px 0 8px;
  color:var(--vri-navy);
  font-size:clamp(23px,1.75vw,29px);
  line-height:1.08;
  font-weight:800;
  letter-spacing:-.35px;
}

.vri-pe__info p{
  margin:0;
  color:#405361;
  font-size:14px;
  line-height:1.58;
}


.vri-pe__info.is-features-only{
  left:50%;
  right:auto;
  bottom:20px;
  width:auto;
  max-width:calc(100% - 40px);
  display:flex;
  justify-content:center;
  align-items:center;
  text-align:center;
  padding:12px 16px;
  transform:translateX(-50%);
}

.vri-pe__info.is-features-only .vri-pe__chips{
  width:auto;
  max-width:100%;
  display:flex;
  flex-wrap:nowrap;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:0;
}

.vri-pe__info.is-features-only .vri-pe__chip{
  flex:0 0 auto;
  white-space:nowrap;
  color:#115e3c;
  font-size:10px;
  font-weight:900;
}

.vri-pe__chips{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:13px;
}

.vri-pe__chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:7px 10px;
  border:1px solid rgba(39,125,81,.28);
  border-radius:9px;
  background:rgba(255,255,255,.68);
  color:var(--vri-green);
  font-size:9px;
  line-height:1;
  font-weight:800;
  letter-spacing:.18px;
  text-transform:uppercase;
}

.vri-pe__chip i{
  width:6px;
  height:6px;
  flex:0 0 6px;
  border:2px solid currentColor;
  border-radius:50%;
}

/* =========================================================
   HIGH-RISE IMAGE SELECTOR
   These thumbnails control only the Imperia banner.
========================================================= */

.vri-pe__highrise-thumbs{
  flex:0 0 auto;
  min-width:0;
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  margin:0 0 14px;
}

.vri-pe__highrise-thumb{
  position:relative;
  overflow:hidden;
  min-width:0;
  width:100%;
  height:var(--vri-sidebar-thumb-height);
  margin:0;
  padding:0;
  border:1px solid rgba(255,255,255,.15);
  border-radius:9px;
  background:rgba(255,255,255,.06);
  cursor:pointer;
  opacity:.62;
  box-shadow:0 6px 14px rgba(0,0,0,.12);
  transition:
    opacity .2s ease,
    border-color .2s ease,
    transform .2s ease,
    box-shadow .2s ease;
}

.vri-pe__highrise-thumb::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.04);
}

.vri-pe__highrise-thumb img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.vri-pe__highrise-thumb.is-active,
.vri-pe__highrise-thumb[aria-pressed="true"]{
  opacity:1;
  border-color:var(--vri-gold-soft);
  box-shadow:
    0 0 0 1px rgba(224,173,72,.22),
    0 7px 18px rgba(0,0,0,.18);
}

.vri-pe__highrise-thumb:hover{
  opacity:1;
  transform:translateY(-1px);
}

.vri-pe__highrise-thumb:focus-visible{
  outline:3px solid rgba(224,173,72,.34);
  outline-offset:2px;
}

/* =========================================================
   HIGH-RISE CARD
========================================================= */

.vri-pe__highrise{
  min-width:0;
  height:100%;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.07);
  border-radius:22px;
  display:flex;
  flex-direction:column;
  color:#fff;
  background:
    radial-gradient(circle at 100% 0%,rgba(211,164,74,.11),transparent 35%),
    linear-gradient(155deg,#0a3a58 0%,#06283f 56%,#051f31 100%);
  box-shadow:0 18px 44px rgba(7,37,55,.15);
}

.vri-pe__highrise-image{
  flex:0 0 auto;
  padding:
    var(--vri-highrise-pad-top)
    var(--vri-highrise-pad-right)
    0
    var(--vri-highrise-pad-left);
}

.vri-pe__highrise-stage{
  position:relative;
  overflow:hidden;
  width:100%;
  aspect-ratio:16/10;
  border-radius:15px;
  background:rgba(255,255,255,.06);
}

.vri-pe__highrise-slide{
  position:absolute;
  inset:0;
  margin:0;
  opacity:0;
  pointer-events:none;
  transform:scale(1.012);
  transition:opacity .34s ease,transform .48s ease;
}

.vri-pe__highrise-slide.is-active{
  opacity:1;
  pointer-events:auto;
  transform:scale(1);
}

.vri-pe__highrise-slide img{
  display:block;
  width:100%;
  height:100%;
  object-fit:cover;
}

.vri-pe__highrise-empty{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  padding:18px;
  color:rgba(255,255,255,.72);
  font-size:12px;
  font-weight:700;
  text-align:center;
}

.vri-pe__highrise-body{
  min-height:0;
  flex:1 1 auto;
  display:flex;
  flex-direction:column;
  padding:
    17px
    var(--vri-highrise-pad-right)
    var(--vri-highrise-pad-bottom)
    var(--vri-highrise-pad-left);
}

.vri-pe__highrise-kicker{
  color:var(--vri-gold-soft);
  font-size:10px;
  line-height:1.3;
  font-weight:800;
  letter-spacing:.9px;
  text-transform:uppercase;
}

.vri-pe__highrise h3{
  margin:9px 0 8px;
  color:#fff;
  font-family:"Playfair Display",Georgia,serif;
  font-size:22px;
  line-height:1.05;
  font-weight:700;
  letter-spacing:-.2px;
}

.vri-pe--highrise-nowrap .vri-pe__highrise h3{
  white-space:nowrap;
}

.vri-pe__highrise p{
  margin:0 0 12px;
  color:rgba(255,255,255,.78);
  font-size:12px;
  line-height:1.5;
}

.vri-pe__stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:auto;
  border-top:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
}

.vri-pe__stat{
  min-width:0;
  padding:15px 5px 14px;
  border-right:1px solid rgba(255,255,255,.14);
  text-align:center;
}

.vri-pe__stat:last-child{
  border-right:0;
}

.vri-pe__stat strong{
  display:block;
  color:var(--vri-gold-soft);
  font-size:25px;
  line-height:1;
  font-weight:800;
}

.vri-pe__stat span{
  display:block;
  margin-top:5px;
  color:rgba(255,255,255,.83);
  font-size:7.5px;
  line-height:1.25;
  font-weight:800;
  text-transform:uppercase;
}

.vri-pe__cta{
  position:relative;
  z-index:12;
  min-height:48px;
  margin-top:14px;
  padding:0 14px;
  border:1px solid var(--vri-gold-soft);
  border-radius:11px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  color:var(--vri-gold-soft);
  text-decoration:none;
  pointer-events:auto;
  cursor:pointer;
  touch-action:manipulation;
  font-size:10px;
  line-height:1.2;
  font-weight:800;
  text-transform:uppercase;
  transition:background .2s ease,color .2s ease,transform .2s ease;
}

.vri-pe__cta:not(.is-disabled):hover{
  background:var(--vri-gold-soft);
  color:var(--vri-navy);
  transform:translateY(-1px);
}

.vri-pe__cta.is-disabled{
  opacity:.84;
}

/* =========================================================
   TABLET
========================================================= */

@media (max-width:1024px){
  .vri-pe{
    padding:54px 0 60px;
  }

  .vri-pe__inner{
    width:min(940px,calc(100% - 34px));
  }

  .vri-pe__title{
    font-size:38px;
    max-width:100%;
  }

  .vri-pe__shell{
    grid-template-columns:1fr;
  }

  .vri-pe__main{
    display:block;
  }

  .vri-pe__panel,
  .vri-pe__media{
    height:auto;
  }

  .vri-pe__media{
    display:block;
  }

  .vri-pe__stage{
    min-height:var(--vri-stage-min);
    height:var(--vri-stage-min);
  }

  .vri-pe__highrise{
    height:auto;
    display:grid;
    grid-template-columns:minmax(0,1fr) minmax(320px,.86fr);
  }

  .vri-pe__highrise-image{
    padding:
      var(--vri-highrise-pad-top)
      0
      var(--vri-highrise-pad-bottom)
      var(--vri-highrise-pad-left);
  }

  .vri-pe__highrise-stage{
    height:100%;
    aspect-ratio:auto;
  }

  .vri-pe__highrise-body{
    padding:
      var(--vri-highrise-pad-top)
      var(--vri-highrise-pad-right)
      var(--vri-highrise-pad-bottom)
      17px;
  }
}

/* =========================================================
   MOBILE – APP MODE
========================================================= */

@media (max-width:767px){
  /* Mobile: stop the desktop full-bleed 100vw offset from shifting the whole widget.
     The Elementor container is already viewport-width on phone, so the explorer must
     follow the real parent width instead of recalculating from 50vw. */
  .elementor-widget-tmland_vri_product_explorer,
  .elementor-widget-tmland_vri_product_explorer > .elementor-widget-container{
    width:100% !important;
    max-width:100% !important;
    margin-left:0 !important;
    margin-right:0 !important;
    left:auto !important;
    right:auto !important;
    transform:none !important;
  }

  .vri-pe{
    width:100%;
    max-width:100%;
    margin-left:0;
    margin-right:0;
    left:auto;
    right:auto;
    transform:none;
    padding:42px 0 50px;
    overflow:visible;
    background:transparent;
  }

  /* Full-viewport champagne backdrop without moving the widget itself.
     This fills Elementor's white side gutters while the app content stays centered. */
  .vri-pe::before{
    content:"";
    position:absolute;
    top:0;
    bottom:0;
    left:50%;
    width:100vw;
    width:100dvw;
    transform:translateX(-50%);
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(circle at 108% 12%, transparent 0 190px, rgba(181,132,45,.115) 191px 192px, transparent 193px 100%),
      radial-gradient(circle at -10% 80%, transparent 0 155px, rgba(181,132,45,.072) 156px 157px, transparent 158px 100%),
      radial-gradient(circle at 88% 4%, rgba(224,173,72,.055), transparent 34%),
      linear-gradient(180deg,#fbf8f2 0%,#f5ecdf 100%);
  }

  /* The backdrop already carries the mobile linework; hide the old circles
     so they cannot create overflow outside the centered widget. */
  .vri-pe__decor{
    display:none;
  }

  .vri-pe__inner{
    position:relative;
    z-index:1;
  }

  .vri-pe__inner{
    width:calc(100% - 24px);
  }

  .vri-pe__heading{
    margin-bottom:22px;
  }

  .vri-pe__eyebrow{
    gap:9px;
    font-size:10px;
    letter-spacing:1.4px;
  }

  .vri-pe__eyebrow::before{
    width:25px;
    flex-basis:25px;
  }

  .vri-pe__title{
    max-width:100%;
    margin:10px 0 11px;
    font-size:32px;
    line-height:1.06;
    letter-spacing:-.7px;
    text-wrap:pretty;
  }

  .vri-pe__description{
    font-size:14px;
    line-height:1.58;
  }

  .vri-pe__tabs-shell{
    position:relative;
  }

  .vri-pe__tabs{
    display:flex;
    gap:4px;
    overflow-x:auto;
    padding:4px 48px 4px 4px;
    border-radius:14px;
    scroll-snap-type:x proximity;
    overscroll-behavior-x:contain;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
  }

  .vri-pe__tabs-hint{
    position:absolute;
    top:50%;
    right:10px;
    z-index:3;
    display:flex;
    align-items:center;
    justify-content:flex-end;
    width:64px;
    height:38px;
    pointer-events:none;
    transform:translateY(-50%);
    transition:opacity .22s ease, visibility .22s ease;
  }

  .vri-pe__tabs-hint::before{
    content:"";
    position:absolute;
    inset:-2px -2px -2px 0;
    border-radius:0 12px 12px 0;
    background:linear-gradient(90deg, rgba(251,248,242,0) 0%, rgba(251,248,242,.76) 34%, rgba(251,248,242,.96) 100%);
  }

  .vri-pe__tabs-hint.is-hidden{
    opacity:0;
    visibility:hidden;
  }

  .vri-pe__tabs-hint-icon{
    position:relative;
    z-index:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:2px;
    width:30px;
    height:30px;
    border-radius:999px;
    background:rgba(8,47,73,.90);
    box-shadow:0 8px 18px rgba(5,38,59,.18);
  }

  .vri-pe__tabs-hint-icon i{
    display:block;
    width:8px;
    height:8px;
    border-top:2px solid #fff;
    border-right:2px solid #fff;
    transform:rotate(45deg);
    opacity:.92;
  }

  .vri-pe__tabs::-webkit-scrollbar{
    display:none;
  }

  .vri-pe__tab{
    flex:0 0 auto;
    min-width:108px;
    min-height:44px;
    padding:0 12px;
    border-radius:10px;
    font-size:11px;
    scroll-snap-align:center;
  }

  .vri-pe__panels{
    padding-top:10px;
  }

  .vri-pe__media{
    display:block;
  }

  .vri-pe__stage{
    min-height:0;
    height:auto;
    overflow:visible;
    border-radius:17px;
    background:transparent;
    box-shadow:none;
  }

  .vri-pe__slide,
  .vri-pe__empty{
    position:relative;
    inset:auto;
    width:100%;
    height:var(--vri-stage-min);
    min-height:250px;
    overflow:hidden;
    border-radius:17px;
  }

  .vri-pe__slide{
    display:none;
    opacity:1;
    transform:none;
  }

  .vri-pe__slide.is-active{
    display:block;
  }

  .vri-pe__arrow{
    display:none;
  }

  .vri-pe__counter{
    top:11px;
    right:11px;
    min-width:56px;
    height:31px;
    font-size:9px;
  }

  .vri-pe__info{
    position:relative;
    left:auto;
    bottom:auto;
    width:100%;
    margin-top:10px;
    padding:16px;
    border-radius:16px;
    background:var(--vri-info-bg);
    box-shadow:0 10px 28px rgba(31,39,43,.08);
    backdrop-filter:blur(var(--vri-info-blur));
    -webkit-backdrop-filter:blur(var(--vri-info-blur));
  }

  .vri-pe__counter-label{
    font-size:10px;
  }

  .vri-pe__info h3{
    margin:6px 0 7px;
    font-size:23px;
  }

  .vri-pe__info p{
    font-size:13.5px;
    line-height:1.55;
  }

  .vri-pe__chip{
    padding:7px 9px;
    font-size:8.5px;
  }


  .vri-pe__info.is-features-only{
    left:0;
    right:0;
    bottom:auto;
    width:100%;
    max-width:none;
    margin:10px 0 0;
    padding:12px 14px;
    transform:none;
  }

  .vri-pe__info.is-features-only .vri-pe__chips{
    width:100%;
    flex-wrap:nowrap;
    justify-content:center;
    gap:7px;
  }

  .vri-pe__info.is-features-only .vri-pe__chip{
    font-size:9px;
  }

  .vri-pe__highrise{
    display:block;
    border-radius:18px;
  }

  .vri-pe__highrise-image{
    padding:
      13px
      13px
      0
      13px;
  }

  .vri-pe__highrise-stage{
    height:auto;
    aspect-ratio:16/10;
    border-radius:13px;
  }

  .vri-pe__highrise-thumbs{
    gap:6px;
    margin-bottom:12px;
  }

  .vri-pe__highrise-thumb{
    border-radius:8px;
  }

  .vri-pe__highrise-body{
    padding:15px 13px 13px;
  }

  .vri-pe--highrise-nowrap .vri-pe__highrise h3{
    white-space:normal;
  }

  .vri-pe__highrise h3{
    font-size:24px;
  }

  .vri-pe__stat{
    padding:13px 4px;
  }

  .vri-pe__stat strong{
    font-size:23px;
  }

  .vri-pe__stat span{
    font-size:7px;
  }
}

@media (prefers-reduced-motion:reduce){
  .vri-pe *,
  .vri-pe *::before,
  .vri-pe *::after{
    scroll-behavior:auto !important;
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
}