:root{
  --bg:#f6f7f1;--card:#fff;--ink:#1b3029;--muted:#66726b;--line:#dce2d9;--field:#fff;--field-line:#d2dacd;
  --brand:#185a44;--btn:#185a44;--btn-ink:#fff;--soft:#e8eddf;--chip:#e9ede3;--chip-ink:#3f5c46;
  --lime:#d8ed89;--lime-ink:#26340c;--best:#8fa968;--old:#8b938b;--tile:#fff;
  --notice-bg:#fff1d9;--notice-line:#ead2a2;--notice-ink:#70542e;--shadow:0 6px 20px #183a2512;
  --header:rgba(246,247,241,.82);--backdrop:#11291cb3;
  --safe-t:env(safe-area-inset-top,0px);--safe-b:env(safe-area-inset-bottom,0px);
  --safe-l:env(safe-area-inset-left,0px);--safe-r:env(safe-area-inset-right,0px);
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0f1713;--card:#17211c;--ink:#e5ede7;--muted:#98a79d;--line:#25332b;--field:#1b2620;--field-line:#2f3f36;
  --brand:#7fd1a4;--btn:#2f8a62;--btn-ink:#fff;--soft:#1b2822;--chip:#1d2a24;--chip-ink:#bcd6c3;
  --lime:#c5df69;--lime-ink:#1d2607;--best:#5f8546;--old:#7c8a80;--tile:#fff;
  --notice-bg:#33290f;--notice-line:#5a4720;--notice-ink:#f1d69c;--shadow:0 6px 24px #0006;
  --header:rgba(15,23,19,.78);--backdrop:#000b;color-scheme:dark;
}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font:15px/1.5 -apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto,sans-serif;-webkit-font-smoothing:antialiased;padding-left:var(--safe-l);padding-right:var(--safe-r)}
button,input,select{font:inherit;color:inherit}
button,a,input,select,label{-webkit-tap-highlight-color:transparent}
button{cursor:pointer;touch-action:manipulation;border:0;background:var(--btn);color:var(--btn-ink);border-radius:10px;padding:12px 20px;font-weight:600;transition:transform .12s,opacity .12s}
button:active{transform:scale(.97)}
button:disabled{opacity:.55;cursor:wait}
a{color:var(--brand)}
img{display:block}

/* Header: sticky, translucent, respects the notch / Dynamic Island */
header{position:sticky;top:0;z-index:10;padding:calc(14px + var(--safe-t)) max(32px,calc((100% - 1180px)/2 + 32px)) 14px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line);background:var(--header);-webkit-backdrop-filter:saturate(180%) blur(18px);backdrop-filter:saturate(180%) blur(18px)}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--brand);font-weight:800;font-size:26px;letter-spacing:-1px}
.brand img{border-radius:8px}
.brand span{margin-left:10px;font-size:12px;font-weight:400;letter-spacing:0;color:var(--muted)}
.city{font-size:13px;display:flex;align-items:center;gap:6px;color:var(--muted)}
.city i{width:7px;height:7px;border-radius:50%;background:var(--brand)}

main{max-width:1180px;margin:auto;padding:0 32px}
.hero{padding:56px 0 44px;max-width:870px}
.eyebrow,.section-label{font-size:10px;letter-spacing:1.8px;font-weight:700;color:var(--brand)}
h1{font-size:clamp(34px,4.6vw,57px);line-height:1.1;letter-spacing:-2px;margin:16px 0}
h1 em{font-style:normal;color:var(--brand)}
.hero p{color:var(--muted);margin:18px 0 26px;font-size:16px}

.searchbox{display:flex;align-items:center;gap:12px;border:1px solid var(--field-line);background:var(--field);padding:6px 6px 6px 18px;border-radius:16px;box-shadow:var(--shadow)}
.searchbox>span{font-size:26px;color:var(--muted)}
.searchbox input{flex:1;min-width:0;border:0;background:none;padding:10px 0;font-size:17px;outline:none;-webkit-appearance:none;appearance:none}
.searchbox input::-webkit-search-cancel-button{-webkit-appearance:none}
.searchbox:focus-within{border-color:var(--brand);box-shadow:0 0 0 3px color-mix(in srgb,var(--brand) 22%,transparent),var(--shadow)}
.searchbox button{min-height:46px;border-radius:12px}
.searchbox button span{margin-left:10px}

.quick{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:14px}
.quick>span{color:var(--muted);font-size:12px;margin-right:2px}
.quick button{padding:7px 13px;background:var(--chip);color:var(--chip-ink);font-weight:500;font-size:13px;border:1px solid transparent;border-radius:999px;white-space:nowrap}
.quick button:hover{border-color:var(--brand)}
#saved button[data-remove]{padding:7px 10px;margin-left:-6px;background:transparent;color:var(--muted)}
#saved-wrap{padding:0 0 24px}

