/* ============================================
   UsedLens.co.uk - Main Stylesheet
   Design v2 — DM Sans + Source Serif 4
   ============================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

:root {
    --ul-bg:              #F6F8FA;
    --ul-surface:         #FFFFFF;
    --ul-surface-alt:     #F4F6F8;
    --ul-border:          #E2E6EA;
    --ul-border-light:    #EEF0F3;
    --ul-text:            #1A2332;
    --ul-text-body:       #334155;
    /* De-emphasised text ramp — RETUNED 2026-07-29 for WCAG AA.
       Was #64748B / #94A3B8 / #B8C4CE, measuring 4.34 / 2.34 / 1.62 against the
       palest surface each is used on. --ul-text-faint at 1.62 was the retailer
       name on mobile listing rows (11px) and the struck-through "was" price —
       the two things a price-comparison row exists to say.

       There is no room for four legible greys between --ul-text (#1A2332) and
       white at 10-13px, so this is deliberately TWO steps, not three:
       --ul-text-faint is now an ALIAS of --ul-text-light. Where something needs
       to read quieter, use size, weight or position, not less contrast.
       Do not "restore" the old hexes — they are the failure, not the design.

       Worst case across every surface these sit on (#FFFFFF, #F6F8FA, #F4F6F8,
       #F8FAFB, #FEF2EF, #F2F6EA, #EDF7F1): muted 5.39, light 4.58. */
    --ul-text-muted:      #556677;
    --ul-text-light:      #5F7183;
    --ul-text-faint:      var(--ul-text-light);
    --ul-primary:         #E8573D;
    --ul-primary-hover:   #D14A32;
    --ul-primary-subtle:  #FEF2EF;
    --ul-accent:          #2D7A4F;
    --ul-reduced-text:    #1B8A50;
    --ul-excellent-bg:    #EDF7F1;
    --ul-excellent-text:  #2D7A4F;
    --ul-good-bg:         #F2F6EA;
    --ul-good-text:       #5C7A2E;
    --ul-nav:             #2C3E50;
    --ul-nav-dark:        #1A2836;
    --ul-nav-text:        #FFFFFF;
    --ul-row-hover:       #F8FAFB;
    --ul-check-active:    #5B7A94;
    --ul-shadow:          0 1px 3px rgba(26,35,50,0.05);
    --ul-shadow-md:       0 4px 16px rgba(26,35,50,0.08);
    --ul-font-ui:         'DM Sans', system-ui, sans-serif;
    --ul-font-body:       'Source Serif 4', Georgia, serif;
    --ul-max-width:       1200px;
    --ul-radius:          10px;
    --ul-radius-sm:       6px;
    --ul-sidebar-w:       220px;
}

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--ul-font-body);
    color: var(--ul-text);
    background: var(--ul-bg);
    line-height: 1.6;
}

a {
    color: var(--ul-primary);
    text-decoration: none;
}

img { max-width: 100%; height: auto; }

/* ============================================
   LAYOUT
   ============================================ */

.ul-container {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 0 32px;
}

/* ============================================
   NAVIGATION
   ============================================ */

.ul-nav {
    background: var(--ul-nav);
    position: sticky;
    top: 0;
    z-index: 1000;
}

.ul-nav-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 0 32px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ul-nav-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
}

.ul-nav-logo-icon {
    background: var(--ul-primary);
    width: 26px;
    height: 26px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--ul-font-ui);
    font-weight: 800;
    font-size: 14px;
    color: #fff;
    flex-shrink: 0;
}

.ul-nav-logo-text {
    font-family: var(--ul-font-ui);
    font-weight: 700;
    font-size: 17px;
    color: var(--ul-nav-text);
    letter-spacing: -0.02em;
}

.ul-nav-logo-text em {
    font-style: normal;
    font-weight: 400;
    color: var(--ul-primary);
}

.ul-nav-links {
    display: flex;
    align-items: center;
    gap: 24px;
    list-style: none;
    position: relative;
}

.ul-nav-links > li {
    position: relative;
}

.ul-nav-links > li > a {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: rgba(255,255,255,0.7);
    text-decoration: none;
    transition: color 0.15s;
    display: flex;
    align-items: center;
    gap: 3px;
}

.ul-nav-links > li > a:hover,
.ul-nav-links > li:hover > a {
    color: #fff;
}

.ul-nav-links > li > a .arrow {
    font-size: 9px;
    opacity: 0.7;
}

/* Dropdown */
.ul-dropdown {
    display: none;
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius);
    box-shadow: var(--ul-shadow-md);
    min-width: 200px;
    padding: 8px 0;
    z-index: 100;
    max-width: calc(100vw - 32px);
}

/* Invisible bridge between nav item and dropdown so mouse can travel without losing hover */
.ul-dropdown::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 0;
    right: 0;
    height: 8px;
}

.ul-dropdown-wide {
    width: min(560px, calc(100vw - 32px));
    min-width: 0;
    padding: 16px;
    left: auto;
    right: 0;
    transform: none;
    overflow: hidden;
}

.ul-dropdown-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
    gap: 2px 24px;
}

.ul-dropdown-heading {
    font-family: var(--ul-font-ui);
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ul-text-muted);
    padding: 8px 12px 6px;
    grid-column: 1 / -1;
}

.ul-dropdown a {
    display: block;
    padding: 5px 14px;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    color: var(--ul-text-body);
    border-radius: var(--ul-radius-sm);
    transition: background 0.1s;
}

.ul-dropdown a:hover {
    background: var(--ul-bg);
    color: var(--ul-primary);
}

.ul-dropdown.ul-dropdown-scrollable {
    max-height: 380px;
    overflow-y: auto;
    left: auto;
    right: 0;
    transform: none;
}

.ul-nav-links > li:hover > .ul-dropdown {
    display: block;
}

/* Mobile nav toggle */
.ul-nav-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ul-nav-text);
    font-size: 1.4rem;
    cursor: pointer;
    padding: 8px;
}

/* ============================================
   HERO (Homepage)
   ============================================ */

.ul-hero {
    background: radial-gradient(ellipse at 50% 100%, rgba(232,87,61,0.06) 0%, transparent 50%),
                linear-gradient(180deg, var(--ul-nav) 0%, var(--ul-nav-dark) 100%);
    padding: 28px 32px 32px;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.ul-hero::before {
    content: '';
    position: absolute;
    top: -40px;
    left: 12%;
    width: 140px;
    height: 140px;
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,0.03);
    pointer-events: none;
}

.ul-hero::after {
    content: '';
    position: absolute;
    bottom: -30px;
    right: 18%;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: rgba(232,87,61,0.03);
    pointer-events: none;
}

.ul-hero-sub {
    font-family: var(--ul-font-body);
    font-size: 14px;
    /* 0.45 -> 0.70 (2026-07-29): was 3.61:1 on the #2C3E50 end of the hero
       gradient. This line is the site's value proposition; it now reads 6.32:1. */
    color: rgba(255,255,255,0.70);
    margin-bottom: 4px;
    line-height: 1.4;
}

.ul-hero h1 {
    font-family: var(--ul-font-ui);
    font-size: 22px;
    font-weight: 600;
    color: rgba(255,255,255,0.8);
    letter-spacing: -0.02em;
    margin-bottom: 18px;
    line-height: 1.3;
}

.ul-hero h1 strong {
    color: var(--ul-primary);
    font-weight: 700;
}

.ul-hero-search {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    gap: 10px;
}

.ul-hero-search-wrap {
    flex: 1;
    position: relative;
    border-radius: 12px;
    box-shadow: 0 6px 28px rgba(0,0,0,0.22);
    transition: box-shadow 0.2s;
}

.ul-hero-search-wrap:focus-within {
    box-shadow: 0 0 0 3px rgba(232,87,61,0.27), 0 8px 32px rgba(0,0,0,0.25);
}

.ul-hero-search-wrap svg {
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--ul-text-light);
}

.ul-hero-search-input {
    width: 100%;
    padding: 17px 18px 17px 50px;
    border-radius: 12px;
    border: none;
    font-family: var(--ul-font-body);
    font-size: 16px;
    color: var(--ul-text);
    background: #fff;
    outline: none;
    box-sizing: border-box;
}

.ul-hero-search-btn {
    padding: 17px 38px;
    border-radius: 12px;
    border: none;
    background: var(--ul-primary);
    color: #fff;
    font-family: var(--ul-font-ui);
    font-weight: 700;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(232,87,61,0.4);
    transition: background 0.15s, transform 0.15s;
    white-space: nowrap;
}

.ul-hero-search-btn:hover {
    background: var(--ul-primary-hover);
    transform: translateY(-1px);
}

.ul-hero-hint {
    font-family: var(--ul-font-body);
    font-size: 12px;
    /* 0.30 -> 0.62 (2026-07-29): was 2.43:1, the worst text on the homepage. */
    color: rgba(255,255,255,0.62);
    margin-top: 8px;
    font-style: italic;
}
.ul-hero-hint-link {
    color: rgba(255,255,255,0.78);   /* 0.45 -> 0.78 (2026-07-29): was 3.61:1 */
    text-decoration: none;
    border-bottom: 1px solid rgba(255,255,255,0.2);
}
.ul-hero-hint-link:hover { color: rgba(255,255,255,0.7); border-bottom-color: rgba(255,255,255,0.5); }

.ul-hero-searches {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    flex-wrap: wrap;
    justify-content: center;
}

.ul-hero-searches-label {
    font-size: 11px;
    color: rgba(255,255,255,0.62);   /* 0.25 -> 0.62 (2026-07-29): was 2.05:1 */
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
}

.ul-popular-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.ul-hero-tag {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    background: transparent;
    border: 1px solid rgba(255,255,255,0.12);
    padding: 3px 10px;
    border-radius: 20px;
    text-decoration: none;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    white-space: nowrap;
}

.ul-hero-tag:hover {
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.7);
    border-color: rgba(255,255,255,0.2);
}

/* "+N this week" suffix on the favourites tags (2026-08-02) — the freshness
   signal that replaced the added-in-24h stat */
.ul-hero-tag-new { color: #6ee7a0; font-weight: 600; font-size: 0.92em; }

/* "In demand" column (2026-08-02) — image-bearing favourites as a third
   column between the reviews and the sidebar. The credit strip is the CC
   attribution for the Openverse/Commons shots; do not remove it without
   checking master_images.needs_attribution. */
.ul-home-favs { width: 250px; flex-shrink: 0; }
.ul-fav2-card { display: block; text-decoration: none; margin-bottom: 14px; }
.ul-fav2-img { position: relative; display: block; height: 132px;
    border-radius: 10px; overflow: hidden; background: #f8fafc;
    border: 1px solid var(--ul-border); transition: border-color 0.15s; }
.ul-fav2-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ul-fav2-card:hover .ul-fav2-img { border-color: var(--ul-primary); }
.ul-fav-card-credit { position: absolute; left: 0; right: 0; bottom: 0;
    font-size: 9px; line-height: 1; color: rgba(255,255,255,0.78);
    background: linear-gradient(transparent, rgba(0,0,0,0.72));
    padding: 12px 7px 4px; text-align: right;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ul-fav2-name { display: block; margin-top: 6px; font-size: 13px;
    font-weight: 600; line-height: 1.35; color: var(--ul-text); }
.ul-fav2-new { color: #2D7A4F; font-size: 11.5px; font-weight: 600; white-space: nowrap; }
@media (max-width: 1024px) {
    .ul-home-favs { width: 210px; }
    .ul-fav2-img { height: 112px; }
}
@media (max-width: 900px) {
    .ul-home-favs { width: 100%; display: grid;
        grid-template-columns: 1fr 1fr; gap: 12px; }
    .ul-home-favs .ul-blog-header { grid-column: 1 / -1; margin-bottom: 2px; }
    .ul-fav2-card { margin-bottom: 0; }
}
/* Popular sidebar sublines (2026-08-02): "typically £X · N listings" wraps
   to its own line under the name — the row is space-between flex and a
   320px column can't hold both on one line */
.ul-brands-section .ul-brand-item { flex-wrap: wrap; }
.ul-brands-section .ul-brand-item .ul-brand-count { width: 100%; margin-top: 2px; }

/* ============================================
   HERO — BROWSE ROW (below search bar)
   ============================================ */
.ul-hero-browse-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    max-width: 600px;
    margin: 16px auto 0;
    padding: 14px 0;
}
.ul-hero-browse-btns-group {
    display: flex;
    gap: 8px;
    justify-content: center;
}
.ul-hero-browse-btn {
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 8px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.ul-hero-browse-btn:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.22);
}
.ul-hero-browse-btn-icon {
    width: 28px;
    height: 28px;
    border-radius: 7px;
    background: var(--ul-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.ul-hero-browse-btn-icon svg { stroke: #fff; }
.ul-hero-browse-btn-label {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: rgba(255,255,255,0.85);
    white-space: nowrap;
}
.ul-hero-browse-btn-count {
    font-size: 11px;
    color: rgba(255,255,255,0.35);
    white-space: nowrap;
}
@media (max-width: 480px) {
    .ul-hero-browse-row-label { display: none; }
    .ul-hero-browse-btn-count { display: none; }
}

/* ============================================
   STATS BAR
   ============================================ */

.ul-stats-bar {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
    padding: 20px 32px;
}

.ul-stats-inner {
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    justify-content: center;
}

.ul-stat {
    flex: 1;
    text-align: center;
    padding: 0 24px;
    border-right: 1px solid var(--ul-border-light);
}

.ul-stat:last-child {
    border-right: none;
}

.ul-stat-value {
    font-family: var(--ul-font-ui);
    font-size: 22px;
    font-weight: 800;
    color: var(--ul-primary);
    letter-spacing: -0.02em;
}

.ul-stat-label {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    color: var(--ul-text-muted);
    font-weight: 500;
    margin-top: 2px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

/* ============================================
   HOMEPAGE MAIN CONTENT
   ============================================ */

.ul-home-main {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 36px 32px;
}

/* Section headers with divider line */
.ul-section-header {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 14px;
}

.ul-section-header h2 {
    font-family: var(--ul-font-ui);
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--ul-text-muted);
    white-space: nowrap;
}

.ul-section-divider {
    flex: 1;
    height: 1px;
    background: var(--ul-border-light);
}

/* Popular searches */
.ul-popular-section {
    margin-bottom: 40px;
}

.ul-popular-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ul-popular-tag {
    display: inline-block;
    padding: 7px 16px;
    background: var(--ul-surface);
    border-radius: 20px;
    border: 1px solid var(--ul-border);
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--ul-text-body);
    text-decoration: none;
    transition: all 0.15s;
}

.ul-popular-tag:hover {
    border-color: var(--ul-primary);
    color: var(--ul-primary);
    background: var(--ul-primary-subtle);
}

/* Two-column layout */
.ul-home-columns {
    display: flex;
    gap: 32px;
    align-items: flex-start;
}

/* ============================================
   BLOG SECTION
   ============================================ */

.ul-blog-section {
    flex: 1;
}

.ul-blog-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: 16px;
}

.ul-blog-header h2 {
    font-family: var(--ul-font-ui);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
}

.ul-blog-all-link {
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ul-primary);
    text-decoration: none;
}

.ul-blog-posts {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ul-blog-card {
    display: flex;
    background: var(--ul-surface);
    border-radius: var(--ul-radius);
    border: 1px solid var(--ul-border);
    text-decoration: none;
    transition: box-shadow 0.15s, border-color 0.15s;
    overflow: hidden;
    min-height: 132px;
}

.ul-blog-card:hover {
    box-shadow: var(--ul-shadow-md);
    border-color: var(--ul-border-light);
}

.ul-blog-card-icon {
    width: 150px;
    flex-shrink: 0;
    border-right: 1px solid var(--ul-border-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
}

/* Branded fallback for posts with no feature image — a subtle UsedLens
   mark on the card's brand tint, in place of the broken-looking camera
   icon. Same footprint as .ul-blog-card-img so cards stay uniform. */
.ul-blog-card-fallback {
    width: 150px;
    flex-shrink: 0;
    border-right: 1px solid var(--ul-border-light);
    background: var(--ul-primary-subtle);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}
.ul-blog-card-fallback-mark {
    width: 30px;
    height: 30px;
    border-radius: var(--ul-radius-sm);
    background: var(--ul-primary);
    color: #fff;
    font-family: var(--ul-font-ui);
    font-weight: 800;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}
.ul-blog-card-fallback-text {
    font-family: var(--ul-font-ui);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: -0.02em;
    color: var(--ul-text-light);
}
.ul-blog-card-fallback-text em {
    font-style: normal;
    color: var(--ul-primary);
    opacity: 0.85;
}

.ul-blog-card-body {
    padding: 18px 20px;
    flex: 1;
}

.ul-blog-card-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.ul-blog-tag {
    font-family: var(--ul-font-ui);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.ul-blog-date {
    font-family: var(--ul-font-body);
    font-size: 12px;
    color: var(--ul-text-light);
}

.ul-blog-card h3 {
    font-family: var(--ul-font-ui);
    font-size: 15px;
    font-weight: 600;
    color: var(--ul-text);
    margin-bottom: 6px;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.ul-blog-card p {
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-muted);
    line-height: 1.55;
    margin: 0;
}

/* ============================================
   HOMEPAGE RIGHT SIDEBAR
   ============================================ */

.ul-home-sidebar {
    width: 320px;
    flex-shrink: 0;
}

/* Browse by Brand */
.ul-brands-section {
    margin-bottom: 28px;
}

.ul-brands-section h2,
.ul-about-section h2 {
    font-family: var(--ul-font-ui);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 14px;
}

.ul-brand-list {
    background: var(--ul-surface);
    border-radius: var(--ul-radius);
    border: 1px solid var(--ul-border);
    padding: 4px;
    box-shadow: var(--ul-shadow);
}

.ul-brand-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 14px;
    border-radius: 7px;
    text-decoration: none;
    transition: background 0.1s;
}

.ul-brand-item:hover {
    background: var(--ul-surface-alt);
}

.ul-brand-name {
    font-family: var(--ul-font-ui);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ul-text);
}

.ul-brand-count {
    font-family: var(--ul-font-ui);
    font-size: 11.5px;
    color: var(--ul-text-light);
    font-weight: 500;
}

/* About box */
.ul-about-section h2 {
    margin-bottom: 12px;
}

.ul-about-box {
    background: var(--ul-surface);
    border-radius: var(--ul-radius);
    border: 1px solid var(--ul-border);
    padding: 20px 18px;
    box-shadow: var(--ul-shadow);
}

.ul-about-box p {
    font-family: var(--ul-font-body);
    font-size: 13.5px;
    color: var(--ul-text-body);
    line-height: 1.65;
    margin-bottom: 14px;
}

.ul-about-box p:last-of-type {
    margin-bottom: 14px;
}

.ul-about-link {
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ul-primary);
    text-decoration: none;
}

/* ============================================
   RETAILER DOCK
   ============================================ */

.ul-dock-section {
    padding: 36px 32px 40px;
    text-align: center;
}

.ul-dock-label-row {
    display: flex;
    align-items: center;
    gap: 16px;
    max-width: 800px;
    margin: 0 auto 28px;
}

.ul-dock-label-row .ul-divider-line {
    flex: 1;
    height: 1px;
    background: var(--ul-border-light);
}

.ul-dock-heading {
    font-family: var(--ul-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--ul-text-light);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.ul-dock-container {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    max-width: 800px;
    margin: 0 auto;
    padding: 28px 0 8px;
    height: 76px;
    cursor: default;
    position: relative;
    user-select: none;
}

.ul-dock-item-wrap {
    width: 48px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    position: relative;
    flex-shrink: 0;
}

.ul-dock-item-wrap + .ul-dock-item-wrap {
    margin-left: 10px;
}

.ul-dock-tooltip {
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 600;
    color: var(--ul-text);
    background: var(--ul-surface);
    padding: 4px 10px;
    border-radius: 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    opacity: 0;
    transition: opacity 0.12s;
    white-space: nowrap;
    pointer-events: none;
    z-index: 10;
}

.ul-dock-item-wrap:hover .ul-dock-tooltip {
    opacity: 1;
}

.ul-dock-icon {
    width: 48px;
    height: 48px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: width 0.06s ease-out, height 0.06s ease-out, border-radius 0.06s ease-out;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.ul-dock-icon span {
    font-family: var(--ul-font-ui);
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.25);
    pointer-events: none;
    font-size: 12px;
    transition: font-size 0.06s ease-out;
}

/* Logo variant — white background to show favicons cleanly */
.ul-dock-icon.ul-dock-logo {
    background: #ffffff !important;
    padding: 6px;
}

.ul-dock-icon.ul-dock-logo img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
    border-radius: 4px;
}

.ul-dock-caption {
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-faint);
    margin-top: 20px;
}

