/* ==========================================================================
   Falabella.com Products — "En falabella.com" title + product carousel + CTA
   (Banco Falabella Perú clone — section .x-fcom)
   All rules scoped under .x-fcom.
   ========================================================================== */

/* --- Title section ------------------------------------------------------- */
.x-fcom .x-fcom__title-section {
  background: var(--white);
  padding: 40px 0 26px;
  position: relative;
}
.x-fcom .x-fcom__title-inner {
  max-width: 1505px;
  margin: 0 auto;
  padding: 0 80px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.x-fcom .x-fcom__title-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.x-fcom .x-fcom__title-row img {
  width: 48px;
  height: 48px;
}
.x-fcom .x-fcom__title {
  font-size: var(--fs-h2); /* 32px */
  font-weight: var(--fw-regular); /* 450 */
  line-height: 44.8px;
  letter-spacing: -0.64px;
  color: var(--ink-2);
  margin: 0;
}

/* --- Products section / carousel shell ----------------------------------- */
.x-fcom .x-fcom__products {
  background: var(--white);
  padding: 0 0 32px;
}
.x-fcom .x-fcom__carousel {
  max-width: var(--container-section); /* 1352px */
  margin: 0 auto;
  position: relative;
}
.x-fcom .x-fcom__viewport {
  overflow: hidden;
  padding: 4px 0;
}
.x-fcom .x-fcom__track {
  display: flex;
  gap: 32px; /* live site: stride 324 = card 292 + gap 32 */
  align-items: stretch;
  padding: 0 0 4px;
  transition: transform .45s ease;
  will-change: transform;
}

/* --- Product card --------------------------------------------------------- */
.x-fcom .x-product {
  flex: 0 0 292px;
  width: 292px;
  height: 456px;
}
.x-fcom .x-product__link {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: var(--r-panel); /* 24px */
  box-shadow: var(--shadow-card-dark);
  overflow: hidden;
  position: relative;
  color: inherit;
  text-decoration: none;
}
.x-fcom .x-product__img-wrap {
  width: 100%;
  height: 220px;
  position: relative;
  overflow: hidden;
  background: var(--white);
  flex: 0 0 auto;
}
.x-fcom .x-product__img-wrap img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: 12px 16px 0;
  transition: transform .3s ease-out;
}
.x-fcom .x-product__link:hover .x-product__img-wrap img {
  transform: scale(1.04);
}
.x-fcom .x-product__content {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex: 1;
  overflow: hidden;
}
.x-fcom .x-product__brand {
  font-size: 16px;
  font-weight: var(--fw-semibold); /* 600 */
  line-height: 17.6px;
  letter-spacing: -0.16px;
  color: var(--gray-brand);
  text-transform: uppercase;
  margin: 0;
}
.x-fcom .x-product__name {
  font-size: 18px;
  font-weight: var(--fw-regular); /* 450 */
  line-height: 21.6px;
  letter-spacing: -0.18px;
  color: var(--ink);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* --- Prices --------------------------------------------------------------- */
.x-fcom .x-product__prices {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.x-fcom .x-product__support {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}
.x-fcom .x-product__cmr-icon {
  width: 61.5px;
  height: 30px;
  object-fit: contain;
}
.x-fcom .x-product__price-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.x-fcom .x-product__cmr-price {
  font-size: 20px;
  font-weight: var(--fw-semibold); /* 600 */
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--red);
}
.x-fcom .x-product__discount {
  font-size: 12px;
  font-weight: var(--fw-regular); /* 450 */
  line-height: 12px;
  color: var(--white);
  background: var(--red);
  padding: 3px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 20px;
}
.x-fcom .x-product__internet-price {
  font-size: 20px;
  font-weight: 400;
  line-height: 20px;
  letter-spacing: -0.2px;
  color: var(--ink);
  margin: 0;
}
.x-fcom .x-product__normal-price {
  font-size: 18px;
  font-weight: var(--fw-regular); /* 450 */
  line-height: 21.6px;
  color: var(--gray-muted);
  text-decoration: line-through;
  margin: 0;
}

/* --- Special card: "Ver en falabella.com" (7th card, exact live values) ------ */
.x-fcom .x-product--special .x-product__link {
  background: transparent;
  border-radius: var(--r-panel);
  box-shadow: none;
  overflow: visible;
}
.x-fcom .x-product__special-card {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 32px;
  width: 100%;
  height: 100%;
  background: var(--white);
  border-radius: 10px;
  box-shadow: var(--shadow-card-dark);
  padding: 16px;
  cursor: pointer;
  transition: transform .3s ease-out;
}
.x-fcom .x-product--special:hover .x-product__special-card { transform: translateY(-2px); }
.x-fcom .x-product__special-icon {
  width: 48px;
  height: 48px;
}
.x-fcom .x-product__special-card h3 {
  font-size: 20px;
  font-weight: var(--fw-regular); /* 450 */
  line-height: 24px;
  color: var(--ink);
  text-align: center;
  margin: 0;
}

/* --- Arrows --------------------------------------------------------------- */
.x-fcom .x-fcom__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  z-index: var(--z-arrows); /* 97 */
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}
.x-fcom .x-fcom__arrow--prev { left: -20px; }
.x-fcom .x-fcom__arrow--next { right: -20px; }
.x-fcom .x-fcom__arrow:disabled {
  opacity: .25;
  pointer-events: none;
}

/* --- Dots ----------------------------------------------------------------- */
.x-fcom .x-fcom__dots {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 20px 0 10px;
  height: 6px;
}
.x-fcom .x-fcom__dot {
  width: 6px;
  height: 6px;
  border-radius: var(--r-dot); /* 15px */
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color .3s .3s, width .3s;
}
.x-fcom .x-fcom__dot::after {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: var(--r-dot);
  background: var(--lime-pale);
  transition: background-color .3s;
}
.x-fcom .x-fcom__dot + .x-fcom__dot { margin-left: 8px; }
.x-fcom .x-fcom__dot.is-active {
  width: 24px;
  background: var(--lime);
  transition: background-color .3s, width .3s;
}
.x-fcom .x-fcom__dot.is-active::after { display: none; }

/* --- CTA ------------------------------------------------------------------- */
.x-fcom .x-fcom__cta-wrap {
  display: flex;
  justify-content: center;
  margin: 46px 24px 24px;
}
.x-fcom .x-fcom__cta.btn-primary {
  width: 310px;
  max-width: 310px;
  height: 56px;
}

/* --- Tablet (768–1023px) ---------------------------------------------------- */
@media (max-width: 1023px) {
  .x-fcom .x-product {
    flex: 0 0 260px;
    width: 260px;
  }
}

/* --- Mobile (<768px) --------------------------------------------------------- */
@media (max-width: 767px) {
  .x-fcom .x-fcom__title-section {
    padding: 24px 24px 16px;
  }
  .x-fcom .x-fcom__title-inner {
    padding: 0;
  }
  .x-fcom .x-fcom__title {
    font-size: var(--fs-hero); /* 40px */
    line-height: 56px;
    letter-spacing: -0.8px;
  }
  .x-fcom .x-fcom__products {
    padding: 8px 0 32px;
  }
  .x-fcom .x-fcom__viewport {
    padding: 4px 24px;
  }
  .x-fcom .x-fcom__track {
    gap: 14px;
  }
  .x-fcom .x-product {
    flex: 0 0 280px; /* live mobile card width (peek of next card) */
    width: 280px;
    height: 428px;
  }
  .x-fcom .x-product__img-wrap {
    height: 200px;
  }
  /* Live site hides carousel arrows on mobile */
  .x-fcom .x-fcom__arrow {
    display: none;
  }
}