* { box-sizing: border-box; }

body {
  margin: 0;
  color: #27221f;
  background: #f2eee6 url('/views/img/wall.jpg') center / cover fixed;
  font-family: "Zen Old Mincho", serif;
  line-height: 1.8;
  overflow-wrap: anywhere;
}

a { color: #5d255e; }

.shop-page {
  width: min(100% - 2rem, 58rem);
  margin: 2rem auto;
  padding: clamp(1.25rem, 4vw, 3rem);
  background: rgb(255 253 248 / 94%);
  border: 1px solid #b6a99a;
  box-shadow: 0 .5rem 2rem rgb(42 27 19 / 25%);
}

.shop-header { border-bottom: 1px solid #b6a99a; margin-bottom: 2rem; }
.shop-header p { margin-top: 0; font-size: .9rem; }
h1, h2, h3 { font-family: "Kaisei Decol", serif; line-height: 1.45; }
h1 { margin: 0 0 1rem; font-size: clamp(2rem, 6vw, 3.3rem); }
h2 { border-bottom: 1px solid #b6a99a; padding-bottom: .35rem; margin-top: 2.5rem; }

.shop-notice { padding: 1rem 1.25rem; background: #f4efe5; border-left: .35rem solid #77566f; }
.shop-notice h2 { margin-top: 0; }
.product-list { display: grid; gap: 1.5rem; }
.product-card { display: grid; grid-template-columns: minmax(7rem, 12rem) 1fr; gap: 1.25rem; align-items: start; }
.product-card img { display: block; width: 100%; border: 1px solid #b6a99a; }
.product-card h3 { margin: 0; font-size: 1.35rem; }
.product-date { margin: .35rem 0; color: #655c55; font-size: .9rem; }
.detail-link, .button { display: inline-block; padding: .35rem .8rem; border: 1px solid currentColor; text-decoration: none; }
.detail-link:hover, .detail-link:focus { color: #fff; background: #5d255e; }

.product-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; }
.product-gallery a, .sample-gallery a { display: block; }
.product-gallery img { display: block; max-width: 100%; height: auto; border: 1px solid #b6a99a; }
.sample-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 1rem; margin-top: 1rem; }
.sample-gallery img { display: block; max-width: 100%; height: auto; border: 1px solid #b6a99a; }
.product-specification { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; border-top: 1px solid #d4c9be; }
.product-specification dt, .product-specification dd { margin: 0; padding: .55rem .75rem; border-bottom: 1px solid #d4c9be; }
.product-specification dt { background: #f4efe5; font-weight: bold; }
.product-description p { margin: 1rem 0; }
.purchase-links { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: .75rem; margin-top: 1.5rem; }
.button { color: #fff; background: #635bff; border: 0; border-radius: 4px; padding: .75rem 1.5rem; font-family: sans-serif; font-weight: bold; }
.shop-button { background: #5d255e; }
.back-link { margin-top: 3rem; }

@media (max-width: 36rem) {
  .shop-page { width: 100%; margin: 0; border: 0; }
  .product-card { grid-template-columns: 7rem 1fr; gap: .9rem; }
  .product-specification { grid-template-columns: 1fr; }
  .product-specification dt { padding-bottom: .1rem; }
  .product-specification dd { padding-top: .1rem; }
}