/* ==========================================================================
   SmartBuild app styles. Builds on /assets/brand.css (tokens, type, buttons).
   Mobile first; desktop enhancements at 720px and 1024px.
   ========================================================================== */

/* Legacy variable names still used by a few inline styles in app.js */
:root, [data-theme="dark"] {
    --primary: var(--brand); --primary-dark: var(--brand-hover); --primary-light: var(--brand-ink);
    --carbon-900: var(--bg); --carbon-800: var(--surface); --carbon-700: var(--surface); --carbon-600: var(--surface-2);
    --carbon-500: var(--line); --carbon-400: var(--line-strong); --carbon-300: var(--ink-400); --carbon-200: var(--text-subtle);
    --carbon-100: var(--text-muted); --carbon-50: var(--text-2);
    --chrome-light: var(--text); --chrome: var(--text-2); --chrome-dark: var(--text-muted);
    --gray-50: var(--surface-2); --gray-100: var(--surface-2); --gray-200: var(--line); --gray-300: var(--line-strong);
    --gray-600: var(--text-muted); --gray-700: var(--text-2); --gray-900: var(--text);
    --header-h: 64px;
    --nav-h: 64px;
}

html { scroll-padding-top: calc(var(--header-h) + 1rem); }
body { min-height: 100vh; }
#main-app { min-height: 100vh; }

/* ---------- Header ---------- */
.header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--line); padding: env(safe-area-inset-top) 1rem 0; }
.header-inner { max-width: 1120px; margin: 0 auto; height: var(--header-h); display: flex; align-items: center; gap: 0.75rem; }
.header-tag { display: none; font-size: var(--fs-sm); color: var(--text-muted); padding-left: 0.85rem; border-left: 1px solid var(--line); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 0.5rem; }
#theme-toggle { width: 40px; height: 40px; border-radius: var(--r-full); border: 1px solid transparent; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast), color var(--t-fast); }
#theme-toggle:hover { background: var(--surface-3); color: var(--text); }
#theme-toggle .icon { width: 20px; height: 20px; }
#theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] #theme-toggle .theme-icon-sun { display: inline-block; }
[data-theme="dark"] #theme-toggle .theme-icon-moon { display: none; }
.user-type-badge { display: inline-flex; align-items: center; height: 26px; padding: 0 0.65rem; border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.04em; text-transform: uppercase; }
.user-type-badge[hidden] { display: none !important; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: 1120px; margin: 0 auto; padding: 1rem 1rem calc(var(--nav-h) + 2rem + env(safe-area-inset-bottom)); }
body.has-sticky-bar .container { padding-bottom: calc(var(--nav-h) + 7rem + env(safe-area-inset-bottom)); }
.tab-content { display: none; }
.tab-content.active { display: block; animation: fadeUp 260ms var(--ease); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-xs); }
.card-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; }
.card-title { font-size: var(--fs-lg); font-weight: 700; letter-spacing: -0.015em; color: var(--text); }
.card > .card-title:first-child { margin-bottom: 1rem; }
.section-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; margin-bottom: 1rem; }
.section-hint { font-size: var(--fs-sm); color: var(--text-muted); font-weight: 400; }
.muted-text { font-size: 0.92rem; color: var(--text-muted); }
.page-title { font-size: var(--fs-2xl); font-weight: 750; letter-spacing: -0.025em; margin-bottom: 0.35rem; }
.page-lead { color: var(--text-muted); margin-bottom: 1.1rem; max-width: 62ch; }
.eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-size: var(--fs-xs); font-weight: 600; color: var(--text-muted); letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 0.65rem; }
.accent { color: inherit; font-style: normal; }
.link-btn { background: none; border: 0; padding: 0; color: var(--brand-ink); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.link-btn:hover { text-decoration-thickness: 2px; }
.link-btn.danger { color: var(--text-muted); font-size: 0.85rem; text-decoration: none; font-weight: 500; min-height: 32px; display: inline-flex; align-items: center; gap: 0.3rem; }
.link-btn.danger:hover { color: var(--danger); }
.link-btn.danger .icon { width: 0.95rem; height: 0.95rem; }

/* ---------- Forms ---------- */
.form-group { margin-bottom: 1rem; }
.form-label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); margin-bottom: 0.4rem; }
.input, .select, .textarea, .form-input, select {
    width: 100%; min-height: var(--tap); padding: 0.6rem 0.85rem;
    background: var(--surface); color: var(--text);
    border: 1px solid var(--line-strong); border-radius: var(--r-sm);
    font-size: 1rem; line-height: 1.4;
    transition: border-color var(--t-fast), box-shadow var(--t-fast);
    -webkit-appearance: none; appearance: none;
}
.input:hover, .select:hover, .form-input:hover, select:hover, .textarea:hover { border-color: var(--ink-400); }
.input:focus, .select:focus, .textarea:focus, .form-input:focus, select:focus { outline: none; border-color: var(--brand); box-shadow: var(--ring); }
.input::placeholder, .textarea::placeholder, .form-input::placeholder { color: var(--placeholder); text-transform: none; }
select, .select { padding-right: 2.4rem; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.75rem center; background-size: 1.05rem; }
.select-sm { min-height: 36px; width: auto; padding: 0.3rem 2.1rem 0.3rem 0.7rem; font-size: var(--fs-sm); background-position: right 0.6rem center; }
.textarea, textarea.form-input { min-height: 104px; resize: vertical; }
input[type="number"] { font-variant-numeric: tabular-nums; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }
.input-group { display: grid; grid-template-columns: 1fr; gap: 0 0.75rem; }
@media (min-width: 640px) { .input-group { grid-template-columns: 1fr 1fr; } }
.form-hint { display: block; font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; }

.search-box { position: relative; margin-bottom: 1rem; }
.search-box .input, .hero-search .input { padding-left: 2.75rem; }
.search-icon { position: absolute; left: 0.9rem; top: 50%; transform: translateY(-50%); color: var(--text-subtle); pointer-events: none; display: inline-flex; }
.search-icon .icon { width: 1.15rem; height: 1.15rem; }
.search-box-lg .input { min-height: 52px; font-size: 1.05rem; border-radius: var(--r-md); }

.quantity-control { display: inline-flex; align-items: center; gap: 0; border: 1px solid var(--line-strong); border-radius: var(--r-sm); background: var(--surface); overflow: hidden; }
.quantity-btn { width: 40px; height: 40px; border: 0; background: transparent; color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; transition: background var(--t-fast); }
.quantity-btn:hover { background: var(--surface-3); color: var(--text); }
.quantity-btn .icon { width: 1rem; height: 1rem; }
.quantity-input { width: 3.75rem; height: 40px; border: 0; border-left: 1px solid var(--line); border-right: 1px solid var(--line); text-align: center; background: transparent; font-weight: 600; font-variant-numeric: tabular-nums; -moz-appearance: textfield; }
.quantity-input::-webkit-outer-spin-button, .quantity-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity-input:focus { outline: none; background: var(--brand-50); }
.qty-unit { margin-left: 0.6rem; color: var(--text-muted); font-size: var(--fs-sm); }

