/* =========================================================
   SILENCE DROP — FAVORITOS
========================================================= */

:root {

  --bg:
    #f4efe5;

  --surface:
    #ebe2d3;

  --text:
    #17140f;

  --muted:
    #756d61;

  --border:
    #cdbd9f;

  --accent:
    #b9852f;

  --accent-light:
    #d8ad55;

  --dark:
    #0d0c0a;

}


* {
  box-sizing:
    border-box;
}


html {
  scroll-behavior:
    smooth;
}


body {

  margin:
    0;

  min-height:
    100vh;

  background:
    var(--bg);

  color:
    var(--text);

  font-family:
    Arial,
    Helvetica,
    sans-serif;

}


button,
a {

  font:
    inherit;

  -webkit-tap-highlight-color:
    transparent;

}


a {

  color:
    inherit;

  text-decoration:
    none;

}


/* =========================================================
   HEADER
========================================================= */

.favs-header {

  position:
    sticky;

  top:
    0;

  z-index:
    100;

  height:
    78px;

  border-bottom:
    1px solid
    rgba(
      255,
      255,
      255,
      .08
    );

  background:
    #050505;

  color:
    #fff;

}


.favs-header-inner {

  width:
    min(
      1380px,
      calc(100% - 64px)
    );

  height:
    100%;

  margin:
    0 auto;

  display:
    grid;

  grid-template-columns:
    1fr
    auto
    1fr;

  align-items:
    center;

}


.favs-back {

  width:
    fit-content;

  display:
    inline-flex;

  align-items:
    center;

  gap:
    10px;

  color:
    #bcbcbc;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    1px;

  transition:
    color .2s ease;

}


.favs-back:hover {
  color:
    #fff;
}


.favs-logo {

  color:
    #fff;

  font-size:
    19px;

  font-weight:
    900;

  letter-spacing:
    4px;

}


.favs-cart {

  position:
    relative;

  justify-self:
    end;

  width:
    44px;

  height:
    44px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border-radius:
    8px;

  font-size:
    20px;

}


.favs-cart:hover {

  background:
    #151515;

}


.favs-cart-count {

  position:
    absolute;

  top:
    1px;

  right:
    0;

  min-width:
    18px;

  height:
    18px;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  padding:
    0 4px;

  border-radius:
    999px;

  background:
    var(--accent);

  color:
    #fff;

  font-size:
    9px;

  font-weight:
    900;

}


/* =========================================================
   MAIN
========================================================= */

.favs-main {

  min-height:
    calc(
      100vh -
      78px
    );

  padding:
    70px 0
    100px;

}


.favs-container {

  width:
    min(
      1380px,
      calc(100% - 80px)
    );

  margin:
    0 auto;

}


/* =========================================================
   HEADING
========================================================= */

.favs-heading {

  margin-bottom:
    40px;

}


.favs-heading > span {

  display:
    block;

  margin-bottom:
    9px;

  color:
    var(--accent);

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    3px;

}


.favs-heading h1 {

  margin:
    0;

  font-size:
    clamp(
      35px,
      5vw,
      65px
    );

  line-height:
    .95;

  letter-spacing:
    -2px;

}


.favs-heading p {

  margin:
    15px 0 0;

  color:
    var(--muted);

  font-size:
    12px;

}


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

.favs-grid {

  display:
    grid;

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

  gap:
    18px;

}


/* =========================================================
   TARJETA
========================================================= */

.fav-card {

  overflow:
    hidden;

  border:
    1px solid
    rgba(
      121,
      85,
      29,
      .22
    );

  background:
    #f8f4ec;

  transition:
    transform .25s ease,
    box-shadow .25s ease;

}


.fav-card:hover {

  transform:
    translateY(-4px);

  box-shadow:
    0 18px 40px
    rgba(
      42,
      31,
      12,
      .12
    );

}


/* =========================================================
   IMAGEN
========================================================= */

.fav-image {

  position:
    relative;

  width:
    100%;

  aspect-ratio:
    4 / 5;

  overflow:
    hidden;

  display:
    block;

  background:
    #e4dccf;

}


.fav-image img {

  width:
    100%;

  height:
    100%;

  display:
    block;

  object-fit:
    cover;

  transition:
    transform .4s ease;

}


