/*
 * Trial app-style homepage (templates/default/homepage_v2.php).
 * Mirrors the Flutter app's v2 home screen. Only loaded by that template and
 * every rule is scoped under .home-v2, so nothing leaks into the rest of the
 * site or the classic homepage.
 *
 * Palette from simplysimApp lib/config/theme.dart (BrandColors.pink).
 */

/* Poppins 500/600/700, latin subset, self-hosted next to the 400 weight
   that custom.css already loads site-wide. 700 is preloaded in <head>. */
@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 500;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-500-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 600;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-600-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
   font-family: 'Poppins';
   font-style: normal;
   font-weight: 700;
   font-display: swap;
   src: url('../img/assets/fonts/poppins/poppins-700-latin.woff2') format('woff2');
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

.home-v2 {
   --hv2-navy: #14183A;
   --hv2-pink: #E8236E;
   --hv2-pink-dark: #C2145A;
   --hv2-pink-soft: #FDE7EF;
   --hv2-pill-border: #E4E8F0;
   /* Neutrals: pink is kept for the hero accent and primary buttons only. */
   --hv2-slate: #5B6178;
   --hv2-body: #4A4F63;
   --hv2-neutral: #F3F5F9;
   --hv2-neutral-border: #E4E8F0;
   --hv2-grey600: #6B6B6B;
   --hv2-grey500: #8A8A8A;
   --hv2-grey100: #F0F0F0;
   --hv2-bg: #FAFAFA;
   --hv2-card-shadow: 0 6px 24px rgba(20, 24, 58, 0.07);
   --hv2-gutter: 16px;
   background: var(--hv2-bg);
   color: #3a3e40;
   overflow-x: hidden;
   overflow-x: clip;
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
}

/* Content column: 16px gutter on phones, centred max-width on desktop.
   content-box like UIkit's own .uk-container, so the content is 1200 wide. */
.home-v2 .hv2-wrap,
.home-v2 .uk-container {
   box-sizing: content-box;
   max-width: 1200px;
   margin-left: auto;
   margin-right: auto;
   padding-left: var(--hv2-gutter);
   padding-right: var(--hv2-gutter);
}

@media (min-width: 960px) {
   .home-v2 {
      --hv2-gutter: 32px;
   }
}

/* ------------------------------------------------------------------ */
/* Hero                                                                */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-hero {
   position: relative;
   z-index: 5; /* keeps the search dropdown above the sections below */
   /* --hv2-head-pad: room for the see-through site header (set below). */
   padding: calc(28px + var(--hv2-head-pad, 0px)) 0 28px;
}

/* Clips the photo and wash only, so the search dropdown can overhang. */
.home-v2 .hv2-hero-media {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   overflow: hidden;
   z-index: 0;
}

.home-v2 .hv2-hero-bg {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: top center;
   z-index: 0;
}

/* Same wash as HeroV2: white 0.85 > 0.92 at 22% > 0.70 at the bottom. */
.home-v2 .hv2-hero-wash {
   position: absolute;
   top: 0;
   right: 0;
   bottom: 0;
   left: 0;
   z-index: 1;
   background: linear-gradient(to bottom,
         rgba(255, 255, 255, 0.85) 0%,
         rgba(255, 255, 255, 0.92) 22%,
         rgba(255, 255, 255, 0.70) 100%);
}

.home-v2 .hv2-hero-inner {
   position: relative;
   z-index: 2;
}

.home-v2 .hv2-copy {
   max-width: 600px;
}

.home-v2 .hv2-title {
   font-family: 'Poppins', sans-serif;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.15;
   letter-spacing: -0.2px;
   color: var(--hv2-navy);
   margin: 0;
}

.home-v2 .hv2-title-visual {
   display: block;
}

/* The real H1 text sits in a visually hidden span (for crawlers and
   screen readers); this visual copy carries the rotating word. */
.home-v2 .hv2-title-visual > span {
   display: block;
}

/* Rotating last word (script in homepage_v2.php). The current word stays
   in flow so the line height never changes; the slot width is set by JS
   and animates between words, like the app's AnimatedSize. */
.home-v2 .hv2-rot {
   display: inline-block;
   position: relative;
   vertical-align: top;
   white-space: nowrap;
}

.home-v2 .hv2-rot.is-ready {
   transition: width .45s cubic-bezier(0.33, 1, 0.68, 1);
}

.home-v2 .hv2-rot-word {
   display: inline-block;
   white-space: nowrap;
   transition: opacity .45s cubic-bezier(0.33, 1, 0.68, 1), transform .45s cubic-bezier(0.33, 1, 0.68, 1);
}

.home-v2 .hv2-rot-word.is-current {
   position: relative;
   opacity: 1;
   transform: none;
}

.home-v2 .hv2-rot-word.is-entering,
.home-v2 .hv2-rot-word.is-leaving,
.home-v2 .hv2-rot-word.hv2-rot-probe {
   position: absolute;
   left: 0;
   top: 0;
}

.home-v2 .hv2-rot-word.is-entering {
   opacity: 0;
   transform: translateY(0.47em);
   transition: none;
}

.home-v2 .hv2-rot-word.is-leaving {
   opacity: 0;
   transform: translateY(-0.47em);
}

.home-v2 .hv2-rot-word.hv2-rot-probe {
   visibility: hidden;
   transition: none;
}

.home-v2 .hv2-title .hv2-pink {
   color: var(--hv2-pink);
}

.home-v2 .hv2-sub {
   font-size: 14px;
   line-height: 1.5;
   color: var(--hv2-grey600);
   margin: 8px 0 0;
}

/* Search pill: restyles the shared destination_search markup in place. */
.home-v2 .hv2-search {
   position: relative;
   margin-top: 18px;
}

.home-v2 .hv2-search .uk-search {
   display: block;
}

.home-v2 .hv2-search .uk-search-icon {
   display: none;
}

.home-v2 .hv2-search-pin {
   position: absolute;
   left: 16px;
   top: 26px;
   transform: translateY(-50%);
   z-index: 3;
   color: var(--hv2-grey500);
   font-size: 18px;
   line-height: 1;
   pointer-events: none;
}

.home-v2 .hv2-search #destination-search {
   height: 52px;
   border-radius: 26px;
   border: 0 !important;
   background: #fff;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
   padding-left: 46px !important;
   padding-right: 56px !important;
   font-family: 'Poppins', sans-serif;
   font-size: 16px;
   color: var(--hv2-navy);
}

.home-v2 .hv2-search #destination-search::placeholder {
   color: var(--hv2-grey500);
   opacity: 1;
}

.home-v2 .hv2-search #destination-search:focus {
   outline: none;
   box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08), 0 0 0 2px rgba(20, 24, 58, 0.10);
}

.home-v2 .hv2-search #use-location-btn {
   width: 52px;
   height: 52px;
   margin: 0 !important;
   top: 0 !important;
   right: 0 !important;
   transform: none !important;
   display: flex;
   align-items: center;
   justify-content: center;
}

.home-v2 .hv2-search #use-location-btn i {
   color: var(--hv2-pink) !important;
   zoom: 1 !important;
   font-size: 20px;
}

/* Crosshairs, like the app's my_location icon. */
.home-v2 .hv2-search #use-location-btn .fa-location-arrow::before {
   content: "\f05b";
}

.home-v2 .hv2-search #search-results {
   border-radius: 18px;
   overflow-x: hidden;
   box-shadow: 0 10px 30px rgba(20, 24, 58, 0.14);
   margin-top: 8px;
   text-align: left;
}

.home-v2 .hv2-multi {
   display: inline-flex;
   align-items: center;
   gap: 6px;
   margin-top: 12px;
   font-size: 13px;
   font-weight: 600;
   color: var(--hv2-navy);
   text-decoration: none;
   max-width: 100%;
}

.home-v2 .hv2-multi:hover {
   color: var(--hv2-navy);
   text-decoration: underline;
   text-underline-offset: 3px;
}

.home-v2 .hv2-multi span {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
}

.home-v2 .hv2-multi .fa-chevron-right {
   font-size: 11px;
}

/* ------------------------------------------------------------------ */
/* Round flag rows (recently viewed + popular)                         */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-flags {
   margin-top: 24px;
}

.home-v2 .hv2-flags + .hv2-flags {
   margin-top: 20px;
}

.home-v2 .hv2-row-title {
   font-family: 'Poppins', sans-serif;
   font-size: 15px;
   font-weight: 600;
   line-height: 1.4;
   color: var(--hv2-navy);
   margin: 0 0 14px;
}

.home-v2 .hv2-flag-row {
   display: flex;
   gap: 10px;
   list-style: none;
   padding: 4px var(--hv2-gutter) 6px;
   margin: 0 calc(var(--hv2-gutter) * -1);
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-padding-left: var(--hv2-gutter);
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
}

