/* Miss Merylin — app shell (inc/10-app-shell.php). Brand tokens come from style.css (:root --mm-*). */

body.mm-shell {
	--mm-ink: var(--mm-black, #1a1a1a);
	--mm-rose: var(--mm-accent, #c8556a);
	--mm-line: var(--mm-border, #ebebeb);
	--mm-card-radius: var(--mm-r-m);
	--mm-tabbar-h: 0px;
	--mm-cartbar-space: 0px;
	--mm-page-bar-h: 0px; /* a page-owned fixed bottom bar (e.g. the PDP sticky add-to-bag) */
	--mm-safe-b: env(safe-area-inset-bottom, 0px);
	--mm-shell-bottom: calc(var(--mm-tabbar-h) + var(--mm-cartbar-space) + var(--mm-page-bar-h) + var(--mm-safe-b));
	-webkit-tap-highlight-color: transparent;
}
html.mm-lock, html.mm-lock body { overflow: hidden; }
@media (max-width: 768px) { body.mm-shell.single-product { --mm-page-bar-h: 64px; } }

/* ---------- page transitions (progressive enhancement) ---------- */
@media (prefers-reduced-motion: no-preference) {
	@view-transition { navigation: auto; }
	::view-transition-old(root), ::view-transition-new(root) { animation-duration: 180ms; }
}
.mm-tabbar { view-transition-name: mm-tabbar; }
.website-wrapper > header.whb-header { view-transition-name: mm-header; } /* header + tab bar stay painted between pages */

/* ---------- mobile: compact WoodMart header, no WoodMart toolbar ---------- */
@media (max-width: 900px) {
	body.mm-shell--tabbar { --mm-tabbar-h: 60px; }
	body.mm-shell--tabbar.mm-has-cartbar { --mm-cartbar-space: 60px; }
	body.mm-shell.mm-shell--tabbar,
	body.mm-shell.mm-shell--tabbar.sticky-toolbar-on { padding-bottom: calc(var(--mm-shell-bottom) + var(--mm-s-2)) !important; }
	body.mm-shell .wd-toolbar { display: none !important; }

	.mm-shell .whb-header .whb-top-bar,
	.mm-shell .whb-header .whb-header-bottom { display: none !important; }
	.mm-shell .whb-header .whb-general-header .whb-flex-row,
	.mm-shell .whb-header .whb-general-header-inner { height: 52px !important; max-height: 52px !important; min-height: 52px !important; }
	.mm-shell .whb-header .wd-logo img,
	.mm-shell .whb-header .site-logo img { max-height: 30px !important; width: auto !important; }
	.mm-shell .whb-header .wd-header-search-mobile,
	.mm-shell .whb-header .wd-header-search { display: none !important; }
	.mm-shell .whb-header .wd-header-wishlist .wd-tools-text,
	.mm-shell .whb-header .wd-header-cart .wd-tools-text { display: none !important; }
	.mm-shell .whb-header .wd-tools-element > a { min-width: 40px; min-height: 44px; justify-content: center; }

	/*
	 * Sticky header block (phones). WoodMart's own sticky header (whb-sticky-real + whb-scroll-stick: the header goes
	 * position:fixed and slides away with translateY(-100%)) is switched off here; it fought the search bar, which
	 * chased the header with a measured offset, so content showed between and above them while scrolling.
	 * Now the header and the search bar are two CSS-sticky siblings with solid backgrounds: the header sticks at the
	 * top, the bar right under it (top: --mm-hdr-h, measured by mm-app-core.js). They move as one block: in the
	 * compact state (body.mm-hdr-compact, scrolling down) BOTH translate up by the header height, so only the search
	 * row stays, with the "M" and bag fading in at its ends; scrolling up brings the header back. Transform/opacity
	 * only; both keep their place in the flow, so nothing below ever moves. A fixed white strip covers the iPhone
	 * status-bar area (safe-area-inset-top) so nothing can show through above the block.
	 */
	body.mm-shell { --mm-hdr-h: 52px; }
	/* constant 52px header row: WoodMart drops the row border once it marks the header "sticked", which changed the
	   height mid-scroll; the block's one bottom hairline is on the search bar below */
	.mm-shell .whb-header .whb-row, .mm-shell .whb-header .whb-flex-row { border-bottom: 0 !important; }
	.mm-shell .whb-header.whb-sticky-prepared { padding-top: 0 !important; }
	.mm-shell .whb-header .whb-main-header,
	.mm-shell .whb-header.whb-sticked .whb-main-header,
	.mm-shell .whb-header.whb-scroll-down .whb-main-header,
	.mm-shell .whb-header.whb-scroll-up .whb-main-header { position: relative !important; top: auto !important; transform: none !important; transition: none !important; animation: none !important; box-shadow: none !important; }
	.mm-shell .whb-header.whb-sticked .whb-general-header-inner { height: 52px !important; max-height: 52px !important; }
	.mm-shell .whb-clone { display: none !important; }
	body.mm-shell .website-wrapper > header.whb-header { position: sticky; top: 0; z-index: 400; padding-top: env(safe-area-inset-top, 0px); border-bottom: 0 !important; background: var(--mm-white, #fff); transition: transform .26s cubic-bezier(.2,.7,.2,1); }
	body.mm-shell .mm-sbar-wrap { position: sticky; top: calc(var(--mm-hdr-h) + env(safe-area-inset-top, 0px)); z-index: 399; background: var(--mm-white, #fff); box-shadow: 0 var(--mm-hair, 1px) 0 var(--mm-line), 0 6px 14px -10px rgba(26,26,26,.18); transition: transform .26s cubic-bezier(.2,.7,.2,1); }
	body.mm-shell.mm-hdr-compact .website-wrapper > header.whb-header,
	body.mm-shell.mm-hdr-compact .mm-sbar-wrap { transform: translateY(calc(-1 * var(--mm-hdr-h))); }
	body.mm-shell::before { content: ""; position: fixed; z-index: 402; top: 0; left: 0; right: 0; height: env(safe-area-inset-top, 0px); background: var(--mm-white, #fff); pointer-events: none; }
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
	body.mm-shell .website-wrapper > header.whb-header, body.mm-shell .mm-sbar-wrap, .mm-sbar__m, .mm-sbar__bag, .mm-sbar__icon { transition: none !important; }
}

/* ---------- search bar (mobile) ---------- */
.mm-sbar-wrap { display: none; }
@media (max-width: 900px) {
	.mm-sbar-wrap { display: block; height: 56px; }
	.mm-sbar { position: relative; z-index: 391; box-sizing: border-box; height: 56px; padding: var(--mm-s-2) var(--mm-s-3); background: var(--mm-white, #fff); }
	.mm-sbar__form { position: relative; display: flex; align-items: center; gap: var(--mm-s-2); height: 40px; margin: 0; }
	.mm-sbar__icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--mm-gray, #888); display: flex; pointer-events: none; }
	.mm-sbar__icon .mm-ico { width: 18px; height: 18px; }
	.mm-sbar__icon { transition: opacity .2s ease; }
	.mm-sbar .mm-sbar__input { padding-right: 48px !important; }
	/* compact-state ends of the pill: "M" home link (left, over the search glyph) and the bag (right) */
	.mm-sbar__m, .mm-sbar__bag { position: absolute; top: 8px; z-index: 2; display: flex; align-items: center; justify-content: center; height: 40px; color: var(--mm-ink); text-decoration: none !important; opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .26s cubic-bezier(.2,.7,.2,1); }
	.mm-sbar__m { left: 14px; width: 32px; transform: translateX(-4px); font: 600 22px/1 var(--mm-font-display, 'Cormorant Garamond', Georgia, serif); letter-spacing: 0; }
	.mm-sbar__bag { right: 14px; width: 44px; transform: translateX(4px); }
	.mm-sbar__bag .mm-ico { width: 22px; height: 22px; }
	.mm-sbar__n { position: absolute; top: 3px; right: 4px; min-width: 16px; height: 16px; padding: 0 var(--mm-s-1); box-sizing: border-box; border-radius: 999px; background: var(--mm-ink); color: #fff; font: 600 10px/16px var(--mm-font-body); text-align: center; }
	.mm-sbar__n[hidden] { display: none; }
	body.mm-hdr-compact .mm-sbar__m, body.mm-hdr-compact .mm-sbar__bag { opacity: 1; transform: none; pointer-events: auto; }
	body.mm-hdr-compact .mm-sbar__icon { opacity: 0; }
	body.mm-search-open .mm-sbar__m, body.mm-search-open .mm-sbar__bag { display: none; }
	.mm-sbar .mm-sbar__input { flex: 1 1 auto; min-width: 0; height: 40px; margin: 0; padding: 0 var(--mm-s-4) 0 38px !important; border: 0 !important; border-radius: 999px !important; background: var(--mm-offwhite, #f7f4f0) !important; box-shadow: none !important; color: var(--mm-ink); font: 400 15px/40px var(--mm-font-body); -webkit-appearance: none; appearance: none; }
	.mm-sbar .mm-sbar__input::placeholder { color: var(--mm-gray, #888); opacity: 1; }
	.mm-sbar .mm-sbar__input:focus { outline: 2px solid var(--mm-ink); outline-offset: 0; }
	.mm-sbar__input::-webkit-search-cancel-button { -webkit-appearance: none; }
	.mm-sbar__cancel { flex: 0 0 auto; min-height: 40px; padding: 0 var(--mm-s-1); border: 0; background: none; color: var(--mm-ink); font: 500 14px/1 var(--mm-font-body); cursor: pointer; }
	.mm-sbar__cancel[hidden] { display: none; }

	body.mm-search-open .mm-sbar-wrap { z-index: 10001; transform: none !important; transition: none; }
	body.mm-search-open .mm-sbar { position: fixed; left: 0; right: 0; top: 0 !important; z-index: 10001; }
	.mm-sres { position: fixed; left: 0; right: 0; top: 56px; bottom: 0; z-index: 10000; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; background: var(--mm-white, #fff); padding: var(--mm-s-1) var(--mm-s-3) calc(var(--mm-s-4) + var(--mm-safe-b)); }
	.mm-sres[hidden] { display: none; }
}
.mm-sres__item { display: flex; align-items: center; gap: var(--mm-s-3); min-height: 64px; padding: var(--mm-s-2) 0; border-bottom: .5px solid var(--mm-line); color: var(--mm-ink); text-decoration: none; }
.mm-sres__thumb { flex: 0 0 48px; width: 48px; height: 60px; border-radius: var(--mm-r-s); overflow: hidden; background: var(--mm-offwhite, #f7f4f0); }
.mm-sres__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mm-sres__meta { display: flex; flex-direction: column; gap: var(--mm-s-1); min-width: 0; }
.mm-sres__name { font: 400 14px/1.35 var(--mm-font-body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.mm-sres__price { font: 600 13px/1 var(--mm-font-body); }
.mm-sres__empty { margin: var(--mm-s-5) 0 var(--mm-s-2); font: 400 14px/1.5 var(--mm-font-body); color: var(--mm-gray, #888); }
.mm-sres__all { display: flex; align-items: center; min-height: 48px; font: 600 13px/1.3 var(--mm-font-body); color: var(--mm-rose); text-decoration: none; }

/* ---------- skeletons ---------- */
.mm-skel { position: relative; overflow: hidden; background: #f1ece8; border-radius: var(--mm-r-s); }
.mm-skel::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent); animation: mm-shimmer 1.2s infinite; }
@keyframes mm-shimmer { to { transform: translateX(100%); } }
.mm-skel--row { height: 60px; margin: var(--mm-s-3) 0; }
.mm-skel--head { height: 90px; margin: 0 0 var(--mm-s-4); }
.mm-skel--line { height: 14px; width: 60%; margin: 0 0 var(--mm-s-4); }
.mm-skel--chip { display: inline-block; width: 52px; height: 40px; margin: 0 var(--mm-s-2) var(--mm-s-2) 0; border-radius: 999px; }

/* ---------- bottom tab bar ----------
   Sits above the iPhone home indicator (viewport-fit=cover + safe-area padding), 48px tap targets,
   no tap delay (touch-action), pressed state on pointerdown, slides away while scrolling down. */
.mm-tabbar { display: none; }
@media (max-width: 900px) {
	.mm-tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9990; display: flex; align-items: stretch; box-sizing: content-box; height: var(--mm-tabbar-h); padding: 0 max(var(--mm-s-2), env(safe-area-inset-right, 0px)) var(--mm-safe-b) max(var(--mm-s-2), env(safe-area-inset-left, 0px)); background: rgba(255,255,255,.97); border-top: .5px solid var(--mm-line); -webkit-backdrop-filter: saturate(1.4) blur(16px); backdrop-filter: saturate(1.4) blur(16px); transform: translateZ(0); transition: transform .26s cubic-bezier(.32,.72,0,1); will-change: transform; touch-action: manipulation; }
	.mm-tab { flex: 1 1 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--mm-s-1); min-width: 48px; min-height: 48px; margin: var(--mm-s-1) 0 0; color: var(--mm-gray, #888); text-decoration: none; font: 500 10.5px/1 var(--mm-font-body); letter-spacing: .02em; touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; transition: color .15s, transform .12s; }
	.mm-tab__ic { position: relative; display: flex; }
	.mm-tab .mm-ico { width: 24px; height: 24px; }
	.mm-tabbar .mm-tab:not(.is-active) { color: var(--mm-gray, #888) !important; } /* WoodMart colours wishlist links */
	.mm-tab.is-active { color: var(--mm-ink); }
	.mm-tab.is-active .mm-ico { stroke-width: 2; color: var(--mm-rose); }
	.mm-tab.is-pressed { transform: scale(.92); color: var(--mm-ink) !important; }
	.mm-tab:focus-visible { outline: 2px solid var(--mm-ink); outline-offset: -4px; }
	body.mm-search-open .mm-tabbar, html.mm-lock .mm-tabbar { visibility: hidden; }
	/* scrolling down: tab bar slides off; the cart bar drops to the safe area */
	body.mm-bars-hidden .mm-tabbar { transform: translateY(calc(100% + 1px)); }
	body.mm-bars-hidden { --mm-tabbar-h-live: 0px; }
}
.mm-badge { position: absolute; top: -5px; left: calc(100% - 8px); min-width: 16px; height: 16px; padding: 0 var(--mm-s-1); box-sizing: border-box; border-radius: 999px; background: var(--mm-rose); color: #fff; font: 600 10px/16px var(--mm-font-body); text-align: center; pointer-events: none; }
.mm-badge[hidden] { display: none; }
.mm-hdr-wish { position: relative; }
.mm-hdr-wish .mm-badge { top: 4px; left: auto; right: 0; }

/* ---------- floating cart bar ---------- */
.mm-cartbar { position: fixed; z-index: 9989; left: 12px; right: 12px; bottom: calc(var(--mm-tabbar-h-live, var(--mm-tabbar-h)) + var(--mm-safe-b) + 8px); transition: bottom .26s cubic-bezier(.32,.72,0,1); box-sizing: border-box; display: flex; align-items: center; justify-content: space-between; gap: var(--mm-s-3); min-height: 52px; padding: 0 var(--mm-s-4); border-radius: var(--mm-r-l); background: var(--mm-ink); color: #fff !important; text-decoration: none !important; font: 500 14px/1.2 var(--mm-font-body); box-shadow: 0 10px 28px rgba(26,26,26,.22); }
.mm-cartbar[hidden] { display: none; }
.mm-cartbar__cta { flex: 0 0 auto; font-weight: 600; letter-spacing: .02em; }
.mm-cartbar__total { font-weight: 600; }
.mm-cartbar.is-bump { animation: mm-bump .45s cubic-bezier(.32,.72,0,1); }
@keyframes mm-bump { 0% { transform: translateY(0); } 35% { transform: translateY(-6px) scale(1.02); } 100% { transform: translateY(0); } }
body.mm-shell--no-cartbar .mm-cartbar, body.mm-search-open .mm-cartbar { display: none !important; }
@media (min-width: 901px) {
	.mm-cartbar { left: 0; right: 0; width: 440px; margin: 0 auto; bottom: 24px; } /* centred without a half-pixel transform */
	.mm-cartbar.is-bump { animation-name: mm-bump-d; }
	@keyframes mm-bump-d { 0% { transform: none; } 35% { transform: translateY(-6px); } 100% { transform: none; } }
}

/* ---------- chat widget (WP Chat App, #wa / .wa__*) ----------
   Phones: only the tab bar + cart bar live at the bottom edge, so the floating chat button is hidden
   (chat is linked from the footer and the account page instead). Desktop: small, bottom-right, above the cart bar. */
@media (max-width: 900px) {
	body.mm-shell #wa, body.mm-shell .wa__btn_popup, body.mm-shell .wa__popup_chat_box { display: none !important; }
}
@media (min-width: 901px) {
	body.mm-shell #wa .wa__btn_popup, body.mm-shell .wa__btn_popup { bottom: 24px !important; transform: scale(.85); transform-origin: bottom right; }
	body.mm-shell.mm-has-cartbar #wa .wa__btn_popup, body.mm-shell.mm-has-cartbar .wa__btn_popup { bottom: 92px !important; }
}
body.mm-search-open #wa, html.mm-lock #wa { visibility: hidden !important; }

/* ---------- toast ---------- */
.mm-toast { position: fixed; z-index: 100001; left: 0; right: 0; width: fit-content; margin: 0 auto; bottom: calc(var(--mm-shell-bottom, 0px) + 76px); transform: translateY(12px); max-width: calc(100vw - 32px); box-sizing: border-box; padding: var(--mm-s-3) var(--mm-s-4); border-radius: 999px; background: var(--mm-ink); color: #fff; font: 500 13px/1.3 var(--mm-font-body); text-align: center; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; }
.mm-toast.is-on { opacity: 1; transform: none; }
.mm-toast:empty { display: none; }

/* ---------- sheet ---------- */
.mm-sheet { position: fixed; inset: 0; z-index: 100000; }
.mm-sheet[hidden] { display: none; }
.mm-sheet__backdrop { position: absolute; inset: 0; background: rgba(26,26,26,.45); opacity: 0; transition: opacity .25s; }
.mm-sheet__panel { position: absolute; left: 0; right: 0; bottom: 0; box-sizing: border-box; max-height: 88vh; overflow-y: auto; overscroll-behavior: contain; padding: var(--mm-s-2) var(--mm-s-4) calc(var(--mm-s-4) + var(--mm-safe-b, 0px)); border-radius: var(--mm-r-xl) var(--mm-r-xl) 0 0; background: #fff; color: var(--mm-ink); transform: translateY(100%); transition: transform .28s cubic-bezier(.32,.72,0,1); outline: none; }
.mm-sheet.is-open .mm-sheet__backdrop { opacity: 1; }
.mm-sheet.is-open .mm-sheet__panel { transform: none; }
.mm-sheet__grab { width: 40px; height: 4px; margin: var(--mm-s-1) auto var(--mm-s-2); border-radius: var(--mm-r-xs); background: #ddd; touch-action: none; }
.mm-sheet__head { display: flex; align-items: center; justify-content: space-between; gap: var(--mm-s-3); min-height: 44px; touch-action: none; }
.mm-sheet__title { margin: 0; font: 500 16px/1.3 var(--mm-font-body); color: var(--mm-ink); letter-spacing: 0; text-transform: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mm-sheet__x { flex: 0 0 44px; width: 44px; height: 44px; margin-right: -10px; border: 0; background: none; color: var(--mm-ink); font: 300 28px/1 var(--mm-font-body); cursor: pointer; }
@media (min-width: 901px) {
	.mm-sheet__panel { left: 0; right: 0; top: 0; bottom: 0; margin: auto; height: fit-content; width: 480px; max-height: 80vh; border-radius: var(--mm-r-l); padding: var(--mm-s-3) var(--mm-s-5) var(--mm-s-5); transform: translateY(16px); opacity: 0; transition: transform .22s ease, opacity .22s ease; }
	.mm-sheet.is-open .mm-sheet__panel { transform: none; opacity: 1; }
	.mm-sheet__grab { display: none; }
}

/* quick add */
.mm-qa__head { display: flex; gap: var(--mm-s-3); align-items: center; margin: var(--mm-s-1) 0 var(--mm-s-4); }
.mm-qa__img { flex: 0 0 72px; width: 72px; height: 90px; object-fit: cover; border-radius: var(--mm-r-m); background: var(--mm-offwhite, #f7f4f0); }
.mm-qa__name { margin: 0 0 var(--mm-s-2); font: 400 14px/1.35 var(--mm-font-body); }
.mm-qa__price { margin: 0; font: 600 15px/1 var(--mm-font-body); }
.mm-qa__label { margin: 0 0 var(--mm-s-2); font: 600 11px/1 var(--mm-font-body); letter-spacing: .12em; text-transform: uppercase; }
.mm-qa__group { margin: 0 0 var(--mm-s-4); }
.mm-qa__group[hidden] { display: none; }
.mm-qa__chips { display: flex; flex-wrap: wrap; gap: var(--mm-s-2); }
.mm-chip { min-width: 48px; min-height: 44px; padding: 0 var(--mm-s-4); border: 1px solid var(--mm-line); border-radius: 999px; background: #fff; color: var(--mm-ink); font: 500 14px/1 var(--mm-font-body); text-transform: none; letter-spacing: 0; cursor: pointer; transition: border-color .15s, background-color .15s, transform .12s; }
.mm-chip.is-on { border-color: var(--mm-ink); background: var(--mm-ink); color: #fff; }
.mm-chip:disabled { color: #c4c4c4; background: #fafafa; text-decoration: line-through; cursor: not-allowed; }
.mm-chip:focus-visible, .mm-qa__add:focus-visible { outline: 2px solid var(--mm-rose); outline-offset: 2px; }
.mm-qa__sc { margin: -4px 0 var(--mm-s-4); }
.mm-qa__sclink { min-height: 44px; padding: 0; border: 0; background: none; color: var(--mm-ink); font: 500 13px/1 var(--mm-font-body); text-decoration: underline; text-underline-offset: 3px; text-transform: none; letter-spacing: 0; cursor: pointer; }
.mm-qa__sctable[hidden] { display: none; }
.mm-qa__scunit, .mm-qa__scnotes { margin: var(--mm-s-2) 0; font: 400 12px/1.5 var(--mm-font-body); color: var(--mm-gray, #888); white-space: pre-line; }
.mm-qa__scscroll { overflow-x: auto; }
.mm-qa__sct { width: 100%; border-collapse: collapse; font: 400 13px/1.3 var(--mm-font-body); }
.mm-qa__sct th, .mm-qa__sct td { padding: var(--mm-s-2) var(--mm-s-2); border: var(--mm-hair) solid var(--mm-line); text-align: center; white-space: nowrap; }
.mm-qa__sct thead th { background: var(--mm-ink); color: #fff; font-weight: 500; }
.mm-qa__add { display: block; width: 100%; min-height: 50px; border: 0; border-radius: 999px; background: var(--mm-ink); color: #fff; font: 600 13px/1 var(--mm-font-body); letter-spacing: .12em; text-transform: uppercase; cursor: pointer; transition: opacity .15s, transform .12s; }
.mm-qa__add:disabled { background: #d9d4d0; cursor: not-allowed; }
.mm-qa__more { display: block; margin: var(--mm-s-3) 0 0; min-height: 24px; text-align: center; font: 500 13px/1.4 var(--mm-font-body); color: var(--mm-gray, #888); text-decoration: underline; text-underline-offset: 3px; }
.mm-qa__msg { margin: var(--mm-s-2) 0; font: 400 14px/1.5 var(--mm-font-body); }
.mm-is-busy { opacity: .55; pointer-events: none; }

/* ---------- product card ---------- */
.wd-product.product-grid-item.mm-card { display: flex; flex-direction: column; border-radius: var(--mm-card-radius); overflow: hidden; background: var(--mm-white, #fff); }
.wd-product.product-grid-item.mm-card .mm-card__media { position: relative; margin: 0; aspect-ratio: 4 / 5; border-radius: var(--mm-card-radius) var(--mm-card-radius) 0 0; overflow: hidden; background: var(--mm-offwhite, #f7f4f0); }
.wd-product.product-grid-item.mm-card .mm-card__imglink { display: block; width: 100%; height: 100%; }
.wd-product.product-grid-item.mm-card .mm-card__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
.wd-product.product-grid-item.mm-card .mm-imported-tag { top: 8px; left: 8px; border-radius: 999px; padding: var(--mm-s-1) var(--mm-s-2) var(--mm-s-1) var(--mm-s-2); }
.wd-product.product-grid-item.mm-card .mm-card__body { flex: 1 1 auto; display: flex; flex-direction: column; padding: var(--mm-s-3) var(--mm-s-3) var(--mm-s-3); }
.wd-product.product-grid-item.mm-card .mm-card__name { margin: 0 0 var(--mm-s-2); min-height: 2.8em; }
.wd-product.product-grid-item.mm-card .mm-card__name a, .wd-product.product-grid-item.mm-card .mm-card__name:not(:has(a)) { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; overflow-wrap: anywhere; }
.wd-product.product-grid-item.mm-card .mm-card__name, .wd-product.product-grid-item.mm-card .mm-card__name a { font: 400 13px/1.4 var(--mm-font-body); color: var(--mm-ink); }
/* Price block (price · was · % off, wraps inside its own column) + a compact round "+" button: a 2-column grid, so the
   two can never overlap at any width; the row keeps a 2-line minimum so cards with and without a discount line up. */
.mm-card__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--mm-s-2); min-height: 40px; margin-top: auto; }
/* Narrow cards (small rails, ~110–150px): the price gets its own full line and the "+" sits right-aligned below it,
   so a price is never clipped or covered. */
.wd-product.product-grid-item.mm-card .mm-card__body { container-type: inline-size; }
@container (max-width: 150px) {
	.mm-card__row { grid-template-columns: minmax(0, 1fr); row-gap: var(--mm-s-2); min-height: 64px; align-content: end; }
	.mm-card__row .mm-card__add { justify-self: end; }
}
.wd-product.product-grid-item.mm-card .mm-card__price { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: var(--mm-s-2); row-gap: 2px; min-width: 0; font-family: var(--mm-font-body); font-size: 14px; color: var(--mm-ink); }
.mm-card__from { font-size: 11px; color: var(--mm-gray, #888); }
.wd-product.product-grid-item.mm-card .mm-card__now, .wd-product.product-grid-item.mm-card .mm-card__now .amount { font-size: 14px; font-weight: 600; color: var(--mm-ink); }
.wd-product.product-grid-item.mm-card .mm-card__was, .wd-product.product-grid-item.mm-card .mm-card__was .amount { font-size: 11px; font-weight: 400; color: var(--mm-muted, #aaa); }
.mm-card__off { font: 600 11px/1 var(--mm-font-body); color: var(--mm-rose); }
.mm-card__add { position: relative; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 0; border: 1px solid var(--mm-ink); border-radius: 50%; background: #fff; color: var(--mm-ink) !important; font: 400 22px/1 var(--mm-font-body); text-decoration: none !important; transition: background-color .15s, color .15s, transform .12s; }
.mm-card__add .mm-card__addtxt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mm-card__add svg { width: 18px; height: 18px; display: block; }
.mm-card__add::after { content: ""; position: absolute; inset: -6px; } /* 48px touch target */
.mm-card__add:hover { background: var(--mm-ink); color: #fff !important; }
.mm-card__add:focus-visible { outline: 2px solid var(--mm-rose); outline-offset: 2px; }


/* ---------- tap feedback ---------- */
@media (hover: none) {
	.mm-chip:not(:disabled):active, .mm-card__add:active, .mm-qa__add:not(:disabled):active,
	.mm-cartbar:active, .mm-sres__item:active, .mm-mini__add:active, .mm-added__view:active { transform: scale(.96); opacity: .85; }
	.mm-card__imglink:active img { opacity: .9; }
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
	.mm-skel::after, .mm-cartbar.is-bump { animation: none !important; }
	.mm-sheet__panel, .mm-sheet__backdrop, .mm-toast, .mm-tab, .mm-chip, .mm-card__add, .mm-qa__add { transition: none !important; }
	.wd-product.product-grid-item.mm-card:hover .wd-product-img img { transform: none; }
}

/* Mobile header (WoodMart builder columns): logo left; wishlist + cart right; no burger (the tab bar navigates). */
@media (max-width: 1024px) {
	.whb-column_mobile2 { display: none !important; }
	.whb-column_mobile3 { justify-content: flex-start !important; flex: 1 1 auto !important; }
	.whb-column_mobile3 .wd-logo { margin: 0 !important; }
	.whb-column_mobile4 { display: flex; align-items: center; gap: var(--mm-s-1); }
	.mm-hdr-wish { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; color: inherit; }
	.mm-hdr-wish svg { width: 22px; height: 22px; }
}
.mm-hdr-wish[hidden] { display: none; }

/* ---------- wishlist hearts (inc/15-wishlist.php) ---------- */
.mm-wish { display: inline-flex; align-items: center; justify-content: center; gap: var(--mm-s-2); margin: 0; padding: 0; border: 0; background: none; color: var(--mm-ink); cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
.mm-wish__ic { fill: none; stroke: currentColor; stroke-width: 1.7; transition: fill .15s, stroke .15s; }
.mm-wish.is-on .mm-wish__ic { fill: var(--mm-rose); stroke: var(--mm-rose); }
.mm-wish:focus-visible { outline: 2px solid var(--mm-rose); outline-offset: 2px; }
.mm-card__wish { position: absolute; top: 6px; right: 6px; z-index: 5; width: 40px; height: 40px; border-radius: 50%; background: rgba(255,255,255,.9); }
.mm-card__wish .mm-wish__ic { width: 19px; height: 19px; }
.mm-wish--pdp { min-height: 44px; margin: var(--mm-s-3) 0 0; padding: 0 2px; font: 500 12px/1 var(--mm-font-body); letter-spacing: .08em; text-transform: uppercase; }
.mm-wish.is-pop .mm-wish__ic { animation: mm-heart-pop .38s cubic-bezier(.32,.72,0,1); }
@keyframes mm-heart-pop { 0% { transform: scale(1); } 40% { transform: scale(1.32); } 100% { transform: scale(1); } }
.mm-card.is-leaving { opacity: 0; transform: scale(.96); transition: opacity .24s, transform .24s; }

/* ---------- fly-to-bag ---------- */
.mm-fly { position: fixed; z-index: 100002; margin: 0; object-fit: cover; border-radius: var(--mm-r-m); pointer-events: none; transform-origin: center; transition: transform .42s cubic-bezier(.5,0,.2,1), opacity .42s ease-in; will-change: transform, opacity; }

/* ---------- "Added ✓" sheet + compact suggestion cards ---------- */
.mm-sheet--added .mm-sheet__title { color: var(--mm-ink); font-weight: 600; }
.mm-added__actions { display: flex; gap: var(--mm-s-3); margin: 2px 0 var(--mm-s-4); }
.mm-added__view, .mm-added__keep { flex: 1 1 0; display: flex; align-items: center; justify-content: center; min-height: 48px; border-radius: 999px; font: 600 12px/1 var(--mm-font-body); letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; touch-action: manipulation; }
.mm-added__view { background: var(--mm-ink); color: #fff !important; border: 1px solid var(--mm-ink); }
.mm-added__keep { background: #fff; color: var(--mm-ink); border: 1px solid var(--mm-line); }
.mm-added__h { margin: 0 0 var(--mm-s-3); font: 600 11px/1 var(--mm-font-body); letter-spacing: .12em; text-transform: uppercase; color: var(--mm-ink); }
.mm-added__list { display: flex; gap: var(--mm-s-3); margin: 0 -18px !important; padding: 0 var(--mm-s-4) var(--mm-s-1) !important; list-style: none; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mm-added__list::-webkit-scrollbar { display: none; }
.mm-added__list > .mm-mini { flex: 0 0 36%; max-width: 36%; scroll-snap-align: start; }
@media (min-width: 560px) { .mm-added__list { margin: 0; padding: 0; overflow: visible; } .mm-added__list > .mm-mini { flex: 1 1 0; max-width: none; } }
.mm-mini { display: flex; flex-direction: column; min-width: 0; margin: 0; list-style: none; }
.mm-mini__link { display: flex; flex-direction: column; gap: var(--mm-s-1); color: var(--mm-ink) !important; text-decoration: none !important; }
.mm-mini__img { display: block; aspect-ratio: 4 / 5; border-radius: var(--mm-r-m); overflow: hidden; background: var(--mm-offwhite, #f7f4f0); }
.mm-mini__img img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .35s ease; }
.mm-mini__name { font: 400 12.5px/1.35 var(--mm-font-body); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; min-height: 2.7em; }
.mm-mini__price { font: 600 13px/1 var(--mm-font-body); }
.mm-mini__add { margin: var(--mm-s-2) 0 0; min-height: 36px; padding: 0 var(--mm-s-3); border: 1px solid var(--mm-ink); border-radius: 999px; background: #fff; color: var(--mm-ink); font: 600 11px/1 var(--mm-font-body); letter-spacing: .08em; cursor: pointer; touch-action: manipulation; transition: background-color .15s, color .15s, transform .12s; }
.mm-mini__add.is-done { background: var(--mm-ink); color: #fff; }
.mm-skel--mini { aspect-ratio: 4 / 5; width: 100%; height: auto; border-radius: var(--mm-r-m); }
@media (prefers-reduced-motion: no-preference) {
	.mm-added__list .mm-mini { animation: mm-rise .32s cubic-bezier(.32,.72,0,1) both; animation-delay: calc(var(--i, 0) * 50ms); }
}

/* ---------- empty states (wishlist, filtered listings) ---------- */
.mm-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--mm-s-3); padding: 40px var(--mm-s-5) var(--mm-s-6); color: var(--mm-ink); }
.mm-empty[hidden] { display: none; }
.mm-empty__ic { color: var(--mm-rose); }
.mm-empty__title { margin: 0; font: 500 17px/1.35 var(--mm-font-body); color: var(--mm-ink); }
.mm-empty__text { margin: 0; max-width: 32ch; font: 400 14px/1.55 var(--mm-font-body); color: #555; }
.mm-empty__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; margin-top: var(--mm-s-2); padding: 0 var(--mm-s-5); border: 0; border-radius: 999px; background: var(--mm-ink); color: #fff !important; font: 600 12px/1 var(--mm-font-body); letter-spacing: .12em; text-transform: uppercase; text-decoration: none !important; cursor: pointer; }
.mm-wlpage { padding: 0 0 var(--mm-s-5); }
.mm-skel--card { aspect-ratio: 4 / 6; width: 100%; height: auto; border-radius: var(--mm-card-radius, 12px); }

/* ---------- premium motion: GPU-only (opacity / transform), 200–400ms, never above the fold ---------- */
@keyframes mm-rise { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
	.mm-rv { opacity: 0; transform: translate3d(0, 18px, 0); transition: opacity .4s ease, transform .4s cubic-bezier(.32,.72,0,1); }
	.mm-rv.is-in { opacity: 1; transform: none; }
	.mm-rv .mm-card, .mm-rv .mm-tile { opacity: 0; transform: translate3d(0, 12px, 0); transition: opacity .34s ease, transform .34s cubic-bezier(.32,.72,0,1); transition-delay: calc(var(--i, 0) * 45ms); }
	.mm-rv.is-in .mm-card, .mm-rv.is-in .mm-tile { opacity: 1; transform: none; }
	.wd-product.product-grid-item.mm-card .mm-card__media img { transition: transform .4s cubic-bezier(.32,.72,0,1); }
}
@media (prefers-reduced-motion: no-preference) {
	.mm-enter { animation: mm-rise .34s cubic-bezier(.32,.72,0,1) both; animation-delay: calc(var(--i, 0) * 45ms); }
}
.mm-acct-chat { margin: var(--mm-s-5) 0 0; font: 400 14px/1.5 var(--mm-font-body); }
.mm-acct-chat a { color: var(--mm-ink); text-decoration: underline; text-underline-offset: 3px; }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
	.wd-product.product-grid-item.mm-card:hover .mm-card__media img, .mm-mini:hover .mm-mini__img img { transform: scale(1.04); }
}
@media (hover: none) and (prefers-reduced-motion: no-preference) {
	.mm-card__imglink:active img { transform: scale(1.03); }
}
@media (prefers-reduced-motion: reduce) {
	.mm-tabbar, .mm-cartbar, .mm-fly, .mm-wish__ic, .mm-card.is-leaving { transition: none !important; animation: none !important; }
}

/* ---------- crisp icons: inline SVG in the header (inc/45-webapp.php), SVG masks for the remaining WoodMart glyphs ---------- */
html { background: #fff; } /* no dark flash between pages */
.whb-header .wd-tools-icon.mm-svg-ic::before { content: none !important; display: none !important; }
.whb-header .wd-tools-icon.mm-svg-ic { display: inline-flex; align-items: center; justify-content: center; }
.whb-header .mm-hic { display: block; width: 22px; height: 22px; flex: 0 0 auto; }
:root {
	--mm-i-chev-r: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
	--mm-i-chev-l: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 5l-7 7 7 7'/%3E%3C/svg%3E");
	--mm-i-chev-d: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 9l7 7 7-7'/%3E%3C/svg%3E");
	--mm-i-up: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M6 11l6-6 6 6'/%3E%3C/svg%3E");
	--mm-i-x: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6L6 18'/%3E%3C/svg%3E");
	--mm-i-expand: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-6.5 6.5M4 20l6.5-6.5'/%3E%3C/svg%3E");
	--mm-i-compare: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 4h4v4M4 20 20 4M16 20h4v-4M14.5 14.5 20 20M4 4l5 5'/%3E%3C/svg%3E");
	--mm-i-grid: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8'%3E%3Crect x='4' y='4' width='6' height='6' rx='1'/%3E%3Crect x='14' y='4' width='6' height='6' rx='1'/%3E%3Crect x='4' y='14' width='6' height='6' rx='1'/%3E%3Crect x='14' y='14' width='6' height='6' rx='1'/%3E%3C/svg%3E");
	--mm-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m20 20-4.2-4.2'/%3E%3C/svg%3E");
	--mm-i-eye: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 12S6 5.5 12 5.5 21.5 12 21.5 12 18 18.5 12 18.5 2.5 12 2.5 12z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E");
	--mm-i-back: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19 12H5M11 6l-6 6 6 6'/%3E%3C/svg%3E");
}
.wd-nav-opener::after, .wd-btn-arrow.wd-next .wd-arrow-inner::after, .wd-product-nav-btn.wd-btn-next::before, .page-numbers.next::before,
.wd-btn-arrow.wd-prev .wd-arrow-inner::after, .wd-product-nav-btn.wd-btn-prev::before, .page-numbers.prev::before,
.wd-accordion-opener::before, a.scrollToTop::after, .woodmart-show-product-gallery .wd-action-icon::before,
.wd-compare-btn .wd-action-icon::before, .wd-product-nav-btn.wd-btn-back::before, .close-side-widget .wd-action-icon::before,
.wd-close-search .wd-action-icon::before, .wd-clear-search::before, button.searchsubmit::after, .reset_variations::before,
button.show-password-input::before, .wd-back-btn .wd-action-icon::before {
	content: "" !important; font-family: inherit !important;
	display: inline-block; width: 1em; height: 1em; vertical-align: -.125em;
	background-color: currentColor; -webkit-mask: var(--mm-i, var(--mm-i-chev-r)) center / contain no-repeat; mask: var(--mm-i, var(--mm-i-chev-r)) center / contain no-repeat;
}
.wd-btn-arrow.wd-prev .wd-arrow-inner::after, .wd-product-nav-btn.wd-btn-prev::before, .page-numbers.prev::before { --mm-i: var(--mm-i-chev-l); }
.wd-accordion-opener::before { --mm-i: var(--mm-i-chev-d); }
a.scrollToTop::after { --mm-i: var(--mm-i-up); }
.woodmart-show-product-gallery .wd-action-icon::before { --mm-i: var(--mm-i-expand); }
.wd-compare-btn .wd-action-icon::before { --mm-i: var(--mm-i-compare); }
.wd-product-nav-btn.wd-btn-back::before { --mm-i: var(--mm-i-grid); }
.close-side-widget .wd-action-icon::before, .wd-close-search .wd-action-icon::before, .wd-clear-search::before, .reset_variations::before { --mm-i: var(--mm-i-x); }
button.searchsubmit::after { --mm-i: var(--mm-i-search); }
button.show-password-input::before { --mm-i: var(--mm-i-eye); }
.wd-back-btn .wd-action-icon::before { --mm-i: var(--mm-i-back); }

/* ---------- opened from the home screen (standalone): back button in the header on inner pages ---------- */
.mm-back { display: none; }
@media (display-mode: standalone) {
	.mm-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 2px 0 -10px; padding: 0; border: 0; background: none; color: var(--mm-ink, #1a1a1a); -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
	.mm-back:active { opacity: .5; }
}
html.mm-standalone .mm-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0 2px 0 -10px; padding: 0; border: 0; background: none; color: var(--mm-ink, #1a1a1a); }
.mm-sbar__m.is-back svg { width: 22px; height: 22px; }