@font-face{
  font-family:Badger;
  src:url('/fonts/badger.woff2') format('woff2'),
      url('/fonts/badger.woff') format('woff');
  font-display:swap;
}

:root{
  --page:#d3daee;
  --heading:#6b78c8;
  --dark:#483650;
  --gold:#b19a66;
  --content:1500px;
}

*{box-sizing:border-box}

html{
  background:var(--page);
}

body{
  margin:0;
  color:#111;
  background:var(--page);
  font-family:Georgia,"Times New Roman",serif;
}

.site-header{
  min-height:190px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:26px 20px;
  background:var(--page);
}

.site-header img{
  display:block;
  width:min(520px,70vw);
  height:auto;
  mix-blend-mode:multiply;
}

.top-back-wrap{
  text-align:center;
  padding:0 0 16px;
}

.top-back{
  color:#fff;
  font-family:Badger,Georgia,serif;
  text-decoration:none;
  text-shadow:0 2px 5px rgba(0,0,0,.7);
}

main{
  width:min(var(--content),84vw);
  margin:0 auto;
  padding:25px 0 90px;
}

h1{
  margin:0 0 72px;
  text-align:center;
  color:var(--dark);
  font-family:Badger,Georgia,serif;
  font-size:clamp(2.4rem,5vw,4.2rem);
  font-weight:normal;
  text-transform:uppercase;
}

h2{
  margin:0;
  color:var(--heading);
  font-size:clamp(2rem,3.6vw,3.2rem);
  line-height:1.16;
  font-weight:normal;
}

h2 span{
  font-size:.78em;
}

.price{
  margin:8px 0 28px;
  color:var(--heading);
  font-size:clamp(1.65rem,3vw,2.65rem);
}

p,li{
  font-size:clamp(1rem,1.65vw,1.35rem);
  line-height:1.48;
}

p{
  margin:0 0 34px;
}

ul{
  padding-left:2rem;
  margin:26px 0 54px;
}

li{
  margin-bottom:9px;
}

.buy-button,
.bottom-back{
  display:inline-block;
  padding:.78rem 1.2rem;
  border-radius:10px;
  color:#fff;
  background:var(--gold);
  text-decoration:none;
  font-size:clamp(1.05rem,2vw,1.45rem);
  box-shadow:0 8px 19px rgba(0,0,0,.2);
}

.hero-product{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(280px,.75fr);
  align-items:start;
  gap:58px;
  margin-bottom:58px;
}

.product-visual img{
  display:block;
  width:100%;
  height:auto;
}

.product-summary{
  padding-top:10px;
}

.details,
.text-product{
  margin-bottom:72px;
}

.text-product>div{
  margin-bottom:48px;
}

.wide-image{
  display:block;
  width:100%;
  height:auto;
  margin:42px auto 0;
}

a{
  overflow-wrap:anywhere;
}

.divider{
  display:block;
  width:min(100%,1200px);
  height:auto;
  margin:55px auto 20px;
}

.bottom-back-wrap{
  text-align:center;
  margin:45px 0 0;
}

footer{
  min-height:520px;
  display:flex;
  align-items:flex-end;
  justify-content:center;
  padding:0 20px 28px;
  color:#fff;
  text-align:center;
  background:
    linear-gradient(to bottom,var(--page) 0%,rgba(211,218,238,.25) 24%,rgba(211,218,238,0) 55%),
    url("assets/footer-snow.jpg") center bottom/cover no-repeat;
}

footer p{
  margin:0;
  font-size:.85rem;
  text-shadow:0 1px 3px rgba(0,0,0,.6);
}

footer a{
  color:inherit;
}

@media(max-width:850px){
  .site-header{
    min-height:135px;
  }

  main{
    width:min(92vw,720px);
    padding-top:18px;
  }

  h1{
    margin-bottom:46px;
  }

  .hero-product{
    grid-template-columns:1fr;
    gap:28px;
  }

  .product-summary{
    text-align:center;
  }

  .text-product>div{
    margin-bottom:34px;
  }

  ul{
    padding-left:1.35rem;
  }

  footer{
    min-height:330px;
  }
}

@media(max-width:480px){
  .site-header img{
    width:min(330px,86vw);
  }

  h1{
    font-size:2.2rem;
  }

  h2{
    font-size:1.75rem;
  }

  .buy-button,
  .bottom-back{
    width:min(100%,260px);
    text-align:center;
  }
}