/* PBD Tune Finder — styles.  v8
   Served from cc.palmbeachdyno.com, same arrangement as pbd-hero.js,
   pbd-builds.js and pbd-standalone.css.
   Everything is scoped under .pbdtf; nothing here can reach the rest of the store.
   Inert on any page without a .pbdtf mount. */
:root{--pbd-tunefinder-css:"v8"}
.pbdtf *{box-sizing:border-box}
.pbdtf h1,.pbdtf h2,.pbdtf h3,.pbdtf h4,.pbdtf h5,.pbdtf h6{color:inherit}
.pbdtf{background:#0b0c0f;color:#fff;font-family:inherit;line-height:1.55;padding:44px 0;border-top:3px solid #b61a1f}
.pbdtf a{text-decoration:none}
.pbdtf .tf-wrap{max-width:1240px;margin:0 auto;padding:0 22px}
.pbdtf .tf-eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.17em;text-transform:uppercase;color:#ff5a5f;margin:0 0 8px}
.pbdtf .tf-head h2{font-size:clamp(24px,3vw,34px);line-height:1.08;letter-spacing:-.03em;font-weight:900;margin:0 0 8px;color:#fff}
.pbdtf .tf-head p{font-size:15.5px;color:#a8aeb6;max-width:64ch;margin:0 0 22px}

/* ---- the picker row ---- */
.pbdtf .tf-picker{display:flex;gap:12px;flex-wrap:wrap;align-items:flex-end}
.pbdtf .tf-field{flex:1 1 200px;min-width:0}
.pbdtf .tf-field label{display:block;font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8b919a;margin:0 0 6px}
.pbdtf .tf-field select{width:100%;height:50px;padding:0 14px;font-size:15px;font-weight:600;font-family:inherit;color:#fff;background:#13161b;border:1px solid #2b3038;border-radius:6px;appearance:auto;cursor:pointer}
.pbdtf .tf-field select:focus{outline:2px solid #b61a1f;outline-offset:1px}
.pbdtf .tf-field select:disabled{color:#5c636c;background:#101318;cursor:not-allowed}
.pbdtf .tf-reset{flex:0 0 auto;height:50px;padding:0 20px;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#a8aeb6;background:none;border:1px solid #2b3038;border-radius:6px;cursor:pointer;font-family:inherit}
.pbdtf .tf-reset:hover{color:#fff;border-color:#4a515a}

/* ---- results ---- */
.pbdtf .tf-out{margin-top:26px}
.pbdtf .tf-status{font-size:14.5px;color:#8b919a;padding:18px 0}
.pbdtf .tf-result-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-bottom:14px;border-bottom:1px solid #23272e;margin-bottom:4px}
.pbdtf .tf-result-head h3{font-size:21px;font-weight:900;letter-spacing:-.02em;margin:0;color:#fff}
.pbdtf .tf-result-head a{font-size:12.5px;font-weight:700;color:#8b919a;border-bottom:1px solid #3a4048}
.pbdtf .tf-result-head a:hover{color:#fff;border-color:#fff}

.pbdtf .tf-group{padding:24px 0;border-bottom:1px solid #1c2027}
.pbdtf .tf-group:last-child{border-bottom:0}
.pbdtf .tf-group-head{margin-bottom:14px}
.pbdtf .tf-group-head b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:#ff5a5f;margin-bottom:4px}
.pbdtf .tf-group-head span{font-size:14.5px;color:#a8aeb6}
.pbdtf .tf-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px}
.pbdtf .tf-card{display:flex;flex-direction:column;justify-content:space-between;gap:12px;background:#13161b;border:1px solid #23272e;border-radius:9px;padding:18px;transition:border-color .15s,background .15s}
.pbdtf .tf-card:hover{border-color:#b61a1f;background:#171b21}
.pbdtf .tf-card .tf-name{font-size:14.5px;font-weight:700;color:#fff;line-height:1.35}
.pbdtf .tf-card .tf-foot{display:flex;align-items:center;justify-content:space-between;gap:10px}
.pbdtf .tf-card .tf-price{font-size:17px;font-weight:900;letter-spacing:-.02em;color:#fff;white-space:nowrap}
.pbdtf .tf-card .tf-price i{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#8b919a}
.pbdtf .tf-card .tf-go{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#ff5a5f;white-space:nowrap}

/* ---- fallback / empty ---- */
.pbdtf .tf-fallback{background:#13161b;border:1px solid #23272e;border-radius:9px;padding:24px}
.pbdtf .tf-fallback p{margin:0 0 14px;font-size:15px;color:#c3c8cf}
.pbdtf .tf-btn{display:inline-block;padding:14px 24px;border-radius:5px;font-size:12.5px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;background:#b61a1f;color:#fff;border:0;cursor:pointer;font-family:inherit}
.pbdtf .tf-btn:hover{background:#d02026}
.pbdtf .tf-help{margin-top:22px;padding-top:20px;border-top:1px solid #23272e;font-size:14.5px;color:#8b919a}
.pbdtf .tf-help b{color:#fff;font-weight:800}
.pbdtf .tf-help a{color:#fff;border-bottom:1px solid #4a515a}
.pbdtf .tf-help a:hover{border-color:#fff}

/* ---- light variant, for use on a white page ---- */
.pbdtf.tf-light{background:#f4f5f7;color:#15171b;border-top-color:#b61a1f}
.pbdtf.tf-light .tf-head h2{color:#101318}
.pbdtf.tf-light .tf-head p,.pbdtf.tf-light .tf-status,.pbdtf.tf-light .tf-help{color:#5b626c}
.pbdtf.tf-light .tf-field label{color:#6f767f}
.pbdtf.tf-light .tf-field select{color:#15171b;background:#fff;border-color:#cfd4da}
.pbdtf.tf-light .tf-field select:disabled{color:#a2a8b0;background:#eceef1}
.pbdtf.tf-light .tf-reset{color:#5b626c;border-color:#cfd4da}
.pbdtf.tf-light .tf-reset:hover{color:#101318;border-color:#8d939c}
.pbdtf.tf-light .tf-result-head{border-bottom-color:#dfe2e7}
.pbdtf.tf-light .tf-result-head h3{color:#101318}
.pbdtf.tf-light .tf-result-head a{color:#5b626c;border-bottom-color:#cfd4da}
.pbdtf.tf-light .tf-result-head a:hover{color:#101318;border-color:#101318}
.pbdtf.tf-light .tf-group{border-bottom-color:#e4e6ea}
.pbdtf.tf-light .tf-group-head b{color:#b61a1f}
.pbdtf.tf-light .tf-group-head span{color:#5b626c}
.pbdtf.tf-light .tf-card{background:#fff;border-color:#dfe2e7}
.pbdtf.tf-light .tf-card:hover{background:#fff;border-color:#b61a1f}
.pbdtf.tf-light .tf-card .tf-name,.pbdtf.tf-light .tf-card .tf-price{color:#101318}
.pbdtf.tf-light .tf-card .tf-price i{color:#8d939c}
.pbdtf.tf-light .tf-card .tf-go{color:#b61a1f}
.pbdtf.tf-light .tf-fallback{background:#fff;border-color:#dfe2e7}
.pbdtf.tf-light .tf-fallback p{color:#3d434c}
.pbdtf.tf-light .tf-help{border-top-color:#dfe2e7}
.pbdtf.tf-light .tf-help b,.pbdtf.tf-light .tf-help a{color:#101318}

@media (max-width:760px){
  .pbdtf{padding:34px 0}
  .pbdtf .tf-field{flex:1 1 100%}
  .pbdtf .tf-reset{width:100%}
  .pbdtf .tf-cards{grid-template-columns:1fr}
}

/* ---- v2: package cards say what is inside them ---- */
.pbdtf .tf-card .tf-inc:empty{display:none}
.pbdtf .tf-card .tf-inc{font-size:12.5px;line-height:1.45;color:#8b919a;border-top:1px solid #23272e;padding-top:10px;margin-top:-2px}
.pbdtf.tf-light .tf-card .tf-inc{color:#6f767f;border-top-color:#e4e6ea}

/* ---- v2: the device strip under the packages ---- */
.pbdtf .tf-devices{margin-top:14px;padding:14px 16px;background:#101318;border:1px solid #23272e;border-left:3px solid #b61a1f;border-radius:0 7px 7px 0;font-size:13.5px;color:#a8aeb6;display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px}
.pbdtf .tf-devices b{color:#fff;font-weight:800;flex:0 0 100%}
.pbdtf .tf-devices span{white-space:nowrap}
.pbdtf .tf-devices span i{font-style:normal;font-weight:800;color:#fff}
.pbdtf.tf-light .tf-devices{background:#fff;border-color:#dfe2e7;border-left-color:#b61a1f;color:#5b626c}
.pbdtf.tf-light .tf-devices b,.pbdtf.tf-light .tf-devices span i{color:#101318}

/* ---- v2: de-emphasised "on its own" groups ---- */
.pbdtf .tf-group-mini .tf-group-head b{color:#8b919a}
.pbdtf.tf-light .tf-group-mini .tf-group-head b{color:#6f767f}
.pbdtf .tf-rows{display:flex;flex-direction:column;gap:1px;background:#23272e;border:1px solid #23272e;border-radius:8px;overflow:hidden}
.pbdtf .tf-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 16px;background:#101318;transition:background .15s}
.pbdtf .tf-row:hover{background:#171b21}
.pbdtf .tf-row .tf-name{font-size:14px;font-weight:600;color:#c3c8cf}
.pbdtf .tf-row:hover .tf-name{color:#fff}
.pbdtf .tf-row .tf-foot{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.pbdtf .tf-row .tf-price{font-size:14.5px;font-weight:800;color:#fff;white-space:nowrap}
.pbdtf .tf-row .tf-price i{display:inline;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8b919a;margin-right:4px}
.pbdtf .tf-row .tf-go{font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#8b919a;white-space:nowrap}
.pbdtf .tf-row:hover .tf-go{color:#ff5a5f}
.pbdtf.tf-light .tf-rows{background:#dfe2e7;border-color:#dfe2e7}
.pbdtf.tf-light .tf-row{background:#fff}
.pbdtf.tf-light .tf-row:hover{background:#f7f8f9}
.pbdtf.tf-light .tf-row .tf-name{color:#3d434c}
.pbdtf.tf-light .tf-row:hover .tf-name{color:#101318}
.pbdtf.tf-light .tf-row .tf-price{color:#101318}
.pbdtf.tf-light .tf-row .tf-go{color:#8d939c}
.pbdtf.tf-light .tf-row:hover .tf-go{color:#b61a1f}

/* ---- v2: click feedback. Product pages are slow; a dead card gets clicked twice ---- */
.pbdtf .tf-spin{display:inline-block;width:11px;height:11px;margin-right:7px;vertical-align:-1px;border:2px solid currentColor;border-right-color:transparent;border-radius:50%;animation:tf-spin .6s linear infinite}
@keyframes tf-spin{to{transform:rotate(360deg)}}
.pbdtf .tf-card.is-opening,.pbdtf .tf-row.is-opening{border-color:#b61a1f}
.pbdtf .tf-card.is-opening .tf-go,.pbdtf .tf-row.is-opening .tf-go{color:#ff5a5f}
.pbdtf .tf-status .tf-spin{color:#ff5a5f}
@media (prefers-reduced-motion:reduce){.pbdtf .tf-spin{animation-duration:2s}}

/* Deep-link target: the store header is sticky, so leave it room. */
.pbdtf{scroll-margin-top:96px}

/* ---- v3: the collapsed group is a real control, not a styled heading ---- */
.pbdtf .tf-fold{border:1px solid #2b3038;border-radius:9px;background:#101318;overflow:hidden}
.pbdtf .tf-fold summary{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:16px 18px;margin:0;cursor:pointer;list-style:none;transition:background .15s}
.pbdtf .tf-fold summary::-webkit-details-marker{display:none}
.pbdtf .tf-fold summary::marker{content:""}
.pbdtf .tf-fold summary:hover{background:#151920}
.pbdtf .tf-fold summary:focus-visible{outline:2px solid #b61a1f;outline-offset:-2px}
.pbdtf .tf-fold-txt{min-width:0}
.pbdtf .tf-fold-txt b{display:block;font-size:11.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:#ff5a5f;margin-bottom:4px}
.pbdtf .tf-fold-txt span{display:block;font-size:14.5px;color:#a8aeb6}
.pbdtf .tf-fold-btn{flex:0 0 auto;display:inline-flex;align-items:center;gap:10px;
  padding:11px 17px;border:1px solid #b61a1f;border-radius:5px;background:rgba(182,26,31,.14);
  color:#fff;font-size:12px;font-weight:800;letter-spacing:.07em;text-transform:uppercase;
  transition:background .15s,border-color .15s}
.pbdtf .tf-fold-btn i{font-style:normal}
.pbdtf .tf-fold summary:hover .tf-fold-btn{background:#b61a1f;border-color:#b61a1f}
.pbdtf .tf-fold-hide{display:none}
.pbdtf .tf-fold[open] .tf-fold-show{display:none}
.pbdtf .tf-fold[open] .tf-fold-hide{display:inline}
.pbdtf .tf-chev{width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg);margin-top:-3px;transition:transform .18s}
.pbdtf .tf-fold[open] .tf-chev{transform:rotate(-135deg);margin-top:2px}
.pbdtf .tf-fold-body{padding:2px 18px 20px}
.pbdtf.tf-light .tf-fold{border-color:#dfe2e7;background:#fff}
.pbdtf.tf-light .tf-fold summary:hover{background:#f7f8f9}
.pbdtf.tf-light .tf-fold-txt b{color:#b61a1f}
.pbdtf.tf-light .tf-fold-txt span{color:#5b626c}
.pbdtf.tf-light .tf-fold-btn{color:#b61a1f;background:rgba(182,26,31,.07)}
.pbdtf.tf-light .tf-fold summary:hover .tf-fold-btn{background:#b61a1f;color:#fff}
@media (max-width:700px){
  .pbdtf .tf-fold summary{flex-direction:column;align-items:stretch;gap:14px}
  .pbdtf .tf-fold-btn{justify-content:center}
}
@media (prefers-reduced-motion:reduce){.pbdtf .tf-chev{transition:none}}

/* ---- v4: Reset is locked while a lookup runs, so it cannot be misread as "go" ---- */
.pbdtf .tf-reset[disabled]{opacity:.4;cursor:not-allowed;color:#5c636c;border-color:#23272e}
.pbdtf .tf-reset[disabled]:hover{color:#5c636c;border-color:#23272e}
.pbdtf.tf-light .tf-reset[disabled]{color:#a2a8b0;border-color:#e4e6ea}
.pbdtf.tf-light .tf-reset[disabled]:hover{color:#a2a8b0;border-color:#e4e6ea}

/* ---- "your turn" pulse on the Year field (v5) ----
   Ken, 2 Sept: arriving from the homepage vehicle grid, "I didn't even notice that the
   form had changed". The picker now lands preselected, so the only thing left to do is
   pick a year, and nothing on the page says so.

   Three pulses, then it stops. An indefinite blink is an accessibility problem and it
   reads as an error state rather than an invitation. The animation is on box-shadow and
   border, never on layout, so nothing moves.

   prefers-reduced-motion gets a plain steady ring instead: same message, no flashing. */
@keyframes pbdtf-pulse{
  0%{box-shadow:0 0 0 0 rgba(182,26,31,.55);border-color:#b61a1f}
  70%{box-shadow:0 0 0 9px rgba(182,26,31,0);border-color:#b61a1f}
  100%{box-shadow:0 0 0 0 rgba(182,26,31,0)}
}
.pbdtf .tf-field.tf-nudge select{border-color:#b61a1f;animation:pbdtf-pulse 1.15s ease-out 3}
.pbdtf .tf-field.tf-nudge label{color:#ff5a5f}
.pbdtf.tf-light .tf-field.tf-nudge label{color:#b61a1f}
@media (prefers-reduced-motion:reduce){
  .pbdtf .tf-field.tf-nudge select{animation:none;box-shadow:0 0 0 3px rgba(182,26,31,.28)}
}

/* ---- the loading state (v6) ----
   Ken, 2 Sept: "MUCH MUCH larger and obvious". The old one was an 11px spinner next to a
   line of grey text. On a lookup that takes a beat that reads as nothing happening, which
   is how people ended up clicking Reset thinking it was submit.

   This occupies roughly the height the results will occupy, so the page does not jump when
   they land. The ring is 84px, the headline is real headline size, and a determinate
   looking bar sweeps underneath: motion at three scales is what makes it impossible to
   miss, not one bigger spinner.

   Under prefers-reduced-motion the ring and bar hold still and the text carries it. */
.pbdtf .tf-loading{padding:52px 16px 58px;text-align:center}
.pbdtf .tf-loading-ring{width:84px;height:84px;margin:0 auto 24px;border-radius:50%;
  border:6px solid rgba(255,90,95,.18);border-top-color:#ff5a5f;animation:tf-spin .85s linear infinite}
.pbdtf .tf-loading-t{margin:0 0 6px;font-size:clamp(21px,2.6vw,27px);font-weight:900;letter-spacing:-.02em;color:#fff}
.pbdtf .tf-loading-s{margin:0 0 26px;font-size:15.5px;color:#a8aeb6}
.pbdtf .tf-loading-bar{position:relative;overflow:hidden;height:5px;width:min(440px,84%);margin:0 auto;
  border-radius:99px;background:rgba(255,255,255,.10)}
.pbdtf .tf-loading-bar i{position:absolute;top:0;bottom:0;left:0;width:40%;border-radius:99px;
  background:linear-gradient(90deg,rgba(255,90,95,0),#ff5a5f,rgba(255,90,95,0));animation:tf-sweep 1.15s ease-in-out infinite}
@keyframes tf-sweep{0%{left:-40%}100%{left:100%}}

.pbdtf.tf-light .tf-loading-ring{border-color:rgba(182,26,31,.16);border-top-color:#b61a1f}
.pbdtf.tf-light .tf-loading-t{color:#101318}
.pbdtf.tf-light .tf-loading-s{color:#5b626c}
.pbdtf.tf-light .tf-loading-bar{background:rgba(16,19,24,.09)}
.pbdtf.tf-light .tf-loading-bar i{background:linear-gradient(90deg,rgba(182,26,31,0),#b61a1f,rgba(182,26,31,0))}

@media (max-width:560px){
  .pbdtf .tf-loading{padding:40px 12px 44px}
  .pbdtf .tf-loading-ring{width:66px;height:66px;border-width:5px;margin-bottom:20px}
}
@media (prefers-reduced-motion:reduce){
  .pbdtf .tf-loading-ring{animation:none;border-top-color:#ff5a5f}
  .pbdtf.tf-light .tf-loading-ring{border-top-color:#b61a1f}
  .pbdtf .tf-loading-bar i{animation:none;left:0;width:100%}
}

/* ============================================================================
   v7 - readability pass on the results.
   Ken, 2 Sept: "laid out well but still a bit hard to read... maybe larger bolder
   titles for each section and some shading?"

   Two problems, both structural rather than cosmetic:

   1. THE SECTION TITLES WERE NOT TITLES. 11.5px uppercase at the same visual weight
      as a label. Nothing said "this is a new section", so the page read as one long
      list and the reader had to work out the grouping from the copy.

   2. EVERYTHING SAT ON ONE FLAT SURFACE. Page, group and card were all near enough
      the same value, so the only separation was a hairline rule. White cards on a
      white page have nothing to pop against.

   The fix is a contrast ladder rather than more borders. Each group is now a panel:
   a WHITE header strip carrying a real heading, over a SHADED body holding the cards.
   That gives three distinct surfaces (header, body, card) so the eye can find the
   edges of a section without reading a word.

   The first group also gets a red top rule, because "start here" should look like
   the start rather than merely say so.
   ========================================================================= */

/* -- the panel -- */
.pbdtf .tf-group{padding:0;margin:0 0 16px;border:1px solid #23272e;border-bottom:1px solid #23272e;border-radius:12px;overflow:hidden;background:#0e1116}
.pbdtf .tf-group:last-child{border-bottom:1px solid #23272e}
.pbdtf .tf-group:first-of-type{border-top:3px solid #b61a1f}

/* -- header strip: the title finally looks like one -- */
.pbdtf .tf-group-head{margin:0;padding:20px 22px 16px;background:#13161b;border-bottom:1px solid #23272e}
.pbdtf .tf-group-head b{display:block;font-size:clamp(17px,2vw,21px);font-weight:900;letter-spacing:-.02em;text-transform:none;color:#fff;margin:0 0 6px;line-height:1.2}
.pbdtf .tf-group-head span{display:block;font-size:14.5px;line-height:1.55;color:#a8aeb6;max-width:78ch}

/* -- body -- */
.pbdtf .tf-group > .tf-cards,.pbdtf .tf-group > .tf-rows,.pbdtf .tf-group > .tf-devices{margin:0}
.pbdtf .tf-cards{padding:18px 22px 22px}
.pbdtf .tf-group > .tf-devices{margin:0 22px 22px}
.pbdtf .tf-rows{border-radius:0;border:0;border-top:0}
.pbdtf .tf-row{padding:15px 22px}

/* The quieter groups keep the same structure so the page has one rhythm, but their
   heading steps down rather than disappearing. */
.pbdtf .tf-group-mini{border-top-color:#23272e}
.pbdtf .tf-group-mini .tf-group-head b{font-size:clamp(15px,1.6vw,17px);color:#c3c8cf}

/* -- light theme -- */
/* v8: Ken wanted the shaded body a step darker still. #eceef1 was close enough to the
   page that the panel edge did most of the work; #e3e7ec lets the white header and the
   white cards do it instead, which is the point of the ladder. The border darkens with
   it, otherwise a darker body swallows its own outline. */
.pbdtf.tf-light .tf-group{background:#e3e7ec;border-color:#d3d8df}
.pbdtf.tf-light .tf-group:last-child{border-bottom-color:#d3d8df}
.pbdtf.tf-light .tf-group:first-of-type{border-top:3px solid #b61a1f}
.pbdtf.tf-light .tf-group-head{background:#fff;border-bottom-color:#d3d8df}
.pbdtf.tf-light .tf-group-head b{color:#101318}
.pbdtf.tf-light .tf-group-head span{color:#5b626c}
.pbdtf.tf-light .tf-group-mini .tf-group-head b{color:#3d434c}
.pbdtf.tf-light .tf-rows{background:#cdd3da}

/* -- cards get a little more room now they sit on a shaded body -- */
.pbdtf .tf-card{padding:20px}
.pbdtf .tf-card .tf-name{font-size:15.5px}

/* -- the result heading above it all, so the vehicle reads as the page title -- */
.pbdtf .tf-result-head{padding-bottom:16px;margin-bottom:18px}
.pbdtf .tf-result-head h3{font-size:clamp(22px,3vw,27px)}

@media (max-width:560px){
  .pbdtf .tf-group-head{padding:16px 16px 13px}
  .pbdtf .tf-cards{padding:14px 16px 18px}
  .pbdtf .tf-group > .tf-devices{margin:0 16px 18px}
  .pbdtf .tf-row{padding:13px 16px}
}