.ul-dock-see-all {
    display: inline-flex;
    align-items: center;
    font-family: var(--ul-font-ui);
    font-size: 12px;
    font-weight: 600;
    color: var(--ul-text-muted);
    text-decoration: none;
    white-space: nowrap;
    padding: 0 8px;
    border-left: 1px solid var(--ul-border);
    margin-left: 4px;
    height: 48px;
    transition: color 0.15s;
}
.ul-dock-see-all:hover { color: var(--ul-primary); }

/* ============================================
   SEARCH PAGE — TOP BAR
   ============================================ */

.ul-search-topbar {
    background: var(--ul-nav);
    position: sticky;
    top: 48px;
    z-index: 999;
}

.ul-search-topbar-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 6px 32px 10px;
}

.ul-search-bar-row {
    margin-left: calc(var(--ul-sidebar-w) + 24px);
    display: flex;
    gap: 10px;
}

.ul-search-bar-wrap {
    flex: 1;
    position: relative;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    transition: box-shadow 0.2s;
}

.ul-search-bar-wrap:focus-within {
    box-shadow: 0 0 0 2px rgba(232,87,61,0.5), 0 3px 12px rgba(0,0,0,0.15);
}

.ul-search-bar-wrap svg {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
}

.ul-search-bar-input {
    width: 100%;
    padding: 11px 14px 11px 40px;
    border-radius: 8px;
    border: none;
    font-family: var(--ul-font-body);
    font-size: 14px;
    color: var(--ul-text);
    background: #fff;
    outline: none;
    box-sizing: border-box;
}

.ul-search-bar-btn {
    padding: 11px 30px;
    border-radius: 8px;
    border: none;
    background: var(--ul-primary);
    color: #fff;
    font-family: var(--ul-font-ui);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    box-shadow: 0 2px 6px rgba(232,87,61,0.35);
    transition: background 0.15s;
    white-space: nowrap;
}

.ul-search-bar-btn:hover {
    background: var(--ul-primary-hover);
}

/* ============================================
   SEARCH PAGE — LAYOUT
   ============================================ */

.ul-search-layout {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 14px 32px 24px;
    display: flex;
    gap: 24px;
    align-items: flex-start;
}

/* ============================================
   FILTER SIDEBAR (Search page)
   ============================================ */

.ul-sidebar {
    width: var(--ul-sidebar-w);
    flex-shrink: 0;
    align-self: stretch;   /* tall containing block for the sticky alert card */
}

/* Toggle button — hidden on desktop */
.ul-sidebar-toggle {
    display: none;
}

.ul-toggle-chevron {
    margin-left: auto;
    transition: transform 0.2s ease;
}

.ul-sidebar.is-open .ul-toggle-chevron {
    transform: rotate(180deg);
}

.ul-sidebar-card {
    background: var(--ul-surface);
    border-radius: var(--ul-radius);
    border: 1px solid var(--ul-border);
    padding: 18px 16px;
    box-shadow: var(--ul-shadow);
}

.ul-filter-label {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ul-text-muted);
    margin-bottom: 10px;
}

.ul-filter-divider {
    height: 1px;
    background: var(--ul-border-light);
    margin: 18px 0;
}

.ul-filter-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 12px;
}

.ul-filter-action-btn {
    background: none;
    border: none;
    font-family: var(--ul-font-ui);
    font-size: 11.5px;
    font-weight: 500;
    color: var(--ul-primary);
    cursor: pointer;
    padding: 0;
}

.ul-filter-sep {
    color: var(--ul-border);
}

/* Custom checkbox */
.ul-check-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-body);
    cursor: pointer;
    padding: 2px 0;
    margin-bottom: 6px;
    line-height: 1.3;
}

.ul-check-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--ul-check-active);
    flex-shrink: 0;
    cursor: pointer;
}

.ul-merchant-list {
    max-height: 280px;
    overflow-y: auto;
}

/* Price inputs */
.ul-price-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ul-price-sep {
    color: var(--ul-text-light);
    font-size: 13px;
}

.ul-price-inputs {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-top: 6px;
}

.ul-price-input {
    flex: 1;
    min-width: 0;
    padding: 7px 10px;
    border-radius: var(--ul-radius-sm);
    border: 1px solid var(--ul-border);
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text);
    background: var(--ul-bg);
    outline: none;
}

.ul-price-input:focus {
    border-color: var(--ul-check-active);
}

.ul-price-input::-webkit-inner-spin-button,
.ul-price-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
}

.ul-price-input[type=number] { -moz-appearance: textfield; }

.ul-filter-input {
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--ul-radius-sm);
    border: 1px solid var(--ul-border);
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text);
    background: var(--ul-bg);
    outline: none;
}

.ul-filter-input:focus {
    border-color: var(--ul-check-active);
}

.ul-filter-select {
    width: 100%;
    padding: 7px 10px;
    border-radius: var(--ul-radius-sm);
    border: 1px solid var(--ul-border);
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-body);
    background: var(--ul-bg);
    /* `outline: none` removed 2026-07-29 — same reason as .ul-sort-select. */
}

/* ============================================
   ALERT SIGNUP  (_alert_signup.cfm)
   Shared partial, two variants: sidebar + feature
   ============================================ */

/* Accessibility utility: present for screen readers, hidden visually */
.ul-vis-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

/* Shared form bits */
.ul-alert-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: var(--ul-radius-sm);
    border: 1px solid var(--ul-border);
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text);
    background: var(--ul-surface);
    outline: none;
    box-sizing: border-box;
}

.ul-alert-input:focus {
    border-color: var(--ul-primary);
    box-shadow: 0 0 0 2px var(--ul-primary-subtle);
}

.ul-alert-btn {
    width: 100%;
    padding: 9px 0;
    border-radius: var(--ul-radius-sm);
    border: 1.5px solid var(--ul-primary);
    background: var(--ul-primary);
    color: #fff;
    font-family: var(--ul-font-ui);
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.ul-alert-btn:hover {
    background: var(--ul-primary-hover);
    border-color: var(--ul-primary-hover);
}

.ul-alert-message {
    font-size: 12px;
    margin-top: 8px;
    font-family: var(--ul-font-body);
    color: var(--ul-text-muted);
    min-height: 1em;
}

.ul-alert-message.is-ok  { color: var(--ul-accent); }
.ul-alert-message.is-err { color: var(--ul-primary); }

.ul-alert-icon { color: var(--ul-primary); flex-shrink: 0; }

/* ── Sidebar variant: compact, sticky card ─────────────────────────────────
   Rendered as a sibling of .ul-sidebar-card so position:sticky has a tall
   containing block (the stretched .ul-sidebar) to stick within. */
.ul-alert-card {
    margin-top: 16px;
    padding: 16px 14px;
    background: var(--ul-primary-subtle);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius);
    box-shadow: var(--ul-shadow);
    position: sticky;
    top: 116px;                        /* clears sticky nav (48) + search topbar */
    max-height: calc(100vh - 132px);   /* short-viewport guard: never overruns */
    overflow-y: auto;
    box-sizing: border-box;
}

.ul-alert-card-head {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-bottom: 6px;
}

.ul-alert-card-title {
    font-family: var(--ul-font-ui);
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ul-primary);
}

.ul-alert-card-copy {
    font-family: var(--ul-font-body);
    font-size: 12px;
    line-height: 1.45;
    color: var(--ul-text-body);
    margin: 0 0 10px;
}

.ul-alert-card .ul-alert-input { margin-bottom: 8px; }

/* ── Feature variant: tidy empty-listings card ─────────────────────────────
   Sits top-left of the content column, where row 1 of the table would begin.
   White surface + faint border (not a heavy pink block); the orange shows only
   on the icon. Height is driven by content. */
.ul-alert-feature {
    text-align: center;
    width: 100%;               /* fills the content column, like the table */
    margin: 0;
    padding: 26px 24px;        /* banner-card: wide, not tall */
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius);
    box-shadow: var(--ul-shadow);
    box-sizing: border-box;
}

/* Inner stack stays constrained + centred inside the wide card */
.ul-alert-feature-inner {
    max-width: 520px;
    margin: 0 auto;
}

/* Quiet secondary escape link — not a competing primary button */
.ul-alert-secondary {
    display: inline-block;
    margin-top: 14px;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ul-text-muted);
    text-decoration: none;
}

.ul-alert-secondary:hover {
    color: var(--ul-primary);
    text-decoration: underline;
}

/* Orange bell in a subtle tinted disc — the single accent of colour */
.ul-alert-feature .ul-alert-icon {
    color: var(--ul-primary);
    background: var(--ul-primary-subtle);
    border-radius: 50%;
    padding: 9px;
    width: 22px;
    height: 22px;
    box-sizing: content-box;
    margin-bottom: 10px;
}

.ul-alert-feature h2 {
    font-family: var(--ul-font-ui);
    font-size: 18px;
    font-weight: 700;
    color: var(--ul-nav);
    margin: 0 0 6px;
}

.ul-alert-context {
    font-family: var(--ul-font-body);
    font-size: 14px;
    line-height: 1.45;
    color: var(--ul-text-body);
    margin: 0 auto 16px;
    max-width: 40ch;
}

.ul-alert-form--feature { margin: 0; }

.ul-alert-form--feature .ul-alert-field-row {
    display: flex;
    gap: 8px;
}

/* Input and button: identical heights + radius, inline on desktop */
.ul-alert-form--feature .ul-alert-input {
    flex: 1;
    height: 42px;
    padding: 0 12px;
    font-size: 14px;
}

.ul-alert-btn--feature {
    width: auto;
    flex-shrink: 0;
    height: 42px;
    padding: 0 20px;
    font-size: 14px;
    box-shadow: 0 2px 6px rgba(232,87,61,0.30);
}

.ul-alert-reassure {
    font-family: var(--ul-font-body);
    font-size: 12.5px;
    color: var(--ul-text-muted);
    margin: 8px 0 0;
}

.ul-alert-feature .ul-alert-message { text-align: center; margin-top: 8px; }

/* Expand/collapse retailers */
.ul-expand-btn {
    background: none;
    border: none;
    font-family: var(--ul-font-body);
    font-size: 12px;
    color: var(--ul-text-muted);
    cursor: pointer;
    padding: 8px 0 2px 24px;
}

/* ============================================
   RESULTS AREA
   ============================================ */

.ul-results-main {
    flex: 1;
    min-width: 0;
}

.ul-results-toolbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding: 0 2px;
}

.ul-results-count-text {
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-muted);
}

.ul-results-count-text strong {
    color: var(--ul-text);
    font-weight: 600;
}

.ul-sort-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ul-sort-label {
    font-family: var(--ul-font-body);
    font-size: 12px;
    color: var(--ul-text-light);
}

.ul-sort-select {
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid var(--ul-border);
    font-family: var(--ul-font-body);
    font-size: 12px;
    color: var(--ul-text);
    background: var(--ul-surface);
    /* `outline: none` removed 2026-07-29. It killed the only focus indicator on
       the sort dropdown of every results page and defined no replacement, so the
       control was invisible to keyboard users. The global :focus-visible rule at
       the end of this file now handles it. */
}

/* Results table */
.ul-results-table-wrap {
    background: var(--ul-surface);
    border-radius: var(--ul-radius);
    border: 1px solid var(--ul-border);
    box-shadow: var(--ul-shadow);
    overflow: hidden;
}

.ul-results-table-head {
    display: grid;
    grid-template-columns: 1fr 110px 140px;
    padding: 10px 16px;
    background: var(--ul-surface-alt);
    border-bottom: 1px solid var(--ul-border);
    font-family: var(--ul-font-ui);
    font-size: 10.5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ul-text-light);
}

.ul-results-row {
    display: grid;
    grid-template-columns: 1fr 110px 140px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--ul-border-light);
    align-items: center;
    cursor: pointer;
    transition: background 0.1s;
    text-decoration: none;
    color: inherit;
}

.ul-results-row:last-child {
    border-bottom: none;
}

.ul-results-row:hover {
    background: var(--ul-row-hover);
}

/* Visited state — row has been clicked before */
.ul-results-row:visited .ul-result-name {
    color: #78899A;
}

.ul-result-name-cell {
    display: flex;
    align-items: center;
    gap: 7px;
    padding-right: 12px;
    flex-wrap: wrap;
    min-width: 0;
}

.ul-result-name {
    font-family: var(--ul-font-body);
    font-size: 13.5px;
    font-weight: 500;
    color: var(--ul-text);
    line-height: 1.35;
}

.ul-badge-new {
    font-family: var(--ul-font-ui);
    font-size: 9px;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ul-primary);
    color: #fff;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    flex-shrink: 0;
    white-space: nowrap;
}

.ul-badge-stock {
    font-family: var(--ul-font-ui);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: var(--ul-surface-alt);
    color: var(--ul-text-muted);
    border: 1px solid var(--ul-border);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Expandable group rows */
.ul-results-row-group {
    cursor: pointer;
    user-select: none;
}
.ul-results-row-group:hover { background: var(--ul-row-hover); }
.ul-group-chevron {
    display: inline-block;
    margin-left: 6px;
    vertical-align: middle;
    transition: transform 0.2s;
    color: var(--ul-text-light);
    flex-shrink: 0;
}
.ul-results-row-group--open .ul-group-chevron {
    transform: rotate(180deg);
}
.ul-group-children {
    display: none;
}
.ul-group-children.open {
    display: block;
}
.ul-results-row-child {
    background: var(--ul-surface-alt);
    border-left: 3px solid var(--ul-border);
    padding-left: 28px !important;
}
.ul-results-row-child:hover { background: #EDF1F5; }
.ul-result-listed-date {
    font-size: 11px;
    color: var(--ul-text-light);
    white-space: nowrap;
    flex-shrink: 0;
}

.ul-badge-condition {
    font-family: var(--ul-font-ui);
    font-size: 10px;
    font-weight: 600;
    padding: 2px 7px;
    border-radius: 4px;
    flex-shrink: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 140px;
    letter-spacing: 0.02em;
}

.ul-badge-condition.excellent {
    background: var(--ul-excellent-bg);
    color: var(--ul-excellent-text);
}

.ul-badge-condition.good {
    background: var(--ul-good-bg);
    color: var(--ul-good-text);
}

.ul-result-price {
    font-family: var(--ul-font-ui);
    font-weight: 700;
    font-size: 14px;
    color: var(--ul-text);
    letter-spacing: -0.01em;
}

.ul-result-price.reduced {
    color: var(--ul-reduced-text);
}

.ul-result-old-price {
    display: block;
    margin-top: 2px;
    font-family: var(--ul-font-ui);
    font-size: 11px;
    color: var(--ul-text-faint);
    text-decoration: line-through;
}

.ul-result-merchant {
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-muted);
}

.ul-result-merchant-mobile {
    display: none;
}

/* Results footer */
.ul-results-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 14px;
    padding: 0 2px;
}


/* ============================================
   PAGINATION
   ============================================ */

.ul-pagination {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
}

.ul-page-btn {
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    border-radius: var(--ul-radius-sm);
    border: 1px solid var(--ul-border);
    background: var(--ul-surface);
    color: var(--ul-text-muted);
    font-family: var(--ul-font-ui);
    font-weight: 500;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.15s;
}

.ul-page-btn:hover:not(:disabled) {
    border-color: var(--ul-primary);
    color: var(--ul-primary);
}

.ul-page-btn.active {
    background: var(--ul-primary);
    border-color: var(--ul-primary);
    color: #fff;
}

.ul-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* ============================================
   LOADING / EMPTY STATES
   ============================================ */

.ul-loading-state {
    text-align: center;
    padding: 48px 20px;
    color: var(--ul-text-muted);
}

.ul-spinner {
    display: inline-block;
    width: 28px;
    height: 28px;
    border: 2.5px solid var(--ul-border);
    border-top-color: var(--ul-primary);
    border-radius: 50%;
    animation: ul-spin 0.7s linear infinite;
    margin-bottom: 12px;
}

@keyframes ul-spin {
    to { transform: rotate(360deg); }
}

.ul-empty-state {
    text-align: center;
    padding: 48px 20px;
}

.ul-empty-state h3 {
    font-family: var(--ul-font-ui);
    font-size: 16px;
    color: var(--ul-text-light);
    margin-bottom: 8px;
}

.ul-empty-state p {
    font-family: var(--ul-font-body);
    font-size: 14px;
    color: var(--ul-text-faint);
}