.fav-card:hover
.fav-image img {

  transform:
    scale(1.035);

}


.fav-no-image {

  width:
    100%;

  height:
    100%;

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  color:
    #9a9080;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    2px;

}


/* =========================================================
   INFORMACIÓN
========================================================= */

.fav-info {

  padding:
    19px;

}


.fav-brand {

  display:
    block;

  margin-bottom:
    7px;

  color:
    #8b7d69;

  font-size:
    8px;

  font-weight:
    800;

  letter-spacing:
    1.5px;

  text-transform:
    uppercase;

}


.fav-name {

  margin:
    0;

  min-height:
    38px;

  font-size:
    14px;

  font-weight:
    800;

  line-height:
    1.35;

}


.fav-price {

  display:
    block;

  margin-top:
    13px;

  font-size:
    15px;

  font-weight:
    900;

}


/* =========================================================
   BOTONES
========================================================= */

.fav-actions {

  display:
    grid;

  grid-template-columns:
    1fr
    48px;

  gap:
    8px;

  margin-top:
    20px;

}


.fav-cart-button,
.fav-remove-button {

  height:
    48px;

  border:
    0;

  cursor:
    pointer;

  transition:
    background .2s ease,
    color .2s ease,
    transform .15s ease;

}


.fav-cart-button {

  padding:
    0 15px;

  background:
    var(--dark);

  color:
    #fff;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    .7px;

}


.fav-cart-button:hover {

  background:
    var(--accent);

}


.fav-remove-button {

  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  border:
    1px solid
    rgba(
      23,
      20,
      15,
      .22
    );

  background:
    transparent;

  color:
    #6e6254;

  font-size:
    18px;

}


.fav-remove-button:hover {

  background:
    #17140f;

  color:
    #fff;

}


.fav-cart-button:active,
.fav-remove-button:active {

  transform:
    scale(.97);

}


/* =========================================================
   VACÍO
========================================================= */

.favs-empty {

  grid-column:
    1 / -1;

  min-height:
    430px;

  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  padding:
    60px 20px;

  border:
    1px dashed
    rgba(
      121,
      85,
      29,
      .35
    );

  text-align:
    center;

}


.favs-empty-icon {

  margin-bottom:
    18px;

  color:
    var(--accent);

  font-size:
    48px;

}


.favs-empty h2 {

  margin:
    0;

  font-size:
    21px;

}


.favs-empty p {

  margin:
    12px 0
    25px;

  color:
    var(--muted);

  font-size:
    12px;

}


.favs-empty a {

  min-width:
    180px;

  height:
    48px;

  display:
    inline-flex;

  align-items:
    center;

  justify-content:
    center;

  background:
    var(--dark);

  color:
    #fff;

  font-size:
    9px;

  font-weight:
    800;

  letter-spacing:
    1px;

}


/* =========================================================
   LOADING
========================================================= */

.favs-loading {

  grid-column:
    1 / -1;

  padding:
    80px 20px;

  color:
    var(--muted);

  text-align:
    center;

  font-size:
    10px;

  font-weight:
    700;

  letter-spacing:
    2px;

}


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

@media (
  max-width: 1000px
) {

  .favs-grid {

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

  }

}


/* =========================================================
   MÓVIL
========================================================= */

@media (
  max-width: 700px
) {

  .favs-header {

    height:
      68px;

  }


  .favs-header-inner {

    width:
      calc(
        100% - 28px
      );

  }


  .favs-back span {

    display:
      none;

  }


  .favs-logo {

    font-size:
      15px;

    letter-spacing:
      3px;

  }


  .favs-main {

    padding:
      42px 0
      70px;

  }


  .favs-container {

    width:
      calc(
        100% - 28px
      );

  }


  .favs-heading {

    margin-bottom:
      28px;

  }


  .favs-heading h1 {

    font-size:
      38px;

  }


  .favs-grid {

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

    gap:
      9px;

  }


  .fav-info {

    padding:
      13px;

  }


  .fav-name {

    min-height:
      34px;

    font-size:
      12px;

  }


  .fav-price {

    font-size:
      13px;

  }


  .fav-actions {

    grid-template-columns:
      1fr
      41px;

    gap:
      5px;

    margin-top:
      15px;

  }


  .fav-cart-button,
  .fav-remove-button {

    height:
      43px;

  }


  .fav-cart-button {

    padding:
      0 7px;

    font-size:
      7px;

    letter-spacing:
      .3px;

  }

}


