#heroHome #scrollable {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#heroHome #scrollable::-webkit-scrollbar {
  display: none;
}

@media screen and (max-width: 480px) {
  #heroHome #scrollable {
    min-height: var(--height-poster-2xl);
  }
}

@media screen and (min-width: 481px) and (max-width: 949px) {
  #heroHome #scrollable {
    min-height: var(--height-cover-2xl);
  }
}

@media screen and (min-width: 950px) {
  #heroHome #scrollable {
    aspect-ratio: var(--ratio-widescreen);
  }
}

#heroHome #scrollable .part {
  flex: 0 0 100%;
  scroll-snap-align: start;
}



/* === one === */
#heroHome #scrollable #one {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.87), rgba(0, 0, 0, 0.87)),
    linear-gradient(to right, rgba(255, 0, 0, 0.5), rgba(0, 0, 255, 0.5)),
    url("../../../assets/imgs/bg_fimagogo.png");
  align-content: flex-end;
  padding-bottom: var(--gap-xl);
}

#heroHome #scrollable #one .content .describe {
  max-width: var(--width-cover-xl);
  margin-top: var(--gap-xs);
  color: var(--text-secondary);
}

#heroHome #scrollable #one .content .uibtn {
  margin-top: var(--gap-md);
  margin-bottom: var(--gap-xs);
}

#heroHome #scrollable #one .content .uibtn .child {
  padding: 0 var(--gap-md);
}

#heroHome #scrollable #one .content #sayfree {
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
}



#heroHome #scrollable .part .hero__bg-scrim {
  height: 100%;
}

@media screen and (max-width: 480px) {
  #heroHome #scrollable .part .hero__bg-scrim {
    padding-bottom: var(--gap-md);
  }
}

#heroHome .scrollable--dot-repere {
  padding-top: var(--gap-sm);
}

#heroHome .scrollable--dot-repere .dot {
  width: calc(var(--size-icon-sm) / 2);
  height: calc(var(--size-icon-sm) / 2);
  background: var(--color-info-light);
  margin-right: var(--gap-xs);
  border-radius: var(--radius-full);
  transition: background var(--transition-fast), width var(--transition-slow);
}

#heroHome .scrollable--dot-repere .dot.active {
  background: var(--color-info);
  width: var(--size-icon-lg);
}



/* === featured === */
.featured-section {
  padding-top: var(--gap-2xl);
}

.featured-section .featured-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  gap: var(--gap-sm);
}

.featured-section .featured-section__grid .squa_load {
  display: block;
  height: var(--height-cover-md);
  border-radius: var(--radius-xs);
}

.featured-section .featured-section__grid .featured-section__main {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  border-radius: var(--radius-xs);
  overflow: hidden;
  position: relative;
}

.featured-section .featured-section__grid .featured-section__side .featured-section__side-img,
.featured-section .featured-section__grid .featured-section__side .featured-section__side-img img,
.featured-section .featured-section__grid .featured-section__main:hover .featured-section__main-img,
.featured-section .featured-section__grid .featured-section__main:hover .featured-section__main-img img {
  aspect-ratio: var(--ratio-cover);
}

.featured-section .featured-section__grid .featured-section__main .featured-section__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-tertiary);
  transition: transform var(--transition-slow);
}

.featured-section .featured-section__grid .featured-section__main:hover .featured-section__main-img {
  transform: scale(1.03);
}

.featured-section .featured-section__grid .featured-section__main .featured-section__main-content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  padding: var(--gap-xl);
  align-content: flex-end;
  background: var(--color-scrim-bottom);
}

.featured-section .featured-section__grid .featured-section__main .featured-section__main-content .featured-section__main-title {
  margin-block: var(--gap-xs) var(--gap-sm);
}

.featured-section .featured-section__grid .featured-section__main .uibtn {
  padding: 0 var(--gap-md);
}

/* featured-section__side */
.featured-section .featured-section__grid .featured-section__side {
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
}

.featured-section .featured-section__grid .featured-section__side .featured-section__side-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: var(--bg-tertiary);
  transition: transform var(--transition-slow);
}

.featured-section .featured-section__grid .featured-section__side:hover .featured-section__side-img {
  transform: scale(1.04);
}

.featured-section .featured-section__grid .featured-section__side .featured-section__side-content {
  position: absolute;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  align-content: flex-end;
  padding: var(--gap-md);
  background: var(--color-scrim-bottom);
}

.featured-section .featured-section__grid .featured-section__side .featured-section__side-content .featured-section__side-title {
  margin-block: var(--gap-2xs) var(--gap-xs);
}

@media (max-width: 768px) {
  .featured-section .featured-section__grid {
    grid-template-columns: 1fr;
  }

  .featured-section .featured-section__grid .featured-section__main {
    grid-row: auto;
    grid-column: auto;
    min-height: 300px;
  }
}



/* === top-picks-section === */
.top-picks-section {
  margin-top: var(--gap-3xl);
  padding-block: var(--gap-3xl);
  background: var(--bg-secondary);
  overflow: hidden;
}

.top-picks-section .top-picks-section__grid {
  display: flex;
  gap: var(--gap-md);
  overflow-x: scroll;
}