/* Intro state on search page */
.ul-search-intro {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.ul-intro-card {
    background: var(--ul-surface);
    border-radius: var(--ul-radius);
    border: 1px solid var(--ul-border);
    padding: 24px 28px;
    box-shadow: var(--ul-shadow);
}

.ul-intro-card h2 {
    font-family: var(--ul-font-ui);
    font-size: 18px;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 8px;
}

.ul-intro-card h3 {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ul-text-muted);
    margin: 0 0 14px;
}

.ul-intro-card p {
    font-family: var(--ul-font-body);
    font-size: 14px;
    color: var(--ul-text-body);
    line-height: 1.7;
    margin: 0 0 10px;
}
.ul-intro-card p:last-child { margin-bottom: 0; }
.ul-intro-card p a { color: var(--ul-primary); text-decoration: none; }
.ul-intro-card p a:hover { text-decoration: underline; }

/* Popular searches grid */
.ul-popular-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px 24px;
}

.ul-popular-heading {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ul-text-muted);
    margin-bottom: 8px;
}

.ul-popular-grid a {
    display: block;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    color: var(--ul-primary);
    text-decoration: none;
    padding: 3px 0;
}
.ul-popular-grid a:hover { text-decoration: underline; }

/* About card CTA */
.ul-intro-retailer-link {
    display: inline-block;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ul-primary) !important;
    text-decoration: none !important;
}
.ul-intro-retailer-link:hover { text-decoration: underline !important; }

@media (max-width: 640px) {
    .ul-popular-grid { grid-template-columns: 1fr 1fr; }
    .ul-intro-card { padding: 20px 18px; }
}

/* ============================================
   FOOTER
   ============================================ */

.ul-footer {
    padding: 28px 32px;
    border-top: 1px solid var(--ul-border-light);
    background: var(--ul-surface);
    margin-top: 24px;
}

.ul-footer-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
}

.ul-footer-brand {
    font-family: var(--ul-font-ui);
    font-weight: 700;
    font-size: 15px;
    color: var(--ul-text);
    letter-spacing: -0.02em;
    text-decoration: none;
}

.ul-footer-brand em {
    font-style: normal;
    font-weight: 400;
    color: var(--ul-primary);
}

.ul-footer-tagline {
    font-family: var(--ul-font-body);
    font-size: 12px;
    color: var(--ul-text-light);
    margin-top: 4px;
}

.ul-footer-links-row {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.ul-footer-links-row a {
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ul-text-muted);
    text-decoration: none;
    transition: color 0.15s;
}

.ul-footer-links-row a:hover {
    color: var(--ul-text);
}

.ul-footer-disclosure {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    color: var(--ul-text-light);
    margin: 4px 0 0;
    line-height: 1.6;
    width: 100%;
    border-top: 1px solid var(--ul-border-light);
    padding-top: 12px;
}
.ul-footer-disclosure a {
    color: var(--ul-text-light);
    text-decoration: underline;
}
.ul-footer-disclosure a:hover {
    color: var(--ul-text-muted);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 1024px) {
    .ul-home-sidebar {
        width: 280px;
    }
}

@media (max-width: 900px) {
    .ul-container,
    .ul-hero,
    .ul-stats-bar,
    .ul-home-main,
    .ul-dock-section,
    .ul-footer {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ul-home-columns {
        flex-direction: column;
    }

    .ul-home-sidebar {
        width: 100%;
    }

    .ul-search-layout {
        flex-direction: column;
        padding-left: 20px;
        padding-right: 20px;
    }

    .ul-sidebar {
        width: 100%;
        position: static;
    }

    /* Sidebar stacks below the listings — the alert card drops its sticky
       behaviour and sits as a normal full-width card. */
    .ul-alert-card {
        position: static;
        max-height: none;
        margin-top: 12px;
        margin-bottom: 20px;   /* breathing room before the results below */
    }

    /* De-dup: in the empty state the columns stack, so the prominent empty-state
       card and the sidebar's GET ALERTS card would collide. Suppress the sidebar
       one here only — the feature card becomes the single alert capture. (Desktop
       keeps both, in separate columns; populated pages have no --empty class.) */
    /* !important beats the inline display:block that usedlens.js sets on
       #ulAlertSection during init — scoped to empty + narrow only. */
    .ul-search-layout--empty .ul-alert-card {
        display: none !important;
    }

    /* The layout uses align-items:flex-start, so when columns stack the content
       column shrinks to its content width. Force it full-width in the empty
       state so the banner-card (and its form) fill the row. */
    .ul-search-layout--empty .ul-results-main {
        width: 100%;
    }

    /* Feature variant goes full-width and stacks on small screens */
    .ul-alert-feature {
        max-width: none;
        padding: 24px 20px;
    }

    /* On the stacked layout the form fills the card width (no inset cap) */
    .ul-alert-feature-inner {
        max-width: none;
    }

    .ul-alert-form--feature .ul-alert-field-row {
        flex-direction: column;
    }

    /* Input: full width at the desktop height. flex:1 collapses height to one
       line in a column, so reset it and pin the height. */
    .ul-alert-form--feature .ul-alert-input {
        flex: none;
        width: 100%;
        height: 42px;
    }

    /* Button: full-width block action, flush under the field (matches its width) */
    .ul-alert-btn--feature {
        width: 100%;
    }

    /* Collapse the empty message line so the helper sits close to the browse
       link, keeping the card's vertical rhythm even. */
    .ul-alert-feature .ul-alert-message:empty {
        min-height: 0;
        margin-top: 0;
    }

    /* Show toggle button, collapse card by default */
    .ul-sidebar-toggle {
        display: flex;
        align-items: center;
        gap: 8px;
        width: 100%;
        padding: 10px 14px;
        background: var(--ul-surface);
        border: 1px solid var(--ul-border-light);
        border-radius: var(--ul-radius);
        color: var(--ul-text);
        font-family: var(--ul-font-ui);
        font-size: 13px;
        font-weight: 600;
        cursor: pointer;
        margin-bottom: 0;
    }

    .ul-sidebar-card {
        display: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
        border-top: none;
    }

    .ul-sidebar.is-open .ul-sidebar-toggle {
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }

    .ul-sidebar.is-open .ul-sidebar-card {
        display: block;
        border-radius: 0 0 var(--ul-radius) var(--ul-radius);
    }

    .ul-search-bar-row {
        margin-left: 0;
    }

    #ulRecentSearchesBar {
        margin-left: 0 !important;
    }

    .ul-search-topbar-inner {
        padding-left: 20px;
        padding-right: 20px;
    }

    .ul-results-table-head,
    .ul-results-row {
        grid-template-columns: 1fr 90px 110px;
    }
}

@media (max-width: 640px) {
    .ul-nav-toggle {
        display: block;
    }

    .ul-nav-links {
        display: none;
        flex-direction: column;
        align-items: flex-start;
        position: absolute;
        top: 48px;
        left: 0;
        right: 0;
        background: var(--ul-nav);
        padding: 12px 20px 16px;
        border-top: 1px solid rgba(255,255,255,0.08);
        z-index: 999;
        gap: 0;
    }

    .ul-nav-links.open {
        display: flex;
    }

    .ul-nav-links > li > a {
        padding: 10px 0;
        font-size: 15px;
    }

    .ul-dropdown {
        position: static;
        box-shadow: none;
        border: none;
        background: transparent;
        padding: 0 0 0 16px;
    }

    .ul-dropdown a {
        color: rgba(255,255,255,0.6);
        font-size: 13px;
        padding: 4px 0;
    }

    .ul-hero h1 {
        font-size: 20px;
    }

    .ul-hero-search-wrap {
        border-radius: 10px;
    }

    .ul-hero-search-btn {
        padding: 0 20px;
        font-size: 15px;
    }

    .ul-stat-value {
        font-size: 18px;
    }

    .ul-dock-container {
        overflow-x: auto;
        justify-content: flex-start;
        padding-left: 16px;
    }

    .ul-results-table-head span:last-child,
    .ul-results-row .ul-result-merchant {
        display: none;
    }

    .ul-results-table-head,
    .ul-results-row {
        grid-template-columns: 1fr 90px;
    }

    .ul-result-merchant-mobile {
        display: block;
        width: 100%;
        font-size: 11px;
        color: var(--ul-text-faint);
        font-family: var(--ul-font-ui);
        margin-top: 2px;
    }

    .ul-badge-condition {
        max-width: 80px;
    }
}

/* ============================================
   CATEGORY INTRO PAGES (brand/type pages)
   ============================================ */

.ul-category-intro {
    padding: 36px 0 52px;
}

.ul-category-intro h1 {
    font-family: var(--ul-font-ui);
    font-size: 30px;
    font-weight: 700;
    letter-spacing: -0.025em;
    color: var(--ul-text);
    margin-bottom: 12px;
}

.ul-category-lead {
    font-size: 15px;
    color: var(--ul-text-body);
    line-height: 1.75;
    max-width: 700px;
    margin-bottom: 36px;
}

.ul-products-heading {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ul-text-muted);
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--ul-border);
}

.ul-product-cards {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.ul-product-card {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 13px 16px;
    background: var(--ul-surface);
    border: 1px solid var(--ul-border-light);
    border-radius: var(--ul-radius-sm);
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, background 0.15s;
}

.ul-product-card:hover {
    border-color: rgba(232,87,61,0.3);
    background: var(--ul-primary-subtle);
}

.ul-product-rank {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 700;
    color: var(--ul-text-faint);
    width: 16px;
    text-align: right;
    flex-shrink: 0;
}

.ul-product-info {
    flex: 1;
    min-width: 0;
}

.ul-product-name {
    display: block;
    font-family: var(--ul-font-ui);
    font-size: 14px;
    font-weight: 600;
    color: var(--ul-text);
    margin-bottom: 2px;
}

.ul-product-desc {
    display: block;
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    color: var(--ul-text-muted);
    line-height: 1.45;
}

.ul-product-arrow {
    font-size: 12px;
    color: var(--ul-primary);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s;
}

.ul-product-card:hover .ul-product-arrow {
    opacity: 1;
}

/* ============================================
   BLOG PAGES
   ============================================ */

/* Blog index header */
.ul-blog-page-header {
    padding: 40px 0 28px;
    border-bottom: 1px solid var(--ul-border-light);
    margin-bottom: 36px;
}
.ul-blog-page-header h1 {
    font-family: var(--ul-font-serif);
    font-size: 32px;
    font-weight: 600;
    color: var(--ul-text);
    margin: 0 0 10px;
}
.ul-blog-page-lead {
    font-family: var(--ul-font-ui);
    font-size: 15px;
    color: var(--ul-text-muted);
    margin: 0;
}

/* Blog index grid */
.ul-blog-index-grid {
    display: flex;
    flex-direction: column;
    gap: 1px;
    border: 1px solid var(--ul-border-light);
    border-radius: var(--ul-radius);
    overflow: hidden;
    margin-bottom: 36px;
}
.ul-blog-index-card {
    display: block;
    padding: 22px 24px;
    background: var(--ul-surface);
    text-decoration: none;
    color: inherit;
    border-bottom: 1px solid var(--ul-border-light);
    transition: background 0.15s;
}
.ul-blog-index-card:last-child { border-bottom: none; }
.ul-blog-index-card:hover { background: var(--ul-primary-subtle); }
.ul-blog-index-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}
.ul-blog-index-title {
    font-family: var(--ul-font-serif);
    font-size: 18px;
    font-weight: 600;
    color: var(--ul-text);
    margin: 0 0 6px;
    line-height: 1.35;
}
.ul-blog-index-excerpt {
    font-family: var(--ul-font-ui);
    font-size: 13.5px;
    color: var(--ul-text-muted);
    margin: 0 0 10px;
    line-height: 1.55;
}
.ul-blog-index-read {
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ul-primary);
}

/* Blog pagination */
.ul-blog-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 20px 0 40px;
}
.ul-blog-page-btn {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ul-primary);
    text-decoration: none;
    padding: 7px 16px;
    border: 1px solid rgba(232,87,61,0.3);
    border-radius: var(--ul-radius-sm);
    transition: background 0.15s;
}
.ul-blog-page-btn:hover { background: var(--ul-primary-subtle); }
.ul-blog-page-info {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    color: var(--ul-text-muted);
}

/* Empty blog state */
.ul-blog-empty {
    padding: 60px 0;
    text-align: center;
    color: var(--ul-text-muted);
    font-family: var(--ul-font-ui);
}

/* Blog post page */
.ul-blog-post {
    max-width: 720px;
    margin: 40px auto;
    padding-bottom: 60px;
}
.ul-blog-post-header {
    margin-bottom: 32px;
    padding-bottom: 24px;
    border-bottom: 1px solid var(--ul-border-light);
}
.ul-blog-post-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}
.ul-blog-back {
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    color: var(--ul-text-muted);
    text-decoration: none;
    margin-right: 4px;
}
.ul-blog-back:hover { color: var(--ul-primary); }
.ul-blog-post-title {
    font-family: var(--ul-font-serif);
    font-size: 30px;
    font-weight: 600;
    color: var(--ul-text);
    line-height: 1.3;
    margin: 0 0 12px;
}
.ul-blog-post-excerpt {
    font-family: var(--ul-font-ui);
    font-size: 16px;
    color: var(--ul-text-muted);
    line-height: 1.6;
    margin: 0 0 16px;
}
.ul-blog-post-byline {
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    color: var(--ul-text-faint);
}
.ul-blog-post-body {
    font-family: var(--ul-font-serif);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ul-text);
}
.ul-blog-post-body h2 { font-family: var(--ul-font-ui); font-size: 20px; font-weight: 700; margin: 32px 0 12px; }
.ul-blog-post-body h3 { font-family: var(--ul-font-ui); font-size: 16px; font-weight: 700; margin: 24px 0 8px; }
.ul-blog-post-body p { margin: 0 0 18px; }
.ul-blog-post-body a { color: var(--ul-primary); }
.ul-blog-post-body ul, .ul-blog-post-body ol { padding-left: 24px; margin: 0 0 18px; }
.ul-blog-post-body li { margin-bottom: 6px; }
.ul-blog-post-body strong { font-weight: 700; }
.ul-blog-post-footer {
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid var(--ul-border-light);
}
.ul-blog-back-link {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ul-primary);
    text-decoration: none;
}
.ul-blog-back-link:hover { text-decoration: underline; }

/* ============================================
   Static pages (about, privacy, contact)
   ============================================ */
.ul-static-page {
    max-width: 740px;
    margin: 48px auto 80px;
    padding: 0 16px;
}
.ul-static-narrow {
    max-width: 560px;
}
.ul-static-page h1 {
    font-family: var(--ul-font-body);
    font-size: 32px;
    font-weight: 500;
    color: var(--ul-text);
    margin: 0 0 24px;
    padding-bottom: 20px;
    border-bottom: 1px solid var(--ul-border);
}
.ul-static-page h2 {
    font-family: var(--ul-font-ui);
    font-size: 17px;
    font-weight: 700;
    color: var(--ul-text);
    margin: 36px 0 10px;
}
.ul-static-page p {
    font-family: var(--ul-font-body);
    font-size: 16px;
    line-height: 1.75;
    color: var(--ul-text-body);
    margin: 0 0 18px;
}
.ul-static-lead {
    font-size: 17px !important;
    line-height: 1.7 !important;
}
.ul-static-meta {
    font-size: 13px !important;
    color: var(--ul-text-muted) !important;
    font-family: var(--ul-font-ui) !important;
    margin-top: -12px !important;
    margin-bottom: 28px !important;
}
.ul-static-page ul {
    padding-left: 20px;
    margin: 0 0 18px;
}
.ul-static-page li {
    font-family: var(--ul-font-body);
    font-size: 15.5px;
    line-height: 1.7;
    color: var(--ul-text-body);
    margin-bottom: 6px;
}
.ul-static-page a {
    color: var(--ul-primary);
    text-decoration: none;
}
.ul-static-page a:hover {
    text-decoration: underline;
}
.ul-static-page strong {
    color: var(--ul-text);
    font-weight: 600;
}

/* Search tips grid on about page */
.ul-tip-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    margin: 20px 0 28px;
}
.ul-tip {
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius);
    padding: 16px 18px;
}
.ul-tip-label {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--ul-text-muted);
    margin-bottom: 8px;
}
.ul-tip-code {
    display: block;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    background: var(--ul-primary-subtle);
    color: var(--ul-primary);
    padding: 6px 10px;
    border-radius: 4px;
    margin-bottom: 10px;
}
.ul-tip p {
    font-family: var(--ul-font-ui) !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    color: var(--ul-text-muted) !important;
    margin: 0 !important;
}
@media (max-width: 560px) {
    .ul-tip-grid { grid-template-columns: 1fr; }
}

/* Contact form */
.ul-contact-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
}
.ul-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.ul-form-group label {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ul-text);
}
.ul-form-group input,
.ul-form-group select,
.ul-form-group textarea {
    font-family: var(--ul-font-ui);
    font-size: 15px;
    padding: 10px 14px;
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius-sm);
    background: var(--ul-surface);
    color: var(--ul-text);
    transition: border-color 0.15s;
    width: 100%;
    box-sizing: border-box;
}
.ul-form-group input:focus,
.ul-form-group select:focus,
.ul-form-group textarea:focus {
    outline: none;
    border-color: var(--ul-primary);
}
.ul-form-group textarea {
    resize: vertical;
    min-height: 140px;
    font-family: var(--ul-font-body);
    line-height: 1.6;
}
.ul-contact-submit {
    align-self: flex-start;
    background: var(--ul-primary);
    color: #fff;
    border: none;
    padding: 12px 28px;
    border-radius: 50px;
    font-family: var(--ul-font-ui);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s;
    margin-top: 4px;
}
.ul-contact-submit:hover {
    background: var(--ul-primary-hover);
    transform: translateY(-1px);
}
.ul-contact-errors {
    background: #fef2ef;
    border: 1px solid #f5c0b0;
    border-radius: var(--ul-radius-sm);
    padding: 14px 18px;
    margin-bottom: 20px;
    font-family: var(--ul-font-ui);
    font-size: 14px;
    color: #b83a25;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.ul-contact-success {
    text-align: center;
    padding: 48px 0;
}
.ul-contact-success-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--ul-excellent-bg);
    color: var(--ul-accent);
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}
.ul-contact-success h2 {
    font-family: var(--ul-font-ui);
    font-size: 22px;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 10px;
}
.ul-contact-success p {
    font-family: var(--ul-font-body);
    color: var(--ul-text-muted);
    margin: 0 0 24px;
}
.ul-contact-back {
    font-family: var(--ul-font-ui);
    font-size: 14px;
    color: var(--ul-primary);
    text-decoration: none;
}
.ul-contact-back:hover { text-decoration: underline; }

