.brand-logo {
  width: 42px;
  height: 42px;
  display: block;
  object-fit: contain;
  border-radius: 5px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.store-brand-icon {
  width: 25px;
  height: 25px;
  flex: 0 0 25px;
  filter: invert(1);
}

.contact-modal {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-items: center;
  padding: 20px;
  visibility: hidden;
  opacity: 0;
  transition: opacity .25s ease, visibility .25s ease;
}

.contact-modal.show { visibility: visible; opacity: 1; }
.contact-modal-backdrop { position: absolute; inset: 0; background: rgba(3, 12, 11, .76); backdrop-filter: blur(5px); }
.contact-modal-card { position: relative; width: min(390px, 100%); padding: 34px 34px 30px; background: #fff; color: var(--ink); text-align: center; box-shadow: 0 30px 80px rgba(0,0,0,.35); }
.contact-modal-card h2 { margin: 10px 0 8px; font-size: 26px; }
.contact-modal-card p { margin: 0 0 20px; color: var(--muted); font-size: 13px; }
.contact-modal-card img { display: block; width: min(280px, 100%); margin: 0 auto 16px; }
.contact-modal-card strong, .contact-modal-card small { display: block; }
.contact-modal-card strong { font-size: 14px; }
.contact-modal-card small { margin-top: 7px; color: var(--muted); font-size: 11px; }
.contact-modal-close { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; display: grid; place-items: center; border: 0; background: #edf3f0; color: var(--ink); cursor: pointer; }
.contact-modal-close:hover { background: var(--green); }

.mini-program-box { align-items: center; }
.mini-program-code { display: block; width: 300px; height: auto; }

@media (max-width: 600px) {
  .mini-program-box { flex-direction: column; }
  .mini-program-code { width: 100%; }
}

@media (max-width: 600px) {
  .brand-logo {
    width: 38px;
    height: 38px;
  }
}