.top-picks-section .top-picks-section__grid .top-picks-section__item {
  position: relative;
  border-radius: var(--radius-xs);
  overflow: hidden;
  aspect-ratio: var(--ratio-portrait);
  background: var(--bg-tertiary);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

@media (max-width: 480px) {

  .top-picks-section .top-picks-section__grid .top-picks-section__item,
  .top-picks-section .top-picks-section__grid .top-picks-section__item .imgAsset img {
    width: var(--width-poster-md);
    min-width: var(--width-poster-md);
  }
}

@media (min-width: 481px) and (max-width: 768px) {

  .top-picks-section .top-picks-section__grid .top-picks-section__item,
  .top-picks-section .top-picks-section__grid .top-picks-section__item .imgAsset img {
    width: var(--width-poster-lg);
    min-width: var(--width-poster-lg);
  }
}

@media (min-width: 769px) {

  .top-picks-section .top-picks-section__grid .top-picks-section__item,
  .top-picks-section .top-picks-section__grid .top-picks-section__item .imgAsset img {
    width: var(--width-poster-xl);
    min-width: var(--width-poster-xl);
  }
}

.top-picks-section .top-picks-section__grid .top-picks-section__item:hover {
  transform: translateY(-6px) scale(1.02);
  box-shadow: var(--shadow-strong);
  z-index: 2;
}

.top-picks-section .top-picks-section__grid .top-picks-section__item .top-picks-section__item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform var(--transition-slow);
}

.top-picks-section .top-picks-section__grid .top-picks-section__item:hover .top-picks-section__item-img {
  transform: scale(1.06);
}

.top-picks-section .top-picks-section__grid .top-picks-section__item .top-picks-section__item-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.2) 50%, transparent 100%);
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: var(--gap-md);
  gap: var(--gap-2xs);
  opacity: 0;
  transition: opacity var(--transition-base);
}

.top-picks-section .top-picks-section__grid .top-picks-section__item:hover .top-picks-section__item-overlay {
  opacity: 1;
}

.top-picks-section .top-picks-section__grid .top-picks-section__item .top-picks-section__item-overlay .top-picks-section__item-title {
  font-size: var(--text-sm);
  line-height: 1.2;
}

.top-picks-section .top-picks-section__grid .top-picks-section__item .top-picks-section__item-overlay .top-picks-section__item-meta {
  display: flex;
  align-items: center;
  gap: var(--gap-xs);
}



/* === promo-banner === */
.promo-banner {
  margin-top: var(--gap-2xl);
}

.promo-banner .promo-banner__inner {
  border-radius: var(--radius-xs);
  background: linear-gradient(135deg, #1a0900 0%, #2d1200 40%, #0f0f0f 100%);
  border: var(--width-stroke) solid var(--color-accent);
  padding: var(--gap-3xl);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-xl);
  position: relative;
  overflow: hidden;
}

.promo-banner .promo-banner__inner::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 320px;
  height: 320px;
  background: radial-gradient(circle, rgba(245, 100, 22, 0.18) 0%, transparent 70%);
  pointer-events: none;
}

[dir="rtl"] .promo-banner .promo-banner__inner::before {
  right: auto;
  left: -60px;
}

.promo-banner .promo-banner__inner .promo-banner__text .promo-banner__label {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--gap-xs);
}

.promo-banner .promo-banner__inner .promo-banner__text .promo-banner__title {
  font-family: var(--font-display);
  font-size: clamp(1.75rem, 3.5vw, 3rem);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-primary);
  margin-bottom: var(--gap-sm);
  line-height: 1;
}

.promo-banner .promo-banner__inner .promo-banner__text .promo-banner__desc {
  font-size: var(--text-sm);
  color: var(--text-secondary);
  max-width: 480px;
  line-height: 1.6;
}

.promo-banner .promo-banner__inner .promo-banner__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap-sm);
  flex-shrink: 0;
}

.promo-banner.isEmpty .promo-banner__inner .promo-banner__actions {
  display: none;
}

.promo-banner .promo-banner__inner .promo-banner__price .promo-banner__price-old {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
  text-decoration: line-through;
  margin-bottom: 2px;
  text-align: end;
}

.promo-banner .promo-banner__inner .promo-banner__price .promo-banner__price-new {
  line-height: 1;
  text-align: end;
  display: flex;
  flex-direction: column;
}

.promo-banner .promo-banner__inner .promo-banner__price .promo-banner__price-new .price {
  font-size: calc(var(--font-size-3xl) * 2);
  font-weight: var(--font-weight-black);
}

.promo-banner .promo-banner__inner .promo-banner__price .promo-banner__price-new .desc {
  font-size: var(--font-size-sm);
  color: var(--text-muted);
}

.promo-banner .promo-banner__inner #download {
  padding: 0 var(--gap-md);
}

@media (max-width: 768px) {
  .promo-banner .promo-banner__inner {
    flex-direction: column;
    align-items: flex-start;
    padding: var(--gap-xl);
  }

  .promo-banner .promo-banner__inner .promo-banner__actions {
    align-items: flex-start;
  }

  .promo-banner .promo-banner__inner .promo-banner__price .promo-banner__price-old,
  .promo-banner .promo-banner__inner .promo-banner__price .promo-banner__price-new {
    text-align: start;
  }
}