/* ---------------------------------------------------
   The Catalog — direction 1a (green rail, spec-forward)
   Built to the design handoff. iPad Pro 12.9" landscape
   is the primary target; fills the real viewport rather
   than the fixed 1366x1024 frame shown in the mockup.
--------------------------------------------------- */
:root {
	--c-gold: #D7A866;
	--c-gold-shadow: #B0872F;
	--c-gold-core: #FFD123;
	--c-gold-highlight: #FCF8D0;
	--c-green: #1C3A2C;
	--c-ink: #2E3136;
	--c-mute: #6B7076;
	--c-line: #EDEEF0;
	--c-surface: #F4F5F7;
	--c-white: #FFFFFF;
	--mjc-topbar-h: 64px;
}

/* ---------------- Top bar (site nav) ----------------
   The client's design handoff only covers the app screens below — there is
   no mockup for getting back to the marketing site from here. Kept deliberately
   slim (unlike the two-row site header) since every pixel of vertical space
   matters on the iPad-landscape viewport the catalog is built for. */
#mjc-topbar {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 60;
	height: calc(var(--mjc-topbar-h) + env(safe-area-inset-top, 0px));
	padding: env(safe-area-inset-top, 0px) clamp(20px,3vw,36px) 0;
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	background: var(--c-white);
	border-bottom: 1px solid var(--c-line);
	box-sizing: border-box;
}
.mjc-topbar-logo { position: relative; display: inline-flex; grid-column: 1; justify-self: start; }
.mjc-topbar-logo img { width: clamp(120px, 12vw, 150px); height: auto; display: block; }
.mjc-topbar-logo::after {
	content: "";
	position: absolute;
	inset: 0;
	background-image: linear-gradient(100deg,
		transparent 40%,
		var(--c-gold-highlight) 48%,
		var(--c-gold-core) 50%,
		var(--c-gold-highlight) 52%,
		transparent 60%);
	background-size: 320% 100%;
	background-repeat: no-repeat;
	-webkit-mask-image: url('../images/logo-white.svg');
	mask-image: url('../images/logo-white.svg');
	-webkit-mask-size: contain;
	mask-size: contain;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	animation: mjc-topbar-sheen 3s ease-in-out infinite;
	pointer-events: none;
}
@keyframes mjc-topbar-sheen {
	0%   { background-position: -220% 0; }
	70%  { background-position: 220% 0; }
	100% { background-position: 220% 0; }
}
@media (prefers-reduced-motion: reduce) {
	.mjc-topbar-logo::after { animation: none; background-position: 0 0; }
}
.mjc-topbar-nav { grid-column: 2; justify-self: center; display: flex; align-items: center; gap: clamp(18px,2.4vw,36px); }
.mjc-topbar-nav a {
	font: 500 12px/1 'Figtree', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-ink);
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}
.mjc-topbar-nav a:hover,
.mjc-topbar-nav a:focus-visible {
	color: var(--c-gold-shadow);
	border-color: var(--c-gold-shadow);
}
.mjc-topbar-nav a.is-current {
	color: var(--c-gold-shadow);
	border-color: var(--c-gold-shadow);
}
/* Column 3 of the topbar's 1fr/auto/1fr grid was already reserved and empty - this is exactly
   where the account trigger balances the centered nav, no layout change needed. */
.mjc-topbar-account { grid-column: 3; justify-self: end; position: relative; display: flex; align-items: center; gap: 16px; }
.mjc-topbar-account-trigger {
	font: 500 12px/1 'Figtree', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--c-ink);
	background: none;
	border: none;
	cursor: pointer;
	padding-bottom: 3px;
	border-bottom: 1px solid transparent;
}
.mjc-topbar-account-trigger:hover {
	color: var(--c-gold-shadow);
	border-color: var(--c-gold-shadow);
}
.mjc-account-menu-list {
	position: absolute;
	top: 100%;
	right: 0;
	margin-top: 10px;
	background: var(--c-white);
	border: 1px solid var(--c-line);
	box-shadow: 0 16px 40px rgba(0,0,0,.14);
	padding: 8px 0;
	min-width: 170px;
	list-style: none;
	z-index: 200;
}
.mjc-account-menu-list li a {
	display: block;
	padding: 10px 20px;
	font: 500 12px/1 'Figtree', sans-serif;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--c-ink);
	white-space: nowrap;
}
.mjc-account-menu-list li a:hover { background: var(--c-surface); color: var(--c-gold-shadow); }

