.shop-intro {
  padding:48px 0 24px
}

.shop-intro h1 {
  margin-top:0
}

.shop-intro .lede {
  max-width:560px;
  margin-bottom:8px
}

.shop-nav {
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  padding:0 0 24px
}

.shop-nav a {
  border:1px solid #353535;
  border-radius:30px;
  padding:9px 20px;
  font-size:13px;
  min-height:44px
}

.shop-nav a:hover {
  border-color:var(--green);
  text-decoration:none
}

.catalog-grid {
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px
}

.catalog-card {
  display:flex;
  flex-direction:column;
  background:#121212;
  border:1px solid #262626;
  min-width:0
}

.catalog-image {
  height:270px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:24px;
  position:relative;
  background:#181818
}

.catalog-image img {
  max-height:100%;
  max-width:100%;
  object-fit:contain
}

.image-status {
  position:absolute;
  top:12px;
  left:12px;
  background:#111
}

.catalog-copy {
  padding:24px;
  display:flex;
  flex-direction:column;
  flex:1;
  align-items:start;
  width:100%
}

.catalog-copy .eyebrow {
  font-size:12px;
  letter-spacing:.12em
}

.catalog-copy h3 {
  font-size:25px;
  line-height:1.15
}

.description {
  font-size:14px;
  color:#b7b7b3;
  margin:16px 0
}

.price {
  font-size:24px;
  font-weight:700;
  margin:4px 0 8px;
  letter-spacing:-.02em
}

.shipping {
  font-size:12px;
  color:#999;
  line-height:1.6;
  margin:0 0 18px
}

.purchase {
  margin-top:auto;
  width:100%;
  padding-top:12px;
  display:grid;
  gap:8px
}

form {
  display:flex;
  flex-direction:column;
  gap:10px;
  width:100%;
  margin:0
}

input[type=submit] {
  cursor:pointer;
  border:0;
  font-family:inherit;
  white-space:normal;
  width:100%;
  text-align:center;
  justify-content:center
}

select {
  width:100%;
  min-height:46px;
  background:#242424;
  border:1px solid #555;
  color:#eee;
  font-size:16px;
  padding:10px;
  border-radius:3px
}

select:focus-visible,input:focus-visible,summary:focus-visible {
  outline:2px solid var(--green);
  outline-offset:4px
}

.two-col {
  grid-template-columns:repeat(2,minmax(0,1fr))
}

.two-col .catalog-image {
  height:320px
}

.two-col .catalog-copy {
  padding:28px
}

.two-col .purchase {
  max-width:320px
}

details {
  font-size:12px;
  color:#aaa;
  width:100%;
  margin-bottom:14px
}

summary {
  color:var(--green);
  cursor:pointer;
  padding:8px 0;
  min-height:40px
}

details p {
  padding:4px 0 10px
}

.vip-panel {
  display:grid;
  grid-template-columns:1.6fr 1fr;
  gap:48px;
  background:#161b12;
  border:1px solid #344322;
  padding:36px
}

.vip-panel h3 {
  font-size:30px;
  margin-bottom:18px
}

.vip-panel p,.vip-panel li {
  color:#c0c5ba;
  font-size:14px
}

.vip-panel ul {
  padding-left:20px;
  line-height:1.9
}

.vip-buy {
  align-self:center
}

.vip-buy .price {
  font-size:36px;
  color:var(--green)
}

.vip-buy .price span {
  font-size:13px;
  font-weight:400;
  color:#aaa
}

.vip-buy .shipping {
  font-size:12px;
  margin:12px 0 20px
}

@media(max-width:900px) {
  .catalog-grid {
    grid-template-columns:repeat(2,minmax(0,1fr))
  }

  .vip-panel {
    gap:24px;
    padding:24px
  }

}

@media(max-width:600px) {
  .shop-intro {
    padding:32px 0 20px
  }

  .shop-intro h1 {
    font-size:42px
  }

  .catalog-grid {
    grid-template-columns:1fr
  }

  .catalog-image,.two-col .catalog-image {
    height:290px
  }

  .catalog-copy,.two-col .catalog-copy {
    padding:24px
  }

  .two-col .purchase {
    max-width:none
  }

  .vip-panel {
    grid-template-columns:1fr
  }

  .shop-nav {
    gap:8px
  }

  .shop-nav a {
    padding:9px 16px
  }

  .catalog-copy .description {
    max-width:40ch
  }

}