.product-shop-filter-toggle { position: relative; }
.product-shop-filter-toggle .shop-filter-badge { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 4px; border: 2px solid #fff; border-radius: 20px; background: #326faa; color: #fff; font-size: 10px; font-weight: 750; line-height: 1; }
.shop-filter-dialog [hidden], .product-shop-filter-toggle [hidden] { display: none !important; }
/* Shared selection-dialog contract: shops, manufacturers, specs and catalog scans.
   Keep layout, spacing and native input resets here, never in individual pages. */
.shop-filter-dialog { --shop-surface: #fff; --shop-soft: #f4f8fc; --shop-line: #e3ecf4; --shop-ink: #294663; --shop-muted: #718397; --dialog-gutter: 20px; --dialog-row-height: 48px; position: fixed; inset: 0; width: min(480px, calc(100vw - 32px)); height: fit-content; max-width: none; max-height: calc(100dvh - 32px); margin: auto; padding: 0; overflow: hidden; border: 1px solid var(--shop-line); border-radius: 20px; background: var(--shop-surface); color: var(--shop-ink); box-shadow: 0 22px 80px rgba(28, 62, 101, .2), 0 3px 12px rgba(28, 62, 101, .05); font: inherit; text-align: left; }
.shop-filter-dialog[open] { display: flex; flex-direction: column; animation: shop-filter-enter 160ms ease-out; }
.shop-filter-dialog::backdrop { background: rgba(22, 45, 72, .17); backdrop-filter: blur(2px); }
.shop-filter-dialog *, .shop-filter-dialog *::before, .shop-filter-dialog *::after { box-sizing: border-box; }
.shop-filter-dialog svg { display: block; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.shop-filter-dialog button, .shop-filter-dialog input, .shop-filter-dialog a { font: inherit; }
.shop-filter-sheet-handle { display: none; }
.shop-filter-header { display: flex; flex-shrink: 0; align-items: center; gap: 12px; padding: 20px var(--dialog-gutter) 16px; }
.shop-filter-header > div { min-width: 0; }
.shop-filter-heading-icon { display: grid; flex: 0 0 44px; width: 44px; height: 44px; place-items: center; border: 1px solid #dceafb; border-radius: 13px; background: var(--shop-soft); color: var(--action); }
.shop-filter-heading-icon svg { width: 24px; height: 24px; }
.shop-filter-header h2 { margin: 0; color: var(--shop-ink); font-size: 1.1rem; font-weight: 750; letter-spacing: -.02em; }
.shop-filter-header p { margin: 5px 0 0; color: var(--shop-muted); font-size: .75rem; line-height: 1.45; }
.shop-filter-close { display: grid; flex: 0 0 32px; width: 32px; height: 32px; margin-left: auto; place-items: center; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--shop-muted); cursor: pointer; }
.shop-filter-close svg { width: 19px; height: 19px; }
.shop-filter-close:hover { background: var(--shop-soft); color: var(--shop-ink); }
.shop-filter-search-wrap { position: relative; flex-shrink: 0; margin: 0 var(--dialog-gutter) 10px; }
.shop-filter-search-wrap > svg { position: absolute; top: 14px; left: 14px; width: 19px; height: 19px; color: var(--action); pointer-events: none; }
.shop-filter-dialog .shop-filter-search { width: 100%; height: 46px; min-height: 46px; padding: 0 14px 0 42px; border: 1px solid var(--shop-line); border-radius: 11px; background: var(--shop-soft); color: var(--shop-ink); font-size: .82rem; box-shadow: none; }
.shop-filter-search::placeholder { color: var(--shop-muted); opacity: 1; }
.shop-filter-content { min-height: 0; max-height: min(350px, 43dvh); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #c7d7e7 transparent; padding: 0 12px 12px; }
.shop-filter-list { list-style: none; display: grid; gap: 4px; padding: 0; margin: 0; }
.shop-filter-row { display: flex; align-items: center; gap: 2px; padding: 2px 7px 2px 2px; border: 1px solid transparent; border-radius: 12px; transition: background 120ms ease, border-color 120ms ease; }
.shop-filter-row:hover { background: var(--shop-soft); }
.shop-filter-row.is-selected { border-color: #d5e6f7; background: #f0f6fd; }
.shop-filter-dialog .shop-filter-option { display: flex; flex: 1; align-items: center; gap: 12px; min-width: 0; min-height: var(--dialog-row-height); margin: 0; padding: 8px 10px; cursor: pointer; text-align: left; }
.shop-filter-dialog .shop-filter-option input:is([type="radio"], [type="checkbox"]) { appearance: auto; width: 18px; height: 18px; min-width: 18px; min-height: 18px; max-width: 18px; max-height: 18px; flex: 0 0 18px; margin: 0; padding: 0; border: initial; box-shadow: none; accent-color: #397cb8; cursor: pointer; }
.shop-filter-row:has(input:checked) { border-color: #d5e6f7; background: #f0f6fd; }
.shop-filter-row:has(input:disabled) { opacity: .5; }
.shop-filter-row:has(input:disabled) .shop-filter-option { cursor: default; }
.shop-filter-option-copy { min-width: 0; display: grid; gap: 4px; }
.shop-filter-name { overflow: hidden; text-overflow: ellipsis; color: var(--shop-ink); font-size: .84rem; font-weight: 650; }
.shop-filter-count { color: var(--shop-muted); font-size: .7rem; font-variant-numeric: tabular-nums; }
.shop-filter-info { display: grid; flex: 0 0 36px; width: 36px; height: 36px; place-items: center; border-radius: 50%; color: #7293b0; text-decoration: none; }
.shop-filter-info svg { width: 19px; height: 19px; }
.shop-filter-info:hover { background: #e3eef9; color: #326faa; }
.shop-filter-state { margin: 0; padding: 16px var(--dialog-gutter); color: var(--shop-muted); font-size: .8rem; line-height: 1.5; text-align: center; }
.shop-filter-state:empty { display: none; }
.shop-filter-footer-note { margin: 0 0 10px; color: var(--shop-muted); font-size: .75rem; line-height: 1.4; }
.shop-filter-count:empty { display: none; }
.shop-filter-state.is-loading::before { content: ""; display: block; width: 23px; height: 23px; margin: 0 auto 14px; border: 2px solid var(--shop-line); border-top-color: var(--action); border-radius: 50%; animation: shop-filter-spin .8s linear infinite; }
.shop-filter-retry { display: block; margin: -20px auto 22px; padding: 9px 16px; border: 1px solid var(--shop-line); border-radius: 9px; background: var(--shop-surface); color: var(--action); cursor: pointer; }
.shop-filter-footer { flex-shrink: 0; border-top: 1px solid var(--shop-line); padding: 12px var(--dialog-gutter) 16px; background: var(--shop-surface); }
.shop-filter-selection-line { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; font-size: .73rem; }
.shop-filter-selection-line > span { color: var(--shop-muted); }
.shop-filter-reset { padding: 2px 0; border: 0; background: none; color: #326faa; font-size: .73rem !important; cursor: pointer; }
.shop-filter-reset:disabled { opacity: .42; cursor: default; }
.shop-filter-apply { width: 100%; min-height: 45px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 10px 18px; border: 1px solid #326faa; border-radius: 11px; background: #326faa; color: #fff; font-weight: 650 !important; font-size: .81rem !important; cursor: pointer; transition: background 120ms ease; }
.shop-filter-apply svg { width: 18px; height: 18px; }
.shop-filter-apply:hover { background: #286096; }
.shop-filter-apply:disabled { opacity: .5; cursor: default; }
.shop-filter-dialog :is(button, input, a):focus-visible { outline: 2px solid var(--action); outline-offset: 3px; }
html[data-design="blue"] .shop-filter-dialog { --shop-surface: #101e31; --shop-soft: #17283e; --shop-line: #2a405c; --shop-ink: #edf7ff; --shop-muted: #a6b8ce; }
html[data-design="blue"] .shop-filter-row.is-selected { border-color: #45678c; background: #1a324e; }
html[data-design="blue"] .shop-filter-info:hover { background: #1a324e; color: #a3ceef; }
html[data-design="blue"] .shop-filter-reset { color: #a3ceef; }
@keyframes shop-filter-enter { from { opacity: 0; transform: translateY(-7px); } to { opacity: 1; transform: translateY(0); } }
@keyframes shop-filter-spin { to { transform: rotate(360deg); } }
@media (max-width: 600px) {
    .shop-filter-dialog { inset: auto 0 0 !important; width: 100%; max-height: min(88dvh, 720px); margin: 0; border-radius: 23px 23px 0 0; border-bottom: 0; }
    .shop-filter-dialog[open] { animation-name: shop-filter-sheet-enter; }
    .shop-filter-sheet-handle { display: block; flex-shrink: 0; width: 34px; height: 4px; margin: 10px auto -4px; border-radius: 4px; background: #d4dfeb; }
    .shop-filter-header { padding: 16px var(--dialog-gutter) 12px; }
    .shop-filter-search-wrap { margin-right: 20px; margin-left: 20px; }
    .shop-filter-content { max-height: 44dvh; }
    .shop-filter-info { width: 44px; height: 44px; flex-basis: 44px; }
    .shop-filter-footer { padding: 12px var(--dialog-gutter) max(16px, env(safe-area-inset-bottom)); }
    .shop-filter-apply { min-height: 48px; }
}
@keyframes shop-filter-sheet-enter { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) {
    .shop-filter-dialog[open], .shop-filter-state.is-loading::before { animation: none; }
    .shop-filter-row, .shop-filter-apply { transition: none; }
}