/* ---------- Alerts & notes ---------- */
.alert { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 1rem; border-radius: var(--r-md); margin-bottom: 1rem; border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); font-size: 0.92rem; }
.alert > .icon { margin-top: 0.1rem; color: var(--text-muted); }
.alert-info { background: var(--info-bg); border-color: var(--info-line); }
.alert-info > .icon { color: var(--info); }
.alert-warning { background: var(--warning-bg); border-color: var(--warning-line); color: var(--text); }
.alert-warning > .icon { color: var(--warning); }
.alert-success { background: var(--success-bg); border-color: var(--success-line); }
.alert strong { color: var(--text); }
.note { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.86rem; color: var(--text-muted); line-height: 1.5; margin-top: 0.75rem; }
.note > .icon { width: 1rem; height: 1rem; margin-top: 0.15rem; color: var(--text-subtle); }
.note-warn { color: var(--warning); }
.note-warn > .icon { color: var(--warning); }

/* ---------- Badges ---------- */
.badge { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.15rem 0.55rem; border-radius: var(--r-full); font-size: 0.72rem; font-weight: 600; white-space: nowrap; line-height: 1.5; border: 1px solid transparent; }
.badge-success { background: var(--success-bg); color: var(--success); border-color: var(--success-line); }
.badge-primary { background: var(--brand-50); color: var(--brand-ink); border-color: var(--brand-200); }
.badge-neutral { background: var(--surface-3); color: var(--text-2); border-color: var(--line); }
.badge-warning { background: var(--warning-bg); color: var(--warning); border-color: var(--warning-line); }
.badge-info { background: var(--info-bg); color: var(--info); border-color: var(--info-line); }
.live-dot { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--success); }
.live-dot::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 3px var(--success-bg); }
.affiliate-tag { display: inline-flex; align-items: center; font-size: 0.68rem; font-weight: 600; letter-spacing: 0.02em; color: var(--text-muted); background: var(--surface-3); border: 1px solid var(--line); padding: 0.05rem 0.45rem; border-radius: var(--r-full); margin-left: 0.35rem; vertical-align: middle; line-height: 1.5; }