.home-v2 .hv2-flag-row::-webkit-scrollbar {
   display: none;
}

.home-v2 .hv2-flag-row > li {
   flex: 0 0 84px;
   width: 84px;
   margin: 0;
   scroll-snap-align: start;
}

.home-v2 .hv2-flag {
   display: flex;
   flex-direction: column;
   align-items: center;
   text-align: center;
   text-decoration: none;
   color: var(--hv2-navy);
}

.home-v2 .hv2-flag:hover {
   text-decoration: none;
   color: var(--hv2-navy);
}

.home-v2 .hv2-flag-img {
   width: 60px;
   height: 60px;
   border-radius: 50%;
   overflow: hidden;
   background: var(--hv2-grey100);
   box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
   transition: transform .15s ease, box-shadow .15s ease;
}

.home-v2 .hv2-flag:hover .hv2-flag-img {
   transform: translateY(-2px);
   box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
}

.home-v2 .hv2-flag-img img {
   display: block;
   width: 100%;
   height: 100%;
   object-fit: cover;
}

.home-v2 .hv2-flag-name {
   margin-top: 6px;
   font-size: 12px;
   font-weight: 500;
   line-height: 1.2;
   display: -webkit-box;
   -webkit-line-clamp: 2;
   -webkit-box-orient: vertical;
   overflow: hidden;
}

/* Tablet and up: centred hero, compact type, centred flag rows.
   Phone (< 768px) keeps the app's left-aligned layout above. */
@media (min-width: 768px) {
   .home-v2 .hv2-hero {
      padding: calc(36px + var(--hv2-head-pad, 0px)) 0 30px;
   }

   /* Same side padding as the header's .uk-container (30px, then 40px
      from 960px), so the copy and flags line up with the logo. */
   .home-v2 .hv2-hero .hv2-wrap {
      padding-left: 30px;
      padding-right: 30px;
   }

   /* Everything in the hero shares the container's left edge. */
   .home-v2 .hv2-copy {
      max-width: none;
      text-align: left;
   }

   .home-v2 .hv2-title {
      font-size: 36px;
      font-weight: 700;
   }

   .home-v2 .hv2-sub {
      font-size: 16px;
      margin-top: 8px;
   }

   .home-v2 .hv2-search {
      max-width: 640px;
      margin: 24px 0 0;
      text-align: left;
   }

   .home-v2 .hv2-search #destination-search {
      height: 56px;
      border-radius: 28px;
   }

   .home-v2 .hv2-search-pin {
      top: 28px;
   }

   .home-v2 .hv2-search #use-location-btn {
      width: 56px;
      height: 56px;
   }

   .home-v2 .hv2-multi {
      font-size: 14px;
      margin-top: 16px;
   }

   .home-v2 .hv2-flags {
      margin-top: 26px;
   }

   .home-v2 .hv2-flags + .hv2-flags {
      margin-top: 18px;
   }

   .home-v2 .hv2-row-title {
      font-size: 17px;
      text-align: left;
      margin-bottom: 12px;
   }

   /* A grid that always fits the container (12 across at 1200px)
      instead of a scroller. Each flag and its name are centred in
      their column. */
   .home-v2 .hv2-flag-row {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
      gap: 16px 6px;
      overflow: visible;
      margin: 0;
      padding: 4px 0 6px;
      scroll-snap-type: none;
   }

   .home-v2 .hv2-flag-row > li {
      width: auto;
      min-width: 0;
   }

   .home-v2 .hv2-flag {
      align-items: center;
      text-align: center;
   }

   .home-v2 .hv2-flag-img {
      width: 56px;
      height: 56px;
   }

   .home-v2 .hv2-flag-name {
      font-size: 13px;
      display: block;
      -webkit-line-clamp: unset;
      overflow: visible;
      padding: 0 2px;
   }
}

@media (min-width: 960px) {
   .home-v2 .hv2-hero .hv2-wrap {
      padding-left: 40px;
      padding-right: 40px;
   }
}

/* ------------------------------------------------------------------ */
/* Desktop: the SimplySIM app beside the hero copy (the app's tablet   */
/* _HeroCopyRowTablet layout). Three CSS-framed phones, fanned, plus   */
/* the store badges. Hidden below 960px.                               */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-app {
   display: none;
}

@media (min-width: 960px) {
   /* Two columns: copy, Recently viewed and Popular stacked on the left,
      the app column spanning all of them on the right. The flexible
      first and last rows soak up any height difference, so whichever
      side is shorter is centred against the other and no gap ever opens
      between the left-hand blocks (with or without Recently viewed). */
   .home-v2 .hv2-hero-inner {
      display: grid;
      grid-template-columns: minmax(0, 1fr) clamp(280px, 38%, 420px);
      grid-template-rows: minmax(0, 1fr) auto auto auto minmax(0, 1fr);
      column-gap: 48px;
   }

   .home-v2 .hv2-hero-top {
      display: contents;
   }

   .home-v2 .hv2-hero-top .hv2-copy {
      grid-column: 1;
      grid-row: 2;
      min-width: 0;
   }

   .home-v2 #hv2-recent {
      grid-column: 1;
      grid-row: 3;
      min-width: 0;
   }

   .home-v2 .hv2-popular {
      grid-column: 1;
      grid-row: 4;
      min-width: 0;
   }

   .home-v2 .hv2-hero-top .hv2-search {
      max-width: 560px;
   }

   .home-v2 .hv2-app {
      display: block;
      grid-column: 2;
      grid-row: 1 / -1;
      align-self: center;
      min-width: 0;
   }
}

/* The fan is sized from the column width: the front phone is 42% wide
   and sits in flow (so it sets the height), the side phones are 38% wide,
   tucked behind and tilted about their bottom centre. Insets are chosen
   so even the tilted top corners stay inside the column. */
.home-v2 .hv2-phones {
   position: relative;
   padding-top: 4%;
}

.home-v2 .hv2-phone {
   box-sizing: border-box;
   padding: 9px;
   border-radius: 20% / 9.2%;
   background: #111318;
   box-shadow: 0 18px 40px rgba(20, 24, 58, 0.22), 0 4px 10px rgba(20, 24, 58, 0.12);
}

.home-v2 .hv2-phone picture,
.home-v2 .hv2-phone img {
   display: block;
   width: 100%;
   height: auto;
}

/* Screen keeps the screenshot's own ratio inside the bezel, so nothing is cropped. */
.home-v2 .hv2-phone img {
   aspect-ratio: 600 / 1304;
   border-radius: 15% / 6.9%;
   object-fit: contain;
   background: #fff;
}

.home-v2 .hv2-phone-left,
.home-v2 .hv2-phone-right {
   position: absolute;
   bottom: 2%;
   width: 38%;
   transform-origin: bottom center;
}

.home-v2 .hv2-phone-left {
   left: 10%;
   transform: rotate(-7deg);
}

.home-v2 .hv2-phone-right {
   right: 10%;
   transform: rotate(7deg);
}

.home-v2 .hv2-phone-front {
   position: relative;
   z-index: 2;
   width: 42%;
   margin: 0 auto;
   box-shadow: 0 24px 50px rgba(20, 24, 58, 0.28), 0 6px 14px rgba(20, 24, 58, 0.14);
}

@media (min-width: 1200px) {
   .home-v2 .hv2-phone {
      padding: 10px;
   }
}

.home-v2 .hv2-app-cta {
   margin-top: 22px;
   text-align: center;
}

.home-v2 .hv2-app-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-app-badges {
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   align-items: center;
   gap: 10px;
   margin-top: 10px;
}

.home-v2 .hv2-app-badges a {
   display: block;
   line-height: 0;
}

.home-v2 .hv2-badge-apple {
   height: 44px;
   width: auto;
}

/* Google's badge PNG carries transparent padding: 64px tall gives the
   same 44px visible badge as Apple's, the negative margin trims the gap. */
.home-v2 .hv2-badge-google {
   height: 64px;
   width: auto;
   margin: -10px -9px;
}

/* Mobile copy of the app block, a soft card under Your eSIMs.
   Overflow is clipped so the tilted phones never cause sideways scroll. */
.home-v2 .hv2-app-mobile {
   padding: 8px 0 24px;
}

.home-v2 .hv2-app-mobile-card {
   overflow: hidden;
   padding: 24px 16px 22px;
   border: 1px solid var(--hv2-neutral-border);
   border-radius: 20px;
   background: var(--hv2-neutral);
}

.home-v2 .hv2-app-mobile .hv2-phones {
   max-width: 400px;
   margin: 0 auto;
}

@media (min-width: 960px) {
   .home-v2 .hv2-app-mobile {
      display: none;
   }
}

