` — * flatten it across both grid rows in column 2 so its children land * in the right cells. */ .attnvl-conn-cell > div { grid-column: 2; grid-row: 1 / span 2; display: contents; } .attnvl-conn-cell .attnvl-conn-label { grid-column: 2; grid-row: 1; } .attnvl-conn-cell .attnvl-conn-desc, .attnvl-conn-cell .attnvl-conn-desc-wrap { grid-column: 2; grid-row: 2; } } /* --------------------------------------------------------------------- * Control Units list — push the type pill (`ECU` / `TCU` / `BCM` / * `Extra`) to the RIGHT end of each row instead of the left, while * keeping the same DOM order (markup stays semantic: type first, name, * methods). The vendor `.attnvl-ecu-item { display:flex; align-items: * center; gap:12px }` rule already gives us the row layout — we just * reorder children visually with `order` and use `margin-inline-start: * auto` to claim the slack space so the pill hugs the far right. * * Targets every context the list appears in (archive table cell, * landing page panel, ECU detail page) by NOT scoping to .attnvl-archive. * ------------------------------------------------------------------- */ .attnvl-ecu-list .attnvl-ecu-item .attnvl-ecu-name { order: 1; } .attnvl-ecu-list .attnvl-ecu-item .attnvl-ecu-methods, .attnvl-ecu-list .attnvl-ecu-item .attnvl-ecu-spacer { order: 2; } .attnvl-ecu-list .attnvl-ecu-item .attnvl-ecu-type { order: 3; margin-inline-start: auto; flex-shrink: 0; } /* Custom-select option with a trailing "(count)" — JS splits the label * and the count into two spans (.attnvl-select__option-text and * .attnvl-select__option-count) and adds the .--with-count modifier. * Used by the Control Units cascade ("Bosch (17,439)"). * * Layout: 2-column / 2-row CSS grid. * row 1, col 1 : brand label (truncates with ellipsis) * row 1, col 2 : count pill (right-aligned) * row 2, full : type chip strip ("ECU", "TCU", …) — only present * when the option carries `data-types="…"`. The * `--with-types` modifier triggers the second row; * options without types collapse to a single row * via grid-auto-rows. */ .attnvl-archive .attnvl-select__option--with-count { display: grid; grid-template-columns: 1fr auto; column-gap: 8px; row-gap: 4px; align-items: center; } .attnvl-archive .attnvl-select__option--with-count .attnvl-select__option-text { grid-column: 1; grid-row: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .attnvl-archive .attnvl-select__option--with-count .attnvl-select__option-count { grid-column: 2; grid-row: 1; justify-self: end; padding: 1px 8px; background-color: #f3f4f6; color: #1f2937; font-size: 0.78rem; font-weight: 600; border-radius: 999px; line-height: 1.4; } /* Type chip strip — sits on the SECOND row, spanning the full width of * the option, beneath the brand label and count. Each chip mirrors * `.attnvl-ecu-type` from the table-cell listing (vendor attnvl.css * line 1278): accent-coloured text on the darker `ecu-badge` * background, 4px-rounded, 600-weight. Same visual language across * dropdown + listing so the user reads them as the same kind of badge. */ .attnvl-archive .attnvl-select__option--with-count .attnvl-select__option-types { grid-column: 1 / -1; grid-row: 2; display: flex; flex-wrap: wrap; gap: 4px; justify-self: start; } .attnvl-select__option-type { display: inline-block; padding: 2px 8px; color: var(--attnvl-accent-color); background-color: var(--attnvl-ecu-badge-background-color); font-size: 0.75rem; font-weight: 600; border-radius: 4px; line-height: 1.4; text-align: center; min-width: 32px; /* Faded by default — most users scan the brand+count first; the * type buckets are secondary metadata. Wake them up on row hover * so it's clear what each brand offers without being noisy. */ opacity: 0.25; transition: opacity 0.15s ease; } .attnvl-select__option:hover .attnvl-select__option-type, .attnvl-select__option.is-active .attnvl-select__option-type, .attnvl-select__option[aria-selected="true"] .attnvl-select__option-type { opacity: 1; } /* Light-grey hairline between dropdown options so the list reads as * separate rows rather than one solid slab. Last child drops the * line. Scoped to the panel + --with-count modifier so we don't * touch other custom-select usages on the page. * * The divider hides on hover / is-active / aria-selected so the * highlighted row reads as a clean rounded "card" without a * remaining hairline at the bottom edge. */ .attnvl-archive .attnvl-select__panel .attnvl-select__option--with-count { border-bottom: 1px solid var(--attnvl-border-color, #e5e7eb); } .attnvl-archive .attnvl-select__panel .attnvl-select__option--with-count:last-child, .attnvl-archive .attnvl-select__panel .attnvl-select__option--with-count:hover, .attnvl-archive .attnvl-select__panel .attnvl-select__option--with-count.is-active, .attnvl-archive .attnvl-select__panel .attnvl-select__option--with-count[aria-selected="true"] { border-bottom-color: transparent; } /* Custom-select panel — clip horizontal overflow so a stray long brand * (e.g. "Continental-Siemens-VDO") can't push the inner option wider * than the panel and surface a horizontal scrollbar. The label span * already truncates with ellipsis (rule above) but only inside its * flex slot; the panel needs the explicit clip too. */ .attnvl-archive .attnvl-select__panel { overflow-x: hidden; } /* --------------------------------------------------------------------- * Re-apply the kit's `.elementor-button` styling as UNLAYERED CSS so * it wins over the layered version emitted by layer_elementor_kit_css(). * * Background: the router wraps post-{kit_id}.css inside `@layer * elementor-kit { … }` to stop blanket selectors like * `.elementor-kit-12 button` from bleeding into the .attnvl-* archive * markup. Side effect: the kit's compound selector * `.elementor-kit-12 .elementor-button` (the one styling Elementor * Button widgets — e.g. the header Contact button) also became * layered and lost to Elementor's unlayered base `.elementor-button` * rule, so the Contact button reverted to grey defaults instead of * the brand-yellow rounded pill. * * Re-emitting just the `.elementor-button` selector here (NOT the * raw `button` / `input[type=submit]` siblings) restores the widget * appearance everywhere on the vehicles page WITHOUT re-introducing * the bleed into the cascade dropdown / sort buttons / icon buttons. * Property values must be kept in sync with the kit; on a kit-import * change the values below need a manual refresh. * ------------------------------------------------------------------- */ .elementor-kit-12 .elementor-button { background-color: var( --e-global-color-accent ); font-family: "Roboto Flex", Sans-serif; font-size: 16px; font-weight: 500; text-transform: uppercase; color: var( --e-global-color-text ); border-style: solid; border-width: 1px 1px 1px 1px; border-color: var( --e-global-color-accent ); border-radius: 50px 50px 50px 50px; padding: 0.8em 1.3em 0.8em 1.3em; } .elementor-kit-12 .elementor-button:hover, .elementor-kit-12 .elementor-button:focus { background-color: #414141; color: var( --e-global-color-secondary ); border-style: solid; border-width: 1px 1px 1px 1px; border-color: #414141; border-radius: 50px 50px 50px 50px; }