/* ---------- Bottom navigation (mobile) / header navigation (desktop) ---------- */
.nav-bottom { position: fixed; left: 0; right: 0; bottom: 0; z-index: 99; display: grid; grid-template-columns: repeat(5, 1fr); background: color-mix(in srgb, var(--surface) 96%, transparent); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line); padding: 0.25rem 0.25rem calc(0.25rem + env(safe-area-inset-bottom)); }
.nav-btn { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 54px; border: 0; background: none; border-radius: var(--r-md); color: var(--text-subtle); font-size: 0.7rem; font-weight: 500; -webkit-tap-highlight-color: transparent; transition: color var(--t-fast), background var(--t-fast); }
.nav-btn .icon { width: 1.4rem; height: 1.4rem; }
.nav-btn:hover { color: var(--text); }
.nav-btn.active { color: var(--brand-ink); font-weight: 600; }
.nav-btn.active .icon { stroke-width: 2.1; }
.nav-badge { position: absolute; top: 5px; left: calc(50% + 5px); min-width: 18px; height: 18px; padding: 0 5px; border-radius: var(--r-full); background: var(--brand); color: #fff; font-size: 0.66rem; font-weight: 700; line-height: 18px; text-align: center; font-variant-numeric: tabular-nums; }
.nav-badge[hidden] { display: none; }

/* ---------- Sticky action bars ---------- */
.sticky-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--nav-h) + env(safe-area-inset-bottom) + 0.6rem); z-index: 98; padding: 0 0.75rem; pointer-events: none; }
.sticky-bar[hidden] { display: none; }
.sticky-bar-inner { pointer-events: auto; display: flex; align-items: center; gap: 0.85rem; width: 100%; max-width: 620px; margin: 0 auto; padding: 0.55rem 0.55rem 0.55rem 0.9rem; min-height: 60px; border-radius: var(--r-lg); border: 1px solid var(--ink-800); background: var(--ink-900); color: #fff; text-align: left; box-shadow: var(--shadow-lg); cursor: pointer; animation: barIn 280ms var(--ease); }
[data-theme="dark"] .sticky-bar-inner { background: var(--surface-3); border-color: var(--line-strong); }
@keyframes barIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
div.sticky-bar-inner { cursor: default; }
.sticky-bar-icon { width: 38px; height: 38px; border-radius: var(--r-sm); background: rgba(255,255,255,0.1); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sticky-bar-icon .icon { width: 1.25rem; height: 1.25rem; }
.sticky-bar-text { flex: 1; min-width: 0; }
.sticky-bar-text strong { display: block; font-size: 0.92rem; }
.sticky-bar-text small { display: block; font-size: 0.75rem; opacity: 0.7; }
.sticky-bar-total { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.sticky-bar-cta { display: inline-flex; align-items: center; gap: 0.3rem; background: var(--brand); color: #fff; padding: 0 0.9rem; min-height: 42px; border-radius: var(--r-md); font-weight: 600; font-size: 0.9rem; }
.sticky-bar-cta .icon { width: 1rem; height: 1rem; }
.sticky-bar .btn-success, .sticky-bar .btn-primary { min-height: 42px; }

/* ---------- Toasts ---------- */
.toast-region { position: fixed; left: 0; right: 0; top: calc(var(--header-h) + env(safe-area-inset-top) + 0.75rem); z-index: 3000; display: flex; justify-content: center; pointer-events: none; padding: 0 0.75rem; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 0.75rem; max-width: 520px; padding: 0.7rem 0.75rem 0.7rem 0.9rem; border-radius: var(--r-md); background: var(--ink-900); color: #fff; font-size: 0.9rem; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-8px); transition: opacity var(--t) var(--ease), transform var(--t) var(--ease); }
.toast .toast-icon { color: #6ee7b7; display: inline-flex; }
.toast.toast-warn .toast-icon { color: #fcd34d; }
.toast.show { opacity: 1; transform: none; }
.toast-action { background: rgba(255,255,255,0.12); border: 0; color: #fff; border-radius: var(--r-sm); min-height: 32px; padding: 0 0.7rem; font-weight: 600; font-size: 0.84rem; white-space: nowrap; }
.toast-action:hover { background: rgba(255,255,255,0.2); }
[data-theme="dark"] .toast { background: var(--surface-3); border: 1px solid var(--line-strong); color: var(--text); }

/* ---------- Modals & dialogs ---------- */
.modal, .sheet-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(11, 18, 32, 0.52); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); align-items: center; justify-content: center; padding: 1rem; animation: fadeIn 180ms var(--ease); }
.modal.active, .sheet-overlay { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.modal-content, .sheet { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); width: 100%; max-width: 520px; max-height: min(90vh, 900px); overflow-y: auto; overscroll-behavior: contain; box-shadow: var(--shadow-lg); animation: sheetIn 260ms var(--ease); display: flex; flex-direction: column; }
.sheet { max-width: 580px; }
@keyframes sheetIn { from { opacity: 0; transform: translateY(16px) scale(0.985); } to { opacity: 1; transform: none; } }
.modal-header { position: sticky; top: 0; z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 1.1rem 1.25rem; background: var(--surface); border-bottom: 1px solid var(--line); }
.modal-header h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.015em; }
.modal-sub { font-size: 0.84rem; color: var(--text-muted); margin-top: 0.15rem; font-weight: 400; }
.modal-header-actions { display: flex; gap: 0.4rem; align-items: center; flex-shrink: 0; }
.modal-body { padding: 1.25rem; flex: 1; }
.modal-footer { display: flex; gap: 0.6rem; padding: 1rem 1.25rem; border-top: 1px solid var(--line); background: var(--surface); position: sticky; bottom: 0; }
.close-btn { width: 40px; height: 40px; border-radius: var(--r-full); border: 0; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; transition: background var(--t-fast), color var(--t-fast); }
.close-btn:hover { background: var(--surface-3); color: var(--text); }
.close-btn .icon { width: 1.25rem; height: 1.25rem; }
.dialog .modal-content { max-width: 420px; }
.dialog-body { padding: 1.4rem 1.4rem 0.5rem; }
.dialog-body h3 { font-size: 1.1rem; margin-bottom: 0.4rem; }
.dialog-body p { color: var(--text-muted); font-size: 0.95rem; }
.dialog .modal-footer { border-top: 0; justify-content: flex-end; padding: 1.1rem 1.4rem 1.4rem; position: static; }
.btn-danger-solid { background: var(--danger); color: #fff; }
.btn-danger-solid:hover { background: #991b1b; }
.dl { display: grid; gap: 0; }
.dl-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--line); font-size: 0.93rem; }
.dl-row span:first-child { color: var(--text-muted); }
.dl-row strong { font-variant-numeric: tabular-nums; }
.dl-row.total { border-bottom: 0; border-top: 2px solid var(--text); margin-top: 0.25rem; padding-top: 0.75rem; font-size: 1.1rem; }
.dl-row.total span:first-child { color: var(--text); font-weight: 700; }

@media (max-width: 640px) {
    .modal, .sheet-overlay { align-items: flex-end; padding: 0; }
    .modal-content, .sheet { border-radius: var(--r-xl) var(--r-xl) 0 0; max-height: 92vh; border-bottom: 0; animation: sheetUp 300ms var(--ease); }
    @keyframes sheetUp { from { transform: translateY(40px); opacity: 0.4; } to { transform: none; opacity: 1; } }
    .modal-header { padding: 0.9rem 1rem; }
    .modal-header::before { content: ''; position: absolute; top: 6px; left: 50%; width: 36px; height: 4px; margin-left: -18px; border-radius: 4px; background: var(--line-strong); }
    .modal-body { padding: 1rem; }
    .modal-footer { padding: 0.85rem 1rem calc(0.85rem + env(safe-area-inset-bottom)); }
    .dialog .modal-content { max-width: none; }
}

/* ---------- Empty & loading ---------- */
.empty-state { text-align: center; padding: 2.5rem 1rem; color: var(--text-muted); }
.empty-state .empty-icon { width: 52px; height: 52px; margin: 0 auto 0.85rem; border-radius: var(--r-lg); background: var(--surface-3); color: var(--text-subtle); display: flex; align-items: center; justify-content: center; }
.empty-state .empty-icon .icon { width: 1.5rem; height: 1.5rem; }
.empty-state strong { color: var(--text); }
.spinner { width: 32px; height: 32px; border: 3px solid var(--line); border-top-color: var(--brand); border-radius: 50%; animation: spin 0.9s linear infinite; margin: 0 auto 1rem; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Onboarding ---------- */
.onboarding { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 1.25rem; background: var(--bg); overflow-y: auto; }
.onboarding-card { width: 100%; max-width: 500px; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); overflow: hidden; animation: sheetIn 420ms var(--ease); }
.onboarding-top { padding: 2rem 1.75rem 0; text-align: center; }
.onboarding-top .logo { justify-content: center; }
.onboarding-tag { margin-top: 0.75rem; color: var(--text-muted); font-size: 0.92rem; }
.onboarding-body { padding: 1.5rem 1.75rem 1.75rem; }
.onboarding-body h2 { font-size: 1.5rem; text-align: center; letter-spacing: -0.025em; }
.onboarding-sub { text-align: center; color: var(--text-muted); margin: 0.35rem 0 1.4rem; font-size: 0.95rem; }
.onboarding-options { display: grid; gap: 0.75rem; }
.onboarding-option { display: flex; align-items: center; gap: 1rem; width: 100%; text-align: left; padding: 1rem; border-radius: var(--r-lg); background: var(--surface); border: 1px solid var(--line-strong); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.onboarding-option:hover { border-color: var(--brand); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.onboarding-option strong { display: block; font-size: 1rem; margin-bottom: 0.15rem; }
.onboarding-option small { display: block; color: var(--text-muted); font-size: 0.86rem; line-height: 1.45; }
.onboarding-icon { width: 48px; height: 48px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.onboarding-option.trade .onboarding-icon { background: var(--surface-3); color: var(--text-2); }
.onboarding-icon .icon { width: 1.5rem; height: 1.5rem; }
.onboarding-arrow { margin-left: auto; color: var(--text-subtle); display: inline-flex; }
.onboarding-option:hover .onboarding-arrow { color: var(--brand-ink); }
.onboarding-foot { display: flex; align-items: center; justify-content: center; gap: 0.4rem; text-align: center; color: var(--text-muted); font-size: 0.82rem; margin-top: 1.25rem; }
.onboarding-foot .icon { width: 1rem; height: 1rem; }

/* ---------- DIY home ---------- */
.hero-card { position: relative; overflow: hidden; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-xl); padding: 1.5rem 1.25rem; margin-bottom: 1rem; box-shadow: var(--shadow-xs); }
.hero-card::after { content: ''; position: absolute; inset: 0 0 auto auto; width: 55%; height: 100%; background: radial-gradient(60% 70% at 85% 10%, var(--brand-50), transparent 70%); pointer-events: none; }
.hero-card > * { position: relative; z-index: 1; }
.hero-title { font-size: clamp(1.65rem, 4.6vw, 2.35rem); font-weight: 750; letter-spacing: -0.03em; margin-bottom: 0.5rem; line-height: 1.12; }
.hero-lead { color: var(--text-muted); font-size: 1rem; margin-bottom: 1.25rem; max-width: 56ch; }
.hero-search { position: relative; display: flex; gap: 0.5rem; max-width: 680px; }
.hero-search .search-icon { left: 1rem; }
.hero-search .input { flex: 1; min-height: 52px; font-size: 1.02rem; border-radius: var(--r-md); box-shadow: var(--shadow-xs); }
.hero-search .btn { min-height: 52px; border-radius: var(--r-md); padding: 0 1.3rem; }
.quick-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 0.9rem; align-items: center; }
.quick-chips-label { font-size: 0.82rem; color: var(--text-muted); margin-right: 0.15rem; }
.chip { border: 1px solid var(--line); background: var(--surface-2); color: var(--text-2); border-radius: var(--r-full); padding: 0 0.85rem; min-height: 34px; font-size: 0.85rem; font-weight: 500; transition: border-color var(--t-fast), background var(--t-fast), color var(--t-fast); }
.chip:hover { border-color: var(--line-strong); background: var(--surface); color: var(--text); }

.trust-row { display: grid; grid-template-columns: 1fr; gap: 0.6rem; margin-bottom: 1rem; }
@media (min-width: 720px) { .trust-row { grid-template-columns: repeat(3, 1fr); } }
.trust-item { display: flex; gap: 0.75rem; align-items: center; padding: 0.85rem 1rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
.trust-item .icon { width: 1.3rem; height: 1.3rem; color: var(--success); }
.trust-item strong { display: block; font-size: 0.9rem; }
.trust-item small { display: block; font-size: 0.8rem; color: var(--text-muted); }

.project-grid { display: grid; grid-template-columns: 1fr; gap: 0.6rem; }
@media (min-width: 560px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .project-grid { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } }
.project-tile { display: grid; grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; column-gap: 0.85rem; align-items: center; text-align: left; padding: 0.9rem 0.9rem 0.9rem 0.9rem; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast); }
.project-tile:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); transform: translateY(-1px); }
.project-icon { grid-row: 1 / span 3; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; }
.project-icon .icon { width: 1.35rem; height: 1.35rem; }
.project-tile strong { font-size: 0.97rem; font-weight: 600; grid-column: 2; }
.project-tile small { grid-column: 2; color: var(--text-muted); font-size: 0.83rem; line-height: 1.4; }
.project-tile .tile-meta { grid-column: 2; color: var(--text-subtle); font-size: 0.76rem; font-weight: 500; margin-top: 0.15rem; }
.project-tile .tile-chevron { grid-column: 3; grid-row: 1 / span 3; color: var(--text-subtle); display: inline-flex; transition: transform var(--t-fast), color var(--t-fast); }
.project-tile:hover .tile-chevron { color: var(--brand-ink); transform: translateX(2px); }
.helper-link { display: flex; align-items: center; gap: 0.6rem; width: 100%; margin-top: 0.85rem; padding: 0.8rem 1rem; min-height: var(--tap); border-radius: var(--r-md); border: 1px dashed var(--line-strong); background: transparent; color: var(--text-2); font-weight: 500; font-size: 0.92rem; text-align: left; transition: border-color var(--t-fast), background var(--t-fast); }
.helper-link:hover { border-color: var(--ink-400); background: var(--surface-2); color: var(--text); }
.helper-link .icon { color: var(--text-subtle); }
.helper-link .icon:last-child { margin-left: auto; }

.steps-list { list-style: none; display: grid; gap: 1rem; counter-reset: step; }
@media (min-width: 720px) { .steps-list { grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } }
.steps-list li { display: flex; gap: 0.85rem; align-items: flex-start; }
.steps-list strong { color: var(--text); font-size: 0.97rem; }
.steps-list p { color: var(--text-muted); font-size: 0.875rem; margin-top: 0.2rem; }
.step-dot { flex-shrink: 0; width: 30px; height: 30px; border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--line); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.supplier-strip { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--line); font-size: 0.82rem; color: var(--text-muted); }
.supplier-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.15rem 0.6rem; border-radius: var(--r-full); background: var(--success-bg); border: 1px solid var(--success-line); color: var(--success); font-weight: 600; }
.supplier-chip::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.list-summary-card .btn { margin-top: 0.25rem; }

/* ---------- Trade home ---------- */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem 1.1rem; box-shadow: var(--shadow-xs); }
.stat-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 500; }
.stat-value { font-size: 1.65rem; font-weight: 700; letter-spacing: -0.025em; margin-top: 0.3rem; font-variant-numeric: tabular-nums; color: var(--text) !important; }
.stat-change { font-size: 0.78rem; margin-top: 0.15rem; color: var(--text-muted); }
.stat-change.positive { color: var(--success); }
.action-list { display: grid; gap: 0.6rem; }
@media (min-width: 640px) { .action-list { grid-template-columns: 1fr 1fr; } }