/* Featured image on homepage blog cards — a wider panel (paired with the
   card's min-height) so the photo actually reads instead of a thin sliver.
   cover crops gently to the card ratio, which keeps every card uniform. */
.ul-blog-card-img {
    width: 150px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    border-right: 1px solid var(--ul-border-light);
}

/* Trim the card panels on narrow phones so the body still has room. */
@media (max-width: 480px) {
    .ul-blog-card { min-height: 112px; }
    .ul-blog-card-img,
    .ul-blog-card-icon,
    .ul-blog-card-fallback { width: 104px; }
    .ul-blog-card-fallback-text { display: none; }
}

/* Featured image on blog index cards — override padding when image present */
.ul-blog-index-card {
    display: flex;
    padding: 0;
    overflow: hidden;
}
.ul-blog-index-card:not(:has(.ul-blog-index-img)) {
    padding: 22px 24px;
}
.ul-blog-index-img {
    width: 140px;
    flex-shrink: 0;
    background-size: cover;
    background-position: center;
    min-height: 120px;
}
.ul-blog-index-body {
    padding: 22px 24px;
    flex: 1;
}

/* ==========================================
   BRAND / CATEGORY HEADER
   ========================================== */
/* Breadcrumb */
.ul-breadcrumb {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}
.ul-breadcrumb-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 10px 32px 10px calc(var(--ul-sidebar-w) + 56px);
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--ul-text-light);
    flex-wrap: wrap;
}
.ul-breadcrumb-inner a {
    color: var(--ul-text-light);
    text-decoration: none;
}
.ul-breadcrumb-inner a:hover {
    color: var(--ul-primary);
}
.ul-breadcrumb-inner span:last-child {
    color: var(--ul-text);
}

/* Popular models strip (brand pages) */
.ul-popular-models {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}
.ul-popular-models-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 10px 32px 10px calc(var(--ul-sidebar-w) + 56px);
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.ul-popular-models-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--ul-text-light);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    margin-right: 4px;
}
.ul-popular-model-link {
    font-size: 13px;
    color: var(--ul-text);
    text-decoration: none;
    background: var(--ul-bg);
    border: 1px solid var(--ul-border);
    border-radius: 20px;
    padding: 3px 12px;
    white-space: nowrap;
    transition: border-color 0.15s, color 0.15s;
}
.ul-popular-model-link:hover {
    border-color: var(--ul-primary);
    color: var(--ul-primary);
}
@media (max-width: 768px) {
    .ul-popular-models-inner {
        padding: 10px 16px;
    }
}

/* GEO summary — kept for brand/category pages */
.ul-geo-summary {
    font-size: 14px;
    line-height: 1.5;
    color: var(--ul-text-light);
    max-width: 680px;
    margin-top: 6px;
    margin-bottom: 0;
}
.ul-geo-summary strong {
    color: var(--ul-text);
}

.ul-brand-header {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}

.ul-brand-header-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 14px 32px 13px calc(var(--ul-sidebar-w) + 56px);
    display: flex;
    align-items: baseline;
    gap: 24px;
    flex-wrap: wrap;
}

.ul-brand-header-text h1 {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 3px;
    letter-spacing: -0.01em;
}

.ul-brand-header-text p {
    font-size: 0.83rem;
    color: var(--ul-text-muted);
    margin: 0;
    line-height: 1.5;
}

.ul-brand-related {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    flex-shrink: 0;
    margin-left: auto;
}

.ul-brand-related-link {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--ul-primary);
    text-decoration: none;
    padding: 4px 10px;
    border: 1px solid rgba(232,87,61,0.3);
    border-radius: 20px;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}

.ul-brand-related-link:hover {
    background: rgba(232,87,61,0.06);
    border-color: var(--ul-primary);
}

@media (max-width: 768px) {
    .ul-breadcrumb-inner {
        padding: 8px 16px;
    }
    .ul-brand-header-inner {
        padding: 12px 16px 11px;
    }
    .ul-brand-related {
        margin-left: 0;
    }
}

/* Hero image on blog post page — respect the photo's native aspect ratio.
   Portrait renders tall, landscape renders wide; neither is cropped. The
   image is capped to the content width (max-width) and to roughly the
   viewport minus the sticky 48px nav (max-height) so a very tall portrait
   doesn't dominate the screen, then centred within the article column. */
.ul-blog-post-hero-img {
    display: block;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: calc(100vh - 120px);
    object-fit: contain;
    border-radius: 8px;
    margin: 20px auto 0;
}

/* ============================================
   MASTER PRODUCT PAGE
   ============================================ */

/* Header modifier for master product pages */
.ul-master-header .ul-brand-header-text {
    max-width: 760px;
}
.ul-master-header .ul-brand-header-inner {
    padding-bottom: 10px;
}
.ul-master-header .ul-brand-header-text h1 {
    margin-bottom: 6px;
}

/* Short summary line — kept for any legacy use */
.ul-master-summary {
    font-family: var(--ul-font-body);
    font-size: 0.9rem;
    color: var(--ul-text-body);
    line-height: 1.5;
    margin-top: 4px;
    margin-bottom: 6px;
}

/* ── Stats bar ─────────────────────────────────────────────────────────── */
.ul-stats-bar {
    border-top: 1px solid var(--ul-border);
    background: var(--ul-surface);
}

.ul-stats-bar-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 0 32px 0 calc(var(--ul-sidebar-w) + 56px);
    display: flex;
    align-items: stretch;
    gap: 0;
}

.ul-stat-item {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 10px 20px 10px 0;
    margin-right: 20px;
    border-right: 1px solid var(--ul-border);
    gap: 1px;
}
.ul-stat-item:last-child {
    border-right: none;
}

.ul-stat-item .ul-stat-value {
    font-family: var(--ul-font-ui);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ul-text);
    line-height: 1.2;
}

.ul-stat-price {
    color: var(--ul-primary);
}

.ul-stat-item .ul-stat-label {
    font-family: var(--ul-font-ui);
    font-size: 0.68rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ul-text-light);
    line-height: 1;
}

.ul-stat-item--reduced .ul-stat-value {
    color: var(--ul-reduced-text);
}
.ul-stat-item--reduced .ul-stat-label {
    color: var(--ul-reduced-text);
}

.ul-stats-bar--empty .ul-stats-bar-inner {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ul-stat-no-listings {
    font-family: var(--ul-font-ui);
    font-size: 0.85rem;
    color: var(--ul-text-muted);
    margin: 0;
}
.ul-stat-no-listings a {
    color: var(--ul-primary);
}

@media (max-width: 768px) {
    .ul-stats-bar-inner {
        padding: 0 16px;
        flex-wrap: wrap;
        gap: 0;
    }
    .ul-stat-item {
        padding: 8px 14px 8px 0;
        margin-right: 14px;
    }
    .ul-stat-item .ul-stat-value { font-size: 0.95rem; }
}

/* ---- Spec chips ---- */
.ul-spec-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 4px;
    margin-bottom: 0;
}

.ul-spec-chip {
    font-family: var(--ul-font-ui);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--ul-text-muted);
    background: var(--ul-surface-alt);
    border: 1px solid var(--ul-border);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    line-height: 1.4;
}

.ul-spec-chip--year {
    color: var(--ul-primary);
    background: var(--ul-primary-subtle);
    border-color: rgba(232,87,61,0.2);
}

/* ---- Reduced badge ---- */
.ul-reduced-badge {
    display: inline-block;
    font-family: var(--ul-font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--ul-reduced-text);
    background: var(--ul-excellent-bg);
    border: 1px solid rgba(45,122,79,0.2);
    border-radius: 20px;
    padding: 2px 8px;
    margin-left: 6px;
    vertical-align: middle;
    letter-spacing: 0.01em;
}

/* ---- Use-case row ("Great for: ...") ---- */
.ul-use-case-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
}

.ul-use-case-label {
    font-family: var(--ul-font-ui);
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--ul-text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    white-space: nowrap;
    flex-shrink: 0;
}

.ul-use-case-pill {
    font-family: var(--ul-font-ui);
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--ul-accent);
    background: var(--ul-excellent-bg);
    border: 1px solid rgba(45,122,79,0.18);
    border-radius: 20px;
    padding: 3px 10px;
    white-space: nowrap;
    text-transform: capitalize;
    transition: background 0.15s;
}

.ul-use-case-pill:hover {
    background: #d9efe3;
}

/* ── About block (above results) ────────────────────────────────────────── */
.ul-master-header {
    border-bottom: none; /* about block provides the closing border */
}

.ul-about-block {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}

.ul-about-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 6px 32px 16px calc(var(--ul-sidebar-w) + 56px);
}

.ul-use-case-row--above {
    margin-bottom: 10px;
}

.ul-about-desc {
    font-family: var(--ul-font-body);
    font-size: 0.88rem;
    color: var(--ul-text-body);
    line-height: 1.65;
    margin: 0 0 7px;
    max-width: 65ch;
}
.ul-about-desc:last-of-type { margin-bottom: 0; }

.ul-about-more {
    overflow: hidden;
    max-height: 0;
    transition: max-height 0.25s ease;
}
.ul-about-more[aria-hidden="false"] {
    max-height: 600px;
}

.ul-about-toggle {
    background: none;
    border: none;
    padding: 4px 0 0;
    font-family: var(--ul-font-ui);
    font-size: 0.8rem;
    color: var(--ul-accent);
    cursor: pointer;
    line-height: 1;
}
.ul-about-toggle:hover { text-decoration: underline; }

/* legacy seo-block kept for any stray references */
.ul-seo-block {
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius);
    padding: 24px 28px;
    margin-top: 28px;
}
.ul-seo-block-title {
    font-family: var(--ul-font-body);
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--ul-text);
    margin-bottom: 12px;
    line-height: 1.3;
}
.ul-seo-block-body {
    font-family: var(--ul-font-body);
    font-size: 0.95rem;
    color: var(--ul-text-body);
    line-height: 1.7;
}

@media (max-width: 768px) {
    .ul-spec-chips { gap: 5px; }
    .ul-seo-block { padding: 18px 16px; }
    .ul-use-case-row { gap: 5px; }
    .ul-about-inner { padding: 12px 16px 14px; }
}

/* ==========================================
   RETAILER PROFILE PAGES
   ========================================== */

/* ── Light page header (replaces dark hero) ── */
.ul-retailer-page-header {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}
.ul-retailer-page-header-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 14px 32px 13px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
}
.ul-retailer-name {
    font-family: var(--ul-font-ui);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 8px;
    line-height: 1.2;
    letter-spacing: -0.02em;
}
.ul-retailer-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}
.ul-retailer-meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: var(--ul-text-muted);
}
.ul-retailer-meta-item a {
    color: var(--ul-primary);
    text-decoration: none;
}
.ul-retailer-meta-item a:hover { text-decoration: underline; }
.ul-retailer-meta-item svg { flex-shrink: 0; opacity: 0.55; }

/* ── Breadcrumb: full-width variant (no sidebar offset) ── */
.ul-breadcrumb-inner--full {
    padding-left: 32px;
}

/* ── Stats bar: full-width variant (no sidebar offset) ── */
.ul-stats-bar--retailer .ul-stats-bar-inner {
    padding: 0 32px;
}

/* ── Two-column page body ── */
.ul-retailer-body {
    padding: 0 0 60px;
}
.ul-retailer-layout {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 32px 32px 0;
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 40px;
    align-items: start;
}

/* ── Main (left) column ── */
.ul-retailer-intro {
    margin-bottom: 28px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--ul-border);
}
.ul-retailer-intro p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ul-text-body);
    margin: 0 0 12px;
}
.ul-retailer-intro p:last-child { margin-bottom: 0; }
.ul-retailer-intro a { color: var(--ul-primary); text-decoration: none; }
.ul-retailer-intro a:hover { text-decoration: underline; }

/* ── Divider before listings ── */
.ul-retailer-divider {
    border: none;
    border-top: 1px solid var(--ul-border);
    margin: 32px 0;
}

/* ── Comparison section (between intro and listings) ── */
.ul-retailer-comparison {
    margin-bottom: 0;
}
.ul-retailer-comparison h2 {
    font-family: var(--ul-font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 14px;
    letter-spacing: -0.01em;
}
.ul-retailer-comparison-body p {
    font-size: 14px;
    line-height: 1.7;
    color: var(--ul-text-body);
    margin: 0 0 12px;
}
.ul-retailer-comparison-body p:last-child { margin-bottom: 0; }
.ul-retailer-comparison-body a { color: var(--ul-primary); text-decoration: none; }
.ul-retailer-comparison-body a:hover { text-decoration: underline; }

/* ── Sidebar (right column) ── */
.ul-retailer-sidebar {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.ul-sidebar-card {
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: 8px;
    overflow: hidden;
}
.ul-sidebar-card-title {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--ul-text-muted);
    padding: 10px 16px 9px;
    border-bottom: 1px solid var(--ul-border);
    background: var(--ul-surface-alt);
}

/* Facts definition list */
.ul-facts-dl { margin: 0; padding: 0; }
.ul-facts-dl dt {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--ul-text-muted);
    padding: 9px 16px 2px;
}
.ul-facts-dl dd {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    color: var(--ul-text);
    padding: 0 16px 9px;
    margin: 0;
    border-bottom: 1px solid var(--ul-border-light);
    line-height: 1.5;
}
.ul-facts-dl dd:last-of-type { border-bottom: none; }
.ul-facts-dl dd a { color: var(--ul-primary); text-decoration: none; }
.ul-facts-dl dd a:hover { text-decoration: underline; }
.ul-facts-verified {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    color: var(--ul-text-light);
    padding: 8px 16px;
    margin: 0;
    border-top: 1px solid var(--ul-border-light);
    background: var(--ul-surface-alt);
}

/* Policy links */
.ul-sidebar-policies ul {
    list-style: none;
    margin: 0;
    padding: 4px 0;
}
.ul-sidebar-policies li { border-bottom: 1px solid var(--ul-border-light); }
.ul-sidebar-policies li:last-child { border-bottom: none; }
.ul-sidebar-policies a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 9px 16px;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    color: var(--ul-text);
    text-decoration: none;
    gap: 8px;
    transition: background 0.1s;
}
.ul-sidebar-policies a:hover { background: var(--ul-surface-alt); }
.ul-sidebar-policies a::after {
    content: '\2197';
    font-size: 11px;
    color: var(--ul-text-light);
    flex-shrink: 0;
}

/* ── Pagination ── */
.ul-pagination-static {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 28px;
    justify-content: center;
}
.ul-page-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 36px;
    height: 36px;
    padding: 0 10px;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--ul-text);
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s, border-color 0.15s;
}
.ul-page-btn:hover { background: var(--ul-surface-alt); border-color: #C8D0D8; }
.ul-page-btn.active {
    background: var(--ul-primary);
    border-color: var(--ul-primary);
    color: #fff;
    cursor: default;
}

/* ── Shared button ── */
.ul-btn-secondary {
    display: inline-block;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ul-text);
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: 6px;
    padding: 7px 14px;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.15s, border-color 0.15s;
}
.ul-btn-secondary:hover { background: var(--ul-surface-alt); border-color: #C8D0D8; }

/* ── Responsive ── */
@media (max-width: 900px) {
    .ul-retailer-layout {
        grid-template-columns: 1fr;
        gap: 0;
        padding: 24px 24px 0;
    }
    .ul-retailer-sidebar {
        margin-top: 32px;
    }
    .ul-stats-bar--retailer .ul-stats-bar-inner { padding: 0 16px; }
}
@media (max-width: 640px) {
    .ul-retailer-page-header-inner { padding: 12px 16px 11px; }
    .ul-retailer-layout { padding: 20px 16px 0; }
    .ul-retailer-name { font-size: 1.2rem; }
    .ul-retailer-meta { gap: 8px; }
    .ul-breadcrumb-inner--full { padding-left: 16px; }
}

/* ── Retailer directory ── */
.ul-dir-layout {
    max-width: var(--ul-max-width);
    padding: 32px 32px 48px;
    margin: 0 auto;
}
.ul-dir-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
}
.ul-dir-card {
    display: block;
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: 8px;
    padding: 18px 20px;
    text-decoration: none;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.ul-dir-card:hover {
    border-color: var(--ul-primary);
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
}
.ul-dir-card-name {
    font-family: var(--ul-font-ui);
    font-size: 15px;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 6px;
}
.ul-dir-card-tagline {
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-muted);
    line-height: 1.5;
    margin: 0 0 10px;
}
.ul-dir-card-location {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: var(--ul-font-ui);
    font-size: 11px;
    color: var(--ul-text-light);
}
@media (max-width: 900px) {
    .ul-dir-grid { grid-template-columns: repeat(2, 1fr); }
    .ul-dir-layout { padding: 24px 24px 40px; }
}
@media (max-width: 540px) {
    .ul-dir-grid { grid-template-columns: 1fr; }
    .ul-dir-layout { padding: 20px 16px 32px; }
}

/* ============================================
   FILTER CHIPS  (f- prefix — Phase 1: Cameras)
   ============================================ */

/* Breadcrumb row — active filter chips above results */
.f-breadcrumb-wrap {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 0 32px;
}
.f-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px;
    padding: 6px 0 8px;
}
.f-bc-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-family: var(--ul-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--ul-text);
    background: var(--ul-primary-subtle);
    border: 1px solid rgba(232,87,61,0.25);
    border-radius: 20px;
    padding: 3px 8px 3px 10px;
    white-space: nowrap;
}
.f-bc-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    background: none;
    border: none;
    cursor: pointer;
    color: var(--ul-primary);
    font-size: 14px;
    line-height: 1;
    padding: 0;
    border-radius: 50%;
    transition: background 0.1s;
}
.f-bc-remove:hover { background: rgba(232,87,61,0.12); }
.f-bc-clear {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 500;
    color: var(--ul-primary);
    background: none;
    border: none;
    padding: 3px 8px;
    cursor: pointer;
}
.f-bc-clear:hover { text-decoration: underline; }

/* Sidebar filter sections */
.f-sidebar-section { margin-bottom: 2px; }

.f-chip-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 10px;
}

/* Small chips (desktop sidebar) */
.f-chip {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-family: var(--ul-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--ul-text-body);
    background: var(--ul-surface-alt);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius-sm);
    padding: 4px 9px;
    cursor: pointer;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    white-space: nowrap;
    line-height: 1.3;
}
.f-chip:hover {
    background: var(--ul-primary-subtle);
    border-color: rgba(232,87,61,0.3);
    color: var(--ul-text);
}
.f-chip.is-active {
    background: var(--ul-primary);
    border-color: var(--ul-primary);
    color: #fff;
}
.f-chip.is-active .f-chip-count { color: rgba(255,255,255,0.7); }
.f-chip.f-chip-empty { opacity: 0.35; }