.results{border-top:1px solid var(--line);padding-top:28px;min-height:350px}
.results-head{display:flex;justify-content:space-between;align-items:center;gap:16px}
h2{font-size:24px;letter-spacing:-.6px;margin:6px 0;line-height:1.2;overflow-wrap:anywhere}
#status{font-size:12px;color:var(--muted);margin:4px 0 18px}
.actions{display:flex;gap:8px}
.secondary{background:transparent;color:var(--brand);border:1px solid var(--field-line);padding:9px 14px;font-size:13px;white-space:nowrap;border-radius:999px}

.filters{padding:18px 0;display:flex;gap:14px;align-items:end;flex-wrap:wrap;border-top:1px solid var(--line)}
.filters label{font-size:11px;color:var(--muted);flex:1;min-width:120px}
.filters input:not([type=checkbox]),.filters select{width:100%;display:block;background:var(--field);border:1px solid var(--field-line);border-radius:10px;padding:0 12px;height:42px;margin-top:5px;color:var(--ink);font-size:14px;-webkit-appearance:none;appearance:none;text-overflow:ellipsis;white-space:nowrap;overflow:hidden}
.filters select{padding-right:30px;background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),linear-gradient(135deg,var(--muted) 50%,transparent 50%);background-position:calc(100% - 17px) 18px,calc(100% - 12px) 18px;background-size:5px 5px;background-repeat:no-repeat}
.filters input:focus,.filters select:focus{outline:none;border-color:var(--brand)}
.filters .check{display:flex;align-items:center;gap:8px;flex:0 0 auto;min-width:0;height:42px;font-size:13px;color:var(--ink)}
input[type=checkbox]{accent-color:var(--btn);width:18px;height:18px;margin:0}
#summary{font-size:13px;margin:4px 0 18px;color:var(--muted)}
#summary button{margin-left:6px;padding:4px 10px}

