/* ============================================================================= Tahoe Search Filter — v1.0.8 styles Ported from Avalon Search Filter v7.0.4. Auto-enqueued by the Tahoe Search Filter plugin SITE-WIDE on the front-end (the destination highlighter needs mark styling on every landing page, not just search results). To manage separately, define('TAHOE_SKIP_PLUGIN_CSS', true) in wp-config.php and copy these rules to your child theme's style.css. v1.0.8 CHANGES (May 12, 2026 — CSS-only patch on top of v1.0.7): • ISSUE 1 (mobile-portrait divider line widths): Mirrors Avalon Search Filter v7.0.7's fix. On phones held in portrait (Galaxy S25 @ 360px, iPhone 17 @ ~393px), the existing .tahoe-result-divider width:51% leaves the container so narrow that long labels — especially "OTHER PAGES (10 RESULTS)" at ~24 uppercase chars — fill the entire container, pushing the flex-grow ::before and ::after pseudo-lines to zero visible width. Shorter labels (MODELS, CATEGORIES) render with visibly truncated lines that look inconsistent with each other and nothing like landscape rendering, where every divider has even, substantial lines on both sides. FIX: new @media (max-width: 599px) and (orientation: portrait) block (appended at end of file) widens .tahoe-result-divider from width: 51% to calc(100% - 20px) and reduces .tahoe-divider-text padding from 12px to 8px on each side. Visible flex-grow lines now render for every divider label including the long OTHER PAGES label. Landscape and tablet+ viewports are unaffected. The override of .tahoe-divider-text padding-left uses !important to defeat the original rule's !important at line ~204 of this file. • No other rules changed. v1.0.7's Issue 1 (unscoped article L/R padding) and Issue 2 (text-block padding split by featured-image presence) finalizations are preserved verbatim. v1.0.7 CHANGES (May 11, 2026 — CSS-only patch on top of v1.0.6): • ISSUE 1 (finalization): The v1.0.6 article-level 10px padding was applied via two scoped media queries (481–1099px portrait and 700–1099px landscape). QA showed those rules were still defeated on iPad portrait (768×1024) and phone landscape because they tied post-34595.css at specificity (0,3,0) and lost on cascade load order. v1.0.7 replaces the two media queries with a single unscoped rule on .search-results .elementor-posts-container .elementor-post that applies 10px L/R padding + margin: 0 across every viewport. On desktop the 10px is visually trivial; on the broken tablet portrait / phone landscape viewports it restores the gutter. Scope retained to .search-results so other Elementor Posts widgets across the site (homepage, blog index, related- posts carousels) are unaffected. • ISSUE 2 (finalization): The v1.0.6 .elementor-post__text padding of 10px 10px 0 was applied uniformly to all cards inside a @media (max-width: 1024px) block. Spec requires differentiation by featured-image presence: — Cards WITH image → padding: 0 10px (text sits flush below 260px thumbnail) — Cards WITHOUT image → padding: 10px 10px (text gets full breathing room) v1.0.7 splits the rule by .has-post-thumbnail and :not(.has-post-thumbnail), removes the @media wrapper (applies to all viewports per spec), and bumps the selector specificity from (0,3,0) to (0,6,0) by chaining the article class into the selector path. The v1.0.6 !important is retained as insurance against a future Elementor template re-save that might emit even higher-specificity rules. • CLEANUP: Removed three superseded blocks from this file: — @media (481–1099px) portrait article padding — @media (700–1099px) landscape article padding — @media (max-width: 1024px) .elementor-post__text padding-top The v1.0.5 grid row-gap @media (max-width: 1024px) block is RETAINED — it's still doing useful work (separating cards vertically when they stack into a single column). v1.0.6 CHANGES (superseded by v1.0.7 — see above): • Issue 2: scoped article padding via two media queries — REMOVED. • Issue 3: .elementor-post__text padding-top via chained .elementor-post + !important inside @media (max-width: 1024px) — REMOVED, replaced by v1.0.7's specificity-bumped split rules. v1.0.5 CHANGES (May 11, 2026 — STILL ACTIVE): • CHANGE 1 (.tahoe-search-query): DOM-side wrapper produces the span; this colors it amber. Unchanged in v1.0.6/v1.0.7. • ISSUE 1 (responsive cards): 2 cards per row on tablet portrait, 2 cards per row on tablet landscape ≥700px, 3 cards per row at 1025–1199px with min-height: 190px. Column-count forced via grid-template-columns override. • ISSUE 2 (card spacing): --grid-row-gap: 20px at ≤1024px so cards have visible vertical separation when they stack into 1 column. KEPT IN v1.0.7. Two selector paths ship: exact .elementor-34595 .elementor-element-f78c58a + generic fallback for template-resave survival. BRAND COLORS (v1.0.0 — unchanged): • Primary (title border, dividers, accordion pulse 0%/100%): #de8b0d • Highlight mark (background): #FFEA00 (yellow — unchanged from Avalon). • Accordion pulse 50% (the "found-it" flash): rgba(255, 234, 0, 0.9), unchanged from Avalon. ACCORDION DOM SELECTORS (.accordion__avalon_item, .accordion__avalon-body, etc.) are intentionally kept on the 'avalon' identifier because they are emitted verbatim by the shared BoatModelFeaturesSpecs Elementor widget. Renaming them here would not change the widget output and would break the deep-link script. ============================================================================= */ /* ── Site-wide mark for destination highlighting ────────────────────────────── This bare selector is required because the destination highlighter wraps matches in on ANY landing page — not just search results. The two scoped rules below (.search-results and .accordion__avalon_item) override these defaults with context-specific tweaks. */ mark.tahoe-search-highlight { background-color: #FFEA00; color: #111111; font-weight: bold; border-radius: 2px; padding: 0; font-style: normal; display: inline; white-space: normal; } /* ── Search term highlight (search results card excerpts) ──────────────────── */ /* PADDING NOTE: padding 0 is intentional — horizontal padding renders as visible whitespace flanking the , breaking mid-word matches like "sea" inside "seat" (which appeared as "sea t" with non-zero padding). */ .search-results mark.tahoe-search-highlight { background-color: #FFEA00; color: #111111; font-weight: bold; border-radius: 2px; padding: 0; font-style: normal; display: inline; white-space: normal; } /* ============================================================================= v1.0.4 + v1.0.5 — Change 1 — Search-query color in archive title ============================================================================= Section 14d JS wrapper finds the Elementor archive-title widget's

, reads its rendered text, and wraps the query portion in . This rule colors that span amber while leaving "Search Results for:" inherited from Elementor Site Settings. Applied via CSS variable fallback so a future site-wide brand-color override (e.g. swapping #de8b0d for a darker amber) only needs to touch the variable in :root or in Elementor Site Settings, not this rule. ============================================================================= */ .tahoe-search-query { color: var(--tahoe-brand-amber, #de8b0d); } /* ── Hide dates on non-blog cards ──────────────────────────────────────────── */ .search-results .elementor-posts-container .elementor-post:not(.type-post) .elementor-post__meta-data, .search-results .elementor-posts-container .elementor-post:not(.type-post) .elementor-post-date { display: none !important; } .search-results .elementor-posts-container .elementor-post.type-post .elementor-post__meta-data { display: block !important; } /* ── Excerpt inline chunk styling ──────────────────────────────────────────── */ .search-results .elementor-post__excerpt .tahoe-excerpt-chunk { display: inline; white-space: nowrap; } /* ── Post title ─────────────────────────────────────────────────────────────── */ .search-results h3.elementor-post__title { text-decoration: underline; padding: 0 0 0 15px; border-style: solid; border-width: 0 0 0 4px; border-color: #de8b0d; font-weight: 100 !important; } .search-results h3.elementor-post__title a:hover, .search-results h3.elementor-post__title a:focus { color: #de8b0d !important; text-decoration: underline; } /* ── Read More hover ────────────────────────────────────────────────────────── */ .search-results .elementor-post__read-more:hover, .search-results .elementor-post__read-more:focus { color: #ffffff !important; } /* ── Section dividers ───────────────────────────────────────────────────────── */ .tahoe-result-divider { grid-column: 1 / -1; width: 51%; margin: 24px auto 12px; display: flex; align-items: center; gap: 0; } .tahoe-result-divider::before, .tahoe-result-divider::after { content: ""; display: block; flex-grow: 1; border-block-end-width: 0; border-block-end-style: initial; border-block-end-color: initial; border-block-start-width: 2px; border-block-start-style: solid; border-block-start-color: var(--e-global-color-primary, #de8b0d); } .tahoe-result-divider .tahoe-divider-text { padding: 0 12px; /* v1.0.1: hardcoded color — Elementor always defines --e-global-color-primary, so the CSS-variable fallback never fires and the divider text would render in whatever the Site Settings primary color is (Tahoe's existing teal). */ color: #de8b0d !important; font-family: "Gotham Bold", sans-serif; font-size: 0.8em; font-weight: 400; white-space: nowrap; text-transform: uppercase; text-decoration: none !important; border: none !important; padding-left: 12px !important; } /* ── Thumbnail overflow fix (desktop default — ≥1200px) ────────────────────── This is the original v1.0.0 rule. It works on full desktop widths because the card column is wide enough that a 200px-tall image strip still shows a recognizable portion of the boat. On smaller widths the responsive overrides below take precedence — see the v1.0.4/v1.0.5 — Issue 1 block. */ .search-results .type-tahoe_boat_model .elementor-post__thumbnail, .search-results .type-tahoe_product_cat .elementor-post__thumbnail, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail { overflow: hidden; max-height: 200px; display: block; line-height: 0; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail img, .search-results .type-tahoe_product_cat .elementor-post__thumbnail img, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail img { width: 100%; height: 260px !important; object-fit: cover; object-position: center top; display: block; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail__link, .search-results .type-tahoe_product_cat .elementor-post__thumbnail__link, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail__link { display: block; overflow: hidden; max-height: 200px; line-height: 0; } /* ── Mark inside excerpt ──────────────────────────────────────────────────── */ .search-results .elementor-post__excerpt mark.tahoe-search-highlight { display: inline; white-space: normal; } /* ============================================================================= v1.0.4 + v1.0.5 — ISSUE 1 — Responsive thumbnails + card column count ============================================================================= PROBLEM: Handheld-landscape phones (568–932px), iPad mini (all orientations), iPad / iPad 10.2 (all orientations), and iPad Pro 10.5" in portrait all rendered each search result card with the boat photo cropped to a thin top band — sky, treeline, or empty water — with the boat itself out of frame. v1.0.5 follow-up: tablet portrait was rendering only 1 card per row per the Elementor template's archive_cards_columns_tablet=1 setting; we want 2 cards per row. ROOT CAUSE (v1.0.4): the desktop rule hardcoded img { height: 210px !important; object-position: center top; } .elementor-post__thumbnail { max-height: 200px; overflow: hidden; } which clipped each pontoon photo to its sky/treeline band when Elementor's archive_cards aspect-ratio container collapsed below 200px. ROOT CAUSE (v1.0.5): Elementor's archive_cards widget honors --grid-template-columns set from the Elementor archive-template's archive_cards_columns_tablet / archive_cards_columns_mobile settings. On the Tahoe template that defaults to 1 column at tablet sizes, so even though the viewport could fit 2 cards comfortably, only 1 is rendered. FIX: • Release the forced 210px image height in the 481–1199px range so Elementor's aspect-ratio container can drive the visible thumbnail height; recenter the crop with object-position: center center. • Override grid-template-columns on the .elementor-posts-container.elementor-grid to force 2 columns at tablet sizes and 3 columns at iPad-Pro-10.5-landscape sizes. Mobile-portrait (≤480px) keeps the original behavior — 1 card per row, full-width thumbnail. ============================================================================= */ /* ── Mid-range viewports: handheld landscape, iPad mini, iPad, iPad Pro 10.5 portrait. Releases the forced 210px thumbnail height and recenters the crop. Column count is set by the orientation-specific rules below. */ @media (min-width: 481px) and (max-width: 1199px) { .search-results .type-tahoe_boat_model .elementor-post__thumbnail, .search-results .type-tahoe_product_cat .elementor-post__thumbnail, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail { max-height: none; height: auto; overflow: hidden; line-height: 0; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail__link, .search-results .type-tahoe_product_cat .elementor-post__thumbnail__link, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail__link { max-height: none; height: auto; display: block; overflow: hidden; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail img, .search-results .type-tahoe_product_cat .elementor-post__thumbnail img, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail img { /* Inside Elementor's archive_cards skin the thumbnail's parent .elementor-post__thumbnail__link is positioned with padding-bottom equal to its item_ratio. The image is positioned absolutely inside it. height:100% + object-fit:cover makes the image fill that aspect-ratio box, and object-position:center keeps the boat (center-frame in product photography) in the visible crop instead of just the sky. */ width: 100%; height: 100% !important; max-height: none; min-height: 140px; object-fit: cover; object-position: center center; display: block; } } /* ── Handheld-landscape (≥700px): phones rotated, 7"–8" Android tablets, small tablets. v1.0.5: TWO cards per row instead of one. The 700px lower bound matches the user's spec — "any device in landscape mode that has 700px or more can show 2 cards per row." */ @media (min-width: 700px) and (max-width: 1024px) and (orientation: landscape) { .search-results .elementor-posts-container.elementor-grid { grid-template-columns: repeat(2, 1fr) !important; --e-archive-posts-columns: 2; } .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-posts-container.elementor-grid { grid-template-columns: repeat(2, 1fr) !important; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail, .search-results .type-tahoe_product_cat .elementor-post__thumbnail, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail { aspect-ratio: 16 / 9; min-height: 180px; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail img, .search-results .type-tahoe_product_cat .elementor-post__thumbnail img, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail img { min-height: 180px; } /* .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-post.has-post-thumbnail .elementor-post__text, .search-results .elementor-posts-container .elementor-post.has-post-thumbnail .elementor-post__text { padding-top: 10px; } */ } /* ── Handheld-landscape narrow (481–699px): phones in landscape that fall just below the 2-cards threshold. Keep 1 card per row (Elementor default at mobile breakpoint), but still apply the thumbnail recenter so the boat is visible. */ @media (min-width: 481px) and (max-width: 699px) and (orientation: landscape) { .search-results .type-tahoe_boat_model .elementor-post__thumbnail, .search-results .type-tahoe_product_cat .elementor-post__thumbnail, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail { aspect-ratio: 16 / 9; min-height: 180px; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail img, .search-results .type-tahoe_product_cat .elementor-post__thumbnail img, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail img { min-height: 180px; } } /* ── Tablet portrait: iPad mini portrait (768px), iPad portrait (810px), iPad Pro 10.5" portrait (834px), iPad Pro 11" portrait (834px). v1.0.5: TWO cards per row instead of one. */ @media (min-width: 600px) and (max-width: 1024px) and (orientation: portrait) { .search-results .elementor-posts-container.elementor-grid { grid-template-columns: repeat(2, 1fr) !important; --e-archive-posts-columns: 2; } .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-posts-container.elementor-grid { grid-template-columns: repeat(2, 1fr) !important; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail, .search-results .type-tahoe_product_cat .elementor-post__thumbnail, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail { aspect-ratio: 16 / 9; min-height: 220px; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail img, .search-results .type-tahoe_product_cat .elementor-post__thumbnail img, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail img { min-height: 220px; } } /* ── iPad Pro 10.5 / iPad Air landscape (1025–1199px) — 3 cards per row. v1.0.5: min-height reduced from 240px to 190px per user QA ("min-height: 190px is best because it shows the entire boat"). iPad Pro 12.9 landscape (1366px) is above this range and falls into the desktop default at ≥1200px (also 3 cards per row, so the visual outcome is consistent). */ @media (min-width: 1025px) and (max-width: 1199px) { .search-results .elementor-posts-container.elementor-grid { grid-template-columns: repeat(3, 1fr) !important; --e-archive-posts-columns: 3; } .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-posts-container.elementor-grid { grid-template-columns: repeat(3, 1fr) !important; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail, .search-results .type-tahoe_product_cat .elementor-post__thumbnail, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail { aspect-ratio: 16 / 9; min-height: 190px; } .search-results .type-tahoe_boat_model .elementor-post__thumbnail img, .search-results .type-tahoe_product_cat .elementor-post__thumbnail img, .search-results .type-tahoe_shopping_tools .elementor-post__thumbnail img { min-height: 190px; } } /* ============================================================================= v1.0.5 + v1.0.7 — Issue 2 (card spacing) + Issue 1/2 finalization ============================================================================= This section contains three layers of related card-spacing rules: 1. GRID ROW-GAP (v1.0.5 — STILL ACTIVE): On viewports ≤ 1024px the Elementor archive_cards widget's default --grid-row-gap collapses to 0, producing back-to-back result cards with no vertical separation. Force --grid-row-gap: 20px at ≤1024px so cards have visible breathing room when they stack into 1 or 2 columns. Two selector paths ship: the exact .elementor-34595 .elementor-element-f78c58a (verified working by user QA) and a generic .search-results .elementor-posts-container.elementor-grid fallback that survives an Elementor template re-save that regenerates the element ID. 2. ARTICLE PADDING — ISSUE 1 (v1.0.7 finalization): On iPad portrait (768×1024) and phone landscape, search-result cards rendered flush to the column edge. v1.0.6 attempted two scoped media queries (481–1099px portrait, 700–1099px landscape) but those rules tied post-34595.css at specificity (0,3,0) and lost on cascade load order. v1.0.7 replaces them with a single unscoped rule that applies 10px L/R padding + margin: 0 across every viewport. On desktop the 10px is visually trivial; on the broken tablet/phone viewports it restores the gutter. Scoped to .search-results so other Elementor Posts widgets site-wide (homepage carousels, blog index, related-posts) are not affected. 3. TEXT-BLOCK PADDING — ISSUE 2 (v1.0.7 finalization): WordPress automatically adds .has-post-thumbnail to
elements with a featured image set. Cards with images need zero top/bottom padding so the text block sits flush below the 260px thumbnail; cards without images need 10px top/bottom so the title isn't flush against the card edge. post-34595.css emits at specificity (0,3,0): .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-post__text { padding: 0 10px; } v1.0.6 chained .elementor-post + !important inside @media (max-width: 1024px), which patched the targeted breakpoint but didn't split by image presence. v1.0.7 bumps specificity to (0,6,0) by chaining .elementor-post.has-post-thumbnail / .elementor-post:not(.has-post-thumbnail), drops the @media wrapper (applies to all viewports per spec), retains !important as insurance against future Elementor template re-saves that might emit even higher-specificity rules, and ships a generic fallback in case .elementor-element-f78c58a is regenerated. ============================================================================= */ /* ── Grid row-gap (v1.0.5 — STILL ACTIVE) ──────────────────────────────────── */ @media (max-width: 1024px) { /* Primary (user-verified exact selector) */ .elementor-34595 .elementor-element.elementor-element-f78c58a { --grid-row-gap: 20px; --grid-column-gap: 0px; } /* Generic fallback in case the .elementor-element-f78c58a ID is regenerated by an Elementor template re-save. */ .search-results .elementor-posts-container.elementor-grid { --grid-row-gap: 20px; } /* ── Article L/R padding (v1.0.7 — unscoped across all viewports) ──────────── */ .search-results .elementor-posts-container .elementor-post { margin: 0; padding-left: 10px; padding-right: 10px; } } /* ── Article L/R padding (v1.0.7 — unscoped across all viewports) ──────────── */ .search-results .elementor-posts-container .elementor-post { margin: 0; /* padding-left: 10px; padding-right: 10px; */ } /* ── Text-block padding — cards WITHOUT featured image (v1.0.7) ───────────── Primary, exact element ID. Specificity (0,6,0) beats post-34595.css (0,3,0) on weight regardless of cascade load order. */ .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-post:not(.has-post-thumbnail) .elementor-post__text { padding: 10px 10px !important; margin-top: 0 !important; } /* ── Text-block padding — cards WITHOUT featured image (generic fallback) ─── */ .search-results .elementor-posts-container .elementor-post:not(.has-post-thumbnail) .elementor-post__text { padding: 10px 10px !important; margin-top: 0 !important; } /* ── Text-block padding — cards WITH featured image (v1.0.7) ──────────────── Matches what post-34595.css already emits. Explicit rule here documents intent and provides survival path against any future Elementor change that flips the per-page CSS default. */ .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-post.has-post-thumbnail .elementor-post__text { padding: 0 10px !important; margin-top: 0 !important; } /* ── Text-block padding — cards WITH featured image (generic fallback) ────── */ .search-results .elementor-posts-container .elementor-post.has-post-thumbnail .elementor-post__text { padding: 0 10px !important; margin-top: 0 !important; } @media (min-width: 700px) and (max-width: 1024px) and (orientation: landscape) { .elementor-34595 .elementor-element.elementor-element-f78c58a .elementor-post.has-post-thumbnail .elementor-post__text, .search-results .elementor-posts-container .elementor-post.has-post-thumbnail .elementor-post__text { padding-top: 10px; } } /* ============================================================================= Accordion Deep-Link Highlight (boat-model pages) When a user clicks a Path 2 search result that links to a specific accordion section on a /boat-model/{slug}/ page, the destination URL is /boat-model/{slug}/#feature-id?highlight=term. The accordion deep-link JS auto-opens that accordion item, plus any sibling accordions whose body contains the search term, and animates a brief pulse on the URL-targeted item. Highlighting INSIDE accordion bodies is primarily produced by the global destination highlighter (Section 14c of the plugin). The scoped mark rule below is retained for visual parity in the rare case where an accordion is opened by user click AFTER the global highlighter has finished its initial pass — the in-accordion fallback in the accordion deep-link script re-runs against the opened body, idempotently. PADDING NOTE: zero horizontal padding on the mark is required so mid-word matches (e.g. "sea" inside "seat") don't render with visible whitespace gaps as "sea t". ============================================================================= */ /* Highlight mark inside accordion items on boat-model pages */ .accordion__avalon_item mark.tahoe-search-highlight { background-color: #FFEA00; color: #111111; font-weight: bold; border-radius: 2px; padding: 0; font-style: normal; display: inline; } /* Subtle pulse animation on the URL-targeted (PRIMARY) accordion item only */ .accordion__avalon_item.tahoe-deeplink-target { animation: tahoe-accordion-pulse 1.5s ease-in-out 2; } @keyframes tahoe-accordion-pulse { 0% { border-color: rgba(222, 139, 13, 0.4); } 50% { border-color: rgba(255, 234, 0, 0.9); box-shadow: 0 0 12px rgba(255, 234, 0, 0.4); } 100% { border-color: rgba(222, 139, 13, 0.4); } } /* ============================================================================= v1.0.8 — Mobile-portrait divider line widths ============================================================================= Mirrors Avalon Search Filter v7.0.7's fix verbatim, with the Tahoe class names substituted (.tahoe-result-divider / .tahoe-divider-text). Problem: on phones held in portrait (Galaxy S25 @ 360px, iPhone 17 @ ~393px), the existing .tahoe-result-divider width:51% leaves the container so narrow that long labels — especially "OTHER PAGES (10 RESULTS)" at ~24 uppercase chars — fill the entire container, pushing the flex-grow ::before and ::after pseudo-elements to zero visible width. Shorter labels (e.g. MODELS, CATEGORIES) render with visibly truncated lines that look inconsistent with each other and nothing like the landscape rendering, where every divider has even, substantial lines on both sides. Fix: at (max-width: 599px) and (orientation: portrait) only, widen the divider container to calc(100% - 20px) and tighten the text padding from 12px to 8px on each side. This gives every label — including OTHER PAGES — enough remaining horizontal space for the ::before / ::after pseudo-lines to render with visible length, and visually equalizes the line lengths across MODELS, CATEGORIES, ACCESSORIES & OPTIONS, and OTHER PAGES (within the natural variance of label-text width). Scope: strictly (max-width: 599px) and (orientation: portrait). - Phone landscape (≥600px or orientation:landscape): unchanged (already renders correctly with the v1.0.7 baseline). - Tablet portrait (≥600px portrait): unchanged. - Desktop / laptop: unchanged. The override of .tahoe-divider-text padding-left uses !important to defeat the original rule's !important at line ~204 of this file. ============================================================================= */ @media (max-width: 599px) and (orientation: portrait) { .search-results .tahoe-result-divider { /* Widen the flex container so the ::before / ::after pseudo-lines have room to fill on either side of every divider label. At a ~360px viewport: 51% → ~184px (no room for OTHER PAGES); calc(100% - 20px) → ~340px (visible lines on every label). */ width: calc(100% - 20px); max-width: 100%; } .search-results .tahoe-result-divider .tahoe-divider-text { /* Tighten label padding from 12px → 8px on each side, freeing an additional 8px of horizontal space for the flex-grow lines. !important on both sides defeats the original rule's !important on padding-left (line ~204). */ padding-left: 8px !important; padding-right: 8px !important; } }