/* Model page v2 (inc/model-page.php, assets/model.js) and the quote bar + panel. Approved mockup:
   docs/mockups/product-page.html. Loaded on v2 product pages only. Brand tokens come from style.css.
   Flatsome styles bare buttons, inputs, tables and labels (uppercase, margins, inset shadows), so
   everything here is reset under .slm / .slq-*. */

.slm { --slm-ok: #1F7A4D; --slm-ok-tint: #E8F5EE; --slm-amber: #8A5300; --slm-amber-tint: #FFF4E0; --slm-wa: #1E7D45; --slm-edge: #d5e0f4; --slm-field: #b9c7e4;
	container-type: inline-size; container-name: slm; color: var(--sl-ink); font-size: 15px; line-height: 1.55; }
.slm *, .slq-bar *, .slq-panel * { box-sizing: border-box; }
.slm h1, .slm h2, .slm h3, .slq-panel h2 { text-wrap: balance; letter-spacing: -0.01em; margin: 0; text-transform: none; color: var(--sl-ink); }
.slm button, .slq-bar button, .slq-panel button, .slm-zoomd button { text-transform: none; letter-spacing: 0; margin: 0; line-height: 1.2; box-shadow: none; min-height: 0; font-family: var(--sl-font); font-size: inherit; }
.slm input, .slm select, .slq-panel input, .slq-panel textarea { box-shadow: none; margin: 0; font-family: var(--sl-font); }
.slm label, .slm fieldset, .slm legend { margin: 0; text-transform: none; letter-spacing: 0; }
.slm :focus-visible, .slq-panel :focus-visible, .slq-bar :focus-visible { outline: 2px solid var(--sl-signature); outline-offset: 2px; }
.slm-wrap { max-width: 1080px; margin: 0 auto; padding-inline: 24px; }
/* Flatsome's product page header (title bar, breadcrumb, prev/next) is unhooked in inc/model-page.php; this is the backstop. */
body.sl-v2 .product-page-title, body.sl-v2 .next-prev-thumbs { display: none; }
@container slm (max-width: 640px) { .slm-wrap { padding-inline: 16px; } }

