/* =====================================================
   DETAIL PAGE
===================================================== */

.detail-main {

  min-height:
    100vh;

  padding:
    145px
    0
    100px;

  background:
    linear-gradient(
      135deg,
      #f8fafc,
      #e8eef5
    );

}


.detail-container {

  width:
    min(
      1350px,
      92%
    );

  margin:
    auto;

  display:
    grid;

  grid-template-columns:
    minmax(0, 1.25fr)
    minmax(320px, .75fr);

  gap:
    clamp(
      35px,
      6vw,
      90px
    );

  align-items:
    center;

}


.detail-visual {

  min-width:
    0;

}


.detail-visual img {

  width:
    100%;

  max-height:
    780px;

  object-fit:
    contain;

  background:
    white;

  box-shadow:
    0 25px 65px
    rgba(
      20,
      35,
      60,
      .12
    );

}


.detail-category {

  color:
    #8095ad;

  font-size:
    11px;

  letter-spacing:
    .3em;

}


.detail-content h1 {

  margin:
    15px
    0
    10px;

  font-size:
    clamp(
      38px,
      5vw,
      75px
    );

  line-height:
    1.2;

}


.detail-meta {

  margin-bottom:
    35px;

  color:
    #7b8796;

  font-size:
    12px;

  letter-spacing:
    .16em;

}


.detail-body {

  margin-bottom:
    40px;

  font-size:
    16px;

  line-height:
    2;

}


.detail-subtitle {

  color:
    #8190a3;

  font-size:
    12px;

  letter-spacing:
    .18em;

}


.detail-price {

  display:
    block;

  margin-top:
    25px;

  font-size:
    25px;

}


/* NIGHT */

html[data-theme="night"]
.detail-main {

  color:
    #e7eef6;

  background:
    linear-gradient(
      135deg,
      #0d1728,
      #16243a
    );

}


html[data-theme="night"]
.detail-visual img {

  background:
    #101b2b;

}


/* MOBILE */

@media (
  max-width:
  850px
) {

  .detail-main {

    padding-top:
      110px;

  }


  .detail-container {

    grid-template-columns:
      1fr;

  }

}