/* ==================================================
   COLLECTION PAGE
================================================== */

.collection-page {
  --collection-bg: #191919;
  --collection-accent: #d8ac7b;

  width: 100%;

  margin: 0;

  background-color:
    var(--collection-bg);

  overflow-x: clip;
}



/* ==================================================
   FIXED NAV
================================================== */

.collection-page .fixed-scroll-nav {
  visibility: visible;

  pointer-events: auto;

  z-index: 15000;
}


.collection-page .fixed-scroll-nav-bg {
  opacity: 1;
}


.collection-page .fixed-scroll-nav-content {
  opacity: 1;
}



/* ==================================================
   NAV BUTTON RESET
================================================== */

.collection-page
.favorites-toggle {
  margin: 0;
  padding: 0;

  border: 0;

  background: transparent;

  color: inherit;

  font: inherit;

  cursor: pointer;
}



/* ==================================================
   COLLECTION HERO
================================================== */

.collection-hero {
  display: flex;

  align-items: stretch;
  justify-content: space-between;

  width: 100%;
  height: 40svh;

  margin: 0;

  padding:
    64px
    20px
    40px;

  box-sizing: border-box;

  overflow: hidden;

  background-color:
    var(--collection-bg);

  color:
    var(--collection-accent);
}



/* ==================================================
   HERO LEFT
================================================== */

.collection-hero-left {
  display: flex;

  flex-direction: column;

  align-items: flex-start;
  justify-content: flex-end;

  gap: 14px;

  flex: 1 1 50%;

  min-width: 0;
}



/* ==================================================
   HERO SYMBOL
================================================== */

.collection-hero-symbol {
  display: block;

  flex: 0 0 auto;

  width: 72px;
  height: auto;

  max-width: 72px;

  margin: 0;
}



/* ==================================================
   HERO INFO
================================================== */

.collection-hero-info {
  display: flex;

  flex-direction: column;

  align-items: flex-start;

  gap: 0;

  min-width: 0;
}



/* ==================================================
   HERO FIRST LINE
   TECHNICAL
================================================== */

.collection-hero-title {
  margin: 0;

  color: inherit;

  font-family:
    var(--font-main);

  font-size: 4vw;

  line-height: 0.84;

  font-weight: 400;

  letter-spacing:
    -0.045em;

  text-transform:
    uppercase;
}


.collection-hero-title-first {
  display: block;
}



/* ==================================================
   HERO SECOND LINE
   OUTWEAR + DIVIDER + META
================================================== */

.collection-hero-second-line {
  display: flex;

  align-items: flex-end;

  gap: 20px;

  /*
    Desplaza OUTWEAR y toda la información
    que lo acompaña respecto a TECHNICAL.
  */

  margin-left:
    clamp(
      45px,
      4vw,
      78px
    );
}



/* ==================================================
   OUTWEAR
================================================== */

.collection-hero-outwear {
  flex: 0 0 auto;

  color: inherit;

  font-family:
    var(--font-main);

  font-size: 4vw;

  line-height: 0.84;

  font-weight: 400;

  letter-spacing:
    -0.045em;

  text-transform:
    uppercase;
}



/* ==================================================
   DIVIDER
================================================== */

.collection-hero-divider {
  flex: 0 0 auto;

  display: block;

  width: 1px;
  height: 40px;

  background-color:
    currentColor;
}



/* ==================================================
   META
================================================== */

.collection-hero-meta {
  flex: 0 0 auto;

  margin: 0;

  color: inherit;

  font-family:
    var(--font-main);

  font-size: 13px;
  line-height: 13px;

  font-weight: 600;

  letter-spacing:
    -0.01em;

  text-transform:
    uppercase;
}



/* ==================================================
   HERO RIGHT
================================================== */

.collection-hero-right {
  display: flex;

  align-items: flex-end;
  justify-content: flex-end;

  flex: 1 1 50%;

  min-width: 0;

  text-align: right;
}



