:root {
  --ink: #293b52;
  --cream: #f7fcff;
  --yellow: #91d0d5;
  --orange: #ef826c;
  --moss: #4a869d;
  --lilac: #d6eff1;
  --line: #293b52;
}

.card-imori { background: #91d0d5; }
.card-kajika { background: #c7e8e9; }
.card-yamori { background: #d9eff0; }
.card-tokage { background: #c9e6f4; }
.card-numatitibu { background: #b9dfe4; }
.card-other { background: #e3f3f4; }

.product-placeholder {
  display: grid;
  height: 295px;
  place-items: center;
  align-content: center;
  gap: 5px;
  background-image: radial-gradient(rgba(41, 59, 82, .19) 1px, transparent 1px);
  background-size: 13px 13px;
}

.product-placeholder span {
  display: grid;
  width: 84px;
  height: 84px;
  place-items: center;
  border: 2px dashed var(--ink);
  border-radius: 50%;
  font: 52px/1 var(--title);
  transform: rotate(-8deg);
}

.product-placeholder small { font-size: 10px; font-weight: 700; letter-spacing: .08em; }
.coming-item { font-size: 12px; font-weight: 700; }

.hero {
  background-image: radial-gradient(rgba(255, 255, 255, .52) 1px, transparent 1px);
}

.hero:after { background: #dff2f3; }
.shop-cta { background-color: #d6eff1; }

.contact { padding: 42px 0 54px; border-top: 1px solid rgba(41, 59, 82, .22); }

.contact-card {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  gap: 30px;
  align-items: center;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}

.contact-card h2 { font-size: clamp(21px, 2.1vw, 28px); }
.contact-card > div > p:not(.section-kicker) { margin: 9px 0 0; font-size: 12px; font-weight: 500; }
.contact-actions { display: flex; flex-wrap: wrap; gap: 15px; justify-content: flex-end; }
.contact-actions .button { gap: 7px; padding: 4px 0; border: 0; border-bottom: 1px solid currentColor; border-radius: 0; background: transparent; box-shadow: none; color: var(--ink); font-size: 12px; }
.contact-actions .button:hover { box-shadow: none; opacity: .6; transform: none; }
.contact-actions .button-light { background: transparent; }

.product-link {
  padding: 0;
  border: 0;
  border-bottom: 2px solid var(--ink);
  background: transparent;
  color: inherit;
  cursor: pointer;
  font: 700 12px var(--hand);
}

.nav-social { display: inline-flex; align-items: center; gap: 10px; font-size: 11px; letter-spacing: .04em; }
.nav-social a { border-bottom: 2px solid transparent; }
.nav-social a:hover { border-color: currentColor; }

.product-modal[hidden] { display: none; }
.product-modal { position: fixed; z-index: 30; inset: 0; display: grid; place-items: center; padding: 24px; }
.product-modal-backdrop { position: absolute; inset: 0; background: rgba(22, 43, 58, .62); }
.product-modal-panel { position: relative; z-index: 1; width: min(960px, 100%); max-height: min(720px, calc(100vh - 48px)); overflow: auto; padding: clamp(28px, 5vw, 54px); border: 3px solid var(--ink); border-radius: 22px; background: var(--cream); box-shadow: 9px 9px 0 var(--ink); }
.product-modal-panel h2 { padding-right:38px; font-size: clamp(26px, 3vw, 42px); }
.modal-close { position: absolute; top: 16px; right: 17px; display: grid; width: 38px; height: 38px; place-items: center; border: 2px solid var(--ink); border-radius: 50%; background: var(--yellow); color: var(--ink); cursor: pointer; font-size: 27px; line-height: 1; }
.modal-items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 28px 0 32px; }
.modal-item { min-width: 0; padding: 13px; border: 2px solid var(--ink); border-radius: 12px; background: #dff2f3; text-align: center; }
.modal-item img { display: block; width: 100%; height: 138px; object-fit: contain; }
.modal-item h3 { margin-top: 6px; font-size: 16px; }
.modal-item p { margin: 3px 0 0; font-size: 11px; font-weight: 600; line-height: 1.6; }
.modal-shop-link { display: flex; width: max-content; gap: 12px; align-items: center; margin-inline: auto; padding: 12px 15px; border: 2px solid var(--ink); border-radius: 6px; background: var(--yellow); box-shadow: 3px 3px 0 var(--ink); font-size: 12px; font-weight: 700; }
body.modal-open { overflow: hidden; }

@media (max-width: 760px) {
  .product-placeholder { height: 100%; min-height: 205px; }
  .contact { padding: 36px 0 44px; }
  .contact-card { grid-template-columns: 1fr; gap: 16px; border-radius: 0; }
  .contact-actions { justify-content: flex-start; }
  .product-modal { align-items: end; padding: 0; }
  .product-modal-panel { max-height: 86vh; padding: 27px 20px; border-radius: 20px 20px 0 0; }
  .modal-items { grid-template-columns: repeat(2, 1fr); }
  .modal-item img { height: 105px; }
  .site-nav .nav-social { gap: 15px; }
}