/* Race Rally Supplies look: clean white like the website, red main buttons, black smaller buttons.
   Logo red is #DB4A2B (from the logo file). Buttons use a slightly deeper red so white text stays easy to read. */
:root {
  --ink: #111; --tarmac: #fff; --paper: #fff;
  --flag: #D32F2F; --flag-deep: #B71C1C; --kerb: #C62828;
  --muted: #5B5B5B; --line: #DDDDDD; --ok: #0F7A68; --radius: 0;
  --logo-red: #DB4A2B;
  --head: "Assistant", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --body: "Assistant", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
}
body { background: #fff; }
.skip { color: #fff; }
.top { border-bottom: 1px solid var(--line); border-image: none; box-shadow: none; }
.brand img { display: block; height: 46px; width: auto; }
.cart-btn { border: 0; background: transparent; width: 44px; }
.cart-count { background: #111; }
.cart-count.dot { background: var(--ok); }
.search input { border: 1px solid #111; }
.btn, .search button { font: 600 13px/1 var(--head); text-transform: uppercase; letter-spacing: .09em; border-radius: 0; }
.search button { background: #111; border-color: #111; }
.btn-primary { background: var(--flag); color: #fff; border-color: var(--flag); }
.btn-primary:hover { background: var(--flag-deep); border-color: var(--flag-deep); }
.btn-small { background: #111; color: #fff; border-color: #111; height: 40px; font-size: 12px; }
.buy .btn-primary { font-size: 13px; letter-spacing: .08em; white-space: nowrap; }
.chips { gap: 18px; border-top: 1px solid var(--line); margin-top: 10px; padding-top: 2px; }
.chip { border: 0; background: transparent; padding: 10px 0 8px; border-bottom: 3px solid transparent; font: 600 12.5px/1 var(--head); text-transform: uppercase; letter-spacing: .07em; border-radius: 0; }
.chip[aria-current="true"] { background: transparent; color: #111; border-bottom-color: var(--logo-red); }
h1 { font: 300 30px/1.1 var(--head); letter-spacing: -.01em; }
.card { border: 0; } .card:hover { border: 0; }
.card .pic { background: #F4F4F4; border-radius: 0; }
.card .title { font: 600 14px/1.3 var(--head); }
.card .vendor { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; }
.price { font: 600 15px/1 var(--head); } .info .price { font: 600 24px/1 var(--head); }
.badge { color: #fff; border-radius: 0; }
.sugg { background: #FFF4F1; border-color: var(--logo-red); }
.btn-outline { background: #fff; border: 1px solid #111; color: #111; font-size: 12px; letter-spacing: .05em; line-height: 1.25; padding: 0 12px; }
.btn-outline:hover { background: #F4F4F4; }
.btn-outline::before { background: var(--flag); }
.btn.inbasket { background: #fff; color: var(--ok); border: 1px solid var(--ok); }
.opt { border: 1px solid #bbb; border-radius: 0; } .opt[aria-pressed="true"] { background: #111; border-color: #111; }
.qty { border: 1px solid #111; border-radius: 0; }
.bitem, .vcard, .dentry, .state, .order, .parcel, .exp, .sugg, .line .pic, .oitems .pic, .bitem .pic { border-radius: 0; }
.state { border: 1px solid var(--line); }
.fld input, .fld select, .fld textarea, select, .bnote { border-radius: 0; }
.brow select, .brow2 select, .lc-row select { border: 1px solid #111; }
.bpanel .btn { font-size: 13px; letter-spacing: .08em; }
.cart-foot .btn { font-size: 15px; letter-spacing: .1em; }

.hello { border-radius: 0; background: #F7F7F7; border: 0; }
.tabs a { text-transform: uppercase; letter-spacing: .05em; font-size: 11px; }
.tabs a[aria-current="page"] { border-top-color: var(--flag); }

.subnav .chip { border: 1px solid var(--line); background: #fff; padding: 9px 13px; text-transform: none; letter-spacing: 0; font: 600 14px/1 var(--head); border-radius: 0; }
.subnav .chip[aria-current="true"] { background: #111; color: #fff; border-color: #111; }
.cat-tiles a { border-radius: 0; }

.quick a { border-radius: 0; text-transform: uppercase; letter-spacing: .07em; font-size: 12px; }

/* Premium finish. Judgement: soft, low, tinted shadows only on what you press (buttons and the shortcut panel); cards, lists and forms stay flat and crisp. */
:root { --shadow-red: 0 10px 20px -10px rgba(211,47,47,.65), 0 2px 4px -2px rgba(211,47,47,.35); --shadow-dark: 0 10px 18px -12px rgba(0,0,0,.42), 0 2px 3px -2px rgba(0,0,0,.25); }
.btn, .search button { transition: transform .12s ease, box-shadow .12s ease, background-color .12s ease; }
.btn-primary { box-shadow: var(--shadow-red), inset 0 1px 0 rgba(255,255,255,.22); }
.btn-small, .search button, .btn:not(.btn-primary):not(.btn-outline):not(.inbasket) { box-shadow: var(--shadow-dark), inset 0 1px 0 rgba(255,255,255,.12); }
.top .search .cart-btn { box-shadow: none; }
.btn:active, .search button:active { transform: translateY(1px); box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .btn, .search button { transition: none; } }
.tabs { box-shadow: 0 -12px 24px -16px rgba(0,0,0,.35); }

/* The greeting, opposite the logo */
.masthead-hi { text-align: right; line-height: 1.1; min-width: 0; max-width: 58vw; }
.masthead-hi .hi-name { display: block; font: 300 27px/1.05 var(--head); letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.masthead-hi .hi-sub { display: block; margin-top: 5px; font: 700 10px/1 var(--head); letter-spacing: .2em; text-transform: uppercase; color: var(--flag); }

/* Garage, Orders, Account: one dark dashboard-style panel, impossible to miss */
.quick { gap: 0; margin-top: 12px; background: linear-gradient(180deg, #1d1d1f 0%, #0b0b0c 100%); box-shadow: 0 14px 26px -16px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.09); }
.quick a { flex-direction: column; gap: 7px; min-height: 62px; background: transparent; border: 0; border-top: 3px solid transparent; border-left: 1px solid rgba(255,255,255,.11); color: #fff; font: 700 11px/1 var(--head); letter-spacing: .17em; transition: background-color .12s ease; }
.quick a:first-child { border-left: 0; }
.quick a svg { width: 23px; height: 23px; color: var(--logo-red); }
.quick a:hover { background: rgba(255,255,255,.05); }
.quick a:active { background: rgba(255,255,255,.1); }
.quick a[aria-current="page"] { background: rgba(255,255,255,.07); border-top-color: var(--logo-red); border-color: rgba(255,255,255,.11); border-top-color: var(--logo-red); }
.quick a[aria-current="page"]:first-child { border-left: 0; }
.hello { border-radius: 0; background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--logo-red); }

.listbar select, .fchip, .pfield input { border-radius: 0; }
.fchip { text-transform: none; }
dialog.fpanel { border-radius: 0; }