/*
 * Landing Colcci 40 anos.
 * Medidas escritas nos px do layout (XD) e multiplicadas por --u, que vale
 * 1px do layout proporcional a largura da tela: 1920 no desktop, 430 no mobile.
 */
.lp40 {
  --u: calc(100vw / 1920);
  --vermelho: #820001;
  --creme: #f7eed4;

  overflow: hidden;
  font-family: var(--font, 'Gotham'), sans-serif;
  color: #fff;
}

/* Breadcrumb do layout do site (este CSS so carrega nesta landing) */
.wd-browsing-breadcrumbs {
  display: none;
}

/* Resets com especificidade baixa (:where) e fora da vitrine, que vem do admin */
.lp40 :where(:not(.lp40-vitrine *)) {
  box-sizing: border-box;
}

.lp40 :where(p, h1, h2):where(:not(.lp40-vitrine *)) {
  margin: 0;
  padding: 0;
}

.lp40 :where(img:not(.lp40-vitrine *)) {
  display: block;
  max-width: none;
}

.lp40-so-mobile {
  display: none;
}

/* Texto so para leitores de tela e buscadores */
.lp40-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Botao contornado "Shop now" */
.lp40-botao {
  position: absolute;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(247 * var(--u));
  height: calc(62 * var(--u));
  border: 2px solid currentColor;
  border-radius: calc(21 * var(--u));
  color: #fff;
  font-size: calc(19 * var(--u));
  font-weight: 500;
  letter-spacing: -0.083em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s, color 0.2s;
}

.lp40-botao:hover,
.lp40-botao:focus-visible {
  background-color: #fff;
  color: var(--vermelho);
  text-decoration: none;
}

/* ---------- Hero (video com textos e botao ja aplicados) ---------- */
.lp40-hero {
  position: relative;
  z-index: 1;
  background-color: #d9d9d9;
}

.lp40-hero__link {
  display: block;
}

.lp40-hero__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* ---------- Cerejas ---------- */
.lp40-cerejas {
  position: relative;
  z-index: 2;
  height: calc(1280 * var(--u));
  margin-top: calc(-156 * var(--u));
  margin-bottom: calc(-279 * var(--u));
  pointer-events: none;
}

.lp40-cerejas__img {
  position: absolute;
  object-fit: cover;
}

.lp40-cerejas__img--1 {
  top: 0;
  left: 0;
  width: calc(1024 * var(--u));
  height: calc(1280 * var(--u));
  border-radius: 0 calc(181 * var(--u)) calc(181 * var(--u)) calc(181 * var(--u));
}

.lp40-cerejas__img--2 {
  top: calc(156 * var(--u));
  right: 0;
  width: calc(899 * var(--u));
  height: calc(1124 * var(--u));
  border-radius: 0 0 0 calc(181 * var(--u));
}

/* Linha vermelha vertical que desce do topo ate o texto */
.lp40-cerejas::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: 0;
  left: calc(803 * var(--u));
  width: 2px;
  height: calc(480 * var(--u));
  background-color: var(--vermelho);
}

.lp40-cerejas__texto {
  position: absolute;
  z-index: 1;
  top: calc(518 * var(--u));
  left: calc(804 * var(--u));
  font-size: calc(49 * var(--u));
  font-weight: 700;
  line-height: calc(40 * var(--u));
  letter-spacing: -0.076em;
  color: var(--vermelho);
  white-space: nowrap;
}

.lp40-cerejas__l2 {
  display: inline-block;
  margin-left: calc(120 * var(--u));
}

.lp40-cerejas__cj {
  position: absolute;
  z-index: 1;
  top: calc(100% - 14 * var(--u));
  left: calc(973 * var(--u));
  width: calc(95 * var(--u));
}

/* ---------- Slider (Livia / Chico) ---------- */
.lp40-slider {
  position: relative;
  z-index: 1;
  height: calc(1536 * var(--u));
  overflow: hidden;
  background-color: #0f1f3d;
}

.lp40-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s, visibility 0.5s;
}

.lp40-slide--ativo {
  opacity: 1;
  visibility: visible;
}

.lp40-slide__fundo {
  position: absolute;
  top: 0;
  left: 0;
  width: calc(1920 * var(--u));
  height: calc(1536 * var(--u));
  object-fit: cover;
  object-position: left center;
}

