/* Gamerall Landing Pages — front styles (Figma node 1:11481) */

.ga-landing {
  overflow-x: hidden;
}

/* Flush layout on landing pages: the theme's #top_column block (40px tall)
   would push the hero away from the header — hide it entirely, same as the
   theme itself does on checkout/cart. */
body.ga-landing-page #top_column {
  display: none;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* ≤991 the theme's header stack is FIXED (50px promo bar + 76px mobile header
   = 126px) while the body reserves 130px for it, so ~4px of body shows between
   header and content — invisible on white pages, a white strip on our dark
   hero. Paint the body itself in the hero colour: every section below covers
   it with its own background, so only that gap changes. */
body.ga-landing-page {
  background-color: #0d0034;
}

.ga-section {
  position: relative;
}

.ga-section__title {
  margin-bottom: 24px;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  text-transform: uppercase;
}

.ga-landing__preview-note {
  margin: 0;
  text-align: center;
  border-radius: 0;
}

/* ============================= HERO ============================= */
/* Figma: banner 1:11486 — 1920x648 stage, #0d0034 */

.ga-hero {
  position: relative;
  height: 648px;
  background: #0d0034;
  color: #fff;
  overflow: visible;
}

/* Full-width montage backdrop (Figma 1:11489: 1578px frame centered at top,
   inner image offset left 4.75% / top -13.92% at 90.49% width, fading to the
   stage color by ~62% of the 804px frame + a 40% dark tint). */
.ga-hero__art--montage {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1578px;
  max-width: 100%;
  height: 100%;
  background: url('../img/hero/hero-art-left.png') 75px -112px / 1428px 804px no-repeat;
}

.ga-hero__art--montage::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(13, 0, 52, 0) 0%, #0d0034 78%),
    rgba(13, 0, 52, 0.4);
}

/* The couple characters render (Figma 1:11625): stands left of the card,
   feet at the banner bottom, in front of the white slice. Box = the full
   512px scaled width of the (square) art, centred on the same spot a 490px
   box had — narrower boxes crop 11px per side and clip the pistol tip. */
.ga-hero__art--chars {
  position: absolute;
  top: 145px;
  left: calc(50% - 677px);
  width: 512px;
  height: 503px;
  background: url('../img/hero/hero-art-right.png') center bottom / auto 512px no-repeat;
  z-index: 3;
  pointer-events: none;
}

/* White diagonal slice (Figma Rectangle 317: top 252, svg 1920x653, clipped) */
.ga-hero__slice {
  position: absolute;
  top: 252px;
  left: 0;
  width: 100%;
  height: 396px;
  background: url('../img/hero/hero-slice.svg') top / 100% 653px no-repeat;
  z-index: 2;
  pointer-events: none;
}

.ga-hero__inner {
  position: relative;
  z-index: 3;
  height: 100%;
  max-width: 1660px;
  margin: 0 auto;
  padding: 0 20px;
}

.ga-hero__date {
  position: absolute;
  top: 30px;
  right: 40px;
  font-family: 'Manrope', sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 1.2px;
  line-height: 20px;
  text-transform: uppercase;
  color: #fff;
}

.ga-hero__heading {
  position: relative;
  padding-top: 23px;
  text-align: center;
}

.ga-hero__heading::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(1458px, 92%);
  height: 116px;
  background: rgba(13, 0, 52, 0.8);
  border-radius: 100px;
  filter: blur(50px);
}

.ga-hero__subtitle {
  position: relative;
  margin: 0 auto;
  font-family: 'Exo', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 20px;
  color: #fff;
}

/* !important: the ayon theme hides every #main h1 under 992px (display:none)
   and rt_customizer forces 34px via #main h1 — both out-rank any class-only
   selector (their :not(#id) args count as IDs), so the hero title must pin
   its own display/size at every breakpoint. */
.ga-hero__title {
  position: relative;
  display: block !important;
  margin: 0;
  font-family: 'Exo', sans-serif;
  font-size: 50px !important;
  font-weight: 700;
  line-height: 72px !important;
  text-transform: uppercase;
  background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.65) 50%, #fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Key-card, centered (Figma 1:11627 — 228x364, x-center 961, top 248).
   Client spec: plain image with hover animation, not a product card. */
.ga-hero__card {
  position: absolute;
  top: 248px;
  left: 50%;
  margin-left: -114px;
  width: 228px;
  height: 364px;
  display: block;
  /* The exported card image has the design border baked in — no CSS border,
     it would double the edge. */
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.15);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  will-change: transform;
  z-index: 4;
}

.ga-hero__card:hover {
  transform: translateY(-8px) scale(1.03);
  box-shadow: 0 18px 40px rgba(13, 0, 52, 0.55);
}

.ga-hero__card-art {
  width: 100%;
  /* Crop the 4px light export fringe at the bottom of the 462x736 PNG
     (roughly 2px at the rendered card size) inside the card container. */
  height: calc(100% + 2px);
  object-fit: cover;
  display: block;
}


/* Right column: timer 1:11648, notify 1:11626, panel 1:11651 */
.ga-hero__side {
  position: absolute;
  top: 272px;
  left: calc(50% + 61px);
  width: 666px;
}

.ga-countdown {
  position: relative;
  margin-left: 49px;
  width: 267px;
  text-align: center;
  text-transform: uppercase;
}

.ga-countdown::before {
  content: '';
  position: absolute;
  inset: -4px 4px;
  background: #0d0034;
  border-radius: 100px;
  filter: blur(50px);
}

.ga-countdown__label {
  position: relative;
  display: block;
  font-family: 'Exo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 20px;
  color: #fff;
}

.ga-countdown__units {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}

.ga-countdown__unit {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 66px;
}

.ga-countdown__value {
  font-family: 'Exo', sans-serif;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 1.8px;
  line-height: 24px;
  color: #fff;
}

.ga-countdown__word {
  font-family: 'Exo', sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 1.2px;
  line-height: 20px;
  color: #fff;
}

.ga-countdown__colon {
  font-family: 'Manrope', sans-serif;
  font-size: 24px;
  font-weight: 200;
  letter-spacing: 2.4px;
  line-height: 24px;
  color: #fff;
}

/* Angled gradient button (Figma "Notify me v3": 288x66). Hover animation per
   the Figma smart-animate export + Variant3 (node 7098:187360): the angled
   shape stretches wider (286 -> 334, left-anchored), the label scales to
   1.25 with a slight rightward shift, and the fill cross-fades from the
   dark state to the vivid #5A6BFF -> #D317F2 gradient — 0.3s ease-out. */
.ga-hero__notify {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 10px;
  width: 288px;
  height: 66px;
  padding: 0;
  border: 0;
  background: url('../img/hero/notify-btn.svg') center / 100% 100% no-repeat;
  font-family: 'Manrope', sans-serif;
  font-size: 20px;
  font-weight: 500;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: width 0.3s ease-out;
}

.ga-hero__notify::before {
  content: '';
  position: absolute;
  inset: 0;
  background: url('../img/hero/notify-btn-hover.svg') center / 100% 100% no-repeat;
  opacity: 0;
  transition: opacity 0.3s ease-out;
}

.ga-hero__notify:hover,
.ga-hero__notify:focus {
  width: 336px;
  color: #fff;
  text-decoration: none;
}

.ga-hero__notify:hover::before,
.ga-hero__notify:focus::before {
  opacity: 1;
}

.ga-hero__notify-label {
  position: relative;
  display: inline-block;
  transition: transform 0.3s ease-out;
  will-change: transform;
}

.ga-hero__notify:hover .ga-hero__notify-label,
.ga-hero__notify:focus .ga-hero__notify-label {
  transform: translateX(10px) scale(1.25);
}