/* ==================================================
   HERO STATEMENT
================================================== */

.collection-hero-statement {
  display: flex;

  flex-direction: column;

  align-items: flex-end;

  margin: 0;

  color: inherit;

  font-family:
    var(--font-main);

  font-size: 4vw;

  line-height: 0.84;

  font-weight: 400;

  letter-spacing:
    -0.045em;

  text-align: right;

  text-transform:
    uppercase;
}



/* ==================================================
   SOUND OF
================================================== */

.collection-hero-sound {
  display: block;
}



/* ==================================================
   SILENCE
================================================== */

.collection-hero-silence {
  display: block;

  /*
    SILENCE se desplaza hacia la izquierda
    respecto a SOUND OF.
  */

  margin-right:
    clamp(
      55px,
      5vw,
      95px
    );
}



/* ==================================================
   FEATURED COLLECTION
   2 × 50VW
================================================== */

.collection-featured {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  width: 100%;

  margin: 0;
  padding: 0;
}



/* ==================================================
   FEATURED ITEM
================================================== */

.collection-featured-item {
  display: flex;

  flex-direction: column;

  width: 50vw;
  height: 70svh;

  min-width: 0;
  min-height: 0;

  margin: 0;
  padding: 0;

  overflow: hidden;
}



/* ==================================================
   FEATURED MEDIA
================================================== */

.collection-featured-media {
  position: relative;

  flex: 1 1 auto;

  width: 100%;

  min-height: 0;

  margin: 0;

  overflow: hidden;
}



/* ==================================================
   FEATURED IMAGE
================================================== */

.collection-featured-item
.collection-featured-image {
  position: absolute;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  max-width: none;

  margin: 0;

  object-fit: cover;
  object-position: center;

  transform: none;
}

/* ==================================================
   FEATURED PIXEL HOVER

   En los wear-items normales:
   imagen + canvas = 118%

   En los featured:
   imagen + canvas = 100%

   Ambos tienen que tener EXACTAMENTE
   la misma geometría para que no exista
   ningún salto durante el cambio.
================================================== */

.collection-featured-item
.wear-detail-canvas {
  position: absolute;

  z-index: 2;

  inset: 0;

  width: 100%;
  height: 100%;

  transform: none;

  pointer-events: none;

  opacity: 0;
}


/* ==================================================
   FEATURED INFO
================================================== */

.collection-featured-item
.wear-info {
  flex: 0 0 30px;

  width: 100%;
  height: 30px;

  min-height: 30px;

  margin: 0;

  padding:
    7px
    10px;

  box-sizing: border-box;
}



/* ==================================================
   FEATURED UI
================================================== */

.collection-featured-item
.wear-actions-top,

.collection-featured-item
.wear-size-picker,

.collection-featured-item
.anadir {
  z-index: 8;
}



/* ==================================================
   FEATURED SIZE PICKER

   Mismo ancho visual que en un item de 25vw.
   Alineado al borde derecho.
================================================== */

.collection-featured-item
.wear-size-picker {
  left: auto;
  right: 20px;

  width:
    calc(
      25vw -
      78px
    );
}



/* ==================================================
   4 PRODUCT GRID
================================================== */

.collection-grid-section {
  width: 100%;

  margin: 0;
  padding: 0;
}



.collection-grid-section
.wearing-img-container {
  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  width: 100%;

  margin: 0;
  padding: 0;
}



/* ==================================================
   4 PRODUCT GRID — ITEM
================================================== */

.collection-grid-section
.wear-item {
  display: flex;

  flex-direction: column;

  width: 25vw;

  height: auto;

  min-width: 0;
  min-height: 0;

  overflow: visible;
}

/* ==================================================
   4 PRODUCT GRID — IMAGE
================================================== */

.collection-grid-section
.wear-img {
  flex: 0 0 70vh;

  width: 100%;
  height: 70vh;
}


/* ==================================================
   4 PRODUCT GRID — INFO
================================================== */

