/* Small additions on top of the compiled Tailwind stylesheet (styles.css).
   Mobile menu, product detail dialog, native <select> tweaks. */

.hm-mobile-menu {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.75rem 1rem 1rem;
  border-top: 1px solid var(--border);
}
.hm-mobile-menu[hidden] { display: none; }
.hm-mobile-menu a { display: block; }
.hm-mobile-menu .hm-mobile-cta { margin-top: 0.5rem; text-align: center; padding: 0.6rem 1rem; border-radius: 0.375rem; font-weight: 500; font-size: 0.875rem; }

.hm-select { appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa5b1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.6rem center; padding-right: 2rem; }
.hm-select option { color: #111; }

/* product dialog */
.hm-dialog-backdrop { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center;
  padding: 1rem; background: rgb(0 0 0 / 0.6); backdrop-filter: blur(2px); }
.hm-dialog-backdrop[hidden] { display: none; }
.hm-dialog { position: relative; width: 100%; max-width: 42rem; max-height: 90vh; overflow: auto;
  background: var(--card); color: var(--card-foreground); border: 1px solid var(--border);
  border-radius: 0.75rem; box-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.5); }
.hm-dialog img { width: 100%; height: 14rem; object-fit: cover; }
.hm-dialog-body { padding: 1.5rem; }
.hm-dialog-close { position: absolute; top: 0.75rem; right: 0.75rem; width: 2rem; height: 2rem; border-radius: 9999px;
  background: rgb(0 0 0 / 0.55); color: #fff; font-size: 1.25rem; line-height: 1; border: 0; cursor: pointer; }
.hm-dialog h2 { font-size: 1.25rem; font-weight: 700; margin: 0.5rem 0 0.25rem; }
.hm-dialog .hm-sub { font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 1rem; }
.hm-dialog p.hm-desc { font-size: 0.9rem; line-height: 1.7; }
.hm-dialog .hm-note { margin-top: 1rem; font-size: 0.75rem; color: var(--muted-foreground); }
.hm-dialog .hm-actions { margin-top: 1.25rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }
.hm-dialog .hm-actions a, .hm-dialog .hm-actions button { padding: 0.5rem 1rem; border-radius: 0.375rem; font-size: 0.875rem; font-weight: 500; cursor: pointer; border: 1px solid var(--border); }
.hm-dialog .hm-actions a.hm-primary { background: var(--accent); color: #fff; border-color: var(--accent); }
.hm-dialog .hm-badges { display: flex; gap: 0.5rem; align-items: center; font-size: 0.75rem; }

#form-status.ok { color: var(--accent); }
#form-status.err { color: var(--destructive); }