/* Info panel on the white wedge (Figma "HOW IT WORKS:margin") */
.ga-hero__panel {
  margin: 15px 0 0 75px;
  width: 591px;
  padding: 20px 30px;
  /* Figma 1:8696 — two stacked fills: an opaque-white-to-lavender vertical
     gradient over a flat rgba(238,236,251,0.5) base, so the panel reads white
     at the top and fades translucent toward the bottom (not a flat tint). */
  background:
    linear-gradient(0deg, rgba(238, 236, 251, 0.5) 0%, #fff 94.579%),
    linear-gradient(90deg, rgba(238, 236, 251, 0.5) 0%, rgba(238, 236, 251, 0.5) 100%);
  border-radius: 12px;
}

.ga-hero__panel h2,
.ga-hero__panel h3,
.ga-hero__panel h4 {
  margin: 0 0 10px;
  font-family: 'Exo', sans-serif;
  font-size: 22px;
  font-weight: 600;
  line-height: 26px;
  letter-spacing: 0.22px;
  text-transform: uppercase;
  color: #9747ff;
  opacity: 0.9;
}

.ga-hero__panel p {
  margin: 0;
  font-family: 'Manrope', sans-serif;
  font-size: 17px;
  font-weight: 500;
  line-height: 22px;
  color: #0d0034;
}

.ga-hero__alerts {
  position: relative;
  z-index: 5;
  margin: 12px 0 0 75px;
  width: 591px;
  padding: 16px 20px;
  background: #fff;
  border-radius: 12px;
  color: #0d0034;
  box-shadow: 0 6px 24px rgba(13, 0, 52, 0.15);
}

/* ============================= OTHER SECTIONS ============================= */

.ga-carousel-section {
  padding: 0;
}

/* --- Carousel band: light landing header (Figma 1:11714) ---
   easycarousels bakes a DARK isLandingPage header into carousel.tpl (white
   centered title + arrows, Iconic/Pure/Playful tags, blurred glow). We hide
   that chrome and render our own light header (.ga-carousel-head) from
   GaLandingCarousel meta. Everything is scoped to .ga-carousel-section so
   easycarousels elsewhere is untouched. */
/* easycarousels ships a dark isLandingPage theme (#0D0034); the Figma band is
   light, so drop the dark fill and let the white page show through. */
.ga-carousel-section .easycarousels.isLandingPage {
  background-color: transparent;
}

.ga-carousel-section .carouselTitle,
.ga-carousel-section .carouselTitleHolder,
.ga-carousel-section .landingInner,
.ga-carousel-section .landingInnerEllipse1,
.ga-carousel-section .landingInnerEllipse2 {
  display: none !important;
}

/* Tags stay hidden unless the band opts in (GaLandingCarousel.show_tags) */
.ga-carousel-section .ga-carousel-band:not(.ga-carousel-band--tags) .landingTags {
  display: none !important;
}

.ga-carousel-section .ga-carousel-band {
  position: relative;
}

/* 40px of breathing room between stacked carousel bands. */
.ga-carousel-section .ga-carousel-band + .ga-carousel-band {
  margin-top: 40px;
}

/* Dark bands bring their own dark backdrop, so the white 40px gap above them is
   unwanted — they sit flush against the previous band. */
.ga-carousel-section .ga-carousel-band.ga-carousel-band--dark {
  margin-top: 0;
}

/* The decorative bottom shape (.landingBottom, z-index 1) is painted over the
   last band's divider line, hiding the separator before the following section.
   Lift the divider (position:absolute, default z-index) above it so it shows. */
.ga-carousel-section .featured-products:not(.noBorder)::after {
  z-index: 2;
}

/* The band background art (characters + gradient + white diagonal) is full-bleed
   in Figma. easycarousels renders it as an absolute image inside the container
   block, so break it out to the full viewport width; header text and cards stay
   within the container. */
.ga-carousel-section .featured-products-main-background {
  left: 50%;
  width: 100vw;
  max-width: 100vw;
  margin-left: -50vw;
}

.ga-carousel-section .featured-products-main-background img {
  width: 100%;
  height: auto;
}

/* Figma: the header aligns to the card grid — the title/subtitle block sits
   above card 1 and the paragraph above card 3 (metadata 1:11714). We overlay a
   2-column grid on the cards region (left inset = character column, right edge =
   last card). easycarousels reserves 160px above the cards for its now-hidden
   title, so pull the cards back up to keep the Figma ~20px header-to-cards gap. */
.ga-carousel-section .block_content.carouselContainer {
  margin-top: 70px;
}

/* The header overlays the cards grid: N equal columns (--ga-cols = the
   carousel's visible column count) spanning the cards region, with the
   title/subtitle block over columns 1-2 and the paragraph over columns 3→end.
   --ga-head-left/right position the grid on the cards region; bands with a
   character image are inset further (default), bands without start near the
   content edge (.ga-carousel-band--no-image). */
.ga-carousel-head {
  position: absolute;
  top: 30px;
  left: var(--ga-head-left, 286px);
  right: var(--ga-head-right, 36px);
  z-index: 4;
  display: grid;
  grid-template-columns: repeat(var(--ga-cols, 4), 1fr);
  align-items: start;
  column-gap: 0;
  pointer-events: none;
}

.ga-carousel-band--no-image {
  --ga-head-left: 53px;
  --ga-head-right: 52px;
}

/* No-image bands have no character art to overlay, so the header is a plain
   row ABOVE the carousel (normal flow): title/subtitle left, description
   right-aligned. The left/right padding lines it up with the card track. */
.ga-carousel-band--no-image .ga-carousel-head {
  position: static;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  padding: 0 52px 0 53px;
  margin-bottom: 24px;
  pointer-events: auto;
}

.ga-carousel-band--no-image .ga-carousel-head__intro,
.ga-carousel-band--no-image .ga-carousel-head__text {
  grid-column: auto;
}

/* Header sits above in normal flow, so drop the top space the overlay layout
   reserved (block_content margin/padding + the shared featured-products
   padding-top) — the 24px header margin is the only gap we want. */
.ga-carousel-band--no-image .block_content.carouselContainer {
  margin-top: 0;
  padding-top: 0;
}

.ga-carousel-section .ga-carousel-band--no-image .featured-products {
  padding-top: 0 !important;
}

.ga-carousel-head__intro {
  grid-column: 1 / span 2;
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.ga-carousel-head__title {
  margin: 0;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  font-size: 22px;
  line-height: normal;
  text-transform: uppercase;
  color: #692bac;
}

/* Image bands sit on busy art, so their title is Bold; no-image bands sit on
   clean white and use one weight lighter — Exo SemiBold (Figma: image-band
   title 1:8744 Bold vs no-image title 1:8935 SemiBold). */
.ga-carousel-band--no-image .ga-carousel-head__title {
  font-weight: 600;
}

/* Dark bands (e.g. GTA Online, Figma 1:12286) sit on dark night art, so the
   title is the white shine gradient (same as the hero) instead of purple. */
.ga-carousel-band--dark .ga-carousel-head__title {
  width: fit-content;
  background: var(--Title, linear-gradient(90deg, #FFF 0%, rgba(255, 255, 255, 0.65) 50%, #FFF 100%));
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.ga-carousel-band--dark .ga-carousel-head__subtitle,
.ga-carousel-band--dark .ga-carousel-head__text {
  color: #fff;
}

.ga-carousel-head__subtitle {
  margin: 0;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 30px;
  letter-spacing: -0.2px;
  text-transform: capitalize;
  color: #692bac;
  opacity: 0.9;
  /* Balance the two lines so the subtitle wraps like Figma
     ("Play The GTA Classics" / "While You Wait") instead of a lopsided
     first line. Falls back to normal wrapping where unsupported. */
  text-wrap: balance;
}

.ga-carousel-head__text {
  grid-column: 3 / -1;
  max-width: 494px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 24px;
  color: #0d0034;
  opacity: 0.9;
}

.ga-carousel-head__text p {
  margin: 0;
}

.ga-text,
.ga-features,
.ga-blog,
.ga-faq {
  padding: 40px 0;
}

.ga-text__content {
  line-height: 1.6;
}

/* --- Features bar (Figma 1:12957 "Banner - 2"): gradient banner with 4
   icon + title + 2-line description items separated by faint dividers. The
   4 items and 3 dividers are authored in the section `content` field. --- */
.ga-features .ga-features__content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 30px 60px;
  line-height: normal;
  background: linear-gradient(90deg, #fe3844 0%, #cf19bc 100%);
  border-radius: 12px;
  overflow: hidden;
}

.ga-features__item {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
}

.ga-features__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
}

.ga-features__text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ga-features__title {
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  font-size: 24px;
  line-height: 30px;
  letter-spacing: -0.24px;
  text-transform: uppercase;
}

.ga-features__desc {
  font-family: 'Manrope', sans-serif;
  font-weight: 400;
  font-size: 18px;
  line-height: 24px;
}

.ga-features__divider {
  flex: 0 0 1px;
  width: 1px;
  height: 70px;
  background: rgba(255, 255, 255, 0.3);
  display: block;
}

/* --- SEO text block (Figma 1:13067): light-purple rounded box, purple Exo
   headings, Manrope body, bold sub-heading and a bulleted list. Headings/
   list/paragraphs are authored in the section `content` field. --- */
.ga-text .ga-text__content {
  padding: 20px 30px;
  border-radius: 12px;
  background: rgba(238, 236, 251, 0.5);
  color: #0d0034;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
}

.ga-text__content > :first-child {
  margin-top: 0;
}

.ga-text__content > :last-child {
  margin-bottom: 0;
}

.ga-text__content p {
  margin: 0 0 22px;
}

.ga-text__content strong {
  font-weight: 700;
}

.ga-text__heading {
  margin: 20px 0 10px;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.22px;
  text-transform: uppercase;
  color: #9747ff;
  opacity: 0.9;
}

.ga-text__content ul {
  margin: 0 0 22px;
  padding-left: 26px;
  list-style: disc;
}

.ga-text__content li {
  margin: 0;
}

/* Blog & FAQ are narrower than the text/features sections in Figma (content
   1320px vs 1454px = 90.8%), so cap their container. */
.ga-blog > .container,
.ga-faq > .container {
  max-width: 1216px;
}

/* --- Blog "The GTA VI Blog" (Figma 1:13151): restyle the phblogrecentposts
   cards into the news-card design. Scoped to .ga-blog so phblog elsewhere is
   untouched. NOTE: blog posts have no thumbnail locally (theme post-thumbnail
   is empty) → the image area shows a gradient placeholder; real images fill it
   on live via object-fit. --- */
.ga-blog > .container {
  position: relative;
}

.ga-blog .ga-section__title {
  margin: 0 0 20px;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.22px;
  text-transform: uppercase;
  color: #5813a2;
  opacity: 0.9;
}

/* phblog wraps its own container/section; flatten it and hide the decorative
   circles. Keep the "Show more" button, pinned top-right. Its own "NEWS"
   heading is not rendered at all on landing pages (blog-recent.tpl); the
   .simpleblog-title_desc rule below only still covers the fallback path where
   a section explicitly selects a phblogrecentposts hook template. */
.ga-blog .simpleblog,
.ga-blog .simpleblog > .container,
.ga-blog .simpleblog-inner {
  position: static;
  padding: 0;
  margin: 0;
  max-width: none;
  width: auto;
}

.ga-blog .simpleblog-title_desc,
.ga-blog .simpleblog__listing__post .th_circle,
.ga-blog .comments_and_views {
  display: none;
}

.ga-blog .simpleblog-title {
  position: absolute;
  top: -6px;
  right: 0;
  margin: 0;
  padding: 0;
}

.ga-blog .btn-more {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 29px;
  border: 2px solid #312770;
  border-radius: 10px;
  background: transparent;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  font-size: 18px;
  line-height: 20px;
  text-transform: uppercase;
  color: #312770;
  text-decoration: none;
  white-space: nowrap;
}

/* Cards row: 4 equal cards */
.ga-blog .blog-recent-post-inner .row,
.ga-blog .blog-recent-post-inner > .row {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  margin: 0;
}

.ga-blog .simpleblog__listing__post {
  flex: 1 1 0;
  width: auto;
  max-width: none;
  padding: 0;
}

.ga-blog .simpleblog__listing__post__wrapper {
  display: flex;
  flex-direction: column;
  height: auto;
  border: 1px solid rgba(107, 90, 203, 0.2);
  border-radius: 20px;
  background: linear-gradient(90deg, rgba(9, 223, 220, 0.03), rgba(143, 8, 206, 0.03));
  overflow: hidden;
}

/* Image + category badge */
.ga-blog .simpleblog__listing__post__image {
  position: relative;
  width: 100%;
  aspect-ratio: 315 / 180;
  overflow: hidden;
  background: linear-gradient(135deg, #2a1a5c 0%, #7a1a8f 100%);
}

.ga-blog .simpleblog__listing__post__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.ga-blog .simpleblog__listing__post__wrapper__content__footer__category {
  position: absolute;
  left: 0;
  bottom: 0;
  padding: 10px 22px 8px;
  background: rgba(49, 39, 112, 0.7);
  backdrop-filter: blur(2px);
  border: 4px solid #ff8680;
  border-radius: 0 20px 0 20px;
}

.ga-blog .simpleblog__listing__post__wrapper__content__footer__category a {
  color: #fff;
  font-family: 'Manrope', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: normal;
  text-transform: uppercase;
  text-decoration: none;
}

/* Content */
.ga-blog .simpleblog__listing__post__wrapper__content {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  gap: 8px;
  padding: 12px;
}

.ga-blog .headline_4 {
  margin: 0;
}

.ga-blog .headline_4 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Exo', sans-serif;
  font-weight: 700;
  font-size: 16px;
  line-height: 20px;
  color: #6b5acb;
  text-decoration: none;
}

.ga-blog .simpleblog__listing__post__info {
  display: flex;
  align-items: center;
  gap: 16px;
}

.ga-blog .simpleblog__listing__post__wrapper__footer__block {
  display: flex;
  align-items: center;
  gap: 4px;
  margin: 0;
}

.ga-blog .simpleblog__listing__post__info__text {
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #0d0034;
  opacity: 0.6;
}

.ga-blog .simpleblog__listing__post__description p {
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #241848;
}

/* Tags */
.ga-blog .simpleblog__listing__post__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.ga-blog .simpleblog__listing__post__tag__item {
  padding: 4px 12px;
  border: 1px solid #312770;
  border-radius: 6px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 14px;
  line-height: 18px;
  color: #312770;
}

.ga-blog .simpleblog__listing__post__tag__item a {
  color: inherit;
  text-decoration: none;
}

/* Reading time */
.ga-blog .simpleblog__listing__post__extra_info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.ga-blog .read_time {
  display: flex;
  align-items: center;
  gap: 4px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 16px;
  line-height: 20px;
  color: #0d0034;
  opacity: 0.6;
}

/* --- FAQ accordion (Figma 1:13163): light-purple rounded items; the question
   turns purple when its panel is open; Manrope answer. Bootstrap-collapse
   markup driven by the theme's bundled JS (open trigger = a:not(.collapsed)). --- */
.ga-faq .ga-section__title {
  margin: 0 0 16px;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  font-size: 22px;
  line-height: 26px;
  letter-spacing: 0.22px;
  text-transform: uppercase;
  color: #9747ff;
  opacity: 0.9;
}

.ga-faq .ga-faq__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
}

.ga-faq .ga-faq__item {
  margin: 0;
  border: none;
  border-radius: 12px;
  background: rgba(238, 236, 251, 0.5);
  box-shadow: none;
  overflow: hidden;
}

.ga-faq .ga-faq__question {
  margin: 0;
  padding: 0;
  border: none;
  background: transparent;
}

.ga-faq .ga-faq__question a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 20px 32px;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 24px;
  color: #0d0034;
  text-decoration: none;
  cursor: pointer;
}

.ga-faq .ga-faq__question a::after {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 2px;
  border-right: 2px solid #0d0034;
  border-bottom: 2px solid #0d0034;
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}

/* Open panel: purple question, chevron flipped up. */
.ga-faq .ga-faq__question a:not(.collapsed) {
  color: #9747ff;
  padding-bottom: 16px;
}

.ga-faq .ga-faq__question a:not(.collapsed)::after {
  transform: rotate(-135deg);
}

.ga-faq .ga-faq__answer {
  padding: 0 32px 20px;
  font-family: 'Manrope', sans-serif;
  font-weight: 500;
  font-size: 17px;
  line-height: 22px;
  color: #0d0034;
}

.ga-faq .ga-faq__answer p {
  margin: 0;
}

/* Full-bleed helper for inner content that must escape a .container */
.ga-full-bleed {
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

.isLandingPage .featured-products {
  padding-bottom: 0px !important;
  padding-top: 40px !important;
}

.ga-carousel-section .block_content.carouselContainer {
  margin-top: 0px !important;
}

.ga-features__content > p {
  margin-bottom: 0;
}

.carouselMainTitle h2 {
  text-shadow: 0 0 10px #000;
}

/* ============================= RESPONSIVE ============================= */

/* Small-screen fallback that stacks the hero. Capped at 1023.98px: from 1024px
   up the design (Figma 1:7007) keeps the full horizontal hero, and 768-1023px
   is handled by the tablet block below, so this only ever applies where those
   override it — it must not reach 1024-1280 or it flattens the desktop hero. */
@media (max-width: 1023.98px) {
  .ga-hero {
    height: auto;
    padding-bottom: 60px;
  }

  .ga-hero__slice {
    display: none;
  }

  .ga-hero__card {
    position: static;
    margin: 30px auto 0;
  }

  .ga-hero__side {
    position: static;
    width: auto;
    max-width: 640px;
    margin: 24px auto 0;
  }

  .ga-countdown {
    margin-left: auto;
    margin-right: auto;
  }

  .ga-hero__notify {
    margin: 16px auto 0;
  }

  .ga-hero__panel,
  .ga-hero__alerts {
    margin-left: auto;
    margin-right: auto;
    width: auto;
  }

  .ga-hero__date {
    position: static;
    text-align: center;
    padding-top: 16px;
  }

  .ga-hero__title {
    font-size: 34px !important;
    line-height: 44px !important;
  }
}

/* ============================= MOBILE (Figma frame 1:9538, 375px) =============
   Covers 340-768px. The hero DOM order is date / heading / stage(card,
   side(countdown, notify, panel)) but the mobile design stacks heading,
   countdown, date, card, notify, panel — stage and side become
   display:contents so every piece is a flex item of __inner and `order`
   rebuilds the Figma sequence. */

@media (max-width: 767px) {
  /* ---------------- Hero (Figma banner 1:9541, 375x857) ---------------- */
  .ga-hero {
    padding-bottom: 32px;
  }

  /* Montage art: Group 362 — 470px tall box from y23. Figma nests the image
     in a 1436x732 container at -595/13 with the inner img at 4.75%/-13.92%
     @90.49% width → effective image box -527/-89 @1300x732. */
  .ga-hero__art--montage {
    left: 0;
    top: 23px;
    transform: none;
    width: 100%;
    height: 470px;
    background-position: -527px -89px;
    background-size: 1300px 732px;
  }

  /* Figma fades the 732px container to #0d0034 at 62.4% = exactly the 470px
     box bottom → 100% here (the desktop 78% stop would fade out mid-box). */
  .ga-hero__art--montage::after {
    background:
      linear-gradient(180deg, rgba(13, 0, 52, 0) 0%, #0d0034 100%),
      rgba(13, 0, 52, 0.4);
  }

  .ga-hero__art--chars {
    display: none;
  }

  /* White wedge is visible again on mobile (hidden by the 1280 rules):
     Figma places the 1920x555 slice at x-773/y305; anchoring it to the hero
     bottom keeps the wedge filling the panel area even if content grows. */
  .ga-hero__slice {
    display: block;
    top: 0;
    height: 100%;
    background-position: -773px bottom;
    background-size: 1920px 555px;
  }

  .ga-hero__inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0 16px;
  }

  .ga-hero__stage,
  .ga-hero__side {
    display: contents;
  }

  .ga-hero__heading {
    order: 1;
    align-self: stretch;
    padding-top: 23px;
  }

  .ga-hero__subtitle {
    font-size: 16px;
    line-height: 20px;
  }

  .ga-hero__title {
    font-size: 32px !important;
    line-height: 40px !important;
  }

  .ga-countdown {
    order: 2;
    margin: 19px auto 0;
  }

  /* Date drops below the countdown on mobile (Figma Frame 1529) */
  .ga-hero__date {
    order: 3;
    margin: 0 auto;
    padding-top: 0;
  }

  .ga-hero__card {
    order: 4;
    margin: 37px auto 0;
  }

  /* Notify overlaps the card's lower third, left-anchored off-screen
     (Figma x -48, y 532 vs card 272-636) */
  .ga-hero__notify {
    order: 5;
    align-self: flex-start;
    margin: -104px 0 0 -64px;
    z-index: 5;
  }

  .ga-hero__panel {
    order: 6;
    width: auto;
    align-self: stretch;
    margin: 75px -9px 0;
  }

  .ga-hero__panel h2,
  .ga-hero__panel h3,
  .ga-hero__panel h4 {
    font-size: 20px;
    line-height: 26px;
  }

  .ga-hero__alerts {
    order: 7;
    width: auto;
    align-self: stretch;
    margin: 12px -9px 0;
  }

  /* ---------------- Carousel bands (Figma 1:9617/1:9662/1:9698/1:9730) ----
     The desktop header is an absolute grid overlaid on the cards; on mobile
     every band header is a plain stacked block above the art + cards. */
  .ga-carousel-section .ga-carousel-head,
  .ga-carousel-band--no-image .ga-carousel-head {
    position: static;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
    padding: 30px 16px 16px;
    margin: 0;
    pointer-events: auto;
  }

  .ga-carousel-head__text {
    max-width: none;
    font-size: 16px;
    line-height: 24px;
  }

  /* Band art on image bands is the full mobile backdrop export (gradient +
     characters + white diagonal baked in, 375-wide) rendered at natural
     aspect; the header overlays its top and the cards climb onto the white
     wedge, mirroring the Figma section layering. */
  .ga-carousel-section .featured-products-main-background {
    position: static;
    left: auto;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .ga-carousel-section .featured-products-main-background img {
    width: 100%;
    height: auto;
  }

  .ga-carousel-section .featured-products-inner {
    position: relative;
    z-index: 2;
  }

  .ga-carousel-section .easycarousel.has-section-image .block_content.carouselContainer {
    margin-top: -320px !important;
  }

  /* easycarousels reserves 205px under its (hidden) title for the art that is
     now static/in-flow — drop the reservation. */
  .ga-carousel-section .easycarousel.has-section-image .sectionTitle {
    margin-bottom: 0;
  }

  .ga-carousel-section .ga-carousel-band + .ga-carousel-band {
    margin-top: 0px;
  }

  .ga-carousel-section .featured-products {
    padding-top: 0 !important;
  }

  /* Image bands: the header overlays the backdrop's top (pale sky on the
     light band, night art on the dark one) */
  .ga-carousel-band:not(.ga-carousel-band--no-image) .ga-carousel-head {
    position: absolute;
    top: 20px;
    left: 16px;
    right: 16px;
    z-index: 4;
    padding: 0;
    pointer-events: none;
  }

  /* Dark band: its 375x529 mobile crop bakes the whole section backdrop
     (night art + white diagonal + white card area) — cards climb onto the
     white zone below the diagonal (Figma 1:9698) */
  .ga-carousel-band--dark .easycarousel.has-section-image .block_content.carouselContainer {
    margin-top: -320px !important;
  }

  /* ---------------- Features / Assurance (Figma 1:9750) ---------------- */
  .ga-features .ga-features__content {
    flex-direction: column;
    align-items: stretch;
    gap: 15px;
    padding: 20px;
  }

  .ga-features__title {
    font-size: 24px;
    line-height: 30px;
  }

  .ga-features__desc {
    font-size: 16px;
    line-height: 24px;
  }

  .ga-features__divider {
    flex: none;
    width: 100%;
    height: 1px;
    display: block;
  }

  /* The authored desc copy carries the desktop 2-line break; mobile is one
     line. Replacing the br content swaps the break for a space (Chrome/Safari;
     Firefox keeps the harmless 2-line fallback). */
  .ga-features__desc br {
    display: none;
    content: '';
  }

  .ga-features__desc br::after {
    content: ' ';
  }

  /* ---------------- SEO text (Figma 1:9817) ---------------- */
  .ga-text {
    padding: 30px 0;
  }

  .ga-text .ga-text__content {
    padding: 20px 24px;
  }

  /* ---------------- Blog / News (Figma 1:9932): single column, the
     "Show more" button moves from top-right to a full-width CTA below ---- */
  .ga-blog .simpleblog-inner {
    display: flex;
    flex-direction: column;
  }

  .ga-blog .simpleblog-title {
    position: static;
    order: 2;
    margin-top: 24px;
  }

  .ga-blog .btn-more {
    display: flex;
    width: 100%;
  }

  .ga-blog .blog-recent-post-inner .row,
  .ga-blog .blog-recent-post-inner > .row {
    flex-direction: column;
    align-items: stretch;
  }

  .ga-blog .simpleblog__listing__post {
    flex: none;
    width: 100%;
  }

  /* ---------------- FAQ (Figma 1:9987) ---------------- */
  .ga-faq .ga-faq__question a {
    padding: 20px 24px;
    gap: 16px;
  }

  .ga-faq .ga-faq__answer {
    padding: 0 24px 20px;
  }
}

/* ============ TABLET IMAGE BANDS (Figma 1:8728 / 1:9120, 768px frame) ========
   Scoped to the easycarousels img_section_768 source window (min-width 600):
   the 768-wide tablet backdrops (lavender/night art + white diagonal baked
   in) render in flow, the header row overlays their top, and the cards climb
   the wedge. Margins are % of width so they track the scaled backdrop across
   the whole window. Above 991px easycarousels serves the desktop art and the
   desktop overlay layout takes over. */

@media (min-width: 600px) and (max-width: 991.98px) {
  .ga-carousel-section .featured-products-main-background {
    position: static;
    left: auto;
    width: 100%;
    max-width: none;
    margin-left: 0;
  }

  .ga-carousel-section .featured-products-main-background img {
    width: 100%;
    height: auto;
  }

  .ga-carousel-section .featured-products-inner {
    position: relative;
    z-index: 2;
  }

  .ga-carousel-section .easycarousel.has-section-image .sectionTitle {
    margin-bottom: 0;
  }

  .ga-carousel-section .featured-products {
    padding-top: 0 !important;
  }

  .ga-carousel-section .ga-carousel-band + .ga-carousel-band {
    margin-top: 0;
  }

  /* Header row over the backdrop top: intro left, paragraph right
     (Figma: intro at 46/20 w288, paragraph at 354/20 w368) */
  .ga-carousel-band:not(.ga-carousel-band--no-image) .ga-carousel-head {
    position: absolute;
    top: 20px;
    left: 46px;
    right: 46px;
    z-index: 4;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: flex-start;
    gap: 20px;
    padding: 0;
    margin: 0;
    pointer-events: none;
  }

  .ga-carousel-band:not(.ga-carousel-band--no-image) .ga-carousel-head__text {
    max-width: 368px;
    font-size: 17px;
    line-height: 24px;
  }

  /* Cards land on the white wedge: light backdrop 768x557, cards at y246
     → (557-246)/768; dark backdrop 768x606, cards at y218 → (606-218)/768 */
  .ga-carousel-section .easycarousel.has-section-image .block_content.carouselContainer {
    margin-top: -40.5% !important;
  }

  /* Dark backdrop 768x606, cards at y218. The theoretical (606-218)/768 =
     -50.5% left the cards ~38px low because the carousel container adds a top
     offset (swiper wrapper) above the first card, so pull up ~5% more. */
  .ga-carousel-band--dark .easycarousel.has-section-image .block_content.carouselContainer {
    margin-top: -55.5% !important;
  }
}

/* ============================= TABLET (Figma frame 1:8410, 768px) ============
   Covers 768-1023px: compressed desktop hero (card left, timer/notify/panel
   middle, couple render right), 2x2 features grid, 2x2 blog grid. Overrides
   the 1280 fallback block above. */

@media (min-width: 768px) and (max-width: 1023.98px) {
  /* ---------------- Hero (Figma banner 1:8528, 768x657) ---------------- */
  .ga-hero {
    height: 657px;
    padding-bottom: 0;
  }

  /* Montage: image container at -332/36 @1436x732 with the 4.75%/-13.92%
     inner offset → effective box 1300x732 centered, y -89 (as on mobile) */
  .ga-hero__art--montage {
    left: 50%;
    top: 23px;
    transform: translateX(-50%);
    width: 1300px;
    max-width: none;
    height: 470px;
    background-position: 0 -89px;
    background-size: 1300px 732px;
  }

  .ga-hero__art--montage::after {
    background:
      linear-gradient(180deg, rgba(13, 0, 52, 0) 0%, #0d0034 100%),
      rgba(13, 0, 52, 0.4);
  }

  /* Couple render (Figma 1:8566). The key-art is the same asset as desktop
     (Lucia left / Jason right) but the tablet frame flips it horizontally
     — Figma applies scaleY(-1) rotate(180deg), i.e. a net scaleX(-1) — so
     Jason sits center with the pistol pointing left and Lucia lands at the
     right edge. Box 490x503 at x364/y159, mirrored about its own center. */
  .ga-hero__art--chars {
    display: block;
    top: 159px;
    left: 364px;
    right: auto;
    bottom: auto;
    width: 490px;
    height: 503px;
    background-position: center top;
    background-size: 490px 503px;
    transform: scaleX(-1);
  }

  /* White wedge: Figma places the 1920x555 slice at x0/y278 → diagonal
     (0,657)-(768,505) */
  .ga-hero__slice {
    display: block;
    top: 278px;
    height: 379px;
    background: url('../img/hero/hero-slice.svg') 0 0 / 1920px 555px no-repeat;
  }

  .ga-hero__date {
    position: absolute;
    top: 30px;
    right: 47px;
    text-align: right;
    padding-top: 0;
  }

  .ga-hero__title {
    font-size: 50px !important;
    line-height: 72px !important;
  }

  /* Card left column (Figma x80 y271); timer/notify/panel middle column
     (timer 291/284, notify 253/391, panel 328/472 w361) */
  .ga-hero__card {
    position: absolute;
    left: 80px;
    top: 271px;
    margin: 0;
  }

  .ga-hero__side {
    position: absolute;
    top: 284px;
    left: 291px;
    width: 400px;
    max-width: none;
    margin: 0;
  }

  .ga-countdown {
    margin: 0;
  }

  /* The live countdown renders ~28px shorter than the Figma Timer component,
     so the button/panel offsets absorb the difference (targets: notify y391,
     panel y472). */
  .ga-hero__notify {
    margin: 38px 0 0 -38px;
  }

  /* The couple render passes behind the translucent panel — Figma hazes it
     with a background blur so the copy stays readable. Right padding is
     trimmed to 20px (Figma's copy column runs almost to the panel edge) so
     the title fits one line at the tablet size. */
  .ga-hero__panel {
    width: 361px;
    margin: 15px 0 0 37px;
    padding: 20px 20px 20px 30px;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
  }

  /* Panel title (Figma 1:8698): Exo SemiBold 20px/26px, tracking 0.2px —
     one step down from the base 22px so it stays on a single line. */
  .ga-hero__panel h2,
  .ga-hero__panel h3,
  .ga-hero__panel h4 {
    font-size: 20px;
    letter-spacing: 0.2px;
  }

  /* ---------------- Features / Assurance (Figma 1:9336): 2x2 grid with a
     center vertical divider per row and a horizontal one between rows (the
     3 authored dividers land on grid cells: children 2 and 6 vertical,
     child 4 full-row horizontal) ---------------- */
  .ga-features .ga-features__content {
    display: grid;
    grid-template-columns: 1fr 1px 1fr;
    align-items: center;
    gap: 20px 30px;
    padding: 24px 40px;
    position: relative;
  }

  .ga-features__divider {
    flex: none;
    width: 2px;
    height: 56px;
  }

  .ga-features__content > .ga-features__divider:nth-child(4) {
    grid-column: 1 / -1;
    width: 100%;
    height: 2px;
  }

  .ga-features__desc {
    font-size: 16px;
    line-height: 24px;
  }

  .ga-features__desc br {
    content: '';
  }

  .ga-features__desc br::after {
    content: ' ';
  }

  /* ---------------- No-image band header: content edge at 46px ---------- */
  .ga-carousel-band--no-image .ga-carousel-head {
    padding: 0 46px;
  }

  /* Body column matches Figma (368px). The previous 390px stole width from
     the intro, so a longer title like "FUEL UP BEFORE LAUNCH" wrapped. */
  .ga-carousel-head__text {
    max-width: 368px;
  }

  /* "More to Play" (carousel 25) carries a longer intro paragraph, so Figma
     widens its copy column to 494px (~75% — a 25/75 split) instead of 368px,
     and tightens the header gap so the wider column still fits at 768px. */
  .ga-carousel-section .ga-carousel-band[data-design="more-to-play"] .ga-carousel-head {
    gap: 20px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="more-to-play"] .ga-carousel-head__text {
    max-width: 494px;
  }

  /* Keep the section title on one line like Figma (both title nodes are
     whitespace-nowrap); at the tablet two-column width the tighter intro
     would otherwise break the longer titles onto two lines. */
  .ga-carousel-head__title {
    white-space: nowrap;
  }

  /* Divider spacing — the 1px line (.featured-products:not(.noBorder):after)
     between stacked bands should have 20px above and 20px below (Figma). The
     carousel container's 60px bottom padding left ~50px above the line, while
     the next band sat flush beneath it. Trim that padding so the scrollbar is
     ~20px above the line, and add a 20px gap between bands for the 20px below. */
  .ga-carousel-section .block_content.carouselContainer {
    padding-bottom: 31px !important;
  }

  /* The last band (More to Play, cid 25) is followed by the features section,
     not another band, so its divider gets 40px above (vs 20px between bands) —
     matched below by the features section's own 40px padding-top. */
  .ga-carousel-section .ga-carousel-band[data-design="more-to-play"] .block_content.carouselContainer {
    padding-bottom: 51px !important;
  }

  /* 20px only before a light band's header. Dark image bands bring their own
     backdrop and stay flush (base rule) so the divider above them touches the
     art with no gap. */
  .ga-carousel-section .ga-carousel-band + .ga-carousel-band:not(.ga-carousel-band--dark) {
    margin-top: 20px;
  }

  /* ---------------- Blog / News (Figma 1:9489): 2x2 grid, Show more stays
     top-right. Above 992px the blog slider CSS (.slideme) forces the row to
     nowrap with 35%-wide posts, so all four sit in one row and overflow the
     page — !important keeps the 2x2 grid across the whole 768-1023px range. */
  .ga-blog .blog-recent-post-inner .row,
  .ga-blog .blog-recent-post-inner > .row {
    flex-wrap: wrap !important;
  }

  .ga-blog .simpleblog__listing__post {
    flex: 0 0 calc(50% - 10px) !important;
    max-width: calc(50% - 10px) !important;
  }

  /* Show More button. Our template renders the section title separately above
     the blog module, so the module's absolute header (right:0) otherwise hangs
     at the blog's outer edge instead of the content column, and the content
     padding varies with width so a fixed right offset can't fix it. Anchor the
     header to the inner Bootstrap container (its right edge IS the content edge
     at any width), then lift it up onto the title's row: -77px = the title→cards
     gap (26px title + 40px margin) plus the button/title half-height difference,
     stable because those are fixed. */
  .ga-blog .simpleblog-inner {
    position: relative;
  }

  .ga-blog .simpleblog-title {
    top: -77px;
  }

  /* FAQ carries no 40px top/bottom section padding on tablet (Figma). */
  .ga-faq {
    padding: 0;
  }

  .ga-features__content > p:nth-child(4) {
    position: absolute;
    width: 100%;
    left: 0;
  }

  .ga-features__content > p:nth-child(4) .ga-features__divider {
    width: 100%;
    height: 2px;
}
}

/* ============================= LAPTOP (Figma frame 1:7007, 1024px) ============
   1024-1439px keeps the full horizontal hero (couple left, card centre,
   timer/notify/panel right). The base desktop rules drive the horizontal layout
   — they scale with 50% centring — but this range uses the 657px frame's
   vertical offsets and a 361px panel: the base 591px panel overflows the page
   near 1024px. */
@media (min-width: 1024px) and (max-width: 1439.98px) {
  .ga-hero {
    height: 657px;
  }

  /* Montage: the exact Figma export (hero-montage-1024.jpg — already toned and
     faded), aligned to the content column instead of full-bleed. Its left edge
     sits at the couple (container left, by the girl's foot) and its right edge
     at the pre-order panel; 992px = couple-left (calc(50% - 495px)) to
     panel-right (calc(50% + 497px)), both fixed offsets from centre, so the
     montage tracks them across 1024-1439. The image is pre-treated, so no CSS
     gradient/tint overlay. */
  .ga-hero__art--montage {
    left: 50%;
    transform: translateX(-50%);
    width: 992px;
    max-width: none;
    height: 100%;
    background: url('../img/hero/hero-montage-1024.jpg') center top / 100% auto no-repeat;
  }

  /* The 1024 export ends hard at its left/right edges (no side fade baked in,
     unlike the desktop art) — blend both edges into the stage colour across the
     drawn image height (992 × 557/1024 ≈ 540px; below that the export already
     fades to #0d0034 on its own). */
  .ga-hero__art--montage::after {
    inset: 0 0 auto 0;
    height: 540px;
    background:
      linear-gradient(90deg, #0d0034 0, rgba(13, 0, 52, 0) 110px),
      linear-gradient(270deg, #0d0034 0, rgba(13, 0, 52, 0) 110px);
  }

  /* Couple (Figma 1:7045): the key-art sits LEFT (Lucia far left, Jason centre
     holding the card), NOT flipped. Image box 490x503 with its right edge just
     left of the centred card. */
  .ga-hero__art--chars {
    top: 159px;
    left: calc(50% - 495px);
    width: 490px;
    height: 503px;
    background-position: 0 0;
    background-size: 490px 503px;
    transform: none;
  }

  /* White slice (Figma 1024 hero): a full-width wedge rising shallowly to the
     right, starting near the hero bottom. Full-bleed on purpose — an earlier
     992px centred variant left dark corners at the hero bottom on 1340–1439. */
  .ga-hero__slice {
    top: 0;
    left: 0;
    transform: none;
    width: 100%;
    height: 657px;
    background: #fff;
    clip-path: polygon(0 100%, 100% 69%, 100% 100%);
  }

  .ga-hero__card {
    top: 271px;
  }

  .ga-hero__side {
    top: 284px;
  }

  /* The live countdown renders shorter than the Figma Timer, so nudge Notify
     (and the panel stacked below it) down to land at y391 / y472. */
  .ga-hero__notify {
    margin-top: 38px;
  }

  .ga-hero__panel {
    width: 361px;
    padding: 20px 20px 20px 30px;
  }

  /* Panel title one line at the 361px width (Figma 1:7177: Exo SemiBold 20px). */
  .ga-hero__panel h2,
  .ga-hero__panel h3,
  .ga-hero__panel h4 {
    font-size: 20px;
    letter-spacing: 0.2px;
  }

  /* Figma 1:7179 uses a 304px text frame. */
  .ga-hero__panel p {
    width: 304px;
    max-width: 100%;
  }

  /* Top Gift Cards (Figma 1:7207, 1024px). The landscape and character trio
     are separate Figma exports so the people keep their designed 691px width
     instead of growing with the tablet background image. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"],
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] {
    width: 1024px;
    max-width: 100%;
    height: 795px;
    margin-right: auto;
    margin-left: auto;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products {
    min-height: 795px;
    padding: 0 !important;
  }

  /* Full-bleed like the hero: the band content stays on the 1024px canvas, but
     the background (base tint + sky) spans the viewport. The sky PNG stays
     centered at its designed 1024px; #f4f2ff fills the sides. Character/mist
     layers below are re-anchored to the canvas centre so they keep their spot. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background {
    top: 0;
    left: 50%;
    z-index: 0;
    width: 100vw;
    max-width: 100vw;
    height: 477px;
    margin-left: 0;
    overflow: hidden;
    transform: translateX(-50%);
    background: #f4f2ff url('../img/hero/one-more-ride-bg-1024.png') top center / 100% 100% no-repeat;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background picture {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    pointer-events: none;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background picture > * {
    display: none;
  }

  /* White mist above the diagonal: from the characters' waist down, the
     artwork disappears into solid white rather than revealing the landscape. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background picture::after {
    position: absolute;
    top: 125px;
    left: calc(50% - 391px);
    width: 751px;
    height: 220px;
    background: linear-gradient(to bottom, transparent 0%, transparent 16%, rgba(255, 255, 255, 0.9) 38%, #fff 54%, #fff 100%);
    filter: blur(8px);
    content: '';
  }

  /* Characters scale with viewport width (67.5vw = 691px at 1024). Anchored
     left-of-centre; the box crops the lower body, which the white diagonal
     then covers — so at the wide end they zoom in and only two show fully. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background::before {
    position: absolute;
    top: 0;
    left: calc(50% - 361px);
    z-index: 0;
    width: 691px;
    height: 375px;
    background: url('../img/hero/one-more-ride-characters-1024.png') 4px 0 / 687px 387px no-repeat;
    content: '';
  }

  /* Figma's white foreground rises from y=373 on the left to y=177 on the
     right, masking the character fade before the product row. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
    clip-path: polygon(0 78.2%, 100% 37.1%, 100% 100%, 0 100%);
    content: '';
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-inner,
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-content {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 795px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .ga-carousel-head,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .ga-carousel-head {
    top: 40px;
    left: 46px;
    right: 46px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 20px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .ga-carousel-head__intro {
    flex: 0 0 288px;
    width: 288px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .ga-carousel-head__subtitle {
    width: 288px;
    text-wrap: wrap;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .ga-carousel-head__text {
    flex: 0 0 211px;
    width: 211px;
    max-width: 211px;
  }

  /* Card artwork starts at y=266 in Figma. The miniature itself owns 12px of
     top padding, so the carousel track is pinned at y=254. Absolute placement
     also neutralizes easycarousels' legacy 160/255px landing-page offsets. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .block_content.carouselContainer {
    position: absolute;
    top: 254px;
    right: 46px;
    left: 46px;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .product-miniature .thumbnail-container,
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .product-miniature .product-description {
    width: 224px;
    max-width: 224px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .swiper-scrollbar {
    display: block !important;
    height: 4px !important;
    margin-top: 10px !important;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .swiper-scrollbar-drag {
    width: 18.35% !important;
  }

  /* GTA Online (Figma 1:7761, 1024px): keep the panorama, couple and blurred
     mask as independent layers so their crop matches the designed frame. */
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] {
    width: 1024px;
    max-width: 100%;
    height: 749px;
    margin-right: auto;
    margin-left: auto;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products {
    min-height: 749px;
    padding: 0 !important;
  }

  /* Full-bleed like the hero: #0d0034 spans the viewport, the panorama and
     couple stay centred on the 1024px canvas (re-anchored via calc below). */
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products-main-background {
    top: 0;
    left: 50%;
    z-index: 0;
    width: 100vw;
    max-width: 100vw;
    height: 477px;
    margin-left: 0;
    overflow: hidden;
    transform: translateX(-50%);
    background: #0d0034;
  }

  /* Full-bleed: the panorama stretches across the viewport (the mask svg is
     preserveAspectRatio="none", so it stretches with it). The couple ::before
     stays centred on the 1024 canvas. */
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products-main-background picture {
    position: absolute;
    top: -156px;
    left: 50%;
    z-index: 0;
    display: block;
    width: 100vw;
    height: 552px;
    transform: translateX(-50%);
    background: url('../img/carousel/gta-online-bg-1024.png') center / cover no-repeat;
    -webkit-mask-image: url('../img/carousel/gta-online-mask-1024.svg');
    mask-image: url('../img/carousel/gta-online-mask-1024.svg');
    -webkit-mask-position: center 146.5px;
    mask-position: center 146.5px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 100% 260px;
    mask-size: 100% 260px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products-main-background picture > * {
    display: none;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products-main-background::before {
    position: absolute;
    top: 7px;
    left: calc(50% - 250px);
    z-index: 1;
    width: 407px;
    height: 407px;
    background: url('../img/carousel/gta-online-couple-1024.png') center / 407px 407px no-repeat;
    -webkit-mask-image: url('../img/carousel/gta-online-mask-1024.svg');
    mask-image: url('../img/carousel/gta-online-mask-1024.svg');
    -webkit-mask-position: -256px -16.5px;
    mask-position: -256px -16.5px;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: 1012px 260px;
    mask-size: 1012px 260px;
    content: '';
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products-main-background::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
    clip-path: polygon(0 78.2%, 100% 37.1%, 100% 100%, 0 100%);
    content: '';
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products-inner,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .featured-products-main-content {
    position: relative;
    z-index: 3;
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 749px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .ga-carousel-head {
    top: 40px;
    right: 46px;
    left: 46px;
    display: flex;
    align-items: flex-start;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .ga-carousel-head__intro {
    flex: 0 0 288px;
    width: 288px;
  }

  /* The Figma card begins at y=219; the live miniature adds 12px internally. */
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .block_content.carouselContainer {
    position: absolute;
    top: 207px;
    right: 46px;
    left: 46px;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .product-miniature .thumbnail-container,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .product-miniature .product-description {
    width: 224px;
    max-width: 224px;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .swiper-scrollbar {
    display: block !important;
    height: 4px !important;
    margin-top: 10px !important;
  }

  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .swiper-scrollbar-drag {
    width: 18.35% !important;
  }

  /* easycarousels pulls .c_container 10px down with margin-bottom: -10px.
     Use 20px here to compensate that offset and leave a visible 10px gap. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .swiper-scrollbar,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .swiper-scrollbar {
    position: static !important;
    inset: auto !important;
    margin: 20px 0 0 !important;
  }

  /* GTA VI Blog (Figma 1:8191, 1024px): the module's 992-1449px rules turn
     the posts into a clipped horizontal slider. Restore the designed 2x2
     grid and keep the section on the same fixed 1024px canvas as the bands. */
  .ga-blog > .container {
    width: 1024px;
    max-width: 100%;
    padding-right: 50px;
    padding-left: 50px;
  }

  .ga-blog .ga-section__title {
    display: flex;
    align-items: center;
    height: 47px;
    margin: 0 0 20px;
  }

  .ga-blog .simpleblog-title {
    top: 0;
    right: 50px;
  }

  .ga-blog .blog-recent-post-inner {
    overflow: visible !important;
  }

  .ga-blog .recentPostsEffect {
    display: none !important;
  }

  .ga-blog #phblogrecentposts .blog-recent-post-inner .row,
  .ga-blog #phblogrecentposts .blog-recent-post-inner > .row {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
    align-items: stretch;
    margin: 0 !important;
  }

  .ga-blog #phblogrecentposts .simpleblog__listing__post {
    flex: none !important;
    width: auto !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .ga-blog .simpleblog__listing__post__wrapper {
    gap: 12px;
    height: 430px;
    margin: 0 !important;
    border-radius: 15px;
  }

  .ga-blog .simpleblog__listing__post__image {
    flex: 0 0 185px;
    width: 100%;
    height: 185px;
    aspect-ratio: auto;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
  }

  .ga-blog .simpleblog__listing__post__wrapper__content {
    flex: 1 1 auto;
    min-height: 0;
    padding: 0 12px 12px;
  }

  .ga-blog .headline_4 a {
    font-size: 18px;
    line-height: 22px;
  }

  .ga-blog .simpleblog__listing__post__description p {
    height: 68px;
    line-height: 22px;
  }

  .ga-blog .simpleblog__listing__post__tag__item {
    border-radius: 8px;
    font-size: 16px;
    line-height: 20px;
  }

  .ga-blog .simpleblog__listing__post__extra_info {
    margin-top: auto;
  }

  /* Keep the distance from the last blog-card row to the FAQ title at the
     designed 120px. The blog module otherwise adds its own 20px bottom
     margin on top of both sections' generic padding. */
  .ga-blog {
    padding-bottom: 0;
  }

  .ga-blog #phblogrecentposts {
    margin-bottom: 0 !important;
  }

  .ga-blog + .ga-faq {
    padding-top: 120px;
  }
}

/* At the 1024px layout both carousel types show four cards, but the fixed
   image-band canvas leaves the no-image track 13px short of its right guide. */
@media (min-width: 1024px) and (max-width: 1199.98px) {
  .ga-carousel-section .ga-carousel-band--no-image .block_content.carouselContainer {
    transform: translateX(13px);
  }
}

/* Between 1200px and the full desktop layout, the carousel has enough room
   for arrow navigation. Remove the tablet progress indicator so both
   navigation patterns are never shown at the same time. */
@media (min-width: 1200px) and (max-width: 1439px) {
  /* The artwork bands still use the fixed 1024px Figma canvas in this range,
     while no-image bands are full-width. Anchor every product track to the
     viewport so their first/last columns share the same vertical guides. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .block_content.carouselContainer,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .block_content.carouselContainer {
    right: auto;
    left: calc(50% - 50vw + 46px);
    width: calc(100vw - 92px) !important;
  }

  .ga-carousel-section .ga-carousel-band--no-image .block_content.carouselContainer {
    width: calc(100vw - 48px) !important;
    max-width: none !important;
    margin-right: 24px !important;
    margin-left: 24px !important;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .swiper-scrollbar,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .swiper-scrollbar {
    display: none !important;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .swiper-button-prev,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .swiper-button-prev {
    left: -65px !important;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .swiper-button-next,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .swiper-button-next {
    right: -65px !important;
  }
}

@media (min-width: 1440px) {
  /* The desktop wrapper grows from 1440px to its 1550/1921px layouts while
     the product track remains capped. Compensate the resulting 1-10px visual
     difference between the four- and five-card grids without resizing them. */
  .ga-carousel-section .ga-carousel-band--no-image .block_content.carouselContainer {
    transform: translateX(clamp(1px, calc((100vw - 1392px) / 48), 10px));
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"],
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] {
    --ga-art-fade: 4.1667%;
    --ga-head-left: 340px;
    --ga-slider-left: calc(50% - 360px);
    --ga-slider-right: 36px;
  }

  /* Align the complete header track with the product row: the intro starts at
     the first card and the right-hand copy ends at the last card. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .ga-carousel-head,
  .ga-carousel-section .ga-carousel-band[data-design="gta-online"] .ga-carousel-head {
    left: var(--ga-head-left);
    right: var(--ga-slider-right);
  }

  /* One More Ride desktop (Figma 1:10301): the old easycarousels export bakes
     the characters into a 1920px-wide bitmap, so they become too small as the
     viewport narrows. Rebuild the artwork from the separate Figma layers: the
     landscape fills the band, the original transparent character export keeps
     its designed scale, and the white foreground supplies the diagonal cut. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background {
    top: 0;
    left: 50%;
    z-index: 0;
    width: 100vw;
    max-width: 100vw;
    height: 579px;
    margin-left: 0;
    overflow: hidden;
    transform: translateX(-50%);
    background-color: #f4f2ff;
    /* Figma masks the landscape before the product track. The first gradient
       recreates that right-hand fade and reaches full opacity exactly where
       the slider begins; the complete landscape stays at its Figma geometry. */
    background-image:
      linear-gradient(
        90deg,
        rgba(244, 242, 255, 0) 0,
        rgba(244, 242, 255, 0) calc(var(--ga-slider-left) - var(--ga-art-fade)),
        #f4f2ff var(--ga-slider-left),
        #f4f2ff 100%
      ),
      url('../img/hero/one-more-ride-landscape-full.png');
    background-position: 0 0, -48px 0;
    background-size: 100% 100%, 720px 479px;
    background-repeat: no-repeat, no-repeat;
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background picture {
    position: absolute;
    inset: 0;
    z-index: 3;
    display: block;
    overflow: hidden;
    pointer-events: none;
    background: #fff;
    -webkit-mask-image: linear-gradient(
      90deg,
      transparent 0,
      transparent calc(var(--ga-slider-left) - var(--ga-art-fade)),
      #000 var(--ga-slider-left),
      #000 100%
    );
    mask-image: linear-gradient(
      90deg,
      transparent 0,
      transparent calc(var(--ga-slider-left) - var(--ga-art-fade)),
      #000 var(--ga-slider-left),
      #000 100%
    );
  }

  /* Repaint the upper lavender field above the same diagonal used by the
     foreground wedge. Together with the white picture background this masks
     the artwork behind the complete product track, from top to bottom. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background picture::before {
    position: absolute;
    inset: 0;
    background: #f4f2ff;
    clip-path: polygon(0 0, 100% 0, 100% 18.31%, 0 83.74%);
    content: '';
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background picture > * {
    display: none;
  }

  /* Keep the separate character layer at its Figma desktop dimensions. At
     1440px this makes Michael sit entirely behind the first product card. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background::before {
    position: absolute;
    top: 94px;
    left: -50px;
    z-index: 1;
    width: 687px;
    height: 387px;
    background: url('../img/hero/one-more-ride-characters-1024.png') center / 100% 100% no-repeat;
    content: '';
  }

  /* Rectangle 317 in Figma starts at y=106 and masks the lower artwork. Its
     diagonal reaches the first product substantially lower than the previous
     baked export, matching the reference crop supplied for the left card. */
  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .featured-products-main-background::after {
    position: absolute;
    inset: 0;
    z-index: 2;
    background: #fff;
    clip-path: polygon(0 83.74%, 100% 18.31%, 100% 100%, 0 100%);
    content: '';
  }

  .ga-carousel-section .ga-carousel-band[data-design="one-more-ride"] .carouselContainer {
    padding-top: 60px;
  }
}
/* ===================== OVERLAY MODE (category pages) =====================
   Sections injected around the NATIVE category product listing: the ones
   above the `products` marker render on displayCategoryHeader, the ones below
   on displayCategoryBottom. Only layout differences vs a standalone landing
   page live here — the section designs themselves are shared. */

.ga-overlay-zone {
  position: relative;
}

/* The theme already wraps displayCategoryBottom in a .container
   (themes/ayon/templates/catalog/listing/category.tpl:91), so the section's
   own container would double the gutters and cap the width twice. */
.ga-overlay-zone--bottom .ga-section > .container {
  width: auto;
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* The listing brings its own top spacing; the last section above it only needs
   to breathe, not to add a second gap. */
.ga-overlay-zone--top > .ga-section:last-child {
  padding-bottom: 20px;
}

/* Same on the other side: #js-product-list-bottom already sits below the
   pagination. */
.ga-overlay-zone--bottom > .ga-section:first-child {
  padding-top: 20px;
}

/* ===================== WEEKLY DEALS (campaign overrides) =====================
   Scoped on the page slug (body.ga-lp--weekly-deals), which the module adds on
   both overlay and standalone pages. Figma file "weekly-deals", one banner frame
   per breakpoint: 1920 (1:5143), 1440 (1:5672), 1024 (1:6279), 768 (1:7272),
   375 (1:6724). Each frame reframes the art, so the hero background is exported
   per frame and wired to the matching easycarousels landing_bg_* field; the
   media queries below are easycarousels' own image breakpoints, so copy and art
   always switch together.

   Everything that can be content stays in the BO (texts, tags, the images
   themselves). Only geometry the shared landing layout cannot express is here. */

/* The hero is assembled from the same separate layers as the animated Figma
   component: clean backdrop + title variants + soldier variants. The old
   responsive exports had the title and soldier baked into the JPG, which made
   the Figma glitch animation impossible without visible duplicates. */
.ga-lp--weekly-deals .easycarousels.isLandingPage {
  background-image:
    linear-gradient(90deg, rgba(13, 0, 52, 0) 0%, rgb(13, 0, 52) 100%),
    linear-gradient(270deg, rgb(207, 24, 187) 50%, rgb(184, 25, 51) 100%);
}

/* Full-bleed like Figma: the shared layout caps this wrapper at 1460/1720px,
   which left dark bands either side of the art. */
.ga-lp--weekly-deals .easycarousels.isLandingPage > .container {
  position: relative;
  width: 100% !important;
  max-width: none !important;
  background-size: 100% auto;
  background-position: center top;
}

/* The red parallelogram behind "DEALS" (Figma Rectangle 1013: 432x102 at
   pic+593/-10, i.e. title+341/-7) rides as an extra background layer on the
   wrapper itself: element backgrounds paint under the ::before/::after art, so
   it stays behind the glitching logotype without touching the animation. The
   50%-based x mirrors the title's --ga-weekly-pic-left anchor (layer width 432
   → +216 converts a center-edge offset into background-position terms). */
.ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper {
  --ga-weekly-pic-left: calc(50% - 635px);
  background-image:
    url('../../../thassets/views/svg/weekly-deals-title-shape.svg'),
    url('../../../easycarousels/views/img/uploads/weekly-deals-hero-clean-1920.jpg') !important;
  background-position: calc(50% + 174px) 28px, center top;
  background-size: 432px 102px, 100% auto;
  background-repeat: no-repeat, no-repeat;
}

.ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::before,
.ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::after {
  content: '';
  position: absolute;
  z-index: 0;
  display: block;
  pointer-events: none;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  will-change: background-image;
}

/* Soldier component 1:8514, rendered in the desktop banner at 966x644.
   The soldier PNGs live in the easycarousels uploads dir, which is gitignored
   and uploaded by hand, so a re-export keeps the same filename and Cloudflare
   would keep serving the old alpha. Bump ?v= on every re-export — here and in
   the ga-weekly-soldier-glitch keyframes below. */
.ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::before {
  top: -21px;
  left: calc(var(--ga-weekly-pic-left) - 258px);
  width: 966px;
  height: 644px;
  background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-soldier-0.png?v=20260730');
  -webkit-mask-image: url('../../../easycarousels/views/img/uploads/weekly-deals-mask.svg');
  mask-image: url('../../../easycarousels/views/img/uploads/weekly-deals-mask.svg');
  -webkit-mask-position: 158px -85px;
  mask-position: 158px -85px;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 1470px 558px;
  mask-size: 1470px 558px;
  animation: ga-weekly-soldier-glitch 2.4s steps(1, end) infinite;
}

/* Weekly Deals component 1:8543, kept independent from the soldier because the
   two Figma timelines have different cadence. */
.ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::after {
  top: 35px;
  left: calc(var(--ga-weekly-pic-left) + 252px);
  width: 750px;
  height: 86px;
  background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-title-0.png');
  animation: ga-weekly-title-glitch 4.4s steps(1, end) infinite;
}

/* Keep all live carousel content above the decorative animation layers. */
.ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper > .one_by_one {
  position: relative;
  /* .landingBottom is a later sibling at z-index: 1. Keep the complete live
     carousel above that white backdrop as well as above the animated art. */
  z-index: 2;
}

@keyframes ga-weekly-soldier-glitch {
  0%, 79.16%, 94.5%, 100% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-soldier-0.png?v=20260730');
  }
  79.17%, 81.99% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-soldier-1.png?v=20260730');
  }
  82%, 84.99% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-soldier-2.png?v=20260730');
  }
  85%, 87.99% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-soldier-3.png?v=20260730');
  }
  88%, 94.49% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-soldier-4.png?v=20260730');
  }
}

/* The recording shows four short title hits, 1.1s apart. A 4.4s master cycle
   preserves their distinct Figma variants instead of repeating one shake. */
@keyframes ga-weekly-title-glitch {
  0%, 10.59%, 11.37%, 35.59%, 37.13%, 60.59%, 62.13%, 85.59%, 86.37%, 100% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-title-0.png');
  }
  10.6%, 11.36% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-title-1.png');
  }
  35.6%, 36.35%, 61.36%, 62.12% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-title-2.png');
  }
  36.36%, 37.12%, 85.6%, 86.36% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-title-3.png');
  }
  60.6%, 61.35% {
    background-image: url('../../../easycarousels/views/img/uploads/weekly-deals-title-4.png');
  }
}

@media (prefers-reduced-motion: reduce) {
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::before,
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::after {
    animation: none;
  }
}

@media (min-width: 1300px) and (max-width: 1549px) {
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper {
    --ga-weekly-pic-left: calc(50% - 631px);
    background-image:
      url('../../../thassets/views/svg/weekly-deals-title-shape.svg'),
      url('../../../easycarousels/views/img/uploads/weekly-deals-hero-clean-1440.jpg') !important;
    background-position: calc(50% + 178px) 28px, center top;
  }
}

@media (min-width: 992px) and (max-width: 1299px) {
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper {
    --ga-weekly-pic-left: calc(50% - 625px);
    background-image:
      url('../../../thassets/views/svg/weekly-deals-title-shape.svg'),
      url('../../../easycarousels/views/img/uploads/weekly-deals-hero-clean-1024.jpg') !important;
    background-position: calc(50% + 184px) 28px, center top;
  }
}

@media (min-width: 550px) and (max-width: 991px) {
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper {
    --ga-weekly-pic-left: calc(50% - 635px);
    background-image:
      url('../../../thassets/views/svg/weekly-deals-title-shape.svg'),
      url('../../../easycarousels/views/img/uploads/weekly-deals-hero-clean-768.jpg') !important;
  }

  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::before {
    top: 53px;
    left: calc(var(--ga-weekly-pic-left) - 132px);
    -webkit-mask-position: 32px -159px;
    mask-position: 32px -159px;
  }
}

/* Figma 1:7272 is authored at 768px. Between 550px and 767px the responsive
   backdrop scales down, therefore the independent animated layers and their
   soldier mask must use the same viewport ratio. */
@media (min-width: 550px) and (max-width: 767px) {
  /* Title shape follows the ::after vw scaling: 768-frame px / 7.68. */
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper {
    background-position: 44.531vw 3.646vw, center top;
    background-size: 56.25vw 13.281vw, 100% auto;
  }

  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::before {
    top: 6.901vw;
    left: -49.87vw;
    width: 125.781vw;
    height: 83.854vw;
    -webkit-mask-position: 4.167vw -20.703vw;
    mask-position: 4.167vw -20.703vw;
    -webkit-mask-size: 191.406vw 72.656vw;
    mask-size: 191.406vw 72.656vw;
  }

  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::after {
    top: 4.557vw;
    left: 0.13vw;
    width: 97.656vw;
    height: 11.198vw;
  }
}

@media (max-width: 549px) {
  /* The backdrop's reflective floor reads too milky behind the tag pills on
     phones. A veil layer sized to the 750x734 backdrop grades it into the
     magenta measured on the Figma banner (7735:205624): navy at the horizon,
     rgba(125,18,100) over the floor. It sits under both animated pseudo
     layers, so the soldier and title keep their colors. */
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper {
    background-image:
      url('../../../thassets/views/svg/weekly-deals-title-shape.svg'),
      linear-gradient(180deg,
        rgba(13, 0, 52, 0) 58%,
        rgba(13, 0, 52, 0.28) 64%,
        rgba(125, 18, 100, 0.36) 71%,
        rgba(125, 18, 100, 0.4) 85%,
        rgba(125, 18, 100, 0.4) 100%),
      url('../../../easycarousels/views/img/uploads/weekly-deals-hero-clean-375.jpg') !important;
    /* Shape geometry = ::after's 375-frame numbers x the 358.89/750 title
       scale: 432x102 → 206.72x48.81 at title+163.18/-3.35. */
    background-size: 206.72px 48.81px, 100% calc(100vw * 734 / 750), 100% auto;
    background-position: calc(50vw - 23.59px) 32.65px, center top, center top;
    background-repeat: no-repeat, no-repeat, repeat;
  }

  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::before {
    top: 39px;
    /* Figma 1:6724: the 1016px pic is centred on the viewport, then the
       soldier starts 89px inside it. Use vw rather than the carousel wrapper,
       which grows wider than the screen when its slides overflow. */
    left: calc(50vw - 419.5px);
    width: 618.24px;
    height: 412.16px;
    -webkit-mask-position: 101.12px -54.4px;
    mask-position: 101.12px -54.4px;
    -webkit-mask-size: 940.8px 357.12px;
    mask-size: 940.8px 357.12px;
  }

  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::after {
    top: 36px;
    /* Figma: centred 1016px pic + title x=321.23px. */
    left: calc(50vw - 186.77px);
    width: 358.89px;
    height: 41.16px;
  }
}

/* The Figma mobile composition is authored at 375px. Below that width the
   clean backdrop already scales with the viewport, so its two animated layers
   must scale by the same ratio instead of being cropped at their 375px size. */
@media (max-width: 374px) {
  /* Title shape scales with the viewport like the ::after layer: 375-frame
     px / 3.75. */
  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper {
    background-size: 55.125vw 13.016vw, 100% calc(100vw * 734 / 750), 100% auto;
    background-position: 43.709vw 8.707vw, center top, center top;
  }

  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::before {
    top: 10.4vw;
    left: -61.867vw;
    width: 164.864vw;
    height: 109.909vw;
    -webkit-mask-position: 26.965vw -14.507vw;
    mask-position: 26.965vw -14.507vw;
    -webkit-mask-size: 250.88vw 95.232vw;
    mask-size: 250.88vw 95.232vw;
  }

  .ga-lp--weekly-deals .easycarousels.isLandingPage > .c-wrapper::after {
    top: 9.6vw;
    left: 0.195vw;
    width: 95.704vw;
    height: 10.976vw;
  }
}

/* The animated layer supplies the visible logotype; the real H1 stays available
   to search engines and assistive technology without duplicating it visually. */
.ga-lp--weekly-deals .sectionTitle {
  margin-bottom: 0;
}

.ga-lp--weekly-deals .products-section-title {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* easycarousels darkens the top 150px of the block with a blurred
   rgba(13,0,52,.8) plate (.carouselTitleHolder) so its HTML title reads over the
   art. Our title IS the art, so the plate only washed the logotype out. */
.ga-lp--weekly-deals .carouselTitleHolder {
  display: none;
}

/* Vertical rhythm. Measured: panel top = .featured-products padding + the
   description block + max(sectionTitle margin-bottom, block_content margin-top),
   the last two collapsing. Zeroing the fixed margin lets the percentage win, and
   percentages resolve against the container width — so the copy and the panel
   track the art as it scales. Per breakpoint the two constants are Figma's
   subtitle top and panel top, as a share of that frame's width. */
.ga-lp--weekly-deals .isLandingPage .block_content {
  margin-top: 0;
}

.ga-lp--weekly-deals .isLandingPage .carousel-description {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  text-align: left;
  /* front.css sets text-align-last: center, which keeps the final line
     centered even with text-align: left. */
  text-align-last: left;
}

.ga-lp--weekly-deals .isLandingPage .carousel-description p {
  width: 320px;
  color: #fff;
  /* landing.css centers every landing subtitle; the Figma copy block is
     left-aligned under the "DEALS" word. */
  text-align: left;
  font-family: 'Exo', sans-serif;
  font-weight: 600;
  font-size: 20px;
  line-height: 20px;
}

/* >=1550: 1920 frame — subtitle x917/y136, panel y321 (pulled up 15px on
   request; the tags ride with it, they are anchored to the panel). */
@media (min-width: 1550px) {
  .ga-lp--weekly-deals .isLandingPage .carousel-description p {
    margin-left: 47.76%;
    padding-top: calc(7.08% - 40px);
  }

  .ga-lp--weekly-deals .sectionTitle {
    margin-bottom: calc(9.62% - 55px);
  }
}

/* 1300-1549: 1440 frame — subtitle x681/y136, panel y299 */
@media (min-width: 1300px) and (max-width: 1549px) {
  .ga-lp--weekly-deals .isLandingPage .carousel-description p {
    margin-left: 47.29%;
    padding-top: calc(9.44% - 40px);
  }

  .ga-lp--weekly-deals .sectionTitle {
    margin-bottom: calc(11.32% - 40px);
  }
}

/* 992-1299: 1024 frame — subtitle x475/y136, panel y299 */
@media (min-width: 992px) and (max-width: 1299px) {
  .ga-lp--weekly-deals .isLandingPage .carousel-description p {
    width: 280px;
    margin-left: 46.39%;
    padding-top: calc(13.28% - 40px);
    font-size: 18px;
    line-height: 19px;
  }

  .ga-lp--weekly-deals .sectionTitle {
    margin-bottom: calc(15.92% - 40px);
  }
}

/* 550-991: 768 frame — subtitle x336/y135, panel y301. The theme drops
   .featured-products padding to 16px here. */
@media (min-width: 550px) and (max-width: 991px) {
  .ga-lp--weekly-deals .isLandingPage .carousel-description p {
    width: 280px;
    margin-left: 43.75%;
    padding-top: calc(17.58% - 16px);
    font-size: 17px;
    line-height: 18px;
  }

  .ga-lp--weekly-deals .sectionTitle {
    margin-bottom: calc(21.62% - 16px);
  }
}

/* <=549: 375 frame — subtitle x160/y89 (three short lines), panel y300 */
@media (max-width: 549px) {
  .ga-lp--weekly-deals .isLandingPage .carousel-description p {
    width: 145px;
    /* Figma x=160/y=89 at 375px. These must track the viewport rather than
       the overflow width of .c-wrapper. */
    margin-left: calc(50vw - 27.5px);
    padding-top: calc(23.73vw - 41px);
    font-size: 14px;
    line-height: 15px;
  }

  .ga-lp--weekly-deals .sectionTitle {
    margin-bottom: calc(56.27vw - 47px);
  }
}

@media (max-width: 359px) {
  .ga-lp--weekly-deals .isLandingPage .carouselMainTitle {
    gap: 6px;
  }

  .ga-lp--weekly-deals .isLandingPage .carouselMainTitleArrow svg {
    width: 35px;
  }
}

/* The landing panel is capped at 1400px by easycarousels, wider than the shop's
   own content column (theme .container minus its 30px gutters), so it stuck out
   past the text blocks and the product grid. Mirror the theme's container
   breakpoints so the panel lines up with everything below it. */
/* Below 1200 the design drops the gutters: the 1024, 768 and 375 frames all
   have the panel (Seporator/Rectangle 297) spanning the full frame width, with
   only its top corners rounded. */
@media (max-width: 1199px) {
  .ga-lp--weekly-deals .isLandingPage .block_content.carouselContainer {
    width: 100% !important;
    max-width: none !important;
    margin-left: 0;
    margin-right: 0;
  }
}

/* The theme hides every swiper arrow between 992 and 1199
   (all.css: .swiperButtonNav { display:none !important }), but the Figma 1024
   frame keeps them (nodes 1:6342 / 1:6343), so bring them back on this page. */
@media (min-width: 992px) and (max-width: 1199px) {
  .ga-lp--weekly-deals .isLandingPage .swiperButtonNav {
    display: flex !important;
  }
}

@media (min-width: 1200px) {
  .ga-lp--weekly-deals .isLandingPage .block_content.carouselContainer {
    max-width: 1110px !important;
  }
}

@media (min-width: 1440px) and (max-width: 1599px) {
  .ga-lp--weekly-deals .isLandingPage .block_content.carouselContainer {
    /* Figma leaves 20px on either side at 1440px. The wider inner gutters keep
       the title and visible product cards on the Smart Savings guides. */
    max-width: 1400px !important;
    padding-left: 85px;
    padding-right: 85px;
  }

  .ga-lp--weekly-deals .isLandingPage .block_content.carouselContainer .c_container {
    --n: 5;
  }

  .ga-lp--weekly-deals .ga-text > .container {
    width: 1430px;
    max-width: 1430px;
  }
}

@media (min-width: 1600px) {
  .ga-lp--weekly-deals .isLandingPage .block_content.carouselContainer {
    max-width: 1400px !important;
    padding-left: 85px;
    padding-right: 85px;
  }

  .ga-lp--weekly-deals .isLandingPage .block_content.carouselContainer .c_container {
    --n: 5;
  }

  /* The Bootstrap container owns 15px gutters on both sides. At 1430px its
     visible Smart Savings panel is exactly the carousel's capped 1400px. */
  .ga-lp--weekly-deals .ga-text > .container {
    width: 1430px;
    max-width: 1430px;
  }
}

@media (min-width: 1921px) {
  .ga-lp--weekly-deals .isLandingPage .block_content.carouselContainer {
    max-width: 1570px !important;
  }

  /* Match the 1600px Bootstrap container used by the Products section; after
     its 15px side gutters the visible panel is 1570px wide. */
  .ga-lp--weekly-deals .ga-text > .container {
    width: 1600px;
    max-width: 1600px;
  }
}

/* White wedge (Figma "Rectangle 317"). It has to cross exactly the bottom-left
   corner of the first product card at every width. Two things were off: the
   theme blows the SVG up past the viewport below 1550 (width:1720px at 1440,
   1600px at 1024), and it anchors the shape to the bottom of the carousel block
   — while the corner it must meet moves with the card grid, which reflows
   (3/4/5 columns) inside a single breakpoint. That offset is not linear in the
   viewport, so CSS alone cannot express it: front.js measures the shape (path
   hit-test at the card's left edge) and shifts it with a margin. What CSS does
   here is render the shape 1:1 and paint the strip the shift leaves under it.
   The small negative offset guarantees the white reaches the block's bottom edge
   whatever the parent's padding; the script absorbs it when it re-measures. */
.ga-lp--weekly-deals .isLandingPage .landingBottom {
  bottom: -20px;
  background-image: linear-gradient(#fff, #fff);
  background-repeat: no-repeat;
  background-position: left bottom;
  background-size: 100% 0;
}

@media (max-width: 1549px) {
  .ga-lp--weekly-deals .isLandingPage .landingBottom svg {
    width: 100vw !important;
    min-width: 0 !important;
  }
}

/* At <=991 the ayon header stack is FIXED (50px promo bar + 76px mobile header
   = 126px) while the body reserves 130px for it, so a ~4px strip of white body
   shows between the header and the hero. The standalone landings paint the whole
   body (body.ga-landing-page, #0d0034), but here that bleeds through the rest of
   the page. Painting just the strip is not enough either — it would be flat
   gradient next to a hero that already has the artwork over it. So slide the
   hero block under the fixed header instead: it covers the seam with its own
   background, no colour matching involved. */
@media (max-width: 991px) {
  .ga-lp--weekly-deals .easycarousels.isLandingPage {
    margin-top: -8px;
  }
}

/* The swiper scrollbar belongs to the small frames only: Figma has a "Scroll"
   node in the 768 (1:7340) and 375 (1:6788) banners, none from 1024 up — there
   the navigation is the arrows. */
@media (min-width: 992px) {
  .ga-lp--weekly-deals .isLandingPage .swiper-scrollbar {
    display: none !important;
  }
}