/* ═══════════════════════════════════════════════════════════════════════════════════════════
Vibe96 — central design system (package 187, stage 1 of the CSS unification).
ONE place for: design tokens (colours, type, spacing, radius, shadows), the site header,
and the standard components (buttons, fields, cards, badges, alerts, tables, eyebrows).
Rules for new and converted pages:
• Use the tokens (var(--v96-…)) instead of hex values.
• Use the v- components instead of inline style="…".
• Page-specific layout goes in the page's own CSS file, scoped under the page's class.
Loaded on every page that uses _Layout (right after site.css).
═══════════════════════════════════════════════════════════════════════════════════════════ */
:root{
/* colour */
--v96-ink:#211A31; /* headings, main text */
--v96-text:#3A3148; /* strong body text */
--v96-body:#5F566E; /* body text (the site's most used grey) */
--v96-faint:#8E839B; /* hints, meta */
--v96-purple:#7624F4; /* brand, links, accents */
--v96-purple-d:#5B14CF; /* link hover */
--v96-violet:#731FF9; /* button hover */
--v96-blue:#0C50FB; /* primary action */
--v96-eyebrow:#7842C9;
--v96-line:#ECE7F2; /* borders, dividers */
--v96-line-2:#D8CCF4; /* input and outline borders */
--v96-line-3:#F1EEF6; /* light dividers */
--v96-border:#DDD6E7; /* neutral control borders */
--v96-tint:#F8F7FB; /* light grey fill */
--v96-soft-line:#E4D8FB; /* border on purple tint */
--v96-soft:#F4EEFE; /* purple tint */
--v96-band:#FAF8FE; /* light section background */
--v96-bg:#fff;
--v96-night:#1C1728; /* footer / dark bands */
--v96-green:#16774A; --v96-green-bg:#E8F6EF;
--v96-amber:#8A5300; --v96-amber-bg:#FFF4E0;
--v96-red:#B3261E; --v96-red-bg:#FDECEA;
--v96-info:#4B1FA8; --v96-info-bg:#F4EEFE;
/* type */
--v96-font:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif;
--v96-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Consolas,monospace;
--v96-fs-xs:12px; --v96-fs-sm:13.5px; --v96-fs:15px; --v96-fs-md:17px; --v96-fs-lg:20px;
--v96-h1:clamp(34px,3.4vw,60px); --v96-h2:clamp(28px,2.4vw,44px); --v96-h3:clamp(18px,1.3vw,22px);
/* shape & space */
--v96-r-sm:7px; --v96-r:10px; --v96-r-lg:14px; --v96-r-xl:18px; --v96-r-pill:999px;
--v96-s1:4px; --v96-s2:8px; --v96-s3:12px; --v96-s4:16px; --v96-s5:24px; --v96-s6:32px; --v96-s7:48px; --v96-s8:72px;
--v96-shadow:0 18px 40px -28px rgba(40,20,80,.35);
--v96-focus:0 0 0 2px #fff,0 0 0 4px var(--v96-purple);
/* layout */
--v96-header-h:83px;
--v96-wrap:min(1680px,calc(100% - 2 * clamp(20px,6.25vw,120px)));
}
/* ───────── layout helpers ───────── */
.v-wrap{width:var(--v96-wrap);margin:0 auto}
.v96-page{min-height:100vh;display:flex;flex-direction:column}
.v96-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ───────── site header (one header on every page; markup: Views/Shared/_HeaderV2.cshtml) ───────── */
.v2h{height:var(--v96-header-h);border-bottom:1px solid #EEE9F5;background:#fff;position:sticky;top:0;z-index:30;font-family:var(--v96-font);color:var(--v96-ink)}
.v2h .wrap{width:var(--v96-wrap);margin:0 auto;height:100%;display:flex;align-items:center;gap:16px}
.v2h a{text-decoration:none}
.v2h .logo{display:flex;align-items:center;border-radius:6px;flex:none}
.v2h .logo img{height:34px;width:auto;display:block}
.v2h nav.main{display:flex;margin:0 auto;gap:clamp(16px,1.6vw,30px);font-size:17px;font-weight:600}
.v2h nav.main a{display:inline-flex;align-items:center;padding:6px 0;color:var(--v96-ink);white-space:nowrap}
.v2h nav.main a:hover,.v2h nav.main a[aria-current="page"]{color:var(--v96-purple)}
.v2h .right{display:flex;align-items:center;gap:0;flex:none}
.v2h .ic{display:inline-flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--v96-ink);padding:8px 0;border-radius:8px}
.v2h .ic+.ic{margin-left:18px}
.v2h .ic:hover{color:var(--v96-purple)}
.v2h .ic svg{display:block;flex:none}
.v2h .bell{margin:0 6px 0 18px}
.v2h .signin{font-size:14.5px;font-weight:700;color:var(--v96-ink);padding:8px 0;margin:0 29px 0 28px;border-radius:8px;display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.v2h .signin:hover{color:var(--v96-purple)}
.v2h .signin:last-child{margin-right:0}
.v2h .badge{min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#D93025;color:#fff;font-size:11px;font-weight:800;display:inline-grid;place-items:center}
.v2h .sell{display:inline-flex;align-items:center;gap:21px;height:44px;padding:0 18px 0 17px;border:1px solid var(--v96-blue);border-radius:var(--v96-r-sm);color:var(--v96-blue);font-size:14px;font-weight:700;background:#fff;white-space:nowrap;transition:background .2s,color .2s,border-color .2s}
.v2h .sell:hover{background:var(--v96-violet);color:#fff;border-color:var(--v96-violet)}
.v2h .sell svg{display:block}
.v2h a:focus-visible,.v2h summary:focus-visible{outline:2px solid var(--v96-purple);outline-offset:3px}
/* phone / small tablet: the three links move into a menu */
.v2h .menu{display:none;position:relative;margin-left:14px}
.v2h .menu summary{list-style:none;cursor:pointer;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--v96-ink)}
.v2h .menu summary::-webkit-details-marker{display:none}
.v2h .menu summary:hover{background:var(--v96-band)}
.v2h .menu[open] summary{background:var(--v96-soft);color:var(--v96-purple)}
.v2h .menu .panel{position:absolute;right:0;top:calc(100% + 10px);min-width:230px;max-height:calc(100dvh - var(--v96-header-h) - 16px);overflow:auto;background:#fff;border:1px solid var(--v96-line);border-radius:var(--v96-r-lg);box-shadow:0 22px 50px -24px rgba(40,20,80,.35);padding:8px;display:flex;flex-direction:column}
.v2h .menu .panel a{padding:12px 14px;border-radius:9px;font-size:16px;font-weight:600;color:var(--v96-ink)}
.v2h .menu .panel a:hover{background:var(--v96-band);color:var(--v96-purple)}
.v2h .menu .panel .sell-m{margin-top:6px;border-top:1px solid var(--v96-line);border-radius:0 0 9px 9px;color:var(--v96-blue)}
@media (max-width:1180px){.v2h nav.main{gap:18px;font-size:15.5px}.v2h .signin{margin:0 18px}}
@media (max-width:980px){.v2h nav.main{display:none}.v2h .right{margin-left:auto}.v2h .menu{display:block}}
@media (max-width:560px){.v2h .sell{display:none}.v2h .signin{margin:0 0 0 16px}.v2h .ic+.ic{margin-left:14px}.v2h .logo img{height:28px}}
/* 328: phone header fits 390 px — account link becomes an icon, favourites move into the menu */
.v2h .si-ic{display:none}
.v2h .menu .panel .m-only,.v2h .menu .panel .m-acc{display:none}
@media (max-width:560px){
.v2h .wrap{gap:8px}
.v2h .logo img{height:24px}
.v2h .si-l{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}.v2h .si-ic{display:grid;place-items:center;width:44px;height:44px}
.v2h .signin{margin:0 0 0 4px;padding:0;position:relative}
.v2h .signin .badge{position:absolute;top:2px;right:0}
.v2h .bell{margin:0 0 0 4px}
.v2h .ic{min-width:44px;min-height:44px;justify-content:center;gap:4px}
.v2h .ic+.ic{margin-left:4px}
.v2h .menu{margin-left:2px}
.v2h .menu .panel{position:fixed;left:12px;right:12px;top:calc(var(--v96-header-h) - 6px);min-width:0}
.v2h .menu .panel .m-acc{display:block}
}
@media (max-width:420px){.v2h .ic.fav{display:none}.v2h .menu .panel .m-only{display:block}}
/* 328: phone in landscape — a shorter header leaves room for the page */
@media (max-height:500px) and (orientation:landscape){:root{--v96-header-h:60px}.v2h .logo img{height:24px}}
/* banner under the header: "A builder replied to your support ticket" */
.v96-replies{display:flex;justify-content:center;align-items:center;gap:12px;padding:11px 24px;background:var(--v96-soft);border-bottom:1px solid #E4D8FB;color:var(--v96-purple);font-size:15px;text-decoration:none}
.v96-replies:hover{background:#EBE0FD;color:var(--v96-purple)}
.v96-replies .n{width:24px;height:24px;border-radius:50%;background:var(--v96-purple);color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800;flex:none}
.v96-replies .go{text-decoration:underline}
/* ───────── buttons ─────────
… blue, violet on hover (the site's main action)
v-btn-outline white with blue border v-btn-soft purple tint v-btn-ghost text only
v-btn-dark ink v-btn-danger red
sizes: v-btn-sm · (default) · v-btn-lg v-btn-block = full width */
.v-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:46px;padding:0 20px;border:1px solid transparent;border-radius:var(--v96-r-sm);
font-family:var(--v96-font);font-size:15px;font-weight:700;line-height:1;white-space:nowrap;text-decoration:none;cursor:pointer;
transition:background-color .15s,border-color .15s,color .15s,box-shadow .15s,transform .15s}
.v-btn svg{flex:none;display:block}
.v-btn:focus-visible{outline:none;box-shadow:var(--v96-focus)}
.v-btn:disabled,.v-btn[aria-disabled="true"]{opacity:.5;cursor:not-allowed;pointer-events:none}
.v-btn-primary{background:var(--v96-blue);border-color:var(--v96-blue);color:#fff}
.v-btn-primary:hover{background:var(--v96-violet);border-color:var(--v96-violet);color:#fff}
.v-btn-outline{background:#fff;border-color:var(--v96-blue);color:var(--v96-blue)}
.v-btn-outline:hover{background:var(--v96-violet);border-color:var(--v96-violet);color:#fff}
.v-btn-soft{background:var(--v96-soft);border-color:#E4D8FB;color:var(--v96-purple)}
.v-btn-soft:hover{background:#EBE0FD;color:var(--v96-purple-d)}
.v-btn-ghost{background:transparent;color:var(--v96-purple);padding:0 10px}
.v-btn-ghost:hover{background:var(--v96-band);color:var(--v96-purple-d)}
.v-btn-dark{background:var(--v96-ink);border-color:var(--v96-ink);color:#fff}
.v-btn-dark:hover{background:var(--v96-violet);border-color:var(--v96-violet);color:#fff}
.v-btn-danger{background:#fff;border-color:#F0C4C0;color:var(--v96-red)}
.v-btn-danger:hover{background:var(--v96-red);border-color:var(--v96-red);color:#fff}
.v-btn-secondary{background:#fff;border-color:var(--v96-border);color:var(--v96-ink)} /* neutral: save, compare, cancel */
.v-btn-secondary:hover{border-color:var(--v96-blue);color:var(--v96-blue)}
.v-btn-secondary[aria-pressed="true"]{border-color:var(--v96-blue);background:var(--v96-soft);color:var(--v96-blue)}
.v-btn-light{background:#fff;border-color:#fff;color:var(--v96-purple-d)} /* on dark / purple bands */
.v-btn-light:hover{background:#F0E7FF;border-color:#F0E7FF;color:var(--v96-purple-d)}
.v-btn-sm{height:36px;padding:0 14px;font-size:13.5px;border-radius:7px}
.v-btn-lg{height:54px;padding:0 26px;font-size:16px;border-radius:8px}
.v-btn-block{display:flex;width:100%}
/* ───────── links ───────── */
.v-link{color:var(--v96-purple);font-size:15px;font-weight:700;text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.v-link:hover{color:var(--v96-purple-d)}
.v-link svg{transition:transform .2s}.v-link:hover svg{transform:translateX(3px)}
/* ───────── form fields ─────────
…
*/
.v-label{display:block;margin:0 0 7px;font-size:14px;font-weight:700;color:var(--v96-text)}
.v-input,.v-select,.v-textarea{width:100%;min-height:46px;padding:11px 14px;border:1.5px solid var(--v96-line-2);border-radius:var(--v96-r);background:#fff;
font-family:var(--v96-font);font-size:16px;color:var(--v96-ink);outline:none;transition:border-color .15s,box-shadow .15s} /* 16px: phones don't zoom in on focus */
.v-textarea{min-height:110px;resize:vertical;line-height:1.55}
.v-select{appearance:none;padding-right:40px;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236F6680' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") right 12px center/18px no-repeat}
.v-input::placeholder,.v-textarea::placeholder{color:#A69CB3}
.v-input:focus,.v-select:focus,.v-textarea:focus{border-color:var(--v96-purple);box-shadow:0 0 0 3px rgba(118,36,244,.12)}
.v-input[aria-invalid="true"],.v-select[aria-invalid="true"],.v-textarea[aria-invalid="true"]{border-color:var(--v96-red)}
.v-input:disabled,.v-select:disabled,.v-textarea:disabled{background:var(--v96-band);color:var(--v96-faint)}
.v-hint{margin:6px 0 0;font-size:12.5px;color:var(--v96-faint)}
.v-error{margin:6px 0 0;font-size:12.5px;color:var(--v96-red);font-weight:600}
.v-check{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;font-weight:600;color:var(--v96-text);cursor:pointer}
.v-check input{width:18px;height:18px;accent-color:var(--v96-blue);margin:0}
/* ───────── cards & sections ───────── */
.v-card{background:#fff;border:1px solid var(--v96-line);border-radius:var(--v96-r-lg);padding:var(--v96-s5)}
.v-card-soft{background:var(--v96-band);border-color:#EFEAF5}
.v-card-hover{transition:box-shadow .25s,transform .25s,border-color .2s}
.v-card-hover:hover{box-shadow:var(--v96-shadow);transform:translateY(-3px)}
.v-eyebrow{margin:0;font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v96-eyebrow);line-height:1.2}
.v-h1{margin:0;font-size:var(--v96-h1);line-height:1.05;font-weight:800;letter-spacing:-.045em;color:var(--v96-ink)}
.v-h2{margin:0;font-size:var(--v96-h2);line-height:1.12;font-weight:800;letter-spacing:-.035em;color:var(--v96-ink)}
.v-h3{margin:0;font-size:var(--v96-h3);line-height:1.3;font-weight:700;color:var(--v96-ink)}
.v-lead{margin:0;font-size:clamp(16px,1.1vw,19px);line-height:1.6;color:var(--v96-body)}
.v-muted{color:var(--v96-faint)}
.v-divider{border:0;border-top:1px solid var(--v96-line);margin:var(--v96-s5) 0}
/* ───────── badges / chips ───────── */
.v-badge{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:var(--v96-r-pill);font-size:12px;font-weight:700;background:#F4F2F7;color:var(--v96-text);white-space:nowrap}
.v-badge-purple{background:var(--v96-soft);color:var(--v96-purple)}
.v-badge-green{background:var(--v96-green-bg);color:var(--v96-green)}
.v-badge-amber{background:var(--v96-amber-bg);color:var(--v96-amber)}
.v-badge-red{background:var(--v96-red-bg);color:var(--v96-red)}
.v-badge-blue{background:#E7EEFF;color:var(--v96-blue)}
.v-badge .dot{width:7px;height:7px;border-radius:50%;background:currentColor}
/* ───────── alerts ───────── …
(info · ok · warn · bad) */
.v-alert{display:flex;gap:10px;align-items:flex-start;margin:0 0 var(--v96-s4);padding:12px 16px;border-radius:12px;border:1px solid transparent;font-size:14.5px;line-height:1.5}
.v-alert svg{flex:none;margin-top:2px}
.v-alert-info{background:var(--v96-info-bg);border-color:#E4D8FB;color:var(--v96-info)}
.v-alert-ok{background:var(--v96-green-bg);border-color:#CDEBDB;color:var(--v96-green)}
.v-alert-warn{background:var(--v96-amber-bg);border-color:#F3DDB4;color:var(--v96-amber)}
.v-alert-bad{background:var(--v96-red-bg);border-color:#F5CDC9;color:var(--v96-red)}
/* ───────── tables ───────── wrap wide tables: */
.v-table-wrap{overflow-x:auto;border:1px solid var(--v96-line);border-radius:var(--v96-r-lg);background:#fff}
.v-table{width:100%;border-collapse:collapse;font-size:14.5px;line-height:1.5}
.v-table th{text-align:left;font-size:12.5px;font-weight:700;color:var(--v96-faint);text-transform:uppercase;letter-spacing:.05em;padding:12px 16px;background:var(--v96-band);border-bottom:1px solid var(--v96-line)}
.v-table td{padding:14px 16px;border-bottom:1px solid var(--v96-line);color:var(--v96-text);vertical-align:top}
.v-table tr:last-child td{border-bottom:0}
@media (prefers-reduced-motion:reduce){.v-btn,.v-card-hover,.v-link svg,.v2h .sell{transition:none}.v-card-hover:hover{transform:none}}
/* ───────── error page (Views/Home/Error.cshtml) ───────── */
.v96-error{flex:1;display:grid;place-items:center;padding:64px 24px}
.v96-error .box{width:100%;max-width:520px;text-align:center}
.v96-error img{height:28px;margin-bottom:24px}
.v96-error h1{margin:0 0 8px;font-size:clamp(26px,2vw,42px);font-weight:800;letter-spacing:-.03em;color:var(--v96-ink)}
.v96-error p{margin:0 0 28px;font-size:18px;color:var(--v96-body);line-height:1.55}
/* ───────── FAQ — the Home page FAQ is the standard (201) ─────────
heading on the left, questions on the right
Add .v-faq-stack for one column (e.g. inside an article). */
.v-faq{display:grid;grid-template-columns:minmax(0,786px) minmax(0,1fr);gap:0}
.v-faq.v-faq-stack{grid-template-columns:1fr;gap:18px}
.v-faq .v-faq-eb{margin:18px 0 0;font-size:12.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--v96-eyebrow);line-height:1}
.v-faq .v-faq-title{margin:15px 0 0;font-size:33.8px;line-height:40px;font-weight:800;letter-spacing:-.035em;color:var(--v96-ink)}
.v-faq .v-faq-link{margin-top:26px}
.v-faq-list details{border-bottom:1px solid #E9E3EF}
.v-faq-list summary{list-style:none;cursor:pointer;min-height:59px;display:flex;align-items:center;justify-content:space-between;gap:16px;font-size:16.5px;font-weight:700;line-height:1.35;color:var(--v96-ink);letter-spacing:normal}
.v-faq-list summary::-webkit-details-marker{display:none}
.v-faq-list summary:hover{color:var(--v96-purple)}
.v-faq-list summary::after{content:"+";flex:none;width:12px;text-align:center;font-style:normal;font-weight:500;font-size:15px;color:#9B7FE0}
.v-faq-list details[open] summary::after{content:"–"}
.v-faq-list details[open] summary{min-height:0;padding-top:17px}
.v-faq-list details>p{margin:0;padding:17px 0 21px;font-size:16px;line-height:23px;color:#8C8198;max-width:720px}
.v-faq-list details>p a{color:var(--v96-purple);font-weight:600}
.v-faq-list summary:focus-visible{outline:2px solid var(--v96-purple);outline-offset:3px;border-radius:6px}
@media (max-width:1400px){.v-faq{grid-template-columns:1fr 1.2fr;gap:60px}}
@media (max-width:860px){.v-faq{grid-template-columns:1fr;gap:30px}}
.v-faq .v-faq-title em{font-style:normal;color:var(--v96-purple)}
/* ───────── Apple Pay / Google Pay box (210) — Stripe draws the buttons; this is just the frame ───────── */
.v-wallets{margin:0 0 18px}
.v-wallets[hidden]{display:none}
.v-or{display:flex;align-items:center;gap:14px;margin:16px 0 0;font-size:13.5px;color:var(--v96-faint)}
.v-or::before,.v-or::after{content:"";flex:1;border-top:1px solid var(--v96-line)}
/* 328: compare tray and its toast (compare.js) — classes instead of inline styles */
.cmp-bar{position:fixed;left:50%;bottom:20px;transform:translateX(-50%);z-index:61;display:flex;align-items:center;gap:10px;padding:10px 12px 10px 16px;background:#fff;border:1px solid #C9B4FF;border-radius:14px;box-shadow:0 18px 50px -12px rgba(21,22,28,.35);max-width:min(96vw,760px);font-family:var(--v96-font)}
.cmp-n{font-size:13px;font-weight:700;color:#5513C9;white-space:nowrap}
.cmp-items{display:flex;gap:6px;overflow:auto;flex:1;min-width:0}
.cmp-item{display:inline-flex;align-items:center;gap:6px;padding:4px 6px 4px 10px;border-radius:8px;background:#F6F7FA;font-size:12.5px;white-space:nowrap;max-width:180px}
.cmp-item>span{overflow:hidden;text-overflow:ellipsis}
.cmp-item button{border:0;background:none;cursor:pointer;font-size:16px;line-height:1;color:#8A90A2;padding:0 4px;min-width:24px;min-height:24px}
.cmp-go{height:38px;line-height:38px;padding:0 16px;border-radius:9px;background:var(--v96-blue);color:#fff;font-size:13.5px;font-weight:700;white-space:nowrap;text-decoration:none}
.cmp-go.is-off{opacity:.5;pointer-events:none}
.cmp-clear{border:0;background:none;cursor:pointer;font-size:12.5px;color:#8A90A2;white-space:nowrap;min-height:38px;padding:0 6px}
.cmp-toast{position:fixed;left:50%;bottom:92px;transform:translateX(-50%);background:#202020;color:#fff;padding:10px 16px;border-radius:9px;font-size:14px;z-index:1200;box-shadow:0 10px 30px rgba(21,22,28,.3);opacity:0;transition:opacity .2s;pointer-events:none;font-family:var(--v96-font)}
.cmp-toast.is-on{opacity:1}
/* phones: the tray takes the left of the bottom edge, the chat button (a round icon there) the right — they never overlap */
@media (max-width:640px){
.cmp-bar{left:12px;right:84px;bottom:12px;transform:none;max-width:none;flex-wrap:wrap;gap:8px;padding:8px 10px}
.cmp-items{flex-basis:100%;order:3}
.cmp-item{max-width:none;flex:1 1 0;min-width:0}
.cmp-go{height:34px;line-height:34px;padding:0 12px;margin-left:auto}
.cmp-toast{bottom:auto;top:calc(var(--v96-header-h) + 10px)}
}
@media (max-height:500px) and (orientation:landscape){.cmp-bar{bottom:8px;padding:6px 10px}.cmp-items{display:none}}
/* 329: file pickers — a styled button instead of the browser's grey "Choose File", and never wider than their box */
input[type=file]{max-width:100%;font-family:inherit;font-size:14px;color:var(--v96-body)}
input[type=file]::file-selector-button{margin-right:12px;min-height:40px;padding:0 16px;border:1px solid var(--v96-border,#DDD6E7);border-radius:10px;background:#fff;color:var(--v96-ink);font:700 14px var(--v96-font);cursor:pointer;transition:border-color .15s,color .15s}
input[type=file]::file-selector-button:hover{border-color:var(--v96-purple);color:var(--v96-purple)}
/* 329: phone compare tray — one product per line, so names are readable instead of "Furni…" */
@media (max-width:640px){
.cmp-items{flex-direction:column;gap:4px}
.cmp-item{flex:none;width:100%;justify-content:space-between;font-size:14px}
.cmp-item button{min-width:36px;min-height:32px}
}