/* ---------- Quote builder (trade) ---------- */
.quote-item { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; align-items: center; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.quote-item:last-child { border-bottom: 0; }
.quote-item[onclick] { cursor: pointer; padding: 0.85rem 0.75rem; margin: 0 -0.75rem; border-radius: var(--r-sm); border-bottom: 0; }
.quote-item[onclick]:hover { background: var(--surface-2); }
.quote-item-name { font-weight: 600; }
.quote-item-meta { font-size: 0.86rem; color: var(--text-muted); }
.quote-item-supplier { color: var(--text-2); font-weight: 500; }
.quote-item-price { font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; }
.quote-item-actions { grid-column: 1 / -1; display: flex; gap: 0.5rem; }
.price-summary { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.25rem; margin-top: 1rem; box-shadow: var(--shadow-xs); }
.price-summary h3 { font-size: var(--fs-lg); margin-bottom: 0.75rem; }
.price-row { display: flex; justify-content: space-between; padding: 0.45rem 0; font-size: 0.93rem; color: var(--text-2); }
.price-row strong, .price-row span:last-child { font-variant-numeric: tabular-nums; }
.price-row.total { border-top: 2px solid var(--text); margin-top: 0.5rem; padding-top: 0.85rem; font-size: 1.2rem; font-weight: 700; color: var(--text); }
.quote-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-top: 1rem; }
.ssa { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem; }
.ssa h4 { font-size: 0.95rem; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.45rem; }
.ssa h4 .icon { color: var(--text-subtle); }
.ssa-row { display: flex; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.75rem; border-radius: var(--r-sm); border: 1px solid var(--line); margin-bottom: 0.45rem; font-size: 0.92rem; }
.ssa-row strong { font-variant-numeric: tabular-nums; }
.ssa-row.best { border-color: var(--success-line); background: var(--success-bg); }
.ssa-row.best strong, .ssa-row.best span { color: var(--success); }
.ssa-row.featured { border-color: var(--line-strong); background: var(--surface-2); }
.ssa-callout { margin-top: 0.75rem; padding: 0.75rem 0.9rem; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--line); font-size: 0.86rem; color: var(--text-muted); }
.ssa-callout strong { display: block; font-size: 1.05rem; color: var(--text); font-variant-numeric: tabular-nums; }
.ssa-callout.good strong { color: var(--success); }
.ssa-detail { margin-top: 0.75rem; padding: 0.75rem; border: 1px solid var(--line); border-radius: var(--r-sm); }
.ssa-detail-title { font-weight: 600; margin-bottom: 0.4rem; }
.ssa-detail-line { display: flex; justify-content: space-between; font-size: 0.84rem; padding: 0.2rem 0; color: var(--text-2); }

.customer-card { padding: 1rem 0; border-bottom: 1px solid var(--line); }
.customer-card:last-child { border-bottom: 0; }
.customer-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 0.5rem; }
.customer-card h4 { font-size: 1rem; }
.customer-company { color: var(--text-muted); font-size: 0.875rem; }
.customer-meta { display: grid; gap: 0.3rem; font-size: 0.9rem; color: var(--text-2); }
.customer-meta p { display: flex; align-items: center; gap: 0.5rem; }
.customer-meta .icon { width: 1rem; height: 1rem; color: var(--text-subtle); }
.customer-notes { margin-top: 0.6rem; padding-top: 0.6rem; border-top: 1px dashed var(--line); font-size: 0.875rem; color: var(--text-muted); }
.form-stack { display: grid; gap: 1rem; }
.form-stack .form-label { margin-bottom: 0.4rem; }

