.mm-pillgrid-wrap { font: 14px/1.4 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; max-width: 100%; }

/* ── Filter bar ─────────────────────────────────────────────────────────── */
.mm-pillgrid-filterbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; padding: 12px 0; margin: 0 0 16px; border-bottom: 1px solid #e4e4e7; }
.mm-fset { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; }
.mm-fset-search { flex: 1 1 220px; min-width: 200px; display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-left: auto; }
.mm-fchip { padding: 5px 11px; border-radius: 999px; border: 1px solid #d4d4d8; background: #fff; color: #3f3f46; font-size: 12px; font-weight: 500; cursor: pointer; line-height: 1; transition: background .12s, color .12s, border-color .12s; }
.mm-fchip:hover { background: #f4f4f5; }
.mm-fchip.is-active { background: #18181b; color: #fff; border-color: #18181b; }
.mm-pillgrid-search { flex: 1; padding: 7px 12px; border: 1px solid #d4d4d8; border-radius: 8px; font-size: 13px; min-width: 0; }
.mm-pillgrid-search:focus { outline: 2px solid #2563eb; outline-offset: 1px; }
.mm-pillgrid-count { font-size: 12px; color: #71717a; white-space: nowrap; }

/* ── Pill grid ──────────────────────────────────────────────────────────── */
.mm-pillgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.mm-pill { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 12px 14px; border-radius: 12px; border: 1px solid #e4e4e7; background: #fff; text-align: left; cursor: pointer; transition: border-color .15s, transform .1s, box-shadow .15s; font-family: inherit; font-size: 13px; color: #18181b; min-height: 78px; position: relative; }
.mm-pill:hover { border-color: #18181b; transform: translateY(-1px); box-shadow: 0 3px 12px rgba(0,0,0,.08); }
.mm-pill.is-stock   { background: linear-gradient(180deg, #fff 0%, #f0fdf4 100%); border-color: #bbf7d0; }
.mm-pill.is-stock:hover { border-color: #16a34a; }
.mm-pill.is-inquire { background: #fafafa; }

.mm-pill-row1 { display: flex; align-items: center; gap: 6px; width: 100%; }
.mm-pill-dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; flex-shrink: 0; }
.mm-pill-dot.mm-dot--stock   { background: #16a34a; box-shadow: 0 0 0 3px rgba(22,163,74,.18); }
.mm-pill-dot.mm-dot--inquire { background: #a1a1aa; }
.mm-pill-anumber { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #52525b; font-weight: 600; letter-spacing: .02em; }
.mm-pill-price { margin-left: auto; font-weight: 700; color: #15803d; font-size: 13px; white-space: nowrap; }
.mm-pill-chat  { margin-left: auto; font-size: 14px; }
.mm-pill-name  { font-weight: 600; font-size: 13px; color: #18181b; line-height: 1.25; }
.mm-pill-year  { color: #71717a; font-size: 11px; }
.mm-pill-activity { color: #c2410c; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-top: 2px; padding: 2px 6px; border-radius: 4px; background: #fff7ed; align-self: flex-start; }

/* When the pill is filtered out by JS */
.mm-pill[hidden] { display: none !important; }

/* ── Sheet (modal drawer) ───────────────────────────────────────────────── */
dialog.mm-sheet { padding: 0; border: none; border-radius: 16px; max-width: 480px; width: 90vw; max-height: 90vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.3); background: #fff; }
dialog.mm-sheet::backdrop { background: rgba(24,24,27,.55); backdrop-filter: blur(2px); }
.mm-sheet-close { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border-radius: 50%; border: none; background: #f4f4f5; color: #52525b; font-size: 22px; line-height: 1; cursor: pointer; }
.mm-sheet-close:hover { background: #e4e4e7; }
.mm-sheet-head { padding: 22px 22px 16px; border-bottom: 1px solid #f4f4f5; }
.mm-sheet-eyebrow { font-size: 11px; color: #71717a; text-transform: uppercase; letter-spacing: .06em; font-weight: 600; }
.mm-sheet-title { margin: 4px 0 0; font-size: 18px; color: #18181b; line-height: 1.3; padding-right: 32px; }
.mm-sheet-sub  { margin: 4px 0 0; font-size: 13px; color: #71717a; }
.mm-sheet-h   { margin: 0 0 10px; font-size: 13px; color: #18181b; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; }

.mm-sheet-products { padding: 16px 22px; border-bottom: 1px solid #f4f4f5; }
.mm-sheet-product-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.mm-sheet-product-list li { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 12px; border: 1px solid #e4e4e7; border-radius: 8px; }
.mm-sheet-product-name { font-size: 13px; color: #18181b; line-height: 1.3; }
.mm-sheet-product-price { font-weight: 700; color: #15803d; white-space: nowrap; }

.mm-sheet-inquiry { padding: 16px 22px; }
.mm-sheet-form { display: flex; flex-direction: column; gap: 10px; }
.mm-sheet-form label { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: #52525b; font-weight: 500; }
.mm-sheet-form label small { color: #a1a1aa; font-weight: 400; }
.mm-sheet-form input, .mm-sheet-form textarea { padding: 9px 12px; border: 1px solid #d4d4d8; border-radius: 8px; font-size: 14px; font-family: inherit; color: #18181b; }
.mm-sheet-form input:focus, .mm-sheet-form textarea:focus { outline: 2px solid #2563eb; outline-offset: 1px; border-color: transparent; }
.mm-sheet-form textarea { resize: vertical; min-height: 50px; }
.mm-sheet-promise { font-size: 11px; color: #71717a; margin: 4px 0 0; }
.mm-sheet-success { padding: 14px; border-radius: 8px; background: #f0fdf4; color: #15803d; font-size: 14px; }

.mm-sheet-alt { padding: 16px 22px 22px; border-top: 1px solid #f4f4f5; background: #fafafa; border-radius: 0 0 16px 16px; }
.mm-sheet-alt-label { font-size: 12px; color: #52525b; margin: 0 0 8px; }
.mm-sheet-alt-buttons { display: flex; gap: 8px; flex-wrap: wrap; }

.mm-btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 16px; border-radius: 8px; font-weight: 600; font-size: 13px; text-decoration: none; cursor: pointer; border: none; line-height: 1.2; font-family: inherit; transition: opacity .12s; }
.mm-btn:hover { opacity: .9; }
.mm-btn-primary  { background: #18181b; color: #fff; width: 100%; padding: 12px 16px; font-size: 14px; }
.mm-btn-whatsapp { background: #25d366; color: #fff; flex: 1; }
.mm-btn-tel      { background: #2563eb; color: #fff; flex: 1; }

/* ── Mobile ─────────────────────────────────────────────────────────────── */
@media (max-width: 640px) {
  .mm-pillgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
  .mm-pillgrid-filterbar { gap: 8px; }
  .mm-fset { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .mm-fset::-webkit-scrollbar { display: none; }
  .mm-fset-search { width: 100%; margin-left: 0; }
  dialog.mm-sheet { width: 100vw; max-width: 100vw; max-height: 100vh; border-radius: 16px 16px 0 0; margin: auto auto 0; position: fixed; bottom: 0; left: 0; right: 0; top: auto; transform: none; }
}