#mj-catalog-app, #mj-catalog-app * { box-sizing: border-box; }
#mj-catalog-app {
	position: fixed;
	top: calc(var(--mjc-topbar-h) + env(safe-area-inset-top, 0px));
	right: 0;
	bottom: 0;
	left: 0;
	background: var(--c-white);
	font-family: 'Figtree', sans-serif;
	color: var(--c-ink);
	display: flex;
	overflow: hidden;
}
#mj-catalog-app button { font-family: inherit; }
#mj-catalog-app img { max-width: none; }

.mjc-mono { font-family: 'DM Mono', monospace; }
.mjc-serif { font-family: 'Newsreader', serif; font-weight: 300; }

/* Loading state */
.mjc-loading {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	font: 400 12px/1 'DM Mono', monospace;
	letter-spacing: .16em;
	color: var(--c-mute);
}

/* ---------------- Rail ---------------- */
.mjc-rail {
	width: 88px;
	flex: none;
	background: var(--c-green);
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 22px 0 20px;
	transition: width .35s cubic-bezier(.22,1,.36,1);
}
.mjc-rail:hover { width: 108px; }
.mjc-rail-nav { display: flex; flex-direction: column; gap: 6px; align-items: center; width: 100%; }
.mjc-rail-item {
	width: 66px;
	padding: 11px 0 8px;
	border-radius: 8px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	cursor: pointer;
	background: transparent;
	color: rgba(255,255,255,.66);
	border: none;
}
.mjc-rail-item.is-active { background: rgba(255,255,255,.12); color: var(--c-gold); }
.mjc-rail-item span { font: 400 8.5px/1 'DM Mono', monospace; letter-spacing: .1em; }
.mjc-rail-foot { margin-top: auto; font: 400 8.5px/1.6 'DM Mono', monospace; letter-spacing: .12em; color: rgba(255,255,255,.45); text-align: center; }

/* ---------------- Field (main content area) ---------------- */
.mjc-field { flex: 1; min-width: 0; position: relative; background: var(--c-white); display: flex; flex-direction: column; overflow: hidden; }