@media (min-width: 1200px) {
   .home-v2 .hv2-hero {
      padding: calc(44px + var(--hv2-head-pad, 0px)) 0 34px;
   }

   .home-v2 .hv2-title {
      font-size: 42px;
   }

   .home-v2 .hv2-sub {
      font-size: 17px;
   }
}

/* ------------------------------------------------------------------ */
/* Body sections: clean card style                                     */
/* ------------------------------------------------------------------ */
.home-v2 .uk-section,
.home-v2 .uk-section.uk-padding-remove-top {
   /* Half the section rhythm each side: 36px between sections on phone,
      56px on desktop. */
   padding-top: 18px !important;
   padding-bottom: 18px !important;
   margin-top: 0 !important;
   margin-bottom: 0 !important;
   background: transparent;
}

/* uk-padding on shared sections would add a second gutter inside ours. */
.home-v2 .uk-section.uk-padding {
   padding-left: 0 !important;
   padding-right: 0 !important;
}

@media (min-width: 960px) {
   .home-v2 .uk-section,
   .home-v2 .uk-section.uk-padding-remove-top {
      padding-top: 28px !important;
      padding-bottom: 28px !important;
   }
}

.home-v2 h2,
.home-v2 h3,
.home-v2 h4,
.home-v2 .uk-card-title {
   font-family: 'Poppins', sans-serif;
   color: var(--hv2-navy);
}

/* Section headings: drop the grey rule lines, use the app's navy. */
.home-v2 h2.uk-heading-line,
.home-v2 .hv2-section-title {
   font-size: 22px;
   font-weight: 700;
   line-height: 1.25;
   text-align: left !important;
   margin: 0 0 8px;
   overflow: visible;
}

.home-v2 .uk-heading-line > span::before,
.home-v2 .uk-heading-line > span::after {
   display: none;
}

.home-v2 .uk-heading-line > span {
   display: inline;
}

@media (min-width: 960px) {
   .home-v2 h2.uk-heading-line,
   .home-v2 .hv2-section-title {
      font-size: 28px;
   }
}

.home-v2 .uk-section p.uk-text-center.fontl,
.home-v2 .hv2-section-sub {
   text-align: left !important;
   color: var(--hv2-grey600);
   font-size: 14px;
   line-height: 1.6;
   max-width: 860px;
   margin-left: 0;
   margin-top: 0;
   margin-bottom: 20px !important;
}

/* Generic white card */
.home-v2 .hv2-card,
.home-v2 .uk-card-default {
   background: #fff;
   border-radius: 20px !important;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .hv2-card {
   box-sizing: border-box;
   padding: 22px 20px;
}

@media (min-width: 960px) {
   .home-v2 .hv2-card {
      padding: 36px 40px;
   }
}

.home-v2 .uk-card-default.uk-card-hover:hover {
   box-shadow: 0 12px 32px rgba(20, 24, 58, 0.12);
}

/* Buttons: pill shaped, brand pink. */
.home-v2 .uk-button {
   border-radius: 999px;
   font-family: 'Poppins', sans-serif;
   font-weight: 600;
   text-transform: none;
}

.home-v2 .uk-button-primary {
   background: var(--hv2-pink) !important;
   border: 0 !important;
   color: #fff !important;
}

.home-v2 .uk-button-primary:hover {
   background: var(--hv2-pink-dark) !important;
   color: #fff !important;
}

.home-v2 .uk-button-default {
   background: #fff;
   border: 1px solid var(--hv2-pill-border);
   color: var(--hv2-navy);
}

.home-v2 .uk-button-default:hover {
   border-color: var(--hv2-navy);
   color: var(--hv2-navy);
}

.home-v2 .add-to-basket {
   background: var(--hv2-pink) !important;
}

.home-v2 .add-to-basket:hover {
   background: var(--hv2-pink-dark) !important;
}

/* Signed-in eSIM strip (home_esims, injected client side) */
.home-v2 .home-esims .esim-card {
   border-radius: 20px;
   border-left: 0;
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .home-esims .esim-card .esim-cta,
.home-v2 .home-esims a.uk-link-text {
   color: var(--hv2-navy);
}

.home-v2 .home-esims h2 {
   font-weight: 700;
}

/* Phone: the eSIM strip and Popular/Regional/Global grids
   scroll sideways instead of stacking (same idiom as .hv2-flag-row).
   Gap replaces UIkit's gutter margin/padding; the vertical padding keeps
   the card shadows from being clipped by the scroller. */
@media (max-width: 639px) {
   .home-v2 .hv2-swipe,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid] {
      display: flex;
      flex-wrap: nowrap;
      align-items: stretch;
      gap: 14px;
      padding: 10px var(--hv2-gutter) 26px;
      margin: -10px calc(var(--hv2-gutter) * -1) -16px;
      overflow-x: auto;
      scroll-snap-type: x mandatory;
      scroll-padding-left: var(--hv2-gutter);
      -webkit-overflow-scrolling: touch;
      scrollbar-width: none;
   }

   .home-v2 .hv2-swipe::-webkit-scrollbar,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid]::-webkit-scrollbar {
      display: none;
   }

   .home-v2 .hv2-swipe > *,
   .home-v2 .hv2-swipe > .uk-grid-margin,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid] > *,
   .home-v2 .hv2-popular-grid .uk-container > [uk-grid] > .uk-grid-margin {
      flex: 0 0 85%;
      width: 85%;
      max-width: 340px;
      margin: 0;
      padding-left: 0;
      scroll-snap-align: start;
   }

   .home-v2 .hv2-swipe-esims > *,
   .home-v2 .hv2-swipe-esims > .uk-grid-margin {
      flex-basis: 78%;
      width: 78%;
   }
}

/* Feature bar: four small white tiles */
.home-v2 .hv2-features .uk-section {
   background: transparent !important;
   padding: 0 !important;
}

.home-v2 .hv2-features .uk-grid > div > .uk-flex {
   background: #fff;
   border-radius: 18px;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: var(--hv2-card-shadow);
   padding: 14px 16px;
   height: 100%;
}

.home-v2 .hv2-features svg path,
.home-v2 .hv2-features svg circle,
.home-v2 .hv2-features svg rect,
.home-v2 .hv2-features svg line {
   stroke: var(--hv2-slate);
}

.home-v2 .hv2-features svg rect[y="7"],
.home-v2 .hv2-features [uk-icon="icon: bolt; ratio: 1.4"] svg path {
   fill: var(--hv2-slate);
   stroke: none;
}

.home-v2 .hv2-features .uk-text-bold {
   color: var(--hv2-navy);
   font-size: 13px;
}

/* Country list (destinations_all, hide_map) */
.home-v2 .hv2-countries .uk-section {
   background: transparent !important;
}

.home-v2 .hv2-countries h2.fontxl {
   font-size: 22px;
   font-weight: 700;
   text-align: left !important;
}