.collection-grid-section
.wear-info {
  flex: 0 0 auto;

  width: 100%;

  position: relative;
}

/* ==================================================
   TABLET
================================================== */

@media (max-width: 900px) {


  /* ==================================================
     HERO
  ================================================== */

  .collection-hero {
    height: 38svh;

    padding:
      70px
      15px
      18px;
  }


  .collection-hero-title,
  .collection-hero-outwear,
  .collection-hero-statement {
    font-size:
      clamp(
        36px,
        5vw,
        52px
      );
  }


  .collection-hero-second-line {
    margin-left:
      clamp(
        30px,
        4vw,
        55px
      );
  }


  .collection-hero-silence {
    margin-right:
      clamp(
        35px,
        5vw,
        65px
      );
  }



  /* ==================================================
     FEATURED
  ================================================== */

  .collection-featured {
    grid-template-columns:
      1fr;
  }


  .collection-featured-item {
    width: 100%;

    height: 100svh;
  }



  /* ==================================================
     FEATURED SIZE PICKER

     La grid inferior pasa a 50vw,
     por lo que usamos su ancho equivalente.
  ================================================== */

  .collection-featured-item
  .wear-size-picker {
    left: auto;
    right: 20px;

    width:
      calc(
        50vw -
        78px
      );
  }



  /* ==================================================
     GRID
  ================================================== */

  .collection-grid-section
  .wearing-img-container {
    grid-template-columns:
      repeat(
        2,
        minmax(0, 1fr)
      );
  }


  .collection-grid-section
  .wear-item {
    width: 50vw;
  }

}



/* ==================================================
   MOBILE
================================================== */

@media (max-width: 600px) {


  /* ==================================================
     HERO
  ================================================== */

  .collection-hero {
    /* flex-direction: column;

    align-items: stretch;
    justify-content: flex-end; */
    display: block;
    gap: 32px;

    height: auto;

    /* min-height: 55svh; */

    padding:
      100px
      15px
      38px;
  }



  /* ==================================================
     HERO LEFT
  ================================================== */

  .collection-hero-left {
    flex: 0 0 auto;

    width: 100%;

    gap: 12px;
  }



  /* ==================================================
     SYMBOL
  ================================================== */

  .collection-hero-symbol {
    width: 55px;

    max-width: 55px;
  }



  /* ==================================================
     HERO INFO
  ================================================== */

  .collection-hero-info {
    width: 100%;
  }



  /* ==================================================
     TITLES
  ================================================== */

  .collection-hero-title,
  .collection-hero-outwear,
  .collection-hero-statement {
    font-size: 42px;
  }



  /* ==================================================
     SECOND LINE
  ================================================== */

  .collection-hero-second-line {
    gap: 12px;

    margin-left: 25px;
  }



  /* ==================================================
     DIVIDER
  ================================================== */

  .collection-hero-divider {
    height: 34px;
  }



  /* ==================================================
     META
  ================================================== */

  .collection-hero-meta {
    font-size: 9px;

    line-height: 9px;
  }



  /* ==================================================
     RIGHT
  ================================================== */

  .collection-hero-right {
    flex: 0 0 auto;

    width: 100%;

    justify-content:
      flex-start;
      display: none;
    text-align:
      left;
  }


  .collection-hero-statement {
    align-items:
      flex-start;

    text-align:
      left;
  }


  .collection-hero-silence {
    margin-right: 0;

    margin-left: 35px;
  }



  /* ==================================================
     FEATURED SIZE PICKER

     En móvil vuelve al comportamiento normal
     de los wear-items.
  ================================================== */

  .collection-featured-item
  .wear-size-picker {
    left: 58px;
    right: 20px;

    width: auto;
  }



  /* ==================================================
     4 GRID
  ================================================== */

  .collection-grid-section
  .wearing-img-container {
    grid-template-columns:
      1fr;
  }


  .collection-grid-section
  .wear-item {
    width: 100%;
  }

}