/* Layout: same system as the Bracket Matching page — red-ruled header with logo, search + category chips, product grid, detail sheet */
:root{
  --bg:#f3f3f1; --surface:#ffffff; --surface-2:#ebeae6; --line:#dddcd8;
  --fg:#1b1b1c; --muted:#62615e; --accent:#e3051b; --accent-ink:#c00418; --accent-soft:#fbe3e5;
  --sale:#2f7d4f; --photo:#ffffff;
  --font-display:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-body:"Open Sans",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-mono:"Open Sans",system-ui,sans-serif;
  --radius:10px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#141414; --surface:#1f1f1f; --surface-2:#2a2a29; --line:#333331;
  --fg:#f0efec; --muted:#a6a5a0; --accent:#ff3b45; --accent-ink:#ff5a62; --accent-soft:#3a1d20;
  --sale:#5fc48a; --photo:#ffffff; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#141414; --surface:#1f1f1f; --surface-2:#2a2a29; --line:#333331;
  --fg:#f0efec; --muted:#a6a5a0; --accent:#ff3b45; --accent-ink:#ff5a62; --accent-soft:#3a1d20;
  --sale:#5fc48a; --photo:#ffffff; color-scheme:dark}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--fg);font:16px/1.5 var(--font-body);direction:rtl}
button,input,select{font:inherit;color:inherit;-webkit-tap-highlight-color:transparent}
input:focus-visible,button:focus-visible,select:focus-visible,tr:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.wrap{max-width:1180px;margin-inline:auto;padding-inline:20px;overflow-x:clip}

/* header */
header.top{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-block:22px 18px;border-bottom:3px solid var(--accent);flex-wrap:wrap}
header.top h1{font:800 clamp(26px,4vw,40px)/1.1 var(--font-display);margin:0;letter-spacing:-.01em;text-wrap:balance}
header.top p{margin:6px 0 0;color:var(--muted);font-size:15px}
.logo{background:#fff;border-radius:6px;padding:6px 8px;line-height:0;flex:none}
.logo img{height:38px;width:auto}

/* controls */
.controls{display:flex;flex-direction:column;gap:12px;padding-block:20px 4px}
.row1{display:flex;gap:10px;align-items:center}
.search{flex:1;min-width:0;position:relative}
.search input{width:100%;font:500 16px var(--font-body);padding-block:11px;padding-inline:40px 40px;border:1px solid var(--line);border-radius:var(--radius);background:var(--surface);color:var(--fg)}
.search input::placeholder{color:var(--muted)}
.search svg{position:absolute;inset-inline-start:13px;top:50%;transform:translateY(-50%);width:18px;height:18px;color:var(--muted);pointer-events:none}
.search .clear{position:absolute;inset-inline-end:6px;top:50%;transform:translateY(-50%);border:0;background:none;width:34px;height:34px;border-radius:8px;cursor:pointer;color:var(--muted);font-size:20px;line-height:1}
.search .clear:hover{background:var(--surface-2)}
.viewtog{display:flex;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);flex:none}
.viewtog button{border:0;background:none;height:46px;width:46px;cursor:pointer;display:grid;place-items:center;color:var(--muted)}
.viewtog button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.viewtog svg{width:18px;height:18px}
.cats{display:flex;flex-wrap:wrap;gap:6px}
.cat{font:600 14px var(--font-body);border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:8px 14px;border-radius:999px;cursor:pointer;white-space:nowrap;display:inline-flex;gap:6px;align-items:center}
.cat small{font-size:12px;color:var(--muted);font-weight:600}
.cat:hover{border-color:var(--muted)}
.cat[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.cat[aria-pressed="true"] small{color:var(--bg);opacity:.7}
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;padding-top:4px}
.f{display:flex;flex-direction:column;gap:3px;min-width:0}
.fsel{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;width:100%}
.fsel .f select{max-width:none;width:100%}
.frow{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;width:100%}
.tags{width:100%;display:flex;flex-direction:column;gap:6px;padding-top:4px}
.tags .tl{font:600 12px var(--font-body);letter-spacing:.06em;color:var(--muted)}
.tags .tl small{font-weight:400;letter-spacing:0}
.tagrow{display:flex;flex-wrap:wrap;gap:6px}
.tag{border:1px solid var(--line);background:var(--surface);color:var(--fg);border-radius:999px;padding:5px 11px;font:500 13px var(--font-body);cursor:pointer;min-height:32px;display:inline-flex;align-items:center;gap:6px}
.tag small{color:var(--muted);font-size:11.5px}
.tag[aria-pressed="true"]{background:var(--fg);color:var(--bg);border-color:var(--fg)}
.tag[aria-pressed="true"] small{color:inherit;opacity:.75}
.tag:hover{border-color:var(--fg)}
.facc{width:100%;border:1px solid var(--line);border-radius:10px;background:var(--surface)}
.facc>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:8px;padding:9px 12px;min-height:44px;font:700 14px var(--font-body);-webkit-tap-highlight-color:transparent}
.facc>summary::-webkit-details-marker{display:none}
.facc>summary::after{content:"";margin-inline-start:auto;width:8px;height:8px;border-right:2.2px solid var(--accent-ink);border-bottom:2.2px solid var(--accent-ink);transform:rotate(45deg);margin-top:-4px;transition:transform .2s}
.facc[open]>summary::after{transform:rotate(225deg);margin-top:4px}
.facc>summary small{font-weight:400;color:var(--muted);font-size:12.5px}
.facc .fbad{background:var(--accent);color:#fff;border-radius:999px;font:700 11.5px var(--font-body);padding:2px 8px}
.facc .fbad:empty{display:none}
.facc-b{padding:4px 12px 12px}
.facc-b .tags{padding-top:0}
@media (prefers-reduced-motion:reduce){.facc>summary::after{transition:none}}
.f label{font:600 12px var(--font-body);letter-spacing:.06em;color:var(--muted)}
.f select,.f input{height:38px;border:1px solid var(--line);background:var(--surface);border-radius:8px;padding-inline:8px;font-size:14px;max-width:200px}
.f input{width:92px}
.price-range{display:flex;gap:4px;align-items:center}
.reset{border:0;background:none;color:var(--accent-ink);font-weight:700;cursor:pointer;padding:6px 4px;height:38px}
.reset:hover{text-decoration:underline}
.meta{padding-block:10px 14px}
.count{color:var(--muted);font-size:14px}

/* grid — mirrors the bracket page camera cards */
main{padding-bottom:48px;overflow-x:clip;min-width:0}
.card{overflow:hidden}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.card{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:12px 12px 14px;cursor:pointer;text-align:start;font:inherit;color:inherit;transition:border-color .15s,transform .15s;min-width:0}
.card:hover{border-color:var(--accent)}
@media (prefers-reduced-motion:no-preference){.card:hover{transform:translateY(-2px)}}
.ph{background:var(--photo);border-radius:6px;height:150px;display:grid;place-items:center;padding:8px;position:relative;max-width:100%}
.ph img{max-height:134px;max-width:100%;object-fit:contain}
.ph .noimg{width:38%;color:#c9c8c3}
.salepill{position:absolute;top:6px;inset-inline-start:6px;background:var(--sale);color:#fff;font-size:11px;font-weight:700;border-radius:999px;padding:2px 8px}
.fam{margin-top:4px;font:600 12px var(--font-body);letter-spacing:.06em;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.model{font:700 16px/1.25 var(--font-display);color:var(--accent-ink);direction:ltr;text-align:right;word-break:break-word}
.sub{color:var(--fg);font-size:14px;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chip{font:600 11.5px var(--font-body);background:var(--surface-2);color:var(--muted);border-radius:4px;padding:2px 7px;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.badges{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.badges img{height:20px;width:auto;background:#fff;border-radius:4px;padding:1px 3px}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.sku{font-size:12px;color:var(--muted);line-height:1.4;white-space:nowrap;min-width:0}
.price{font:800 21px/1 var(--font-display);white-space:nowrap;font-variant-numeric:tabular-nums}
.price .cur{font-size:.68em;font-weight:700;margin-inline-start:2px}
.price.ask{font-size:13px;font-weight:700;color:var(--accent-ink);white-space:normal;text-align:end}

.pic{display:block;width:100%;height:100%;background:center/contain no-repeat}
.bdg{display:inline-block;background:#fff center/auto calc(100% - 2px) no-repeat;border-radius:4px;flex:none}
.sh-badges .bdg{border:1px solid var(--line);border-radius:6px}
[hidden]{display:none!important}
input[type=search]::-webkit-search-cancel-button,input[type=search]::-webkit-search-decoration{-webkit-appearance:none;appearance:none;display:none}
.ftoggle{display:none;align-self:flex-start;align-items:center;gap:8px;font:600 14px var(--font-body);border:1px solid var(--line);background:var(--surface);color:var(--fg);padding:9px 14px;border-radius:999px;cursor:pointer;min-height:40px}
.ftoggle::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg);margin-top:-4px;margin-inline-start:2px}
.ftoggle[aria-expanded="true"]::after{transform:rotate(225deg);margin-top:4px}
.fcount{background:var(--accent);color:#fff;border-radius:999px;font-size:12px;min-width:20px;height:20px;display:inline-grid;place-items:center;padding-inline:6px}
.xhint{margin-top:10px;border:1px solid var(--accent);color:var(--accent-ink);background:var(--surface);border-radius:999px;padding:9px 16px;cursor:pointer;font-weight:700}
.specs dd{unicode-bidi:plaintext;text-align:start}
/* table view */
.tablewrap{overflow-x:auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius)}
table{width:100%;border-collapse:collapse;font-size:14px}
th{background:var(--surface-2);text-align:start;font:600 12px var(--font-body);letter-spacing:.06em;color:var(--muted);padding:9px 10px;white-space:nowrap}
td{padding:6px 10px;border-top:1px solid var(--line);vertical-align:middle}
tbody tr[data-id]{cursor:pointer}
tbody tr[data-id]:hover{background:var(--bg)}
td.tim{width:64px}
td.tim div{width:56px;height:42px;background:var(--photo);border-radius:6px;display:grid;place-items:center;padding:3px}
td.tim img{max-width:100%;max-height:100%}
td.tm{font-weight:700;color:var(--accent-ink);direction:ltr;text-align:right;white-space:nowrap}
td.ts{font-size:13px;color:var(--muted);white-space:nowrap}
td.tp{font-weight:800;white-space:nowrap;text-align:end;font-variant-numeric:tabular-nums}
td.tp.ask{color:var(--accent-ink);font-size:12.5px;font-weight:700}
td.tt{min-width:220px}
td.tc{color:var(--muted);font-size:13px;white-space:nowrap}
.grp{grid-column:1/-1;font:700 19px/1.3 var(--font-display);display:flex;align-items:center;gap:12px;padding-top:10px}
.grp::after{content:"";flex:1;height:1px;background:var(--line)}
tr.grow td{background:var(--bg);font-weight:700;font-size:14px;cursor:default}

.empty{padding:40px 0;color:var(--muted)}
.empty b{display:block;color:var(--fg);font-size:18px;margin-bottom:4px}
.empty button{margin-top:12px;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:8px 14px;cursor:pointer;font-weight:600}

/* detail sheet */
.scrim{position:fixed;inset:0;background:rgba(10,10,10,.45);z-index:40}
.sheet{position:fixed;top:0;bottom:0;inset-inline-start:0;width:min(560px,100%);background:var(--bg);z-index:41;display:flex;flex-direction:column;box-shadow:0 0 40px rgba(0,0,0,.25);padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px)}
@media (prefers-reduced-motion:no-preference){.sheet{animation:slide .22s ease-out}@keyframes slide{from{transform:translateX(30px);opacity:.4}}}
.sh-top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:3px solid var(--accent);gap:10px;background:var(--surface)}
.sh-top .crumb{font:600 13px var(--font-body);letter-spacing:.06em;color:var(--muted);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x{border:1px solid var(--line);background:var(--surface);border-radius:8px;width:38px;height:38px;cursor:pointer;font-size:20px;flex:none}
.sh-body>*{flex-shrink:0}
.sh-body{overflow-y:auto;min-height:0;padding:18px 18px 28px;display:flex;flex-direction:column;gap:16px}
.hero{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:12px}
.sh-ph{background:var(--photo);border-radius:8px;height:230px;display:grid;place-items:center;padding:12px;max-width:100%}
.sh-ph img{width:100%;height:100%;object-fit:contain}
.sh-model{font:800 clamp(22px,3.6vw,30px)/1.15 var(--font-display);color:var(--accent-ink);direction:ltr;text-align:right;margin:0;word-break:break-word}
.sh-title{margin:0;color:var(--muted);font-size:15px}
.sh-price{display:flex;align-items:baseline;justify-content:space-between;gap:12px;border:1px dashed var(--accent);border-radius:8px;padding:12px 14px;flex-wrap:wrap}
.sh-price .price{font-size:30px}
.sh-price small{color:var(--muted);font-size:13px}
.idrow{display:flex;gap:8px;flex-wrap:wrap}
.idbox{background:var(--surface);border:1px solid var(--line);border-radius:8px;padding:6px 10px;display:flex;gap:8px;align-items:center}
.idbox span{font:600 12px var(--font-body);color:var(--muted)}
.idbox b{font-weight:700;font-size:14px}
.copy{border:0;background:var(--accent-soft);color:var(--accent-ink);font-weight:700;border-radius:6px;padding:2px 8px;cursor:pointer;font-size:12px}
.specs{display:grid;grid-template-columns:minmax(110px,38%) 1fr;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin:0}
.specs dt,.specs dd{margin:0;padding:8px 12px;border-top:1px solid var(--line);font-size:14px;min-width:0}
.specs dt{color:var(--muted);font-weight:600;font-size:13px}
.specs dt:first-of-type,.specs dd:first-of-type{border-top:0}
.specs dd{white-space:pre-line;overflow-wrap:anywhere}
.sh-badges{display:flex;gap:8px;flex-wrap:wrap}
.sh-badges img{height:34px;background:#fff;border-radius:6px;padding:3px 6px;border:1px solid var(--line)}

/* installation (bracket matching) */
.inst{display:flex;flex-direction:column;gap:12px}
.inst h3{margin:0;font:800 18px/1.3 var(--font-display);display:flex;flex-direction:column;gap:2px}
.inst h3 small{font:600 12px var(--font-body);color:var(--muted);letter-spacing:.04em}
.inst .note{display:flex;gap:10px;padding:10px 12px;border-radius:8px;border:1px dashed var(--accent);font-size:14px}
.inst .note b{color:var(--accent-ink)}
.sol{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.sol>h4{margin:0;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;font:700 16px/1.3 var(--font-display);padding:10px 14px;border-bottom:1px solid var(--line)}
.sol>h4 .letter{display:inline-grid;place-items:center;min-width:24px;height:24px;border-radius:6px;background:var(--accent);color:#fff;font-size:13px;padding-inline:5px}
.sol>h4 .tag{font:600 12px var(--font-body);color:var(--muted)}
.steps{padding:12px 14px 14px;display:flex;flex-direction:column;gap:12px}
.stp .lab{font:700 13px var(--font-body);color:var(--muted);margin-bottom:6px}
.stp .lab small{font-weight:500;margin-inline-start:6px}
.choices{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;flex-direction:column;gap:6px}
.choice .cname{font:700 13px var(--font-display);color:var(--accent-ink)}
.ptiles{display:flex;flex-wrap:wrap;gap:8px}
.pt{width:110px;display:flex;flex-direction:column;gap:4px;border:1px solid var(--line);border-radius:8px;padding:6px;background:var(--surface);text-align:start;font:inherit;color:inherit;cursor:pointer;min-width:0}
.pt:hover{border-color:var(--accent)}
.pt.opt{border-style:dashed}
.pt .pi{height:70px;background:var(--photo);border-radius:6px;display:grid;place-items:center;padding:4px}
.pt .pc{font:700 12px/1.25 var(--font-display);direction:ltr;text-align:right;word-break:break-word}
.pt .pd{font-size:11.5px;color:var(--muted);line-height:1.25}
.pt .pp{font:800 13px var(--font-display);font-variant-numeric:tabular-nums}
.pt .pp.ask{font-size:11.5px;color:var(--accent-ink);font-weight:700}
.pt .ptag{font:700 10.5px var(--font-body);color:var(--muted)}
.or{font:600 11px var(--font-body);color:var(--muted);align-self:center}
.fits{display:flex;flex-wrap:wrap;gap:6px}
.fits span{font:600 13px var(--font-body);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:4px 10px}
.instchip{color:var(--sale)!important;background:color-mix(in srgb,var(--sale) 12%,transparent)!important}
.sh-sec{margin:0;font:800 18px/1.3 var(--font-display)}
.acc{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);gap:0}
.acc>summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:14px 16px;min-height:56px;-webkit-tap-highlight-color:transparent}
.acc>summary::-webkit-details-marker{display:none}
.acc>summary::after{content:"";grid-column:2;grid-row:1/span 2;width:9px;height:9px;border-right:2.5px solid var(--accent-ink);border-bottom:2.5px solid var(--accent-ink);transform:rotate(45deg);margin-top:-5px;transition:transform .2s}
.acc[open]>summary::after{transform:rotate(225deg);margin-top:5px}
.acc>summary:hover .acc-t{color:var(--accent-ink)}
.acc-t{font:800 17px/1.3 var(--font-display)}
.acc-s{font-size:13px;color:var(--muted);grid-column:1}
.acc[open]>summary{border-bottom:1px solid var(--line)}
.acc-b{display:flex;flex-direction:column;gap:12px;padding:14px 12px}
@media (prefers-reduced-motion:reduce){.acc>summary::after{transition:none}}
/* footer */
footer.contact{margin-top:40px;color:var(--muted);font-size:14px;border-top:1px solid var(--line);padding-top:18px;display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:22px;padding-bottom:40px}
footer h2{font:700 15px var(--font-display);color:var(--fg);margin:0 0 10px}
.people{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px 16px}
.people div b{display:block;font-weight:700;color:var(--fg)}
.people div span{font-size:13px;direction:ltr;display:block;text-align:right;user-select:all}
footer p{margin:0 0 6px}
footer p b{color:var(--fg)}
.ltr{direction:ltr;unicode-bidi:isolate;user-select:all}
.toast{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);background:var(--fg);color:var(--bg);padding:10px 16px;border-radius:8px;font:600 14px var(--font-body);z-index:60}

@media (max-width:640px){
  .ftoggle{display:inline-flex}
  .filters:not(.open){display:none}
  header.top p .hint{display:none}
  td.tt,td.tc,th.tt,th.tc,td.ts,th.ts{display:none}
  td.tm{white-space:normal;word-break:break-word;font-size:13.5px}
  td{padding:6px 8px}
  .wrap{padding-inline:16px}
  header.top{flex-wrap:nowrap;align-items:flex-start;padding-block:16px 14px;gap:12px}
  header.top h1{font-size:23px}
  header.top p{font-size:14px;margin-top:4px}
  .logo{padding:4px 6px}.logo img{height:24px}
  .controls{padding-block:14px 4px}
  .cats{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-inline:-16px;padding-inline:16px;width:calc(100% + 32px)}
  .cats::-webkit-scrollbar{display:none}
  .cat{flex:none}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .card{padding:8px 8px 12px}
  .ph{height:110px}.ph img{max-height:96px}
  .model{font-size:14.5px}
  .price{font-size:18px}
  .chips .chip:nth-child(n+3):not(.instchip){display:none}
  .f select{max-width:160px}
  .fsel{grid-template-columns:repeat(2,minmax(0,1fr))}
  .fsel .f select{max-width:none}
}
.loading{padding:48px 0;text-align:center;color:var(--muted)}
.nojs h2{font:800 18px var(--font-display);margin:24px 0 8px}
.nojs ul{margin:0;padding-inline-start:18px;line-height:1.8}