/* =========================================================
   TELÉFONOS PEQUEÑOS
========================================================= */

@media (
  max-width: 390px
) {

  .favs-grid {

    grid-template-columns:
      1fr;

  }

}


/* =========================================================
   DETALLES DORADOS — SILENCE DROP
========================================================= */

.favs-heading {
  position: relative;
}

.favs-heading::after {
  content: "";
  display: block;
  width: 72px;
  height: 3px;
  margin-top: 18px;
  background:
    linear-gradient(
      90deg,
      #b9852f,
      #e0b646
    );
}

.favs-heading > span {
  color: #c99a19;
}

.favs-heading h1 {
  color: #15120d;
}

.favs-logo {
  color: #e0b646;
  text-shadow:
    0 0 18px
    rgba(
      224,
      182,
      70,
      .18
    );
}

.favs-back:hover {
  color: #e0b646;
}

.favs-cart {
  border:
    1px solid
    rgba(
      224,
      182,
      70,
      .18
    );
}

.favs-cart:hover {
  border-color:
    rgba(
      224,
      182,
      70,
      .65
    );

  color:
    #e0b646;
}

.favs-cart-count {
  background:
    linear-gradient(
      135deg,
      #c99a19,
      #e0b646
    );

  color:
    #080807;

  border:
    1px solid
    #f2cf75;

  box-shadow:
    0 0 0 2px
    #050505;
}


/* TARJETAS */

.fav-card {
  position: relative;
  border:
    1px solid
    rgba(
      185,
      133,
      47,
      .35
    );
}

.fav-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  z-index: 3;
  width: 100%;
  height: 3px;
  background:
    linear-gradient(
      90deg,
      #9d6f20,
      #e0b646,
      #9d6f20
    );
}

.fav-card:hover {
  border-color:
    rgba(
      224,
      182,
      70,
      .72
    );

  box-shadow:
    0 20px 45px
    rgba(
      116,
      78,
      15,
      .16
    );
}

.fav-brand {
  color: #a97827;
}

.fav-price {
  color: #9c6a17;
}


/* IMAGEN */

.fav-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border:
    1px solid
    rgba(
      224,
      182,
      70,
      .08
    );
}


/* BOTÓN AGREGAR */

.fav-cart-button {
  position: relative;
  overflow: hidden;

  background:
    #0b0a08;

  border:
    1px solid
    rgba(
      224,
      182,
      70,
      .34
    );

  color:
    #f7f0df;
}

.fav-cart-button:hover {
  background:
    linear-gradient(
      135deg,
      #b9852f,
      #d7aa45
    );

  border-color:
    #e0b646;

  color:
    #090806;
}

.fav-cart-button::after {
  content: "";
  position: absolute;
  top: 0;
  left: -120%;
  width: 70%;
  height: 100%;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(
        255,
        240,
        185,
        .22
      ),
      transparent
    );

  transform:
    skewX(-18deg);

  transition:
    left .45s ease;
}

.fav-cart-button:hover::after {
  left: 140%;
}


/* ELIMINAR FAVORITO */

.fav-remove-button {
  border:
    1px solid
    rgba(
      185,
      133,
      47,
      .45
    );

  color:
    #a97827;
}

.fav-remove-button:hover {
  background:
    #151109;

  border-color:
    #d8ad55;

  color:
    #e0b646;
}


/* ESTADO VACÍO */

.favs-empty {
  border:
    1px dashed
    rgba(
      185,
      133,
      47,
      .55
    );

  background:
    linear-gradient(
      180deg,
      rgba(
        224,
        182,
        70,
        .04
      ),
      transparent
    );
}

.favs-empty-icon {
  color: #c99a19;

  text-shadow:
    0 0 25px
    rgba(
      201,
      154,
      25,
      .25
    );
}

.favs-empty a {
  border:
    1px solid
    #c99a19;

  background:
    #0c0b08;

  color:
    #f7f0df;
}

.favs-empty a:hover {
  background:
    #c99a19;

  color:
    #090806;
}