.f-chip-count {
    font-size: 10px;
    font-weight: 400;
    color: var(--ul-text-light);
}

/* Pill variant (price bands) */
.f-chip.f-pill { border-radius: 20px; }

/* Camera Type chips (Digital / Film) — always side by side */
#f-chips-camera-format { flex-wrap: nowrap; }

/* Listing type toggle buttons (Cameras / Lenses) */
.f-listing-type-section {
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ul-border-light);
    margin-bottom: 10px;
}
.f-listing-type-btns {
    display: flex;
    gap: 8px;
}
.f-listing-type-btn {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    padding: 10px 8px;
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius);
    background: var(--ul-surface-alt);
    cursor: pointer;
    font-family: var(--ul-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--ul-text-muted);
    transition: background 0.12s, border-color 0.12s, color 0.12s;
    line-height: 1;
}
.f-listing-type-btn:hover {
    border-color: rgba(232,87,61,0.35);
    color: var(--ul-text);
    background: var(--ul-primary-subtle);
}
.f-listing-type-btn.is-active {
    background: var(--ul-primary);
    border-color: var(--ul-primary);
    color: #fff;
}
.f-listing-type-btn.is-active svg { stroke: #fff; }
/* <a> variant: reset link decoration */
a.f-listing-type-btn { text-decoration: none; }

/* Browse Brands — static nav links (browse/product pages) */
.f-brand-nav-list {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: 6px;
    margin-bottom: 10px;
}
.f-brand-nav-list a {
    display: inline-flex;
    align-items: center;
    font-family: var(--ul-font-ui);
    font-size: 12px;
    font-weight: 500;
    color: var(--ul-text-body);
    background: var(--ul-surface-alt);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius-sm);
    padding: 4px 9px;
    text-decoration: none;
    white-space: nowrap;
    line-height: 1.3;
    transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.f-brand-nav-list a:hover {
    background: var(--ul-primary-subtle);
    border-color: rgba(232,87,61,0.3);
    color: var(--ul-text);
}

/* Collapsible sidebar sections (Retailers, Options) */
.ul-collapsible-section { margin: 0; }

.ul-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    background: none;
    border: none;
    padding: 4px 0 6px;
    cursor: pointer;
    font-family: var(--ul-font-ui);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--ul-text-muted);
    text-align: left;
}
.ul-section-header:hover { color: var(--ul-text); }

.ul-section-chevron { flex-shrink: 0; }
.ul-section-header[aria-expanded="true"] .ul-section-chevron {
    transform: rotate(90deg);
}

.ul-section-body { padding-top: 2px; }

/* Mobile overrides */
@media (max-width: 900px) {
    .f-breadcrumb-wrap { padding: 0 20px; }
}

/* ============================================
   MOBILE FILTER BAR  (≤767px)
   Filter toggle + active chips in one row.
   Hidden on desktop; shown on mobile in place
   of the sidebar's own full-width toggle.
   ============================================ */

/* Hidden on desktop */
.ul-mob-filter-bar  { display: none; }
.ul-mob-results-bar { display: none; } /* visibility controlled by JS on mobile */

@media (max-width: 767px) {
    /* Show the mobile filter bar */
    .ul-mob-filter-bar {
        display: flex;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px;
        padding: 8px 20px 4px;
    }

    /* Filter toggle button */
    .ul-mob-filter-btn {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        flex-shrink: 0;
        padding: 6px 12px;
        background: var(--ul-surface);
        border: 1px solid var(--ul-border-light);
        border-radius: var(--ul-radius);
        font-family: var(--ul-font-ui);
        font-size: 13px;
        font-weight: 600;
        color: var(--ul-text);
        cursor: pointer;
    }

    /* Chevron rotates when sidebar is open */
    #ulMobFilterBtn[aria-expanded="true"] .ul-mob-chevron {
        transform: rotate(180deg);
    }

    /* Chips row in mobile bar: sit flush, take remaining space */
    .ul-mob-filter-bar .f-breadcrumb {
        padding: 0;
        flex: 1;
        min-width: 0;
    }

    /* Hide the sidebar's own toggle (replaced by mobile bar button) */
    .ul-sidebar .ul-sidebar-toggle { display: none; }

    /* Remove top padding and flex gap — filter bar is now above the layout,
       so the old padding-top and sidebar↔results gap become dead space */
    .ul-search-layout {
        padding-top: 0;
        gap: 0;
    }

    /* Restore full border-radius on sidebar card — no toggle above it */
    .ul-sidebar.is-open .ul-sidebar-card {
        border-radius: var(--ul-radius);
        border-top: 1px solid var(--ul-border);
        margin-bottom: 8px;
    }

    /* Hide the desktop breadcrumb row — mobile bar has it instead */
    .ul-results-main > #f-breadcrumb { display: none !important; }

    /* Sticky "Show results" bar — fixed to bottom, visible when filter panel is open */
    .ul-mob-results-bar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        padding: 10px 20px 16px; /* extra bottom padding for home-bar area on iOS */
        background: var(--ul-surface);
        border-top: 1px solid var(--ul-border);
        z-index: 200;
    }
    .ul-mob-results-btn {
        display: block;
        width: 100%;
        padding: 13px;
        background: var(--ul-primary);
        color: #fff;
        border: none;
        border-radius: var(--ul-radius);
        font-family: var(--ul-font-ui);
        font-size: 15px;
        font-weight: 700;
        cursor: pointer;
        letter-spacing: 0.01em;
    }

    /* Compress eBay disclosure */
    .ul-ebay-wrap p {
        font-size: 11px !important;
        line-height: 1.4 !important;
        padding: 3px 0 !important;
        margin: 4px 0 !important;
    }
}

/* ── Price history block (master-product) ───────────────────────────────── */
.ul-ph-block {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}
/* Side-by-side on desktop: text left, chart right — keeps the listings table
   higher up the page rather than pushing it below a tall full-width chart. */
.ul-ph-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 14px 32px 16px calc(var(--ul-sidebar-w) + 56px);
    display: grid;
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
    gap: 28px;
    align-items: center;
}
.ul-ph-title {
    font-family: var(--ul-font-ui);
    font-size: 16px;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 6px;
}
.ul-ph-summary {
    font-family: var(--ul-font-body);
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--ul-text-body);
    margin: 0;
}
.ul-ph-dir {
    font-weight: 600;
    white-space: nowrap;
}
/* Colour by buyer benefit, not raw direction. The word carries the meaning too,
   so this never relies on colour alone. */
.ul-ph-dir--good    { color: var(--ul-reduced-text); }  /* price fell — good for buyer */
.ul-ph-dir--bad     { color: var(--ul-primary); }       /* price rose — bad for buyer  */
.ul-ph-dir--neutral { color: var(--ul-text-muted); }    /* little changed              */
.ul-ph-figure {
    margin: 0;
    min-width: 0;
}
.ul-ph-svg {
    display: block;
    width: 100%;
    height: 96px;
    background: var(--ul-surface-alt);
    border: 1px solid var(--ul-border-light);
    border-radius: var(--ul-radius-sm);
}
.ul-ph-band {
    fill: var(--ul-primary-subtle);
    stroke: none;
}
.ul-ph-line {
    fill: none;
    stroke: var(--ul-primary);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
}
.ul-ph-caption {
    font-family: var(--ul-font-ui);
    font-size: 11px;
    color: var(--ul-text-muted);
    margin: 6px 0 0;
    line-height: 1.4;
}

/* Stack on tablet/mobile */
@media (max-width: 900px) {
    .ul-ph-inner {
        grid-template-columns: 1fr;
        gap: 12px;
        padding: 14px 16px 16px;
    }
    .ul-ph-svg { height: 110px; }
}
/* Anchor target offset so the jump from the condensed strip clears the header.
   Focus is moved here for keyboard users; suppress the box outline on the large
   container (the heading provides the visible context). */
#ul-ph-full { scroll-margin-top: 24px; }
#ul-ph-full:focus { outline: none; }

/* ── Price history — condensed strip (above listings) ───────────────────── */
.ul-ph-strip {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}
.ul-ph-strip-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 16px;
    max-width: var(--ul-max-width);
    margin: 0 auto;
    /* Tightened top padding so the teaser sits close under the description. */
    padding: 5px 32px 6px calc(var(--ul-sidebar-w) + 56px);
}
.ul-ph-strip-main {
    display: flex;
    align-items: center;   /* vertically centre sparkline with the verdict text */
    gap: 10px;
    min-width: 0;
}
.ul-ph-spark {
    flex: 0 0 auto;
    width: 84px;
    height: 24px;
    display: block;
}
.ul-ph-strip-verdict {
    font-family: var(--ul-font-ui);
    font-size: 13.5px;
    line-height: 1;
    color: var(--ul-text-body);
    white-space: nowrap;
}
.ul-ph-strip-link {
    font-family: var(--ul-font-ui);
    font-size: 12.5px;
    font-weight: 600;
    color: var(--ul-primary);
    margin-left: auto;
    white-space: nowrap;
    text-decoration: none;
}
.ul-ph-strip-link:hover { color: var(--ul-primary-hover); text-decoration: underline; }
@media (max-width: 900px) {
    .ul-ph-strip-inner { padding: 6px 16px 8px; gap: 4px 10px; }
    .ul-ph-strip-verdict { font-size: 13px; white-space: normal; }
    /* Let the link drop onto its own line rather than crushing the verdict */
    .ul-ph-strip-link { margin-left: 0; flex-basis: 100%; }
}

/* ── Generations module (site audit 2026-07-19, 3.1) ────────────────────────
   Sibling-generation disambiguation strip on master product pages. Aligned
   with the ph-strip band: full-width surface, inner gutter clears the
   sidebar column. Links render as pills so the "wrong generation" escape
   hatch reads as navigation, not prose. */
.ul-generations {
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
}
.ul-generations-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 12px 32px 14px calc(var(--ul-sidebar-w) + 56px);
}
.ul-gen-title {
    font-family: var(--ul-font-ui);
    font-size: 14px;
    font-weight: 700;
    color: var(--ul-text);
    margin: 0 0 2px;
}
.ul-gen-note {
    font-family: var(--ul-font-ui);
    font-size: 13px;
    color: var(--ul-text-muted);
    margin: 0 0 8px;
}
.ul-gen-note strong { color: var(--ul-text); font-weight: 600; }
.ul-gen-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
}
.ul-gen-link {
    display: inline-flex;
    align-items: center;
    padding: 6px 13px;
    border: 1px solid var(--ul-border);
    border-radius: 999px;
    background: #fff;
    font-family: var(--ul-font-ui);
    font-size: 13px;
    font-weight: 600;
    color: var(--ul-text);
    text-decoration: none;
    white-space: nowrap;
}
.ul-gen-link:hover { border-color: var(--ul-primary); color: var(--ul-primary); }
@media (max-width: 900px) {
    .ul-generations-inner { padding: 10px 16px 12px; }
    .ul-gen-link { white-space: normal; }
}