/* ---------------- Grid screen ---------------- */
.mjc-grid-screen { display: flex; flex-direction: column; height: 100%; }
.mjc-grid-head { flex: none; padding: clamp(16px,2.4vh,26px) clamp(20px,3vw,36px) 0; display: flex; align-items: flex-end; justify-content: space-between; border-bottom: 1px solid var(--c-line); flex-wrap: wrap; gap: 16px; }
.mjc-eyebrow { font: 400 11px/1 'DM Mono', monospace; letter-spacing: .16em; color: var(--c-mute); margin-bottom: 9px; }
.mjc-h1 { font: 300 clamp(30px,3.4vw,46px)/1 'Newsreader', serif; letter-spacing: -.01em; color: var(--c-ink); margin-bottom: 18px; }
.mjc-fam-tabs { display: flex; gap: clamp(14px,2vw,26px); flex-wrap: wrap; }
.mjc-fam-tab { padding: 0 0 13px; font: 500 12px/1 'DM Mono', monospace; letter-spacing: .12em; cursor: pointer; border: none; border-bottom: 2px solid transparent; background: none; color: var(--c-mute); }
.mjc-fam-tab.is-active { border-bottom-color: var(--c-ink); color: var(--c-ink); }
.mjc-grid-tools { display: flex; align-items: center; gap: 14px; padding-bottom: 16px; flex-wrap: wrap; }
.mjc-count { font: 400 11px/1 'DM Mono', monospace; letter-spacing: .12em; color: var(--c-mute); }
.mjc-ori-pills { display: flex; border: 1px solid var(--c-line); border-radius: 999px; overflow: hidden; }
.mjc-ori-pill { min-height: 44px; display: flex; align-items: center; padding: 0 18px; font: 500 11px/1 'DM Mono', monospace; letter-spacing: .1em; cursor: pointer; background: var(--c-white); color: var(--c-ink); border: none; }
.mjc-ori-pill.is-active { background: var(--c-green); color: #fff; }

/* Subcategory row — one level down from the family tabs, quieter/smaller, same interaction pattern. */
.mjc-subfam-tabs { display: flex; flex-wrap: wrap; gap: 10px; padding: 14px clamp(20px,3vw,36px) 16px; border-bottom: 1px solid var(--c-line); }
.mjc-subfam-tab {
	min-height: 34px;
	padding: 0 14px;
	display: flex;
	align-items: center;
	font: 500 10px/1 'DM Mono', monospace;
	letter-spacing: .1em;
	cursor: pointer;
	background: var(--c-white);
	color: var(--c-mute);
	border: 1px solid var(--c-line);
	border-radius: 999px;
}
.mjc-subfam-tab.is-active { background: var(--c-ink); color: #fff; border-color: var(--c-ink); }

.mjc-grid-scroll { flex: 1; min-height: 0; overflow: auto; padding: clamp(18px,2.4vh,28px) clamp(20px,3vw,36px) 40px; }
.mjc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 26px 24px; }
/* Infinite-scroll trigger for the grid's batched rendering (catalog-app.js) - sits below .mjc-grid,
   not inside it, so it never becomes a stray empty tile in the grid layout. */
.mjc-grid-sentinel { height: 1px; }
.mjc-tile { position: relative; cursor: pointer; }
.mjc-tile-img-wrap { position: relative; width: 100%; aspect-ratio: 1; background: var(--c-white); border: 1px solid var(--c-line); overflow: hidden; }
.mjc-tile-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mjc-tile-pin { position: absolute; top: 9px; right: 9px; width: 40px; height: 40px; border-radius: 999px; display: flex; align-items: center; justify-content: center; font: 400 15px/1 Figtree, sans-serif; background: rgba(255,255,255,.9); color: var(--c-ink); border: 1px solid var(--c-line); cursor: pointer; }
.mjc-tile-pin.is-on { background: var(--c-green); color: #fff; border-color: var(--c-green); }
.mjc-tile-body { padding: 14px 2px 0; }
.mjc-tile-toprow { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 5px; }
.mjc-tile-fam { font: 400 10px/1 'DM Mono', monospace; letter-spacing: .14em; color: var(--c-mute); }
.mjc-tile-sku { font: 500 10px/1 'DM Mono', monospace; letter-spacing: .1em; color: var(--c-gold-shadow); }
.mjc-tile-name { font: 400 19px/1.25 'Newsreader', serif; color: var(--c-ink); margin-bottom: 7px; }
.mjc-tile-spec { font: 400 11px/1.5 'DM Mono', monospace; letter-spacing: .06em; color: var(--c-mute); margin-bottom: 9px; }
.mjc-tile-price { font: 500 17px/1 Figtree, sans-serif; color: var(--c-ink); }

/* ---------------- Discount price breakdown ----------------
   Dropped in wherever a price renders (tiles, detail, present, search, compare, tray, the qty
   popup) by priceInnerHtml() in catalog-app.js, in place of a plain money string, only for a
   client with a discount rate set. Styled as a familiar "was / now" retail treatment rather than
   spelling out the real ÷ rate = divided formula with a bare math operator - the real price is
   struck through and muted, the rate sits in a small pill between the two prices (present for
   transparency, but visually secondary), and the divided price is the one thing bolded and full
   size, since it's the number that actually matters to this client. One fixed size scale
   regardless of where it appears, rather than matching each context's own (very different) price
   font size - three elements together can't all be as large as the single number they replace,
   and a consistent size reads more clearly than resizing per context. */
.mjc-price-block { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mjc-price-real {
	font: 400 13px/1 Figtree, sans-serif;
	color: var(--c-mute);
	text-decoration: line-through;
	text-decoration-color: var(--c-ink);
	text-decoration-thickness: 1px;
}
.mjc-price-rate {
	font: 500 10px/1 'DM Mono', monospace;
	letter-spacing: .04em;
	color: var(--c-gold-shadow);
	background: var(--c-gold-highlight);
	padding: 3px 7px;
	border-radius: 999px;
}
.mjc-price-divided { font: 700 17px/1 Figtree, sans-serif; color: var(--c-ink); }

/* ---------------- Detail screen ---------------- */
.mjc-detail-screen { display: flex; height: 100%; }
.mjc-detail-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mjc-detail-topbar { flex: none; padding: 20px clamp(20px,3vw,36px); display: flex; align-items: center; justify-content: space-between; }
.mjc-back { min-height: 44px; display: flex; align-items: center; gap: 10px; font: 400 11px/1 'DM Mono', monospace; letter-spacing: .14em; color: var(--c-mute); cursor: pointer; background: none; border: none; }
.mjc-arrow-nav { display: flex; align-items: center; gap: 8px; }
.mjc-arrow-btn { width: 44px; height: 44px; border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; font: 400 16px/1 Figtree, sans-serif; color: var(--c-ink); cursor: pointer; background: none; }
.mjc-detail-imgwrap { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; padding: 0 30px; }
.mjc-detail-img { position: relative; width: min(50vh, 480px); height: min(50vh, 480px); cursor: zoom-in; border: 1px solid var(--c-line); }
.mjc-detail-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mjc-detail-thumbrow { flex: none; padding: 0 clamp(20px,3vw,36px) 26px; display: flex; align-items: center; justify-content: space-between; }
.mjc-thumbs { display: flex; gap: 10px; flex-wrap: wrap; }
.mjc-thumb { width: 68px; height: 68px; border: 1px solid var(--c-line); cursor: pointer; overflow: hidden; }
.mjc-thumb.is-active { border-color: var(--c-gold-shadow); border-width: 2px; }
.mjc-thumb img { width: 100%; height: 100%; object-fit: cover; }
.mjc-hint { font: 400 10px/1 'DM Mono', monospace; letter-spacing: .14em; color: var(--c-mute); }

/* Hover magnifier — lives on the tapped-open zoom overlay (.mjc-zoom-img), not the small
   default detail photo, so it only appears once the user has deliberately zoomed in.
   Desktop/trackpad only (a touch-only iPad has no hover to trigger it; the tap-to-open-zoom
   gesture is still the touch path in). The panel is position:fixed and placed relative to the
   image's live bounding rect, so it works regardless of how much room is left beside it. */
.mjc-lens {
	position: absolute;
	width: 130px;
	height: 130px;
	border: 1px solid rgba(255,255,255,.9);
	background: rgba(255, 209, 35, .18);
	pointer-events: none;
	display: none;
}
.mjc-zoom-img.is-magnifying .mjc-lens { display: block; }
.mjc-magnifier {
	position: fixed;
	background-color: var(--c-white);
	background-repeat: no-repeat;
	border: 1px solid var(--c-line);
	box-shadow: 0 12px 40px rgba(0,0,0,.18);
	pointer-events: none;
	z-index: 55;
	display: none;
}
.mjc-magnifier.is-active { display: block; }
@media (hover: none), (pointer: coarse) {
	.mjc-lens, .mjc-magnifier { display: none !important; }
}

.mjc-detail-side { width: min(34vw, 430px); flex: none; border-left: 1px solid var(--c-line); padding: clamp(20px,3vh,30px) clamp(20px,2.6vw,32px); display: flex; flex-direction: column; overflow-y: auto; }
.mjc-side-toprow { display: flex; justify-content: space-between; align-items: baseline; }
.mjc-side-name { font: 300 clamp(26px,2.6vw,36px)/1.12 'Newsreader', serif; letter-spacing: -.01em; color: var(--c-ink); margin: 12px 0 0; }
.mjc-side-price-row { display: flex; align-items: baseline; gap: 10px; margin: 16px 0 0; }
.mjc-side-price { font: 700 clamp(26px,2.4vw,32px)/1 Figtree, sans-serif; color: var(--c-ink); }
.mjc-rule { height: 1px; background: var(--c-gold); margin: 22px 0 0; }
.mjc-side-spec { font: 500 12px/1.6 'DM Mono', monospace; letter-spacing: .1em; color: var(--c-ink); margin: 18px 0 0; }
.mjc-spec-table { display: grid; grid-template-columns: 1fr auto; gap: 0; margin: 20px 0 0; }
.mjc-spec-row-label { padding: 11px 0; border-top: 1px solid var(--c-line); font: 400 10px/1.4 'DM Mono', monospace; letter-spacing: .12em; color: var(--c-mute); }
.mjc-spec-row-val { padding: 11px 0; border-top: 1px solid var(--c-line); font: 500 13px/1.4 'DM Mono', monospace; color: var(--c-ink); text-align: right; }
.mjc-spec-table > :last-child, .mjc-spec-table > :nth-last-child(2) { border-bottom: 1px solid var(--c-line); }
.mjc-side-actions { margin-top: auto; display: flex; flex-direction: column; gap: 10px; padding-top: 24px; }
.mjc-btn-primary { min-height: 54px; display: flex; align-items: center; justify-content: center; background: var(--c-green); color: #fff; font: 500 12px/1 'DM Mono', monospace; letter-spacing: .14em; cursor: pointer; border: none; }
.mjc-btn-row { display: flex; gap: 10px; }
.mjc-btn-outline { flex: 1; min-height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--c-ink); color: var(--c-ink); font: 500 11px/1 'DM Mono', monospace; letter-spacing: .12em; cursor: pointer; background: none; }
.mjc-btn-outline[disabled] { opacity: .35; cursor: default; }

/* ---------------- Present screen ---------------- */
.mjc-present-screen { height: 100%; display: flex; flex-direction: column; background: #fff; }
.mjc-present-top { flex: none; display: flex; align-items: center; justify-content: space-between; padding: 24px clamp(20px,3vw,40px); }
.mjc-present-body { flex: 1; min-height: 0; display: flex; align-items: center; gap: 20px; padding: 0 clamp(16px,3vw,40px); }
.mjc-round-btn { width: 52px; height: 52px; flex: none; border-radius: 999px; border: 1px solid var(--c-line); display: flex; align-items: center; justify-content: center; font: 400 18px/1 Figtree, sans-serif; color: var(--c-ink); cursor: pointer; background: none; }
.mjc-present-imgwrap { flex: 1; min-width: 0; height: 100%; display: flex; align-items: center; justify-content: center; }
.mjc-present-img { width: min(58vh, 620px); height: min(58vh, 620px); }
.mjc-present-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mjc-present-foot { flex: none; padding: 0 clamp(16px,3vw,40px) 40px; display: flex; flex-direction: column; align-items: center; gap: 12px; text-align: center; }
.mjc-present-name { font: 300 clamp(28px,3.6vw,44px)/1 'Newsreader', serif; letter-spacing: -.01em; color: var(--c-ink); }
.mjc-present-spec { font: 500 12px/1 'DM Mono', monospace; letter-spacing: .14em; color: var(--c-ink); }
.mjc-present-price { font: 700 clamp(22px,2.4vw,28px)/1 Figtree, sans-serif; color: var(--c-ink); }

/* ---------------- Compare screen ---------------- */
.mjc-compare-screen { height: 100%; display: flex; flex-direction: column; background: #fff; }
.mjc-compare-head { flex: none; padding: clamp(18px,2.6vh,26px) clamp(20px,3vw,36px) 20px; border-bottom: 1px solid var(--c-line); }
.mjc-compare-body { flex: 1; min-height: 0; display: flex; overflow: auto; }
.mjc-compare-col { flex: 1; min-width: 260px; padding: clamp(18px,2.4vw,30px); border-right: 1px solid var(--c-line); display: flex; flex-direction: column; }
.mjc-compare-imgwrap { width: 100%; aspect-ratio: 1; max-height: 340px; border: 1px solid var(--c-line); margin-bottom: 18px; overflow: hidden; }
.mjc-compare-imgwrap img { width: 100%; height: 100%; object-fit: cover; }
.mjc-compare-empty { display: flex; align-items: center; justify-content: center; color: var(--c-mute); font: 400 12px/1.5 Figtree, sans-serif; text-align: center; padding: 20px; }

/* ---------------- Search screen ---------------- */
.mjc-search-screen { height: 100%; display: flex; flex-direction: column; background: #fff; }
.mjc-search-head { flex: none; padding: clamp(20px,3vh,34px) clamp(20px,3vw,36px) 0; }
.mjc-search-input-row { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--c-ink); padding: 0 0 14px; }
.mjc-search-input { flex: 1; border: 0; outline: 0; font: 400 clamp(18px,2vw,26px)/1.2 Figtree, sans-serif; color: var(--c-ink); background: transparent; }
.mjc-quick-row { display: flex; gap: 9px; margin: 18px 0 0; flex-wrap: wrap; }
.mjc-quick-chip { min-height: 40px; display: flex; align-items: center; padding: 0 16px; border: 1px solid var(--c-line); font: 400 11px/1 'DM Mono', monospace; letter-spacing: .1em; color: var(--c-ink); cursor: pointer; background: none; }
.mjc-search-results { flex: 1; min-height: 0; overflow: auto; padding: 22px clamp(20px,3vw,36px) 40px; }
.mjc-result-row { display: flex; align-items: center; gap: 20px; padding: 14px 0; border-top: 1px solid var(--c-line); cursor: pointer; }
.mjc-result-img { width: 70px; height: 70px; flex: none; border: 1px solid var(--c-line); overflow: hidden; }
.mjc-result-img img { width: 100%; height: 100%; object-fit: cover; }
.mjc-result-name { font: 400 19px/1.2 'Newsreader', serif; color: var(--c-ink); margin-bottom: 5px; }
.mjc-result-spec { font: 400 11px/1.4 'DM Mono', monospace; letter-spacing: .06em; color: var(--c-mute); }
.mjc-result-sku { font: 500 11px/1 'DM Mono', monospace; letter-spacing: .12em; color: var(--c-gold-shadow); width: 66px; flex: none; }
.mjc-result-price { font: 500 17px/1 Figtree, sans-serif; color: var(--c-ink); width: 100px; flex: none; text-align: right; }

/* ---------------- Selection tray ---------------- */
.mjc-tray-overlay { position: absolute; inset: 0; background: rgba(28,58,44,.34); display: flex; justify-content: flex-end; z-index: 40; }
.mjc-tray-scrim { flex: 1; }
.mjc-tray { width: min(90vw, 420px); background: #fff; height: 100%; display: flex; flex-direction: column; box-shadow: -24px 0 60px rgba(0,0,0,.16); }
.mjc-tray-head { flex: none; padding: 26px 26px 18px; border-bottom: 1px solid var(--c-line); display: flex; align-items: flex-start; justify-content: space-between; }
.mjc-tray-title { font: 300 28px/1 'Newsreader', serif; color: var(--c-ink); }
.mjc-tray-close { min-height: 44px; min-width: 44px; display: flex; align-items: center; justify-content: center; font: 400 14px/1 Figtree, sans-serif; color: var(--c-mute); cursor: pointer; background: none; border: none; }
.mjc-tray-body { flex: 1; min-height: 0; overflow: auto; padding: 6px 26px; }
.mjc-tray-item { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--c-line); }
.mjc-tray-img { width: 62px; height: 62px; flex: none; border: 1px solid var(--c-line); overflow: hidden; }
.mjc-tray-img img { width: 100%; height: 100%; object-fit: cover; }
.mjc-tray-item-info { flex: 1; min-width: 0; }
.mjc-tray-item-qtyrow { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; gap: 12px; }
.mjc-tray-item-price { flex: none; }
.mjc-tray-empty { padding: 40px 0; text-align: center; color: var(--c-mute); font: 400 12px/1.6 Figtree, sans-serif; }
.mjc-tray-foot { flex: none; padding: 22px 26px 26px; border-top: 1px solid var(--c-line); }
.mjc-tray-total-row { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 18px; }

/* ---------------- Quantity stepper (qty prompt + tray rows) ----------------
   .mjc-qty-stepper is the full-size version used in the "define quantity" popup;
   .mjc-qty-stepper--sm (same markup, added modifier class) shrinks it to fit inline in a
   tray row. Native number-input spinners are stripped since the +/- buttons replace them. */
.mjc-qty-stepper { display: inline-flex; align-items: stretch; border: 1px solid var(--c-line); width: fit-content; }
.mjc-qty-btn { width: 40px; min-height: 40px; background: none; border: none; font: 400 17px/1 Figtree, sans-serif; color: var(--c-ink); cursor: pointer; }
.mjc-qty-btn:hover:not(:disabled) { background: var(--c-surface); }
.mjc-qty-btn:disabled { opacity: .3; cursor: default; }
.mjc-qty-input { width: 48px; min-height: 40px; border: none; border-left: 1px solid var(--c-line); border-right: 1px solid var(--c-line); text-align: center; font: 500 15px/1 Figtree, sans-serif; color: var(--c-ink); -moz-appearance: textfield; background: none; }
.mjc-qty-input::-webkit-outer-spin-button, .mjc-qty-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mjc-qty-stepper--sm .mjc-qty-btn { width: 30px; min-height: 30px; font-size: 14px; }
.mjc-qty-stepper--sm .mjc-qty-input { width: 36px; min-height: 30px; font-size: 12px; }

/* ---------------- Certificate / Zoom / Quantity overlays ---------------- */
.mjc-modal-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 40px; z-index: 50; }
.mjc-modal-scrim { position: absolute; inset: 0; background: rgba(28,58,44,.5); }
.mjc-cert-card { width: min(90vw, 520px); background: #fff; padding: 34px; }
.mjc-qty-card { position: relative; width: min(90vw, 380px); background: #fff; padding: 34px; text-align: center; }
.mjc-qty-card-item { display: flex; align-items: center; gap: 14px; text-align: left; margin: 20px 0 24px; }
.mjc-qty-label { font: 400 10px/1 'DM Mono', monospace; letter-spacing: .14em; color: var(--c-mute); margin-bottom: 10px; }
.mjc-qty-card .mjc-qty-stepper { margin: 0 auto; }
.mjc-qty-line-total { margin-top: 16px; font: 500 11px/1 'DM Mono', monospace; letter-spacing: .1em; color: var(--c-mute); }
.mjc-zoom-overlay { position: absolute; inset: 0; background: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; cursor: zoom-out; z-index: 50; }
.mjc-zoom-img { position: relative; width: min(70vw, 820px); height: min(70vh, 700px); }
.mjc-zoom-img img { width: 100%; height: 100%; object-fit: contain; }

/* ---------------- Access status notice ----------------
   Shown instead of the catalog app itself for a logged-in visitor who isn't
   an approved client (pending/denied/revoked) - no #mj-catalog-app is ever
   rendered in this case, so there is nothing for catalog-app.js to fetch. */
.mjc-status-notice {
	position: fixed;
	top: calc(var(--mjc-topbar-h) + env(safe-area-inset-top, 0px));
	left: 0; right: 0; bottom: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding: 40px;
	background: var(--c-surface);
}
.mjc-status-notice h2 { font: 300 28px/1.2 'Newsreader', serif; color: var(--c-ink); margin: 0 0 12px; }
.mjc-status-notice p { font: 400 14px/1.6 'Figtree', sans-serif; color: var(--c-mute); max-width: 440px; margin: 0 0 24px; }
.mjc-status-actions { display: flex; gap: 16px; }
.mjc-status-reconsider,
.mjc-status-logout {
	font: 500 13px/1 'Figtree', sans-serif;
	letter-spacing: .08em;
	text-transform: uppercase;
	padding: 14px 28px;
	border-radius: 2px;
	cursor: pointer;
}
.mjc-status-reconsider { background: var(--c-gold); color: var(--c-ink); border: none; }
.mjc-status-reconsider:hover { background: var(--c-gold-core); }
.mjc-status-logout { background: none; border: 1px solid var(--c-line); color: var(--c-ink); }
.mjc-status-logout:hover { border-color: var(--c-ink); }

/* Responsive: below iPad-portrait-ish widths, collapse rail labels and stack detail. */
@media (max-width: 880px) {
	.mjc-rail { width: 64px; }
	.mjc-rail-item span { display: none; }
	.mjc-rail-item { width: 44px; }
	.mjc-detail-screen { flex-direction: column; overflow-y: auto; }
	.mjc-detail-side { width: 100%; border-left: none; border-top: 1px solid var(--c-line); }
	.mjc-compare-body { flex-direction: column; }
	.mjc-compare-col { border-right: none; border-bottom: 1px solid var(--c-line); }
}

/* Responsive: this topbar's 1fr/auto/1fr grid (logo | nav | account) was only ever built for
   the iPad-landscape width this app targets - at phone width the four nav links, logo and
   account trigger have nowhere near enough room and visibly collide/overlap. Below this
   breakpoint, stack the nav onto its own row and grow --mjc-topbar-h to match, which
   automatically carries through to #mj-catalog-app's and .mjc-status-notice's top offset
   since both are already calc()'d from that same variable. */
@media (max-width: 680px) {
	:root { --mjc-topbar-h: 96px; }
	#mjc-topbar {
		grid-template-columns: 1fr auto;
		grid-template-rows: auto auto;
		row-gap: 8px;
		padding-top: calc(env(safe-area-inset-top, 0px) + 10px);
		padding-bottom: 10px;
	}
	.mjc-topbar-logo { grid-column: 1; grid-row: 1; }
	.mjc-topbar-account { grid-column: 2; grid-row: 1; }
	.mjc-topbar-nav {
		grid-column: 1 / -1;
		grid-row: 2;
		justify-self: stretch;
		justify-content: center;
		flex-wrap: wrap;
		gap: 8px 16px;
	}
}