/* SendItRC additions — same design language as the mockup (vars from index-BRrktZzJ.css) */

.frc-main{max-width:1200px;margin:0 auto;padding:26px 5vw 60px}
.frc-main h1{font-size:clamp(22px,3vw,34px);letter-spacing:-.4px;margin:10px 0 4px}
.frc-crumb{font-size:13px;color:var(--muted);margin:14px 0 4px}
.frc-crumb a{color:var(--cyan-dark);text-decoration:none}
.frc-muted{color:var(--muted)}

.frc-btn{display:inline-block;border:0;cursor:pointer;font-weight:800;font-size:16px;
  padding:12px 26px;border-radius:12px;background:var(--lime);color:var(--ink);
  box-shadow:0 3px 0 #8fae10;text-decoration:none;letter-spacing:.3px}
.frc-btn:hover{filter:brightness(1.06)}
.frc-btn:active{transform:translateY(2px);box-shadow:0 1px 0 #8fae10}
.frc-btn--cyan{background:var(--cyan);color:#fff;box-shadow:0 3px 0 var(--cyan-dark)}
.frc-btn--ghost{background:#fff;border:2px solid var(--line);box-shadow:none;color:var(--ink)}
.frc-btn[disabled]{opacity:.55;cursor:not-allowed;transform:none}

.frc-badge{display:inline-block;font-size:12.5px;font-weight:700;border-radius:20px;padding:3px 11px}
.frc-badge--in{background:#e2f7ec;color:var(--green)}
.frc-badge--low{background:#fff3d6;color:#a06b00}
.frc-badge--out{background:#fde8e8;color:#c0392b}

/* search */
.frc-searchbar{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:16px;display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin:18px 0}
.frc-searchbar input[type=search]{flex:1 1 260px;font-size:17px;padding:12px 14px;
  border:2px solid var(--ink);border-radius:10px}
.frc-searchbar select{padding:10px;border:1px solid var(--line);border-radius:10px;background:#fff;font-size:14px}
.frc-searchbar label.frc-check{display:flex;gap:6px;align-items:center;font-size:13.5px;color:var(--muted)}
/* The /search page has its OWN enter button (.frc-enter) — the homepage one is
   .search-control button. Both render the same artwork, so they must stay the
   same size or the button changes size when you click through. 32/26 matches
   the homepage rules further down; keep the two in step. */
.frc-enter{border:0;background:none;padding:0;cursor:pointer}
.frc-enter img{height:32px;display:block}
@media (max-width:430px){.frc-enter img{height:26px}}

.frc-meta{display:flex;justify-content:space-between;align-items:center;margin:6px 2px 14px;
  font-size:14px;color:var(--muted)}
.frc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:18px}
.frc-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
  cursor:pointer;transition:box-shadow .15s,transform .15s;display:flex;flex-direction:column;text-decoration:none;color:var(--ink)}
.frc-card:hover{box-shadow:0 10px 26px #19293722;transform:translateY(-2px)}
.frc-card img{width:100%;aspect-ratio:4/3;object-fit:cover;background:#fff}
.frc-card .frc-card-body{padding:10px 12px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.frc-card .frc-sku{font-size:12px;font-weight:700;color:var(--cyan-dark);letter-spacing:.4px}
.frc-card h3{font-size:14.5px;line-height:1.35;font-weight:600;margin:0;flex:1}
.frc-card .frc-price-row{display:flex;justify-content:space-between;align-items:center;margin-top:4px}
.frc-card .frc-price{font-size:17px;font-weight:800}

/* product page */
.frc-product{display:grid;grid-template-columns:minmax(280px,540px) 1fr;gap:38px;margin-top:18px}
@media (max-width:820px){.frc-product{grid-template-columns:1fr}}
.frc-photo{background:#fff;border:1px solid var(--line);border-radius:16px;overflow:hidden}
.frc-photo img{width:100%;display:block}
.frc-buy{display:flex;flex-direction:column;gap:14px}
.frc-buy .frc-bigprice{font-size:34px;font-weight:800}
.frc-brand-chip{display:inline-block;background:var(--soft);border:1px solid var(--line);
  border-radius:20px;padding:4px 14px;font-size:13px;font-weight:600}
.frc-qty{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.frc-qty button{width:38px;height:40px;border:0;background:var(--soft);font-size:19px;cursor:pointer}
.frc-qty input{width:52px;height:40px;border:0;text-align:center;font-size:16px;font-weight:700}
.frc-addcart{border:0;background:none;padding:0;line-height:0;cursor:pointer}
/* Add to Cart artwork. 50px was oversized next to the qty stepper and price
   (the owner 2026-07-28); 38px desktop / 34px phone sits level with the stepper. */
.frc-addcart img{height:38px;display:block}
@media (max-width:430px){.frc-addcart img{height:34px}}
.frc-addcart:hover img{filter:brightness(1.07)}
.frc-addcart:active{transform:translateY(2px)}
.frc-addcart[disabled]{opacity:.4;cursor:not-allowed}
.frc-addcart[disabled] img{filter:grayscale(1)}
.frc-added{opacity:0;transition:opacity .18s;font-weight:800;color:var(--green);font-size:15px;
  display:inline-flex;align-items:baseline;gap:9px;white-space:nowrap}
.frc-added.show{opacity:1}
.frc-added__cart{font-weight:650;font-size:13px;color:var(--cyan-dark,#008dca);text-decoration:none;
  border-bottom:1px solid currentColor}
.frc-added__cart:hover{color:var(--cyan,#08aeed)}
.frc-fits{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.frc-fits span{background:var(--soft);border:1px solid var(--line);border-radius:16px;
  padding:4px 12px;font-size:12.5px}
.frc-desc{margin-top:26px;max-width:820px;line-height:1.65;color:#2a3138}

/* whippy helper */
.frc-whippy{display:flex;align-items:flex-start;gap:12px;margin:26px 0 8px;max-width:640px}
/* The mockup's greeting pill is white-space:nowrap and sits hard against the
   right edge, so anything longer than "Hi, I'm Whippy" runs off screen (it
   clipped at 1200px even before we touched it). Let it wrap and cap the width. */
.whippy-greeting{white-space:normal !important;max-width:190px;text-align:center;
  line-height:1.3;text-wrap:balance}

/* 132px desktop / 100px mobile, per the mood-art handoff. The four PNGs are all
   256x256 and registered to the same bounding box, so a mood swap changes only
   the src — never the layout. Never trim or resize the sources. */
.frc-whippy img{width:132px;height:132px;object-fit:contain;cursor:pointer;flex:0 0 auto}
@media (max-width:760px){.frc-whippy img{width:100px;height:100px}}
.frc-whippy .bub{transition:background .16s}
.frc-whippy .bub.is-speaking{background:#f2fbff;border-color:#bfe3f7}
/* Type matches the homepage Whippy chat (.bot-bubble p) exactly. */
.frc-whippy .bub{background:var(--panel);border:1px solid #d4dce3;border-radius:15px;
  padding:11px 14px;color:var(--ink);font-size:12px;font-weight:750;letter-spacing:.02em;
  line-height:1.5;box-shadow:0 9px 26px #20313e14}
.frc-whippy .bub b{color:var(--cyan-dark)}

/* v72 product-page Whippy (supplied in the handoff; organic float, not a bob) */
.frc-whippy{position:relative;isolation:isolate}
.frc-whippy img{
  position:relative;z-index:2;transform-origin:50% 72%;
  filter:drop-shadow(0 8px 8px rgb(25 41 55 / 17%));
  animation:whippy-product-hover 5.8s ease-in-out infinite,
            whippy-product-sway 8.6s ease-in-out infinite;
}
@keyframes whippy-product-hover{0%,100%{translate:0 2px}50%{translate:0 -8px}}
@keyframes whippy-product-sway{
  0%,100%{transform:translateX(-2px) rotate(-1.4deg)}
  50%{transform:translateX(3px) rotate(1.4deg)}
}
@media (prefers-reduced-motion:reduce){.frc-whippy img{animation:none}}
/* Motion rules from the six-state handoff: Professional and Track Marshal hold
   still — they're the "I'm not joking right now" faces, and a bobbing mascot
   undercuts that. Apologetic floats gently. Default/Setup God/Overlord float
   normally. Matched on src so it follows the mood, not the page. */
.frc-whippy img[src*="professional"],
.frc-whippy img[src*="track-marshal"]{animation:none}
.frc-whippy img[src*="apologetic"]{animation:whippy-product-hover 7.4s ease-in-out infinite}

/* cart */
.frc-cart-row{display:grid;grid-template-columns:86px 1fr auto auto auto;gap:16px;align-items:center;
  background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:12px 16px;margin-bottom:12px}
.frc-cart-row img{width:86px;height:66px;object-fit:cover;border-radius:8px;background:#fff}
.frc-cart-row .ttl{font-size:14.5px;font-weight:600}
.frc-cart-row .rm{border:0;background:none;color:#c0392b;cursor:pointer;font-size:13px}
@media (max-width:680px){.frc-cart-row{grid-template-columns:66px 1fr;grid-auto-rows:auto}}
.frc-summary{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:20px;
  max-width:420px;margin-top:18px}
.frc-summary .line{display:flex;justify-content:space-between;margin-bottom:10px;font-size:15px}
.frc-summary .line.total{font-size:20px;font-weight:800;border-top:1px solid var(--line);padding-top:12px}
.frc-note{background:#eef8ff;border:1px solid #bfe3f7;border-radius:12px;padding:12px 16px;
  font-size:13.5px;color:#0b5e86;margin-top:12px}

/* track */
.frc-track-box{background:var(--panel);border:1px solid var(--line);border-radius:16px;
  padding:26px;max-width:560px;margin-top:20px}
.frc-track-box input{width:100%;font-size:16px;padding:12px;border:2px solid var(--ink);
  border-radius:10px;margin:6px 0 14px}

/* California Prop 65 — blanket warning, shown before the sale completes. */
.frc-p65{max-width:820px;margin:30px 0 4px;padding:12px 16px;border:1px solid var(--line);
  border-left:4px solid #c9a227;border-radius:10px;background:#fffdf5;
  font-size:12.5px;line-height:1.55;color:#5a5340}
.frc-p65 b{color:#7a6410;letter-spacing:.02em}
.frc-p65 a{color:#7a6410}

/* ENTER button — sized for the desktop hero, too big on a phone (the owner, from a
   friend's handset 2026-07-28). Measured at 390px: button 290x52, and since the
   img is object-fit:contain the VISIBLE artwork was 153px — 47% of the search
   card, on its own row.

   Size the BUTTON, not the img: `.search-control button img` is specificity
   0,1,2 and already pins the img to width/height 100%, so any rule on the img
   loses. Height drives the artwork (contain keeps 360:122), so dropping height
   shrinks it proportionally with no distortion.

   Sizes cut again 2026-07-28 — still dominating the phone and too heavy on
   desktop. Now 32px desktop (artwork 94px) and 26px phone (artwork 77px).
   The 760px tier has to stay even though it matches desktop: the bundle sets
   height:52px at `@media (width <= 760px)`, so without an override here a
   tablet renders the button BIGGER than a desktop. */
.search-control button{height:32px}
@media (max-width:760px){
  .search-control button{height:32px}
}
@media (max-width:430px){
  .search-control button{height:26px}
}

/* ---- header truck course -------------------------------------------------
   REVERTED 2026-07-28. I moved the truck/ramp/green with CSS and it broke the
   jump: the truck launched well before the ramp. The bundle's game logic keys
   the launch off the truck's own transform distance, not off where the ramp
   actually is on screen, so shifting `left` desynced the two. Do NOT retune
   this course from CSS — the trigger point lives in the compiled bundle and
   has to be changed at the source (or by whoever built the component). */

/* for-ai */
.frc-lede{max-width:760px;font-size:17px;line-height:1.6;color:var(--muted);margin:0 0 4px}
.frc-desc h2{font-size:19px;letter-spacing:-.2px}
.frc-desc p{margin:0 0 12px}
.frc-ailist{max-width:820px;line-height:1.9;padding-left:20px;margin:0}
.frc-ailist code{font-family:var(--font-geist-mono),monospace;font-size:13px;
  background:#eef8ff;border:1px solid #cfe7f6;border-radius:6px;padding:1px 6px}

.frc-empty{text-align:center;padding:40px 0;color:var(--muted)}
.frc-load{display:block;margin:26px auto}

/* ---- hidden reward ---------------------------------------------------- */
.frc-egg{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;
  padding:20px;background:rgba(17,20,23,.62);opacity:0;transition:opacity .26s ease}
.frc-egg.is-open{opacity:1}
.frc-egg__card{position:relative;background:var(--panel);border:1px solid var(--line);
  border-radius:22px;padding:34px 30px 28px;width:min(460px,100%);text-align:center;
  box-shadow:0 30px 80px rgba(17,20,23,.4);transform:translateY(14px) scale(.97);
  transition:transform .26s cubic-bezier(.2,.9,.3,1.2)}
.frc-egg.is-open .frc-egg__card{transform:none}
.frc-egg__x{position:absolute;top:10px;right:14px;border:0;background:none;font-size:26px;
  line-height:1;color:var(--muted);cursor:pointer}
.frc-egg__bot{width:112px;height:112px;object-fit:contain;margin-top:-4px;
  animation:whippy-product-hover 3.4s ease-in-out infinite}
.frc-egg__art{display:block;width:100%;max-width:340px;height:auto;margin:0 auto 16px}
.frc-egg__kicker{margin:6px 0 2px;font-size:12px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--cyan-dark)}
.frc-egg__card h2{font-size:25px;line-height:1.2;margin:0 0 16px;letter-spacing:-.4px}
.frc-egg__code{display:flex;align-items:stretch;gap:8px;justify-content:center;margin-bottom:12px}
.frc-egg__code code{flex:0 1 auto;font-family:var(--font-geist-mono),monospace;font-size:23px;
  font-weight:800;letter-spacing:.16em;padding:11px 20px;border-radius:12px;
  background:var(--lime);color:var(--ink);border:2px dashed rgba(17,20,23,.35)}
.frc-egg__copy{border:2px solid var(--line);background:#fff;border-radius:12px;padding:0 16px;
  font-weight:700;cursor:pointer;font-size:14px}
.frc-egg__copy:hover{border-color:var(--cyan)}
.frc-egg__small{font-size:13px;color:var(--muted);margin:0 0 10px}
.frc-egg__whip{font-size:13px;color:var(--muted);font-style:italic;margin:0 0 18px}
.frc-egg__row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.frc-egg__share,.frc-egg__go{border:0;cursor:pointer;font-weight:800;font-size:15px;
  padding:11px 20px;border-radius:12px;text-decoration:none;display:inline-block}
.frc-egg__share{background:var(--cyan);color:#fff;box-shadow:0 3px 0 var(--cyan-dark)}
.frc-egg__go{background:var(--lime);color:var(--ink);box-shadow:0 3px 0 #8fae10}
.frc-egg__share:active,.frc-egg__go:active{transform:translateY(2px);box-shadow:none}

/* .frc-egg-badge removed: the code no longer advertises itself on every page. */


.frc-egg-confetti{position:fixed;inset:0;pointer-events:none;z-index:9998;overflow:hidden}
.frc-egg-confetti i{position:absolute;top:-14px;width:9px;height:15px;border-radius:2px;
  animation:frc-fall linear forwards}
@keyframes frc-fall{to{transform:translateY(104vh) rotate(760deg)}}

@media (prefers-reduced-motion:reduce){
  .frc-egg__card,.frc-egg{transition:none}
  .frc-egg__bot{animation:none}
  .frc-egg-confetti{display:none}
}

/* ---- Best sellers grid (mounted at runtime by site.js) --------------------
   Sits directly under the hand-picked catalog strip, below the fold on
   purpose: the search box stays the hero, and anyone who scrolls past it gets
   real merchandise with real prices instead of an empty page. */
.popular-preview{max-width:1180px;margin:8px auto 40px;padding:0 20px}
.popular-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:16px;margin-top:14px}
.popular-card{display:flex;flex-direction:column;background:var(--panel,#fff);border:1px solid var(--line,#e3e3e0);border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;transition:transform .12s ease,box-shadow .12s ease}
.popular-card:hover{transform:translateY(-2px);box-shadow:0 6px 18px rgba(0,0,0,.10)}
.popular-card__image{aspect-ratio:1/1;background:#fff;display:flex;align-items:center;justify-content:center;padding:10px}
.popular-card__image img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.popular-card__body{padding:10px 12px 14px;display:flex;flex-direction:column;gap:4px;flex:1}
.popular-card__sku{font-family:Consolas,ui-monospace,monospace;font-size:11px;letter-spacing:.4px;color:#8a8a86}
.popular-card__body h3{font-size:13.5px;line-height:1.35;margin:0;font-weight:600;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.popular-card__row{margin-top:auto;padding-top:8px;display:flex;align-items:baseline;justify-content:space-between;gap:8px}
.popular-card__row strong{font-size:16px}
.popular-card__row .frc-badge{font-size:11px;padding:2px 9px;white-space:nowrap}
/* Sentinel the scroll observer watches. Zero height, no layout effect -- it
   exists only so the next batch can be appended before the shopper reaches
   the end of the grid. */
.popular-sentinel{height:1px}
@media(max-width:520px){.popular-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:12px}}

/* The three hand-picked "A few parts on the shelf" cards are gone -- Best
   Sellers replaced them with real merchandise, real prices and real demand.
   Hidden in CSS rather than removed in JS: the element is React's, and a
   runtime removal is undone on the next re-render. It also stays in the DOM as
   the anchor site.js mounts the Best Sellers grid against. */
.catalog-preview { display: none !important; }
.popular-preview { margin-top: 28px; }

/* Running total under the grid: the catalogue depth IS the pitch. */
.popular-count{text-align:center;color:#8a8a86;font-size:13px;margin:18px 0 6px;letter-spacing:.2px}

/* Whippy following the scroll. THERE IS ONLY ONE OF HIM, AND ONLY HIS
   POSITION CHANGES.

   He is already on the page, absolutely positioned just right of the search
   card. This switches that same element to fixed -- it does not create a
   second bot, and it does not touch what he says.

   NO ANIMATION OF OUR OWN. He already floats: bot-hover (5.8s) on .bot-float
   and bot-sway (8.6s) on .bot-body, two slow offset drifts. An arrival
   keyframe on the parent stacked on top of those and turned a float into a
   bounce. A transition on `top` gets him down the page once and then leaves
   his own motion alone. */
.ai-companion.whippy-follow{
  position:fixed !important;
  right:auto !important;
  bottom:auto !important;
  z-index:55;
  /* Animation, not transition.

     A transition needs a painted from-value, and this element changes
     `position` and `top` in the same style resolution -- browsers are entitled
     to collapse that, and Chrome and Firefox both did, so he snapped into
     place every time however long the duration was. A keyframe animation has
     its own from and to and cannot be collapsed away.

     NO reduced-motion override here. That rule set transition:none, which was
     indistinguishable from the bug it was sitting next to. Anyone who has
     reduced motion switched on still gets him, just faster. */
  top:22px;
  animation:whippy-drop 2s cubic-bezier(.33,.68,.35,1) both;
}
@keyframes whippy-drop{
  from{ transform:translateY(-150px); }
  to  { transform:translateY(0); }
}
@media(prefers-reduced-motion:reduce){
  .ai-companion.whippy-follow{ animation-duration:.5s; }
}



/* CHECKOUT -- inside the site shell, using the site's own panel/typography.
   It used to be a standalone page with its own bespoke layout and only
   /site.css linked, so it rendered with no design system at all. Now it is
   just another page: .frc-main, .frc-btn, the same header and footer. */
.co-panel{background:var(--panel,#fff);border:1px solid var(--line,#e3e3e0);border-radius:12px;
  padding:22px 24px;max-width:560px;margin:18px 0 40px}
.co-load{color:#8a8a86;font-size:14px;padding:6px 0}
.co-item{display:flex;justify-content:space-between;gap:16px;font-size:14.5px;padding:8px 0;
  border-bottom:1px solid var(--line,#eee)}
.co-item strong{white-space:nowrap}
.co-adj{color:#c0392b;font-size:12.5px;padding:6px 0}
.co-line{display:flex;justify-content:space-between;padding:7px 0;font-size:14.5px}
.co-line.total{border-top:2px solid var(--line,#e3e3e0);margin-top:8px;padding-top:13px;
  font-size:18px;font-weight:700}
.co-err{color:#c0392b;font-weight:600;font-size:13.5px;min-height:18px;padding:6px 0}
.co-pay{display:none;margin-top:16px}
.co-pay .frc-btn{width:100%;padding:15px;font-size:16px}
.co-note{font-size:12px;color:#8a8a86;margin:12px 0 0;text-align:center;line-height:1.55}
.co-closed{background:#fff8e6;border:1px solid #f0d48a;border-radius:10px;padding:15px 18px;
  font-size:14.5px;max-width:560px;margin:16px 0}


/* THE SITE LOADS GEIST AND THEN NEVER USES IT.
   /assets/fonts.css declares 11 Geist / Geist Mono faces, the body carries the
   generated .__variable_geist_* classes, and the build stylesheet still ends
   with `body{...font-family:Arial,Helvetica,sans-serif}` -- so every page has
   been rendering in Arial while the real typeface sat downloaded and unused.
   site.css loads last, so this is where it gets put right. */
body{font-family:Geist,"Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif}
code,kbd,pre,samp,.frc-sku,.popular-card__sku{font-family:"Geist Mono",Consolas,ui-monospace,monospace}

/* Checkout pay button -- the logo blue (--cyan #08aeed), not the lime.
   Lime is the "shop parts" colour; on the one button that takes money it read
   as a warning. Blue ties it to the brand mark and to Stripe's own surface. */
.co-paybtn{
  display:flex;align-items:center;justify-content:center;gap:9px;
  background:var(--cyan,#08aeed);color:#fff;border:1px solid var(--cyan,#08aeed);
  border-radius:10px;font-weight:650;letter-spacing:.2px;
  box-shadow:0 2px 10px rgba(8,174,237,.28);
  transition:background .15s ease,transform .06s ease}
.co-paybtn:hover{background:var(--cyan-dark,#008dca);border-color:var(--cyan-dark,#008dca)}
.co-paybtn:active{transform:translateY(1px)}
.co-paybtn:disabled{background:#9fb3bd;border-color:#9fb3bd;box-shadow:none;cursor:default}
.co-stripe{font-weight:700;letter-spacing:-.2px;font-size:1.06em}

/* Accepted methods: the real marks, small and quiet. The first attempt spelled
   them out as bordered word-chips, which looked like a tag cloud and shouted
   louder than the button above it. */
.co-trust{margin:14px 0 0;text-align:center}
.co-methods{display:flex;flex-wrap:wrap;gap:7px;justify-content:center;
  margin:0 0 11px;padding:0;list-style:none}
.co-methods li{line-height:0}
.co-methods svg{height:23px;width:auto;display:block;border-radius:3px}
.co-note{font-size:11.5px;color:#8a8a86;margin:0;line-height:1.6}


/* Whippy's search box. Sits under him wherever he is -- in the hero at the top
   of the page, or pinned beside the grid while he follows you down. */
.frc-whippy{position:relative;cursor:pointer}
.whippy-search{position:absolute;top:100%;right:0;margin-top:8px;display:flex;align-items:center;gap:0;
  background:var(--panel,#fff);border:1px solid var(--line,#e3e3e0);border-radius:10px;
  box-shadow:0 8px 24px rgba(0,0,0,.14);padding:4px;z-index:60;pointer-events:auto}
.whippy-search input{border:0;outline:0;padding:9px 11px;font-size:14px;width:250px;
  background:transparent;color:inherit;font-family:inherit}
.whippy-search button[type=submit]{border:0;border-radius:7px;padding:9px 14px;cursor:pointer;
  background:var(--cyan,#08aeed);color:#fff;font-weight:650;font-size:13.5px;font-family:inherit}
.whippy-search button[type=submit]:hover{background:var(--cyan-dark,#008dca)}
.whippy-search__x{border:0;background:transparent;cursor:pointer;font-size:19px;line-height:1;
  padding:0 8px;color:#9a9aa2}
.whippy-search__x:hover{color:var(--ink,#111417)}
@media(max-width:560px){.whippy-search input{width:44vw}}


/* "Only 2 in stock" on a cart line. The buyer asked for more than that, so it
   has to register at a glance -- grey 12.5px did not. */
.frc-stockcap{display:inline-block;margin-top:5px;font-size:13px;font-weight:800;
  color:#a05a00;background:#fff4de;border:1px solid #f0d48a;border-radius:6px;padding:3px 9px;
  letter-spacing:.2px}


/* The reward card now has one action, not three. Copy went because there is
   nowhere to paste the code -- it is applied automatically at checkout -- and
   Share went with it. Centre what is left rather than leaving it hanging in a
   two-column row. */
.frc-egg__row{justify-content:center}
.frc-egg__row .frc-egg__go{min-width:200px;text-align:center}


/* Cart's Check out button in the logo blue, matching the pay button it leads
   to. Lime is the browse colour; the two buttons that move money are blue, so
   the path through is one colour from cart to paid. */
#checkout{background:var(--cyan,#08aeed);color:#fff;border:1px solid var(--cyan,#08aeed);
  border-radius:10px;font-weight:650;box-shadow:0 2px 10px rgba(8,174,237,.28);
  transition:background .15s ease,transform .06s ease}
#checkout:hover:not(:disabled){background:var(--cyan-dark,#008dca);border-color:var(--cyan-dark,#008dca)}
#checkout:active:not(:disabled){transform:translateY(1px)}
#checkout:disabled{background:#9fb3bd;border-color:#9fb3bd;box-shadow:none;color:#fff;cursor:default}


/* "While you wait" on the tracking page. Deliberately quiet and BELOW the
   order status -- the customer came for their order, not for another sale.
   Small cards, one row on desktop, real prices, no shouting. */
.waitshop{margin:40px 0 24px;max-width:1180px}
.waitshop h2{font-size:20px;margin:0 0 4px}
.waitshop__sub{color:#8a8a86;font-size:13.5px;margin:0 0 16px}
.waitshop__grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.waitshop__card{display:flex;flex-direction:column;gap:5px;padding:12px;text-decoration:none;
  color:inherit;background:var(--panel,#fff);border:1px solid var(--line,#e3e3e0);
  border-radius:10px;transition:transform .12s ease,box-shadow .12s ease}
.waitshop__card:hover{transform:translateY(-2px);box-shadow:0 6px 16px rgba(0,0,0,.09)}
.waitshop__card img{width:100%;aspect-ratio:1/1;object-fit:contain;background:#fff}
.waitshop__grp{font-size:10.5px;letter-spacing:.6px;text-transform:uppercase;color:#8a8a86;font-weight:700}
.waitshop__card h3{font-size:13px;line-height:1.35;margin:0;font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.waitshop__card strong{font-size:15px;margin-top:auto}


/* Trust strip: the returns window and the payment methods, in plain text.
   Under the buy box on part pages and as a second footer line on the static
   shells; the shipping bar already carries the free-shipping claim. */
.trust-strip{font-size:12.5px;line-height:1.55;color:var(--muted,#707a83);margin:10px 0 0;max-width:560px}
.footer-copy .trust-strip{margin:0;max-width:none;font-size:12px}
.co-accept{font-size:12px;color:#8a8a86;margin:10px 0 0;line-height:1.55;text-align:center}

/* /cart/?add=<SKU>: the row just added gets a short highlight; a part that
   could not be added gets one line above the cart. */
.frc-notice{background:#fff8e1;border:1px solid #f1d27a;border-radius:10px;padding:10px 14px;margin:0 0 14px;font-size:14px}
.frc-cart-row--new{animation:frc-row-new 2.4s ease-out 1}
@keyframes frc-row-new{0%,55%{background:#eefbe6}100%{background:transparent}}

/* Landing-page extras: the "Shares parts with" strip on vehicle pages, the
   "All N ... ->" handoff to a sub-page, the quoted fitment note and fits
   chips under an upgrade card on /replaces, and the tooth count on /gears. */
.frc-shares{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:12px 0 0;font-size:14px}
.frc-shares__k{font-weight:700;color:var(--muted,#707a83)}
.frc-shares .frc-chips{margin:0}
.frc-sec-more{margin:12px 0 0}
.frc-grid--loose{align-items:start}
.frc-upgrade{display:flex;flex-direction:column;gap:6px;min-width:0}
.frc-upgrade .frc-chips{margin:0}
.frc-quote{font-size:13px;line-height:1.5;color:#2a3138;margin:2px 0 0;font-style:italic}
.frc-quote .frc-muted{font-style:normal;font-size:12px}
.frc-tooth{display:inline-block;min-width:34px;font-weight:700;color:var(--muted,#707a83);margin-right:4px}
/* Footer contact line (site.js adds it): business phone + postal address, the
   identity details Google's Misrepresentation checks look for. */
.footer-copy .frc-contact{display:block;margin-top:4px;font-size:12px;opacity:.85}
.footer-copy .frc-contact a{text-decoration:underline}
.store-proof .frc-proof-link{text-decoration:underline;font-weight:600}

/* Whippy toned down (owner 2026-09-27): home page only. The part, search, cart
   and track pages each carry their own .frc-whippy block; hide it everywhere. */
.frc-whippy{display:none !important}

/* WHO YOU ARE BUYING FROM (site.js mountTrust) -- home page, under the search card. */
.trust{max-width:1180px;margin:28px auto 8px;padding:0 20px}
.trust-head h2{margin:4px 0 14px}
.trust-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:22px;align-items:start}
.trust-facts,.trust-mapbox{background:var(--panel,#fff);border:1px solid var(--line,#e3e3e0);border-radius:12px;padding:18px 20px;margin:0}
.trust-facts ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.trust-facts li{display:flex;flex-direction:column;gap:2px;padding-left:26px;position:relative}
.trust-facts li::before{content:"";position:absolute;left:0;top:3px;width:16px;height:16px;border-radius:50%;background:#c9f338;box-shadow:inset 0 0 0 4px #111417}
.trust-facts li b{font-size:15px}
.trust-facts li span{font-size:13px;color:#6d6d69}
.trust-facts li a{text-decoration:underline}
.trust-contact{margin-top:16px;padding-top:14px;border-top:1px solid var(--line,#e3e3e0);display:flex;flex-wrap:wrap;gap:6px 16px;align-items:baseline;font-size:14px}
.trust-contact b{width:100%}
.trust-contact a{font-weight:600;text-decoration:underline}
.trust-contact span{width:100%;font-size:13px;color:#6d6d69}
.trust-mapbox figcaption{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.trust-mapbox figcaption b{font-size:15px}
.trust-mapbox figcaption span{font-size:13px;color:#6d6d69}
.trust-map svg{display:block;width:100%;height:auto}
.trust-map path{stroke:#fff;stroke-width:.8}
.trust-origin{fill:#111417;stroke:#fff;stroke-width:2}
.trust-origin-label{font-size:13px;font-weight:700;fill:#111417;paint-order:stroke;stroke:#fff;stroke-width:3px}
.trust-legend{display:flex;flex-wrap:wrap;gap:6px 16px;margin-top:8px;font-size:13px}
.trust-legend span{display:inline-flex;align-items:center;gap:6px}
.trust-legend i{width:14px;height:14px;border-radius:3px;display:inline-block}
@media(max-width:820px){.trust-grid{grid-template-columns:1fr}}
.trust-head .catalog-kicker{color:#008dca;font-size:10px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase;margin:0 0 12px;line-height:15px}
/* Quiet Whippy (owner 2026-09-27): at the top he says NOTHING -- no pill, no bubble.
   Scrolling down brings him along with his search box (site.js driftWhippy). */
.whippy-greeting,.bot-bubble{display:none !important}
/* "About this part" sections (FRC.descHtml / worker descHtml) */
.frc-desc h3{font-size:15px;font-weight:700;margin:16px 0 6px}
.frc-desc p{margin:0 0 8px;line-height:1.55}
.frc-desc ul{margin:0 0 8px;padding-left:20px;list-style:disc}
.frc-desc li{margin:3px 0;line-height:1.5}
/* both trust cards the same height (owner 2026-09-27); contact block sits at the bottom */
.trust-grid{align-items:stretch}
.trust-facts{display:flex;flex-direction:column}
.trust-contact{margin-top:auto}
.trust-facts ul{margin-bottom:16px}

/* SITE BACKGROUND (Scott 2026-10-04, "White panel between two RC tracks"): dirt track left, carpet
   track right, the page content sits on the white panel between them. Stays put while scrolling. */
html body{background:#fff url(/frc-bg-white4.jpg) center top / cover no-repeat fixed}
main section, main > *, .finder-hero, .store-proof, .frc-main{background:transparent !important}

/* Part page: photo thumbnails + delivery-time map (2026-10-07) */
.frc-gallery{min-width:0}
.frc-thumbs{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.frc-thumb{width:72px;height:72px;padding:3px;background:#fff;border:1px solid var(--line);border-radius:10px;cursor:pointer;overflow:hidden}
.frc-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.frc-thumb:hover{border-color:var(--cyan-dark)}
.frc-thumb.is-on{border:2px solid var(--cyan-dark);padding:2px}
.frc-thumb:focus-visible{outline:2px solid var(--cyan-dark);outline-offset:2px}
.frc-ship{border:1px solid var(--line);border-radius:14px;background:#fff;padding:12px 14px 10px;max-width:520px}
.frc-ship__head{font-size:13.5px;color:var(--ink,#1d2329);margin-bottom:6px}
.frc-ship__head b{color:var(--cyan-dark)}
.frc-ship img{width:100%;height:auto;display:block}
.frc-ship__key{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;margin-top:6px}
.frc-ship__key span{display:inline-flex;align-items:center;gap:6px}
.frc-ship__key i{width:12px;height:12px;border-radius:3px;display:inline-block;border:1px solid rgba(0,0,0,.12)}
.frc-ship__note{font-size:11.5px;color:var(--muted,#707a83);margin:4px 0 0}

/* Homepage search, cleaned up (Scott 2026-10-08): just the search box -- filters, fit checkbox,
   popular-search row and helper text hidden */
.parts-finder .filter-heading,.parts-finder .filter-grid,.parts-finder .fitment-check,
.parts-finder .search-examples,.parts-finder .search-response{display:none !important}

/* "Who you are buying from" goes horizontal, map removed (Scott 2026-10-09) */
#frc-trust .trust-grid{grid-template-columns:1fr}
#frc-trust .trust-facts ul{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:16px 20px;flex-direction:row}
#frc-trust .trust-contact{flex-wrap:wrap;gap:6px 20px}
#frc-trust .trust-contact b,#frc-trust .trust-contact span{width:auto}

/* ---- Send It RC theme (store_build.py) ---- */

:root{--cyan:#ff7a00;--cyan-dark:#d45f00;--lime:#ffb000;--ink:#17120d;--line:#3a2f24;--soft:#f3ece2;--panel:#fffaf2;--muted:#6b5b4a;--green:#4c9a2a}
html body{background:#16110c url(/sb/mud.jpg) center top / cover no-repeat fixed !important;color:var(--ink)}
.site-shell{max-width:1280px;margin:0 auto;background:#fffaf2 !important;box-shadow:0 0 0 6px #0c0907,0 0 40px rgba(0,0,0,.6)}
.shipping-bar{background:#0c0907 !important;color:#f3ece2;border-bottom:3px solid #ff7a00}
.shipping-bar span,.shipping-bar strong{color:#ffb000 !important}
.site-header{background:repeating-linear-gradient(-45deg,#1b140e 0 14px,#211810 14px 28px) !important;border-bottom:6px solid #ff7a00}
.site-header nav a,.header-actions a,.header-actions button{color:#f3ece2 !important;font-family:Impact,"Arial Narrow",sans-serif;letter-spacing:.06em;text-transform:uppercase;font-size:17px}
.site-header nav a:hover{color:#ffb000 !important}
.brand-plate img{max-height:78px;width:auto}
.antenna-signal{display:none}
h1,h2,.frc-bigprice,.catalog-kicker{font-family:Impact,"Arial Narrow",sans-serif !important;letter-spacing:.02em}
h1,h2{text-transform:uppercase}
.frc-btn,.frc-addcart{border-radius:4px !important}
.site-footer{background:#0c0907 !important;color:#d8cbb8}
.site-footer strong{color:#ff7a00}
.frc-card,.frc-photo,.popular-card{border-color:#d9c9b2 !important}