.lp40-slide__texto {
  position: absolute;
  font-size: calc(20 * var(--u));
  line-height: calc(22 * var(--u));
  letter-spacing: -0.031em;
}

.lp40-slide__nome {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: calc(32 * var(--u));
  white-space: nowrap;
}

.lp40-slide__nome h2 {
  font-size: calc(86 * var(--u));
  font-weight: 700;
  line-height: calc(70 * var(--u));
  letter-spacing: -0.076em;
  color: #fff;
}

.lp40-slide__nome span {
  font-size: calc(25 * var(--u));
  font-weight: 500;
  line-height: calc(28 * var(--u));
  letter-spacing: -0.031em;
}

.lp40-slide--livia .lp40-slide__texto {
  top: calc(397 * var(--u));
  left: calc(964 * var(--u));
}

.lp40-slide--livia .lp40-slide__nome {
  top: calc(540 * var(--u));
  left: calc(962 * var(--u));
}

.lp40-slide--livia .lp40-slide__botao {
  top: calc(671 * var(--u));
  left: calc(960 * var(--u));
}

.lp40-slide--chico .lp40-slide__nome {
  top: calc(1115 * var(--u));
  left: calc(502 * var(--u));
}

.lp40-slide--chico .lp40-slide__botao {
  top: calc(1240 * var(--u));
  left: calc(502 * var(--u));
}