.home-v2 .hv2-countries .uk-card-body {
   border-radius: 16px !important;
   border: 1px solid var(--hv2-pill-border) !important;
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .hv2-countries .uk-card-body img {
   width: 30px;
   height: 30px;
   border-radius: 50%;
   object-fit: cover;
}

.home-v2 .hv2-countries .fontm {
   color: var(--hv2-navy);
   font-weight: 500;
}

/* FAQ accordion as stacked cards */
.home-v2 .hv2-faq .uk-accordion > li {
   background: #fff;
   border-radius: 16px;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: var(--hv2-card-shadow);
   padding: 14px 18px;
   margin-top: 10px;
}

.home-v2 .hv2-faq .uk-accordion-title {
   font-size: 15px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-faq .uk-accordion-content {
   margin-top: 10px;
   color: var(--hv2-grey600);
}

/* homepage_faqs columns=true: two independent accordions, stacked on phones
   and side by side from 960px. align-items: start so opening an item only
   grows its own column. */
.home-v2 .hv2-faq .hv2-faq-cols {
   display: grid;
   grid-template-columns: minmax(0, 1fr);
   align-items: start;
   margin-bottom: 20px;
}

.home-v2 .hv2-faq .hv2-faq-cols > .uk-accordion {
   margin: 0;
}

@media (min-width: 960px) {
   .home-v2 .hv2-faq .hv2-faq-cols {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      column-gap: 20px;
   }
}

.home-v2 .hv2-faq a:not(.uk-button):not(.uk-accordion-title),
.home-v2 .hv2-why a:not(.uk-button) {
   color: var(--hv2-navy);
   text-decoration: underline;
   text-underline-offset: 3px;
}

/* Why SimplySIM cards */
.home-v2 .hv2-why .uk-text-lead {
   text-align: left !important;
   margin-left: 0 !important;
   font-size: 16px;
   color: var(--hv2-grey600);
}

.home-v2 .hv2-why .uk-card-title i {
   color: var(--hv2-slate) !important;
}

.home-v2 .hv2-why .uk-card-title {
   color: var(--hv2-navy);
}

/* Long-form SEO copy card */
.home-v2 .hv2-seo p {
   text-align: left;
   color: #4d4d4d;
   line-height: 1.7;
}

.home-v2 .hv2-seo .hv2-seo-intro {
   max-width: 760px;
   margin: 8px 0 0;
   font-size: 15px;
   line-height: 1.6;
   color: #4b5563;
}

/* Heading row: H2 on the left, prev/next arrows on the right (640px+). */
.home-v2 .hv2-seo-head {
   display: flex;
   align-items: flex-start;
   justify-content: space-between;
   gap: 16px;
}

.home-v2 .hv2-seo-nav {
   display: none;
   flex-shrink: 0;
   gap: 8px;
}

.home-v2 .hv2-seo-arrow {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   padding: 0;
   border: 1px solid #e5e7eb;
   border-radius: 50%;
   background: #fff;
   color: var(--hv2-navy);
   font-size: 13px;
   cursor: pointer;
   transition: opacity 0.15s ease, border-color 0.15s ease;
}

.home-v2 .hv2-seo-arrow:hover {
   border-color: #c4c8cf;
}

.home-v2 .hv2-seo-arrow:disabled {
   opacity: 0.35;
   pointer-events: none;
   cursor: default;
}

@media (min-width: 640px) {
   .home-v2 .hv2-seo-nav {
      display: flex;
   }
}

/* Tiles scroll sideways at every width: ~80% on phones so the next one
   peeks in, 2.3 visible from 640px, 4 from 1100px. */
.home-v2 .hv2-seo-grid {
   --hv2-seo-gap: 20px;
   display: flex;
   gap: var(--hv2-seo-gap);
   margin-top: 20px;
   padding-bottom: 8px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-behavior: smooth;
   -webkit-overflow-scrolling: touch;
   scrollbar-width: none;
}

.home-v2 .hv2-seo-grid::-webkit-scrollbar {
   display: none;
}

.home-v2 .hv2-seo-tile {
   display: flex;
   flex-direction: column;
   flex: 0 0 80%;
   min-width: 0;
   background: #fff;
   scroll-snap-align: start;
}

@media (min-width: 640px) {
   .home-v2 .hv2-seo-tile {
      flex-basis: calc((100% - 2 * var(--hv2-seo-gap)) / 2.3);
   }
}

@media (min-width: 1100px) {
   .home-v2 .hv2-seo-tile {
      flex-basis: calc((100% - 3 * var(--hv2-seo-gap)) / 4);
   }
}

.home-v2 .hv2-seo-tile picture {
   display: block;
}

.home-v2 .hv2-seo-tile img {
   display: block;
   width: 100%;
   height: auto;
   aspect-ratio: 16 / 9;
   object-fit: cover;
   border-radius: 10px;
}

.home-v2 .hv2-seo-tile h3 {
   margin: 12px 0 4px;
   font-size: 16px;
   font-weight: 600;
   line-height: 1.35;
   color: var(--hv2-navy);
}

.home-v2 .hv2-seo .hv2-seo-tile p {
   margin: 0;
   font-size: 14px;
   line-height: 1.6;
   color: #4b5563;
}

.home-v2 .hv2-seo-intro a,
.home-v2 .hv2-seo-tile p a {
   color: inherit;
   text-decoration: underline;
   text-decoration-color: #c4c8cf;
   text-underline-offset: 3px;
   transition: text-decoration-color 0.15s ease;
}

.home-v2 .hv2-seo-intro a:hover,
.home-v2 .hv2-seo-tile p a:hover {
   color: inherit;
   text-decoration-color: var(--hv2-pink);
}

/* ------------------------------------------------------------------ */
/* See-through site header on the v2 homepage                          */
/* body.home-v2-page is added by homepage_v2.php; hv2-scrolled by its  */
/* scroll listener. --hv2-pull / --hv2-head are measured there too;    */
/* the values here are the fallbacks (80px navbar + 4px line).         */
/* ------------------------------------------------------------------ */
body.home-v2-page {
   --hv2-pull: 84px;
   --hv2-head: 84px;
}

@media (max-width: 768px) {
   body.home-v2-page {
      --hv2-pull: 59px;
      --hv2-head: 59px;
   }
}

body.home-v2-page .home-v2 {
   --hv2-head-pad: var(--hv2-head);
}

body.home-v2-page .home-v2 .hv2-hero {
   margin-top: calc(-1 * var(--hv2-pull));
}

body.home-v2-page header.uk-box-shadow-small {
   position: relative;
   transition: background-color .25s ease, box-shadow .25s ease;
}

body.home-v2-page header.uk-box-shadow-small > div[style*="height:4px"] {
   transition: opacity .25s ease;
}

body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small {
   background-color: transparent !important;
   box-shadow: none !important;
}

/* iOS Safari tints the status bar from the sticky header and keeps the last
   colour when it turns transparent, so after scrolling back up it stayed
   white. A solid sky colour gives Safari something to sample; the gradient
   on top blends it into the hero photo (sampled from an iPhone render). */
@media (max-width: 959px) {
   /* No fade: Safari samples once the scroll settles, and mid-fade it would
      catch a near-white colour and keep it until the next pull-down. */
   body.home-v2-page header.uk-box-shadow-small {
      transition: box-shadow .25s ease;
   }

   body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small {
      background-color: #dbe6f0 !important;
      background-image: linear-gradient(#dbe6f0, #e2edf5);
   }

   body.home-v2-page.hv2-scrolled header.uk-box-shadow-small {
      background-image: none;
   }
}

/* custom.css paints .uk-navbar white too */
body.home-v2-page header.uk-box-shadow-small .uk-navbar {
   transition: background-color .25s ease;
}

body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small .uk-navbar {
   background-color: transparent;
}

body.home-v2-page:not(.hv2-scrolled) header.uk-box-shadow-small > div[style*="height:4px"] {
   opacity: 0;
}

/* ------------------------------------------------------------------ */
/* Feature bar overlapping the bottom of the hero                      */
/* (feature_bar.php is uk-visible@s, so this only matters from 640px)  */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-features {
   position: relative;
   z-index: 6;
}

/* Lift the hero above the cards while its search dropdown is open. */
.home-v2 .hv2-hero:has(#search-results:not([hidden])) {
   z-index: 7;
}

.home-v2 .hv2-features .uk-grid > div > .uk-flex {
   border: 0;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(20, 24, 58, 0.10);
}

@media (min-width: 640px) {
   /* Room for the cards' top half, so the flag labels never sit under them. */
   .home-v2 .hv2-hero {
      padding-bottom: 76px;
   }

   .home-v2 .hv2-features {
      margin-top: -38px;
   }
}

/* ------------------------------------------------------------------ */
/* Seasonal offers card (home_v2_seasonal.php): a light card with the  */
/* copy and destination tiles on the left and a beach crop on the      */
/* right; the photo stacks on top on phone.                            */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-season-wrap {
   /* Same rhythm as the .uk-section blocks around it. */
   padding: 36px 0 18px;
}

.home-v2 .hv2-season {
   display: flex;
   flex-direction: column;
   background: #fff;
   border-radius: 24px;
   overflow: hidden;
   box-shadow: var(--hv2-card-shadow), 0 2px 6px rgba(20, 24, 58, 0.04);
}

.home-v2 .hv2-season-media {
   position: relative;
   height: 160px;
   overflow: hidden;
   background: #e9eef5;
}

/* Photo fills the panel; the template picks it from img/assets/home/seasonal/. */
.home-v2 .hv2-season-media img {
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   object-fit: cover;
   object-position: 50% 50%;
   display: block;
}

.home-v2 .hv2-season-body {
   box-sizing: border-box;
   padding: 22px 20px 24px;
   min-width: 0;
}

.home-v2 .hv2-season-title {
   margin: 0;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--hv2-navy);
}

.home-v2 .hv2-season-title .hv2-pink {
   color: inherit;
}

.home-v2 .hv2-season-sub {
   margin: 10px 0 0;
   font-size: 14px;
   line-height: 1.6;
   color: var(--hv2-grey600);
   max-width: 560px;
}

.home-v2 .hv2-season-ticks {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 8px 16px;
   list-style: none;
   margin: 16px 0 0;
   padding: 0;
   max-width: 520px;
}

.home-v2 .hv2-season-ticks li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   font-size: 13px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-season-ticks i {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-slate);
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}

.home-v2 .hv2-season-dest-title {
   margin: 22px 0 10px;
   font-size: 15px;
   font-weight: 600;
   color: var(--hv2-navy);
}

/* Phone: tiles scroll sideways, full-bleed to the card edge. */
.home-v2 .hv2-season-dests {
   display: flex;
   gap: 8px;
   list-style: none;
   margin: 0 -20px;
   padding: 4px 20px 8px;
   overflow-x: auto;
   scroll-snap-type: x mandatory;
   scroll-padding-left: 20px;
   scrollbar-width: none;
}

.home-v2 .hv2-season-dests::-webkit-scrollbar {
   display: none;
}

.home-v2 .hv2-season-dests li {
   flex: 0 0 auto;
   margin: 0;
   scroll-snap-align: start;
}

.home-v2 .hv2-season-dests a {
   display: flex;
   align-items: center;
   gap: 8px;
   padding: 6px 14px 6px 6px;
   border-radius: 999px;
   background: #fff;
   border: 1px solid var(--hv2-pill-border);
   box-shadow: 0 3px 10px rgba(20, 24, 58, 0.06);
   font-size: 13px;
   font-weight: 600;
   color: var(--hv2-navy);
   text-decoration: none;
   white-space: nowrap;
   transition: border-color .15s ease, color .15s ease, transform .15s ease;
}

.home-v2 .hv2-season-dests a:hover {
   border-color: #C9CFDB;
   color: var(--hv2-navy);
   transform: translateY(-1px);
   text-decoration: none;
}

.home-v2 .hv2-season-dests img {
   width: 28px;
   height: 28px;
   border-radius: 50%;
   object-fit: cover;
   box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

@media (min-width: 768px) {
   .home-v2 .hv2-season-wrap {
      padding: 56px 0 28px;
   }

   .home-v2 .hv2-season {
      flex-direction: row-reverse;
      align-items: stretch;
   }

   .home-v2 .hv2-season-media {
      flex: 0 0 30%;
      height: auto;
      min-height: 280px;
      margin: 14px 14px 14px 0;
      border-radius: 18px;
   }

   .home-v2 .hv2-season-body {
      flex: 1 1 auto;
      padding: 36px 32px 36px 40px;
   }

   .home-v2 .hv2-season-title {
      font-size: 32px;
   }

   .home-v2 .hv2-season-sub {
      font-size: 15px;
   }

   .home-v2 .hv2-season-dests {
      flex-wrap: wrap;
      margin: 0;
      padding: 4px 0 4px;
      overflow: visible;
      scroll-snap-type: none;
   }
}

@media (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-season-dests a {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Popular Destinations: 7 flags plus a More tile from 768px; the     */
/* other 7 open as a second row. Phone keeps the full scroll row.      */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-more-tile {
   display: none;
}

@media (min-width: 768px) {
   .home-v2 .hv2-flag-row,
   .home-v2 .hv2-popular .hv2-flag-row {
      grid-template-columns: repeat(8, minmax(0, 1fr));
      gap: 16px 8px;
   }

   .home-v2 .hv2-popular .hv2-flag-row {
      transition: height .3s ease;
   }

   .home-v2 .hv2-flag-row.is-collapsed .hv2-more-item {
      display: none;
   }

   /* Flags shrink with narrow columns instead of wrapping. */
   .home-v2 .hv2-flag-img {
      width: min(56px, 100%);
      height: auto;
      aspect-ratio: 1;
   }

   .home-v2 .hv2-more-tile {
      display: block;
      grid-column: 8;
      grid-row: 1;
   }

   .home-v2 .hv2-more-btn {
      display: flex;
      flex-direction: column;
      align-items: center;
      width: 100%;
      margin: 0;
      padding: 0;
      border: 0;
      background: none;
      cursor: pointer;
      font: inherit;
      color: var(--hv2-navy);
      text-align: center;
   }

   .home-v2 .hv2-more-circle {
      display: flex;
      align-items: center;
      justify-content: center;
      width: min(56px, 100%);
      aspect-ratio: 1;
      border-radius: 50%;
      background: #fff;
      color: var(--hv2-navy);
      font-size: 18px;
      box-shadow: 0 3px 8px rgba(0, 0, 0, 0.10);
      transition: transform .15s ease, box-shadow .15s ease;
   }

   .home-v2 .hv2-more-circle i {
      transition: transform .3s ease;
   }

   .home-v2 .hv2-more-btn:hover .hv2-more-circle {
      transform: translateY(-2px);
      box-shadow: 0 6px 14px rgba(0, 0, 0, 0.14);
   }

   .home-v2 .hv2-more-btn:hover {
      color: var(--hv2-navy);
   }

   .home-v2 .hv2-more-btn:focus-visible .hv2-more-circle {
      outline: 2px solid var(--hv2-navy);
      outline-offset: 2px;
   }

   .home-v2 .hv2-more-btn[aria-expanded="true"] .hv2-more-circle i {
      transform: rotate(180deg);
   }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-popular .hv2-flag-row,
   .home-v2 .hv2-more-circle i {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Light content cards (roaming, students, trip planner, affiliate):   */
/* copy on the left, a tinted panel on the right; stacked on phone.    */
/* ------------------------------------------------------------------ */
.home-v2 .hv2-lcard {
   display: flex;
   flex-direction: column;
   gap: 20px;
   box-sizing: border-box;
   padding: 22px 20px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 24px;
   box-shadow: var(--hv2-card-shadow);
}

.home-v2 .hv2-lcard-body {
   flex: 1 1 auto;
   min-width: 0;
}

.home-v2 .hv2-lcard-side {
   box-sizing: border-box;
   min-width: 0;
}

.home-v2 .hv2-lcard-title {
   margin: 0;
   font-size: 24px;
   font-weight: 700;
   line-height: 1.2;
   color: var(--hv2-navy);
}

.home-v2 .hv2-lcard-title .hv2-pink {
   color: inherit;
}

.home-v2 .hv2-lcard-title .hv2-purple {
   color: #7A2EC7;
}

.home-v2 .hv2-lcard-text {
   margin: 12px 0 0;
   font-size: 16px;
   line-height: 1.6;
   color: var(--hv2-body);
}

.home-v2 .hv2-lcard-text strong {
   color: var(--hv2-navy);
}

.home-v2 .hv2-pill-btn {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   height: 48px;
   margin: 0;
   padding: 0 22px;
   border: 0;
   border-radius: 999px;
   background: var(--hv2-pink);
   font-family: inherit;
   font-size: 15px;
   font-weight: 600;
   color: #fff;
   text-decoration: none;
   cursor: pointer;
   transition: background-color .15s ease;
}

.home-v2 .hv2-pill-btn:hover {
   background: var(--hv2-pink-dark);
   color: #fff;
   text-decoration: none;
}

.home-v2 .hv2-pill-ghost {
   background: #fff;
   border: 1.5px solid var(--hv2-navy);
   color: var(--hv2-navy);
}

.home-v2 .hv2-pill-ghost:hover {
   background: var(--hv2-navy);
   border-color: var(--hv2-navy);
   color: #fff;
}

.home-v2 .hv2-btn-row {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.home-v2 .hv2-lcard-head {
   display: flex;
   align-items: center;
   gap: 14px;
}

.home-v2 .hv2-checks {
   display: grid;
   grid-template-columns: repeat(2, minmax(0, 1fr));
   gap: 10px 16px;
   list-style: none;
   margin: 18px 0 0;
   padding: 0;
   max-width: 560px;
}

.home-v2 .hv2-checks li {
   display: flex;
   align-items: center;
   gap: 8px;
   margin: 0;
   font-size: 14px;
   font-weight: 500;
   color: var(--hv2-navy);
}

.home-v2 .hv2-checks i {
   flex: 0 0 20px;
   width: 20px;
   height: 20px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-slate);
   font-size: 10px;
   display: flex;
   align-items: center;
   justify-content: center;
}



/* Roaming: "Did You Know?" stat panel */
.home-v2 .hv2-roam-fact {
   padding: 22px 20px;
   border-radius: 18px;
   background: var(--hv2-neutral);
   border: 1px solid var(--hv2-neutral-border);
   text-align: center;
}

.home-v2 .hv2-roam-fact-title {
   margin: 0;
   font-size: 16px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-roam-fact-figure {
   margin-top: 8px;
   font-size: 30px;
   font-weight: 700;
   line-height: 1.1;
   color: var(--hv2-navy);
}

.home-v2 .hv2-roam-fact-text {
   margin: 10px 0 0;
   font-size: 14px;
   line-height: 1.55;
   color: var(--hv2-grey600);
}

.home-v2 .hv2-roam-fact-small {
   margin-top: 14px;
   font-size: 12px;
   color: var(--hv2-grey500);
}

.home-v2 .hv2-roam-logos {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: center;
   gap: 10px 16px;
   margin-top: 10px;
}

.home-v2 .hv2-roam-logos img {
   display: block;
   height: 22px;
   width: auto;
   filter: grayscale(1);
   opacity: 0.75;
   transition: filter .2s ease, opacity .2s ease;
}

.home-v2 .hv2-roam-logos img:hover {
   filter: none;
   opacity: 1;
}

.home-v2 .hv2-roam-logos span {
   font-size: 12px;
   color: var(--hv2-grey500);
}

/* Students: same white card as the rest, form panel on the right */

.home-v2 .hv2-student-icon {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   width: 36px;
   height: 36px;
   margin-right: 12px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-navy);
   font-size: 16px;
   vertical-align: 4px;
}

.home-v2 .hv2-student-form {
   padding: 22px 20px;
   border-radius: 18px;
   background: #fff;
   background: var(--hv2-neutral);
   border: 1px solid var(--hv2-neutral-border);
   box-shadow: none;
}

.home-v2 .hv2-student-form-title {
   margin: 0;
   font-size: 18px;
   font-weight: 600;
   color: var(--hv2-navy);
}

.home-v2 .hv2-student-form-text {
   margin: 8px 0 0;
   font-size: 14px;
   line-height: 1.5;
   color: var(--hv2-grey600);
}

.home-v2 .hv2-student-row {
   display: flex;
   gap: 8px;
   margin-top: 14px;
}

.home-v2 .hv2-student-row .uk-input {
   flex: 1 1 auto;
   min-width: 0;
   height: 48px;
   padding: 0 14px;
   border: 1px solid var(--hv2-neutral-border);
   border-radius: 12px;
   background: #fff;
   font-size: 15px;
   color: var(--hv2-navy);
}

.home-v2 .hv2-student-row .uk-input:focus {
   border-color: var(--hv2-navy);
}

.home-v2 .hv2-student-row .hv2-pill-btn {
   flex: 0 0 auto;
   margin-top: 0;
}

/* Phones: input full width with the button underneath, 16px text so iOS
   doesn't zoom on focus. */
@media (max-width: 559px) {
   .home-v2 .hv2-student-row {
      flex-direction: column;
      gap: 10px;
   }

   .home-v2 .hv2-student-row .uk-input {
      flex: 0 0 auto;
      width: 100%;
      height: auto;
      min-height: 52px;
      padding: 0 20px;
      border-radius: 999px;
      font-size: 16px;
   }

   .home-v2 .hv2-student-row .hv2-pill-btn {
      width: 100%;
      height: auto;
      min-height: 52px;
      font-size: 16px;
   }
}

.home-v2 .hv2-student-small {
   margin: 12px 0 0;
   font-size: 13px;
   line-height: 1.5;
   color: var(--hv2-grey500);
}

.home-v2 .hv2-student-small a {
   color: var(--hv2-navy);
   text-decoration: underline;
   text-underline-offset: 2px;
}

/* Trip planner: purple accent; app icon beside the headline (a big icon
   tile replaces it on tablet, where the card is wide) */
.home-v2 .hv2-trip-icon-sm {
   display: block;
   flex: 0 0 56px;
   width: 56px;
   height: 56px;
   border-radius: 14px;
   box-shadow: 0 8px 20px rgba(91, 63, 168, 0.25);
}

.home-v2 .hv2-trip-tile {
   display: none;
}

.home-v2 .hv2-badge-row {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 10px 12px;
}

.home-v2 .hv2-badge-row a {
   display: block;
   line-height: 0;
}

.home-v2 .hv2-badge-apple {
   height: 44px;
   width: auto;
}

/* Google's badge PNG carries transparent padding (see .hv2-app-badges). */
.home-v2 .hv2-badge-row .hv2-badge-google {
   height: 64px;
   width: auto;
   margin: -10px -9px;
}

.home-v2 .hv2-badge-note {
   font-size: 13px;
   color: var(--hv2-grey500);
}

/* Affiliate: tinted stat panel */
.home-v2 .hv2-aff-stat {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   padding: 24px 20px;
   border-radius: 18px;
   background: var(--hv2-neutral);
   border: 1px solid var(--hv2-neutral-border);
   text-align: center;
}

.home-v2 .hv2-aff-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 64px;
   height: 64px;
   border-radius: 50%;
   background: #fff;
   color: var(--hv2-slate);
   font-size: 28px;
   box-shadow: 0 6px 16px rgba(20, 24, 58, 0.10);
}

.home-v2 .hv2-aff-figure {
   margin-top: 12px;
   font-size: 40px;
   font-weight: 700;
   line-height: 1;
   color: var(--hv2-navy);
}

.home-v2 .hv2-aff-label {
   margin-top: 8px;
   max-width: 220px;
   font-size: 14px;
   line-height: 1.45;
   color: var(--hv2-grey600);
}

@media (max-width: 479px) {
   .home-v2 .hv2-checks {
      grid-template-columns: 1fr;
   }
}

/* Tablet: one card per row, copy left and the tinted panel right. */
@media (min-width: 768px) {
   .home-v2 .hv2-lcard {
      display: grid;
      grid-template-columns: minmax(0, 1fr) 36%;
      grid-template-areas: "body side" "actions side";
      grid-template-rows: auto 1fr;
      gap: 20px 40px;
      padding: 36px 40px;
   }

   .home-v2 .hv2-lcard-body {
      grid-area: body;
   }

   .home-v2 .hv2-lcard-side {
      grid-area: side;
      align-self: center;
   }

   .home-v2 .hv2-lcard-actions {
      grid-area: actions;
   }

   .home-v2 .hv2-lcard-title {
      font-size: 32px;
   }

   .home-v2 .hv2-lcard-text {
      font-size: 17px;
   }

   .home-v2 .hv2-roam-fact,
   .home-v2 .hv2-student-form,
   .home-v2 .hv2-aff-stat {
      padding: 28px 26px;
   }

   .home-v2 .hv2-aff-stat {
      align-self: stretch;
   }

   .home-v2 .hv2-roam-fact-figure {
      font-size: 34px;
   }

   .home-v2 .hv2-trip-icon-sm {
      display: none;
   }

   .home-v2 .hv2-trip-tile {
      display: flex;
      align-self: stretch;
      align-items: center;
      justify-content: center;
      min-height: 220px;
      border-radius: 18px;
      background: linear-gradient(135deg, #F4EEFC, #FBEFF7);
   }

   .home-v2 .hv2-trip-tile img {
      width: 140px;
      height: 140px;
      border-radius: 32px;
      box-shadow: 0 16px 36px rgba(91, 63, 168, 0.28);
   }
}

/* Phone/tablet: the paired cards stack, so space them apart. */
@media (max-width: 959px) {
   .home-v2 .hv2-pair > * + * {
      margin-top: 20px;
   }
}

/* Desktop: pairs of equal-height compact cards, panel under the copy and
   the call to action pinned to the bottom so buttons line up per row. */
@media (min-width: 960px) {
   .home-v2 .hv2-pair {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
      gap: 24px;
      align-items: stretch;
   }

   .home-v2 .hv2-pair .hv2-lcard {
      display: flex;
      flex-direction: column;
      gap: 16px;
      height: 100%;
      padding: 24px 26px;
   }

   .home-v2 .hv2-pair .hv2-lcard-side {
      align-self: stretch;
      width: 100%;
   }

   .home-v2 .hv2-pair .hv2-lcard-actions {
      margin-top: auto;
   }

   /* The student card's form is its call to action. */
   .home-v2 .hv2-pair .hv2-student-form {
      margin-top: auto;
   }

   .home-v2 .hv2-pair .hv2-lcard-title {
      font-size: 22px;
   }

   .home-v2 .hv2-pair .hv2-lcard-text {
      margin-top: 8px;
      font-size: 15px;
      line-height: 1.5;
   }

   .home-v2 .hv2-pair .hv2-checks {
      margin-top: 12px;
      gap: 8px 16px;
   }

   .home-v2 .hv2-pair .hv2-roam-fact,
   .home-v2 .hv2-pair .hv2-student-form,
   .home-v2 .hv2-pair .hv2-aff-stat {
      padding: 16px 20px;
   }

   .home-v2 .hv2-pair .hv2-student-form-title {
      font-size: 16px;
   }

   .home-v2 .hv2-pair .hv2-student-row {
      margin-top: 10px;
   }

   .home-v2 .hv2-pair .hv2-roam-fact-figure {
      font-size: 28px;
   }

   .home-v2 .hv2-pair .hv2-aff-stat {
      flex-direction: row;
      gap: 16px;
      text-align: left;
   }

   .home-v2 .hv2-pair .hv2-aff-icon {
      flex: 0 0 44px;
      width: 44px;
      height: 44px;
      font-size: 19px;
   }

   .home-v2 .hv2-pair .hv2-aff-figure {
      margin-top: 0;
      font-size: 28px;
   }

   .home-v2 .hv2-pair .hv2-aff-label {
      margin-top: 0;
   }

   .home-v2 .hv2-pair .hv2-trip-icon-sm {
      display: block;
   }

   .home-v2 .hv2-pair .hv2-trip-tile {
      display: none;
   }
}

/* Narrow pair cards: the student button drops under the input. */
@media (min-width: 960px) and (max-width: 1099px) {
   .home-v2 .hv2-pair .hv2-student-row {
      flex-direction: column;
      gap: 10px;
   }

   .home-v2 .hv2-pair .hv2-student-row .uk-input {
      flex: 0 0 auto;
      width: 100%;
      font-size: 16px;
   }

   .home-v2 .hv2-pair .hv2-student-row .hv2-pill-btn {
      width: 100%;
   }
}

@media (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-pill-btn,
   .home-v2 .hv2-roam-logos img {
      transition: none;
   }
}

/* Grown-up type: 700 headlines with slightly tighter tracking. */
.home-v2 .hv2-title,
.home-v2 .hv2-lcard-title,
.home-v2 .hv2-season-title,
.home-v2 h2.uk-heading-line,
.home-v2 .hv2-section-title {
   font-weight: 700;
   letter-spacing: -0.01em;
}

.home-v2 .hv2-season-sub,
.home-v2 .hv2-roam-fact-text,
.home-v2 .hv2-student-form-text,
.home-v2 .hv2-aff-label,
.home-v2 .hv2-seo p,
.home-v2 .uk-section p.uk-text-center.fontl {
   color: var(--hv2-body);
}

/* ── Passport Stamps app teaser (homepage_v2.php, .pp-promo-*) ──────────
   Mirrors the app's home passport card with sample numbers. Soft fills are
   neutral grey with pink text, never a pink tint. */
.home-v2 .pp-promo-card {
   box-sizing: border-box;
   padding: 22px 20px;
   background: #fff;
   border: 1px solid var(--hv2-pill-border);
   border-radius: 20px;
   box-shadow: var(--hv2-card-shadow);
   min-width: 0;
}

.home-v2 .pp-promo-head {
   display: flex;
   align-items: flex-start;
   gap: 12px;
}

.home-v2 .pp-promo-icon {
   flex: 0 0 36px;
   width: 36px;
   height: 36px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-pink);
   display: flex;
   align-items: center;
   justify-content: center;
   font-size: 17px;
}

.home-v2 .pp-promo-title {
   font-family: 'Poppins', sans-serif;
   font-size: 18px;
   font-weight: 700;
   letter-spacing: -0.01em;
   line-height: 1.3;
   color: var(--hv2-navy);
   margin: 4px 0 4px;
}

.home-v2 .pp-promo-sub {
   font-size: 14px;
   line-height: 1.5;
   color: var(--hv2-body);
   margin: 0;
}

.home-v2 .pp-promo-body {
   display: flex;
   flex-direction: column;
   gap: 18px;
   margin-top: 18px;
   min-width: 0;
}

.home-v2 .pp-promo-count {
   display: flex;
   align-items: baseline;
   flex-wrap: wrap;
   gap: 4px 10px;
}

.home-v2 .pp-promo-num {
   font-family: 'Poppins', sans-serif;
   font-size: 40px;
   font-weight: 700;
   line-height: 1.05;
   color: var(--hv2-pink);
}

.home-v2 .pp-promo-label {
   font-size: 14px;
   color: var(--hv2-slate);
}

.home-v2 .pp-promo-pill {
   margin-left: auto;
   align-self: center;
   padding: 4px 12px;
   border-radius: 999px;
   background: var(--hv2-neutral);
   color: var(--hv2-pink-dark);
   font-size: 13px;
   font-weight: 600;
   white-space: nowrap;
}

.home-v2 .pp-promo-bar {
   height: 6px;
   margin-top: 12px;
   border-radius: 3px;
   background: var(--hv2-pill-border);
   overflow: hidden;
}

.home-v2 .pp-promo-bar > span {
   display: block;
   height: 100%;
   border-radius: 3px;
   background: var(--hv2-pink);
}

/* Scrolls inside the card on narrow screens; never widens the page. */
.home-v2 .pp-promo-flags {
   display: flex;
   gap: 8px;
   list-style: none;
   margin: 0;
   padding: 0;
   min-width: 0;
   overflow-x: auto;
   scrollbar-width: none;
   -webkit-overflow-scrolling: touch;
}

.home-v2 .pp-promo-flags::-webkit-scrollbar {
   display: none;
}

.home-v2 .pp-promo-flags > li {
   flex: 0 0 52px;
}

.home-v2 .pp-promo-flags img {
   display: block;
   width: 52px;
   height: 52px;
   object-fit: cover;
   border-radius: 12px;
   border: 1px solid var(--hv2-pill-border);
   box-sizing: border-box;
}

.home-v2 .pp-promo-badges {
   display: flex;
   align-items: center;
   flex-wrap: wrap;
   gap: 12px;
}

.home-v2 .pp-promo-badge-apple {
   height: 44px;
   width: auto;
}

.home-v2 .pp-promo-badge-google {
   height: 64px;
   width: auto;
   margin: -10px -9px;
}

.home-v2 .pp-promo-buttons {
   display: flex;
   flex-wrap: wrap;
   gap: 10px;
}

.home-v2 .pp-promo-get {
   margin: 12px 0 0;
   font-size: 13px;
   color: var(--hv2-slate);
}

.home-v2 .pp-promo-get a {
   color: var(--hv2-pink-dark);
   font-weight: 600;
}

.home-v2 .pp-promo-badges[hidden],
.home-v2 .pp-promo-buttons[hidden],
.home-v2 .pp-promo-get[hidden] {
   display: none;
}

.home-v2 .pp-promo-btn {
   flex: 1 1 auto;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 6px;
   box-sizing: border-box;
   height: 46px;
   padding: 0 14px;
   border-radius: 23px;
   border: 1px solid var(--hv2-pink);
   font-family: 'Poppins', sans-serif;
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   text-decoration: none;
}

.home-v2 .pp-promo-btn-filled {
   background: var(--hv2-pink);
   color: #fff;
}

.home-v2 .pp-promo-btn-filled:hover,
.home-v2 .pp-promo-btn-filled:focus {
   background: var(--hv2-pink-dark);
   border-color: var(--hv2-pink-dark);
   color: #fff;
   text-decoration: none;
}

.home-v2 .pp-promo-btn-outline {
   background: #fff;
   color: var(--hv2-pink-dark);
}

.home-v2 .pp-promo-btn-outline:hover,
.home-v2 .pp-promo-btn-outline:focus {
   color: var(--hv2-pink-dark);
   background: var(--hv2-neutral);
   text-decoration: none;
}

/* Tablet and up: one row (stat | flags | actions), like the app's tablet card. */
@media (min-width: 960px) {
   .home-v2 .pp-promo-card {
      padding: 28px 32px;
   }

   .home-v2 .pp-promo-title {
      font-size: 22px;
   }

   .home-v2 .pp-promo-body {
      flex-direction: row;
      align-items: center;
      gap: 28px;
      margin-top: 22px;
   }

   .home-v2 .pp-promo-stat {
      flex: 0 0 240px;
   }

   .home-v2 .pp-promo-pill {
      margin-left: 0;
   }

   .home-v2 .pp-promo-flags {
      flex: 1 1 auto;
   }

   .home-v2 .pp-promo-actions {
      flex: 0 0 auto;
   }

   .home-v2 .pp-promo-btn {
      flex: 0 0 auto;
      min-width: 150px;
   }
}

/* ── Product carousels (home_v2_slider.php): Popular, Regional, Global and
   Amazing Offers. One row, about 3 cards on desktop with arrows, about
   1.15 on phones so the next card peeks in. The vertical padding on the
   slider container keeps card shadows and the hover lift from clipping. */
.home-v2 .hv2-slider {
   position: relative;
}

/* Clip box with breathing room: padding plus a matching negative margin,
   so card 1's border, shadow and corner ribbon and the hover shadow under
   the cards all show, while the track itself stays flush with the
   container edge. 20px fits inside the uk-container padding from 640px. */
.home-v2 .hv2-slider .uk-slider-container {
   padding: 16px 20px 32px;
   margin: -16px -20px -32px;
}

.home-v2 .hv2-slider .uk-slider-items > * {
   min-width: 0;
}

/* Tablet and desktop: off-screen neighbours are invisible, so their
   shadows don't bleed into the gutters next to the visible cards. */
@media (min-width: 640px) {
   .home-v2 .hv2-slider .uk-slider-items > * {
      transition: opacity 0.25s ease;
   }

   .home-v2 .hv2-slider .uk-slider-items > :not(.uk-active) {
      opacity: 0;
   }
}

.home-v2 .hv2-slider-arrow {
   position: absolute;
   top: 50%;
   z-index: 2;
   width: 44px;
   height: 44px;
   margin-top: -22px;
   padding: 0;
   border: 1px solid var(--hv2-pill-border);
   border-radius: 50%;
   background: #fff;
   color: var(--hv2-navy);
   box-shadow: var(--hv2-card-shadow);
   font-size: 15px;
   cursor: pointer;
   display: none;
   align-items: center;
   justify-content: center;
   transition: opacity 0.2s ease, border-color 0.2s ease;
}

.home-v2 .hv2-slider-arrow:hover,
.home-v2 .hv2-slider-arrow:focus-visible {
   border-color: var(--hv2-navy);
}

.home-v2 .hv2-slider-prev {
   left: -14px;
}

.home-v2 .hv2-slider-next {
   right: -14px;
}

/* UIkit marks the end arrows uk-invisible on a finite slider. */
.home-v2 .hv2-slider-arrow.uk-invisible {
   opacity: 0;
   pointer-events: none;
}

@media (min-width: 640px) {
   .home-v2 .hv2-slider-arrow {
      display: flex;
   }
}

@media (max-width: 639px) {
   /* uk-container padding is 15px on phones: keep the clip box inside it. */
   .home-v2 .hv2-slider .uk-slider-container {
      padding: 12px 14px 28px;
      margin: -12px -14px -28px;
   }

   .home-v2 .hv2-slider .uk-slider-items {
      margin-left: -14px;
   }

   .home-v2 .hv2-slider .uk-slider-items > * {
      width: 87%;
      padding-left: 14px;
   }
}

/* "Show more" card (home_v2_slider more_url): the carousel's last slide,
   linking to the full listing. Same white card, border, radius and shadow
   as the plan cards (css/product_block_v2.css .dv2-plan); it fills its
   slide like .esim-product-v2, so uk-grid-match gives it the row's height.
   The whole card is the link; the pill only looks like the card's
   Add to basket button. */
.home-v2 .hv2-more-slot {
   display: flex;
}

.home-v2 .hv2-more-card {
   flex: 1 1 auto;
   width: 100%;
   min-height: 260px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   gap: 10px;
   padding: 32px 24px;
   background: #fff;
   border: 1px solid var(--hv2-pill-border);
   border-radius: 20px;
   box-shadow: 0 4px 12px rgba(20, 24, 58, 0.04);
   font-family: 'Poppins', 'proxima-nova', Arial, Helvetica, sans-serif;
   text-align: center;
   text-decoration: none;
   color: var(--hv2-body);
   transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.home-v2 .hv2-more-card:hover,
.home-v2 .hv2-more-card:focus-visible {
   border-color: var(--hv2-navy);
   box-shadow: var(--hv2-card-shadow);
   text-decoration: none;
   color: var(--hv2-body);
}

.home-v2 .hv2-more-icon {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 48px;
   height: 48px;
   margin-bottom: 4px;
   border-radius: 50%;
   background: var(--hv2-neutral);
   color: var(--hv2-navy);
   font-size: 18px;
}

.home-v2 .hv2-more-title {
   display: block;
   color: var(--hv2-navy);
   font-size: 20px;
   font-weight: 700;
   line-height: 1.3;
}

.home-v2 .hv2-more-text {
   display: block;
   max-width: 260px;
   color: var(--hv2-slate);
   font-size: 14px;
   line-height: 1.5;
}

.home-v2 .hv2-more-cta {
   display: inline-flex;
   align-items: center;
   justify-content: center;
   box-sizing: border-box;
   height: 44px;
   margin-top: 8px;
   padding: 0 28px;
   border-radius: 999px;
   background: var(--hv2-pink);
   color: #fff;
   font-size: 14px;
   font-weight: 600;
   white-space: nowrap;
   transition: background-color 0.15s ease;
}

.home-v2 .hv2-more-card:hover .hv2-more-cta,
.home-v2 .hv2-more-card:focus-visible .hv2-more-cta {
   background: var(--hv2-pink-dark);
}

@media (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-more-card,
   .home-v2 .hv2-more-cta {
      transition: none;
   }
}

/* ------------------------------------------------------------------ */
/* Skeleton loaders (js/default/home_v2_blocks.js): Popular            */
/* Destinations and Amazing Offers card sliders, and the Recently      */
/* viewed flag row. Neutral grey on white with a light sweep; static   */
/* grey when the visitor prefers reduced motion. The boxes carry       */
/* aria-busy while loading and the skeletons are aria-hidden.          */
/* ------------------------------------------------------------------ */
@keyframes hv2-skel-sweep {
   0% {
      background-position: 100% 0;
   }

   100% {
      background-position: -100% 0;
   }
}

.home-v2 .hv2-skel {
   display: block;
   border-radius: 6px;
   background-color: #EEF0F4;
   background-image: linear-gradient(90deg, #EEF0F4 0%, #F7F8FA 40%, #EEF0F4 80%);
   background-size: 200% 100%;
   background-repeat: no-repeat;
   animation: hv2-skel-sweep 1.4s ease-in-out infinite;
}

/* Recently viewed row: grey circle the flag's size plus a name bar. */
.home-v2 .hv2-skel-row .hv2-flag-img.hv2-skel {
   border-radius: 50%;
   box-shadow: none;
}

.home-v2 .hv2-skel-row .hv2-skel-text {
   width: 70%;
   margin-top: 6px;
   font-size: 12px;
   height: 1.2em;
   border-radius: 4px;
}

@media (min-width: 768px) {
   .home-v2 .hv2-skel-row .hv2-skel-text {
      font-size: 13px;
      width: 60%;
   }
}

/* Product card sliders: same columns as home_v2_slider; the cards are
   sized to product_block's rendered height at each breakpoint (measured:
   about 370px phone, 379px tablet, 389px desktop) so the real cards swap
   in without moving anything below. */
.home-v2 .hv2-slider.hv2-skel-slider .uk-slider-items {
   flex-wrap: nowrap;
}

.home-v2 .hv2-slider.hv2-skel-slider .uk-slider-items > * {
   opacity: 1;
   flex-shrink: 0;
}

.home-v2 .hv2-skel-card {
   display: flex;
   flex-direction: column;
   box-sizing: border-box;
   height: 370px;
   background: #fff;
   border: 1px solid rgba(20, 24, 58, 0.08);
   border-radius: 16px;
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
   overflow: hidden;
}

.home-v2 .hv2-skel-card-head {
   display: flex;
   align-items: center;
   gap: 15px;
   padding: 35px 30px 20px;
   border-bottom: 1px solid var(--hv2-grey100);
}

.home-v2 .hv2-skel-circle {
   flex: 0 0 40px;
   width: 40px;
   height: 40px;
   border-radius: 50%;
}

.home-v2 .hv2-skel-lines {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   gap: 10px;
}

.home-v2 .hv2-skel-line {
   height: 12px;
}

.home-v2 .hv2-skel-lg {
   height: 24px;
   margin-bottom: 6px;
}

.home-v2 .hv2-skel-w40 {
   width: 40%;
}

.home-v2 .hv2-skel-w50 {
   width: 50%;
}

.home-v2 .hv2-skel-w60 {
   width: 60%;
}

.home-v2 .hv2-skel-w70 {
   width: 70%;
}

.home-v2 .hv2-skel-card-body {
   flex: 1 1 auto;
   display: flex;
   flex-direction: column;
   gap: 14px;
   padding: 20px 30px;
}

.home-v2 .hv2-skel-card-foot {
   display: flex;
   gap: 14px;
   padding: 20px 40px;
   border-top: 1px solid var(--hv2-grey100);
}

.home-v2 .hv2-skel-btn {
   flex: 0 1 175px;
   height: 40px;
   border-radius: 500px;
}

.home-v2 .hv2-skel-btn-sm {
   flex: 0 1 108px;
}

@media (max-width: 639px) {
   .home-v2 .hv2-skel-card-foot {
      padding: 20px 30px;
   }

   .home-v2 .hv2-skel-btn {
      flex: 1 1 auto;
   }

   .home-v2 .hv2-skel-btn-sm {
      flex: 0 0 108px;
   }
}

@media (min-width: 640px) {
   .home-v2 .hv2-skel-card {
      height: 379px;
   }
}

@media (min-width: 960px) {
   .home-v2 .hv2-skel-card {
      height: 389px;
   }
}

/* Shown by home_v2_blocks.js only if a block fails to load. */
.home-v2 .hv2-block-fallback {
   margin: 0;
   text-align: center;
   line-height: 2;
}

.home-v2 .hv2-block-fallback a {
   display: inline-block;
   margin: 0 6px;
   color: var(--hv2-navy);
   font-weight: 600;
   text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {
   .home-v2 .hv2-skel {
      animation: none;
      background-image: none;
   }
}