/* ---------- Materials ---------- */
.category-pills { display: flex; gap: 0.4rem; overflow-x: auto; margin: 0.25rem -1.25rem 0.75rem; padding: 0.15rem 1.25rem 0.4rem; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.category-pills::-webkit-scrollbar { display: none; }
.category-pill { display: inline-flex; align-items: center; gap: 0.4rem; white-space: nowrap; min-height: 36px; padding: 0 0.85rem; border-radius: var(--r-full); background: var(--surface); border: 1px solid var(--line); color: var(--text-2); font-size: 0.86rem; font-weight: 500; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.category-pill:hover { border-color: var(--line-strong); color: var(--text); }
.category-pill.active { background: var(--ink-900); border-color: var(--ink-900); color: #fff; }
[data-theme="dark"] .category-pill.active { background: var(--text); border-color: var(--text); color: var(--bg); }
.pill-count { font-size: 0.72rem; opacity: 0.65; font-variant-numeric: tabular-nums; }
.filter-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.9rem; }
.filter-toggle { display: inline-flex; padding: 3px; background: var(--surface-3); border: 1px solid var(--line); border-radius: var(--r-full); }
.filter-btn { display: inline-flex; align-items: center; gap: 0.35rem; border: 0; background: transparent; color: var(--text-muted); border-radius: var(--r-full); min-height: 32px; padding: 0 0.8rem; font-size: 0.84rem; font-weight: 500; }
.filter-btn .icon { width: 0.95rem; height: 0.95rem; }
.filter-btn.active { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); font-weight: 600; }
.results-count { font-size: 0.84rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }

.materials-grid { display: grid; gap: 0.6rem; }
@media (min-width: 900px) { .materials-grid { grid-template-columns: 1fr 1fr; gap: 0.75rem; } }
.material-item { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.material-item:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.material-item-left { display: flex; gap: 0.85rem; align-items: flex-start; padding: 0.9rem 0.9rem 0.75rem; position: relative; flex: 1; }
.material-icon, .material-media { flex-shrink: 0; width: 56px; height: 56px; border-radius: var(--r-md); background: var(--surface-2); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; color: var(--text-muted); overflow: hidden; }
.material-media { background: #fff; }
.material-media img { width: 100%; height: 100%; object-fit: contain; padding: 4px; }
.material-icon svg, .material-media svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.material-info { flex: 1; min-width: 0; }
.material-cat { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-subtle); margin-bottom: 0.15rem; }
.material-name { font-size: 0.98rem; font-weight: 600; line-height: 1.35; margin-bottom: 0.15rem; color: var(--text); letter-spacing: -0.01em; }
.material-desc { font-size: 0.85rem; color: var(--text-muted); line-height: 1.45; margin-bottom: 0.4rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.material-where { font-size: 0.79rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 0.2rem 0.5rem; align-items: center; }
.material-where strong { color: var(--text-2); font-weight: 600; }
.favorite-btn { flex-shrink: 0; width: 36px; height: 36px; margin: -0.3rem -0.3rem 0 0; border-radius: var(--r-full); border: 0; background: transparent; color: var(--ink-400); display: inline-flex; align-items: center; justify-content: center; transition: color var(--t-fast), background var(--t-fast); }
.favorite-btn:hover { background: var(--surface-3); color: var(--text-2); }
.favorite-btn .icon { width: 1.15rem; height: 1.15rem; }
.favorite-btn.active { color: #b45309; }
.favorite-btn.active .icon { fill: #f59e0b; stroke: #b45309; }
.material-price-box { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.7rem 0.9rem; border-top: 1px solid var(--line); background: var(--surface-2); }
.material-price-box > div:first-child { line-height: 1.1; }
.material-from { font-size: 0.75rem; color: var(--text-muted); }
.material-price { font-size: 1.2rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text); font-variant-numeric: tabular-nums; }
.material-unit { color: var(--text-muted); font-size: 0.78rem; margin-right: auto; }
.material-price-check { font-size: 0.95rem; font-weight: 600; color: var(--text-2); }
.material-compare { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.84rem; color: var(--brand-ink); font-weight: 600; }
.material-compare .icon { width: 1rem; height: 1rem; }
.quick-add-btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 36px; padding: 0 0.85rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-weight: 600; font-size: 0.85rem; box-shadow: var(--shadow-xs); transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.quick-add-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.quick-add-btn .icon { width: 1rem; height: 1rem; }

.modal-material-row { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; padding: 0.7rem 0.75rem; margin-bottom: 0.45rem; border-radius: var(--r-md); border: 1px solid var(--line); background: var(--surface); color: var(--text); transition: border-color var(--t-fast), background var(--t-fast); }
.modal-material-row:hover { border-color: var(--line-strong); background: var(--surface-2); }
.modal-material-row .material-icon { width: 40px; height: 40px; }
.modal-material-row .material-icon svg { width: 20px; height: 20px; }
.modal-material-text { flex: 1; min-width: 0; }
.modal-material-text strong { display: block; font-size: 0.93rem; }
.modal-material-text small { color: var(--text-muted); font-size: 0.8rem; display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.modal-material-price { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.modal-material-price small { color: var(--text-muted); font-weight: 400; }

/* Material detail */
.detail-head { display: flex; align-items: center; gap: 0.85rem; min-width: 0; }
.detail-head h3 { min-width: 0; }
.detail-head .material-icon, .detail-head .material-media { width: 48px; height: 48px; }
.detail-hero-img { display: none; margin: -0.25rem 0 1rem; border: 1px solid var(--line); border-radius: var(--r-md); background: #fff; height: 180px; align-items: center; justify-content: center; overflow: hidden; }
.detail-hero-img.show { display: flex; }
.detail-hero-img img { max-height: 100%; width: auto; object-fit: contain; padding: 0.75rem; }
#detail-material-desc { color: var(--text-muted); margin-bottom: 1rem; font-size: 0.95rem; }
.detail-price-summary { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.85rem 1rem; margin: 1rem 0 0.25rem; font-size: 0.95rem; color: var(--text-2); }
.detail-price-summary strong { color: var(--text); font-variant-numeric: tabular-nums; }
.dps-main { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.2rem 0.35rem; }
.dps-label { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; font-weight: 600; color: var(--success); margin-right: 0.25rem; }
.dps-label::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.dps-main strong:first-of-type { font-size: 1.3rem; letter-spacing: -0.02em; }
.dps-unit { color: var(--text-muted); font-size: 0.85rem; }
.dps-save { font-size: 0.85rem; color: var(--success); margin-top: 0.3rem; }
.dps-note { font-size: 0.83rem; color: var(--text-muted); margin-top: 0.35rem; line-height: 1.5; }
.detail-sub { margin: 1.25rem 0 0.6rem; font-size: 0.95rem; font-weight: 600; color: var(--text); }
.detail-sub .section-hint { font-weight: 400; font-size: 0.82rem; }
#detail-suppliers-list { display: grid; gap: 0.45rem; }
.supplier-option { position: relative; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; min-height: 60px; padding: 0.75rem 0.9rem 0.75rem 2.6rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast); }
.supplier-option::before { content: ''; position: absolute; left: 0.9rem; top: 50%; width: 18px; height: 18px; margin-top: -9px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.supplier-option:hover { border-color: var(--line-strong); }
.supplier-option.selected { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.supplier-option.selected::before { border-color: var(--brand); box-shadow: inset 0 0 0 4px var(--surface), inset 0 0 0 9px var(--brand); }
.supplier-option strong { font-size: 0.95rem; }
.supplier-option small { color: var(--text-muted); font-size: 0.8rem; line-height: 1.4; }
.supplier-option .supplier-product { display: block; margin-top: 0.15rem; }
.supplier-price { text-align: right; flex-shrink: 0; }
.supplier-price-value { font-weight: 700; font-size: 1.1rem; font-variant-numeric: tabular-nums; }
.supplier-option.supplier-check { cursor: default; padding-left: 0.9rem; background: var(--surface-2); }
.supplier-option.supplier-check::before { display: none; }
.supplier-option.supplier-check strong { color: var(--text-2); font-weight: 600; }
.check-price-btn { white-space: nowrap; text-decoration: none; }
.check-price-btn .icon { width: 0.95rem; height: 0.95rem; }
.check-price-links { color: var(--text-muted); line-height: 1.7; }
.check-price-label { font-weight: 600; color: var(--text-2); }
.check-price-link { color: var(--brand-ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 2px; }
#detail-buy-btn .icon, #detail-add-btn .icon { width: 1.05rem; height: 1.05rem; }
.modal-footer.stack { flex-direction: column; }

/* Travis Perkins catalogue results */
.tp-grid { display: grid; gap: 0.6rem; grid-template-columns: minmax(0, 1fr); }
.tp-grid > * { min-width: 0; }
@media (min-width: 640px) { .tp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .tp-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.75rem; } }
.tp-result { display: flex; gap: 0.85rem; align-items: stretch; padding: 0.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.tp-result:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.tp-img-wrap { position: relative; flex-shrink: 0; width: 84px; height: 84px; border-radius: var(--r-sm); background: #fff; border: 1px solid var(--line); overflow: hidden; display: flex; align-items: center; justify-content: center; }
.tp-result-img { width: 100%; height: 100%; object-fit: contain; padding: 4px; position: relative; z-index: 1; }
.tp-img-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-300); }
.tp-img-fallback svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.tp-result-info { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.tp-result-name { font-size: 0.88rem; font-weight: 600; line-height: 1.35; color: var(--text); margin-bottom: 0.2rem; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-result-brand { font-size: 0.76rem; color: var(--text-muted); }
.tp-result-right { flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.4rem; }
.tp-result-price { font-weight: 700; font-size: 1.05rem; color: var(--text); white-space: nowrap; font-variant-numeric: tabular-nums; letter-spacing: -0.015em; }
.tp-buy-btn { display: inline-flex; align-items: center; gap: 0.3rem; min-height: 34px; padding: 0 0.7rem; border-radius: var(--r-sm); border: 1px solid var(--line-strong); background: var(--surface); color: var(--text); font-size: 0.8rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast); }
.tp-buy-btn:hover { background: var(--brand); border-color: var(--brand); color: #fff; }
.tp-buy-btn .icon { width: 0.9rem; height: 0.9rem; }
@media (min-width: 640px) {
    .tp-result { flex-direction: column; padding: 0; overflow: hidden; }
    .tp-img-wrap { width: 100%; height: 168px; border: 0; border-bottom: 1px solid var(--line); border-radius: 0; }
    .tp-result-img { padding: 12px; }
    .tp-result-info { padding: 0.8rem 0.9rem 0; }
    .tp-result-right { flex-direction: row; align-items: center; padding: 0.6rem 0.9rem 0.85rem; margin-top: auto; }
}
.sort-label { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.85rem; color: var(--text-muted); }
.catalogue-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ---------- Projects ---------- */
.helper-card { display: flex; align-items: center; gap: 0.9rem; width: 100%; text-align: left; color: var(--text); cursor: pointer; transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.helper-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow-md); }
.helper-icon { flex-shrink: 0; width: 44px; height: 44px; border-radius: var(--r-md); background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; }
.helper-icon .icon { width: 1.35rem; height: 1.35rem; }
.helper-text strong { display: block; font-size: 0.98rem; }
.helper-text small { display: block; color: var(--text-muted); font-size: 0.86rem; margin-top: 0.1rem; }
.helper-card .onboarding-arrow { color: var(--text-subtle); }
.choice-list { display: grid; gap: 0.6rem; }
.choice-btn { display: flex; align-items: center; gap: 0.75rem; width: 100%; text-align: left; padding: 0.9rem 1rem; min-height: var(--tap); border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--line); color: var(--text); transition: border-color var(--t-fast), box-shadow var(--t-fast); }
.choice-btn:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.choice-btn > span { flex: 1; }
.choice-btn strong { display: block; margin-bottom: 0.1rem; font-size: 0.95rem; }
.choice-btn small { color: var(--text-muted); font-size: 0.85rem; }
.choice-btn .icon { color: var(--text-subtle); }
.discovery-progress { display: flex; gap: 0.3rem; margin-bottom: 1.25rem; }
.discovery-step { flex: 1; height: 4px; border-radius: 4px; background: var(--line); transition: background var(--t); }
.discovery-step.done { background: var(--brand); }
.discovery-title { font-size: 1.05rem; margin-bottom: 0.35rem; }
.discovery-sub { color: var(--text-muted); font-size: 0.88rem; margin-bottom: 1rem; }
.panel { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.9rem 1rem; margin-bottom: 0.75rem; }
.panel-title { font-weight: 600; color: var(--text); margin-bottom: 0.35rem; font-size: 0.95rem; }
.panel p, .panel li { color: var(--text-2); font-size: 0.9rem; line-height: 1.6; }
.panel-warn { background: var(--warning-bg); border-color: var(--warning-line); }
.panel-warn .panel-title { color: var(--warning); display: flex; align-items: center; gap: 0.4rem; }
.explain-list { display: grid; gap: 0.45rem; margin-bottom: 1.25rem; }
.explain-item { padding: 0.7rem 0.85rem; border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); }
.explain-item strong { display: block; font-size: 0.9rem; margin-bottom: 0.15rem; }
.explain-item span { color: var(--text-muted); font-size: 0.84rem; line-height: 1.5; }
.wizard-intro { display: flex; gap: 0.6rem; align-items: flex-start; color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1rem; }
.wizard-intro .icon { color: var(--text-subtle); margin-top: 0.1rem; }
.wizard-grid { display: grid; gap: 0 0.85rem; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.wizard-assumptions { margin-top: 0.5rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-2); }
.wizard-assumptions summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 0.5rem; padding: 0.8rem 1rem; font-weight: 600; font-size: 0.92rem; color: var(--text); }
.wizard-assumptions summary::-webkit-details-marker { display: none; }
.wizard-assumptions summary .icon:last-child { margin-left: auto; color: var(--text-subtle); transition: transform var(--t); }
.wizard-assumptions[open] summary .icon:last-child { transform: rotate(180deg); }
.wizard-assumptions p { padding: 0 1rem 0.9rem; color: var(--text-2); font-size: 0.88rem; line-height: 1.6; }
.wizard-also-need { margin-top: 0.6rem; border: 1px solid var(--line); border-radius: var(--r-md); padding: 0.85rem 1rem; }
.wizard-also-need-title { font-weight: 600; font-size: 0.92rem; margin-bottom: 0.4rem; display: flex; align-items: center; gap: 0.5rem; }
.wizard-also-need-title .icon { color: var(--text-subtle); }
.wizard-also-need ul { list-style: none; display: grid; gap: 0.3rem; }
.wizard-also-need li { position: relative; padding-left: 1.1rem; color: var(--text-2); font-size: 0.88rem; line-height: 1.5; }
.wizard-also-need li::before { content: ''; position: absolute; left: 0.2rem; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--ink-400); }
.wizard-also-need small { display: block; margin-top: 0.5rem; color: var(--text-muted); font-size: 0.8rem; }
.wizard-msg { display: flex; gap: 0.6rem; align-items: flex-start; margin-top: 0.75rem; padding: 0.75rem 0.9rem; border-radius: var(--r-md); font-size: 0.88rem; line-height: 1.5; background: var(--surface-2); border: 1px solid var(--line); color: var(--text-2); }
.wizard-msg .icon { width: 1.05rem; height: 1.05rem; margin-top: 0.1rem; color: var(--text-subtle); }
.wizard-msg.warn { background: var(--warning-bg); border-color: var(--warning-line); color: var(--text); }
.wizard-msg.warn .icon { color: var(--warning); }

.basket-item { display: flex; justify-content: space-between; gap: 0.85rem; padding: 0.95rem 0; border-bottom: 1px solid var(--line); }
.basket-item:first-child { padding-top: 0.25rem; }
.basket-item-main { flex: 1; min-width: 0; }
.basket-item-name { font-weight: 600; color: var(--text); line-height: 1.35; }
.basket-item-meta { font-size: 0.82rem; color: var(--text-muted); margin-top: 0.2rem; line-height: 1.45; }
.basket-item-meta strong { color: var(--text-2); font-weight: 600; }
.basket-qty { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.6rem; }
.basket-unit { font-size: 0.8rem; color: var(--text-muted); }
.basket-item-side { text-align: right; display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: 0.5rem; }
.basket-item-total { font-weight: 700; color: var(--text); font-size: 1.02rem; font-variant-numeric: tabular-nums; }
.basket-item-unpriced .basket-item-total small { color: var(--text-muted); font-weight: 600; font-size: 0.82rem; }
.basket-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.25rem; padding-top: 1rem; font-weight: 700; font-size: 1.15rem; color: var(--text); }
.basket-total span:last-child { font-size: 1.5rem; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.compare-preview { margin-top: 1rem; padding: 0.85rem 1rem; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); }
.compare-preview-title { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.35rem; }
.compare-row { display: flex; justify-content: space-between; gap: 0.75rem; padding: 0.35rem 0; font-size: 0.9rem; color: var(--text-2); }
.compare-row strong { font-variant-numeric: tabular-nums; }
.compare-row small { color: var(--text-muted); }
.compare-row .good, .good { color: var(--success); }
.compare-note { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.4rem; }
.empty-list-card .empty-state { padding: 1.75rem 1rem; }

/* Calculators */
.calc-results-title { font-size: 0.95rem; margin-bottom: 0.75rem; }
.calc-row { display: flex; justify-content: space-between; align-items: center; gap: 0.85rem; padding: 0.85rem 0; border-bottom: 1px solid var(--line); }
.calc-row:last-of-type { border-bottom: 0; }
.calc-row strong { color: var(--text); }
.calc-row-sub { display: block; color: var(--text-muted); font-size: 0.84rem; margin-top: 0.1rem; }
.calc-row-qty { text-align: right; white-space: nowrap; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; }
.calc-row-qty strong { font-size: 1.02rem; font-variant-numeric: tabular-nums; }

/* ---------- Shopping list views (choose where to buy, one-stop, split) ---------- */
.sl-intro { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 1.1rem; }
.sl-option { position: relative; border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1.1rem; margin-bottom: 0.85rem; background: var(--surface); }
.sl-option.best { border-color: var(--success-line); box-shadow: 0 0 0 1px var(--success-line); }
.sl-option.onestop { border-color: var(--line-strong); }
.sl-tag { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: var(--r-full); margin-bottom: 0.6rem; }
.sl-tag .icon { width: 0.85rem; height: 0.85rem; }
.sl-option.best .sl-tag { background: var(--success-bg); color: var(--success); border: 1px solid var(--success-line); }
.sl-option.onestop .sl-tag { background: var(--surface-3); color: var(--text-2); border: 1px solid var(--line); }
.sl-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.85rem; margin-bottom: 0.75rem; }
.sl-head strong { display: block; font-size: 1.02rem; letter-spacing: -0.01em; }
.sl-head small { display: block; color: var(--text-muted); font-size: 0.84rem; margin-top: 0.15rem; line-height: 1.45; }
.sl-price { text-align: right; flex-shrink: 0; }
.sl-price-value { font-weight: 750; font-size: 1.45rem; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--text); line-height: 1.1; }
.sl-option.best .sl-price-value { color: var(--success); }
.sl-price small { display: block; color: var(--text-muted); font-size: 0.76rem; margin-top: 0.2rem; }
.sl-price .sl-extra { color: var(--warning); }
.sl-others { margin-top: 0.25rem; }
.sl-others summary { cursor: pointer; color: var(--text-2); font-size: 0.9rem; font-weight: 500; padding: 0.5rem 0; }
.sl-other-row { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface); cursor: pointer; margin-top: 0.45rem; }
.sl-other-row:hover { border-color: var(--line-strong); }
.sl-group { border: 1px solid var(--line); border-radius: var(--r-lg); padding: 1rem; margin-bottom: 0.75rem; }
.sl-group-head { display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; padding-bottom: 0.7rem; margin-bottom: 0.4rem; border-bottom: 1px solid var(--line); }
.sl-group-head strong { font-size: 1rem; }
.sl-line { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; font-size: 0.9rem; color: var(--text-2); }
.sl-line + .sl-line { border-top: 1px solid var(--line); }
.sl-line span:last-child { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.sl-qty { color: var(--text-muted); font-variant-numeric: tabular-nums; }
.sl-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 0.75rem; padding-top: 0.85rem; border-top: 2px solid var(--text); font-weight: 700; font-size: 1.1rem; }
.sl-total span:last-child { font-size: 1.35rem; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; }
.sl-total small { font-weight: 500; font-size: 0.78rem; color: var(--text-muted); }
.sl-fine { font-size: 0.78rem; color: var(--text-muted); margin-top: 0.6rem; line-height: 1.5; text-align: center; }
.sl-warn { display: flex; gap: 0.6rem; align-items: flex-start; background: var(--warning-bg); border: 1px solid var(--warning-line); color: var(--text); padding: 0.8rem 0.9rem; border-radius: var(--r-md); margin-bottom: 1rem; font-size: 0.86rem; }
.sl-warn .icon { color: var(--warning); width: 1.1rem; height: 1.1rem; margin-top: 0.05rem; }
.sl-empty { background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--r-md); padding: 1rem; margin-bottom: 1rem; color: var(--text-2); font-size: 0.92rem; }
.check-price-box { background: var(--surface-2); border: 1px dashed var(--line-strong); border-radius: var(--r-lg); padding: 1rem; margin-top: 1rem; }
.check-price-box-title { font-weight: 600; color: var(--text); margin-bottom: 0.15rem; }
.check-price-box-sub { color: var(--text-muted); font-size: 0.82rem; margin-bottom: 0.5rem; }
.check-price-item { padding: 0.55rem 0; border-top: 1px solid var(--line); font-size: 0.88rem; }
.check-price-item > div:first-child { color: var(--text-2); }
.check-price-item > div:last-child { font-size: 0.8rem; margin-top: 0.15rem; }
.sl-actions { display: grid; gap: 0.6rem; margin-top: 1.1rem; }