/* ── Price-guide browse architecture (Batch 16) ─────────────────────────── */
.ul-guides-brands { display: flex; flex-wrap: wrap; gap: 10px; margin: 14px 0 30px; }
.ul-guides-brand-pill { display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 15px; border: 1px solid #e2e8f0; border-radius: 999px;
    background: #fff; color: #1e293b; text-decoration: none; font-weight: 600; }
.ul-guides-brand-pill span { color: #94a3b8; font-weight: 400; font-size: 0.85em; }
.ul-guides-brand-pill:hover { border-color: #e2593e; color: #e2593e; }
.ul-guides-table { border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden;
    margin: 18px 0 30px; background: #fff; }
.ul-guides-row { display: grid; grid-template-columns: 1fr 110px 90px; gap: 12px;
    align-items: center; padding: 11px 16px; border-bottom: 1px solid #f1f5f9;
    color: #1e293b; text-decoration: none; }
.ul-guides-row:last-child { border-bottom: none; }
a.ul-guides-row:hover { background: #fff7f5; }
a.ul-guides-row:hover .ul-guides-name { color: #e2593e; }
.ul-guides-head { background: #f8fafc; font-size: 0.78em; text-transform: uppercase;
    letter-spacing: 0.05em; color: #64748b; font-weight: 600; }
.ul-guides-name { font-weight: 600; }
.ul-guides-count { color: #64748b; text-align: right; }
.ul-guides-price { font-weight: 600; text-align: right; }
@media (max-width: 640px) {
    .ul-guides-row { grid-template-columns: 1fr 70px 70px; padding: 10px 12px; }
}
.ul-guides-content { max-width: var(--ul-max-width); margin: 0 auto;
    padding: 22px 32px 44px calc(var(--ul-sidebar-w) + 56px); }
.ul-guides-content h2 { margin: 22px 0 4px; }
.ul-guides-head span:nth-child(2), .ul-guides-head span:nth-child(3) { text-align: right; }
@media (max-width: 900px) { .ul-guides-content { padding: 18px 16px 36px; } }
/* ── Guides 16b design pass ── */
.ul-guides-row { grid-template-columns: 1fr 110px 90px 90px; }
.ul-guides-median { font-weight: 700; text-align: right; }
.ul-guides-price { font-weight: 400; color: #64748b; text-align: right; }
.ul-guides-dim { color: #cbd5e1; }
.ul-guides-chip { display: inline-block; margin-left: 8px; padding: 1px 8px;
    border-radius: 999px; background: #f1f5f9; color: #64748b;
    font-size: 0.72em; font-weight: 500; vertical-align: 1px; white-space: nowrap; }
.ul-guides-head span { cursor: pointer; user-select: none; }
.ul-guides-head span.is-active { color: #e2593e; }
.ul-guides-head span:nth-child(4) { text-align: right; }
.ul-guides-toolbar { display: flex; align-items: center; gap: 14px; margin: 4px 0 12px; }
.ul-guides-filter { flex: 0 1 320px; padding: 9px 14px; border: 1px solid #e2e8f0;
    border-radius: 8px; font-size: 14px; }
.ul-guides-sortnote { font-size: 12.5px; color: #94a3b8; }
.ul-guides-sub { font-size: 13.5px; color: #64748b; margin: 2px 0 12px; }
.ul-guides-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 12px; margin: 0 0 28px; }
.ul-guides-card { display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
    background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
    text-decoration: none; color: #1e293b; }
.ul-guides-card:hover { border-color: #e2593e; }
.ul-guides-card-brand { font-size: 0.75em; text-transform: uppercase;
    letter-spacing: 0.06em; color: #94a3b8; font-weight: 600; }
.ul-guides-card-name { font-weight: 700; line-height: 1.25; }
.ul-guides-card-price { color: #e2593e; font-weight: 600; font-size: 0.92em; }
@media (max-width: 640px) {
    .ul-guides-row { grid-template-columns: 1fr 80px 64px 60px; }
    /* the review chip is the row's substance on a zero-listing reviewed
       master, so it survives the mobile chip cull (2026-08-02) */
    .ul-guides-chip:not(.ul-guides-chip--review) { display: none; }
}
/* ── Reviewed masters in the guides tree (2026-08-02) ── */
.ul-guides-chip--review { background: #fdeee9; color: #c2410c; font-weight: 600; }
.ul-guides-median .ul-guides-chip { margin-left: 0; }
@media (max-width: 640px) {
    .ul-rev-word { display: none; } /* "Reviewed ★ 3.5" -> "★ 3.5" in the 80px cell */
}
/* Guides pages have no sidebar - full-width variant like /retailer/ */
.ul-brand-header-inner--full { padding-left: 32px; }
.ul-guides-content { padding-left: 32px; }
@media (max-width: 900px) {
    .ul-brand-header-inner--full { padding-left: 16px; }
}
/* ── Batch 22: search suggestions (header typeahead dropdown) ── */
.ul-suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0;
    background: var(--ul-surface); border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius-sm); box-shadow: var(--ul-shadow-md);
    z-index: 1200; overflow: hidden; text-align: left; }
.ul-suggest-row { display: flex; align-items: baseline; justify-content: space-between;
    gap: 12px; padding: 9px 14px; text-decoration: none; cursor: pointer;
    font-family: var(--ul-font-ui); }
.ul-suggest-row:hover, .ul-suggest-row.is-active { background: var(--ul-row-hover); }
.ul-suggest-row + .ul-suggest-row { border-top: 1px solid var(--ul-border-light); }
.ul-suggest-name { color: var(--ul-text); font-size: 13.5px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ul-suggest-meta { color: var(--ul-text-muted); font-size: 12px;
    white-space: nowrap; flex-shrink: 0; }
/* Batch 22 Job 2: non-interactive "Showing close matches" header shown
   over fuzzy (typo-tolerance) suggestion payloads */
.ul-suggest-note { padding: 6px 14px 5px; font-family: var(--ul-font-ui);
    font-size: 11.5px; color: var(--ul-text-muted); cursor: default;
    border-bottom: 1px solid var(--ul-border-light); }
@media (max-width: 640px) {
    .ul-suggest-name { white-space: normal; }
    .ul-suggest-meta { font-size: 11px; }
}
/* Batch 22: "Did you mean" one-liner on /search */
.ul-didyoumean { font-family: var(--ul-font-ui); font-size: 13.5px;
    color: var(--ul-text-muted); margin: 2px 0 12px; }
.ul-didyoumean strong { color: var(--ul-text); font-weight: 600; }
.ul-didyoumean a { color: var(--ul-primary); text-decoration: none; font-weight: 600; }
.ul-didyoumean a strong { color: inherit; } /* linked name renders orange, not text-dark */
.ul-didyoumean a:hover { text-decoration: underline; }

/* ==========================================================================
   HIDE / FAVOURITE LISTING CONTROLS
   Added 2026-07-28. Behaviour and the reasons for it: js/ul-triage.js,
   which is loaded from views/partials/_triage.cfm (included by footer.cfm).

   Lived inline in that partial while the design was moving; folded in here
   for production because it is ~11KB and was being re-sent uncompressed on
   every page rather than cached once with the rest of this file.
   ========================================================================== */
/* ── the one number that drives everything ───────────────────────────────
   Width of the action column including its own padding. The row header
   borrows it as a trailing grid track, so the column labels sit over their
   values without a second rule to keep in step.
   Desktop: 4 + 40 + 6 + 40 + 12 = 102.                                    */
:root { --ul-tri-w: 102px; }

/* ── row wrapper ─────────────────────────────────────────────────────────
   .ul-results-table-wrap is not a grid, so wrapping each row in a flex
   container changes no column maths. The anchor keeps its own grid.        */
.ul-tri-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid var(--ul-border-light);
}
.ul-tri-row:last-child { border-bottom: none; }
.ul-tri-row > .ul-results-row {
    flex: 1 1 auto;
    min-width: 0;
    border-bottom: none;
}
.ul-tri-row:hover { background: var(--ul-row-hover); }
.ul-tri-row.is-hidden   { display: none; }
/* Revealed hidden rows are marked by BACKGROUND, not by fading. The first
   version dropped them to 45% opacity, which made them hard to pick out of
   the list rather than easy — the whole point of revealing them is to scan
   for the one you want back. A flat grey band reads at a glance and leaves
   the text at full contrast. Declared after :hover so it wins the tie. */
.ul-tri-row.is-revealed {
    display: flex;
    background: #E9EDF1;
    opacity: 1;
}
.ul-tri-row.is-revealed:hover { background: #E2E7EC; }
.ul-tri-row.is-fav {
    box-shadow: inset 3px 0 0 var(--ul-primary);
    background: var(--ul-primary-subtle);
}
/* usedlens.css greys the title of any row that has been clicked before
   (.ul-results-row:visited). Wherever this layer applies its own emphasis
   or dimming, that grey compounds on top and the row goes double-pale: a
   favourite you have opened — which is the usual reason you favourite it —
   and a revealed hidden row, which is already at 45% opacity by design.
   Two classes plus :visited beats the original's one class plus :visited,
   so no !important is needed. */
.ul-tri-row.is-fav .ul-results-row:visited .ul-result-name,
.ul-tri-row.is-revealed .ul-results-row:visited .ul-result-name { color: var(--ul-text); }

/* ── header ──────────────────────────────────────────────────────────────
   Trailing track keeps PRICE and RETAILER over their values now that each
   row anchor stops short by the action column.                            */
.ul-results-table-head {
    position: relative;
    grid-template-columns: 1fr 110px 140px var(--ul-tri-w);
}

/* The heart lives in the header on mobile only — desktop has no control at
   all. Absolutely positioned rather than given a grid track, because a
   track would widen the header by its own width and push the column labels
   back out of line with their values, which is the bug this whole
   arrangement exists to avoid. */
.ul-tri-head {
    display: none;
    position: absolute;
    top: 50%;
    right: 2px;
    transform: translateY(-50%);
    width: 44px; height: 44px;          /* target, not glyph */
    align-items: center; justify-content: center;
    padding: 0; background: none; border: 0;
    color: var(--ul-text-light);
    cursor: pointer;
    transition: color .14s;
}
.ul-tri-head svg {
    width: 18px; height: 18px; display: block;
    transition: fill .14s;
}
.ul-tri-head:hover { color: var(--ul-text-muted); }
.ul-tri-head:focus-visible { outline: 2px solid var(--ul-check-active); outline-offset: -6px; }

/* ── action buttons (siblings of the anchor, never children) ─────────────
   Rows stay links in every state — the buttons sit outside the anchor, so
   pressing one can never activate the outbound link.                      */
.ul-tri-acts {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    padding: 0 12px 0 4px;
    flex: 0 0 var(--ul-tri-w);
    overflow: hidden;
    transition: flex-basis .22s ease, padding .22s ease;
}
.ul-tri-btn {
    width: 40px; height: 40px;
    flex: 0 0 40px;
    display: grid; place-items: center;
    padding: 0;
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius-sm);
    color: var(--ul-text-light);
    cursor: pointer;
    transition: opacity .16s ease, visibility .16s ease,
                background .12s, color .12s, border-color .12s;
}
.ul-tri-btn svg { width: 18px; height: 18px; display: block; }
.ul-tri-btn[data-act="fav"] svg { fill: none; stroke: currentColor; stroke-width: 2; }
.ul-tri-btn:hover { border-color: var(--ul-text-light); color: var(--ul-text-muted); }
.ul-tri-btn:active { transform: scale(.94); }
.ul-tri-btn:focus-visible { outline: 2px solid var(--ul-check-active); outline-offset: 2px; }
/* Inverted: white fill, brand outline, solid brand heart. A filled orange
   block read as a button in a pressed state; the heart itself carrying the
   colour reads as the listing being marked. */
.ul-tri-btn[data-act="fav"].on {
    background: var(--ul-surface);
    border-color: var(--ul-primary);
    color: var(--ul-primary);
}
.ul-tri-btn[data-act="fav"].on svg { fill: currentColor; }
.ul-tri-btn[data-act="hide"].on {
    background: var(--ul-surface-alt); border-color: var(--ul-text-light); color: var(--ul-text-muted);
}

/* ── status text ─────────────────────────────────────────────────────────
   A sibling of #ulResultsCount, not a rewrite of it: usedlens.js owns that
   node and rewrites it on load via updateToolbar(). Because it is a
   sibling it inherits the TOOLBAR's type, not the count line's, so the
   .ul-results-count-text rules are restated here — otherwise it renders
   several sizes too large in the wrong family.

   margin-right:auto matters as much as the type. .ul-results-toolbar is
   justify-content:space-between built for exactly two children; a third
   makes it spread three ways and strands the status in the middle of the
   bar. The auto margin puts it back on the left, hard against the count
   it belongs to, and keeps the sort control on the right.                 */
.ul-tri-status {
    font-family: var(--ul-font-body);
    font-size: 13px;
    color: var(--ul-text-muted);
    /* A leading space in the text does not survive: the toolbar is a flex
       container, so each child is a flex item and its leading whitespace is
       trimmed — "results· 3 hidden". The gap has to be a margin. */
    margin-left: 4px;
    margin-right: auto;
}
.ul-tri-status strong { color: var(--ul-text); font-weight: 600; }
.ul-tri-reveal {
    background: none; border: 0; padding: 0;
    font-family: inherit; font-size: inherit;
    color: var(--ul-primary); cursor: pointer;
    text-decoration: underline; text-underline-offset: 2px;
}
.ul-tri-reveal:hover { color: var(--ul-primary-hover); }

/* ── toast ────────────────────────────────────────────────────────────── */
.ul-tri-toast {
    position: fixed; left: 50%; z-index: 70;
    bottom: calc(20px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%) translateY(160%);
    display: flex; align-items: center; gap: 16px;
    max-width: calc(100vw - 32px);
    background: var(--ul-nav-dark); color: #fff;
    border-radius: var(--ul-radius); padding: 12px 16px;
    font-family: var(--ul-font-ui); font-size: 13.5px;
    box-shadow: var(--ul-shadow-md);
    transition: transform .22s cubic-bezier(.2,.8,.3,1);
}
.ul-tri-toast.show { transform: translateX(-50%) translateY(0); }
.ul-tri-undo {
    background: none; border: 0; color: #8FC0FF;
    font: inherit; font-weight: 700; cursor: pointer;
    padding: 6px 2px; min-height: 34px;
}

/* ── favourites pill ─────────────────────────────────────────────────────
   Sits in the recent-searches bar, on the dark header, so it matches those
   pills: same 12px type, same 2px/10px padding, same 12px radius. Red, but
   a tint of it rather than a solid block — this is a way back to something
   you set aside, not a call to action, and a saturated pill in the header
   competes with the Search button two inches above it. It brightens to solid
   only while the view is open, where it is genuinely the active control.  */
.ul-tri-pill {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(232, 87, 61, 0.22);
    border: 0; border-radius: 12px;
    padding: 2px 10px; min-height: 22px;
    font-family: var(--ul-font-ui); font-size: 12px; font-weight: 500;
    color: #F0A594; cursor: pointer; white-space: nowrap;
    transition: background .14s, color .14s;
}
.ul-tri-pill:hover { background: rgba(232, 87, 61, 0.34); color: #F8C4B8; }
.ul-tri-pill.on {
    background: var(--ul-primary); color: #fff; font-weight: 600;
}
.ul-tri-pill svg { width: 11px; height: 11px; fill: currentColor; stroke: currentColor; stroke-width: 2; }
.ul-tri-pill em {
    font-style: normal; font-weight: 600; font-size: 11px;
    background: rgba(255, 255, 255, 0.16); border-radius: 9px; padding: 0 5px;
}

/* ── a favourite whose listing has gone ──────────────────────────────────
   The only place on the site that renders is_active = 0. Every other path
   filters it out in SQL, which is exactly why a favourite that sold used to
   vanish without trace. Labelled "no longer listed", never "sold": the
   scrape knows it stopped appearing, not what happened to it.            */
.ul-tri-row.is-dead { background: var(--ul-surface-alt); }
.ul-tri-row.is-dead .ul-results-row { pointer-events: none; }
.ul-tri-row.is-dead .ul-result-name { color: var(--ul-text-light); text-decoration: line-through; }
.ul-tri-row.is-dead .ul-result-price,
.ul-tri-row.is-dead .ul-result-merchant,
.ul-tri-row.is-dead .ul-result-merchant-mobile { color: var(--ul-text-light); }
.ul-tri-gone {
    font-family: var(--ul-font-ui); font-size: 10px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .04em;
    background: var(--ul-text-light); color: #fff;
    border-radius: 9px; padding: 1px 7px; white-space: nowrap;
}
.ul-tri-empty {
    padding: 40px 20px; text-align: center;
    font-family: var(--ul-font-body); font-size: 13.5px; color: var(--ul-text-muted);
}

/* ── 900px: mirrors the usedlens.css column change at this width ───────── */
@media (max-width: 900px) {
    .ul-results-table-head { grid-template-columns: 1fr 90px 110px var(--ul-tri-w); }
}

/* ── 640px and below: collapsed by default, heart in the header ────────── */
@media (max-width: 640px) {
    /* ZERO, not narrow. The column contributes no width to the rows while
       it is shut, so the table looks exactly as it did before this feature
       existed — no reserved gutter down the right-hand side. */
    :root { --ul-tri-w: 0px; }
    .ul-tri-acts { padding: 0; }
    .ul-tri-btn { visibility: hidden; opacity: 0; pointer-events: none; }

    /* Header keeps the columns usedlens.css gives it — no trailing track,
       because the heart is positioned rather than laid out. */
    /* Count + status will not share 358px with the sort control, so let
       the bar wrap and keep the pair together on the first line. */
    #ulResultsToolbar { flex-wrap: wrap; row-gap: 6px; }

    .ul-results-table-head { grid-template-columns: 1fr 90px; }
    .ul-results-table-head span:nth-of-type(3) { display: none; }
    .ul-tri-head { display: flex; }

    /* Price hard right. Left-aligned inside a fixed 90px track, a short
       price like GBP 22.74 leaves ~35px dangling, which reads down the
       table as a ragged white band. Applies in both states: shut it sits
       against the row's right edge, open it sits against the buttons. */
    /* :not(...) matters — .ul-result-name-cell is also a direct div child,
       and without the exclusion the title and the retailer go right too. */
    .ul-tri-row .ul-results-row > div:not(.ul-result-name-cell) { text-align: right; }
    /* The PRICE label goes entirely at this width. Right-aligning the
       values puts them flush to the row's padding edge, which is exactly
       where a right-aligned PRICE label would sit — and the heart is there
       too, so the three collide. Dropping the label is the honest fix: a
       column of GBP figures does not need naming, and RETAILER is already
       dropped at this breakpoint for the same kind of reason. */
    .ul-results-table-head span:nth-of-type(2) { display: none; }

    /* ── open ── */
    body.ul-tri-tools { --ul-tri-w: 108px; }
    body.ul-tri-tools .ul-tri-acts { padding: 0 10px 0 2px; gap: 8px; }
    body.ul-tri-tools .ul-tri-btn {
        visibility: visible; opacity: 1; pointer-events: auto;
        /* 44, not 40: the one place the row is worked with a thumb. */
        width: 44px; height: 44px; flex: 0 0 44px;
    }
    body.ul-tri-tools .ul-tri-btn svg { width: 19px; height: 19px; }

    /* The heart does not move when the column opens — it is a fixed point
       in the header, not a label that tracks the button beneath it. Which
       does mean that once open it sits nearer the hide button than the
       favourite one; anchoring beats semantic alignment here because a
       control that jumps as you press it reads as a glitch. */
    .ul-tri-head.on { color: var(--ul-primary); }

    /* Opening the column takes 108px out of a row with ~250px of content
       width, so the title track drops to ~118px and titles wrap further.
       The price stays in its own column rather than moving to its own line
       — it must not jump as the column opens — and the title clamps
       instead. Measured over the 50 rendered rows on this master:

         lines   first row   tallest row   titles truncated
           2       88px        88px           50/50
           3      106px       106px           47/50
           4      124px       142px           23/50
           5      143px       143px            1/50
         none     143px       161px            0/50

       Five, and the reason is the fourth column of that table: a row
       carrying a price drop renders two price lines, so 142-143px is the
       floor whatever the title does. Clamping tighter than five buys no
       height at all on the tallest row and truncates 22 more titles to
       get it. Five clips exactly one title here and takes 18px off the
       worst case. */
    body.ul-tri-tools .ul-result-name {
        display: -webkit-box;
        -webkit-line-clamp: 5;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    body.ul-tri-tools .ul-result-name-cell { padding-right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
    .ul-tri-acts, .ul-tri-btn, .ul-tri-head, .ul-tri-head svg, .ul-tri-toast {
        transition: none;
    }
}

/* Recent-searches bar — CLS guard. Visibility is owned HERE, not by an inline
   style, so the .ul-has-recent class set by the inline <head> script can reserve
   the height before first paint.

   Measured on prod 2026-07-28: populated bar = 37px (10px + 4px padding, one row
   of chips). Expanding it from 0 moved the results table 222 -> 259px, which is
   what produced GSC's 0.28 desktop CLS on the /search group.

   min-height holds the row open from first paint for visitors who have history,
   so recentSearches.render() fills it without moving anything. Visitors with no
   history never see the element and pay no whitespace.

   Note: render() and clear() still set an inline display, which correctly wins
   over these rules — that is the fallback path if the head script did not run. */
#ulRecentSearchesBar {
    display: none;
}

html.ul-has-recent #ulRecentSearchesBar {
    display: flex;
    min-height: 37px;
    box-sizing: border-box;
}

/* ==========================================================================
   AUDIT REMEDIATION — 2026-07-29
   Findings 1-5 of the 29 Jul visual/UX audit. Everything in this block is
   additive and lives at the end of the file on purpose: each rule has to win
   against an earlier declaration, and keeping them together makes the whole
   batch revertible by deleting from the banner above to the one below.
   ========================================================================== */

/* --------------------------------------------------------------------------
   FIX 5 — Global keyboard focus indicator.
   Before this, 46 component selectors had a :hover style and 8 had any focus
   style at all. Two (.ul-sort-select, .ul-filter-select) actively removed the
   browser default and replaced it with nothing; those `outline: none` lines
   are now deleted from their own rules.

   :where() has ZERO specificity, so any component that already defines its own
   focus treatment still wins - notably .ul-hero-search-wrap:focus-within and
   .ul-search-bar-wrap:focus-within, which keep their brand-coloured rings.
   :focus-visible (not :focus) means mouse users never see the outline.
   -------------------------------------------------------------------------- */
:where(a, button, select, input, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--ul-primary);
    outline-offset: 2px;
    border-radius: 3px;
}
/* On the dark nav/topbar an orange ring on navy is weak - use white there. */
:where(.ul-nav, .ul-search-topbar) :where(a, button, input, [tabindex]):focus-visible {
    outline-color: #fff;
}
/* Listing rows are full-width blocks; an offset ring bleeds outside the card. */
.ul-results-row:focus-visible {
    outline: 2px solid var(--ul-primary);
    outline-offset: -2px;
    border-radius: 0;
}

/* --------------------------------------------------------------------------
   FIX 3a — Skip link.
   Emitted by views/partials/header.cfm ONLY when a template sets
   variables.pageSkipTarget, so pages without a named main region never render
   a dead anchor. Visible only when focused.
   -------------------------------------------------------------------------- */
.ul-skip-link {
    position: absolute;
    left: 8px;
    top: -100px;
    z-index: 1300;              /* above .ul-nav (1000) and .ul-suggest (1200) */
    padding: 10px 16px;
    background: var(--ul-surface);
    color: var(--ul-text);
    font-family: var(--ul-font-ui);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1px solid var(--ul-border);
    border-radius: var(--ul-radius-sm);
    box-shadow: var(--ul-shadow-md);
    transition: top 0.15s ease;
}
.ul-skip-link:focus {
    top: 8px;
}

/* --------------------------------------------------------------------------
   FIX 3b — Search / master results heading.
   /search previously rendered ZERO headings of any level in its populated
   state, so it had no accessible name and no heading landmark. Note this page
   is noindex (search.cfm sets pageNoIndex for any query string), so this is an
   accessibility and orientation fix, not an SEO one.
   Deliberately compact: finding 1 is that this page has too much above the
   results already.
   -------------------------------------------------------------------------- */
.ul-results-h1 {
    font-family: var(--ul-font-ui);
    font-size: 19px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: var(--ul-text);
    margin: 0 0 8px;
}
.ul-results-h1 .ul-results-h1-count {
    font-weight: 500;
    color: var(--ul-text-muted);
}

/* --------------------------------------------------------------------------
   FIX 4 — Brands mega-menu reachable by keyboard.
   The only rule that revealed .ul-dropdown was `li:hover`, so its 28 links
   were unreachable by keyboard entirely (and on touch - see the <=640px block
   further down, which adds a tap toggle).
   -------------------------------------------------------------------------- */
.ul-nav-links > li:focus-within > .ul-dropdown {
    display: block;
}
.ul-nav-links > li:focus-within > a {
    color: #fff;
}

/* --------------------------------------------------------------------------
   FIX 1 — Reclaim the mobile fold.
   Measured on /product/leica-m6 at 390x860 before this change: the first
   listing row started at y=1116, i.e. roughly two full scroll gestures below
   the fold on the page whose entire purpose is the price table.
   Three contributions, all <=767px only:
     a) recent-searches bar wrapped onto 3 rows          96px -> 37px
     b) the GET ALERTS card sat ABOVE the results        ~201px moved below
     c) the 6-cell stats bar wrapped raggedly           ~138px -> ~92px
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {

    /* (a) One horizontally-scrollable row instead of three wrapped ones.
       flex-wrap is set INLINE on the element by search.cfm / master-product.cfm
       / brand_results.cfm, so !important is the only way to reach it from here.
       That is the same pattern the existing `margin-left: 0 !important` rule
       for this element uses (see the max-width:900px block above).
       The height stays 37px, which is exactly what the CLS guard in
       header.cfm reserves via html.ul-has-recent - do not change one without
       the other. */
    #ulRecentSearchesBar {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    #ulRecentSearchesBar::-webkit-scrollbar {
        display: none;
    }

    /* (b) Move ONLY the alert card below the results - not the filter panel,
       which must stay directly under the "Filters" button at the top.

       .ul-sidebar's three children (toggle / filter card / alert card) are
       promoted to flex items of .ul-search-layout by `display: contents`, so
       each can be ordered independently. The <aside> box disappears but the
       DOM tree does not, so `.ul-sidebar.is-open .ul-sidebar-card` and every
       ulToggleSidebar() classList call still work unchanged. Verified: no JS
       reads geometry off #ulSidebar, only classList.

       align-items on .ul-search-layout is flex-start, which would shrink the
       promoted children to their content width - stretch instead. That also
       retires the reason for the existing
       `.ul-search-layout--empty .ul-results-main { width: 100% }` patch. */
    .ul-search-layout {
        align-items: stretch;
    }
    .ul-sidebar {
        display: contents;
    }
    .ul-sidebar-toggle  { order: 1; }   /* display:none at this width anyway */
    .ul-sidebar-card    { order: 2; }
    .ul-results-main    { order: 3; }
    .ul-alert-card      { order: 4; }

    /* It now sits below the table, so it no longer needs bottom breathing room
       before the results - it needs top separation from them instead. */
    .ul-alert-card {
        margin-top: 24px;
        margin-bottom: 0;
    }

    /* (c) A real 3x2 grid rather than flex-wrap. Fixes the ragged dividers
       (row 2 did not line up with row 1) as well as the height.

       The wrapper's own padding was the bigger culprit: .ul-stats-bar carries
       `padding: 20px 32px` from its homepage rule (line ~521) and the
       max-width:900px block only overrides left/right, so 40px of vertical
       padding survived onto a phone. Measured: 95px of content inside a 137px
       bar. This also tightens the homepage stats bar on mobile, deliberately. */
    .ul-stats-bar {
        padding-top: 6px;
        padding-bottom: 6px;
    }
    .ul-stats-bar-inner {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        padding: 4px 16px;
        gap: 0;
    }
    .ul-stat-item {
        padding: 5px 8px 5px 0;
        margin-right: 8px;
        min-width: 0;
    }
    /* With a grid, "last child" is the wrong test for which dividers to drop:
       it is the last column of each row. */
    .ul-stat-item:nth-child(3n) {
        border-right: none;
        margin-right: 0;
        padding-right: 0;
    }
    .ul-stat-item .ul-stat-value {
        font-size: 0.92rem;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    /* "NEW THIS WEEK" is the longest label and did not fit a 101px column at
       0.68rem/0.05em, so it ellipsised. Tightened just enough to fit; the
       ellipsis stays as a safety net for any longer label added later. */
    .ul-stat-item .ul-stat-label {
        font-size: 0.64rem;
        letter-spacing: 0.03em;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
}

/* --------------------------------------------------------------------------
   FIX 4 (mobile half) — tap-to-open submenu inside the hamburger.
   The <=640px block earlier in this file already restyles .ul-dropdown to
   position:static with an indent, so an inline submenu was clearly the intent;
   it simply never got a `display` rule and so stayed at display:none.

   Hover and :focus-within are switched OFF here so the .is-open class set by
   the toggle in views/partials/footer.cfm is the single source of truth -
   otherwise the second tap could not close it (focus would still be inside).
   -------------------------------------------------------------------------- */
@media (max-width: 640px) {
    .ul-nav-links > li:hover > .ul-dropdown,
    .ul-nav-links > li:focus-within > .ul-dropdown {
        display: none;
    }
    .ul-nav-links > li.is-open > .ul-dropdown {
        display: block;
        padding: 2px 0 8px 16px;
    }
    /* .ul-nav-links is a column flex container with align-items:flex-start, so
       each <li> shrank to its own text width — which capped the submenu at
       111px and wrapped "Hasselblad XCD". Full-width rows also give the
       top-level nav links a proper tap area. */
    .ul-nav-links > li {
        width: 100%;
    }

    /* Bigger hit area for the parent row and a chevron that reflects state. */
    .ul-nav-links > li > a[aria-expanded] {
        justify-content: space-between;
        width: 100%;
        min-height: 44px;
    }
    .ul-nav-links > li > a[aria-expanded="true"] .arrow {
        transform: rotate(180deg);
    }
    .ul-nav-links > li > a .arrow {
        font-size: 11px;
        opacity: 0.85;
        transition: transform 0.15s ease;
        display: inline-block;
    }
    .ul-dropdown a {
        color: rgba(255,255,255,0.78);   /* 0.6 -> 0.78: 4.1:1 -> 7.6:1 on the navy */
        min-height: 36px;
        display: flex;
        align-items: center;
    }

    /* .ul-dropdown-wide is width: min(560px, 100vw - 32px). Inside the nav's
       20px padding plus this menu's 16px indent that overflows a 390px phone by
       ~24px, so pin it to the available width instead. */
    .ul-dropdown-wide {
        width: 100%;
        padding: 2px 0 8px 16px;
    }

    /* The desktop layout is a 3-column grid where the two headings are placed
       over their columns by inline `grid-column` attributes in header.cfm. That
       cannot survive a narrower grid, so on a phone this becomes a single
       ordered column and the headings label the group beneath them.

       Switching to flex makes the inline grid-column declarations inert (no
       !important needed). The order values below are tied to DOM order in
       views/partials/header.cfm:
         child 1 = "Cameras" heading      child 2 = "Lenses" heading
         child 3 = camera links           children 4-5 = lens links
       If a column is added there, extend this list. */
    .ul-dropdown-columns {
        display: flex;
        flex-direction: column;
        gap: 0;
    }
    .ul-dropdown-columns > :nth-child(1) { order: 1; }
    .ul-dropdown-columns > :nth-child(3) { order: 2; }
    .ul-dropdown-columns > :nth-child(2) { order: 3; }
    .ul-dropdown-columns > :nth-child(4) { order: 4; }
    .ul-dropdown-columns > :nth-child(5) { order: 5; }

    .ul-dropdown-heading {
        color: rgba(255,255,255,0.55);
        padding: 10px 0 4px;
    }
}

/* ==========================================================================
   END AUDIT REMEDIATION 2026-07-29
   ========================================================================== */


/* ==========================================================================
   MASTER PRODUCT HERO IMAGE  —  2026-07-31
   ==========================================================================

   Two separate things live here. The first ships now and is visible immediately;
   the second does nothing until a master actually has an image.

   1. The stats bar on a master page loses its rules.
      .ul-stats-bar carries a border-top and a border-bottom. Both run the full
      width of the page, so with a picture in the left gutter they slice it into
      three. The header and the stats bar are both --ul-surface anyway, so without
      them the whole block reads as one panel. Scoped to .ul-master-header so the
      brand and retailer stats bars keep their dividers.

   2. The hero image sits in the gutter, not above the fold-line.
      .ul-brand-header-inner and .ul-stats-bar-inner both reserve
      calc(var(--ul-sidebar-w) + 56px) = 276px of left padding to clear the
      sidebar, and nothing occupies it. Taking the image out of flow and putting
      it there costs NO vertical space: measured on /product/canon-eos-400d at
      1600x809, header 176px and first listing row y=574 both with and without.
      Inline beside the title instead measured 280px and y=676 — a 102px push on
      the one thing a price-comparison page cannot afford to push, the stats bar.

      It also lines the image up with the BROWSE sidebar underneath, so the page
      reads as one two-column grid rather than a picture bolted onto a table.
   ========================================================================== */

.ul-master-header .ul-stats-bar {
    border-top: 0;
    border-bottom: 0;
}

.ul-master-header .ul-brand-header-inner {
    position: relative;
}

/* Out of flow, so it can never move another element — which is also why this
   needs no CLS mitigation: an absolutely positioned image in a fixed-size box
   cannot shift layout even in principle. */
.ul-mp-hero {
    position: absolute;
    left: 32px;
    top: 10px;
    width: 196px;
    z-index: 1;
    margin: 0;
}

.ul-mp-hero .ul-mp-frame {
    display: block;
    height: 147px;
    background: #fff;
    border: 1px solid var(--ul-border);
    border-radius: 8px;
    overflow: hidden;
}

/* Explicit pixel height, never a percentage. A percentage height inside a box
   sized by aspect-ratio does not resolve — it falls back to auto, the image
   overflows, and overflow:hidden crops it silently. Cost us a good photograph
   that looked cropped when it was not. */
.ul-mp-hero img {
    display: block;
    width: 100%;
    height: 147px;
    object-fit: contain;
}

.ul-mp-hero .ul-mp-cred {
    display: block;
    margin-top: 5px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--ul-text-light);
}

.ul-mp-hero .ul-mp-cred a { color: inherit; }

/* The image is of the MODEL, not of any listed item. On a comparison page that
   distinction is easy to miss: a body photographed with a lens mounted, or with a
   grip or a strap in shot, is not an offer of those things, and none of the
   retailers below are selling this particular copy.

   Placed above the credit rather than folded into it, because a disclaimer and an
   attribution answer different questions and running them together makes both harder
   to read. Costs nothing in layout -- .ul-mp-hero is position:absolute, so any number
   of lines here is out of flow and cannot move the price table. */
.ul-mp-hero .ul-mp-note {
    display: block;
    margin-top: 6px;
    font-size: 10px;
    line-height: 1.35;
    color: var(--ul-text-light);
}

/* Below 768px the gutter collapses to 16px of padding, so there is nowhere free
   to put the image and it would push the price table down — undoing the mobile
   fold work. Hide it. Nothing is lost: og:image and the Product schema `image`
   property are metadata and do not require the image to be rendered.

   display:none alone would still cost the bytes — Chrome downloads hidden images.
   The markup pairs this with a <picture> whose <source media="(max-width:767px)">
   is a 1x1 transparent GIF, so on a phone the browser resolves to the data URI and
   never touches the network. Verified: with the media query matching, currentSrc
   was the data URI and the img src drew zero requests.

   And note the img must NOT carry loading="lazy". Measured on this page: an
   absolutely positioned lazy image never loaded at all, in viewport or not,
   because Chrome defers it and then never re-checks without a scroll. */
/* ── Reader-photo asks, 2026-08-03 ──────────────────────────────────────────
   docs/development/user-submitted-images-2026-08-03.md

   Two variants of one component, both inside .ul-mp-hero so both inherit its
   position:absolute — which is what makes them free. They sit in the gutter
   that is reserved for the sidebar and otherwise empty, so however many lines
   they wrap to, the stats bar does not move.

   The quiet variant sits under an existing credit and must lose against it.
   That is the whole design constraint: the credit is an obligation we owe a
   photographer, the ask is an invitation, and an invitation shouting over an
   obligation would be the wrong way round. Hence the smaller size and the
   lighter colour, with the colour arriving only on hover.
   ──────────────────────────────────────────────────────────────────────────── */

.ul-mp-hero--ask {
    /* No frame, no fixed height: with nothing to show there is nothing to
       letterbox, and a 147px empty box with a link in it would read as a
       broken image rather than as an offer. */
    width: 196px;
}

.ul-mp-ask {
    display: block;
    text-decoration: none;
    border: 1px dashed var(--ul-border);
    border-radius: 8px;
    padding: 14px 12px;
    background: transparent;
    transition: border-color .15s ease, background-color .15s ease;
}

.ul-mp-ask:hover {
    border-color: var(--ul-primary);
    background: rgba(37, 99, 235, .04);
}

.ul-mp-ask-title {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--ul-text);
    margin-bottom: 3px;
}

.ul-mp-ask-body {
    display: block;
    font-size: 11px;
    line-height: 1.4;
    color: var(--ul-text-light);
}

/* The betterment line: one link under an existing credit, no box at all. It has
   to read as an aside rather than as a second credit, so it drops the border and
   goes a size smaller than the .ul-mp-cred above it. */
.ul-mp-ask--quiet {
    border: 0;
    padding: 6px 0 0;
    font-size: 10px;
    line-height: 1.35;
    color: var(--ul-text-light);
    opacity: .75;
}

.ul-mp-ask--quiet:hover {
    background: transparent;
    color: var(--ul-primary);
    opacity: 1;
}

/* Below 768px the gutter collapses to 16px of padding, so there is nowhere free
   to put the image and it would push the price table down — undoing the mobile
   fold work. Hide it. Nothing is lost: og:image and the Product schema `image`
   property are metadata and do not require the image to be rendered.

   display:none alone would still cost the bytes — Chrome downloads hidden images.
   The markup pairs this with a <picture> whose <source media="(max-width:767px)">
   is a 1x1 transparent GIF, so on a phone the browser resolves to the data URI and
   never touches the network. Verified: with the media query matching, currentSrc
   was the data URI and the img src drew zero requests.

   And note the img must NOT carry loading="lazy". Measured on this page: an
   absolutely positioned lazy image never loaded at all, in viewport or not,
   because Chrome defers it and then never re-checks without a scroll.

   This also hides both reader-photo asks, which is the intended v1 behaviour —
   the submission CTA is desktop-only because the mobile layout has no free space
   to put it in. The selector needs no change for that: .ul-mp-hero--ask carries
   .ul-mp-hero too. */
@media (max-width: 767px) {
    .ul-mp-hero { display: none; }
}

/* ==========================================================================
   END MASTER PRODUCT HERO IMAGE
   ========================================================================== */

/* ============================================
   MASTER REVIEWS — 2026-08-02
   First-hand review layer on master product pages.
   docs/development/reviews-and-rating-schema-2026-08-02.md
   Invisible until a master carries a published master_reviews row.
   ============================================ */

/* Rating chip in the spec-chip row — the review's mobile entry point */
.ul-spec-chip--review {
    color: var(--ul-primary);
    border: 1.5px solid var(--ul-primary);
    background: var(--ul-surface);
    text-decoration: none;
    font-weight: 700;
}
.ul-spec-chip--review:hover { background: #FDF0ED; }

/* Verdict block — occupies the short_summary slot in .ul-about-inner */
.ul-rev-verdict-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}
.ul-rev-score {
    font-family: var(--ul-font-ui);
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--ul-text);
    line-height: 1;
}
.ul-rev-stars { color: var(--ul-primary); letter-spacing: 1px; }
.ul-rev-by {
    font-family: var(--ul-font-ui);
    font-size: 0.78rem;
    color: var(--ul-text-light);
}
.ul-rev-lede { font-size: 1rem; }
.ul-rev-axes {
    font-family: var(--ul-font-ui);
    font-size: 0.82rem;
    color: var(--ul-text-body);
    margin: 8px 0 10px;
}
.ul-rev-axes span { white-space: nowrap; }
.ul-rev-axes span:not(:last-child)::after { content: "\00b7"; color: var(--ul-border); margin: 0 9px; }
.ul-rev-axes b { color: var(--ul-text); }
.ul-rev-cta {
    font-family: var(--ul-font-ui);
    font-size: 0.86rem;
    font-weight: 700;
    color: var(--ul-primary);
    text-decoration: none;
}
.ul-rev-cta:hover { text-decoration: underline; }
.ul-rev-bg-head {
    font-family: var(--ul-font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--ul-text-light);
    margin: 10px 0 6px;
}

/* Full review section — below the listings */
.ul-review { background: var(--ul-surface); border-top: 3px solid var(--ul-primary); border-bottom: 1px solid var(--ul-border); }
/* Anchor offset for the rating-chip / verdict-CTA jumps: the sticky stack is
   .ul-nav (48px) + .ul-search-topbar (search row + recent chips, ~95px), so a
   plain #ul-review jump buried the scorecard under the header. Same idiom as
   #ul-ph-full above; oversized a touch so the wrapped mobile topbar clears too. */
#ul-review { scroll-margin-top: 160px; }
.ul-review-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 26px 32px 30px calc(var(--ul-sidebar-w) + 56px);
}
.ul-review-title { font-size: 1.45rem; margin: 0 0 4px; color: var(--ul-text); }
.ul-review-byline {
    font-family: var(--ul-font-ui);
    font-size: 0.78rem;
    color: var(--ul-text-light);
    margin: 0 0 18px;
}
.ul-rev-scorecard {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
    border: 1px solid var(--ul-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-bottom: 22px;
    max-width: 620px;  /* match the 72ch review body — the card must not sit wider than the text (Dan, 2026-08-02) */
}
.ul-rev-sc-overall { text-align: center; padding-right: 24px; border-right: 1px solid var(--ul-border); }
.ul-rev-sc-overall b { display: block; font-family: var(--ul-font-ui); font-size: 2.1rem; font-weight: 700; line-height: 1; color: var(--ul-text); }
.ul-rev-sc-overall .ul-rev-stars { display: block; margin: 5px 0 2px; font-size: 0.85rem; }
.ul-rev-sc-lab { font-family: var(--ul-font-ui); font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ul-text-light); }
.ul-rev-sc-bars {
    flex: 1;
    min-width: 240px;
    display: grid;
    grid-template-columns: auto 1fr auto;
    gap: 8px 12px;
    align-items: center;
}
.ul-rev-sc-name { font-family: var(--ul-font-ui); font-size: 0.8rem; color: var(--ul-text-body); }
.ul-rev-sc-track { height: 7px; border-radius: 99px; background: var(--ul-surface-alt); overflow: hidden; display: block; }
.ul-rev-sc-fill { display: block; height: 100%; background: var(--ul-primary); border-radius: 0 4px 4px 0; }
.ul-rev-sc-val { font-family: var(--ul-font-ui); font-size: 0.8rem; font-weight: 700; color: var(--ul-text); font-variant-numeric: tabular-nums; }

.ul-rev-body { max-width: 72ch; font-size: 0.98rem; line-height: 1.75; color: var(--ul-text-body); }
.ul-rev-body p { margin: 0 0 15px; }
.ul-rev-body h2, .ul-rev-body h3 { color: var(--ul-text); margin: 24px 0 8px; }
.ul-rev-body img {
    display: block;
    width: 100%;
    max-width: 860px;
    height: auto;
    border-radius: 8px;
    border: 1px solid var(--ul-border);
    margin: 18px 0;
}

/* Sample gallery — thumbnails at the end of the review, lightbox on click */
.ul-rev-gal-head {
    font-family: var(--ul-font-ui);
    font-size: 1rem;
    font-weight: 700;
    color: var(--ul-text);
    margin: 26px 0 10px;
}
.ul-rev-gal-head span {
    font-size: 0.76rem;
    font-weight: 500;
    color: var(--ul-text-light);
    margin-left: 8px;
}
.ul-rev-gallery {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap: 10px;
    margin: 0 0 22px;
    /* Same 620px column as the body text and every other review element —
       a full-width grid after a narrow text column read as a different page
       (Dan, 2026-08-02). ~4 thumbs a row, 8 frames = 2 tidy rows. */
    max-width: 620px;
}
.ul-rev-gal-thumb {
    display: block;
    padding: 0;
    border: 1px solid var(--ul-border);
    border-radius: 8px;
    overflow: hidden;
    background: var(--ul-surface-alt);
    cursor: zoom-in;
}
.ul-rev-gal-thumb img { display: block; width: 100%; height: 112px; object-fit: cover; }
.ul-rev-gal-thumb:hover { border-color: var(--ul-primary); }
.ul-rev-gal-thumb:focus-visible { outline: 2px solid var(--ul-primary); outline-offset: 2px; }

/* Lightbox — above the sticky nav stack (nav z 1000 / topbar 999) */
.ul-rev-lb {
    position: fixed;
    inset: 0;
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    background: rgba(10, 16, 22, 0.94);
    padding: 28px;
}
.ul-rev-lb--open { display: flex; }
.ul-rev-lb figure { margin: 0; max-width: min(1200px, 92vw); text-align: center; }
.ul-rev-lb img {
    max-width: 100%;
    max-height: 82vh;
    object-fit: contain;
    border-radius: 4px;
}
.ul-rev-lb figcaption {
    font-family: var(--ul-font-ui);
    font-size: 0.82rem;
    color: #C9D4DC;
    margin-top: 12px;
    line-height: 1.5;
}
.ul-rev-lb-x, .ul-rev-lb-nav {
    background: none;
    border: 0;
    color: #E6EDF2;
    cursor: pointer;
    font-family: var(--ul-font-ui);
    line-height: 1;
}
.ul-rev-lb-x { position: absolute; top: 14px; right: 20px; font-size: 2rem; z-index: 2; }
/* Arrows as full-height EDGE STRIPS, not flex siblings of the figure — flex
   siblings track the image width, so the click target darted around between
   portrait and landscape frames (Dan, 2026-08-02: "whack-a-mole"). Pinned to
   the viewport edges the target never moves, and it's a big strip you can
   also click anywhere along, not just on the glyph. */
.ul-rev-lb-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 16%;
    min-width: 64px;
    display: flex;
    align-items: center;
    font-size: 2.6rem;
    user-select: none;
}
.ul-rev-lb-prev { left: 0; justify-content: flex-start; padding-left: 22px; }
.ul-rev-lb-next { right: 0; justify-content: flex-end; padding-right: 22px; }
.ul-rev-lb-nav:hover, .ul-rev-lb-x:hover { color: var(--ul-primary); }
.ul-rev-lb-prev:hover { background: linear-gradient(90deg, rgba(0,0,0,0.35), transparent); }
.ul-rev-lb-next:hover { background: linear-gradient(270deg, rgba(0,0,0,0.35), transparent); }
@media (max-width: 640px) {
    .ul-rev-gallery { grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); }
    .ul-rev-gal-thumb img { height: 88px; }
    .ul-rev-lb { padding: 12px; }
    .ul-rev-lb-nav { font-size: 2rem; min-width: 52px; }
    .ul-rev-lb-prev { padding-left: 10px; }
    .ul-rev-lb-next { padding-right: 10px; }
}

.ul-rev-pc { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 22px 0; max-width: 620px; }
.ul-rev-pc-col { border: 1px solid var(--ul-border); border-radius: 10px; padding: 14px 16px; }
.ul-rev-pc-col h3 {
    font-family: var(--ul-font-ui);
    font-size: 0.66rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    margin: 0 0 9px;
}
.ul-rev-pc-col--pro h3 { color: var(--ul-reduced-text); }
.ul-rev-pc-col--con h3 { color: #B4342A; }
.ul-rev-pc-col ul { margin: 0; padding: 0; list-style: none; }
.ul-rev-pc-col li {
    font-size: 0.86rem;
    line-height: 1.55;
    color: var(--ul-text-body);
    margin-bottom: 8px;
    padding-left: 20px;
    position: relative;
}
.ul-rev-pc-col li::before { position: absolute; left: 0; top: 0; font-weight: 700; }
.ul-rev-pc-col--pro li::before { content: "\2713"; color: var(--ul-reduced-text); }
.ul-rev-pc-col--con li::before { content: "\2715"; color: #B4342A; }

.ul-rev-specimen {
    background: var(--ul-surface-alt);
    border: 1px solid var(--ul-border);
    border-left: 3px solid var(--ul-primary);
    border-radius: 0 8px 8px 0;
    padding: 14px 18px;
    margin: 22px 0;
    font-size: 0.86rem;
    line-height: 1.65;
    color: var(--ul-text-body);
    max-width: 620px;
}
.ul-rev-specimen b {
    display: block;
    font-family: var(--ul-font-ui);
    font-size: 0.62rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ul-text);
    margin-bottom: 4px;
}
.ul-rev-author {
    display: flex;
    gap: 13px;
    align-items: flex-start;
    border-top: 1px solid var(--ul-border);
    padding-top: 18px;
    margin-top: 22px;
    max-width: 620px;
}
.ul-rev-author-avatar {
    width: 46px; height: 46px;
    flex: none;
    border-radius: 50%;
    background: var(--ul-text);
    color: var(--ul-surface);
    display: grid;
    place-items: center;
    font-family: var(--ul-font-ui);
    font-weight: 700;
    font-size: 0.92rem;
}
.ul-rev-author-text { font-family: var(--ul-font-ui); font-size: 0.82rem; line-height: 1.6; color: var(--ul-text-body); }
.ul-rev-author-text b { display: block; color: var(--ul-text); font-size: 0.88rem; margin-bottom: 2px; }
.ul-rev-author-text a { color: inherit; }

/* Background and specification — the AI copy as plain deep content below the
   review (no toggle; deep content renders expanded, like the ph block) */
.ul-rev-bg { background: var(--ul-surface); border-bottom: 1px solid var(--ul-border); }
.ul-rev-bg-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 18px 32px 20px calc(var(--ul-sidebar-w) + 56px);
}
.ul-rev-bg-inner .ul-about-desc { max-width: 72ch; }
.ul-rev-bg-title {
    font-family: var(--ul-font-ui);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    color: var(--ul-text-light);
    margin: 0 0 10px;
}

/* Draft-preview flag (admin preview link only — never on a published page) */
.ul-rev-preview-flag {
    font-family: var(--ul-font-ui);
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.08em;
    padding: 3px 9px;
    border-radius: 4px;
    background: #FDF3E0;
    color: #8A5A00;
    border: 1px solid #EDD9B0;
}

/* Verdict pills — short-form pros/cons chips (own fields; sentences stay
   in the review card). Axes row is the fallback when no pills exist. */
.ul-rev-take { color: var(--ul-text); }
.ul-rev-pills { display: flex; flex-wrap: wrap; gap: 8px; margin: 8px 0 10px; }
.ul-rev-pill {
    font-family: var(--ul-font-ui);
    font-size: 0.78rem;
    padding: 5px 12px;
    border-radius: 99px;
    border: 1px solid var(--ul-border);
}
.ul-rev-pill--pro { background: rgba(27, 138, 80, 0.08); color: var(--ul-reduced-text); border-color: rgba(27, 138, 80, 0.25); }
.ul-rev-pill--con { background: rgba(180, 52, 42, 0.07); color: #B4342A; border-color: rgba(180, 52, 42, 0.22); }

/* Review promo card — fills the dead space short tables leave in the
   results column; the listings-intent to review path */
.ul-rev-promo {
    display: flex;
    align-items: center;
    gap: 16px;
    background: var(--ul-surface);
    border: 1px solid var(--ul-border);
    border-radius: 10px;
    padding: 16px 20px;
    margin-top: 16px;
}
.ul-rev-promo-ico {
    width: 44px; height: 44px;
    flex: none;
    border-radius: 50%;
    background: #FDF0ED;
    color: var(--ul-primary);
    display: grid;
    place-items: center;
    font-size: 1.2rem;
}
.ul-rev-promo-txt { font-family: var(--ul-font-ui); font-size: 0.9rem; line-height: 1.55; color: var(--ul-text-body); }
.ul-rev-promo-txt b { display: block; color: var(--ul-text); }
.ul-rev-promo-btn {
    margin-left: auto;
    flex: none;
    background: var(--ul-primary);
    color: #fff;
    font-family: var(--ul-font-ui);
    font-weight: 700;
    font-size: 0.86rem;
    padding: 10px 18px;
    border-radius: 7px;
    text-decoration: none;
}
.ul-rev-promo-btn:hover { background: #d44a31; }

/* Sticky context bar inside the review section */
.ul-rev-stickybar {
    position: sticky;
    /* 6px UNDER the nav(48)+topbar(~95) stack, not flush at 143px: the bar's
       z-index is far below the topbar's, so the overlap is invisible — and a
       flush value left a 1-2px slit (sub-pixel rounding of the topbar height)
       that page content scrolled through (Dan, 2026-08-02). */
    top: 137px;
    z-index: 50;
    background: var(--ul-surface);
    border-bottom: 1px solid var(--ul-border);
    box-shadow: 0 4px 10px rgba(16, 32, 44, 0.05);
}
.ul-rev-stickybar-inner {
    max-width: var(--ul-max-width);
    margin: 0 auto;
    padding: 10px 32px;
    display: flex;
    align-items: baseline;
    gap: 18px;
    font-family: var(--ul-font-ui);
    font-size: 0.86rem;
}
.ul-rev-stickybar-inner > b { color: var(--ul-text); }
.ul-rev-sb-price { color: var(--ul-text-body); }
.ul-rev-sb-back { margin-left: auto; color: var(--ul-primary); font-weight: 700; text-decoration: none; }
.ul-rev-sb-back:hover { text-decoration: underline; }
#ulMain { scroll-margin-top: 160px; }

/* Gallery hero tile — sort_order 1 leads at double size */
.ul-rev-gallery .ul-rev-gal-thumb:first-child { grid-column: span 2; grid-row: span 2; }
.ul-rev-gallery .ul-rev-gal-thumb:first-child img { height: 234px; }   /* 2 rows + gap */

/* Review hub — /reviews */
.ul-revhub { background: var(--ul-surface); }
.ul-revhub-inner { max-width: var(--ul-max-width); margin: 0 auto; padding: 30px 32px 50px; }
.ul-revhub-title { font-size: 1.7rem; margin: 0 0 8px; color: var(--ul-text); }
.ul-revhub-lede { font-size: 0.98rem; line-height: 1.65; color: var(--ul-text-body); max-width: 72ch; margin: 0 0 26px; }
.ul-revhub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; }
.ul-revhub-card {
    display: block;
    border: 1px solid var(--ul-border);
    border-radius: 10px;
    padding: 18px 20px;
    text-decoration: none;
    color: inherit;
    background: var(--ul-surface);
}
.ul-revhub-card:hover { border-color: var(--ul-primary); box-shadow: 0 4px 14px rgba(16, 32, 44, 0.07); }
.ul-revhub-card-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 6px; }
.ul-revhub-score { font-family: var(--ul-font-ui); font-size: 1.3rem; font-weight: 700; color: var(--ul-text); }
.ul-revhub-stars { color: var(--ul-primary); letter-spacing: 1px; font-size: 0.9rem; }
.ul-revhub-card h2 { font-size: 1.08rem; margin: 0 0 8px; color: var(--ul-text); }
.ul-revhub-verdict { font-size: 0.9rem; line-height: 1.6; color: var(--ul-text-body); margin: 0 0 10px; }
.ul-revhub-meta { font-family: var(--ul-font-ui); font-size: 0.76rem; color: var(--ul-text-light); margin: 0 0 10px; }
.ul-revhub-cta { font-family: var(--ul-font-ui); font-size: 0.84rem; font-weight: 700; color: var(--ul-primary); }
.ul-revhub-empty { font-size: 0.95rem; color: var(--ul-text-body); }
/* Lead sample frame on review cards (2026-08-02) — the review's own first
   live gallery frame, Dan's copyright, so no credit strip */
.ul-revhub-card-img { display: block; height: 150px; border-radius: 8px;
    overflow: hidden; margin-bottom: 10px; background: #f8fafc; }
.ul-revhub-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (max-width: 640px) { .ul-revhub-inner { padding: 22px 16px 36px; } }
/* Homepage "Latest reviews" strip (2026-08-02) — the hub's cards inside the
   old blog column, so the two surfaces stay visually one family. Single
   column: with the In-demand column beside it the reviews column is ~500px
   at the 1200px shell, too narrow for two-up cards. */
.ul-home-reviews .ul-revhub-grid { grid-template-columns: 1fr; }
.ul-home-reviews .ul-revhub-card h3 { font-size: 1.05rem; margin: 0 0 8px; color: var(--ul-text); }

/* Mobile — mirror the padding collapse the sibling inners use ≤10px/768px */
@media (max-width: 768px) {
    .ul-review-inner, .ul-rev-bg-inner { padding-left: 16px; padding-right: 16px; }
    .ul-rev-stickybar-inner { padding: 9px 16px; flex-wrap: wrap; gap: 10px; }
    .ul-rev-promo { flex-wrap: wrap; }
    .ul-rev-promo-btn { margin-left: 0; }
    .ul-rev-gallery .ul-rev-gal-thumb:first-child img { height: 186px; }
    .ul-rev-pc { grid-template-columns: 1fr; }
    .ul-rev-sc-overall { border-right: none; padding-right: 0; text-align: left; }
    .ul-rev-score { font-size: 1.3rem; }
}

/* ==========================================================================
   READER PHOTO SUBMISSION PAGES  —  2026-08-03
   docs/development/user-submitted-images-2026-08-03.md

   Shared by /submit-image, /verify-image and /image-submissions. One narrow
   centred card on all three, because all three are the same kind of moment:
   a single task, no navigation decisions, nothing else competing for the eye.

   Sized to the content rather than to the grid. These pages are off the main
   browse path — nobody arrives here except by clicking the ask in a product
   page gutter — so they borrow the site's tokens but not its layout.
   ========================================================================== */

.ul-submit-wrap {
    display: flex;
    justify-content: center;
    padding: 48px 20px 72px;
}

.ul-submit-card {
    width: 100%;
    max-width: 560px;
    background: var(--ul-surface, #fff);
    border: 1px solid var(--ul-border);
    border-radius: 16px;
    padding: 40px;
}

.ul-submit-card h1 {
    font-size: 1.6rem;
    margin: 0 0 12px;
}

.ul-submit-lede {
    color: var(--ul-text-light);
    line-height: 1.6;
    margin: 0 0 28px;
}

/* Confirmation states — centred, because there is nothing to do on them. */
.ul-submit-card--done { text-align: center; }

.ul-submit-tick {
    font-size: 52px;
    line-height: 1;
    color: #16a34a;
    margin-bottom: 14px;
}

.ul-submit-tick--no { color: var(--ul-text-light); }

.ul-submit-card--done p {
    color: var(--ul-text-light);
    line-height: 1.6;
    margin: 0 0 10px;
}

.ul-submit-small {
    font-size: .85rem;
    color: var(--ul-text-light);
    line-height: 1.55;
}

/* ── The form ─────────────────────────────────────────────────────────────── */

.ul-submit-form label {
    display: block;
    font-weight: 600;
    font-size: .92rem;
    margin: 22px 0 6px;
}

.ul-submit-form input[type="text"],
.ul-submit-form input[type="email"],
.ul-submit-form input[type="url"],
.ul-submit-form input[type="file"] {
    width: 100%;
    padding: 11px 12px;
    border: 1px solid var(--ul-border);
    border-radius: 8px;
    font-size: .95rem;
    font-family: inherit;
    background: #fff;
    box-sizing: border-box;
}

.ul-submit-form input:focus {
    outline: 2px solid var(--ul-primary);
    outline-offset: 1px;
    border-color: var(--ul-primary);
}

.ul-submit-hint {
    font-size: .8rem;
    color: var(--ul-text-light);
    line-height: 1.5;
    margin: 7px 0 0;
}

.ul-submit-opt {
    font-weight: 400;
    font-size: .8rem;
    color: var(--ul-text-light);
}

/* The grant. Deliberately not styled down into small print: it is the entire
   licence for the photograph, and a contributor agreeing to it should be able
   to read it without effort. Aligned as a real two-column row so the text does
   not wrap underneath the checkbox. */
.ul-submit-grant {
    display: flex !important;
    gap: 10px;
    align-items: flex-start;
    font-weight: 400 !important;
    font-size: .85rem !important;
    line-height: 1.55;
    color: var(--ul-text-light);
    margin: 28px 0 0 !important;
    padding: 14px;
    border: 1px solid var(--ul-border);
    border-radius: 8px;
    background: var(--ul-bg, #f8fafc);
}

.ul-submit-grant input[type="checkbox"] {
    margin-top: 2px;
    flex: 0 0 auto;
    width: 16px;
    height: 16px;
}

.ul-submit-btn {
    display: inline-block;
    margin-top: 26px;
    padding: 13px 30px;
    background: var(--ul-primary);
    color: #fff;
    border: 0;
    border-radius: 8px;
    font-size: .98rem;
    font-weight: 600;
    font-family: inherit;
    text-decoration: none;
    cursor: pointer;
}

.ul-submit-btn:hover { filter: brightness(1.08); }

.ul-submit-errors {
    border: 1px solid #fecaca;
    background: #fef2f2;
    border-radius: 8px;
    padding: 14px 16px;
    margin-bottom: 22px;
}

.ul-submit-errors p {
    margin: 0 0 6px;
    color: #b91c1c;
    font-size: .9rem;
    line-height: 1.5;
}

.ul-submit-errors p:last-child { margin-bottom: 0; }

/* ── The terms page ───────────────────────────────────────────────────────── */

.ul-submit-prose h2 {
    font-size: 1.05rem;
    margin: 32px 0 10px;
}

.ul-submit-prose p,
.ul-submit-prose li {
    color: var(--ul-text-light);
    line-height: 1.65;
}

.ul-submit-prose ul {
    margin: 0 0 8px;
    padding-left: 20px;
}

.ul-submit-prose li { margin-bottom: 9px; }

.ul-submit-prose code {
    font-size: .85em;
    background: var(--ul-bg, #f1f5f9);
    padding: 1px 5px;
    border-radius: 4px;
}

@media (max-width: 600px) {
    .ul-submit-card { padding: 28px 22px; }
    .ul-submit-wrap { padding: 28px 14px 56px; }
}