.slm-crumbs { font-size: 13px; color: var(--sl-muted); padding-block: 16px 4px; }
.slm-crumbs a { color: var(--sl-muted); text-decoration: none; }
.slm-crumbs span { margin: 0 6px; color: #94a3b8; }

/* ------------------------------------------------------------ 1. buy box */
.slm-buy { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 40px; padding-block: 14px 36px; align-items: start; }
@container slm (max-width: 900px) { .slm-buy { grid-template-columns: minmax(0, 1fr); gap: 18px; padding-block: 8px 26px; } }
.slm-photo { position: sticky; top: 90px; }
@container slm (max-width: 900px) { .slm-photo { position: static; } }
.slm .slm-frame { aspect-ratio: 1 / 1; width: 100%; max-width: 100%; background: radial-gradient(120% 90% at 50% 40%, #fff 0%, var(--sl-tint) 70%); border: 1px solid var(--sl-line); border-radius: 6px; display: grid; place-items: center; padding: 8%; cursor: zoom-in; position: relative; }
.slm .slm-frame img { position: absolute; inset: 8%; width: 84%; height: 84%; max-width: none; object-fit: contain; mix-blend-mode: multiply; }
.slm-frame--empty { cursor: default; }
.slm-zoom { position: absolute; right: 10px; bottom: 10px; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: 999px; font-size: 12px; padding: 4px 10px; color: var(--sl-muted); }
@container slm (max-width: 640px) { .slm .slm-frame { aspect-ratio: 16 / 10; } .slm .slm-frame img { inset: 5%; width: 90%; height: 90%; } }
.slm-thumbs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.slm .slm-thumbs button { width: 64px; aspect-ratio: 1; border: 1px solid var(--sl-line); border-radius: 4px; background: var(--sl-tint); padding: 4px; cursor: pointer; }
.slm .slm-thumbs button[aria-current="true"] { border-color: var(--sl-blue); box-shadow: 0 0 0 1px var(--sl-blue); }
.slm-thumbs img { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; }

.slm-eyebrow { display: flex; gap: 8px; align-items: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; margin: 0; }
.slm-eyebrow a { text-decoration: none; color: var(--sl-blue); }
.slm-eyebrow .slm-type { color: var(--sl-muted); }
.slm-eyebrow i { width: 4px; height: 4px; border-radius: 50%; background: #94a3b8; }
.slm .slm-title { font-size: clamp(1.6rem, 1.1rem + 1.6vw, 2.35rem); line-height: 1.15; font-weight: 700; margin: 8px 0; }
.slm-lede { color: var(--sl-muted); max-width: 62ch; margin: 0 0 18px; }

.slm-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); border: 1px solid var(--sl-line); border-radius: 6px; margin: 0 0 18px; }
.slm-facts div { padding: 10px 14px; border-left: 1px solid var(--sl-line); min-width: 0; }
.slm-facts div:first-child { border-left: 0; }
.slm-facts dt { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sl-muted); }
.slm-facts dd { margin: 2px 0 0; font-weight: 700; font-size: 1.05rem; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
@container slm (max-width: 640px) {
	.slm-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.slm-facts div:nth-child(odd) { border-left: 0; }
	.slm-facts div:nth-child(n+3) { border-top: 1px solid var(--sl-line); }
}

.slm-picker { background: var(--sl-tint); border: 1px solid var(--slm-edge); border-radius: 8px; padding: 18px; display: grid; gap: 14px; }
.slm .slm-l, .slm-certs legend { font-size: 12px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sl-muted); display: block; margin-bottom: 6px; padding: 0; }
.slm-prow { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: end; }
.slm select { width: 100%; height: 48px; border: 1px solid var(--slm-field); border-radius: var(--sl-radius); background-color: var(--sl-surface); padding: 0 12px; font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; }
.slm-step { display: inline-flex; align-items: stretch; border: 1px solid var(--slm-field); border-radius: var(--sl-radius); background: var(--sl-surface); height: 48px; }
.slm .slm-step button { width: 40px; border: 0; background: none; font-size: 18px; cursor: pointer; color: var(--sl-blue); padding: 0; }
.slm .slm-step input { width: 46px; height: 100%; border: 0; text-align: center; font-weight: 600; font-size: 16px; font-variant-numeric: tabular-nums; padding: 0; background: none; }
.slm-ladder { display: grid; gap: 4px; }
.slm-bar { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(90deg, var(--slm-edge), var(--sl-signature)); }
.slm-mark { position: absolute; top: 50%; left: 0; width: 16px; height: 16px; border-radius: 50%; background: var(--sl-surface); border: 3px solid var(--sl-deep); transform: translate(-50%, -50%); transition: left .25s ease; }
.slm-ends { display: flex; justify-content: space-between; font-size: 12px; color: var(--sl-muted); font-variant-numeric: tabular-nums; }
.slm-ends b { color: var(--sl-ink); }

.slm-certs { border: 0; padding: 0; display: grid; gap: 8px; container-type: inline-size; }
.slm-incl { display: flex; gap: 8px; align-items: center; font-size: 14px; margin: 0; }
.slm-incl svg { width: 16px; height: 16px; color: var(--slm-ok); flex: none; }
.slm-cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
@container (max-width: 420px) { .slm-cgrid { grid-template-columns: minmax(0, 1fr); } }
.slm .slm-cert, .sl-cert { display: grid; grid-template-columns: 18px minmax(0, 1fr); gap: 9px; align-items: center; background: var(--sl-surface); border: 1px solid #d5e0f4; border-radius: var(--sl-radius); padding: 8px 10px; cursor: pointer; font-size: 13.5px; line-height: 1.3; font-weight: 400; color: var(--sl-ink); }
.slm .slm-cert input, .sl-cert input { width: 17px; height: 17px; margin: 0; accent-color: var(--sl-blue); }
.slm-cert small, .sl-cert small { display: block; color: #8A5300; font-size: 12px; font-weight: 600; }
.slm-cert:has(input:checked), .sl-cert:has(input:checked) { border-color: var(--sl-blue); background: #f7f9ff; }
.slm-note { font-size: 12.5px; color: var(--sl-muted); margin: 2px 0 0; }

.slm-acts { display: flex; flex-wrap: wrap; gap: 10px; }
.slm .slm-btn, .slq-bar .slm-btn { min-height: 48px; padding: 0 20px; border-radius: var(--sl-radius); font-weight: 600; font-size: 15px; cursor: pointer; border: 1px solid var(--sl-blue); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; }
.slm .slm-btn--p { background: var(--sl-blue); color: #fff; flex: 1 1 200px; }
.slm .slm-btn--p:hover { background: var(--sl-blue-700); }
.slm .slm-btn--p.is-added { background: var(--slm-ok); border-color: var(--slm-ok); }
.slm .slm-btn--o { background: var(--sl-surface); color: var(--sl-blue); flex: 1 1 160px; }
.slm .slm-btn--o:hover { background: #e6edfb; }
.slm-wa { display: inline-flex; gap: 8px; align-items: center; font-weight: 600; color: var(--slm-wa); text-decoration: none; font-size: 14px; }
.slm-wa svg { width: 18px; height: 18px; }
.slm-trust { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--sl-muted); }
.slm-trust li { display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.slm-trust svg { width: 15px; height: 15px; flex: none; color: var(--sl-blue); }

/* ------------------------------------------------------------ 2. all sizes */
.slm-sizes { background: var(--sl-tint); border-block: 1px solid #dbe4f5; padding-block: 34px 40px; }
.slm-shead { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: end; margin-bottom: 16px; }
.slm-shead h2 { font-size: 1.5rem; }
.slm-shead p { margin: 2px 0 0; color: var(--sl-muted); font-size: 14px; }
.slm-grow { flex: 1 1 260px; }
.slm-filter { position: relative; flex: 0 1 300px; min-width: 0; margin: 0; }
.slm .slm-filter input { width: 100%; height: 42px; border: 1px solid var(--slm-field); border-radius: var(--sl-radius); padding: 0 12px 0 36px; background: var(--sl-surface); font-size: 15px; }
.slm-filter svg { position: absolute; left: 11px; top: 12px; width: 18px; height: 18px; color: var(--sl-muted); }
.slm-tbox { background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: 6px; overflow: auto; max-height: 560px; }
.slm .slm-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; margin: 0; border: 0; }
.slm .slm-table thead th { position: sticky; top: 0; background: var(--sl-surface); z-index: 1; text-align: left; font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-muted); padding: 12px 16px; border: 0; border-bottom: 2px solid var(--sl-line); white-space: nowrap; }
.slm .slm-table tbody td { padding: 10px 16px; border: 0; border-bottom: 1px solid var(--sl-line); white-space: nowrap; vertical-align: middle; color: var(--sl-ink); }
.slm .slm-table tbody tr:last-child td { border-bottom: 0; }
.slm .slm-table tbody tr:hover { background: #f8faff; }
.slm .slm-table td.slm-wll { font-weight: 700; }
.slm .slm-table td.slm-part { font-family: var(--sl-mono); font-size: 13.5px; color: var(--sl-muted); }
.slm .slm-table td.slm-lb { width: 34%; min-width: 120px; }
.slm-lb span { display: block; height: 6px; border-radius: 999px; background: var(--sl-line); overflow: hidden; }
.slm-lb i { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, #9DB8EC, var(--sl-signature)); }
.slm .slm-table td.slm-act { text-align: right; width: 1%; }
.slm-in { display: inline-flex; gap: 10px; align-items: center; }
.slm .slm-in .slm-step { height: 36px; }
.slm .slm-in .slm-step button { width: 30px; font-size: 16px; }
.slm .slm-in .slm-step input { width: 36px; font-size: 15px; }
.slm .slm-add { min-height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600; border-radius: var(--sl-radius); border: 1px solid var(--sl-blue); background: var(--sl-surface); color: var(--sl-blue); cursor: pointer; white-space: nowrap; }
.slm .slm-add:hover { background: var(--sl-tint); }
.slm .slm-table tr.is-in { background: var(--slm-ok-tint); }
.slm .slm-table tr.is-in .slm-add { background: var(--slm-ok); border-color: var(--slm-ok); color: #fff; }
.slm .slm-table tr.is-in .slm-lb i { background: var(--slm-ok); }
.slm .slm-table tr.is-picked { box-shadow: inset 3px 0 0 var(--sl-blue); }
.slm-none { padding: 18px 16px; color: var(--sl-muted); margin: 0; }
.slm-addw { font-size: 13px; color: var(--sl-muted); margin: 10px 0 0; }
.slm-addw b { color: var(--sl-ink); font-weight: 600; }
.slm-qnote { font-size: 13px; color: var(--sl-muted); margin: 6px 0 0; }

@container slm (max-width: 640px) {
	.slm-tbox { max-height: none; background: none; border: 0; overflow: visible; }
	.slm .slm-table, .slm .slm-table tbody { display: block; }
	.slm .slm-table thead { display: none; }
	.slm .slm-table tbody { display: grid; gap: 10px; }
	.slm .slm-table tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 12px; background: var(--sl-surface); border: 1px solid var(--sl-line); border-radius: 6px; padding: 12px 14px; }
	.slm .slm-table tbody td { border: 0; padding: 0; white-space: normal; }
	.slm .slm-table td.slm-wll { grid-column: 1; grid-row: 1; font-size: 1.35rem; line-height: 1.2; }
	.slm .slm-table td.slm-c { grid-column: 1; font-size: 13.5px; color: var(--sl-muted); }
	.slm .slm-table td.slm-c::before { content: attr(data-h) ": "; font-family: var(--sl-font); }
	.slm .slm-table td.slm-lb { display: none; }
	.slm .slm-table td.slm-act { grid-column: 2; grid-row: 1 / span 4; align-self: center; width: auto; }
	.slm-in { flex-direction: column; align-items: stretch; gap: 6px; }
}

/* ------------------------------------------------------------ 3. details, 4. related */
.slm-details { padding-block: 40px; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 40px; align-items: start; content-visibility: auto; contain-intrinsic-size: auto 600px; }
@container slm (max-width: 900px) { .slm-details { grid-template-columns: minmax(0, 1fr); gap: 24px; } }
.slm-details h2, .slm-related h2 { font-size: 1.35rem; margin-bottom: 10px; }
.slm-body { max-width: 68ch; color: #334155; }
.slm-body p { margin: 0 0 12px; }
.slm-body h3 { font-size: 1.02rem; margin: 18px 0 6px; }
.slm-body ul { margin: 0 0 12px; padding-left: 20px; display: grid; gap: 4px; }
.slm-about.is-clamped .slm-body { max-height: 260px; overflow: hidden; -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
.slm .slm-more { background: none; border: 0; color: var(--sl-blue); font-weight: 600; cursor: pointer; padding: 6px 0; }
.slm-get { border: 1px solid var(--sl-line); border-radius: 8px; padding: 20px; }
.slm-get ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 12px; }
.slm-get li { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 10px; margin: 0; }
.slm-get li b { display: block; }
.slm-get li > span > span { color: var(--sl-muted); font-size: 14px; }
.slm-ic { width: 28px; height: 28px; border-radius: 50%; background: var(--sl-tint); display: grid; place-items: center; color: var(--sl-blue); }
.slm-ic svg { width: 15px; height: 15px; }
.slm-related { padding-block: 8px 44px; content-visibility: auto; contain-intrinsic-size: auto 420px; }
.slm-cards { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
@container slm (max-width: 900px) { .slm-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.slm-card { border: 1px solid var(--sl-line); border-radius: 6px; overflow: hidden; text-decoration: none; color: inherit; display: flex; flex-direction: column; }
.slm-card:hover { border-color: var(--slm-edge); box-shadow: 0 6px 18px rgba(20, 47, 102, .08); }
.slm-cim { aspect-ratio: 1; background: var(--sl-tint); display: grid; place-items: center; padding: 10%; }
.slm-cim img { max-height: 100%; width: auto; object-fit: contain; mix-blend-mode: multiply; }
.slm-ctx { padding: 10px 12px 14px; display: grid; gap: 2px; }
.slm-cb { font-size: 11px; font-weight: 600; letter-spacing: .07em; text-transform: uppercase; color: var(--sl-blue); }
.slm-cn { font-weight: 600; line-height: 1.3; font-size: 14px; color: var(--sl-ink); }
.slm-cr { font-size: 13px; color: var(--sl-muted); font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------ 5. quote bar + panel */
.slq-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding-bottom: env(safe-area-inset-bottom, 0px); background: var(--sl-deeper); color: #fff; transform: translateY(110%); transition: transform .25s ease; }
.slq-bar.is-on { transform: none; }
body.has-slq-bar { padding-bottom: 72px; }
.slq-bar .slm-wrap { display: flex; gap: 12px; align-items: center; min-height: 64px; }
.slq-t { flex: 1; min-width: 0; color: #fff; }
.slq-t b { font-variant-numeric: tabular-nums; }
.slq-t em { font-style: normal; }
.slq-t span { display: block; color: #b9c7e4; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slq-bar .slm-btn { min-height: 42px; background: #fff; color: var(--sl-deep); border-color: #fff; flex: none; }
.slq-wa { flex: none; width: 42px; height: 42px; border-radius: var(--sl-radius); background: #1E7D45; display: grid; place-items: center; }
.slq-wa svg { width: 20px; height: 20px; color: #fff; }
@media (max-width: 640px) { .slq-t span, .slq-t em { display: none; } }

html.slq-lock, html.slq-lock body { overflow: hidden; }
.slq-scrim { position: fixed; inset: 0; background: rgba(14, 32, 72, .45); opacity: 0; transition: opacity .2s; z-index: 1000; }
.slq-scrim.is-on { opacity: 1; }
.slq-panel { position: fixed; top: 0; right: 0; bottom: 0; width: min(440px, 100%); background: var(--sl-surface); z-index: 1001; transform: translateX(100%); transition: transform .28s ease; display: flex; flex-direction: column; box-shadow: -20px 0 50px rgba(14, 32, 72, .25); color: var(--sl-ink); }
.slq-panel.is-on { transform: none; }
@media (max-width: 640px) {
	.slq-panel { top: auto; left: 0; width: 100%; max-height: 90vh; max-height: 90dvh; border-radius: 18px 18px 0 0; transform: translateY(100%); padding-bottom: env(safe-area-inset-bottom, 0px); }
	.slq-panel.is-on { transform: none; }
}
.slq-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--sl-line); }
.slq-head h2 { font-size: 1.15rem; flex: 1; }
.slq-panel .slq-x, .slm-zoomd .slq-x { width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--sl-line); background: var(--sl-surface); cursor: pointer; font-size: 18px; line-height: 1; padding: 0; color: var(--sl-ink); }
.slq-body { overflow: auto; padding: 16px 20px 24px; overscroll-behavior: contain; }
.slq-body .sl-enq-items-list { list-style: none; margin: 0 0 6px; padding: 0; display: grid; gap: 8px; }
.slq-body .sl-enq-items-list li { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; gap: 8px 10px; align-items: center; border: 1px solid var(--sl-line); border-radius: 6px; padding: 10px 12px; margin: 0; }
.slq-body .sl-enq-item { font-size: 13.5px; line-height: 1.35; }
.slq-body .sl-enq-item b { display: block; font-size: 14px; }
.slq-body .sl-enq-qty { font-size: 12px; font-weight: 600; display: inline-flex; gap: 6px; align-items: center; margin: 0; }
.slq-body .sl-enq-qty input { width: 64px; height: 36px; text-align: center; border: 1px solid var(--slm-field, #b9c7e4); border-radius: var(--sl-radius); font-size: 16px; padding: 0 4px; }
.slq-body .sl-enq-remove, .slq-body .sl-enq-clear { background: none; border: 0; color: var(--sl-muted); cursor: pointer; font-size: 13px; text-decoration: underline; padding: 0; }
.slq-body .sl-enq-certs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.slq-body .sl-enq-cbox { grid-column: 1 / -1; display: grid; gap: 6px; }
.sl-chip-c { font-size: 12px; padding: 2px 8px; border-radius: 999px; background: var(--sl-tint); color: var(--sl-ink); }
.sl-chip-c.is-extra { background: #FFF4E0; color: #8A5300; }
.slq-body .sl-enq-edit { background: none; border: 0; color: var(--sl-blue); font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px 0; text-decoration: underline; }
.slq-body .sl-enq-empty { color: var(--sl-muted); background: var(--sl-tint); border-radius: 6px; padding: 14px; font-size: 14px; margin: 0 0 12px; }
.slq-body .wpcf7-form { display: grid; gap: 4px; margin-top: 10px; }
.slq-body .wpcf7-form label { font-size: 13px; font-weight: 600; display: grid; gap: 4px; margin: 0; }
.slq-body .wpcf7-form input:not([type="submit"]):not([type="hidden"]):not([type="checkbox"]), .slq-body .wpcf7-form textarea { width: 100%; min-width: 0; min-height: 44px; border: 1px solid #b9c7e4; border-radius: var(--sl-radius); padding: 8px 10px; font-size: 16px; font-weight: 400; background: var(--sl-surface); }
.slq-body .wpcf7-form textarea { min-height: 80px; height: 80px; }
.slq-body .wpcf7-submit { width: 100%; min-height: 48px; background: var(--sl-blue); color: #fff; border: 0; border-radius: var(--sl-radius); font-weight: 600; font-size: 15px; cursor: pointer; margin-top: 6px; }
.slq-body .sl-enq-fields { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px 10px; }
@media (max-width: 480px) { .slq-body .sl-enq-fields { grid-template-columns: minmax(0, 1fr); } }
.slq-alt { font-size: 13px; color: var(--sl-muted); margin: 12px 0 0; }
.slq-alt .sl-enq-wa { color: var(--sl-blue); }

dialog.slm-zoomd { border: 0; padding: 0; border-radius: 10px; max-width: min(92vw, 900px); background: var(--sl-surface); }
dialog.slm-zoomd::backdrop { background: rgba(14, 32, 72, .7); }
dialog.slm-zoomd img { display: block; max-height: 82vh; width: auto; max-width: 100%; }
dialog.slm-zoomd form { position: absolute; top: 10px; right: 10px; margin: 0; }

@media (prefers-reduced-motion: reduce) { .slm *, .slq-bar, .slq-panel, .slq-scrim { transition: none !important; } }

/* ------------------------------------------------------------ 1.9 tap targets and the zoom hint
   40 px to tap for the quantity steppers, the breadcrumb links, the WhatsApp link, the size table's Add buttons and the
   brand/type links above the title. The breadcrumb row gives its top padding to the links, so the text stays where it
   was. "Tap to zoom" shows only where nothing can hover; a mouse gets the frame's zoom-in cursor instead. */
.slm .slm-step button { min-width: 40px; min-height: 40px; } /* beats `.slm button { min-height: 0 }`; holds the 30 px table steppers too */
.slm .slm-in .slm-step { height: 42px; } /* the table stepper box: 40 px buttons and field inside its 1 px borders */
.slm-crumbs { padding-block: 8px 0; }
.slm-crumbs a { display: inline-block; padding: 8px 0; min-height: 40px; }
.slm-wa { padding: 10px 0; }
.slm .slm-add { min-height: 42px; } /* the table's Add button, level with the stepper beside it */
.slm-eyebrow a { padding-block: 11px; margin-block: -11px; } /* brand and type links: the hit area grows, the eyebrow does not */
.slm .slm-zoom { display: none; }
@media (hover: none) { .slm .slm-zoom { display: block; } }