.lp40-seta {
  position: absolute;
  z-index: 2;
  top: calc(861 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(67 * var(--u));
  height: calc(64 * var(--u));
  padding: 0;
  border: 1px solid #fff;
  border-radius: calc(5 * var(--u));
  background-color: rgba(0, 0, 0, 0.25);
  cursor: pointer;
  transition: background-color 0.2s;
}

.lp40-seta:hover {
  background-color: rgba(0, 0, 0, 0.5);
}

.lp40-seta img {
  width: calc(19 * var(--u));
}

.lp40-seta--anterior {
  left: calc(80 * var(--u));
}

.lp40-seta--anterior img {
  transform: scaleX(-1);
}

.lp40-seta--proxima {
  right: calc(102 * var(--u));
}

/* ---------- Vitrine (area configurada no admin) ---------- */
/* As duas vitrines ocupam a mesma celula; a inativa fica invisivel mas com
   layout, para o carregamento (IntersectionObserver) e o Swiper funcionarem */
.lp40-vitrines {
  display: grid;
  padding: calc(28 * var(--u)) 0 calc(58 * var(--u));
  color: initial;
}

.lp40-vitrine {
  grid-area: 1 / 1;
  min-width: 0;
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.5s, visibility 0.5s;
}

.lp40-vitrine--ativa {
  visibility: visible;
  opacity: 1;
}

.lp40-vitrine .vue-product-list__header {
  display: none;
}

/* ---------- Colecao ---------- */
.lp40-colecao {
  position: relative;
}

.lp40-colecao__fundo {
  width: 100%;
  height: auto;
}

.lp40-colecao__texto {
  position: absolute;
  top: calc(377 * var(--u));
  right: calc(100 * var(--u));
  font-size: calc(45 * var(--u));
  font-weight: 700;
  line-height: calc(44 * var(--u));
  letter-spacing: -0.085em;
  text-align: right;
  color: #242424;
}

.lp40-colecao__botao {
  top: calc(690 * var(--u));
  right: calc(102 * var(--u));
  color: #2b2b2b;
}

.lp40-colecao__botao:hover,
.lp40-colecao__botao:focus-visible {
  background-color: #2b2b2b;
  color: #fff;
}

/* ================= Mobile (layout de 430px) ================= */
@media (max-width: 1023px) {
  .lp40 {
    --u: calc(100vw / 430);
  }

  .lp40-so-desktop {
    display: none;
  }

  .lp40-so-mobile {
    display: inline;
  }

  p.lp40-so-mobile {
    display: block;
  }

  .lp40-botao {
    width: calc(173 * var(--u));
    height: calc(42 * var(--u));
    border-width: 1px;
    border-radius: calc(14 * var(--u));
    font-size: calc(12 * var(--u));
  }

  .lp40-hero__video {
    aspect-ratio: 9 / 16;
  }

  /* Cerejas: so a primeira foto, com o texto abaixo */
  .lp40-cerejas {
    height: auto;
    /* sobe so ate abaixo do botao que vem no video */
    margin-top: calc(-90 * var(--u));
    margin-bottom: 0;
  }

  .lp40-cerejas::before,
  .lp40 .lp40-cerejas__img--2,
  .lp40 .lp40-cerejas__cj {
    display: none;
  }

  .lp40-cerejas__img--1 {
    position: static;
    width: 100%;
    height: calc(540 * var(--u));
    border-radius: 0 calc(181 * var(--u)) 0 calc(181 * var(--u));
  }

  .lp40 .lp40-cerejas__texto {
    position: static;
    margin: calc(22 * var(--u)) 0 0 calc(145 * var(--u));
    font-size: calc(25 * var(--u));
    line-height: calc(23 * var(--u));
    letter-spacing: -0.083em;
  }

  .lp40-cerejas__l1 {
    margin-left: calc(53 * var(--u));
  }

  .lp40-cerejas__l2 {
    margin-left: 0;
  }

  .lp40-cerejas__l3 {
    margin-left: calc(91 * var(--u));
  }

  .lp40-cerejas__l1,
  .lp40-cerejas__l3 {
    display: inline-block;
  }

  /* Slider */
  .lp40-slider {
    height: calc(486 * var(--u));
    margin-top: calc(46 * var(--u));
    border-top-left-radius: calc(80 * var(--u));
  }

  .lp40-slide__fundo {
    width: calc(607 * var(--u));
    height: calc(486 * var(--u));
  }

  .lp40-slide__nome {
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: center;
    gap: calc(8 * var(--u));
    color: var(--creme);
  }

  .lp40-slide__nome h2 {
    color: var(--creme);
  }

  .lp40-slide__nome span {
    font-size: calc(15 * var(--u));
    line-height: calc(18 * var(--u));
  }

  .lp40-slide .lp40-slide__botao {
    top: auto;
    bottom: calc(13 * var(--u));
    border-color: var(--creme);
    color: var(--creme);
  }

  .lp40-slide--livia .lp40-slide__texto {
    top: calc(50 * var(--u));
    left: auto;
    right: calc(26 * var(--u));
    font-size: calc(12 * var(--u));
    line-height: calc(13 * var(--u));
    text-align: right;
    color: var(--creme);
  }

  .lp40-slide--livia .lp40-slide__nome {
    top: calc(293 * var(--u));
    left: 0;
  }

  .lp40-slide--livia .lp40-slide__nome h2 {
    font-size: calc(73 * var(--u));
    line-height: calc(59 * var(--u));
  }

  .lp40-slide--livia .lp40-slide__botao {
    left: calc(16 * var(--u));
  }

  .lp40-slide--chico .lp40-slide__nome {
    top: calc(269 * var(--u));
    left: 0;
    flex-direction: column-reverse;
  }

  .lp40-slide--chico .lp40-slide__nome h2 {
    font-size: calc(66 * var(--u));
    line-height: calc(53 * var(--u));
  }

  .lp40-slide--chico .lp40-slide__botao {
    left: auto;
    right: calc(16 * var(--u));
  }

  .lp40-seta {
    top: calc(237 * var(--u));
    width: calc(43 * var(--u));
    height: calc(41 * var(--u));
    border-radius: calc(4 * var(--u));
  }

  .lp40-seta img {
    width: calc(12 * var(--u));
  }

  .lp40-seta--anterior {
    left: calc(25 * var(--u));
  }

  .lp40-seta--proxima {
    right: calc(26 * var(--u));
  }

  /* Vitrine */
  .lp40-vitrines {
    padding: calc(17 * var(--u)) 0 calc(32 * var(--u));
  }

  .lp40-colecao__fundo {
    height: calc(585 * var(--u));
    object-fit: cover;
  }

  .lp40-colecao__texto {
    top: calc(55 * var(--u));
    right: calc(30 * var(--u));
    font-size: calc(20 * var(--u));
    line-height: calc(19 * var(--u));
  }

  .lp40-colecao__botao {
    top: calc(483 * var(--u));
    right: auto;
    left: calc(47 * var(--u));
    width: calc(323 * var(--u));
    height: calc(62 * var(--u));
    border-radius: calc(21 * var(--u));
    font-size: calc(18 * var(--u));
    color: #fff;
  }

  .lp40-colecao__botao:hover,
  .lp40-colecao__botao:focus-visible {
    background-color: #fff;
    color: #2b2b2b;
  }
}