/* ====== PAGINA PRODUCTO (BIRR/SITO/MATXU) ====== */
.productPage{
  max-width: 1200px;
  margin: 0 auto;
  padding: 44px 22px 90px;
}

.productGrid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 34px;
  align-items: start;
}

/* Izquierda */
.productName{
  margin: 0 0 18px;
  font-family: 'AwesomeLatusca', Georgia, serif;
  letter-spacing: .06em;
  font-size: clamp(44px, 6vw, 86px);
  color: #111;
}

.productImg{
  width: 100%;
  height: auto;
  display: block;
  box-shadow: 0 12px 30px rgba(0,0,0,.10);
}

/* Derecha */
.productTopImgs{
  display: grid;
  grid-template-columns: 1fr;
  gap: 22px;
}

.productColors{
  margin-top: 26px;
}

.productColors__title{
  margin: 0 0 16px;
  font-family: 'lora', Georgia, serif;
  font-size: clamp(26px, 2.6vw, 44px);
  font-weight: 400;
  color: #111;
}

/* Circulitos */
.swatches{
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  align-items: center;
}

.swatch{
  width: 54px;
  height: 54px;
  border-radius: 999px;
  background: var(--c);
  border: 1px solid rgba(0,0,0,.12);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}

/* Desktop para que quede como la captura */
@media (min-width: 900px){
  .productGrid{
    grid-template-columns: 1fr 1.15fr;
    gap: 46px;
  }

  .productTopImgs{
    grid-template-columns: 1.4fr .9fr; /* una ancha + una cuadrada */
    align-items: start;
  }

  .productImg--wide{
    aspect-ratio: 16 / 9;
    object-fit: cover;
  }

  .productImg--square{
    aspect-ratio: 1 / 1;
    object-fit: cover;
  }

  .productImg--big{
    max-width: 520px; /* para que se parezca al tamaño de la captura */
  }
}


.productImg--big{
  max-width: 520px;
  aspect-ratio: 4 / 5;
  object-fit: cover;
}


@media (min-width: 900px){
  .productName{
    position: relative;
    padding-bottom: 10px;
  }
  .productName::after{
    content:"";
    display:block;
    width: 320px;
    height: 2px;
    background: rgba(0,0,0,.18);
    margin-top: 14px;
  }
}


/* ====== NUEVO DISEÑO DESKTOP: galeria en columna ====== */

@media (min-width: 900px){

  .productPage{
    max-width: 900px;
    margin: 0 auto;
    padding: 44px 22px 90px;
  }

  .productGrid{
    display: grid;
    grid-template-columns: 1.1fr 0.9fr; /* izquierda mas ancha */
    gap: 56px;
    align-items: start;
  }

  /* Izquierda: titulo + foto grande */
  .productLeft{
    display: grid;
    grid-template-rows: auto auto;
    row-gap: 18px;
  }

  .productName{
    margin: 0;
    font-family: 'AwesomeLatusca', Georgia, serif;
    letter-spacing: .06em;
    font-size: clamp(52px, 6vw, 92px);
    color: #111;
  }

  .productImg--big{
    width: 100%;
    max-width: 620px;      /* un pelin mas grande, se ve mas “premium” */
    height: auto;
    object-fit: cover;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
  }

  /* Derecha: columna vertical */
  .productRight{
    display: grid;
    grid-template-rows: auto auto auto; /* img1, img2, colores */
    gap: 22px;
    align-content: start;
  }

  /* en vez de 2 columnas, lo ponemos en 1 columna */
  .productTopImgs{
    display: grid;
    grid-template-columns: 1fr;
    gap: 22px;
    align-items: start;
  }

  /* Ambas fotos con el mismo ancho y un ratio bonito */
  .productImg--wide,
  .productImg--square{
    width: 100%;
    aspect-ratio: 4 / 3;   /* queda editorial y consistente */
    object-fit: cover;
    box-shadow: 0 12px 30px rgba(0,0,0,.10);
  }

  /* Colores */
  .productColors{
    margin-top: 10px;
  }

  .productColors__title{
    margin: 0 0 14px;
    font-family: 'lora', Georgia, serif;
    font-size: clamp(26px, 2.4vw, 40px);
    font-weight: 400;
    color: #111;
  }

  .swatch{
    width: 54px;
    height: 54px;
  }
}