.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px;display:flex;flex-direction:column;position:relative;min-width:0}
.card.best{border-color:var(--best);box-shadow:0 0 0 1px var(--best) inset}
.store{font-size:12px;font-weight:700;color:var(--brand);display:flex;justify-content:space-between;align-items:center;gap:8px;min-width:0}
.store>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tag{background:var(--lime);color:var(--lime-ink);padding:2px 8px;border-radius:999px;font-size:10px;font-weight:600;white-space:nowrap;flex:none}
.product-image{height:130px;display:flex;align-items:center;justify-content:center;margin:14px 0 10px;background:var(--tile);border-radius:12px;overflow:hidden}
.product-image img{max-width:92%;height:92%;object-fit:contain}
.placeholder{color:#a7b4a3;font-size:40px}
.card h3{font-size:15px;font-weight:600;line-height:1.35;margin:4px 0 6px;min-height:40px;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.sub,.labels{font-size:12px;color:var(--muted)}
.labels{margin-top:4px;color:var(--notice-ink)}
.price-row{display:flex;align-items:baseline;flex-wrap:wrap;column-gap:8px;margin-top:auto;padding-top:12px}
.price{font-size:26px;letter-spacing:-.8px;font-weight:750;white-space:nowrap;font-variant-numeric:tabular-nums}
.price small{font-size:.55em;font-weight:600;letter-spacing:0;color:var(--muted)}
.old{font-size:13px;color:var(--old);text-decoration:line-through;white-space:nowrap}
.dates{font-size:12px;color:var(--muted);margin-top:2px}
.card-bottom{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.card-bottom button{background:var(--chip);color:var(--chip-ink);padding:8px 12px;font-size:13px;font-weight:600;border-radius:999px}
.card-bottom button[data-detail]{background:transparent;color:var(--brand);padding:8px 4px}

.empty{grid-column:1/-1;text-align:center;padding:40px 20px;color:var(--muted);border:1px dashed var(--field-line);border-radius:14px}
.empty>span{font-size:34px;color:var(--brand)}
.empty h3{color:var(--ink);font-weight:600;margin:10px 0}
.empty p{font-size:13px;margin:0}
.notice{background:var(--notice-bg);border:1px solid var(--notice-line);color:var(--notice-ink);border-radius:12px;padding:12px 16px;font-size:13px;margin:12px 0}

.install{margin:56px 0 30px;padding:28px 34px;background:var(--soft);border-radius:18px;display:flex;justify-content:space-between;align-items:center;gap:20px}
.install p{font-size:13px;color:var(--muted)}
.install img{border-radius:20px;transform:rotate(7deg);flex:none}
@media (display-mode:standalone){.install{display:none}}
footer{border-top:1px solid var(--line);padding:22px 0 calc(32px + var(--safe-b));display:flex;align-items:start;gap:24px;font-size:11px;color:var(--muted)}
footer strong{font-size:22px;color:var(--brand)}
footer p{margin:0;flex:1}

dialog{border:1px solid var(--line);border-radius:20px;width:min(530px,calc(100% - 30px));padding:28px;background:var(--bg);color:var(--ink);max-height:85vh;overflow:auto}
dialog::backdrop{background:var(--backdrop)}
.close{position:absolute;right:10px;top:8px;width:40px;height:40px;padding:0;background:var(--chip);color:var(--ink);font-size:24px;line-height:1;border-radius:50%}
dialog h2{padding-right:44px;font-size:21px}
dialog p{font-size:14px}
dialog a{display:block;text-align:center;margin-top:14px;padding:13px;border-radius:12px;background:var(--btn);color:var(--btn-ink);text-decoration:none;font-weight:600}
.detail-note{padding:12px;background:var(--soft);border-radius:10px;font-size:14px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
[hidden]{display:none!important}
:focus-visible{outline:2px solid var(--brand);outline-offset:3px}

@media(max-width:900px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .results-head{align-items:start;flex-direction:column;gap:0}
  .actions{margin-bottom:12px}
}

/* Phones */
@media(max-width:600px){
  body{font-size:16px}
  header{padding:calc(10px + var(--safe-t)) 16px 10px}
  .brand{font-size:23px;gap:8px}
  .brand img{width:28px;height:28px}
  .brand span{display:none}
  main{padding:0 16px}
  .hero{padding:26px 0 22px}
  h1{letter-spacing:-1.2px;font-size:32px;margin:10px 0}
  .hero p{font-size:15px;margin:10px 0 18px}
  .hero p br{display:none}
  /* After the first search the hero shrinks to just the search field */
  .has-results .hero{padding-top:14px}
  .has-results .hero .eyebrow,.has-results .hero h1,.has-results .hero p{display:none}
  .searchbox{gap:8px;padding:5px 5px 5px 14px;border-radius:14px}
  .searchbox>span{display:none}
  .searchbox input{font-size:17px}
  .searchbox button{padding:0 16px;font-size:15px}
  .searchbox button span{display:none}
  /* Chips scroll sideways instead of wrapping into a tall block */
  .quick{flex-wrap:nowrap;overflow-x:auto;margin:12px -16px 0;padding:0 16px 2px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
  .quick::-webkit-scrollbar{display:none}
  .quick>span{display:none}
  .quick button{flex:none;font-size:14px;padding:8px 14px}
  .results{padding-top:20px}
  h2{font-size:22px}
  #status{margin-bottom:12px}
  .actions{width:100%}
  .actions button{flex:1;padding:10px;font-size:14px}
  /* 16px fields: iOS Safari does not zoom the page when they get focus */
  .filters{display:grid;grid-template-columns:1fr 1fr;gap:10px 10px;padding:14px 0}
  .filters label{min-width:0;font-size:12px}
  .filters input:not([type=checkbox]),.filters select{font-size:16px;height:44px}
  .filters select{background-position:calc(100% - 17px) 19px,calc(100% - 12px) 19px}
  .filters .check{grid-column:1/-1;height:auto;font-size:14px}
  #summary{font-size:14px}
  /* Cards become list rows: picture on the left, price is the first thing you see */
  .grid{grid-template-columns:1fr;gap:10px}
  .card{display:grid;grid-template-columns:84px minmax(0,1fr);column-gap:14px;padding:14px;border-radius:16px;align-content:start}
  .card>*{grid-column:2}
  .card .product-image{grid-column:1;grid-row:1/span 5;height:84px;width:84px;margin:0;align-self:start;border:1px solid var(--line)}
  .store{font-size:12px}
  .card h3{font-size:15px;min-height:0;margin:3px 0 2px;-webkit-line-clamp:2}
  .sub{font-size:12px}
  .price-row{padding-top:6px;margin-top:0}
  .price{font-size:24px}
  .dates{font-size:12px}
  .card-bottom{grid-column:1/-1;margin-top:12px;padding-top:10px;gap:6px}
  .card-bottom button{min-height:36px}
  .card-bottom button[data-sku]{margin-left:auto}
  .install{padding:20px;margin-top:32px;border-radius:16px}
  .install img{width:56px;height:56px}
  .install h2{font-size:19px}
  .install p br{display:none}
  footer{gap:14px;flex-wrap:wrap}
  footer>span{display:none}
  /* Details open as a bottom sheet */
  dialog{width:100%;max-width:100%;margin:auto 0 0;border-radius:22px 22px 0 0;border-bottom:0;padding:26px 20px calc(20px + var(--safe-b));max-height:88vh}
  dialog[open]{animation:sheet .26s cubic-bezier(.2,.8,.2,1)}
  dialog::before{content:"";display:block;width:38px;height:5px;border-radius:3px;background:var(--field-line);margin:-14px auto 14px}
}
@keyframes sheet{from{transform:translateY(40px);opacity:.4}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}