/* ui-v9: search-first comparison layout with day (default) and night themes.
   Loaded after market.css and comparison.css. Night keeps their dark palette;
   day applies unless <html data-theme="dark">. */
:root{--panel:var(--surface);--soft:#3a2730;--shadow:#00000040;--note-bg:#3c3430;--note-text:#e3c69b;--note-line:#57483a;
      --stock:#83cbb0;--chip-text:var(--text);--strong:var(--text);--muted-2:#c3cbd1;--band-a:#a3173a;--band-b:#c23a5a}
:root:not([data-theme=dark]){color-scheme:light;--bg:#f4f5f7;--surface:#fff;--input:#f1f2f5;--line:#e2e5ea;--text:#22272e;--muted:#6b7480;
      --accent:#e2264d;--blue:#1769c4;--panel:#fff;--soft:#fdecef;--shadow:#1f2a3717;--note-bg:#fff8e8;--note-text:#7a5200;
      --note-line:#f1dfb2;--stock:#0b8a5b;--chip-text:#3a414a;--muted-2:#4b535d;--band-a:#e2264d;--band-b:#f35c78}
body{background:var(--bg);color:var(--text)}
html:not([data-theme=dark]){scrollbar-color:#b7bec6 transparent}
:root:not([data-theme=dark]) body::-webkit-scrollbar-thumb{background:#b7bec6}

/* Category pictograms (dm-icons.svg): ink strokes + brand tint, one frame everywhere */
:root{--icon-bg:#2c3a43;--icon-ink:#e6ebee;--icon-tint:#7a3248}
:root:not([data-theme=dark]){--icon-bg:#fff4f6;--icon-ink:#3b4450;--icon-tint:#f7c6d2}
.dm-icon{color:var(--icon-ink);fill:var(--icon-tint)}
.browse-strip>a>span,.browse-strip>a:nth-child(n)>span{background:var(--icon-bg);border:1px solid var(--line);padding:15px}
.mega-tab .dm-icon,.category-rail .dm-icon{background:var(--icon-bg);border:1px solid var(--line);padding:6px}
.category-body .subcategory-icon,.subcategory-links>a:nth-child(n) .subcategory-icon{background:var(--icon-bg);border:1px solid var(--line);padding:16px}
.browse-strip>a:hover>span{border-color:var(--accent)}

/* Day-only replacements for colours the dark sheets hard-code */
:root:not([data-theme=dark]) .top,:root:not([data-theme=dark]) .desktop-navigation{background:#fff}
:root:not([data-theme=dark]) .mega-tabs{background:#f7f8fa}
:root:not([data-theme=dark]) .mega-tab[aria-selected=true],:root:not([data-theme=dark]) .all-departments,:root:not([data-theme=dark]) .category-rail{background:#fff}
:root:not([data-theme=dark]) .mega-backdrop{background:#0b141a59}
:root:not([data-theme=dark]) .bottom-nav{background:#fff}
:root:not([data-theme=dark]) .bottom-nav a{color:#6b7480}
:root:not([data-theme=dark]) .searchbar input::placeholder,:root:not([data-theme=dark]) .searchbar a{color:#8a929c}
:root:not([data-theme=dark]) .searchbar button{color:#6b7480}
:root:not([data-theme=dark]) .shelf-scrollbar{background:#0000000d}
:root:not([data-theme=dark]) .shelf-scrollbar span,:root:not([data-theme=dark]) .page-scrollbar span{background:#b7bec6}

/* Header, search and theme button */
.top{border-bottom:1px solid var(--line)}
.searchbar{border:1px solid transparent;transition:border-color .15s,box-shadow .15s}
.searchbar:focus-within{border-color:var(--line);box-shadow:0 2px 12px var(--shadow)}
.searchbar input{color:var(--text)}.searchbar a{border-right-color:var(--line)}
.wordmark,.brand-symbol{color:var(--accent)}
.navigation-inner{color:var(--muted-2)}.navigation-inner>a:hover,.mega-menu>summary:hover{color:var(--accent)}
.desktop-navigation{border-bottom:1px solid var(--line)}
.theme-toggle{display:inline-grid;place-items:center;width:42px;height:42px;flex-shrink:0;border-radius:50%;border:1px solid var(--line);
      background:var(--panel);color:var(--text);padding:0;box-shadow:0 2px 8px var(--shadow);transition:background .15s,color .15s}
.theme-toggle:hover{color:var(--accent);border-color:var(--accent)}
.theme-toggle svg{width:21px;height:21px}
.theme-toggle .moon{display:block}.theme-toggle .sun{display:none}
[data-theme=dark] .theme-toggle .moon{display:none}[data-theme=dark] .theme-toggle .sun{display:block}
.home-tools{position:absolute;top:16px;left:max(16px,calc((100vw - 1400px)/2 + 24px));z-index:31}
.top-inner .theme-toggle{margin-right:4px}
.home-page .top-inner .theme-toggle{display:none}

/* Category drawer and category page */
.mega-content{background:var(--panel);border-color:var(--line);box-shadow:0 18px 32px var(--shadow)}
.mega-tab .product-icon,.category-rail .product-icon{border:1px solid var(--line)}
.category-rail .selected{background:var(--bg)}
.category-body .subcategory-links>a{color:var(--text)}
.category-body .subcategory-icon,.subcategory-links>a:nth-child(n) .subcategory-icon{border:1px solid var(--line)}

/* Cards */
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px;transition:box-shadow .15s,border-color .15s}
.card:hover{box-shadow:0 6px 18px var(--shadow)}
.product-image{border-radius:11px 11px 0 0}
.card h3{color:var(--text);height:54px;margin-bottom:10px}
.card-variant{display:none}
.price{color:var(--muted)}.price b{color:var(--strong);font-weight:700}
.card-bottom{color:var(--muted)}
.card-bottom>span:first-child{background:var(--input);border-radius:999px;padding:1px 10px;color:var(--muted-2)}
.shelf-arrow{background:var(--panel);border-color:var(--line);box-shadow:0 2px 10px var(--shadow)}

/* Home: search-first hero, then richer shelves */
.home-page .top,.home-page .desktop-navigation{background:var(--bg);border-bottom:0}
.home-page .home-brand{margin-top:34px}
.home-page .home-brand a{color:var(--text);font-size:34px;gap:14px}
.home-page .home-brand .brand-symbol{color:var(--accent)}
.home-page .top-inner{max-width:820px;height:auto;padding:14px 24px 6px}
.home-page .searchbar{height:58px;max-width:780px;background:var(--panel);border:1px solid var(--line);border-radius:14px;
      box-shadow:0 6px 22px var(--shadow);padding:0 18px}
.home-page .searchbar input{font-size:16px}
.hero-meta{text-align:center;padding:8px 16px 4px}
.hero-tagline{margin:0;font-size:15px;color:var(--muted-2)}
.hero-stats{margin:2px 0 0;font-size:13px;color:var(--muted)}.hero-stats b{color:var(--accent);font-weight:700}
.chip,.chip:nth-child(n){background:var(--panel);border:1px solid var(--line);color:var(--chip-text);border-radius:999px;padding:4px 16px}
.chip:hover{border-color:var(--accent);color:var(--accent)}
.shortcut-icon{background:var(--panel);border:1px solid var(--line);box-shadow:0 2px 8px var(--shadow)}
.shortcuts a{color:var(--chip-text)}
.home-page .shelf,.home-page .browse-categories{background:var(--panel);border:1px solid var(--line);border-radius:16px;margin:14px 24px;padding:20px 22px 16px}
.home-page .shelf+.shelf{border-top:1px solid var(--line)}
.browse-strip>a>span,.browse-strip>a:nth-child(n)>span{background:#fff;border:1px solid var(--line)}
.browse-strip>a:hover strong{color:var(--accent)}
.section-heading a{color:var(--blue)}
.home-page .compare-band{background:linear-gradient(120deg,var(--band-a),var(--band-b));border:0}
.compare-band .section-heading h2,.compare-band .section-heading a,.compare-band .shelf-caption{color:#fff}
.compare-band .card{border-color:transparent}
.compare-band .shelf-scrollbar{background:#ffffff40}.compare-band .shelf-scrollbar span{background:#fff}
.features{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin:14px 24px 30px}
.feature{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 18px;display:flex;gap:14px;align-items:center}
.feature .icon{width:34px;height:34px;color:var(--accent);stroke-width:1.6}
.feature strong{display:block;font-size:14px;font-weight:650}.feature span{display:block;font-size:12.5px;color:var(--muted);line-height:1.9}

/* Results and filters */
.filters{background:var(--panel);border-color:var(--line)}
.filters input,.filters select,.result-toolbar select{background:var(--input);border-color:var(--line);color:var(--text)}
.sort-button{background:var(--panel);border-color:var(--line)}
.pagination a{color:var(--blue)}

/* Product page: a simple, uncluttered price comparison */
.detail-wrap{max-width:1180px}
.breadcrumbs a:hover{color:var(--accent)}
.product-summary{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:24px;gap:34px}
.detail-image{border:1px solid var(--line);border-radius:12px;min-height:320px}
.eyebrow{color:var(--blue)}
.summary-price{margin-top:20px;color:var(--muted)}.summary-price b{color:var(--strong);font-weight:750}
.summary-price .price-to{color:var(--strong);font-weight:600}
.summary-stores{margin:2px 0 0;color:var(--accent);font-weight:650;font-size:14px}
.variant-title{color:var(--muted-2);margin:20px 0 8px}
.variant{background:var(--panel);border-color:var(--line);color:var(--chip-text)}
.variant.selected{background:var(--soft);border-color:var(--accent);color:var(--accent)}
.package-note{background:var(--note-bg);color:var(--note-text);border:1px solid var(--note-line)}
.save-button{color:var(--muted)}.save-button:hover{color:var(--accent)}
.seller-section{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px 22px 10px;margin-top:16px}
.seller-section .section-heading{margin-bottom:4px}.seller-section .section-heading h2{font-size:18px}
.seller-note{margin-bottom:6px}
.seller-row{background:transparent;border:0;border-top:1px solid var(--line);border-radius:0;margin:0;padding:14px 4px}
.seller-name p.muted{display:none}
.seller-name p{margin:2px 0 0}
.seller-package{color:var(--muted-2)!important}
.store-avatar{background:var(--input);border-color:var(--line);color:var(--blue)}
.seller-price strong{color:var(--strong)}.stock{color:var(--stock)}
.specs,.history{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:16px 22px;margin-top:16px}
.specs h2{margin:4px 0 12px}
.specs dt{background:var(--input)}
.specs dt,.specs dd,.history th,.history td{border-bottom-color:var(--line)}
.source-specs>summary{font-size:17px;font-weight:550;cursor:pointer;padding:4px 0}
.source-specs[open]>summary{margin-bottom:10px}

/* Settings (account) page */
.theme-settings{display:flex;gap:10px;flex-wrap:wrap;margin:6px 0 4px}
.theme-option{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--panel);color:var(--text);
      border-radius:999px;padding:8px 16px;font-size:14px}
.theme-option svg{width:18px;height:18px}
.theme-option[aria-pressed=true]{border-color:var(--accent);color:var(--accent);background:var(--soft)}
.account-card{background:var(--panel);border-color:var(--line)}.theme-card{margin-top:16px}
.coverage-search input{background:var(--panel);border-color:var(--line)}
.desktop-footer{background:var(--panel);border-top-color:var(--line)}
.bottom-nav{border-top:1px solid var(--line);box-shadow:0 -2px 10px var(--shadow)}
.bottom-nav .active{color:var(--accent)}

@media(min-width:761px){
 .seller-row{grid-template-columns:minmax(0,1fr) 180px 160px;gap:16px}
}
@media(max-width:760px){
 .home-tools{top:10px;left:10px}.theme-toggle{width:38px;height:38px}
 .top-inner .theme-toggle{display:none}
 .home-page .home-brand{margin-top:14px;height:auto}
 .home-page .top-inner{padding:8px 12px 4px}
 .home-page .searchbar{height:50px;border-radius:12px;padding:0 13px}
 .hero-tagline{font-size:13px}.hero-stats{font-size:12px}
 .home-page .shelf,.home-page .browse-categories{margin:10px 8px;padding:14px 12px 12px;border-radius:14px}
 .features{grid-template-columns:minmax(0,1fr);margin:10px 8px 22px;gap:8px}
 .feature{padding:12px 14px}.feature .icon{width:28px;height:28px}
 .product-summary{padding:14px;border-radius:14px;gap:14px}
 .seller-section,.specs,.history{padding:14px 14px 8px;border-radius:14px}
 .seller-row{padding:12px 2px}
 .card{border-radius:10px}
}