/* Camera & lens picker page. Built from tools/picker/mockups (base.css + d.html). */
/* Light, like the site pages. Everything is scoped to .pk-app so the theme is untouched. */
.pk-app {
	--bg: #f7f7f5;
	--card: #ffffff;
	--line: #e3e3df;
	--line-2: #d2d2cc;
	--ink: #1b1b1d;
	--muted: #6a6a70;
	--gold: #ff9900;
	--gold-ink: #a86600;      /* dark gold for small text on white (contrast) */
	--gold-wash: #fff4e2;
	--fits: #1f8a55;
	--fits-wash: #e7f5ed;
	--crops: #a8650b;
	--crops-wash: #fdf1dc;
	--toobig: #8a8a90;
	--bad: #c0392b;
	--bad-wash: #fbe7e5;
	--radius: 12px;
	--shadow: 0 1px 2px rgba(0,0,0,.05), 0 4px 14px rgba(0,0,0,.05);
}
.pk-app, .pk-app * { box-sizing: border-box; }

.pk-app a { color: var(--gold-ink); }
.pk-app button { font: inherit; color: inherit; }


/* Graphics */
.pk-sil, .pk-lensph { fill: #f1f1ee; stroke: #2a2a2e; stroke-width: 2.2; stroke-linejoin: round; }
.pk-sil .g, .pk-lensph .g { fill: none; stroke: #9a9aa0; stroke-width: 1.6; }
.pk-film { fill: #fff; stroke: #2a2a2e; stroke-width: 1.2; }
.pk-film .g { fill: #2a2a2e; stroke: none; }
.pk-frame .sensor { fill: none; stroke: #2a2a2e; stroke-width: 1.6; }
.pk-frame .film { fill: #ffd28a; stroke: #c98200; stroke-width: 1; }
.pk-frame.crops .film { fill: #ffe7c2; }
.pk-frame.toobig .film { fill: #ffd28a; stroke: none; }
.pk-frame.toobig .film.lost { fill: #f3c7c2; fill-opacity: .55; stroke: var(--bad, #c0392b); stroke-width: .8; stroke-dasharray: 3 2; }
.pk-frame { overflow: hidden; }

/* Tags: gray facts, amber check, red deal-breakers */
.pk-tag { display: inline-block; font-size: 12px; font-weight: 600; line-height: 1.3; padding: 3px 9px; border-radius: 999px;
	border: 1px solid var(--line-2); color: var(--muted); background: #fafaf8; white-space: nowrap; }
.pk-tag.caution { color: var(--crops); border-color: #ecc98a; background: var(--crops-wash); }
.pk-tag.blocker { color: #fff; border-color: var(--bad); background: var(--bad); }

/* Verdict chips */
.pk-v { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; padding: 3px 9px 3px 7px; border-radius: 6px; white-space: nowrap; }
.pk-v::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; }
.pk-v.fits { color: var(--fits); background: var(--fits-wash); }
.pk-v.crops { color: var(--crops); background: var(--crops-wash); }
.pk-v.toobig { color: var(--toobig); background: #f0f0ee; }
.pk-v.na { color: #a5a5aa; background: transparent; font-weight: 400; }
.pk-v.na::before { display: none; }

.pk-buy { display: flex; flex-wrap: wrap; gap: 6px; }
.pk-buy a { font-size: 13px; text-decoration: none; color: var(--ink); padding: 5px 11px; border: 1px solid var(--line-2); border-radius: 7px; background: #fff; }
.pk-buy a:first-child { background: var(--gold); border-color: var(--gold); color: #1a1203; font-weight: 600; }
.pk-buy a:hover { border-color: var(--gold); }

.pk-app input[type=checkbox] { accent-color: var(--gold); width: 16px; height: 16px; }
.pk-app :focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* Full width: the wrapper carries WordPress's alignfull class (the theme's
   constrained layout otherwise caps page content at 1290 px). */
.pk-app {
	max-width: none; background: var(--bg); color: var(--ink); font: 15px/1.5 'Open Sans', system-ui, sans-serif;
}
/* Undo theme button and heading styles inside the picker. */
.pk-app button { box-shadow: none; text-transform: none; letter-spacing: normal; line-height: 1.35; min-height: 0; margin: 0; }
.pk-app h1, .pk-app h2, .pk-app h3 { font-family: inherit; color: var(--ink); text-transform: none; letter-spacing: normal; }
.d-empty { color: var(--muted); padding: 24px; border: 1px dashed var(--line-2); border-radius: var(--radius); }
.d-head p { margin: 0; color: var(--muted); max-width: 720px; }

/* Layout and panel */
.d-wrap { max-width: calc(var(--theme-block-max-width, 1290px) + 48px); margin: 0 auto; padding: 28px 24px 90px; display: grid; grid-template-columns: 320px 1fr; gap: 28px; align-items: start; }
.d-head { grid-column: 1 / -1; }
.d-head h1 { font-size: 32px; margin: 0; letter-spacing: -.01em; }
.d-head p { margin: 4px 0 0; color: var(--muted); max-width: 680px; }
.d-panel { position: sticky; top: 16px; max-height: calc(100vh - 32px); overflow-y: auto; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px 18px 18px; }
.d-sec { padding: 14px 0; border-bottom: 1px solid var(--line); }
.d-sec:last-child { border-bottom: 0; }
.d-sec h2 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); margin: 0 0 10px; }
.d-scan { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.d-scan button { border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 6px; cursor: pointer; text-align: left; }
.d-scan button img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 6px; display: block; }
.d-scan button span { display: block; font-weight: 700; font-size: 13.5px; padding: 6px 2px 2px; }
.d-scan button[aria-pressed=true] { border-color: var(--gold); background: var(--gold-wash); }
.d-fmts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.d-fmts button { border: 2px solid var(--line); border-radius: 9px; background: #fff; padding: 8px 4px 6px; cursor: pointer; display: grid; justify-items: center; gap: 2px; font-size: 12.5px; font-weight: 600; }
.d-fmts button .pk-film { width: 46px; height: 38px; }
.d-fmts button[aria-pressed=true] { border-color: var(--gold); background: var(--gold-wash); }
.d-tabs { display: grid; grid-template-columns: 1fr 1fr; border: 2px solid var(--line); border-radius: 9px; overflow: hidden; margin-bottom: 10px; }
.d-tabs button { border: 0; background: #fff; padding: 8px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--muted); }
.d-tabs button[aria-pressed=true] { background: var(--ink); color: #fff; }
.d-brands { display: flex; gap: 6px; margin-bottom: 8px; }
.d-brands button { flex: 1; border: 2px solid var(--line); border-radius: 8px; background: #fff; padding: 7px; font-weight: 700; cursor: pointer; }
.d-brands button[aria-pressed=true] { border-color: var(--gold); background: var(--gold-wash); }
.d-sys { display: grid; gap: 6px; }
.d-sys button { display: grid; grid-template-columns: 54px 1fr; gap: 10px; align-items: center; border: 2px solid var(--line); border-radius: 9px; background: #fff; padding: 6px 10px 6px 6px; cursor: pointer; text-align: left; }
.d-sys button .pk-sil { width: 54px; height: 36px; }
.d-sys button b { display: block; font-size: 13.5px; }
.d-sys button small { color: var(--muted); font-size: 12px; }
.d-sys button[aria-pressed=true] { border-color: var(--gold); background: var(--gold-wash); }
.d-search input { width: 100%; font: inherit; padding: 10px 12px; border: 2px solid var(--line); border-radius: 9px; }
.d-search input:focus { outline: none; border-color: var(--gold); }

/* Results header: system banner (from C) + body pills */
.d-res { min-width: 0; }
.d-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 18px; margin-bottom: 10px; }
.d-banner .pk-sil { width: 96px; height: 64px; }
.d-banner h2 { margin: 0; font-size: 21px; }
.d-banner .sub { color: var(--muted); font-size: 13.5px; }
.d-banner .stats { display: flex; gap: 18px; flex-wrap: wrap; margin-left: auto; }
.d-banner .stat b { display: block; font-size: 17px; }
.d-banner .stat span { font-size: 11.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }
.d-pills { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 18px; }
.d-pill { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 999px; background: #fff; padding: 3px 10px 3px 4px; font-size: 13px; cursor: pointer; }
.d-pill:hover { border-color: var(--gold); }
.d-pill .pk-sil { width: 32px; height: 22px; }
.d-pill em { font-style: normal; color: var(--muted); }
.d-pill .pk-tag { font-size: 10.5px; padding: 1px 6px; }
.d-pill.blocked { opacity: .55; }

/* Bar with the view switch */
.d-bar { display: flex; flex-wrap: wrap; gap: 8px 18px; align-items: center; font-size: 14px; margin: 0 0 12px; }
.d-bar label { display: inline-flex; gap: 6px; align-items: center; cursor: pointer; }
.d-bar select { font: inherit; padding: 5px 8px; border: 1px solid var(--line-2); border-radius: 7px; background: #fff; }
.d-view { margin-left: auto; display: inline-flex; border: 2px solid var(--line); border-radius: 9px; overflow: hidden; }
.d-view button { border: 0; background: #fff; padding: 6px 12px; font-weight: 600; font-size: 13px; cursor: pointer; color: var(--muted); display: inline-flex; gap: 6px; align-items: center; }
.d-view button svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.d-view button[aria-pressed=true] { background: var(--ink); color: #fff; }
.d-legend { display: flex; gap: 16px; align-items: center; font-size: 12.5px; color: var(--muted); margin: -4px 0 12px; flex-wrap: wrap; }
.d-legend i { display: inline-block; width: 14px; height: 10px; vertical-align: middle; margin-right: 4px; border-radius: 2px; }
.d-kit { background: var(--gold-wash); border: 1px solid #f3d6a3; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; }

/* Cards: from C */
.d-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(460px, 100%), 1fr)); gap: 14px; }
.d-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px; display: grid; grid-template-columns: 110px 1fr; gap: 16px; }
.d-card .pic { width: 110px; height: 110px; display: grid; place-items: center; }
.d-card .pic img { max-width: 100px; max-height: 108px; object-fit: contain; }
.d-card .pic .pk-lensph { width: 92px; }
.d-card h3 { margin: 0; font-size: 16px; line-height: 1.3; }
.d-card .meta { color: var(--muted); font-size: 13px; margin: 2px 0 6px; }
.d-card .tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 8px; }
.d-frames { display: flex; flex-wrap: wrap; gap: 8px; }
.d-frame { display: grid; justify-items: center; gap: 2px; padding: 6px 8px; border-radius: 9px; background: #fafaf8; border: 1px solid var(--line); min-width: 100px; }
.d-frame .pk-frame { width: 80px; height: 58px; }
.d-frame b { font-size: 12.5px; }
.d-frame span { font-size: 11.5px; color: var(--muted); }
.d-frame.fits b { color: var(--fits); }
.d-frame.crops b { color: var(--crops); }
.d-frame.toobig b { color: var(--toobig); }
.d-card .pk-buy { margin-top: 10px; }

/* Rows: from B, with a tiny framing thumb per cell */
.d-tablewrap { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow-x: auto; }
.d-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.d-table th { text-align: left; font-size: 12px; color: var(--muted); font-weight: 600; padding: 10px 12px; border-bottom: 1px solid var(--line); background: #fbfbf9; white-space: nowrap; }
.d-table th .pk-film { width: 22px; height: 18px; vertical-align: middle; margin-right: 4px; }
.d-table th small { display: block; font-weight: 400; font-size: 11px; }
.d-table td { padding: 8px 12px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.d-table tr:last-child td { border-bottom: 0; }
.d-table tr:hover td { background: #fffbf3; }
.d-lens { display: grid; grid-template-columns: 48px 1fr; gap: 10px; align-items: center; min-width: 260px; }
.d-lens .pic { width: 48px; height: 48px; display: grid; place-items: center; background: #fff; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.d-lens .pic img { max-width: 42px; max-height: 42px; }
.d-lens .pic .pk-lensph { width: 40px; }
.d-lens b { display: block; line-height: 1.3; font-size: 14px; }
.d-lens .pk-lbs { margin-top: 4px; }
.d-cell { display: grid; grid-template-columns: 38px auto; gap: 8px; align-items: center; white-space: nowrap; }
.d-cell .pk-frame { width: 38px; height: 28px; }
.d-cell small { display: block; color: var(--muted); font-size: 11.5px; }
.d-cell .pk-v { padding: 1px 7px 1px 5px; font-size: 12px; }
.d-price { white-space: nowrap; font-weight: 600; }
.d-price small { display: block; color: var(--muted); font-weight: 400; font-size: 12px; }
.d-table .pk-buy { flex-wrap: nowrap; }
.d-table .pk-buy a { padding: 4px 9px; font-size: 12.5px; white-space: nowrap; }
.d-sep td { background: #f6f6f3; font-weight: 600; color: var(--muted); font-size: 13px; }
/* One Buy menu instead of four buttons (used in compact rows) */
.d-buymenu { display: none; position: relative; }
.d-buymenu summary { list-style: none; cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 7px; background: var(--gold); color: #1a1203; white-space: nowrap; }
.d-buymenu summary::-webkit-details-marker { display: none; }
.d-buymenu .menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 5; background: #fff; border: 1px solid var(--line-2); border-radius: 9px; box-shadow: var(--shadow); padding: 4px; display: grid; min-width: 140px; }
.d-buymenu .menu a { display: block; padding: 7px 10px; border: 0; border-radius: 6px; background: transparent; color: var(--ink); font-weight: 400; font-size: 14px; text-decoration: none; }
.d-buymenu .menu a:first-child { background: transparent; color: var(--ink); font-weight: 600; }
.d-buymenu .menu a:hover { background: var(--gold-wash); }

.d-more { margin-top: 22px; }
.d-more summary { cursor: pointer; font-weight: 600; color: var(--muted); padding: 6px 0 12px; }

@media (max-width: 960px) {
	.d-table .d-rowbuy { display: inline-block; margin: 0 0 0 10px; }
	.d-wrap { grid-template-columns: 1fr; }
	.d-panel { position: static; max-height: none; }
	.d-grid { grid-template-columns: 1fr; }
	/* Compact rows: name + price on one line, tags, then every verdict on one
	   wrapping line ending in a single Buy menu. No framing previews here. */
	.d-table thead { display: none; }
	.d-table, .d-table tbody { display: block; }
	.d-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
	.d-table td { display: block; border: 0; padding: 0; background: transparent !important; }
	.d-table td:first-child { flex: 1 1 100%; min-width: 0; }
	.d-table td.d-price { order: 3; flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 0; font-size: 14px; }
	.d-table .d-buymenu { margin-left: 10px; }
	.d-table td.d-price small { display: inline; margin-left: 3px; }
	.d-table td[data-h] { order: 2; flex: 0 0 auto; }
	.d-table td[data-h]::before { content: attr(data-h); font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 5px; }
	.d-table td[data-h] { display: inline-flex; align-items: center; }
	.d-cell { display: inline-flex; gap: 0; }
	.d-cell .pk-frame { display: none; }
	.d-cell > span { display: inline-flex; align-items: center; gap: 5px; }
	.d-cell small { display: inline; font-size: 12px; }
	.d-table td.d-buycell { display: none; }
	.d-table .d-buymenu { display: inline-block; }
	.d-lens { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; min-width: 0; }
	.d-lens > div { min-width: 0; }
	.d-cell .u { display: none; }
	.d-table tr { gap: 4px 10px; }
	.d-lens .pic { width: 36px; height: 36px; }
	.d-lens .pic img { max-width: 32px; max-height: 32px; }
	.d-lens b { font-size: 14px; }
	.d-lens .pk-lbs { flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.d-sep { display: block !important; padding: 0 !important; }
	.d-sep td { padding: 8px 12px !important; flex: 1 1 100%; }
	.d-view { margin-left: 0; }
}
@media (max-width: 560px) {
	.d-wrap { padding-left: 16px; padding-right: 16px; }
	.d-card { grid-template-columns: 64px minmax(0, 1fr); gap: 12px; padding: 12px; }
	.d-card > div { min-width: 0; }
	.d-lead { grid-template-columns: 72px minmax(0, 1fr); }
	.d-lead .pk-frame { width: 72px; height: 52px; }
	.d-card .pic { width: 72px; height: 72px; }
	.d-card .pic img { max-width: 66px; max-height: 70px; }
	.d-banner .stats { margin-left: 0; }
}

/* 35mm-first setup (2026-10-26) */
.d-note { font-size: 13px; color: var(--muted); margin: 0 0 8px; line-height: 1.45; }
.d-note b { color: var(--ink); }
.d-check { display: flex; gap: 8px; align-items: flex-start; font-size: 14px; cursor: pointer; padding: 8px 10px; border: 2px solid var(--line); border-radius: 9px; background: #fff; }
.d-check.on { border-color: var(--gold); background: var(--gold-wash); }
.d-check input { margin-top: 2px; }
.d-check small { display: block; color: var(--muted); font-size: 12px; }
.d-adv { margin-top: 10px; display: flex; gap: 8px; align-items: center; font-size: 13.5px; font-weight: 600; color: var(--muted); cursor: pointer; }
.d-adv small { font-weight: 400; }
.d-adv + .d-fmts { margin-top: 8px; }

/* Lens card: 35mm first, larger-film notice under it */
.d-lead { display: grid; grid-template-columns: 96px 1fr; gap: 12px; align-items: center; margin: 4px 0 6px; }
.d-lead .pk-frame { width: 96px; height: 70px; }
.d-lead .what { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: .05em; }
.d-lead .verdict { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.d-lead .verdict .ppi { font-size: 18px; font-weight: 700; }
.d-lead .verdict .ppi small { font-size: 12px; font-weight: 400; color: var(--muted); }
.d-lead .util { font-size: 12.5px; color: var(--crops); }
.d-lead > div { min-width: 0; }
.d-big { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; padding: 6px 10px; border-radius: 8px; margin-top: 4px; }
.d-big.ok { background: #f3f8f4; color: #2d5a40; }
.d-big.warn { background: var(--crops-wash); color: #7a4a06; }
.d-big .ic { font-weight: 700; }
.d-scnlab { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }

/* Buy new + Find used menu */
.d-buy2 { display: flex; gap: 6px; align-items: center; margin-top: 10px; flex-wrap: wrap; }
.d-buy2 a.new, .d-used summary { font-size: 13px; text-decoration: none; padding: 5px 12px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; color: var(--ink); cursor: pointer; white-space: nowrap; font-weight: 600; }
.d-buy2 a.primary, .d-used.primary summary { background: var(--gold); border-color: var(--gold); color: #1a1203; }
.d-used { position: relative; }
.d-used summary { list-style: none; }
.d-used summary::-webkit-details-marker { display: none; }
.d-used .menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 6; background: #fff; border: 1px solid var(--line-2); border-radius: 9px; box-shadow: var(--shadow); padding: 4px; min-width: 150px; display: grid; }
.d-used .menu a { padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; }
.d-used .menu a:hover { background: var(--gold-wash); }
.d-used .menu small { display: block; color: var(--muted); font-size: 11.5px; padding: 4px 10px 2px; }
.d-table .d-buy2 { margin-top: 0; flex-wrap: nowrap; }
.d-table .d-used .menu { left: auto; right: 0; }
.d-cell.big { grid-template-columns: auto; }

/* Before you buy */
.d-tips { margin-top: 28px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 4px 20px; }
.d-tips summary { cursor: pointer; font-weight: 700; font-size: 17px; padding: 14px 0; }
.d-tips summary small { font-weight: 400; color: var(--muted); font-size: 13px; margin-left: 8px; }
.d-tips ul { columns: 2 320px; column-gap: 32px; margin: 0 0 16px; padding-left: 18px; }
.d-tips li { break-inside: avoid; margin: 0 0 10px; font-size: 14px; }
.d-tips li b { display: block; }

/* Rows: one Buy menu in the price cell */
.d-table td.d-price { white-space: nowrap; }
.d-rowbuy { display: block; margin-top: 4px; }
.d-rowbuy summary { padding: 3px 10px; font-size: 12.5px; display: inline-block; }
.d-rowbuy .menu { left: auto; right: 0; }
.d-rowbuy.up .menu { top: auto; bottom: calc(100% + 4px); }
.big-v .pk-v { font-size: 12px; padding: 1px 7px 1px 5px; }
.big-v small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 2px; white-space: normal; max-width: 160px; line-height: 1.3; }

/* Compact rows by the results column's width, not the window's: the table needs ~760 px. */
.d-res { container-type: inline-size; }
@container (max-width: 760px) {
	.d-tablewrap .d-table .d-rowbuy { display: inline-block; margin: 0 0 0 10px; }
	.d-tablewrap .d-table thead { display: none; }
	.d-tablewrap .d-table, .d-tablewrap .d-table tbody { display: block; }
	.d-tablewrap .d-table tr { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
	.d-tablewrap .d-table td { display: block; border: 0; padding: 0; background: transparent !important; }
	.d-tablewrap .d-table td:first-child { flex: 1 1 100%; min-width: 0; }
	.d-tablewrap .d-table td.d-price { order: 3; flex: 0 0 auto; margin-left: auto; display: inline-flex; align-items: center; gap: 0; font-size: 14px; }
	.d-tablewrap .d-table .d-buymenu { margin-left: 10px; }
	.d-tablewrap .d-table td.d-price small { display: inline; margin-left: 3px; }
	.d-tablewrap .d-table td[data-h] { order: 2; flex: 0 0 auto; }
	.d-tablewrap .d-table td[data-h]::before { content: attr(data-h); font-size: 12px; color: var(--muted); font-weight: 600; margin-right: 5px; }
	.d-tablewrap .d-table td[data-h] { display: inline-flex; align-items: center; }
	.d-tablewrap .d-table .d-cell { display: inline-flex; gap: 0; }
	.d-tablewrap .d-table .d-cell .pk-frame { display: none; }
	.d-tablewrap .d-table .d-cell > span { display: inline-flex; align-items: center; gap: 5px; }
	.d-tablewrap .d-table .d-cell small { display: inline; font-size: 12px; }
	.d-tablewrap .d-table td.d-buycell { display: none; }
	.d-tablewrap .d-table .d-buymenu { display: inline-block; }
	.d-tablewrap .d-table .d-lens { grid-template-columns: 36px minmax(0, 1fr); gap: 8px; min-width: 0; }
	.d-tablewrap .d-table .d-lens > div { min-width: 0; }
	.d-tablewrap .d-table .d-cell .u { display: none; }
	.d-tablewrap .d-table tr { gap: 4px 10px; }
	.d-tablewrap .d-table .d-lens .pic { width: 36px; height: 36px; }
	.d-tablewrap .d-table .d-lens .pic img { max-width: 32px; max-height: 32px; }
	.d-tablewrap .d-table .d-lens b { font-size: 14px; }
	.d-tablewrap .d-table .d-lens .pk-lbs { flex-wrap: nowrap; overflow: hidden; mask-image: linear-gradient(90deg, #000 85%, transparent); }
	.d-tablewrap .d-table .d-sep { display: block !important; padding: 0 !important; }
	.d-tablewrap .d-table .d-sep td { padding: 8px 12px !important; flex: 1 1 100%; }
}

/* 2026-10-27: price up front, framing behind a popover, Choose → kit summary */
.d-lead.nodia { grid-template-columns: minmax(0, 1fr); }
.d-cell.nodia { grid-template-columns: auto; }
.d-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--line); }
.d-pricebig { font-size: 22px; font-weight: 800; line-height: 1; letter-spacing: -.01em; }
.d-pricebig small { font-size: 12px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.d-choose { font-size: 13.5px; font-weight: 700; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--gold); background: var(--gold); color: #1a1203 !important; cursor: pointer; white-space: nowrap; }
.d-choose:hover { filter: brightness(.96); }
.d-foot2 { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-left: auto; }
.d-foot .d-buy2 { margin-top: 0; }
.d-framepop { position: relative; }
.d-framepop summary { list-style: none; display: inline-flex; align-items: center; gap: 5px; font-size: 13px; font-weight: 600; padding: 5px 10px; border-radius: 7px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; white-space: nowrap; }
.d-framepop summary::-webkit-details-marker { display: none; }
.d-framepop summary svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.d-framepop[open] summary { border-color: var(--gold); background: var(--gold-wash); }
.d-framepop .pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 8; width: min(470px, calc(100vw - 48px)); background: #fff; border: 1px solid var(--line-2); border-radius: 12px; box-shadow: 0 8px 30px rgba(0,0,0,.14); padding: 12px 14px 14px; }
.d-framepop.up .pop { top: auto; bottom: calc(100% + 6px); }
.d-framepop .pop-h { display: block; font-size: 14px; margin-bottom: 6px; }
.d-framepop .d-legend { margin: 0 0 8px; }
.d-framepop .d-frame { min-width: 0; flex: 1 1 96px; }
/* Between a bare link (too quiet) and a filled button (too loud), Sim 2026-10-29: a light outline that warms up on hover. */
.d-pickrow { margin-top: 5px; font-size: 12.5px; font-weight: 700; padding: 2px 9px; border-radius: 6px; border: 1px solid var(--line-2); background: #fff; color: var(--gold-ink); cursor: pointer; }
.d-pickrow:hover { border-color: var(--gold); background: var(--gold-wash); }

/* Kit summary */
.k-wrap { display: grid; gap: 14px; }
.k-back { justify-self: start; border: 0; background: none; padding: 2px 0; font-size: 14px; font-weight: 600; color: var(--gold-ink); cursor: pointer; }
.k-back:hover { text-decoration: underline; }
.k-head, .k-sec { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 16px 18px; min-width: 0; }
.k-kicker { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); font-weight: 700; margin-bottom: 10px; }
.k-trio { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.k-tile { flex: 1 1 160px; display: grid; justify-items: center; text-align: center; gap: 4px; min-width: 0; }
.k-tile img { max-height: 76px; max-width: 120px; object-fit: contain; }
.k-tile .pk-sil, .k-tile .pk-lensph { width: 96px; height: 64px; }
.k-tile b { font-size: 14.5px; line-height: 1.3; }
.k-tile small { color: var(--muted); font-size: 12.5px; }
.k-tile .pk-lbs { justify-content: center; margin-top: 2px; }
.k-flags b { font-weight: 600; }
.k-tile img + img { margin-left: 6px; }
.k-plus { font-size: 22px; color: var(--muted); font-weight: 300; }
.k-sec h3 { margin: 0 0 8px; font-size: 16px; }
.k-sec .d-pills { margin-bottom: 0; }
.k-sec .d-pill[aria-pressed=true] { border-color: var(--gold); background: var(--gold-wash); }
.k-flags { list-style: none; margin: 14px 0 0; padding: 12px 0 0; border-top: 1px solid var(--line); display: grid; gap: 4px; font-size: 13.5px; }
.k-flags li { padding-left: 18px; position: relative; }
.k-flags li::before { content: ''; position: absolute; left: 3px; top: .5em; width: 8px; height: 8px; border-radius: 50%; background: var(--line-2); }
.k-flags li.caution::before { background: var(--crops); }
.k-flags li.blocker { color: var(--bad); font-weight: 600; }
.k-flags li.blocker::before { background: var(--bad); }
.k-list { width: 100%; border-collapse: collapse; font-size: 14px; }
.k-list td { padding: 10px 8px; border-top: 1px solid var(--line); vertical-align: middle; }
.k-list tr:first-child td { border-top: 0; }
.k-item b { display: block; }
.k-item small { display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; }
.k-price { text-align: right; white-space: nowrap; font-weight: 700; width: 1%; }
.k-act { text-align: right; white-space: nowrap; width: 1%; }
.k-act .d-rowbuy { margin-top: 0; }
.k-store { font-size: 12.5px; font-weight: 600; }
.k-inc { color: var(--fits); font-weight: 600; }
.k-have { color: var(--muted); font-weight: 600; }
.k-bad { color: var(--bad); }
.k-np { color: var(--muted); font-weight: 400; font-size: 12.5px; }
.k-list tr.have .k-item b { color: var(--muted); }
.k-list tr.blocker { background: var(--bad-wash); }
.k-havebox { display: inline-flex; gap: 5px; align-items: center; font-size: 12.5px; margin-top: 4px; cursor: pointer; color: var(--muted); }
.k-total { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; border-top: 2px solid var(--ink); margin-top: 4px; padding: 12px 8px 4px; }
.k-total span { font-weight: 700; }
.k-total b { font-size: 26px; font-weight: 800; margin-left: auto; }
.k-total small { flex-basis: 100%; text-align: right; color: var(--muted); font-size: 12.5px; }
.k-share { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; margin: 0; }
.k-share small { color: var(--muted); font-size: 13px; }
.k-copy { font-size: 13.5px; font-weight: 600; padding: 7px 14px; border-radius: 8px; border: 1px solid var(--line-2); background: #fff; cursor: pointer; }
@container (max-width: 560px) {
	.k-plus { display: none; }
	.k-tile { flex-basis: 100%; grid-template-columns: 72px minmax(0, 1fr); justify-items: start; text-align: left; column-gap: 12px; }
	.k-tile > img, .k-tile > svg { grid-row: span 3; max-width: 72px; max-height: 56px; }
	.k-tile .pk-lbs { grid-column: 2; justify-content: start; }
	.k-tile img + img { display: none; }
	.k-tile .pk-sil, .k-tile .pk-lensph { width: 72px; height: 48px; }
	.k-list, .k-list tbody { display: block; }
	.k-list tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 10px; padding: 10px 0; border-top: 1px solid var(--line); }
	.k-list tr:first-child { border-top: 0; }
	.k-list td { border: 0; padding: 0; width: auto; }
	.k-list .k-item { grid-column: 1 / -1; }
	.k-list .k-price { text-align: left; }
	.d-foot2 { margin-left: 0; }
}

/* Clear the camera choice; admin Edit links (2026-10-28) */
.d-banner { position: relative; padding-right: 40px; }
.pk-app .d-clear { position: absolute; top: 8px; right: 8px; width: 26px; height: 26px; min-height: 0; padding: 0; margin: 0; border: 0; border-radius: 50%; background: none; color: var(--muted); font-size: 20px; font-weight: 400; line-height: 26px; text-align: center; cursor: pointer; box-shadow: none; }
.pk-app .d-clear:hover { background: var(--line); color: var(--ink); }
.pk-app .pk-edit { font-size: 12px; font-weight: 600; margin-left: 6px; color: #2a6db0; }
.d-admin { font-size: 12.5px; padding: 6px 10px; margin-bottom: 10px; border: 1px dashed #9db8d6; border-radius: 8px; background: #f2f7fc; color: #3c5a78; }
.pk-app .d-admin a { color: #2a6db0; font-weight: 600; }

/* Card C + header H2 (Sim, 2026-10-28; from tools/picker/mockups/cards.html) */
.c-card { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; display: grid; grid-template-columns: 88px minmax(0, 1fr); gap: 4px 16px; position: relative; min-width: 0; }
.c-card .pic { display: grid; place-items: center; align-self: center; }
.c-card .pic img { max-width: 84px; max-height: 100px; object-fit: contain; }
.c-card .pic .pk-lensph { width: 80px; }
.c-body { min-width: 0; }
.c-card h3 { margin: 0; font-size: 16px; line-height: 1.3; padding-right: 34px; }
.c-card .pk-edit { position: absolute; top: 12px; right: 14px; margin: 0; }
.c-meta { font-size: 13px; color: var(--muted); line-height: 1.55; margin-top: 2px; }
.c-meta .i { display: inline-flex; align-items: center; gap: 4px; }
.c-meta .i.caution { color: var(--crops); }
.c-meta .i.blocker { color: var(--bad); font-weight: 600; }
.c-meta svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linejoin: round; }
.c-meta .sep { margin: 0 6px; color: #c8c8c4; }
/* Flat labels (Sim's pick B, 2026-10-29): facts, not buttons. */
.pk-lbs { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.pk-lb { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 600; line-height: 1.3; padding: 2px 7px 2px 6px; border-radius: 4px; background: #f0f0ec; color: #55555a; white-space: nowrap; }
.pk-lb svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.pk-lb.new { background: var(--fits-wash); color: var(--fits); }
.pk-lb.caution { background: var(--crops-wash); color: var(--crops); }
.pk-lb.blocker { background: var(--bad); color: #fff; }
/* 35mm, then the larger film: label · verdict · detail. */
.c-lines { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 8px 12px; align-items: start; margin-top: 10px; font-size: 14px; }
.c-lines .what { color: var(--muted); font-size: 13.5px; line-height: 26px; }
.c-lines .val { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; min-height: 26px; }
.c-lines .ppi { font-weight: 800; font-size: 17px; }
.c-lines .ppi small { font-weight: 600; font-size: 11.5px; color: var(--muted); margin-left: 3px; }
.c-lines .hint { font-size: 12.5px; color: var(--muted); flex-basis: 100%; }
.c-lines .hint.warn { color: var(--crops); }
@media (max-width: 640px) {
	.c-lines { gap: 6px 10px; }
	.c-lines .what { font-size: 12.5px; }
}
.c-adv { margin-top: 8px; }
.c-foot { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.c-foot .d-choose { margin-left: auto; }
.c-foot .d-framepop summary { padding: 3px 9px 3px 4px; gap: 6px; font-size: 12.5px; color: #444; border-radius: 9px; }
.c-foot .d-framepop summary .pk-frame { width: 40px; height: 29px; }
.c-foot .d-framepop .pop { left: 0; right: auto; }

/* The price is the button */
.pk-pb { position: relative; }
.pk-pb summary { list-style: none; cursor: pointer; display: inline-flex; align-items: baseline; gap: 4px; padding: 5px 10px 5px 12px; border: 1px solid var(--line-2); border-radius: 9px; background: #fff; white-space: nowrap; }
.pk-pb summary::-webkit-details-marker { display: none; }
.pk-pb summary b { font-size: 20px; font-weight: 800; letter-spacing: -.01em; }
.pk-pb summary small { font-size: 12px; font-weight: 600; color: var(--muted); }
.pk-pb summary .car { font-size: 11px; color: var(--muted); margin-left: 2px; }
.pk-pb summary:hover, .pk-pb[open] summary { border-color: var(--gold); background: var(--gold-wash); }
.pk-pb .menu { position: absolute; left: 0; top: calc(100% + 4px); z-index: 9; background: #fff; border: 1px solid var(--line-2); border-radius: 10px; box-shadow: 0 8px 26px rgba(0,0,0,.14); padding: 4px; min-width: 200px; display: grid; }
.pk-pb .menu small { color: var(--muted); font-size: 11.5px; padding: 5px 10px 3px; white-space: normal; }
.pk-pb .menu a { padding: 7px 10px; border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 14px; display: flex; justify-content: space-between; gap: 10px; }
.pk-pb .menu a:hover { background: var(--gold-wash); }
.pk-pb .menu a em { font-style: normal; color: var(--muted); font-size: 12.5px; }
.d-table .pk-pb summary { padding: 3px 8px 3px 10px; font-size: 12.5px; }
.d-table .pk-pb summary b { font-size: 15px; }
.d-table .pk-pb.d-rowbuy { margin-top: 0; }
.d-banner .pk-pb.hdr .menu { left: auto; right: 0; }
.d-banner .stats { align-items: center; }

/* Popover tiles: an even grid, verdict on its own line */
.d-framepop .d-frames, .k-sec .d-frames { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); }
.d-framepop .d-frame { flex: none; }
.d-frame { text-align: center; }
.d-frame span.v { font-size: 12px; font-weight: 600; color: var(--muted); }
.d-frame.fits span.v { color: var(--fits); }
.d-frame.crops span.v { color: var(--crops); }
.d-frame.fits b, .d-frame.crops b, .d-frame.toobig b { color: var(--ink); }

@media (max-width: 560px) {
	.c-card { grid-template-columns: 64px minmax(0, 1fr); gap: 4px 12px; padding: 12px; }
	.c-card .pic img { max-width: 60px; max-height: 76px; }
	.c-card .pic { align-self: start; }
	.c-foot .d-choose { margin-left: 0; }
}
@media (max-width: 760px) {
	.d-banner .pk-pb.hdr .menu { left: 0; right: auto; }
}

/* "Crops N%" = film larger than the frame, edges cut off (Sim, 2026-10-28) */
.pk-v.toobig { color: var(--bad); background: var(--bad-wash); }
.d-frame.toobig span.v { color: var(--bad); }
.d-frame.toobig b { color: var(--ink); }
.d-pill em.pr { color: var(--ink); font-weight: 600; }

/* ------------------------------------------------------------------ ready-made kits (the results column's starting point) */
.kx h2 { font-size: 22px; margin: 0; letter-spacing: -.01em; }
.kx-sub { margin: 2px 0 14px; color: var(--muted); font-size: 14.5px; }
.kx-kit { background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow); padding: 12px 16px; margin-bottom: 10px;
	display: grid; grid-template-columns: 96px 70px minmax(0, 1fr) auto; gap: 14px; align-items: center; }
.kx-kit > .pk-sil { width: 96px; height: 64px; }
.kx-kit > img, .kx-kit > .pk-lensph { width: 70px; height: 74px; object-fit: contain; }
.kx-pris { display: flex; flex-wrap: wrap; gap: 6px; }
.kx-pri { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; padding: 2px 9px 2px 7px; border-radius: 999px; background: var(--gold-wash); color: var(--gold-ink); }
.kx-pri svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.kx-t h3 { margin: 5px 0 2px; font-size: 15.5px; line-height: 1.35; }
.kx-t h3 span { font-weight: 600; color: #3a3a3e; }
.kx-facts { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.kx-facts .ok { color: var(--fits); font-weight: 600; }
.kx-why { margin: 6px 0 0; font-size: 13.5px; line-height: 1.45; color: #444; border-left: 3px solid var(--gold); padding: 1px 0 1px 10px; }
.kx-m { display: grid; justify-items: end; gap: 4px; text-align: right; }
.kx-big { font-size: 22px; font-weight: 800; letter-spacing: -.01em; white-space: nowrap; }
.kx-big small { font-size: 11.5px; font-weight: 600; color: var(--muted); margin-left: 4px; letter-spacing: 0; }
.kx-all { font-size: 12px; color: var(--muted); white-space: nowrap; }
.kx-go { margin-top: 4px; font: inherit; font-weight: 700; font-size: 13.5px; padding: 7px 12px; border: 0; border-radius: 9px; background: var(--gold); color: #1a1203; cursor: pointer; white-space: nowrap; }
.kx-go:hover { filter: brightness(.96); }
.kx-or { color: var(--muted); font-size: 14px; margin: 6px 2px 0; }
.kx-cam { border: 0; background: none; padding: 0; font: inherit; font-weight: 700; color: var(--gold-ink); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
/* Ready-made kits or Build my own, under the scanner */
.d-start { display: grid; gap: 8px; }
.d-start button { display: flex; align-items: center; gap: 8px; border: 2px solid var(--line); border-radius: 10px; background: #fff; padding: 8px 10px; cursor: pointer; text-align: left; font: inherit; color: var(--ink); }
.d-start button:hover { border-color: var(--line-2); }
.d-start button[aria-pressed=true] { border-color: var(--gold); background: var(--gold-wash); }
.d-start svg { width: 22px; height: 22px; flex: none; fill: none; stroke: var(--gold-ink); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.d-start b { display: block; font-size: 13.5px; line-height: 1.25; }
.d-start small { display: block; color: var(--muted); font-size: 12px; line-height: 1.3; }
@media (max-width: 640px) {
	.kx-kit { grid-template-columns: 64px 50px minmax(0, 1fr); gap: 10px; padding: 12px; }
	.kx-kit > .pk-sil { width: 64px; height: 44px; }
	.kx-kit > img, .kx-kit > .pk-lensph { width: 50px; height: 56px; }
	.kx-m { grid-column: 1 / -1; grid-template-columns: 1fr auto; justify-items: start; align-items: center; gap: 0 12px; text-align: left; border-top: 1px solid var(--line); padding-top: 10px; }
	.kx-m .kx-all { grid-row: 2; }
	.kx-m .kx-go { grid-column: 2; grid-row: 1 / 3; margin-top: 0; }
}

/* Release cable names show their plug on hover / focus / tap */
.pk-cable { position: relative; cursor: help; text-decoration: underline dotted var(--line-2); text-underline-offset: 3px; outline: none; }
.pk-cable-pop { position: absolute; z-index: 20; left: 0; top: calc(100% + 6px); width: 168px; padding: 8px; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); text-align: center; font-weight: 400;
	opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity .12s, transform .12s, visibility 0s .12s; pointer-events: none; }
.pk-cable-pop img { display: block; width: 150px; height: 150px; object-fit: contain; margin: 0 auto; }
.pk-cable-pop small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--muted); letter-spacing: 0; text-transform: none; }
.pk-cable:hover .pk-cable-pop, .pk-cable:focus .pk-cable-pop, .pk-cable:focus-within .pk-cable-pop { opacity: 1; visibility: visible; transform: none; transition: opacity .12s, transform .12s; }
.pk-cable:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

.d-banner .pk-cable-pop { left: auto; right: 0; } /* the header stat sits at the right edge */

/* Camera body dropdowns: the system header and the kit's camera tile (replace the body pills) */
.pk-bodysel { font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); max-width: 100%; padding: 7px 30px 7px 10px; border: 2px solid var(--line); border-radius: 9px; cursor: pointer;
	background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23555' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 10px center / 11px; -webkit-appearance: none; appearance: none; }
.pk-bodysel:hover, .pk-bodysel:focus { border-color: var(--gold); outline: none; }
.d-bodypick { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; margin: 0 0 18px; }
.d-bodypick > span { font-size: 13px; font-weight: 600; color: var(--muted); }
.k-tile .pk-bodysel { margin-bottom: 2px; }
.d-banner .pk-lbs { margin-top: 6px; }

/* Amber / red verdicts open the framing popover (Sim, 2026-10-29) */
.d-framepop.pk-vpop { display: inline-block; }
.d-framepop.pk-vpop > summary.pk-v { border: 0; padding: 3px 9px 3px 7px; font-size: 12.5px; border-radius: 6px; text-decoration: underline dotted; text-underline-offset: 3px; }
.d-cell .d-framepop.pk-vpop > summary.pk-v, .big-v .d-framepop.pk-vpop > summary.pk-v { padding: 1px 7px 1px 5px; font-size: 12px; }
.d-framepop.pk-vpop > summary.pk-v.crops { background: var(--crops-wash); }
.d-framepop.pk-vpop > summary.pk-v.toobig { background: var(--bad-wash); }
.d-framepop.pk-vpop > summary.pk-v:hover, .d-framepop.pk-vpop[open] > summary.pk-v { box-shadow: inset 0 0 0 1.5px currentColor; }
.d-framepop.pk-vpop .pop { left: 0; right: auto; }