/* Affiliate disclosure (ASA/CMA): subtle but always visible near prices and buy buttons */
.affiliate-disclosure-note { display: flex; gap: 0.45rem; align-items: flex-start; font-size: 0.76rem; color: var(--text-muted); margin-top: 1rem; line-height: 1.5; }
.affiliate-disclosure-note .icon { width: 0.9rem; height: 0.9rem; margin-top: 0.15rem; flex-shrink: 0; }
.disclosure-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.disclosure-link:hover { color: var(--text); }

/* ---------- Desktop ---------- */
@media (min-width: 720px) {
    .container { padding: 1.5rem 1.5rem calc(var(--nav-h) + 2.5rem); }
    .card { padding: 1.5rem; }
    .hero-card { padding: 2.25rem 2rem; }
    .category-pills { margin-left: -1.5rem; margin-right: -1.5rem; padding-left: 1.5rem; padding-right: 1.5rem; flex-wrap: wrap; }
    .header-tag { display: inline; }
}
@media (min-width: 1024px) {
    :root, [data-theme="dark"] { --nav-h: 0px; }
    .header-tag { display: none; }
    .nav-bottom { position: fixed; top: env(safe-area-inset-top); bottom: auto; left: 50%; right: auto; transform: translateX(-50%); height: var(--header-h); z-index: 101; display: flex !important; align-items: center; gap: 0.15rem; padding: 0; background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
    .nav-bottom[style*="display:none"], .nav-bottom[style*="display: none"] { display: none !important; }
    .nav-btn { flex-direction: row; gap: 0.45rem; min-height: 38px; padding: 0 0.85rem; font-size: 0.9rem; font-weight: 500; color: var(--text-muted); border-radius: var(--r-sm); }
    .nav-btn .icon { width: 1.05rem; height: 1.05rem; }
    .nav-btn:hover { background: var(--surface-3); color: var(--text); }
    .nav-btn.active { background: var(--surface-3); color: var(--text); font-weight: 600; }
    .nav-btn.active .icon { color: var(--brand-ink); }
    .nav-badge { position: static; margin-left: 0.1rem; }
    .container { padding: 2rem 1.5rem 3rem; }
    body.has-sticky-bar .container { padding-bottom: 7rem; }
    .sticky-bar { bottom: 1.25rem; }
    .project-tile { padding: 1rem; }
}
@media (max-width: 480px) {
    .header { padding-left: 0.75rem; padding-right: 0.75rem; }
    .logo { font-size: 1.08rem; gap: 0.5rem; }
    .logo-mark { width: 1.8rem; height: 1.8rem; border-radius: 8px; }
    #theme-toggle { width: 36px; height: 36px; }
    .hero-card { padding: 1.35rem 1.1rem; }
    .card { padding: 1.1rem; }
    .category-pills { margin-left: -1.1rem; margin-right: -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; }
    .hero-search .btn { padding: 0 1rem; }
    .hero-search .btn .btn-label { display: none; }
}
@media (min-width: 481px) { .hero-search .btn .btn-icon-only { display: none; } }

.section-label { font-size: var(--fs-xs); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.tp-buy-btn .icon, .material-compare .icon, .quick-add-btn .icon { width: 0.95rem; height: 0.95rem; }
.sheet:focus, .modal-content:focus { outline: none; }

/* ---------- Trade sign-in and gating ---------- */
/* Trade UI never shows without a trade session (body.mode-trade is only set after sign-in) */
body:not(.mode-trade) .trade-only-section,
body:not(.mode-trade) #nav-trade,
body:not(.mode-trade) #new-tab,
body:not(.mode-trade) #customers-tab,
body:not(.mode-trade) #quote-bar { display: none !important; }
body.auth-pending .container, body.auth-pending .nav-bottom { visibility: hidden; }
body.signin-open { overflow: hidden; }
.trade-signin .logo { align-items: center; }
.trade-pill { margin-left: 0.55rem; display: inline-flex; align-items: center; height: 24px; padding: 0 0.6rem; border-radius: var(--r-full); background: var(--surface-3); border: 1px solid var(--line); color: var(--text-2); font-size: var(--fs-xs); font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; }
.trade-signin .onboarding-body h2 { margin-bottom: 0.25rem; }
.trade-signin .onboarding-sub { margin-bottom: 1.25rem; line-height: 1.55; }
.ts-view { display: none; }
.trade-signin[data-view="loading"] .ts-view[data-for="loading"],
.trade-signin[data-view="soon"] .ts-view[data-for="soon"],
.trade-signin[data-view="email"] .ts-view[data-for="email"],
.trade-signin[data-view="code"] .ts-view[data-for="code"],
.trade-signin[data-view="approval"] .ts-view[data-for="approval"] { display: block; }
.ts-icon { width: 52px; height: 52px; margin: 0.5rem auto 1rem; border-radius: var(--r-md); background: var(--brand-50); color: var(--brand-ink); display: flex; align-items: center; justify-content: center; }
.ts-icon .icon { width: 1.5rem; height: 1.5rem; }
.ts-spinner { width: 28px; height: 28px; margin: 0.5rem auto 1.25rem; border-radius: 50%; border: 3px solid var(--line); border-top-color: var(--brand); animation: tsSpin 800ms linear infinite; }
@keyframes tsSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ts-spinner { animation-duration: 2.4s; } }
.ts-fine { text-align: center; color: var(--text-muted); font-size: 0.82rem; line-height: 1.5; margin-top: 0.9rem; }
.ts-fine a, .trade-entry-link a { color: var(--brand-ink); font-weight: 600; }
.ts-error { margin: -0.25rem 0 0.9rem; padding: 0.65rem 0.8rem; border-radius: var(--r-md); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 28%, var(--line)); color: var(--text); font-size: 0.88rem; }
.ts-error[hidden] { display: none; }
.ts-global-error { margin-top: 1rem; }
.ts-code-input { font-size: 1.35rem; letter-spacing: 0.35em; text-align: center; font-variant-numeric: tabular-nums; }
.ts-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 1rem; margin-top: 0.9rem; font-size: 0.88rem; }
.ts-back { margin-top: 0.9rem; }
.trade-signin[data-view="soon"] .ts-back { background: var(--brand); color: #fff; }
.trade-signin[data-view="soon"] .ts-back:hover { background: var(--brand-hover); color: #fff; }
.trade-account-row { display: flex; align-items: center; gap: 0.85rem; }
.trade-account-icon { width: 40px; height: 40px; border-radius: var(--r-full); background: var(--surface-3); color: var(--text-2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.trade-account-text { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.trade-account-text small { color: var(--text-muted); font-size: var(--fs-xs); }
.trade-account-text strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trade-entry-link { margin-top: 0.75rem; font-size: 0.85rem; color: var(--text-muted); }
.catalogue-source { font-size: 0.85rem; }

/* ---------- Share list + print view ---------- */
.basket-share-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.6rem; margin-top: 0.6rem; }
@media (max-width: 360px) { .basket-share-row { grid-template-columns: 1fr; } }
.share-link-row { margin: 0.9rem 0 0.75rem; }
.share-link-row .input { font-size: 0.85rem; color: var(--text-2); }
.share-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0.5rem; }
@media (max-width: 400px) { .share-options { grid-template-columns: 1fr; } }
.share-options .btn { text-decoration: none; }
.share-fine { margin-top: 0.75rem; font-size: 0.82rem; color: var(--text-muted); }
#print-list { display: none; }
@media print {
    @page { margin: 14mm; }
    body.printing-list > *:not(#print-list) { display: none !important; }
    body.printing-list { background: #fff !important; padding: 0 !important; }
    body.printing-list #print-list { display: block; color: #111; font-size: 10.5pt; }
    #print-list .pl-head { display: flex; justify-content: space-between; align-items: flex-end; border-bottom: 2px solid #c41e2a; padding-bottom: 6pt; margin-bottom: 10pt; }
    #print-list .pl-brand { font-size: 18pt; font-weight: 700; letter-spacing: -0.02em; }
    #print-list .pl-brand b { color: #c41e2a; }
    #print-list .pl-meta { text-align: right; font-size: 9.5pt; color: #444; }
    #print-list .pl-table { width: 100%; border-collapse: collapse; }
    #print-list th, #print-list td { text-align: left; padding: 5pt 6pt; border-bottom: 0.75pt solid #ccc; vertical-align: top; }
    #print-list th { font-size: 9pt; text-transform: uppercase; letter-spacing: 0.04em; color: #444; }
    #print-list td small { display: block; color: #555; font-size: 8.5pt; margin-top: 1pt; }
    #print-list .pl-num { text-align: right; white-space: nowrap; }
    #print-list .pl-qty { font-weight: 700; white-space: nowrap; }
    #print-list .pl-check { width: 14pt; }
    #print-list td.pl-check::before { content: ''; display: inline-block; width: 9pt; height: 9pt; border: 0.9pt solid #555; border-radius: 2pt; }
    #print-list tfoot td { font-weight: 700; border-bottom: 0; border-top: 1.5pt solid #111; }
    #print-list tr { page-break-inside: avoid; }
    #print-list .pl-fine { margin-top: 8pt; font-size: 8.5pt; color: #555; word-break: break-all; }
}