/* ---- MAIN ---- */
        main { max-width: none; width: 100%; padding: 32px 5% 80px; box-sizing: border-box; }

        /* ---- SCREENER HEADER ---- */
        .screener-hd {
            display: flex; justify-content: space-between;
            align-items: flex-end; margin-bottom: 16px;
        }

        .screener-title { font-size: 21.8px; font-weight: 900; color: #ffffff; letter-spacing: 2px; text-transform: uppercase; text-shadow: 0 1px 10px rgba(0,0,0,0.6); font-style: italic; }
        .screener-sub { font-size: 11.4px; font-weight: 600; color: rgba(255,255,255,0.88); letter-spacing: 1.5px; text-transform: uppercase; margin-top: 4px; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
        .result-count { font-size: 13.5px; color: #9ab860; letter-spacing: 1px; }

        /* ---- FILTER BAR ---- */
        .filter-bar { display: flex; gap: 7px; margin-bottom: 18px; flex-wrap: wrap; align-items: center; }

        .filter-label { font-size: 10.4px; font-weight: 900; color: #7a9448; letter-spacing: 2px; text-transform: uppercase; margin-right: 2px; }

        /* Brand filters run to dozens of chips and wrap over several lines. Left
           alone they end each line ragged; here they take a full row of their
           own and stretch to the boundaries, so every line is flush and the
           chip widths vary with the brand name. Desktop and mobile alike.
           Only brands get this — Type/Season/R-Value are short and stay inline. */
        .brand-chip-row {
            flex: 1 1 100%;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 6px;
            width: 100%;
        }
        .brand-chip-row .filter-label { flex: 0 0 auto; }
        .brand-chip-row .chip { flex: 1 1 auto; text-align: center; }

        .chip {
            padding: 5px 13px; border-radius: 20px;
            border: 1px solid #c4d898;
            background: #f2f7e8;
            color: #7a9448;
            font-family: 'Oswald', sans-serif;
            font-size: 11.4px; letter-spacing: 1px; text-transform: uppercase;
            cursor: pointer; transition: all 0.15s;
        }

        .chip:hover { border-color: #5a7030; color: #3A4A20; background: #eaf5d8; }
        .chip.active { background: #3A4A20; border-color: #3A4A20; color: #ffffff; box-shadow: 0 2px 6px rgba(58,74,32,0.25); }

        /* ---- TABLE ---- */
        .table-wrap {
            background: rgba(255,255,255,0.85); border-radius: 12px;
            overflow: hidden; border: 1px solid #c4d898;
        }

        table { width: 100%; border-collapse: collapse; }

        thead tr { background: #3A4A20; border-bottom: 1px solid #3A4A20; }
        /* Painted on the CELLS as well as the row. A background on a <tr> is
           the row's, and with border-collapse the cells sit on top of it — so
           the trailing header above the Add / Wishlist column, which has no
           text of its own, could read as a gap in the green bar. */
        th { background: #3A4A20; }

        th {
            padding: 13px 15px; text-align: left;
            font-size: 10.4px; font-weight: 900;
            color: rgba(255,255,255,0.85);
            letter-spacing: 2px; text-transform: uppercase;
            white-space: nowrap; user-select: none;
            cursor: pointer;
        }

        th:hover { color: #ffffff; }

        tbody tr:nth-child(odd)  { background: #f4f9ec; }
        tbody tr:nth-child(even) { background: #ffffff; }
        tbody tr { border-bottom: 1px solid #e4efd0; transition: background 0.15s; }
        tbody tr:last-child { border-bottom: none; }
        tbody tr:hover { background: #d8edbe; }

        td { padding: 16px 15px; font-size: 13.5px; color: #4a5e28; letter-spacing: 0.4px; vertical-align: middle; }

        .td-name { font-weight: 900; font-size: 14.6px; color: #1a2a0e; }
        .td-sub { font-size: 11.4px; font-weight: 400; color: #9ab860; letter-spacing: 1.4px; text-transform: uppercase; margin-top: 3px; }
        /* Pack table gear values 40% larger (Size/Price/Weight/Season/Rating cells) */
        .pack-group-item td { font-size: 18.9px; }

        /* Stars */
        .stars { display: flex; gap: 2px; justify-content: center; }
        .star { font-size: 13.5px; color: #c4d898; }
        .star.on { color: #E8B84B; }
        .star.half { color: #E8B84B; opacity: 0.5; }
        .stars-lbl { font-size: 10.4px; color: #9ab860; margin-top: 2px; letter-spacing: 0.5px; text-align: center; }

        /* Badges */
        .badge {
            display: inline-flex; align-items: center; justify-content: center;
            font-size: 12.5px; font-weight: 900; padding: 3px 9px; border-radius: 5px;
        }

        .b-green  { background: rgba(58,74,32,0.10);  color: #3A4A20; border: 1px solid rgba(58,74,32,0.25); }
        .b-yellow { background: rgba(212,104,30,0.10); color: #C85A10; border: 1px solid rgba(212,104,30,0.28); }
        .b-red    { background: rgba(200,80,80,0.10);  color: #b84040; border: 1px solid rgba(200,80,80,0.22); }
        .b-gray   { background: rgba(58,74,32,0.05);   color: #9ab860; border: 1px solid #c4d898; }

        .metric-val { font-weight: 900; font-size: 13.5px; }
        .mv-good { color: #3A4A20; }
        .mv-mid  { color: #C85A10; }
        .mv-na   { color: #c4d898; }
        .metric-hint { font-size: 10.4px; color: #9ab860; letter-spacing: 1px; text-transform: uppercase; margin-top: 1px; }

        .season-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #7a9448; margin-right: 5px; }
        .na { color: #c4d898; font-size: 12.5px; }

        /* Buttons */
        .btn-add {
            padding: 6px 14px; border-radius: 18px;
            border: 1px solid #3A4A20;
            background: transparent; color: #3A4A20;
            font-family: 'Oswald', sans-serif;
            font-size: 11.4px; letter-spacing: 1px; text-transform: uppercase;
            cursor: pointer; transition: all 0.15s; white-space: nowrap;
        }

        .btn-add:hover { background: #D4681E; border-color: #D4681E; color: #ffffff; }

        .btn-add.in-pack {
            border-color: #c4d898;
            color: #c4d898;
            cursor: pointer;
        }
        .btn-add.in-pack:hover {
            background: rgba(232,85,85,0.08);
            border-color: #E85555;
            color: #E85555;
        }

        .btn-remove {
            padding: 6px 13px; border-radius: 18px;
            border: 1px solid rgba(200,80,80,0.38);
            background: transparent; color: #b84040;
            font-family: 'Oswald', sans-serif;
            font-size: 11.4px; letter-spacing: 1px; text-transform: uppercase;
            cursor: pointer; transition: all 0.15s;
        }

        .btn-remove:hover { background: rgba(200,80,80,0.08); }

        .table-footer {
            padding: 11px 18px;
            background: rgba(242,247,232,0.85);
            border-top: 1px solid #e4efd0;
            font-size: 10.4px; color: #9ab860;
            letter-spacing: 1px; text-transform: uppercase;
        }

        /* ---- SCREENER FILTER PANEL ---- */
        .screener-filter-panel {
            background: #f2f7e8; border: 1px solid #c4d898;
            border-radius: 12px; padding: 14px 18px;
            margin-bottom: 18px; display: flex; flex-direction: column; gap: 9px;
        }
        .filter-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }

        /* ---- SORT & FILTER BUTTONS ---- */
        .sf-wrap { position: relative; display: inline-block; }

        .sf-btn {
            padding: 7px 16px; border-radius: 7px;
            border: 1px solid #c4d898; background: #fff;
            color: #5a7030; font-family: 'Oswald', sans-serif;
            font-size: 11.4px; letter-spacing: 1.5px; text-transform: uppercase;
            cursor: pointer; transition: all 0.15s; white-space: nowrap;
        }
        .sf-btn:hover { border-color: #3A4A20; color: #3A4A20; }
        .sf-btn.sf-open { background: #3A4A20; color: #fff; border-color: #3A4A20; }

        .sf-panel {
            display: none; position: absolute;
            top: calc(100% + 8px); right: 0;
            background: #fff; border: 1px solid #c4d898;
            border-radius: 10px; z-index: 500;
            box-shadow: 0 8px 28px rgba(58,74,32,0.14);
            overflow: hidden; min-width: 210px;
        }
        .sf-panel.open { display: block; }

        /* Filter + Sort row on a category page. Right-aligned so it sits under
           the page title without competing with it, and wraps on a phone. */
        .cat-sf-row {
            display: flex; justify-content: flex-end; align-items: center;
            gap: 10px; flex-wrap: wrap; margin: 0 auto 14px;
        }

        .sf-panel-hd {
            padding: 9px 16px;
            font-size: 10.4px; font-weight: 900; color: #9ab860;
            letter-spacing: 2px; text-transform: uppercase;
            border-bottom: 1px solid #e4efd0; background: #f2f7e8;
        }

        .sf-opt {
            padding: 9px 18px; cursor: pointer;
            font-size: 13.5px; color: #5a7030; letter-spacing: 0.3px;
            display: flex; justify-content: space-between; align-items: center;
            border-bottom: 1px solid #f2f7e8;
            text-decoration: none; transition: color 0.12s, background 0.12s;
        }
        .sf-opt:last-child { border-bottom: none; }
        .sf-opt:hover { color: #D4681E; background: #fafff5; text-decoration: underline; text-decoration-color: #D4681E; }
        .sf-opt.sf-active { color: #3A4A20; font-weight: 900; text-decoration: none; }
        .sf-check { color: #D4681E; font-size: 12.5px; margin-left: 10px; flex-shrink: 0; }

        .sf-filter-panel { min-width: 260px; }
        .sf-filter-group { border-bottom: 1px solid #e4efd0; }
        .sf-filter-group:last-child { border-bottom: none; }
        .sf-filter-opts { display: flex; flex-wrap: wrap; gap: 6px; padding: 10px 14px 12px; }
        .sf-filter-chip {
            padding: 4px 12px; border-radius: 16px;
            border: 1px solid #c4d898; background: transparent;
            color: #7a9448; font-family: 'Oswald', sans-serif;
            font-size: 11.4px; letter-spacing: 1px; text-transform: uppercase;
            cursor: pointer; transition: all 0.13s;
        }
        .sf-filter-chip:hover { border-color: #5a7030; color: #3A4A20; }
        .sf-filter-chip.sf-active { background: #3A4A20; border-color: #3A4A20; color: #fff; }

        /* ---- Screen By Modal ---- */
        .sb-overlay { display:none; position:fixed; inset:0; background:rgba(10,20,5,0.45); z-index:1000; align-items:center; justify-content:center; }
        .sb-overlay.open { display:flex; }
        .sb-modal { background:#fff; border-radius:14px; box-shadow:0 16px 56px rgba(26,42,14,0.22); width:480px; max-width:94vw; overflow:hidden; font-family:'Inter',sans-serif; }
        .sb-modal-hd { background:#1a2a0e; padding:18px 22px 14px; display:flex; align-items:center; justify-content:space-between; }
        .sb-modal-title { font-family:'Oswald',sans-serif; font-size: 15.6px; letter-spacing:2.5px; text-transform:uppercase; color:#c4d898; }
        .sb-close { background:none; border:none; color:#7a9448; font-size: 20.8px; cursor:pointer; line-height:1; padding:0 2px; }
        .sb-close:hover { color:#c4d898; }
        /* Step 1 — metric picker */
        .sb-metrics { display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:20px; }
        .sb-metric-btn { background:#f4f9ec; border:1.5px solid #d6eab8; border-radius:9px; padding:12px 14px; cursor:pointer; text-align:left; transition:all 0.13s; }
        .sb-metric-btn:hover { border-color:#8ab840; background:#eaf4d8; }
        .sb-metric-btn.active { border-color:#3A4A20; background:#d8edb8; }
        .sb-metric-name { font-size: 13.5px; font-weight:900; color:#1a2a0e; letter-spacing:0.3px; }
        .sb-metric-desc { font-size: 10.9px; color:#7a9448; margin-top:3px; letter-spacing:0.2px; }
        /* Step 2 — range config */
        .sb-config { padding:20px 22px 26px; }
        .sb-config-label { font-size: 11.4px; font-weight:900; color:#9ab860; letter-spacing:2px; text-transform:uppercase; margin-bottom:22px; }
        .sb-range-container { padding:0 4px; }
        .sb-range-track { position:relative; height:4px; background:#e0ecd0; border-radius:2px; margin:16px 0 10px; }
        .sb-range-fill { position:absolute; height:100%; background:#4a7a20; border-radius:2px; pointer-events:none; }
        .sb-range-input { position:absolute; width:100%; top:-10px; height:24px; background:transparent; pointer-events:none; -webkit-appearance:none; appearance:none; outline:none; margin:0; padding:0; }
        .sb-range-input::-webkit-slider-runnable-track { background:transparent; }
        .sb-range-input::-moz-range-track { background:transparent; height:4px; }
        .sb-range-input::-webkit-slider-thumb { pointer-events:all; -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:#fff; border:2.5px solid #4a7a20; cursor:pointer; box-shadow:0 1px 6px rgba(26,42,14,0.2); }
        .sb-range-input::-moz-range-thumb { pointer-events:all; width:18px; height:18px; border-radius:50%; background:#fff; border:2.5px solid #4a7a20; cursor:pointer; box-shadow:0 1px 6px rgba(26,42,14,0.2); }
        .sb-range-vals { display:flex; justify-content:space-between; margin-top:2px; }
        .sb-range-val { font-size: 13.5px; font-weight:900; color:#1a2a0e; letter-spacing:0.2px; }
        .sb-modal-footer { display:flex; justify-content:space-between; align-items:center; padding:14px 22px 18px; border-top:1px solid #e8f2d8; }
        .sb-back { background:none; border:none; font-size: 12.5px; color:#9ab860; cursor:pointer; letter-spacing:0.5px; }
        .sb-back:hover { color:#5a7030; }
        .sb-apply { padding:9px 26px; background:#3A4A20; color:#c4d898; border:none; border-radius:7px; font-family:'Oswald',sans-serif; font-size: 12.5px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:background 0.13s; }
        .sb-apply:hover { background:#4a5e28; }
        /* Definitions page */
        .def-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:16px; margin-bottom:40px; }
        .def-card { background:rgba(255,255,255,0.85); border:1px solid #d6eab8; border-radius:10px; padding:18px 20px; }
        .def-card-hd { display:flex; align-items:baseline; justify-content:space-between; margin-bottom:10px; gap:10px; }
        .def-term { font-family:'Oswald',sans-serif; font-size: 15.6px; font-weight: 900; letter-spacing:1px; color:#1a2a0e; text-transform:uppercase; }
        .def-cat { font-size: 10.4px; font-weight:900; color:#9ab860; letter-spacing:1.5px; text-transform:uppercase; white-space:nowrap; }
        .def-body { font-size: 13px; color:#4a5e30; line-height:1.7; margin-bottom:12px; }
        .def-formula { font-size: 11.4px; color:#7a9448; background:#f4f9ec; border-radius:5px; padding:6px 10px; letter-spacing:0.3px; }
        .def-formula-lbl { font-weight:900; color:#3A4A20; text-transform:uppercase; letter-spacing:1px; font-size: 10.4px; margin-right:4px; }
        /* My Pack definitions link box */
        .def-link-box { margin-left:auto; display:inline-flex; flex-direction:column; align-items:flex-end; justify-content:center; }
        .def-link-btn { background:#ffffff; border:1.5px solid #c4d898; border-radius:8px; padding:9px 16px; font-size: 12px; color:#6a8450; cursor:pointer; letter-spacing:0.5px; font-family:'Inter',sans-serif; transition:all 0.13s; white-space:nowrap; }
        .def-link-btn:hover { border-color:#3A4A20; color:#3A4A20; background:#f4f9ec; }
        .def-link-hint { font-size: 9.9px; color:#b8d090; letter-spacing:0.5px; margin-top:4px; text-align:right; }
        /* Pack hierarchical table */
        .pack-group-parent td { background:#1a2a0e; color:#c4d898; font-family:'Oswald',sans-serif; font-size: 11.4px; letter-spacing:2.5px; text-transform:uppercase; padding:8px 16px; border-bottom:none; }
        .pack-group-parent .pg-cost { margin-left:auto; font-size: 12.5px; font-weight:900; color:#a8cc70; letter-spacing:0.5px; }
        .pack-group-child td { font-size: 11.4px; font-weight:900; letter-spacing:1.5px; text-transform:uppercase; padding:6px 16px 6px 28px; border-bottom:1px solid #ddefc0; }
        .pack-group-child .pg-cat-lbl { display:flex; align-items:center; gap:8px; }
        .pack-group-child .pg-cat-dot { width:9px; height:9px; border-radius:50%; display:inline-block; flex-shrink:0; }
        .pack-group-child .pg-cost { margin-left:auto; font-size: 14px; font-weight:900; letter-spacing:0.3px; }
        .pack-group-item td:first-child { padding-left:44px; }
        /* Report button */
        .report-btn { display:block; width:100%; padding:11px 20px; border-radius:9px; border:1.5px solid #4caf64; background:#f4f9ec; color:#3A4A20; font-family:'Oswald',sans-serif; font-size: 13.5px; letter-spacing:2px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; text-align:center; margin-bottom:8px; }
        .report-btn:hover { background:#3A4A20; color:#c4d898; border-color:#3A4A20; }
        /* Park selector */
        .park-selector-wrap { margin-top:10px; border-top:1px solid #e0ecd0; padding-top:10px; }
        .park-selector-lbl { display:block; font-size: 12.4px; font-weight:900; color:#ffffff; letter-spacing:1.8px; text-transform:uppercase; margin-bottom:5px; }
        .park-selector { width:100%; padding:8px 10px; border:1.5px solid #c4d898; border-radius:7px; background:#fafff6; color:#1a2a0e; font-size: 12px; font-family:'Inter',sans-serif; cursor:pointer; appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239ab860'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 10px center; }
        .park-selector:focus { outline:none; border-color:#3A4A20; }
        /* Screen By button */
        .sb-btn-wide { display:block; width:100%; padding:13px 20px; margin-bottom:0; border-radius:9px 9px 0 0; border:2px solid #3A4A20; background:#3A4A20; color:#c4d898; font-family:'Oswald',sans-serif; font-size: 14.6px; letter-spacing:2.5px; text-transform:uppercase; cursor:pointer; transition:background 0.15s; text-align:center; }
        .sb-btn-wide:hover { background:#4a5e28; border-color:#4a5e28; }
        /* Active screen list box */
        .sb-list-box { border:2px solid #3A4A20; border-top:none; border-radius:0 0 9px 9px; margin-bottom:20px; overflow:hidden; background:#fff; }
        .sb-list-box:empty { border:none; margin-bottom:20px; }
        .sb-list-row { display:flex; align-items:center; justify-content:space-between; padding:9px 16px; border-bottom:1px solid #e8f2d8; }
        .sb-list-row:last-child { border-bottom:none; }
        .sb-list-label { font-size: 13px; font-weight:600; color:#1a2a0e; letter-spacing:0.3px; }
        .sb-list-edit { background:none; border:none; cursor:pointer; font-size: 13px; font-weight:600; color:#4a7a20; letter-spacing:0.3px; padding:0; text-decoration:none; font-family:'Inter',sans-serif; }
        .sb-list-edit:hover { color:#2d5010; }
        .sb-list-x { background:none; border:none; cursor:pointer; color:#9ab860; font-size: 16.6px; line-height:1; padding:0 2px; }
        .sb-list-x:hover { color:#c0392b; }
        /* inline sort button stays its own style */
        .sb-btn { padding:7px 16px; border-radius:7px; border:1.5px solid #3A4A20; background:#3A4A20; color:#c4d898; font-family:'Oswald',sans-serif; font-size: 11.4px; letter-spacing:1.5px; text-transform:uppercase; cursor:pointer; transition:all 0.15s; white-space:nowrap; }
        .sb-btn:hover { background:#4a5e28; border-color:#4a5e28; }

        /* ── hero / content overlay ── */
        #mainContent { position: relative; z-index: 1; margin-top: -740px; background: transparent; padding-top: 20px; padding-left: 0; padding-right: 0; }
        /* Uniform tab width — every tab's top-level content sits at 90% centered,
           matching the My Pack layout. Tabs that already inline width:90% are
           unaffected (inline wins); this mainly constrains the category-screener
           pages whose .screener-hd / .filter-bar / .table-wrap render directly
           inside #mainContent. Desktop only; mobile keeps its own responsive CSS. */
        @media (min-width: 1025px) {
            #mainContent > * { width: 90%; margin-left: auto; margin-right: auto; }
        }
        /* Fully opaque white behind filter controls */
        .filter-bar {
            background: #ffffff;
            border-radius: 10px;
            padding: 10px 12px;
            border: 1px solid #e4efd0;
        }
        /* No box — just white text floating over the photo */
        .screener-hd { background: transparent; padding: 10px 0; width: fit-content; max-width: 100%; }
        .screener-title { color: #ffffff !important; text-shadow: 0 1px 8px rgba(0,0,0,0.55); }
        .screener-sub   { color: rgba(255,255,255,0.85) !important; text-shadow: 0 1px 6px rgba(0,0,0,0.5); }
        /* ── Comp (comparison) tab ── */
        /* Reserve the hero-photo height so the site footer sits below the photo even when empty */
        .comp-view { min-height: 740px; }
        @media (max-width: 1024px) { .comp-view { min-height: 220px; } }
        .comp-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-bottom: 6px; }
        @media (max-width: 720px) { .comp-slots { grid-template-columns: 1fr; } }
        .comp-slot { position: relative; background: linear-gradient(180deg,#fdfff9,#f4f9ec); border: 1.5px solid #c4d898; border-radius: 14px;
                     padding: 26px 18px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 150px; justify-content: center;
                     transition: border-color 0.2s, box-shadow 0.2s; }
        .comp-slot:hover { border-color: #7a9448; box-shadow: 0 4px 18px rgba(58,74,32,0.10); }
        .comp-slot-plus { width: 40px; height: 40px; border-radius: 50%; background: #eaf5d8; border: 1.5px solid #c4d898;
                          display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 400; color: #7a9448; line-height: 1; }
        .comp-slot-num { font-size: 12.5px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #3a5a10; font-family: 'Oswald', sans-serif; }
        .comp-search { width: 100%; padding: 10px 14px; border: 1.5px solid #c4d898; border-radius: 9px; font-size: 13.5px;
                       font-family: 'Inter', sans-serif; background: #ffffff; outline: none; transition: border-color 0.15s, box-shadow 0.15s; }
        .comp-search:focus { border-color: #3A4A20; box-shadow: 0 0 0 3px rgba(58,74,32,0.08); }
        .comp-dropdown { position: absolute; top: calc(100% - 8px); left: 12px; right: 12px; z-index: 50; background: #fff;
                         border: 1px solid #c4d898; border-radius: 9px; overflow-y: auto; overflow-x: hidden;
                         max-height: 340px; box-shadow: 0 10px 26px rgba(0,0,0,0.16);
                         overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
        .comp-dropdown:empty { display: none; }
        .comp-drop-head { position: sticky; top: 0; z-index: 1; background: #f4f9ec; color: #5a7030;
                          font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
                          font-family: 'Oswald', sans-serif; padding: 8px 13px; border-bottom: 1px solid #dce8c8; }
        .comp-drop-item { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 13px; cursor: pointer;
                          border-bottom: 1px solid #eef4e2; }
        .comp-drop-item:last-child { border-bottom: none; }
        .comp-drop-item:hover { background: #eef4e2; }
        .comp-drop-main { display: flex; flex-direction: column; min-width: 0; }
        .comp-drop-name { color: #1a2a0e; font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .comp-drop-sub { color: #7a9448; font-size: 11px; letter-spacing: 0.3px; margin-top: 1px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .comp-drop-price { color: #3A4A20; font-weight: 700; font-size: 12.5px; font-family: 'Oswald', sans-serif; white-space: nowrap; flex-shrink: 0; }
        .comp-x { position: absolute; top: 9px; right: 11px; background: rgba(255,255,255,0.85); border: 1px solid #dce8c8; border-radius: 50%;
                  width: 24px; height: 24px; color: #9ab860; font-size: 15px; line-height: 1; cursor: pointer; z-index: 2;
                  display: flex; align-items: center; justify-content: center; transition: all 0.15s; }
        .comp-x:hover { color: #fff; background: #c0392b; border-color: #c0392b; }
        .comp-eyebrow { font-size: 10.5px; letter-spacing: 2px; text-transform: uppercase; color: #D4681E; font-weight: 700; margin-bottom: 6px; font-family: 'Oswald', sans-serif; }
        .comp-name { font-size: 18.5px; font-weight: 700; color: #1a2a0e; line-height: 1.2; cursor: pointer; font-family: 'Oswald', sans-serif; letter-spacing: 0.3px; }
        .comp-name:hover { color: #D4681E; }
        .comp-brand { font-size: 12px; color: #7a9448; letter-spacing: 1.5px; text-transform: uppercase; margin: 4px 0 10px; font-weight: 600; }
        .comp-price { font-size: 21px; font-weight: 700; color: #3A4A20; font-family: 'Oswald', sans-serif; }

        .comp-card2 { position: relative; background: #ffffff; border: 1px solid #c4d898; border-top: 4px solid #3A4A20; border-radius: 14px;
                      padding: 18px 18px 10px; box-shadow: 0 3px 16px rgba(26,42,14,0.08); align-self: start;
                      transition: box-shadow 0.2s, transform 0.2s; }
        .comp-card2:hover { box-shadow: 0 8px 28px rgba(26,42,14,0.14); transform: translateY(-2px); }
        .comp-card-hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 12px; border-bottom: 2px solid #e4efd0; margin-bottom: 4px; }
        .comp-attr-list { display: flex; flex-direction: column; }
        .comp-attr-row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px;
                         padding: 9px 8px 8px; border-bottom: 1px solid #f0f6e6; border-radius: 6px; }
        .comp-attr-row:nth-child(even) { background: #fafcf5; }
        .comp-attr-row:last-child { border-bottom: none; }
        .comp-attr-lbl { font-size: 11px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase; color: #8a9a6e; font-family: 'Oswald', sans-serif; }
        .comp-attr-val { font-size: 14px; font-weight: 600; color: #1a2a0e; font-family: 'Inter', sans-serif; text-align: right; }
        .comp-attr-val.win { color: #2e7d32; font-weight: 800; }
        .comp-win-pill { display: inline-block; font-size: 9px; font-weight: 800; letter-spacing: 1px; color: #fff; background: #2e7d32;
                         border-radius: 8px; padding: 1.5px 7px 1px; margin-left: 6px; vertical-align: 2px; font-family: 'Oswald', sans-serif; }
        .comp-attr-val.na { color: #b7c69a; font-weight: 400; }
        .comp-attr-mat { display: block; }
        .comp-attr-mat .comp-attr-val { font-weight: 400; display: block; text-align: left; margin-top: 4px; }
        .comp-mini-bar { flex-basis: 100%; height: 6px; border-radius: 3px; background: #edf3e2; margin-top: 6px; overflow: hidden; }
        .comp-bar-fill { height: 100%; border-radius: 3px; transition: width 0.35s ease; }

        .comp-verdict { background: linear-gradient(135deg, #3A4A20, #2a3a14); color: #eef4e2; border-radius: 14px; padding: 18px 24px; margin-top: 20px;
                        border-left: 5px solid #D4681E; box-shadow: 0 4px 18px rgba(26,42,14,0.18); }
        .comp-verdict-hd { font-size: 12px; font-weight: 800; letter-spacing: 2.5px; text-transform: uppercase; color: #c4d898; margin-bottom: 7px; font-family: 'Oswald', sans-serif; }
        .comp-verdict-body { font-size: 14.5px; line-height: 1.6; color: #ffffff; font-family: 'Inter', sans-serif; }
        .comp-verdict-body b { color: #ffd9b8; }
        /* One finding per row. No rules between them — the line breaks do
           the separating on their own. */
        .comp-verdict-line { padding: 2px 0; }
        /* Individual content sections: white card behind data, transparent everywhere else */
        .pack-ratios-row, .pack-consumables-wrap { background: transparent; }
        /* ── Logo breathing room ── */
        .header-logo-wrap {
            top: 8px !important;
            left: 16px !important;
        }
        /* ── Responsive hero on ultrawide screens ── */
        


        /* ── hero banner ── */
        .site-hero {
            /* Full-bleed: span the whole viewport even though the body is width-capped, so the hero image fills the screen edge-to-edge. */
            width: auto; height: 740px;
            margin-left: var(--bleed, calc(50% - 50vw)); margin-right: var(--bleed, calc(50% - 50vw));
            background-image: url('/img/screener-hero.01c9f56d5d.jpg');
            background-size: 1920px auto;
            background-position: center -325px;
            background-repeat: no-repeat;
            background-attachment: fixed;
            position: relative;
            overflow: hidden;
        }

        /* ── topo canvas ── */

        /* ═══════════════ MOBILE NAV DRAWER ═══════════════ */
        .mob-nav-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; position: fixed; right: max(8px, env(safe-area-inset-right, 8px)); top: max(10px, env(safe-area-inset-top, 10px)); z-index: 10001; -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
        .mob-nav-btn span { display: block; width: 24px; height: 2px; background: #888888; border-radius: 1px; transition: transform 0.2s, opacity 0.2s; }
        .mob-nav-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.52); z-index: 9998; }
        .mob-nav-overlay.open { display: block; }
        .mob-nav-drawer { position: fixed; top: 0; right: 0; width: 270px; height: 100vh; background: #f4f9ec; z-index: 9999; transform: translateX(calc(100% + 30px)); transition: transform 0.28s cubic-bezier(0.4,0,0.2,1); display: flex; flex-direction: column; padding: 60px 0 32px; overflow-y: auto; box-shadow: -4px 0 28px rgba(0,0,0,0.2); border-left: 3px solid #c4d898; }
        .mob-nav-drawer.open { transform: translateX(0); }
        .mob-nav-drawer a { padding: 14px 24px; font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 900; color: #3A4A20; text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; border-bottom: 1px solid #ddefc0; display: block; -webkit-tap-highlight-color: transparent; }
        .mob-nav-drawer a:active { background: #e4f2cc; }
        .mob-nav-drawer a.mob-sub { padding-left: 38px; font-size: 11.5px; color: #5a7030; letter-spacing: 1px; border-bottom-color: #eaf5d8; }
        .mob-nav-section { padding: 14px 24px 4px; font-size: 9px; font-weight: 900; color: #9ab860; letter-spacing: 2.5px; text-transform: uppercase; }
        .mob-nav-close { position: absolute; top: 14px; right: 14px; background: none; border: none; font-size: 22px; color: #3A4A20; cursor: pointer; padding: 8px; line-height: 1; min-height: auto !important; }

        /* ═══════════════ MOBILE RESPONSIVE ≤768px ═══════════════ */
        @media (max-width: 1024px) {
            nav { display: none !important; }
            .mob-nav-btn { display: flex !important; }

            /* "Active Pack:" label on the My Pack pack-switcher — dropped on
               mobile so the pack name in the <select> beside it gets the width
               instead of splitting it with a caption. */
            .pack-mgr-label { display: none !important; }

            /* ── Header ── */
            header { padding: max(14px, env(safe-area-inset-top, 14px)) 0 12px !important; gap: 8px !important; min-height: 15vh; justify-content: center; }
            .header-logo-wrap { top: max(14px, env(safe-area-inset-top, 14px)) !important; left: 14px !important; }
            .header-logo { height: 60px !important; }
            /* Wider tap target on mobile (was 25%) so a thumb lands it first try. */
            .search-wrapper { width: 34% !important; }
            /* font-size MUST stay >=16px: iOS Safari zooms the whole page when a
               focused input is smaller, and the zoom+reflow eats the first tap.
               44px height is Apple's minimum comfortable touch target. */
            /* touch-action:manipulation removes the ~300ms double-tap-zoom
               delay mobile browsers add, so the field responds on the FIRST tap. */
            .search-bar { padding: 10px 14px 10px 38px !important; font-size: 16px !important; height: 44px !important; box-sizing: border-box !important; touch-action: manipulation !important; }
            .idea-label { display: none !important; }
            #submitIdeaBtn { padding: 8px 10px !important; font-size: 22px !important; line-height: 1 !important; height: auto !important; border-radius: 10px !important; }
            #hamburgerBtn { padding: 10px 13px !important; gap: 7px !important; }
            #hamburgerBtn span { width: 30px !important; height: 3px !important; }

            /* ── Hero & main content ── */
            /* The hero photo is 1920x1440 (4:3). `cover` in a 220px-tall box
               cropped ~25% of its height off on a phone, and `background-
               attachment: fixed` (from the base rule) is mis-scaled by iOS
               Safari, which sizes fixed backgrounds to the viewport rather
               than the element. Sizing the box to the image's own aspect ratio
               with `100% auto` shows the whole photo at any phone width.
               #mainContent's pull-up is a matching -75% (= 1440/1920 of the
               width it resolves against) so content keeps sitting at the top
               of the hero exactly as before. */
            .site-hero {
                height: 292px !important;                 /* fallback ≈ full image at a 390px viewport */
                background-size: 100% auto !important;
                background-position: center top !important;
                background-attachment: scroll !important;
            }
            #mainContent { margin-top: -292px !important; padding-left: 12px !important; padding-right: 12px !important; }
            @supports (aspect-ratio: 4 / 3) {
                .site-hero { height: auto !important; aspect-ratio: 1920 / 1440; }
                #mainContent { margin-top: -75% !important; }
            }

            /* ── Home hero ── */
            /* min-height on the desktop rule is a hardcoded 740px to match the
               desktop hero photo. On a phone that photo is only 75vw tall (it's
               4:3 at full-bleed width), so 740px reserved ~365px of dead space
               between the image and "Top Analyst Picks". Match the photo instead;
               the 16px margin + the picks wrap's 24px padding leave a small gap. */
            .home-hero { margin: 0 -12px 16px !important; padding: 36px 16px 24px !important; min-height: 75vw !important; }
            .home-hero-title { font-size: 26px !important; letter-spacing: 0.5px !important; }
            .home-hero-sub { font-size: 13px !important; line-height: 1.5 !important; }
            .home-hero-eyebrow { font-size: 9px !important; padding: 4px 12px !important; margin-bottom: 14px !important; }
            .home-hero-btns { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; }
            .home-btn-primary, .home-btn-secondary { padding: 14px 20px !important; font-size: 13px !important; text-align: center; }

            /* ── Home stats bar ── */
            .home-stats-bar { flex-wrap: wrap !important; padding: 14px 8px !important; gap: 0 !important; }
            .home-stat { padding: 8px 16px !important; }
            .home-stat-val { font-size: 22px !important; }
            .home-stat-div { display: none !important; }

            /* ── Home grids ── */
            /* The hero blurb is desktop-only: on a phone it pushed the two
               call-to-action buttons most of a screen below the fold. */
            .home-hero-blurb { display: none !important; }
            .home-picks-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
            .home-cats-grid { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
            .home-pick-card { padding: 14px 12px !important; }
            .home-pick-name { font-size: 13px !important; }
            .home-cat-card { padding: 18px 12px 14px !important; }
            .home-cat-name { font-size: 13px !important; }
            .home-cat-badge { width: 36px !important; height: 36px !important; margin-bottom: 8px !important; }

            /* Home keeps a plain 2-up grid — the flush variable-width treatment
               belongs on the screener filter chips, not here. */
            .home-brands-grid .home-cat-name { white-space: normal; }
            .home-brands-grid .hcl-long { display: none; }

            /* Dropped in by jumpToResultsHeader() when a home tile scrolls the
               user past the filters — it is the thing they scroll back up to. */
            .results-jump-hint {
                display: block;
                text-align: center;
                font-family: Oswald, sans-serif;
                font-size: 11px;
                letter-spacing: 1.5px;
                text-transform: uppercase;
                color: #5a7030;
                background: #f2f7e8;
                border: 1px solid #c4d898;
                border-bottom: none;
                border-radius: 8px 8px 0 0;
                padding: 9px 10px;
                margin-top: 12px;
            }
            .home-picks-wrap { margin: 0 -12px !important; padding: 24px 12px !important; }
            .home-ticker { margin: 0 -12px !important; padding: 10px 12px !important; gap: 14px !important; }
            .home-section-title { font-size: 11px !important; }

            /* ── Stat cards ── */
            .pack-stats { grid-template-columns: 1fr 1fr !important; gap: 8px !important; margin-bottom: 16px !important; }
            .stat-val { font-size: 20px !important; }
            .stat-lbl { font-size: 9px !important; letter-spacing: 1.2px !important; }
            .stat-card { padding: 10px 10px !important; }

            /* ── Tables: horizontal scroll ── */
            .table-wrap { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; border-radius: 8px !important; }
            table { min-width: 500px !important; }
            td, th { padding: 8px 10px !important; font-size: 12px !important; }

            /* ── Screener table: fits the screen, scrolls only vertically ──
               The shared rule above gives every table a 500px floor and lets the
               wrapper pan sideways. That is fine for the wide My Pack gear list,
               but the screener is the page people browse on a phone and sliding
               it left to read a price is miserable. Six columns needed 568px in
               a 459px viewport; these rules fit them instead of panning:
                 * Category is dropped — it duplicates the category pill and the
                   Screen By chip that put you here, and the item page shows it.
                 * The Add cell holds "+ Add" plus a wishlist heart and was the
                   widest column on the page at 126px; it becomes a compact
                   icon-width column.
                 * Fixed layout with explicit widths, so a long product name
                   wraps to a second line rather than widening the table. */
            .scr-wrap { overflow-x: hidden !important; }
            .scr-table { min-width: 0 !important; width: 100% !important; table-layout: fixed !important; }
            /* Hiding the category column leaves a 1px vertical seam in iOS Safari
               between the name and the stars — Chrome at the same width shows
               nothing. Two mechanisms can produce it and both are killed here
               rather than guessing which:
                 - border-collapse shares borders between neighbouring cells, and
                   a display:none cell can still contribute its edge in WebKit, so
                   the border is zeroed explicitly;
                 - a <tr> background is the ROW's, and cells paint on top of it, so
                   any strip no cell covers shows what is behind. That is the same
                   fault as the white corner in the green header bar above, fixed
                   the same way: put the background on the CELLS. */
            .scr-table th:nth-child(2), .scr-table td:nth-child(2) {
                display: none !important;
                border: 0 !important; padding: 0 !important; width: 0 !important;
            }
            .scr-table tbody tr:nth-child(odd)  > td { background: #f4f9ec; }
            .scr-table tbody tr:nth-child(even) > td { background: #ffffff; }
            .scr-table tbody tr:hover > td { background: #d8edbe; }
            /* Percentages, not pixels, and they must total 100%. A <tr> paints no
               box beyond its cells, so any width the columns don't claim is a
               hole the wrapper's white shows through — which is exactly what
               produced a white corner at the end of the green header bar. With
               pixel widths the first column had to absorb the slack, and it
               only does that once there are result rows; in the empty
               "Start screening" state the columns summed to 370 of 459px. */
            .scr-table th:nth-child(1), .scr-table td:nth-child(1) { width: 45% !important; }
            .scr-table th:nth-child(3), .scr-table td:nth-child(3) { width: 18% !important; }
            .scr-table th:nth-child(4), .scr-table td:nth-child(4) { width: 13% !important; }
            .scr-table th:nth-child(5), .scr-table td:nth-child(5) { width: 12% !important; }
            .scr-table th:nth-child(6), .scr-table td:nth-child(6) { width: 12% !important; }
            .scr-table th, .scr-table td { padding: 8px 5px !important; font-size: 11.5px !important; }
            .scr-table th { font-size: 10px !important; letter-spacing: 0.6px !important; }
            .scr-table th:first-child, .scr-table td:first-child { padding-left: 10px !important; }
            .scr-table th:last-child,  .scr-table td:last-child  { padding-right: 8px !important; }
            /* Names wrap instead of pushing the table wider. */
            .scr-table .td-name { font-size: 12.5px !important; line-height: 1.25 !important; white-space: normal !important; overflow-wrap: anywhere; }
            .scr-table .td-sub  { font-size: 9.5px !important; letter-spacing: 0.8px !important; white-space: normal !important; }
            .scr-table td { word-break: normal; overflow-wrap: anywhere; }
            /* Stars and the sort arrows have to fit their narrower columns. */
            .scr-table .stars { font-size: 11px !important; letter-spacing: -0.5px !important; }
            .scr-table .sort-arrow { font-size: 8px !important; }
            /* "5.0 vs. 1-Person Sleeping Pads" wrapped to three lines in an 84px
               column and set the height of every row. The peer group is what you
               screened by to get here, so on a phone the stars carry the rating
               alone; the item page still spells the comparison out. */
            .scr-table .stars-lbl { display: none !important; }
            /* Add + wishlist stack vertically in a 52px column. */
            /* No wishlist heart on a phone: it costs a whole stacked row per
               result, and the item page carries the same control one tap away. */
            .scr-table .btn-wish { display: none !important; }
            .scr-table .add-wish-pair { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 4px !important; }
            /* Taller than the desktop button, not shorter: a narrow column is
               already a small target, so the height is where the thumb is won
               back. Cell padding drops to 2px to give the button the width. */
            .scr-table td:last-child { padding-left: 2px !important; padding-right: 4px !important; }
            .scr-table .btn-add { padding: 8px 2px !important; font-size: 9.5px !important; letter-spacing: 0.3px !important; white-space: nowrap !important; min-width: 0 !important; width: 100% !important; }

            /* ── Pack / My Pack: ratios row — 2-column grid ── */
            .pack-ratios-row { flex-direction: row !important; flex-wrap: wrap !important; width: 100% !important; gap: 8px !important; margin-bottom: 10px !important; align-items: stretch !important; }
            /* Pack Ratios, Pack Summary and Quant Score each get their OWN full-width
               row on a phone. At 50% they were two cramped columns with 8.5px
               headings and 10px labels — legible only just. Full width lets the
               type go back up to a comfortable size. */
            .pack-ratios-row > .pack-ratios { min-width: 0 !important; width: 100% !important; max-width: none !important; box-sizing: border-box !important; margin-bottom: 0 !important; top: 0 !important; }
            /* Pack Report column on row 2 right; both non-.pack-ratios divs are 50% */
            .pack-ratios-row > div { width: calc(50% - 4px) !important; max-width: none !important; min-width: 0 !important; box-sizing: border-box !important; align-self: stretch !important; margin-left: 0 !important; flex: none !important; }
            /* Unit System + Export: last div takes full width, switches to row layout */
            .pack-ratios-row > div:last-child { width: 100% !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 8px !important; }
            .pack-ratios-row > div:last-child > div,
            .pack-ratios-row > div:last-child > button { flex: 1 !important; min-width: 0 !important; box-sizing: border-box !important; }
            /* Full-width rows -> readable type again (these were shrunk for the
               old 2-up grid). */
            .pack-ratios-hd { font-size: 11.5px !important; padding: 9px 14px 7px !important; letter-spacing: 1.6px !important; }
            .ratio-row { padding: 8px 14px !important; gap: 14px !important; }
            .ratio-lbl { font-size: 13.5px !important; letter-spacing: 0.2px !important; }
            .ratio-num, .ratio-num-na { font-size: 15px !important; }
            .summary-weight-row { padding: 9px 14px 8px !important; }
            .summary-weight-val { font-size: 22px !important; }
            .summary-weight-unit { font-size: 12px !important; }
            /* Quant Score gauge can breathe on its own row */
            .pack-ratios svg { width: 100% !important; max-width: 210px !important; height: auto !important; }
            /* Pack Report buttons compact */
            .report-btn { min-height: 38px !important; font-size: 10px !important; padding: 8px 6px !important; letter-spacing: 0.8px !important; }
            .def-link-btn { min-height: 36px !important; padding: 8px 4px !important; font-size: 9.5px !important; }
            .consumable-label { font-size: 9px !important; letter-spacing: 1.2px !important; }

            /* ── Pack / My Pack: consumables + trip date row ── */
            /* Mobile running order for this flex row:
                 1. consumables  (My Next Trip -> Food/Water -> Trip -> Open Screener)
                 2. Analyze My Pack   — sits BELOW the Open Screener link
                 3. Pack Style box    — was order:1 and ended up tucked under the
                                        Manual-Enter-Here card; moved to the end.
               Desktop keeps its own order: values (style 1, analysis 2, consumables 3). */
            div:has(> .pack-consumables) > .pack-consumables { order: 1 !important; }
            div:has(> .pack-consumables) > div:has(> #packSummaryContainer) { order: 2 !important; }
            /* Pack Style is its own section, not a tail on the AI panel. The
               container gap is 10px, so this margin is what actually separates
               them. Now 0, so the only separation is the container's own 10px
               gap — the highest this box can sit without overlapping the AI
               panel above it. */
            div:has(> .pack-consumables) > #packStyleBox { order: 3 !important; margin-top: 0 !important; width: 100% !important; }
            /* The label chip carries margin-top:-50px so it floats up into a
               box that desktop stretches to ~276px. On a phone the box is only
               as tall as its content, so that pull dragged the label 40px ABOVE
               the border — outside the outline it is supposed to sit in.
               Anchor the content to the top instead and drop the pull. */
            #packStyleBox { justify-content: flex-start !important; padding-top: 16px !important; }
            #packStyleBox > div:first-child { margin-top: 0 !important; }
            /* The grid is width:100%, which at 476px made a 373px-tall chart
               against desktop's ~132px. Cap it near the desktop box width so
               the proportions read the same. */
            #packStyleBox svg { max-width: 232px !important; margin-left: auto !important; margin-right: auto !important; }
            /* The analysis panel is position:absolute with inset:0, so it is OUT
               OF FLOW and contributes NOTHING to its parent's height. An earlier
               `height:auto` here therefore collapsed the wrapper to 0 and the
               panel rendered at ~58px of inherited space. It needs an explicit
               height. 360px fits the whole generated analysis on a phone without
               the box needing to scroll internally. */
            div:has(> .pack-consumables) > div:has(> #packSummaryContainer) { min-height: 360px !important; height: 360px !important; align-self: auto !important; }
            #packSummaryContainer { height: 100% !important; min-height: 360px !important; }
            div:has(> .pack-consumables) { flex-direction: column !important; width: 100% !important; padding: 0 !important; box-sizing: border-box !important; gap: 10px !important; }
            div:has(> .pack-consumables) > div { width: 100% !important; box-sizing: border-box !important; flex: none !important; }
            .pack-consumables { width: 100% !important; box-sizing: border-box !important; flex-direction: column !important; gap: 0 !important; padding: 12px 16px !important; }
            .consumable-block { width: 100% !important; min-width: 0 !important; }
            .consumable-block + .consumable-block { border-left: none !important; padding-left: 0 !important; margin-left: 0 !important; border-top: 1px solid #d4e8b0 !important; padding-top: 12px !important; margin-top: 4px !important; }

            /* ── Pack / My Pack: alloc, code ── */
            .alloc-pack-row { flex-direction: column !important; width: 100% !important; }
            /* Each Pack Allocation chart gets its own full-width column on a phone. */
            .pack-alloc-charts { flex-direction: column !important; }
            .pack-alloc-charts > div,
            .alloc-pack-row > div,
            .alloc-wrap { width: 100% !important; box-sizing: border-box !important; }
            .alloc-body { flex-direction: column !important; align-items: center !important; }
            .alloc-legend { width: 100% !important; }
            .pack-code-compact { width: 100% !important; box-sizing: border-box !important; }
            .item-section-hd { font-size: 13px !important; width: 100% !important; }
            .pack-group-item td:first-child { padding-left: 10px !important; }

            /* ── Item detail ── */
            .item-hero { flex-direction: column !important; gap: 14px !important; }
            /* One consistent width for every My Pack section on a phone — several
               were width:90% and several 100%, which read as a ragged stair-step. */
            #mainContent > div[style*="width:90%"],
            div:has(> .pack-alloc-charts),
            div:has(> table),
            .item-section-hd { width: 100% !important; box-sizing: border-box !important; margin-left: 0 !important; margin-right: 0 !important; }
            /* Trip Readiness sat at width:90% while every other My Pack section is
               forced to 100% on mobile, so it looked inset and narrower. Match. */
            .trip-readiness-panel { width: 100% !important; box-sizing: border-box !important; padding: 16px 16px !important; }
            .publish-box { width: 100% !important; }
            /* "Share Your Pack with the Community": side-by-side, the text column
               got squeezed to a sliver and ran as a tall thin ribbon. Stack it. */
            .publish-box { flex-direction: column !important; align-items: stretch !important; gap: 14px !important; padding: 18px 16px !important; }
            .publish-box > div:first-child { align-items: flex-start !important; }
            .publish-actions { flex-direction: row !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 10px 18px !important; width: 100%; }
            .publish-actions button { flex: 1 1 100%; }
            /* .item-photo-zone reserves the hero photo's exact height (the photo
               is 4:3 at full-bleed width = 75vw), so the Add to Pack / Wishlist
               pair that follows it lands just BELOW the image with a small gap
               instead of sitting on top of a busy part of the picture. */
            .item-photo-zone { min-height: 75vw; box-sizing: border-box; }
            /* .item-actions-mobile is no longer rendered — the sticky bar at the
               bottom of the screen carries those three controls instead. */
            .item-metrics { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
            .item-metric-val { font-size: 20px !important; }
            .specs-grid { grid-template-columns: auto 1fr !important; }
            .spec-label { font-size: 10px !important; padding: 10px 12px !important; }
            .spec-value { font-size: 12px !important; padding: 10px 12px !important; }

            /* ── Screener ── */
            .screener-title { font-size: 16px !important; }
            .screener-sub { font-size: 10px !important; letter-spacing: 0.8px !important; }
            .screener-hd { padding: 6px 0 !important; flex-wrap: wrap !important; gap: 6px !important; }
            .sf-btn, .btn-apply, .sb-btn-wide { min-height: 42px !important; font-size: 12px !important; }
            .sf-filter-panel { min-width: 0 !important; width: 100% !important; }
            .sf-panel { left: 0 !important; right: 0 !important; width: 100% !important; }
            .pf-grid { flex-direction: column !important; gap: 10px !important; }
            .pf-input, .pf-select { width: 100% !important; box-sizing: border-box !important; }
            .def-grid { grid-template-columns: 1fr !important; }

            /* ── Touch targets & inputs ── */
            .report-btn { min-height: 46px !important; font-size: 11px !important; }
            .def-link-btn { min-height: 44px !important; padding: 12px 10px !important; font-size: 11px !important; }
            .alloc-tog-btn { padding: 11px 22px !important; font-size: 12px !important; }
            .park-selector { padding: 10px 8px !important; font-size: 16px !important; }
            input, select, textarea { font-size: 16px !important; }
            button, a, input, select, textarea, [onclick] { touch-action: manipulation; }
            button { user-select: none; -webkit-user-select: none; }
            button:active { opacity: 0.75; transform: scale(0.97); transition: none; }
            .report-btn:active { background: #1e3a0e !important; color: #c4d898 !important; }
            .def-link-btn:active { background: #ddefc0 !important; }
            .mob-nav-drawer a:active { background: #ddefc0 !important; }

            /* ── Footer: Research / Company / Contact side by side ──
                 Stacking these made the footer several screens of scrolling
                 for twelve links. The columns are short and narrow, so they fit
                 one row on a phone. Type steps down to suit ~115px columns and
                 the email is allowed to wrap rather than overflow. */
            .footer-main {
                grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
                gap: 18px 10px !important;
                padding: 26px 14px 20px !important;
            }
            .footer-col-heading {
                font-size: 10.5px !important;
                letter-spacing: 1.2px !important;
                margin-bottom: 10px !important;
                padding-bottom: 6px !important;
            }
            .footer-col-links { gap: 8px !important; }
            .footer-col-links a {
                font-size: 10.5px !important;
                letter-spacing: 0.2px !important;
                line-height: 1.35;
            }
            .footer-contact-label { font-size: 9.5px !important; letter-spacing: 1px !important; }
            .footer-contact-item {
                font-size: 10.5px !important;
                letter-spacing: 0.2px !important;
                margin-bottom: 8px !important;
            }
            /* 10% down from the 10.5px around it (9.45px), so the 24-character
               address holds one line across the whole phone range: it needs
               97px and the column is 114px at 390, 109 at 375, 104 at 360. At
               10.5px it needed 108px — 1px of slack at 375 and it wrapped to
               two lines at 360. The break rule stays as a last resort for
               anything narrower still. */
            .footer-email-link {
                font-size: 9.45px;
                overflow-wrap: anywhere;
                word-break: break-word;
            }
            .site-footer {
                padding: 0 !important;
                /* Deliberate small gap above the footer band.
                   Was 160px+ of dead space: #mainContent carries
                   padding-bottom:80px AND .site-footer carries margin-top:80px,
                   then whichever card happened to be last added its own margin
                   on top — so the gap also varied 160-220px view to view.
                   Both fixed parts collapse here and the last card's margin is
                   zeroed, leaving one number in one place. */
                margin-top: 28px !important;
            }
            #mainContent { padding-bottom: 0 !important; }
            #mainContent > *:last-child { margin-bottom: 0 !important; }

            /* Pack Style box: a little more room under the 3x3 grid so the
               box doesn't end right on the chart. Inline padding on the
               element is 8px 12px 2px, hence !important. */
            #packStyleBox { padding-bottom: 18px !important; }
            .footer-bottom { flex-direction: column !important; gap: 10px !important; padding: 14px 16px !important; }

            /* ── Ticker ── */
            .ticker-strip { height: 32px !important; }
            .ticker-track { font-size: 10px !important; }

            /* ── Scrollable areas ── */
            .table-wrap, .mob-nav-drawer, .depr-scroll { -webkit-overflow-scrolling: touch; }
            /* Keep the scroll on this element even if a parent tries to own the
               gesture, and stop a horizontal swipe from chaining out to the page. */
            .depr-scroll { touch-action: pan-x pan-y; overscroll-behavior-x: contain; }
            /* Pin the Item column so the gear name stays readable while Year /
               Condition / Market Value scroll past — the same sticky-column
               treatment .table-wrap already gets. The rows have no background of
               their own (just a hairline border), so the sticky cells need an
               opaque fill or the scrolling columns show through them. */
            .depr-scroll table th:first-child,
            .depr-scroll table td:first-child {
                position: sticky;
                left: 0;
                z-index: 3;
                background: #ffffff;
                box-shadow: 6px 0 10px -6px rgba(26, 42, 14, 0.28);
            }
            .depr-scroll table thead th:first-child { background: #f2f7e8; z-index: 4; }
        }

        /* ══════════════════════════════════════════
           POLISH OVERRIDES — typography, depth, color
           ══════════════════════════════════════════ */

        /* Inter for all readable body text */
        .home-hero-sub, .item-analyst-note,
        .ratio-lbl, .ratio-note, .ratio-num, .ratio-num-na,
        .dd-item-name, .alloc-cat, .alloc-val, .alloc-pct,
        .td-name, .td-sub, .spec-value, .home-pick-name,
        .home-cat-meta, .home-cat-link, .empty-sub,
        .consumable-label, .conv-num-lg, .conv-num-sm,
        .pcc-label, .screener-sub, .stat-lbl, .stat-val {
            font-family: 'Inter', sans-serif;
        }

        /* Fix jarring blue table rows → warm cream-green */
        tbody tr:nth-child(odd)  { background: #f4f9ee; }
        tbody tr:nth-child(even) { background: #ffffff; }
        tbody tr:hover           { background: #e8f3d6; }

        /* Table depth */
        .table-wrap {
            box-shadow: 0 2px 16px rgba(26,42,14,0.09);
            border-color: #d4e8b4;
        }
        thead tr { background: linear-gradient(180deg, #445828 0%, #3A4A20 100%); }
        th { padding: 13px 15px; }

        /* Card depth — consistent across all card types */
        .stat-card,
        .item-metric-card,
        .home-pick-card,
        .home-cat-card,
        .pack-ratios,
        .pack-consumables,
        .alloc-body,
        .specs-grid,
        .item-analyst-box {
            box-shadow: 0 2px 10px rgba(26,42,14,0.07);
        }
        .home-pick-card:hover {
            box-shadow: 0 8px 28px rgba(26,42,14,0.14);
            transform: translateY(-3px);
        }
        .home-cat-card:hover {
            box-shadow: 0 6px 20px rgba(26,42,14,0.12);
        }

        /* Screener filter panel */
        .screener-filter-panel {
            box-shadow: 0 1px 8px rgba(58,74,32,0.07);
            border-radius: 10px;
        }

        /* Chip refinement */
        .chip {
            border-radius: 6px;
            font-size: 11px;
            letter-spacing: 0.8px;
            padding: 5px 12px;
            transition: all 0.15s;
        }
        .chip:hover { box-shadow: 0 1px 4px rgba(58,74,32,0.15); }
        .chip.active { box-shadow: 0 1px 6px rgba(58,74,32,0.22); }

        /* Button lifts */
        .btn-add {
            border-radius: 6px;
            font-size: 11px;
            letter-spacing: 0.8px;
            transition: all 0.15s;
        }
        .btn-add:hover {
            box-shadow: 0 3px 10px rgba(212,104,30,0.28);
            transform: translateY(-1px);
        }
        .btn-remove {
            border-radius: 6px;
            font-size: 11px;
        }
        .btn-remove:hover { box-shadow: 0 2px 8px rgba(200,80,80,0.15); }

        .home-btn-primary {
            border-radius: 9px;
            box-shadow: 0 4px 16px rgba(212,104,30,0.38);
            transition: all 0.2s;
            letter-spacing: 1.8px;
        }
        .home-btn-primary:hover {
            box-shadow: 0 6px 22px rgba(212,104,30,0.46);
            transform: translateY(-2px);
        }
        .home-btn-secondary {
            border-radius: 9px;
            transition: all 0.2s;
            letter-spacing: 1.8px;
        }
        .home-btn-secondary:hover { transform: translateY(-2px); }

        .report-btn {
            border-radius: 8px;
            transition: all 0.2s;
            font-weight: 900;
            -webkit-text-stroke: 0.4px currentColor;
        }
        .report-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(58,74,32,0.2); }

        .sf-btn {
            border-radius: 8px;
            transition: all 0.15s;
        }
        .sf-btn:hover { box-shadow: 0 2px 8px rgba(58,74,32,0.12); }

        /* Search bar */
        /* Radius is set once in base.css (50px pill) and deliberately not
           overridden here — the bar looked square until first interaction. */
        .search-bar { letter-spacing: 0.6px; }
        .search-bar:focus {
            box-shadow: 0 0 0 3px rgba(58,74,32,0.1);
        }
        .search-dropdown { border-radius: 0 0 10px 10px; }

        /* Input focus rings */
        .pf-input:focus,
        .consumable-input:focus,
        .pack-code-input:focus,
        #packNameInput:focus {
            box-shadow: 0 0 0 3px rgba(58,74,32,0.1);
            border-color: #3A4A20;
            outline: none;
        }

        /* Header border */
        header { border-bottom: 1px solid rgba(196,216,152,0.4); }

        /* Nav active state */
        nav a.active {
            color: #1a2a0e;
            font-weight: 900;
        }

        /* Submenu */
        .nav-submenu {
            border-radius: 8px;
            box-shadow: 0 12px 32px rgba(58,74,32,0.16);
        }

        /* Sort/filter dropdown */
        .sf-panel {
            border-radius: 10px;
            box-shadow: 0 10px 32px rgba(58,74,32,0.16);
        }

        /* Pack ratios row header */
        .pack-ratios-hd {
            font-family: 'Inter', sans-serif;
            font-size: 10px;
            letter-spacing: 1.8px;
            background: linear-gradient(180deg, #f9fcf4 0%, #f4f9ee 100%);
        }

        /* Item metric cards */
        .item-metric-card { border-radius: 10px; }
        .item-metric-val { font-family: 'Inter', sans-serif; font-weight: 900; }
        .item-metric-lbl { font-family: 'Inter', sans-serif; font-size: 10px; }

        /* Stat cards */
        .stat-card { border-radius: 10px; }
        .stat-lbl { font-size: 10px; }

        /* Spec grid */
        .spec-label { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 1.2px; }
        .spec-value { font-family: 'Inter', sans-serif; font-size: 13px; }

        /* Analyst box */
        .item-analyst-box { border-radius: 10px; }
        .item-analyst-note { font-family: 'Inter', sans-serif; font-size: 14px; line-height: 1.7; }

        /* Item section headers */
        .item-section-hd {
            font-family: 'Inter', sans-serif;
            font-size: 11px;
            letter-spacing: 2px;
        }

        /* Home section title */
        .home-section-title {
            font-family: 'Inter', sans-serif;
            letter-spacing: 2px;
            font-size: 11px;
        }

        /* Home why cards */

        /* Empty pack */
        .empty-text { font-family: 'Inter', sans-serif; }
        .empty-sub  { font-family: 'Inter', sans-serif; font-size: 13px; }

        /* Pack code compact */
        .pack-code-compact { border-radius: 10px; }

        /* Alloc toggle buttons */
        .alloc-tog-btn { border-radius: 0; font-family: 'Inter', sans-serif; font-size: 10px; }
        .alloc-tog-btn:first-child { border-radius: 7px 0 0 7px; }
        .alloc-tog-btn:last-child  { border-radius: 0 7px 7px 0; }

        /* dd-item (search dropdown) */
        .dd-item-name { font-family: 'Inter', sans-serif; font-weight: 600; font-size: 14px; }
        .dd-item-meta { font-family: 'Inter', sans-serif; }
        .dd-item-cat  { font-family: 'Inter', sans-serif; }

        /* Section divider text */
        .div-text { font-family: 'Inter', sans-serif; }

        /* Filter label */
        .filter-label { font-family: 'Inter', sans-serif; }
        .pf-title  { font-family: 'Inter', sans-serif; }
        .pf-field label { font-family: 'Inter', sans-serif; }

        /* Pack group rows */
        .pack-group-parent td { font-family: 'Inter', sans-serif; font-size: 11px; letter-spacing: 1.2px; }

        /* Home pick cards */
        .home-pick-name  { font-family: 'Inter', sans-serif; font-size: 16px; }
        .home-pick-brand { font-family: 'Inter', sans-serif; }
        .home-pick-price { font-family: 'Inter', sans-serif; }
        .home-pick-action { font-family: 'Inter', sans-serif; }
        .home-pick-eyebrow { font-family: 'Inter', sans-serif; }

        /* Cat cards */
        .home-cat-name { font-family: 'Inter', sans-serif; font-size: 15px; }
        .home-cat-meta { font-family: 'Inter', sans-serif; }
        .home-cat-link { font-family: 'Inter', sans-serif; font-size: 11px; }

        /* Ticker */
        .ticker-item { font-family: 'Inter', sans-serif; font-size: 10px; letter-spacing: 1.5px; }

        /* Table footer */
        .table-footer { font-family: 'Inter', sans-serif; }

        /* Stars label */
        .stars-lbl { font-family: 'Inter', sans-serif; }

        /* metric hint */
        .metric-hint { font-family: 'Inter', sans-serif; }

        /* Badge */
        .badge { font-family: 'Inter', sans-serif; letter-spacing: 0.5px; }

        /* Smooth all card transitions */
        .stat-card, .item-metric-card, .home-pick-card,
        .home-cat-card {
            transition: box-shadow 0.2s, transform 0.2s;
        }

        /* Oswald caps at 700 — simulate heavier weight with text-stroke on headers only */
        .screener-title, .screener-sub,
        .home-hero-title, .home-section-title,
        .home-cat-name,
        .home-pick-eyebrow, .pack-ratios-hd,
        .item-section-hd, .item-metric-lbl,
        .stat-lbl, .pf-title, .filter-label,
        .alloc-legend-hd, .alloc-tog-btn {
            -webkit-text-stroke: 0.4px currentColor;
        }

        /* ---- Screener pagination ---- */
        .screener-pager-wrap { display: flex; flex-direction: column; align-items: center; gap: 10px; margin: 18px 0 8px; }
        .screener-pager-info { font-size: 11.4px; color: #9ab860; letter-spacing: 1.5px; text-transform: uppercase; font-family: Oswald, sans-serif; }
        .screener-pager { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; }
        .pager-btn {
            min-width: 34px; padding: 7px 11px; border: 1px solid #c4d898; background: rgba(255,255,255,0.85);
            color: #3A4A20; font-family: Oswald, sans-serif; font-size: 13px; letter-spacing: 0.5px;
            border-radius: 7px; cursor: pointer; transition: all 0.12s;
        }
        .pager-btn:hover:not([disabled]):not(.pager-active) { background: #e4efd0; border-color: #7a9448; }
        .pager-active { background: #3A4A20; color: #fff; border-color: #3A4A20; font-weight: 700; }
        .pager-dots { color: #9ab860; padding: 7px 2px; font-size: 13px; align-self: center; }

        /* ── Wishlist hearts (next to every + Add button) ── */
        .add-wish-pair { display: inline-flex; align-items: center; gap: 16px; white-space: nowrap; }
        /* The Add / Wishlist / Share trio on an item page sits over the hero
           photo, so all three stay transparent — including the "in wishlist"
           state, which was the one filled pill (#fdecec) among them.
           Hover keeps its colour cue but as a wash rather than a solid fill, so
           the photo still reads through. Scoped to .add-wish-pair: the sticky
           .item-bar at the bottom of the screen is deliberately opaque and is
           styled in mobile-shell.css, which loads later. */
        .add-wish-pair .btn-add,
        .add-wish-pair .btn-wish,
        .add-wish-pair .btn-wish.in-wish,
        .add-wish-pair .btn-add.in-pack { background: transparent; }
        .add-wish-pair .btn-add:hover        { background: rgba(212,104,30,0.20); }
        .add-wish-pair .btn-add.in-pack:hover{ background: rgba(232,85,85,0.18); }
        .add-wish-pair .btn-wish:hover,
        .add-wish-pair .btn-wish.in-wish:hover { background: rgba(192,57,43,0.18); }
        .btn-wish {
            width: 28px; height: 28px; border-radius: 50%; padding: 0;
            border: 1px solid #c4d898; background: transparent; color: #9ab860;
            font-size: 14px; line-height: 1; cursor: pointer;
            transition: all 0.15s; flex-shrink: 0;
        }
        .btn-wish:hover { border-color: #c0392b; color: #c0392b; background: #fff5f5; }
        .btn-wish.in-wish { border-color: #c0392b; color: #c0392b; background: #fdecec; }
        .btn-wish-lg {
            width: auto; height: auto; border-radius: 22px; padding: 10px 22px;
            font-family: 'Oswald', sans-serif; font-size: 13.5px; font-weight: 700;
            letter-spacing: 1px; text-transform: uppercase;
        }
        @media (max-width: 1024px) {
            .btn-wish { width: 32px; height: 32px; font-size: 16px; }
        }

        /* ---- SAVED SCREENERS row (screener page) ---- */
        .scr-saved-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 8px 0 10px; }
        .scr-saved-row select, .scr-saved-row input {
            padding: 6px 10px; border: 1px solid #c4d898; border-radius: 7px;
            font-family: Inter, sans-serif; font-size: 12.5px; color: #1a2a0e;
            background: rgba(255,255,255,0.92); outline: none; max-width: 220px;
        }
        .scr-save-btn {
            padding: 7px 14px; background: #3A4A20; color: #c4d898; border: none; border-radius: 7px;
            font-family: Oswald, sans-serif; font-size: 11px; font-weight: 700; letter-spacing: 0.8px;
            cursor: pointer; text-transform: uppercase; white-space: nowrap; transition: background 0.25s;
        }
        .scr-save-btn:hover { background: #4a5c2c; }
        .scr-del-btn {
            background: none; border: 1px solid #c4d898; border-radius: 7px; padding: 5px 9px;
            cursor: pointer; font-size: 13px; line-height: 1;
        }
        .scr-del-btn:hover { border-color: #b0413e; }
        @media (max-width: 1024px) {
            .scr-saved-row select, .scr-saved-row input { max-width: 100%; flex: 1 1 140px; }
        }

        /* ---- SAVED SCREENERS scrollable list (name left · ✕ right) ---- */
        .scr-list-wrap { position: relative; }
        .scr-list-toggle {
            padding: 7px 14px; background: rgba(255,255,255,0.92); color: #3A4A20;
            border: 1px solid #c4d898; border-radius: 7px; cursor: pointer;
            font-family: Oswald, sans-serif; font-size: 11px; font-weight: 700;
            letter-spacing: 0.8px; text-transform: uppercase; white-space: nowrap;
        }
        .scr-list-toggle:hover { border-color: #7a9448; }
        .scr-list-panel {
            position: absolute; top: calc(100% + 6px); left: 0; z-index: 300;
            width: 280px; max-height: 240px; overflow-y: auto;
            background: #fff; border: 1px solid #c4d898; border-radius: 10px;
            box-shadow: 0 10px 30px rgba(26,42,14,0.18); padding: 6px;
        }
        .scr-list-item {
            display: flex; align-items: center; justify-content: space-between;
            gap: 8px; padding: 8px 6px 8px 10px; border-radius: 7px;
        }
        .scr-list-item:hover { background: #f4f9ec; }
        .scr-list-item.scr-active { background: #eef5e0; }
        .scr-list-name {
            flex: 1; cursor: pointer; font-family: Inter, sans-serif;
            font-size: 12.5px; color: #1a2a0e; font-weight: 600;
            overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
        }
        .scr-list-name:hover { color: #D4681E; }
        .scr-list-x {
            flex: 0 0 auto; background: none; border: none; color: #b0413e;
            font-size: 16px; line-height: 1; cursor: pointer; padding: 2px 7px;
            border-radius: 6px;
        }
        .scr-list-x:hover { background: #fdeeee; }
        .scr-list-empty { padding: 12px; font-size: 12px; color: #7a8c60; font-family: Inter, sans-serif; }

/* ---- SCREEN BY: searchable checkbox list ----
   Used for enum criteria with many values (Brand has 89). Chips work for a
   handful; past that they become a wall you have to read left-to-right instead
   of scanning alphabetically. Fixed height so the modal never grows past the
   viewport, and the list scrolls inside itself. */
.sb-check-search {
    width: 100%; box-sizing: border-box; margin-bottom: 8px;
    padding: 9px 12px; border: 1.5px solid #c4d898; border-radius: 8px;
    font-family: 'Oswald', sans-serif; font-size: 13px; letter-spacing: 0.6px;
    background: #f9fdf2; color: #3A4A20; outline: none;
    -webkit-appearance: none; appearance: none;
}
.sb-check-search:focus { border-color: #7a9448; background: #fff; }
.sb-check-search::-webkit-search-cancel-button { -webkit-appearance: none; display: none; }

.sb-check-list {
    max-height: 250px; overflow-y: auto; overscroll-behavior: contain;
    border: 1px solid #e3efd0; border-radius: 8px; background: #fff;
}
.sb-check {
    display: flex; align-items: center; gap: 10px;
    padding: 8px 12px; cursor: pointer;
    border-bottom: 1px solid #f0f6e6;
    font-family: 'Inter', sans-serif; font-size: 13px; color: #3A4A20;
}
.sb-check:last-child { border-bottom: none; }
.sb-check:hover { background: #f7fbf0; }
.sb-check input { width: 15px; height: 15px; accent-color: #5a7030; cursor: pointer; flex-shrink: 0; }
.sb-check-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-check-count {
    font-size: 11px; color: #9ab860; font-family: 'Oswald', sans-serif;
    letter-spacing: 0.5px; flex-shrink: 0;
}
.sb-check-actions {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px; font-family: 'Oswald', sans-serif;
}
.sb-check-actions button {
    background: none; border: 1px solid #c4d898; border-radius: 6px;
    padding: 5px 12px; cursor: pointer; color: #5a7030;
    font-family: 'Oswald', sans-serif; font-size: 10.5px;
    letter-spacing: 1px; text-transform: uppercase;
}
.sb-check-actions button:hover { background: #f2f7e8; border-color: #7a9448; }
.sb-check-selected { font-size: 11px; color: #7a9448; letter-spacing: 0.8px; }