/*
 * My Garage - Checkpoint 12: §3.1 search-bar year dropdown.
 * Visibility gating + CORRECT-NOT-BROKEN layout only (inline, content-sized, height-aligned, no
 * overflow). FINE responsive/breakpoint layout and the full AESTHETIC theming to match the site
 * (borders/colours/fonts) stay DEFERRED to the polish phase - which targets the scoped
 * .kp-year-select2 / .kp-year-select2-dropdown classes set at init, so it never touches
 * WooCommerce's own Select2 or any other on the site.
 */

/* Default: a standalone (shortcode / JetSearch-diagram) dropdown is an always-visible inline
 * control. FiboSearch-attached dropdowns override this below. */
.kp-year-dropdown-wrap {
  display: inline-block;
  vertical-align: middle;
}

/* FiboSearch-attached dropdown BEFORE kp-year-dropdown.js relocates it into the search form:
 * hidden so it never floats disconnected in the header (the exact CP11 bug). */
.kp-search-with-year > .kp-year-dropdown-wrap {
  display: none;
}

/* Fail-safe: if the FiboSearch wrapper could not be found by any known spelling (a loud warning
 * is logged to the console), keep the dropdown hidden rather than leaving it floating/broken. */
.kp-year-dropdown-wrap--orphaned {
  display: none !important;
}

/* Relocated INTO the FiboSearch search form: it rides the form's own show/hide (the form is
 * display:none until the icon-search expands / is shown in the mobile overlay). Content-sized and
 * inline - NOT the full-width own-line box it was. */
.dgwt-wcas-search-form .kp-year-dropdown-wrap--in-search {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto; /* content-sized; don't grow/shrink when the form is a flex row */
  width: auto;
  margin: 0 var(--kp-yd-gap, 0) 0 0; /* ITER1 (fuse): gap knob = 0 → control butts the input on its LEFT; overlay mirrors this */
  box-sizing: border-box;
}

/* Lay the form out as a row so the (content-sized) year dropdown sits inline BEFORE the search
 * field instead of stacking full-width above it. FiboSearch renders bars in TWO layouts on this
 * site, which behave differently, so there are two cases:
 *
 *   - CLASSIC bars (the on-page / hero / shop / category / account / footer search bars): always
 *     visible, form is always display:block -> always a row. No !important needed (our (0,3,0)
 *     beats FiboSearch's base .dgwt-wcas-search-form).
 *   - ICON bars (the GeneratePress header search): collapsed to an icon, form is display:none
 *     until expanded. Only lay it out as a row when EXPANDED (.dgwt-wcas-layout-icon-open), so we
 *     never override the collapsed display:none. !important only because FiboSearch sets the OPEN
 *     icon form to display:block at high specificity.
 *
 * These key on FiboSearch's own layout classes; if FiboSearch renamed them the dropdown would
 * degrade to "stacked above" (the pre-fix state), NOT hidden - a safe degrade. Mobile keeps the
 * default stacked layout for classic bars; fine responsive layout is polish-phase. */
.dgwt-wcas-layout-classic .dgwt-wcas-search-form.kp-has-year-dropdown {
  display: flex;
  align-items: center;
}
.dgwt-wcas-layout-icon-open .dgwt-wcas-search-form.kp-has-year-dropdown {
  display: flex !important;
  align-items: center;
}

/* In either row, let FiboSearch's field wrapper take the remaining width. */
.dgwt-wcas-layout-classic .dgwt-wcas-search-form.kp-has-year-dropdown .dgwt-wcas-sf-wrapp,
.dgwt-wcas-layout-icon-open .dgwt-wcas-search-form.kp-has-year-dropdown .dgwt-wcas-sf-wrapp {
  flex: 1 1 auto;
  width: auto;
}

/* Select2 sizing — height-aligned to the 40px search field (base default is 28px), width bounded so
 * a long placeholder can't overflow and a bare year isn't tiny; text centred via line-height and
 * clipped (base CSS ellipsises).
 *
 * FOLLOW-UP FINDING B (the M2/M3 "shipped but never applied" bug): in this selectWoo build
 * containerCssClass ('kp-year-select2') is added by the compat/containerCss decorator to the
 * SELECTION element (.select2-selection--single) — NOT to the outer .select2-container: core
 * Select2.prototype.render builds .select2-container and only adds select2-container--<theme>, while
 * compat/containerCss does $container.addClass(cls) on the SELECTION adapter's render output
 * (selectWoo.full.js core render + :5910 + BaseSelection.render). So every CP12 rule keyed on
 * '.select2-container.kp-year-select2' matched NOTHING and the control sat at woo's base 28px
 * EVERYWHERE (not just the overlay). Re-anchored on the guaranteed server-rendered
 * .kp-year-dropdown-wrap ancestor; specificity (0,3,0) cleanly beats woo's
 * '.select2-container .select2-selection--single' (0,2,0). Values are UNCHANGED from CP12 — this only
 * makes the already-decided sizing actually apply (a correctness fix, not new theming). */
