/* Miss Merylin nav (round 3): cart drawer, search empty state + desktop search panel, no-results page.
   Design tokens: assets/app/ds/mm-editorial.css (docs/DESIGN-MM.md). Sharp corners, ink = active, 44px targets. */

/* ── Cart drawer ──────────────────────────────────────────────────────────── */
.mm-dr { position: fixed; inset: 0; z-index: 100000; }
.mm-dr[hidden] { display: none; }
.mm-dr__scrim { position: absolute; inset: 0; background: var(--mm-scrim, rgb(17 17 17 / .45)); opacity: 0; transition: opacity 280ms var(--mm-ease-out, ease); }
.mm-dr__panel { position: absolute; top: 0; right: 0; bottom: 0; display: flex; flex-direction: column; width: min(440px, 100%); background: var(--mm-paper, #fff); color: var(--mm-ink, #111); box-shadow: -12px 0 40px -18px rgb(0 0 0 / .35); transform: translate3d(100%, 0, 0); transition: transform 320ms cubic-bezier(.32,.72,0,1); outline: 0; padding-top: env(safe-area-inset-top, 0px); }
.mm-dr.is-open .mm-dr__scrim { opacity: 1; }
.mm-dr.is-open .mm-dr__panel { transform: none; }
@media (prefers-reduced-motion: reduce) { .mm-dr__scrim, .mm-dr__panel { transition: none; } }

.mm-dr__head { display: flex; align-items: center; gap: var(--mm-s-2); min-height: 60px; padding: 0 var(--mm-s-2) 0 var(--mm-s-4); border-bottom: 1px solid var(--mm-hair, #e4e0da); }
.mm-dr__h { margin: 0; font: 500 var(--mm-t-label, 11px)/1 var(--mm-font, inherit); letter-spacing: var(--mm-track, .1em); text-transform: uppercase; }
.mm-dr__count { font: 400 var(--mm-t-meta, 13px)/1 var(--mm-font, inherit); color: var(--mm-ink-2, #5f5f5f); }
.mm-dr__x { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: auto; padding: 0; border: 0; border-radius: 0; background: none; color: var(--mm-ink, #111); cursor: pointer; }
.mm-dr__x:focus-visible, .mm-dr__panel :is(a, button):focus-visible { outline: 2px solid var(--mm-ink, #111); outline-offset: 2px; }
.mm-dr__added { margin: 0; padding: var(--mm-s-3) var(--mm-s-4); background: var(--mm-sand, #f4f1ec); font: 500 var(--mm-t-meta, 13px)/1.3 var(--mm-font, inherit); }
.mm-dr__added::before { content: ""; display: inline-block; width: 10px; height: 6px; margin: 0 var(--mm-s-2) 3px 0; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }
.mm-dr__added[hidden] { display: none; }

.mm-dr__body { flex: 1 1 auto; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 0 var(--mm-s-4); }
.mm-dr__list { margin: 0; padding: 0; list-style: none; transition: opacity 160ms ease; }
.mm-dr__item { display: grid; grid-template-columns: 72px 1fr; gap: var(--mm-s-3); padding: var(--mm-s-4) 0; border-bottom: 1px solid var(--mm-hair, #e4e0da); }
.mm-dr__item.is-updating { opacity: .45; pointer-events: none; }
.mm-dr__img { display: block; width: 72px; aspect-ratio: 3 / 4; background: var(--mm-sand, #f4f1ec); overflow: hidden; }
.mm-dr__img img { display: block; width: 100%; height: 100%; object-fit: cover; }
.mm-dr__meta { display: flex; flex-direction: column; gap: var(--mm-s-1); min-width: 0; }
.mm-dr__name { color: var(--mm-ink, #111) !important; text-decoration: none !important; font: 400 var(--mm-t-name, 13px)/1.4 var(--mm-font, inherit); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mm-dr__var { margin: 0; font: 400 var(--mm-t-small, 12px)/1.3 var(--mm-font, inherit); color: var(--mm-ink-2, #5f5f5f); }
.mm-dr__row { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-s-3); margin-top: var(--mm-s-2); }
.mm-dr__price { font: 500 var(--mm-t-price, 14px)/1 var(--mm-font, inherit); font-variant-numeric: tabular-nums; }
.mm-dr__rm { align-self: flex-start; min-height: 44px; margin: 0 0 calc(-1 * var(--mm-s-3)); padding: 0; border: 0; background: none; color: var(--mm-ink-2, #5f5f5f); font: 400 var(--mm-t-small, 12px)/1 var(--mm-font, inherit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }

.mm-qty { display: inline-flex; align-items: center; border: 1px solid var(--mm-ink, #111); }
.mm-qty__b { width: 44px; height: 44px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--mm-ink, #111); font: 400 18px/1 var(--mm-font, inherit); cursor: pointer; touch-action: manipulation; transition: background-color var(--mm-press, 120ms) var(--mm-ease-out, ease), transform var(--mm-press, 120ms) var(--mm-ease-out, ease); }
.mm-qty__b:active:not(:disabled) { background: var(--mm-sand, #f4f1ec); transform: scale(.94); }
.mm-qty__b:disabled { color: var(--mm-hair, #e4e0da); cursor: default; }
.mm-qty__v { min-width: 28px; text-align: center; font: 500 var(--mm-t-meta, 13px)/1 var(--mm-font, inherit); font-variant-numeric: tabular-nums; outline: 0; }

.mm-dr__item--skel { align-items: center; }
.mm-dr__sk-img { display: block; width: 72px; height: 96px; border-radius: 0; }
.mm-dr__sk-meta { display: flex; flex-direction: column; gap: var(--mm-s-2); }
.mm-dr__sk-l { display: block; width: 80%; height: 13px; border-radius: 0; }
.mm-dr__sk-s { display: block; width: 40%; height: 12px; border-radius: 0; }

.mm-dr__empty { padding: var(--mm-s-7) 0; text-align: center; }
.mm-dr__empty-t { margin: 0 0 var(--mm-s-5); font: 400 var(--mm-t-body, 15px)/1.5 var(--mm-font, inherit); }

.mm-dr__goes { padding: var(--mm-s-5) 0 var(--mm-s-4); }
.mm-dr__goes[hidden] { display: none; }
.mm-dr__goes-h { margin: 0 0 var(--mm-s-3); font: 500 var(--mm-t-label, 11px)/1 var(--mm-font, inherit); letter-spacing: var(--mm-track, .1em); text-transform: uppercase; }
.mm-dr .mm-dr__goes-list { margin: 0 calc(-1 * var(--mm-s-4)) !important; padding: 0 var(--mm-s-4) var(--mm-s-1) !important; overflow-x: auto; }
.mm-dr .mm-dr__goes-list > .mm-mini { flex: 0 0 38%; max-width: 38%; }
.mm-dr .mm-mini__img, .mm-dr .mm-mini__add { border-radius: 0; }

.mm-dr__foot { padding: var(--mm-s-4) var(--mm-s-4) calc(var(--mm-s-4) + env(safe-area-inset-bottom, 0px)); border-top: 1px solid var(--mm-hair, #e4e0da); background: var(--mm-paper, #fff); }
.mm-dr__foot[hidden] { display: none; }
.mm-dr__sub { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 var(--mm-s-2); font: 400 var(--mm-t-ui, 14px)/1.3 var(--mm-font, inherit); }
.mm-dr__sub strong { font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; }
.mm-dr__note { margin: 0 0 var(--mm-s-4); font: 400 var(--mm-t-small, 12px)/1.5 var(--mm-font, inherit); color: var(--mm-ink-2, #5f5f5f); }
.mm-dr__note[hidden] { display: none; }
.mm-dr__go, .mm-dr__empty-go { display: flex; align-items: center; justify-content: center; min-height: var(--mm-control-h, 52px); padding: 0 var(--mm-s-5); border-radius: 0; background: var(--mm-ink, #111); color: var(--mm-paper, #fff) !important; text-decoration: none !important; font: 500 var(--mm-t-meta, 13px)/1 var(--mm-font, inherit); letter-spacing: var(--mm-track, .1em); text-transform: uppercase; box-shadow: var(--mm-btn-depth, 0 3px 0 0 rgb(0 0 0 / .3)); transition: transform var(--mm-press, 120ms) var(--mm-ease-out, ease), box-shadow var(--mm-press, 120ms) var(--mm-ease-out, ease); }
.mm-dr__empty-go { display: inline-flex; }
.mm-dr__go:active, .mm-dr__empty-go:active { transform: translateY(2px); box-shadow: var(--mm-btn-depth-press, 0 1px 0 0 rgb(0 0 0 / .3)); }
.mm-dr__bag { display: flex; align-items: center; justify-content: center; min-height: 44px; margin-top: var(--mm-s-2); color: var(--mm-ink, #111) !important; font: 400 var(--mm-t-meta, 13px)/1 var(--mm-font, inherit); text-decoration: underline !important; text-underline-offset: 3px; }
.mm-dr.is-busy .mm-dr__go { opacity: .6; pointer-events: none; }
body.mm-dr-open .mm-wa, body.mm-dr-open .mm-sticky-atc { visibility: hidden; }

/* ── Search: trending + recent chips (empty box) ──────────────────────────── */
.mm-trendgrp { padding: var(--mm-s-4) 0 var(--mm-s-2); }
.mm-trendgrp__head { display: flex; align-items: center; justify-content: space-between; min-height: 32px; }
.mm-trendgrp__h { margin: 0; font: 500 var(--mm-t-label, 11px)/1 var(--mm-font, inherit); letter-spacing: var(--mm-track, .1em); text-transform: uppercase; color: var(--mm-ink, #111); }
.mm-trendgrp__clear { min-height: 44px; padding: 0 var(--mm-s-1); border: 0; background: none; color: var(--mm-ink-2, #5f5f5f); font: 400 var(--mm-t-small, 12px)/1 var(--mm-font, inherit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.mm-trends { display: flex; flex-wrap: wrap; gap: var(--mm-s-2); margin: var(--mm-s-2) 0 0; padding: 0; list-style: none; }
.mm-trends > li { margin: 0; }
.mm-trend { display: inline-flex; align-items: center; min-height: 44px; padding: 0 var(--mm-s-4); border: 1px solid var(--mm-hair, #e4e0da); border-radius: 0; background: var(--mm-paper, #fff); color: var(--mm-ink, #111) !important; font: 400 var(--mm-t-meta, 13px)/1 var(--mm-font, inherit); text-decoration: none !important; cursor: pointer; transition: border-color var(--mm-press, 120ms) var(--mm-ease-out, ease), transform var(--mm-press, 120ms) var(--mm-ease-out, ease); }
.mm-trend:hover { border-color: var(--mm-ink, #111); }
.mm-trend:active { transform: translateY(1px) scale(.98); }
.mm-trend:focus-visible, .mm-sres :is(.mm-sres__item, .mm-sres__all):focus-visible { outline: 2px solid var(--mm-ink, #111); outline-offset: 2px; }
.mm-sres__item:focus-visible { background: var(--mm-sand, #f4f1ec); }

/* ── Search panel on desktop (the header search icon opens it) ────────────── */
@media (min-width: 901px) {
	body.mm-search-open .mm-sbar-wrap { display: block; position: fixed; inset: 0; z-index: 10001; height: auto; background: var(--mm-scrim, rgb(17 17 17 / .45)); }
	body.mm-search-open .mm-sbar { position: relative; box-sizing: border-box; max-width: none; height: auto; padding: var(--mm-s-5) max(var(--mm-s-6), calc((100vw - 760px) / 2)) var(--mm-s-3); background: var(--mm-paper, #fff); }
	body.mm-search-open .mm-sbar__form { position: relative; display: flex; align-items: center; gap: var(--mm-s-3); margin: 0; }
	body.mm-search-open .mm-sbar__icon { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); display: flex; color: var(--mm-ink-2, #5f5f5f); pointer-events: none; }
	body.mm-search-open .mm-sbar__icon .mm-ico { width: 20px; height: 20px; }
	body.mm-search-open .mm-sbar .mm-sbar__input { flex: 1 1 auto; height: 52px; margin: 0; padding: 0 var(--mm-s-4) 0 44px !important; border: 1px solid var(--mm-ink, #111) !important; border-radius: 0 !important; background: var(--mm-paper, #fff) !important; font: 400 16px/52px var(--mm-font, inherit); box-shadow: none !important; }
	body.mm-search-open .mm-sbar .mm-sbar__input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--mm-ink, #111) !important; }
	body.mm-search-open .mm-sbar__cancel { min-height: 44px; padding: 0 var(--mm-s-2); border: 0; background: none; color: var(--mm-ink, #111); font: 400 var(--mm-t-meta, 13px)/1 var(--mm-font, inherit); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
	body.mm-search-open .mm-sbar__m, body.mm-search-open .mm-sbar__bag { display: none; }
	body.mm-search-open .mm-sres { position: relative; display: block; box-sizing: border-box; max-height: min(70vh, 640px); overflow-y: auto; overscroll-behavior: contain; padding: 0 max(var(--mm-s-6), calc((100vw - 760px) / 2)) var(--mm-s-5); background: var(--mm-paper, #fff); box-shadow: 0 24px 40px -24px rgb(0 0 0 / .35); }
	body.mm-search-open .mm-sres[hidden] { display: none; }
	body.mm-search-open .mm-sres__list { display: grid; grid-template-columns: 1fr 1fr; column-gap: var(--mm-s-6); }
	body.mm-search-open .mm-sres__list > :is(.mm-trendgrp, .mm-sres__empty, .mm-sres__all, .mm-skel) { grid-column: 1 / -1; }
	body.mm-search-open .mm-sres__item { min-height: 72px; }
	body.mm-search-open .mm-sres__item:hover .mm-sres__name { text-decoration: underline; text-underline-offset: 3px; }
}
.mm-sres__thumb { border-radius: 0 !important; }
.mm-sres__all { color: var(--mm-ink, #111) !important; text-decoration: underline !important; text-underline-offset: 3px; }

/* ── No results page ──────────────────────────────────────────────────────── */
body.mm-search-empty .mm-lhead { display: none; }
.mm-nores { max-width: 1200px; margin: 0 auto; padding: var(--mm-s-6) var(--mm-gutter, 16px) var(--mm-s-8); }
.mm-nores__over { margin: 0 0 var(--mm-s-2); font: 500 var(--mm-t-label, 11px)/1 var(--mm-font, inherit); letter-spacing: var(--mm-track, .1em); text-transform: uppercase; color: var(--mm-ink-2, #5f5f5f); }
.mm-nores__h { margin: 0 0 var(--mm-s-3); font: 500 var(--mm-t-h2, 24px)/1.2 var(--mm-font-heading, var(--mm-font, inherit)); overflow-wrap: anywhere; }
.mm-nores__p { margin: 0 0 var(--mm-s-5); max-width: 46ch; font: 400 var(--mm-t-body, 15px)/1.55 var(--mm-font, inherit); color: var(--mm-ink-2, #5f5f5f); }
.mm-nores__form { display: flex; max-width: 560px; margin: 0 0 var(--mm-s-6); }
.mm-nores__form input[type="search"] { flex: 1 1 auto; min-width: 0; height: var(--mm-control-h, 52px); margin: 0; padding: 0 var(--mm-s-4); border: 1px solid var(--mm-ink, #111) !important; border-right: 0 !important; border-radius: 0 !important; background: var(--mm-paper, #fff); font: 400 16px/1 var(--mm-font, inherit); }
.mm-nores__go { flex: 0 0 auto; min-height: var(--mm-control-h, 52px); padding: 0 var(--mm-s-5); border: 1px solid var(--mm-ink, #111); border-radius: 0; background: var(--mm-ink, #111); color: var(--mm-paper, #fff); font: 500 var(--mm-t-meta, 13px)/1 var(--mm-font, inherit); letter-spacing: var(--mm-track, .1em); text-transform: uppercase; cursor: pointer; transition: transform var(--mm-press, 120ms) var(--mm-ease-out, ease); }
.mm-nores__go:active { transform: translateY(1px); }
.mm-nores__sub { margin: var(--mm-s-6) 0 var(--mm-s-3); font: 500 var(--mm-t-label, 11px)/1 var(--mm-font, inherit); letter-spacing: var(--mm-track, .1em); text-transform: uppercase; }
.mm-nores .mm-circs { padding-top: 0; }
.mm-nores__grid { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mm-s-5) var(--mm-s-3); margin: 0 !important; padding: 0; list-style: none; }
@media (min-width: 768px) { .mm-nores { padding-top: var(--mm-s-7); } .mm-nores__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--mm-s-6) var(--mm-s-4); } }
.mm-nores__grid > * { width: auto !important; max-width: none !important; margin: 0 !important; }

/* Global button rules (WoodMart + design system) must not restyle these quiet controls. */
body .mm-dr :is(.mm-dr__rm, .mm-dr__x, .mm-qty__b), body :is(.mm-trend, .mm-trendgrp__clear) { text-transform: none !important; letter-spacing: 0 !important; box-shadow: none !important; min-width: 0; }
body .mm-dr :is(.mm-dr__rm, .mm-dr__x, .mm-qty__b), body .mm-trendgrp__clear { background: transparent !important; }
body .mm-dr .mm-dr__rm { padding: 0 !important; font-weight: 400 !important; color: var(--mm-ink-2, #5f5f5f) !important; }
body .mm-dr .mm-qty__b { padding: 0 !important; color: var(--mm-ink, #111) !important; }
body .mm-dr .mm-qty__b:disabled { color: var(--mm-hair, #e4e0da) !important; }
body .mm-dr .mm-qty__b:active:not(:disabled) { background: var(--mm-sand, #f4f1ec) !important; }
body .mm-trend { background: var(--mm-paper, #fff) !important; font-weight: 400 !important; padding: 0 var(--mm-s-4) !important; }
/* "Goes well with": one swipeable row, aligned with the drawer text. */
.mm-dr .mm-dr__goes-list { display: flex !important; flex-wrap: nowrap; gap: var(--mm-s-3); margin: 0 !important; padding: 0 0 var(--mm-s-1) !important; overflow-x: auto !important; scroll-snap-type: x mandatory; }
.mm-dr .mm-dr__goes-list > .mm-mini { flex: 0 0 42% !important; max-width: 42% !important; scroll-snap-align: start; }
.mm-nores .mm-circs__list { justify-content: flex-start !important; padding-left: 0 !important; padding-right: 0 !important; }
@media (max-width: 767px) { .mm-nores .mm-circs { margin: 0 calc(-1 * var(--mm-gutter, 16px)); } .mm-nores .mm-circs__list { padding: 0 var(--mm-gutter, 16px) !important; } }