/* LOADING */

.favs-loading {
  color: #a97827;
}


/* SELECCIÓN DE TEXTO */

::selection {
  background:
    #c99a19;

  color:
    #090806;
}


/* =========================================================
   DESTELLO DORADO — BOTONES HEADER
========================================================= */

.favs-back,
.favs-logo,
.favs-cart {
  position: relative;
  overflow: hidden;
}


/* DESTELLO */

.favs-back::after,
.favs-logo::after,
.favs-cart::after {

  content: "";

  position: absolute;

  top: -40%;
  left: -90%;

  width: 35%;
  height: 180%;

  pointer-events: none;

  background:
    linear-gradient(
      90deg,
      transparent,
      rgba(255, 221, 128, 0.12),
      rgba(255, 235, 170, 0.75),
      rgba(255, 221, 128, 0.12),
      transparent
    );

  transform:
    skewX(-22deg);

  opacity: 0;
}


/* ACTIVAR AL PASAR EL MOUSE */

.favs-back:hover::after,
.favs-logo:hover::after,
.favs-cart:hover::after {

  animation:
    silenceGoldFlash
    0.55s
    ease-out
    forwards;

}


/* ANIMACIÓN */

@keyframes silenceGoldFlash {

  0% {
    left: -90%;
    opacity: 0;
  }

  15% {
    opacity: 1;
  }

  100% {
    left: 140%;
    opacity: 0;
  }

}


/* =========================================================
   SILENCE DROP — NAVEGACIÓN INFERIOR
========================================================= */

.mobile-bottom-nav {
  display: none;
}


@media (max-width: 600px) {

  body {
    padding-bottom: 72px;
  }


  .mobile-bottom-nav {
    position: fixed;

    left: 0;
    right: 0;
    bottom: 0;

    z-index: 4000;

    height: 68px;

    display: grid;

    grid-template-columns:
      repeat(5, 1fr);

    align-items: center;

    padding:
      5px 7px
      env(safe-area-inset-bottom);

    border-top:
      1px solid
      rgba(185, 133, 47, .30);

    background:
      rgba(250, 246, 237, .97);

    backdrop-filter:
      blur(15px);

    -webkit-backdrop-filter:
      blur(15px);

    box-shadow:
      0 -8px 25px
      rgba(30, 20, 5, .08);
  }


  .mobile-bottom-item {
    height: 58px;

    display: flex;

    flex-direction: column;

    align-items: center;
    justify-content: center;

    gap: 3px;

    color:
      #28231b;

    text-decoration: none;

    transition:
      color .2s ease,
      transform .2s ease;
  }


  .mobile-bottom-item svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
  }


  .mobile-bottom-item span {
    font-size: 7px;

    font-weight: 700;
  }


  /* ACTIVO */

  .mobile-bottom-item.active {
    color:
      #a97016;
  }


  .mobile-bottom-item.active svg {
    stroke:
      #a97016;
  }


  /* =======================================================
     CARRITO CENTRAL
  ======================================================= */

  .mobile-cart-item {
    position: relative;
  }


  .mobile-cart-icon {
    position: relative;

    width: 38px;
    height: 38px;

    display: flex;

    align-items: center;
    justify-content: center;

    margin-top: -14px;

    border:
      1px solid
      rgba(185, 133, 47, .65);

    border-radius: 50%;

    background:
      #11100d;

    color:
      #d8ad55;

    box-shadow:
      0 5px 16px
      rgba(35, 25, 8, .22);
  }


  .mobile-cart-icon svg {
    width: 19px;
    height: 19px;

    fill: none;

    stroke: currentColor;

    stroke-width: 1.7;

    stroke-linecap: round;
    stroke-linejoin: round;
  }


  .mobile-cart-count {
    position: absolute;

    top: -4px;
    right: -5px;

    min-width: 17px;
    height: 17px;

    display: flex;

    align-items: center;
    justify-content: center;

    padding: 0 4px;

    border:
      2px solid #faf6ed;

    border-radius: 999px;

    background:
      #b9852f;

    color:
      #fff;

    font-size: 8px;
    font-weight: 800;

    line-height: 1;
  }


  .mobile-cart-item > span {
    margin-top: -1px;
  }

}