/* ==========================================================================
   mutoumise — overlay layer (cart drawer, search, newsletter popup, consent)
   Ported from design/overlays/*.html. Tokens and the drawer-in/fade/panel-in
   keyframes come from base.css. Layering: consent 50 < drawer 70 < popup 80.
   ========================================================================== */

/* [hidden] must win over the display rules below */
.drawer[hidden],
.search-overlay[hidden],
.nl[hidden],
.consent[hidden],
.scrim[hidden] { display: none !important; }

/* ==========================================================================
   cart drawer
   ========================================================================== */

.drawer-scrim { z-index: 69; }

.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 70;
  width: min(420px, 92vw);
  background: var(--washi);
  box-shadow: -24px 0 60px oklch(20% 0.02 60 / 18%);
  display: flex; flex-direction: column;
  animation: drawer-in 480ms var(--ease-out) 60ms backwards;
}
.drawer__head { display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-6) var(--sp-6) var(--sp-4); border-bottom: var(--hairline); }
.drawer__body { flex: 1; overflow-y: auto; padding: var(--sp-6); }
.drawer__foot { border-top: var(--hairline); padding: var(--sp-6); }

.drawer-title { display: flex; align-items: baseline; gap: var(--sp-4); }
.drawer-title h2 { font-size: var(--text-xl); }
.drawer__close { font-size: var(--text-xl); font-weight: 300; line-height: 1;
  color: var(--sumi-soft); }

.drawer-note { font-size: var(--text-sm); color: var(--sumi-soft); }

.foot-sub { display: flex; justify-content: space-between; align-items: baseline; }
.foot-sub > span:first-child { font-size: var(--text-sm); color: var(--sumi-soft); }
.foot-ship { display: block; margin-top: var(--sp-1); }
.drawer__foot .btn--primary { margin-top: var(--sp-6); }
.foot-view { text-align: center; margin-top: var(--sp-4); }

/* ==========================================================================
   search overlay — full washi sheet
   ========================================================================== */

.search-overlay {
  position: fixed; inset: 0; z-index: 70;
  background: var(--washi);
  display: flex; flex-direction: column;
  overflow-y: auto;
  animation: fade 360ms var(--ease-out) backwards;
}
.search-top { border-bottom: var(--hairline); flex: none; }
.search-top__inner {
  max-width: var(--container); margin-inline: auto; width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--sp-4) var(--sp-8);
}
.search-main { flex: 1; width: 100%; }
.search-col { max-width: 760px; margin-inline: auto;
  padding: var(--sp-28) var(--sp-8) var(--sp-16); }

.search-overlay .search-input {
  width: 100%;
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: 0.01em;
  color: var(--sumi);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--sumi);
  border-radius: 0;
  padding: 0 0 var(--sp-4);
}
.search-overlay .search-input:focus { outline: none; }
.search-overlay .search-input::placeholder { color: var(--sumi-faint); }

.search-popular { margin-top: var(--sp-6); }
.search-popular .sep { color: var(--washi-line); margin-inline: var(--sp-2); }
.search-popular a { transition: color var(--dur) var(--ease-out); }
.search-popular a:hover { color: var(--sumi); }

.search-esc { position: absolute; right: var(--sp-8); bottom: var(--sp-8); }
.search-esc kbd {
  font: inherit;
  border: var(--hairline);
  border-radius: var(--radius);
  padding: 2px 8px;
  margin-right: var(--sp-2);
}

/* ==========================================================================
   newsletter popup
   ========================================================================== */

.nl { position: fixed; inset: 0; z-index: 80; }
.nl .scrim { position: absolute; inset: 0; }
.nl .modal { position: absolute; inset: 0;
  display: grid; place-items: center; padding: var(--sp-8); }

.modal__panel {
  background: var(--washi);
  border-radius: var(--radius);
  box-shadow: 0 32px 80px oklch(20% 0.02 60 / 22%);
  width: 100%; max-height: 90vh; overflow: auto;
  animation: panel-in 440ms var(--ease-out) 120ms backwards;
}
.nl-panel { max-width: 560px; position: relative; padding: var(--sp-8); }
.nl-close { position: absolute; top: var(--sp-4); right: var(--sp-4); }
.nl-panel h2 { font-size: var(--text-2xl); margin-top: var(--sp-6); }
.nl-panel > p { color: var(--sumi-soft); margin-top: var(--sp-3); max-width: 26rem; }
.nl-dismiss { margin-top: var(--sp-8); color: var(--sumi-faint);
  border-bottom-color: var(--sumi-faint); }

/* MailPoet form, calmed to the shop voice */
.nl-form { margin-top: var(--sp-8); }
.nl-form .mailpoet_form { display: grid; gap: var(--sp-4); }
.nl-form .mailpoet_paragraph { margin: 0; }
.nl-form .mailpoet_text { width: 100%; }
.nl-form input[type="submit"],
.nl-form .mailpoet_submit {
  display: inline-flex; align-items: center; justify-content: center;
  width: auto;
  padding: 0.55rem 1.4rem;
  font: inherit; font-size: var(--text-xs); font-weight: 500;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--washi); background: var(--walnut);
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease-out);
}
.nl-form input[type="submit"]:hover,
.nl-form .mailpoet_submit:hover { background: var(--sumi); }
.nl-form .mailpoet_validate_success { font-size: var(--text-sm); color: var(--sumi); }
.nl-form .mailpoet_validate_error { font-size: var(--text-xs); color: var(--shu);
  letter-spacing: 0.04em; }

/* ==========================================================================
   consent bar
   ========================================================================== */

.consent {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--washi);
  border-top: var(--hairline);
  box-shadow: 0 -16px 40px oklch(20% 0.02 60 / 18%);
  animation: rise 600ms var(--ease-out) backwards;
}
.consent__inner {
  max-width: var(--container); margin-inline: auto;
  padding: var(--sp-4) var(--sp-8);
  display: flex; align-items: center; gap: var(--sp-8);
}
.consent__text { font-size: var(--text-sm); color: var(--sumi-soft); letter-spacing: 0.01em; }
.consent__actions {
  margin-left: auto; flex: none;
  display: flex; align-items: center; gap: var(--sp-6);
}

/* ==========================================================================
   responsive
   ========================================================================== */

@media (max-width: 960px) {
  .search-top__inner { padding: var(--sp-4); }
  .search-col { padding: var(--sp-16) var(--sp-4) var(--sp-12); }
  .search-esc { display: none; }

  .consent__inner { padding: var(--sp-4); gap: var(--sp-4); }
}

@media (max-width: 560px) {
  .drawer__head { padding: var(--sp-4) var(--sp-4) var(--sp-3); }
  .drawer__body { padding: var(--sp-4); }
  .drawer__foot { padding: var(--sp-4); }

  .nl .modal { padding: var(--sp-4); }
  .nl-panel { padding: var(--sp-8) var(--sp-6) var(--sp-6); }

  .consent__inner { flex-wrap: wrap; }
  .consent__actions { margin-left: 0; width: 100%; gap: var(--sp-3); }
  .consent__actions .btn { flex: 1; }
}