/* THEMING (B1 #1 final) — every value below is derived from the ACTUAL FiboSearch pirx bar
 * (STEP 0), not taste:  input bg #eee / hover #dfdfdf, no border, border-radius 30px, height ~50px
 * (line-height 24 + padding 13*2), font Barlow 17px, colour #212121 (settings text_input_color).
 * Overlay input is 45px & flat (border-radius 0). All knobs are the --kp-yd-* custom props below;
 * the overlay just overrides the knobs (further down). Iteration-friendly: Ryan's design notes map
 * to single-property changes here. */
.kp-year-dropdown-wrap {
  --kp-yd-h: 50px;                      /* desktop pill height == pirx input */
  --kp-yd-radius: 30px;                 /* pirx input border-radius */
  /* ITER3: the radius the browser actually PAINTS after the overlapping-curves clamp (CSS B&B: two
   * radii on one edge summing past the edge length are uniformly scaled). A closed left edge is
   * 30+30 on a 50px control → clamps to h/2 = 25px, which is exactly what the ~50px wrapper behind
   * also clamps to. An OPEN free corner (30 + a 0 joint) does NOT clamp → renders 30 over the
   * wrapper's 25 → a ~5px blue crescent. Use this pre-clamped value on the open free corners so they
   * match the wrapper. min() = 25 here; = --kp-yd-radius when it's already ≤ h/2. */
  --kp-yd-radius-eff: min(var(--kp-yd-radius), calc(var(--kp-yd-h) / 2));
  --kp-yd-bg: #E0E0E0;                  /* ITER1: Grey 300 — contrast against the white bar */
  --kp-yd-bg-hover: #BDBDBD;            /* ITER1: Grey 400 (one ramp step) — TASTE KNOB, may read heavy (see Iteration 1) */
  --kp-yd-fg: var(--contrast, #212121); /* brand --contrast / Grey 900 */
  --kp-yd-font: 'Barlow', sans-serif;
  --kp-yd-fs: 17px;                     /* pirx input font-size */
  --kp-yd-gap: 0;                       /* ITER1 (fuse): 0 = dropdown butts the input, colour step is the separator */
}
.kp-year-dropdown-wrap .select2-container {
  min-width: 7em;   /* B1 #1 ADDENDUM B: 11em was too wide for a plain year; 7em frees search-bar space and the container still grows (max-width 20em) for the "(not in My Garage)" label */
  max-width: 20em;
  text-align: left;
}
/* Selection box == the pill segment of the joined composite (STEP 2): matched height/bg, no border,
 * rounded on the LEFT only (flat where it butts the input; the overlay flips both via the knobs). */
.kp-year-dropdown-wrap .select2-container .select2-selection--single {
  height: var(--kp-yd-h);
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  background: var(--kp-yd-bg);
  border: none;
  border-radius: var(--kp-yd-radius) 0 0 var(--kp-yd-radius);
  font-family: var(--kp-yd-font);
}
.kp-year-dropdown-wrap .select2-container .select2-selection--single:hover {
  background: var(--kp-yd-bg-hover);
}
/* STEP 1 — normalize the rendered label off woo's 28px line-height + 8/20 padding (the 142×56 box
 * Ryan screenshotted); centre it in the pill and ellipsise cleanly. */
.kp-year-dropdown-wrap .select2-selection--single .select2-selection__rendered {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0 30px 0 16px;   /* left text inset; right room for the arrow */
  line-height: normal;
  font-size: var(--kp-yd-fs);
  color: var(--kp-yd-fg);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Placeholder tone ~ the input's default placeholder (STEP 1). #757575 == Grey 600 (on-ramp). */
.kp-year-dropdown-wrap .select2-selection__placeholder {
  color: #757575; /* Grey 600 */
}
/* STEP 1 — arrow full-height + right-aligned so it vertically centres at any pill height. */
.kp-year-dropdown-wrap .select2-container .select2-selection--single .select2-selection__arrow {
  top: 0;
  bottom: 0;
  height: auto;
  right: 10px;
  width: 20px;
}
/* STEP 1 — the × (allowClear): a real hit area, sits before the arrow. */
.kp-year-dropdown-wrap .select2-selection__clear {
  margin-right: 6px;
  padding: 0 4px;
  color: #757575; /* ITER1: Grey 600 (was #888, off-ramp) */
  font-size: 18px;
  line-height: 1;
}
.kp-year-dropdown-wrap .select2-selection__clear:hover {
  color: var(--kp-yd-fg);
}

/* Keep the type-to-filter panel above FiboSearch's expanded search panel (z-index 1000) on desktop
 * and above the mobile search overlay's very high z-index. dropdownCssClass lands on
 * .select2-dropdown (which carries the base z-index:1051), scoped to OUR dropdown only. (Mobile
 * overlay stacking still needs the real-browser pass - see the report.) */
.select2-dropdown.kp-year-select2-dropdown {
  z-index: 2147483647;
}

/* =====================================================================================
 * CP: FiboSearch seam fix — LAYOUT half ((c) H2 + M1 + M2/M3). Pairs with PART A in
 * kp-year-dropdown.js, which stops the desktop teardown. Scoped ONLY to FiboSearch's own real
 * state classes; no DOM changes; no new !important beyond the one the icon-open row already needed.
 * See docs/fibosearch-seam-fix-checkpoint.md.
 * ===================================================================================== */

/* PLACEMENT (Part 3, client-ratified): control LEFT of the input EVERYWHERE except inside the mobile
 * overlay, where it sits RIGHT (beside the back button — see the overlay block below). Outside the
 * overlay we rely on NATURAL DOM order (.kp-year-dropdown-wrap is the form's first child → renders
 * left), so NO `order` is set here — this reverts the seam-fix checkpoint's global order-swap.
 * H2 disposition updated accordingly (docs/fibosearch-seam-followup-checkpoint.md): with the control
 * on the LEFT, FiboSearch's suggestions panel anchors to the composite's left edge and spans
 * dropdown+input (probe's panel-vs-input reads ~ctlWidth again on desktop — EXPECTED, not a
 * regression); making the pair read as one joined control is the theming checkpoint's job. */

/* M1 — reclaim the year-control strip from FiboSearch's full-cover mobile click shield
 * (a.js-dgwt-wcas-enable-mobile-form: position:absolute, z-index:100, covering the whole wrapper
 * while armed at <=992px). Scope to the ARMED state (.dgwt-wcas-mobile-overlay-trigger-active, added
 * to the wrapper only while that shield exists) so the rule lives exactly as long as the shield.
 * Only the dropdown strip is lifted above the shield; the rest of the bar still opens the search
 * overlay on tap. */
.dgwt-wcas-mobile-overlay-trigger-active .kp-year-dropdown-wrap--in-search {
  position: relative;
  z-index: 101; /* one above the shield's 100 */
}

/* ===== TWO-ROW OVERLAY LAYOUT (Ryan's mockup A) ==========================================
 * Inside FiboSearch's mobile overlay the om-bar holds three SIBLINGS: the return button, the moved
 * .dgwt-wcas-search-wrapp (our control + the input are nested in its form), and the appended
 * suggestions wrapper. Ratified layout:
 *   ROW 1 = [return button][year dropdown filling the remainder]
 *   ROW 2 = [search input, FULL viewport width, running under the return's column]
 *
 * Composed CSS-only across the subtrees: the om-bar grows to two rows (height:auto), the return is
 * absolutely positioned into row-1's left 45px, the form stacks its two children as a column, and
 * row-1's control is cleared past the return with margin-left:45px. FiboSearch's 45px hardcodes are
 * overridden scoped (om-bar height, return height); the input keeps its own 45px row.
 *
 * SUPERSEDES the single-row layout (order-swap right placement, the max-content placeholder floor,
 * the min-width:0/overflow caret fix) — that machinery is moot now the control fills a full row, so
 * it is removed, not archived. History only: it was Addenda 4–6 on the containment doc. */

/* --kp-om-bar-h — the two-row bar height (45px row-1 + 45px row-2). ONE knob consolidating the three
 * places this height is referenced: the relocated panel's top, the suggestions' top anchor, and the
 * suggestions' height fix (LANDMINE #3, see Addendum B.2). Defined on <html> so every overlay
 * descendant (the panel in the overlay, the suggestions in the om-bar) inherits it. */
html.dgwt-wcas-overlay-mobile-on {
  --kp-om-bar-h: 90px;
}
/* om-bar → two rows; establish it as the positioning context for the return + the suggestions panel. */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar {
  height: auto;        /* was 45px — grow to the two rows */
  position: relative;  /* containing block for the absolute return + the suggestions (top/height below) */
}
/* Return → absolute into row-1's left 45px column (it was a 45px-wide, 100%-tall flex item; 100% of
 * a two-row bar would be 90px tall). */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return {
  position: absolute;
  top: 0;
  left: 0;
  width: 45px;
  height: 45px;        /* row-1 height only, not the full bar */
  /* HIT-TEST FIX: stock om-bar is side-by-side flex (no overlap), but the restructure's absolute
   * z:auto return is a DOM sibling BEFORE the moved wrapp, so the later-sibling wrapp's form box
   * (390×90) paints/hit-tests OVER it — Ryan's dump: elementFromPoint(22,22)=the FORM, so the return
   * never receives taps and the overlay never closed (silent since the restructure — the never-run
   * "back-arrow round trip" would have caught it). Positioned + positive z beats the z:auto wrapp
   * subtree; no competitor on the return's z (dump shows z:auto), so no !important. */
  z-index: 2;
}
/* The moved search wrapper fills the om-bar (return + suggestions are out of flow). */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar .dgwt-wcas-search-wrapp-mobile {
  flex: 1 1 auto;
  width: 100%;
}
/* The form stacks its two children as a COLUMN: row 1 = our control, row 2 = the input — natural DOM
 * order (the relocated control is form.firstChild, the sf-wrapp second), so no `order` needed. */
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-form.kp-has-year-dropdown {
  display: flex;
  flex-direction: column;
  align-items: stretch;  /* each row fills the width */
}
/* ROW 1 — the year dropdown, cleared past the return, filling the remainder. The single-row
 * max-content/42%/overflow machinery is gone: a full-width row needs no clip, so the caret AND the
 * full placeholder ("Select your Corvette…") both fit. */
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-form.kp-has-year-dropdown .kp-year-dropdown-wrap--in-search {
  display: flex;       /* WIDTH FIX: the base rule's `display:inline-flex` shrink-to-fits the item to its
                          content (~147px in Ryan's inspector); a block-level flex item stretches instead */
  align-self: stretch; /* fill the cross-axis (width) even if the desktop classic/icon row rule's
                          align-items:center (which still matches the retained layout class in the overlay) leaks in */
  flex: 0 0 auto;
  width: auto;         /* stretched by align-self, minus the 45px clearance below */
  min-width: 0;
  max-width: none;
  margin: 0 0 0 45px;  /* clear the return button's 45px column */
  overflow: visible;
}
.dgwt-wcas-search-wrapp-mobile .kp-year-dropdown-wrap--in-search .select2-container {
  /* PATTERN (record): selectWoo writes inline geometry every open (here width:auto), which beats any
     non-important rule — so every such property in the overlay takes the sanctioned !important.
     Ryan's inspector: our plain width:100% was STRUCK by the inline width:auto → control stuck ~147px. */
  width: 100% !important; /* fill row 1 (now the wrap stretches); the caret sits at the right edge */
  min-width: 0;
  max-width: 100%;
}
/* ROW 2 — the search input, FULL width; runs under the return's column (the return is only row-1 tall). */
.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-search-form.kp-has-year-dropdown .dgwt-wcas-sf-wrapp {
  flex: 0 0 auto;
  width: auto;
  min-width: 0;
  margin: 0;
  /* MAGNIFIER-CENTERING containing block: the absolute submit button (+ preloader/voice-search)
   * resolve against the nearest POSITIONED ancestor. FiboSearch's base .dgwt-wcas-sf-wrapp is
   * position:relative (style.css:1089) — BUT Ryan's devtools probe shows the button resolving against
   * a ~90px ancestor (the column form / search-wrapp, both also position:relative — style.css:6):
   * top:50% then lands at the row boundary (50% of 90px = 45px), not centred in the 45px row. The
   * stock top:50%+translateY idiom cannot mis-centre against a CORRECT 45px block, so this is the tell.
   * Re-assert position:relative on THIS sf-wrapp in the two-row context so it is unambiguously the
   * button's containing block — the 45px row — height-agnostic (no magic number). */
  position: relative;
}
/* FiboSearch's suggestions/history panel — two overlay-context fixes (LANDMINE #3): positioning our
 * om-bar (position:relative, for the two-row layout) re-based the panel's percentage geometry off it.
 *   • top: was 45px (their :1550) — anchor below the full two-row bar via the knob.
 *   • height: their NON-iOS rule `height:calc(100% - 45px)!important` (:1552) re-based `100%` from the
 *     old full-height container to our 90px om-bar → 90−45 = 45px COLLAPSE (signed-out, non-iOS UA).
 *     Override to viewport-height minus the bar; dvh is the iOS-URL-bar-safe unit (vh fallback first).
 * Winning chain per UA mode: NON-iOS → this rule (html…, (0,2,1) + !important) beats their (0,2,0);
 * iOS → their `.dgwt-wcas-is-ios .…-suggestions-wrapp { height:auto!important; max-height:none!important }`
 * (:1619, (0,3,0)) is MORE specific than us, so it wins and keeps the iOS content-height (already tall —
 * what made signed-in+history render tall) — we deliberately do NOT fight it. Their JS-written inline
 * max-height:600 (search.js:358/1131, non-important) still caps the non-iOS panel — left as their
 * design cap. !important is the sanctioned override of their stylesheet !important. */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-suggestions-wrapp {
  top: var(--kp-om-bar-h) !important;
  height: calc(100vh - var(--kp-om-bar-h)) !important;  /* fallback (older browsers, no dvh) */
  height: calc(100dvh - var(--kp-om-bar-h)) !important; /* iOS URL-bar-safe */
}
/* Overlay knob overrides — the sizing/appearance rules above are var-driven, so fitting the 45px
 * FLAT overlay bar (FiboSearch forces the input to 45px !important, border-radius 0, font-size 16px)
 * is just three knob changes. No duplicate selectors. */
.dgwt-wcas-search-wrapp-mobile .kp-year-dropdown-wrap {
  --kp-yd-h: 45px;     /* overlay bar height */
  --kp-yd-radius: 0;   /* overlay bar is flat, not a pill */
  --kp-yd-fs: 16px;    /* overlay input font-size */
}

/* ===== ROW-2 STYLING (magnifier + input) + BACK BUTTON (Ryan's screenshot 3) ==============
 * All overlay-scoped; desktop/on-page untouched. Cited FiboSearch/theme rules inline. */

/* (2a) Restore the pirx magnifier — FiboSearch hides it in the overlay:
 *   `.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-style-pirx .dgwt-wcas-sf-wrapp
 *    button.dgwt-wcas-search-submit { display:none }` (style.css:1930, specificity (0,5,1), NO
 * !important). We beat it on SPECIFICITY (0,5,2 — one extra type), so no !important needed. The base
 * button is display:flex, absolute, 33×33, pointer-events:none (style.css:1910). */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit {
  display: flex;
  left: 15px;                    /* base left:23/top:21 assume the ~54px desktop pirx input; re-centre for the 45px row */
  /* The winning `top` was the THEME's GENERAL rule `.dgwt-wcas-sf-wrapp .dgwt-wcas-search-submit
   * { top:8px !important }` (style.css:1339) — our plain top:50% lost to its !important (Ryan's dump:
   * computed top=8px, so the button sat high, centred on the ROW BOUNDARY). That rule is general
   * (desktop bars use it), so we don't edit it — we override it SCOPED here with !important. */
  top: 50% !important;
  transform: translateY(-50%);   /* vertical centre in the 45px row (offsetParent=sf-wrapp, matrix −16.5 confirmed) */
  pointer-events: none;          /* parity with the base (decorative; the B2 a11y pass owns any change) */
}
/* Magnifier colour → site blue (mirror of FiboSearch's text_submit_color=#2e6eac at our anchor,
 * var so it tracks the brand). */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp button.dgwt-wcas-search-submit svg path {
  fill: var(--kp-blue, #2e6eac);
}
/* (2b) Restore the icon's left clearance — FiboSearch's mobile rule strips it:
 *   `.dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp-mobile … input { padding:0 10px }` (style.css:2049,
 * (0,5,1)) [+ the .search-filled variant :2059]. Base pirx left padding is 48px
 * (`… input { padding:13px 24px 13px 48px }`, style.css:1868). Restore the 48px LEFT only; keep the
 * mobile rule's 0 vertical so the 45px row height holds (box-sizing:border-box). We win on specificity
 * (0,6,2). (3) also add the 2px blue BOTTOM border — the theme's global
 * `input { border:none !important }` kills all borders, so this one needs !important (overriding a
 * stylesheet !important — sanctioned, documented). Border is inside the 45px (border-box). */
html.dgwt-wcas-overlay-mobile-on .dgwt-wcas-style-pirx.dgwt-wcas-search-wrapp-mobile .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  padding: 0 10px 0 48px;                                  /* 48px left for the magnifier; 0 vertical keeps 45px */
  border-bottom: 2px solid var(--kp-blue, #2e6eac) !important; /* SANCTIONED: overrides theme `border:none !important` */
}

/* (4) BACK BUTTON — blue bg, WHITE arrow. Shipped pirx-overlay is #fff bg (style.css:2071, (0,4,1))
 * with a #111 arrow (`… om-return path { fill:#111 }`, style.css:2082, (0,4,2)). We beat both on
 * specificity by prefixing `html` (no !important). The base arrow SVG is already positioned
 * (left/top, style.css:2077); we only recolour. */
html.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return {
  background: var(--kp-blue, #2e6eac);
}
html.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return:hover,
html.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return:active {
  background: var(--kp-blue-dark, #204d72);   /* TASTE KNOB: simple darker step; flagged for Ryan */
}
html.dgwt-wcas-open-pirx.dgwt-wcas-overlay-mobile-on .dgwt-wcas-om-bar button.dgwt-wcas-om-return path {
  fill: #fff;   /* white arrow (overrides FiboSearch's #111) */
}

/* =====================================================================================
 * STEP 2 (composite) + STEP 3 (open panel) — THEMING, CSS only.
 * ===================================================================================== */

/* STEP 2 — flatten the input's LEFT corners where our control butts it (desktop only; the overlay
 * input is already flat), so the dropdown + input read as ONE pill. Keyed on our verified
 * .kp-has-year-dropdown context; specificity (0,5,2 incl. the html type) beats pirx's (0,4,1), so no
 * !important. The 30px matches --kp-yd-radius (pirx). */
html:not(.dgwt-wcas-overlay-mobile-on) .dgwt-wcas-search-form.kp-has-year-dropdown .dgwt-wcas-sf-wrapp input[type="search"].dgwt-wcas-search-input {
  border-radius: 0 30px 30px 0;
}

/* STEP 3 — the open type-to-filter panel (.select2-dropdown.kp-year-select2-dropdown; dropdownCssClass
 * DOES land here — followup §3). Site typography; options in the site blue; a bounded scroll (the
 * year list is ~83 rows). NOTE: focus outlines are deliberately left untouched — the a11y pass is B2,
 * do-no-harm here. (The z-index for this selector is set once, higher up.) */
.select2-dropdown.kp-year-select2-dropdown {
  background: var(--white, #fff);
  border: 1px solid #E0E0E0; /* ITER1: Grey 300 (was #ddd) */
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12); /* shadow, not a ramp colour */
  font-family: 'Barlow', sans-serif;
  overflow: hidden; /* let the rounded corners clip the option rows */
}
/* ITER1 (STEP 4 open-state radius) — VERIFIED against the installed selectWoo build: on open,
 * _positionDropdown adds select2-dropdown--above/--below to the PANEL and select2-container--above/
 * --below to the INLINE container (selectWoo.full.js:4442-4447). Key the corners on those. The
 * unconditional below-shape was the mismatch Ryan shot (worst when the panel opened UPWARD). */
.select2-dropdown.kp-year-select2-dropdown.select2-dropdown--below {
  border-radius: 0 0 10px 10px; /* panel below: top meets the control (flat), bottom free (rounded) */
}
.select2-dropdown.kp-year-select2-dropdown.select2-dropdown--above {
  border-radius: 10px 10px 0 0; /* panel above: bottom meets the control (flat), top free (rounded) */
}
.select2-dropdown.kp-year-select2-dropdown .select2-results__options {
  max-height: 16em; /* ~11 rows, then scroll */
}
.select2-dropdown.kp-year-select2-dropdown .select2-results__option {
  /* B1 #1 ADDENDUM A — neutral option background guard (M1 pattern from B1 #8 Round 7). Elementor's
   * per-page generated CSS emits a BARE .select2-results__option{background-color:#F5F5F5} (0,1,0) on
   * pages with styled form fields (e.g. the account page's post-22.css), tinting our neutral rows; it
   * paints white elsewhere. Declare white explicitly on §3.1's own dropdown class (0,3,0, beats the
   * bare 0,1,0). Highlight + selected below are 0,4,0, so they still win their states. */
  background-color: #fff;
  padding: 8px 16px;
  font-size: 15px;
  color: var(--contrast, #212121);
}
/* Keyboard/hover highlight → site blue (overrides woo's admin-colour default). */
.select2-dropdown.kp-year-select2-dropdown .select2-results__option--highlighted[aria-selected],
.select2-dropdown.kp-year-select2-dropdown .select2-results__option--highlighted[data-selected] {
  background: var(--kp-blue, #2e6eac);
  color: var(--white, #fff);
}
/* Currently-selected year → quiet Grey 200 tint (ITER1: was #eef4fa; TASTE KNOB — differentiates the
 * quiet-current row from the brand-blue highlight without using an over-saturated blue tint). */
.select2-dropdown.kp-year-select2-dropdown .select2-results__option[aria-selected="true"],
.select2-dropdown.kp-year-select2-dropdown .select2-results__option[data-selected="true"] {
  background: #EEEEEE; /* Grey 200 */
  color: var(--contrast, #212121);
}
/* Type-to-filter field styled to the site. */
.select2-dropdown.kp-year-select2-dropdown .select2-search--dropdown {
  padding: 8px;
}
.select2-dropdown.kp-year-select2-dropdown .select2-search__field {
  padding: 8px 10px;
  border: 1px solid #BDBDBD; /* ITER1: Grey 400 (was #ccc) */
  border-radius: 4px;
  font-family: 'Barlow', sans-serif;
  font-size: 15px;
}
.select2-dropdown.kp-year-select2-dropdown .select2-search__field:focus {
  border-color: var(--kp-blue, #2e6eac); /* tint only — outline left intact for a11y */
}

/* STEP 4 — selection corners per open direction. The control sits LEFT of the input, so its RIGHT
 * edge is always flat (meets the input) and its LEFT corners carry the design radius. On open the
 * edge MEETING the select2 panel (dropdown-width, directly below/above the control) goes flat; the
 * free LEFT corner keeps the radius. Open geometry confirmed correct in Iteration 1 — unchanged.
 *
 * ITER2 CLOSED-STATE FIX — compound .select2-container--open into the direction keys so they match
 * ONLY while the panel is up. VERIFIED against the installed selectWoo: close() removes only
 * select2-container--open (_registerEvents close handler, selectWoo.full.js:5453-5455); the
 * --above/--below classes are removed/re-set solely inside _positionDropdown (:4446-4447), which
 * runs on open/position, NEVER on close — so a direction class LINGERS after close. Without the
 * --open guard the iteration-1 rules kept matching while closed, freezing the last one-corner shape
 * (Ryan's repro: two closed controls stuck in opposite shapes). With --open present, a CLOSED control
 * (no --open) falls back to the base full pill (both left corners var(--kp-yd-radius)).
 * Anchor .kp-year-dropdown-wrap + .select2-container--open + .select2-container--<dir> +
 * .select2-selection--single.kp-year-select2 = (0,5,0) (unchanged count), still beats woo's
 * open-direction rules (0,4,0); no !important. Overlay: --kp-yd-radius is 0, so these compute flat.
 *
 * THE BLUE ARC = Elementor-wrapper bleed (Ryan's live inspection; the iter-1 UA-focus-ring guess was
 * falsified). Wrapper .elementor-51 .elementor-element-d9cd147: bg #2E6EAC (== --kp-blue), radius
 * 30px, padding 0, ~50px tall. ITER3 root: the OPEN free corner rendered the FULL 30px (30 + a 0
 * joint doesn't trigger the overlapping-curves clamp) while the wrapper's left edge (30+30 on ~50)
 * clamps to 25px — so the control's corner overhangs the wrapper's by ~5px → blue crescent. Fix:
 * paint the free corner at the pre-clamped --kp-yd-radius-eff (25px) so it matches the wrapper.
 * Closed state already matched (its 30+30 clamps to 25 too) and is unchanged. The plain calc()
 * fallback line runs first for browsers without min() (customer base skews older-tech). Overlay:
 * --kp-yd-radius is 0 → --kp-yd-radius-eff = min(0, h/2) = 0 → inert. */
.kp-year-dropdown-wrap .select2-container--open.select2-container--below .select2-selection--single.kp-year-select2 {
  border-radius: calc(var(--kp-yd-h) / 2) 0 0 0; /* fallback (no min()) — static clamped value */
  border-radius: var(--kp-yd-radius-eff) 0 0 0;  /* open below: free top-left, clamped to match the wrapper */
}
.kp-year-dropdown-wrap .select2-container--open.select2-container--above .select2-selection--single.kp-year-select2 {
  border-radius: 0 0 0 calc(var(--kp-yd-h) / 2); /* fallback (no min()) — static clamped value */
  border-radius: 0 0 0 var(--kp-yd-radius-eff);  /* open above: free bottom-left, clamped to match the wrapper */
}

/* =====================================================================================
 * MOBILE-OVERLAY PANEL — WITHIN-OVERLAY ABSOLUTE PLACEMENT (Addendum B; JS relocates the panel
 * INTO .dgwt-wcas-overlay-mobile on select2:open — kp-year-dropdown.js PART 1). Scoped to
 * html.dgwt-wcas-overlay-mobile-on ONLY; desktop untouched.
 *
 * WHY the position:fixed era ended (evidence baseline, Addendum B): the panel had to leave <body>
 * because two things made stylesheet CSS unable to contain a body-parented panel — (a) FiboSearch's
 * iOS member rule display:none's every body child except the overlay (RDM iPhone presets = iOS UA);
 * (b) Elementor Pro's global select2:open grab (e-woo-select2-wrapper) lands inline styling on the
 * body-level container that a stylesheet can't beat. Now the panel lives INSIDE the positioned
 * overlay, so we position it there: absolute, below the two-row bar, full width.
 *
 * SUPERSEDED — removed, not archived (history: containment Addenda 2–4): position:fixed edge-to-edge
 * + the wrapper max-int z-index (that was needed only because fixed formed its own stacking context
 * out at the root; inside the overlay we re-derive a modest z instead).
 *
 * `:not(.select2)` isolates the relocated open wrapper (AttachBody.position removes .select2 from it,
 * selectWoo.full.js:4311) from the inline in-form control (keeps .select2). In the overlay OUR year
 * dropdown is the only Select2 that can open, so overlay-state scoping is instance-safe.
 * ===================================================================================== */
html.dgwt-wcas-overlay-mobile-on .select2-container--open:not(.select2) {
  position: absolute !important;  /* SANCTIONED: overrides selectWoo's INLINE position (and aligns with Elementor's absolute); WITHIN the positioned overlay now, not fixed/body */
  top: var(--kp-om-bar-h) !important; /* SANCTIONED: overrides INLINE top — below the two-row bar, via the shared --kp-om-bar-h knob (LANDMINE #3: one knob for all three bar-height references). */
  left: 0 !important;              /* SANCTIONED: overrides INLINE left — full overlay width */
  right: 0 !important;
  width: auto !important;          /* let left+right drive width (drops any computed/inline width) */
  /* z-index — SUPERSEDES the Addendum-B z:10 note (that was derived against the wrong competitor, the
   * om-bar z:auto). The real competitors are the SIBLING suggestions/details panels: FiboSearch gives
   * them INLINE z:999999999 / 999999998 (search.js:364 → :1132/:1140), and the om-bar they sit in is
   * position:relative;z:auto so it forms NO stacking context — they compete directly with us in the
   * overlay's context. z:10 lost. Ceiling 2147483647 chosen because it CANNOT be leapfrogged (Ryan's
   * probe: 10^13 and 10^12 both clamp to it — presence, not magnitude), and an equal-z tie breaks to us
   * (our container is appended per open, after the suggestions → later sibling wins). No !important —
   * selectWoo writes no inline z on .select2-container (verified). */
  z-index: 2147483647;
  overscroll-behavior: contain; /* no page-behind chaining from the panel */
}
html.dgwt-wcas-overlay-mobile-on .select2-dropdown.kp-year-select2-dropdown {
  width: 100% !important;       /* SANCTIONED: overrides selectWoo's INLINE width (~176px, written every open) — without !important the plain width:100% lost to it (Ryan's inspector proof) */
  overscroll-behavior: contain;
}
/* Viewport-derived list height — mobile gains list room now that the panel is fixed full-width. */
html.dgwt-wcas-overlay-mobile-on .select2-dropdown.kp-year-select2-dropdown .select2-results__options {
  max-height: calc(100vh - 70px);
  overscroll-behavior: contain;
}

/* =====================================================================================
 * ADDENDUM C — NON-OVERLAY MOBILE: full-width open panel (B1 #8 micro-build era).
 * At-rest mobile opens (classic bars, NOT the FiboSearch mobile SEARCH overlay) rendered a narrow tap
 * list: Addendum B narrowed the control to min-width 7em, and the body-parented panel tracks the
 * control width via selectWoo's inline geometry. Extend the overlay's proven full-width pattern to the
 * non-overlay case. TWO rules are REQUIRED (confirmed from selectWoo._positionDropdown source):
 *   • the body-level CONTAINER gets inline {top, left, width:~176px}  -> override left/right/width;
 *   • the PANEL gets inline {width:auto; min-width:~176px} and IS position:absolute, so width:auto
 *     shrink-to-fits to ~176px -> needs width:100% to fill the widened container. The spec assumed
 *     this width:100% already applied, but the rule at ~:523 is OVERLAY-scoped; this is its required
 *     NON-overlay companion.
 * selectWoo's inline `top` is KEPT (panel stays below the control). All four overrides take the
 * sanctioned !important (operating rule: selectWoo rewrites this inline geometry EVERY open).
 *
 * SCOPING (standing fact: the OPEN container carries NO namespace class): CSS-only via :has() on the
 * guaranteed panel class -> matches ONLY §3.1's body wrapper (kp-year panel as a direct child), NOT the
 * account tab's .kp-garage-select2-dropdown panel (different class) and NOT the inline control (no panel
 * child). If :has() misbehaves in verification, the sanctioned fallback is ONE line in
 * kp-year-dropdown.js's select2:open handler adding a container marker class. SHIPPED: CSS-only :has().
 *
 * OVERLAY NON-INTERFERENCE: html:not(.dgwt-wcas-overlay-mobile-on) — the overlay's own rules keep owning
 * that state (values coincide; ownership stays clean). BREAKPOINT 992px = FiboSearch's mobile threshold
 * (where the overlay treatment lives); TASTE (Ryan can pull to 767px).
 * ===================================================================================== */
@media (max-width: 992px) {
  html:not(.dgwt-wcas-overlay-mobile-on) .select2-container--open:has(> .select2-dropdown.kp-year-select2-dropdown) {
    left: 0 !important;     /* SANCTIONED: overrides selectWoo's inline left (control-aligned, every open) */
    right: 0 !important;    /* SANCTIONED: pair with left to span the viewport */
    width: auto !important; /* SANCTIONED: overrides selectWoo's inline width (~176px); left+right drive width */
  }
  html:not(.dgwt-wcas-overlay-mobile-on) .select2-dropdown.kp-year-select2-dropdown {
    width: 100% !important; /* SANCTIONED: overrides selectWoo's inline width:auto (shrink-to-fit on the
                               position:absolute panel -> ~176px); fills the now-full-width container.
                               NON-overlay companion to the overlay-scoped rule at ~:523. */
  }
}

/* =====================================================================================
 * ON-PAGE BORDERED COMPOSITE — on-page FiboSearch surfaces give the INPUT
 * `border:2px solid var(--kp-blue)!important` (theme style.css On-Page block). We continue that ring
 * around the whole composite: the input drops its LEFT border (style.css, gated on .kp-has-year-dropdown)
 * and the control takes top/left/bottom (no right) → one continuous 2px ring, no joint divider.
 *
 * Context = the SAME on-page selector (keyed on the .elementor-widget-fibosearch ANCESTOR).
 * OVERLAY NON-LEAK: FiboSearch's overlay move (search.js:950) relocates only .dgwt-wcas-search-wrapp
 * into the body-level om-bar; the widget ancestor stays behind, so these rules are structurally
 * UNMATCHED inside the overlay (there the control uses the overlay knobs — 45px, flat, no border).
 * No blue wrapper behind on-page surfaces (gray section), so the iter-3 crescent class can't bite —
 * but the radius is still re-derived for the taller bordered box so corners stay coherent.
 * ===================================================================================== */

/* Geometry: the on-page input is pirx (height:auto, box-sizing:border-box) + the 2px border → ~54px
 * outer (24 line + 26 padding + 4 border). Bump --kp-yd-h to 54 so the control matches flush: the
 * selection is height:var(--kp-yd-h) border-box + a 2px border → 54 outer too, and --kp-yd-radius-eff
 * auto-re-derives to min(30, 54/2)=27 for this box (closed 30+30 on 54 also clamps to 27 → coherent). */
.elementor-widget-fibosearch:not(.dgwt-wcas-menu-bar-item):not(.fs-hero):not(.fs-footer) .kp-year-dropdown-wrap {
  --kp-yd-h: 54px;
}
/* The control's 3-sided ring (no right — the input continues it), identical in rest/hover/focus to
 * mirror the theme input rule's three states. Specificity (0,7,0) beats our base border:none (0,3,0)
 * and woo (0,2,0); no !important. */
.elementor-widget-fibosearch:not(.dgwt-wcas-menu-bar-item):not(.fs-hero):not(.fs-footer) .kp-year-dropdown-wrap .select2-selection--single.kp-year-select2,
.elementor-widget-fibosearch:not(.dgwt-wcas-menu-bar-item):not(.fs-hero):not(.fs-footer) .kp-year-dropdown-wrap .select2-selection--single.kp-year-select2:hover,
.elementor-widget-fibosearch:not(.dgwt-wcas-menu-bar-item):not(.fs-hero):not(.fs-footer) .kp-year-dropdown-wrap .select2-selection--single.kp-year-select2:focus {
  border-top: 2px solid var(--kp-blue, #2e6eac);
  border-bottom: 2px solid var(--kp-blue, #2e6eac);
  border-left: 2px solid var(--kp-blue, #2e6eac);
  border-right: none;
}