/* ---- AI ANALYSIS "THINKING" DOTS ---- */
        .ai-think-dot {
            width: 13px; height: 13px; border-radius: 50%;
            background: rgba(255,255,255,0.22);
            display: inline-block;
            animation: aiThinkPulse 1.2s infinite ease-in-out;
        }
        /* Stagger each dot by 0.4s so one lights up green every 0.4s, in sequence */
        .ai-think-dot:nth-child(1) { animation-delay: 0s; }
        .ai-think-dot:nth-child(2) { animation-delay: 0.4s; }
        .ai-think-dot:nth-child(3) { animation-delay: 0.8s; }
        @keyframes aiThinkPulse {
            0%, 66%, 100% { background: rgba(255,255,255,0.22); transform: scale(1); }
            22%           { background: #4caf64; transform: scale(1.18); box-shadow: 0 0 8px rgba(76,175,100,0.7); }
        }
        /* Blinking cursor shown while the AI analysis types */
        .ai-type-cursor { color: #9ab860; font-weight: 400; margin-left: 1px; animation: aiCursorBlink 0.9s steps(1) infinite; }
        @keyframes aiCursorBlink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }

/* ---- MY PACK ---- */
        .pack-stats {
            display: grid; grid-template-columns: repeat(4, 1fr);
            gap: 10px; margin-bottom: 28px;
        }

        .stat-card {
            background: rgba(255,255,255,0.85);
            border: 1px solid #c4d898;
            border-top: 3px solid #3A4A20;
            border-radius: 10px; padding: 10px 14px;
        }

        .stat-card:last-child { border-top-color: #D4681E; }

        .stat-lbl { font-size: 10.4px; font-weight: 900; color: #7a9448; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 7px; }
        .stat-val { font-size: 27px; font-weight: 900; color: #1a2a0e; letter-spacing: 1px; }
        .stat-unit { font-size: 13.5px; color: #9ab860; margin-left: 3px; }

        /* ---- PACK RATIOS ---- */
        .pack-ratios {
            display: block; background: rgba(255,255,255,0.85);
            border: 1px solid #e0ecd0; border-radius: 9px;
            padding: 0; margin-bottom: 22px; min-width: 253px;
            overflow: hidden;
        }
        .pack-ratios-hd {
            font-size: 11.7px; font-weight: 900; color: #1a2a0e;
            letter-spacing: 2px; text-transform: uppercase;
            padding: 8px 14px 6px; border-bottom: 1px solid #e8f2d8;
            background: #f8fbf2;
        }
        .ratio-row {
            display: flex; justify-content: space-between; align-items: center;
            padding: 2px 14px; border-bottom: 1px solid #f2f7e8;
            gap: 29px;
        }
        .ratio-row:last-child { border-bottom: none; }
        .pack-ratios-row { display: flex; gap: 10px; align-items: stretch; flex-wrap: wrap; margin-bottom: 13px; width: 90%; margin-left: auto; margin-right: auto; }
        .pack-ratios-row .pack-ratios { margin-bottom: 0; position: relative; top: -10px; display: flex; flex-direction: column; }
        .pack-ratios-row .pack-ratios .ratio-row,
        .pack-ratios-row .pack-ratios .summary-weight-row { flex: 1; display: flex; align-items: center; }
        .summary-weight-row { padding: 3px 13px 3px; border-bottom: 2px solid #d6eab8; }
        #tripDateBtn:focus { outline: none; }
        .packed-col { width: 42px; text-align: center; }
        .summary-weight-val { font-size: 20px; font-weight: 900; color: #1a2a0e; letter-spacing: -0.5px; line-height: 1; }
        .summary-weight-unit { font-size: 13px; font-weight: 600; color: #5a7840; }
        .ratio-lbl { font-size: 14.2px; font-weight: 600; color: #6a8450; letter-spacing: 0.3px; }
        .ratio-note { font-size: 12.2px; color: #a8c070; font-weight: 400; letter-spacing: 0.2px; }
        .ratio-num { font-size: 15.5px; font-weight: 900; color: #1a2a0e; letter-spacing: 0.5px; }
        .ratio-num-na { font-size: 15.5px; color: #c4d898; }

        /* Pack filters panel */
        .pack-filters-panel {
            background: rgba(242,247,232,0.85);
            border: 1px solid #c4d898;
            border-radius: 12px; padding: 20px 24px; margin-bottom: 24px;
        }

        .pf-title { font-size: 11.4px; font-weight: 900; color: #7a9448; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 14px; }

        .pf-grid { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; }

        .pf-field { display: flex; flex-direction: column; gap: 5px; }

        .pf-field label { font-size: 10.4px; font-weight: 900; color: #7a9448; letter-spacing: 1.5px; text-transform: uppercase; }

        .pf-input {
            padding: 8px 13px;
            background: #ffffff;
            border: 1px solid #c4d898;
            border-radius: 7px; color: #3A4A20;
            font-family: 'Oswald', sans-serif;
            font-size: 14.6px; width: 126px; outline: none;
            transition: border-color 0.2s;
        }

        .pf-input:focus { border-color: #3A4A20; }
        .pf-input::placeholder { color: #c4d898; }

        .pf-select {
            padding: 8px 13px;
            background: #ffffff;
            border: 1px solid #c4d898;
            border-radius: 7px; color: #3A4A20;
            font-family: 'Oswald', sans-serif;
            font-size: 14.6px; width: 154px; outline: none; cursor: pointer;
        }

        .pf-select option { background: #ffffff; color: #3A4A20; }

        .btn-apply {
            padding: 9px 22px; border-radius: 7px; border: none;
            background: #D4681E; color: #ffffff;
            font-family: 'Oswald', sans-serif;
            font-size: 12.5px; letter-spacing: 1.5px; text-transform: uppercase;
            cursor: pointer; transition: background 0.15s; align-self: flex-end;
        }

        .btn-apply:hover { background: #C85A10; }

        .empty-pack {
            text-align: center; padding: 56px 20px;
            color: #9ab860;
        }

        .empty-icon { font-size: 45.8px; margin-bottom: 14px; }
        .empty-text { font-size: 15.6px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 6px; color: #7a9448; }
        .empty-sub { font-size: 12.5px; letter-spacing: 1px; }

        /* Empty-pack call to action: a square brand tile into the screener. */
        .empty-cta-row { display: flex; justify-content: center; margin: 22px 0 6px; }
        .empty-cta {
            width: 208px; height: 208px; box-sizing: border-box;
            display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px;
            padding: 22px 18px;
            background: linear-gradient(150deg, #ffffff, #f4f9ec);
            border: 1.5px solid #c4d898; border-radius: 16px;
            box-shadow: 0 6px 20px rgba(26,42,14,0.08);
            cursor: pointer; outline: none;
            transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
        }
        .empty-cta:hover, .empty-cta:focus-visible {
            transform: translateY(-3px);
            border-color: #7a9448;
            box-shadow: 0 14px 30px rgba(26,42,14,0.16);
        }
        .empty-cta:focus-visible { border-color: #3A4A20; box-shadow: 0 0 0 3px rgba(122,148,72,0.35); }
        .empty-cta-img { width: 96px; height: 96px; display: block; }
        .empty-cta-label {
            font-family: 'Oswald', sans-serif; font-size: 13px; font-weight: 700;
            letter-spacing: 1.6px; text-transform: uppercase; color: #1a2a0e; text-align: center;
        }
        .empty-alt-btn {
            margin-top: 16px; padding: 9px 20px;
            background: transparent; color: #7a9448;
            border: 1px solid #c4d898; border-radius: 8px;
            font-family: 'Inter', sans-serif; font-size: 12.5px; cursor: pointer;
            transition: background .2s ease, color .2s ease;
        }
        .empty-alt-btn:hover { background: #f4f9ec; color: #3A4A20; }
        @media (prefers-reduced-motion: reduce) {
            .empty-cta { transition: none; }
            .empty-cta:hover, .empty-cta:focus-visible { transform: none; }
        }

        .section-divider { display: flex; align-items: center; gap: 14px; margin: 28px 0 22px; }
        .div-line { flex: 1; height: 1px; background: #c4d898; }
        .div-text { font-size: 11.4px; font-weight: 900; color: #7a9448; letter-spacing: 2px; text-transform: uppercase; white-space: nowrap; }

        /* ---- PACK CODE ---- */
        /* ---- CONSUMABLES ROW ---- */
        .pack-consumables {
            display: flex; gap: 0; align-items: stretch;
            background: rgba(255,255,255,0.85); border: 1px solid #c4d898;
            border-radius: 10px; padding: 10px 24px;
            margin-bottom: 18px; width: 90%; margin-left: auto; margin-right: auto;
        }
        .consumable-block { display: flex; flex-direction: column; align-items: center; gap: 5px; flex: 1; padding: 6px 0; }
        .consumable-block + .consumable-block { border-left: 1px solid #d4e8b0; padding-left: 18px; margin-left: 18px; }
        .consumable-label { font-size: 10.4px; font-weight: 900; color: #7a9448; letter-spacing: 1.8px; text-transform: uppercase; margin-bottom: 5px; }
        .consumable-row { display: flex; align-items: center; gap: 6px; }
        .consumable-input {
            width: 60px; padding: 7px 8px; height: 36px; box-sizing: border-box; line-height: 1;
            border: 1px solid #c4d898; border-radius: 6px;
            font-family: 'Oswald', sans-serif; font-size: 16.6px;
            color: #1a2a0e; outline: none; background: #fff;
            transition: border-color 0.15s;
        }
        .consumable-input:focus { border-color: #3A4A20; }
        .consumable-input::-webkit-inner-spin-button,
        .consumable-input::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
        .consumable-input[type=number] { -moz-appearance: textfield; appearance: textfield; border-radius: 0; }
        .spin-wrap { display: flex; align-items: stretch; }
        .spin-btn {
            width: 26px; border: 1px solid #c4d898; background: #fff;
            color: #5a7030; font-size: 10.4px; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            user-select: none; transition: background 0.1s; line-height: 1;
        }
        .spin-btn:hover { background: #e8f2d8; color: #1a2a0e; }
        .spin-btn:active { background: #d4e8b0; }
        .spin-dn { border-right: none; border-radius: 6px 0 0 6px; }
        .spin-up { border-left: none; border-radius: 0 6px 6px 0; }
        .consumable-unit { font-size: 12.5px; color: #9ab860; letter-spacing: 0.5px; }
        .conv-display {
            display: flex; align-items: baseline; gap: 5px;
        }
        .conv-num-lg { font-size: 31.2px; font-weight: 900; color: #1a2a0e; letter-spacing: 0; line-height: 1; }
        .conv-unit-lg { font-size: 13.5px; color: #7a9448; letter-spacing: 1px; margin-right: 6px; }
        .conv-num-sm { font-size: 20.8px; font-weight: 900; color: #3A4A20; letter-spacing: 0; line-height: 1; }
        .conv-unit-sm { font-size: 11.4px; color: #9ab860; letter-spacing: 1px; }

        /* ---- ALLOC + PACK CODE ROW ---- */
        .alloc-pack-row { display: flex; gap: 20px; align-items: flex-start; margin-bottom: 22px; width: 90%; margin-left: auto; margin-right: auto; flex-direction: column; }
        .alloc-wrap { flex: 1; min-width: 0; width: 100%; background: #ffffff; border: 1px solid #c4d898; border-radius: 12px; padding: 14px 15px; }
        .pack-code-compact {
            flex-shrink: 0; width: 210px;
            background: #f2f7e8; border: 1px solid #c4d898;
            border-left: 4px solid #3A4A20; border-radius: 10px;
            padding: 16px 18px; display: flex; flex-direction: column; gap: 0;
        }
        .pcc-divider { height: 1px; background: #d4e8b0; margin: 14px 0; }
        .pcc-label { font-size: 12px; font-weight: 900; color: #7a9448; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 4px; }
        .pack-code-compact .pack-code-input {
            padding: 6px 8px; font-size: 13.5px; letter-spacing: 3px; width: 100%;
        }

        .pack-code-box {
            display: flex; justify-content: space-between; align-items: center;
            background: #f2f7e8; border: 1px solid #c4d898;
            border-left: 4px solid #3A4A20;
            border-radius: 10px; padding: 18px 24px;
            margin-bottom: 22px; gap: 24px; flex-wrap: wrap;
        }
        .pack-code-val {
            font-size: 16px; font-weight: 900; color: #1a2a0e;
            letter-spacing: 2px; margin: 4px 0 3px;
            white-space: nowrap; overflow: hidden;
        }
        .pack-code-hint { font-size: 10.4px; color: #9ab860; letter-spacing: 0.8px; }
        .pack-code-input {
            padding: 9px 14px; border: 1px solid #c4d898;
            border-radius: 7px; font-family: 'Oswald', sans-serif;
            font-size: 17.7px; letter-spacing: 4px; color: #3A4A20;
            width: 148px; text-align: center; outline: none; background: #fff;
        }
        .pack-code-input:focus { border-color: #3A4A20; }

        /* ---- ALLOCATION CHART ---- */
        .alloc-body {
            display: flex; gap: 20px; align-items: flex-start;
            background: #fff; border: 1px solid #c4d898;
            border-radius: 12px; padding: 14px 16px; margin-bottom: 0;
        }
        .alloc-chart-side { flex-shrink: 0; }
        .alloc-toggle { display: flex; margin-bottom: 14px; }
        .alloc-tog-btn {
            padding: 5px 14px; font-family: 'Oswald', sans-serif;
            font-size: 10.4px; letter-spacing: 1.5px; text-transform: uppercase;
            border: 1px solid rgba(255,255,255,0.5); background: rgba(255,255,255,0.2); color: #1a2a0e;
            cursor: pointer; transition: all 0.15s;
        }
        .alloc-tog-btn:first-child { border-radius: 6px 0 0 6px; }
        .alloc-tog-btn:last-child { border-radius: 0 6px 6px 0; border-left: none; }
        .alloc-tog-btn.active { background: #3A4A20; color: #fff; border-color: #3A4A20; }
        .alloc-chart-wrap { position: relative; display: inline-block; }
        .alloc-center {
            position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            text-align: center; pointer-events: none;
        }
        .alloc-center-val { font-size: 19.8px; font-weight: 900; color: #1a2a0e; letter-spacing: 0.5px; }
        .alloc-center-lbl { font-size: 9.4px; color: #9ab860; letter-spacing: 2px; text-transform: uppercase; margin-top: 3px; }
        .alloc-legend { flex: 1; }
        .alloc-legend-hd {
            display: flex; justify-content: space-between;
            padding-bottom: 7px; border-bottom: 2px solid #e4efd0; margin-bottom: 2px;
            font-size: 10.4px; font-weight: 900; color: #9ab860; letter-spacing: 2px; text-transform: uppercase;
        }
        .alloc-row { display: flex; align-items: center; padding: 6px 0; border-bottom: 1px solid #f2f7e8; }
        .alloc-row:last-child { border-bottom: none; }
        .alloc-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; margin-right: 10px; }
        .alloc-cat { font-size: 13.5px; color: #4a5e28; flex: 1; display: flex; align-items: center; }
        .alloc-val { font-size: 13.5px; font-weight: 900; color: #1a2a0e; min-width: 64px; text-align: right; margin-right: 12px; }
        .alloc-pct { font-size: 11.4px; color: #9ab860; min-width: 42px; text-align: right; }

        /* ---- TRIP READINESS / MODEL PACKS (mobile) ---- */
        @media (max-width: 1024px) {
            .trip-ready-grid { grid-template-columns: 1fr !important; gap: 18px !important; }
            .model-packs-grid { grid-template-columns: 1fr !important; }
        }

/* ---- CUSTOM GEAR + AGENT REVIEWS card (My Pack) ---- */
.cg-form { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.cg-form input {
    padding: 7px 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;
}
.cg-form input#cgName { flex: 2 1 200px; }
.cg-form input#cgUrl { flex: 2 1 180px; }
.cg-form input#cgPrice, .cg-form input#cgWeight { flex: 0 1 88px; }
.cg-chip {
    display: inline-block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase;
    padding: 3px 9px; border-radius: 10px; white-space: nowrap; font-family: Oswald, sans-serif;
}
.cg-wait { color: #8a6d1a; border: 1px solid #e0c878; background: #fdf6e0; }
.cg-done { color: #2e7d32; border: 1px solid #9dc99f; background: #eef7ee; }
.cg-rej  { color: #b0413e; border: 1px solid #e0a8a6; background: #fdeeee; }
.cg-local{ color: #7a8c60; border: 1px solid #d6eab8; background: #f6faee; }
.cg-review { margin-top: 6px; padding: 8px 10px; background: #f6faee; border: 1px solid #e4efd0; border-radius: 8px; }
@media (max-width: 1024px) { .cg-form input { flex: 1 1 100% !important; } }

/* ---- STYLE-BOX DOT POPUP (hover a YOU dot) ---- */
.gear-dot-pop {
    position: fixed; z-index: 10010; background: #ffffff;
    border: 1px solid #c4d898; border-radius: 9px; padding: 10px 14px;
    box-shadow: 0 10px 28px rgba(26,42,14,0.22); max-width: 250px;
}
.gdp-name { font-family: Oswald, sans-serif; font-size: 13.5px; font-weight: 700; color: #1a2a0e; line-height: 1.3; }
.gdp-sub  { font-family: Inter, sans-serif; font-size: 10.5px; color: #9ab860; letter-spacing: 1px; text-transform: uppercase; margin: 2px 0 6px; }
.gdp-link { font-family: Inter, sans-serif; font-size: 11.5px; color: #D4681E; font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(212,104,30,0.4); cursor: pointer; }
.gdp-link:hover { color: #C85A10; }

/* ---- TOAST (brief "it worked" confirmation) ---- */
.ta-toast {
    position: fixed; left: 50%; bottom: 34px; transform: translate(-50%, 20px);
    z-index: 100000; background: #1a2a0e; color: #eaf3d8;
    font-family: Oswald, sans-serif; font-size: 14px; letter-spacing: 0.5px;
    padding: 13px 24px; border-radius: 30px; border: 1px solid #4a5c2c;
    box-shadow: 0 10px 34px rgba(26,42,14,0.32);
    opacity: 0; pointer-events: none; transition: opacity 0.28s ease, transform 0.28s ease;
    max-width: 88vw; text-align: center;
}
.ta-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---- PACK INTELLIGENCE TABLE ----
   Five columns spread across the full width on desktop (the old two-column
   version left the middle empty and crowded the numbers against the right edge).
   A phone has nowhere near that width, so the two least critical columns drop
   out rather than squeezing all five into 380px. Grid columns are set inline in
   quant-analysis.js; these overrides win because they are more specific. */
@media (max-width: 1024px) {
    .pi-row { grid-template-columns: minmax(0, 1.6fr) 52px minmax(78px, 1fr) !important; gap: 8px !important; }
    /* 3rd and 4th children are median weight / median $ per unit */
    .pi-row > *:nth-child(4) { display: none !important; }
}
@media (max-width: 560px) {
    .pi-row { grid-template-columns: minmax(0, 1.5fr) minmax(70px, 1fr) !important; }
    .pi-row > *:nth-child(2), .pi-row > *:nth-child(3) { display: none !important; }
}

/* ---- GEAR INDEX CATEGORY PICKER ----
   The panel shows one category's indexes at a time (see buildGearIndexesHTML).
   Horizontal scroll rather than wrapping to four rows of buttons — the row stays
   one line and you swipe it on a phone. */
.gi-cat-row {
    display: flex; gap: 7px; overflow-x: auto; padding: 0 0 12px;
    margin-bottom: 4px; scrollbar-width: thin; -webkit-overflow-scrolling: touch;
}
.gi-cat-row::-webkit-scrollbar { height: 5px; }
.gi-cat-row::-webkit-scrollbar-thumb { background: #c4d898; border-radius: 3px; }
.gi-cat-btn {
    display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
    background: #fff; border: 1.5px solid #c4d898; border-radius: 20px;
    padding: 7px 14px; cursor: pointer; white-space: nowrap;
    font-family: 'Oswald', sans-serif; font-size: 11px; font-weight: 700;
    letter-spacing: 1.1px; text-transform: uppercase; color: #5a7030;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.gi-cat-btn:hover { border-color: #7a9448; background: #f7fbf0; }
.gi-cat-btn.active { background: #1a2a0e; border-color: #1a2a0e; color: #c4d898; }
.gi-cat-n {
    font-size: 9.5px; opacity: 0.75; font-variant-numeric: tabular-nums;
    background: rgba(0,0,0,0.08); border-radius: 8px; padding: 1px 6px;
}
.gi-cat-btn.active .gi-cat-n { background: rgba(255,255,255,0.16); }

/* ---- MY PACK SUB-TABS ----
   Sits above the "My Pack" heading. Reads as a row of section links rather than
   chunky buttons — the underline carries the active state, so the strip stays
   quiet enough to live above a page title without competing with it. Scrolls
   horizontally on a phone instead of wrapping to three ragged rows. */
/* ── RECOMMENDED FOR YOUR TRIP ─────────────────────────────────────────────
   Four across on desktop, two on a phone. It carries its own grid rather than
   reusing .similar-grid because that class is shared with the item pages, where
   the tablet stylesheet forces a third column. Four cards are always rendered;
   the phone hides the last two, so one code path serves both. */
.mp-rec-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
@media (max-width: 1024px) {
    .mp-rec-grid { grid-template-columns: 1fr 1fr; }
    .mp-rec-grid > *:nth-child(n+3) { display: none; }
}

/* ── MY PACK / QUANT: head, then content right beneath it ─────────────────
   #mainContent is pulled up over .site-hero (margin-top: -740px) so a page's
   title sits on the photograph. The content follows the sub-tab strip directly,
   separated by one small gap, which means the top of it overlaps the photo —
   the panels carry opaque card backgrounds, so only the bare section headings
   sit on the image, and those are painted white below. */
.mp-hero-head { min-height: 0; }
.mp-body      { padding-top: 14px; }   /* the small gap under the tab strip */
/* Panels carry their own top margins — inline ones, hence !important — which
   spaced them apart back when every panel shared one scroll. First in its own
   tab that margin just makes the gap under the photo depend on which tab is
   open (Allocation sat 45px lower than the rest). */
.mp-body > *:first-child { margin-top: 0 !important; }

/* Both wrappers span the full column. #mainContent > * is width:90% on desktop,
   and letting that apply here would nest 90% inside 90% and shrink every panel
   to 81% — the children already set their own width. */
#mainContent > .mp-hero-head,
#mainContent > .mp-body { width: 100%; }

.mp-title-block { width: 90%; margin: 0 auto 15px; }

/* Material Scores panel: same surface as the sub-tab strip and the Active Pack
   tile, so the gauges sit on a real tile rather than on the hero photograph. */
.ms-card {
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border: 1px solid #d6eab8;
    border-radius: 10px;
    padding: 16px 20px 18px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
    box-sizing: border-box;
}

/* Bare section headings (Overview, Material Scores, Pack Allocation…) sit on the
   page background. Now that content starts right under the tab strip, the first
   of them land on the hero photograph while later ones have scrolled past it
   onto the pale topographic background — so the colour cannot be a fixed choice.
   paintHeroHeadings() measures each heading against the photo's bottom edge and
   stamps .on-hero, which is the only thing that turns them white. Green stays
   the default, so a heading is never white on a pale background. */
.mp-body .item-section-hd.on-hero {
    color: #ffffff !important;
    text-shadow: 0 1px 10px rgba(0, 0, 0, 0.65), 0 0 3px rgba(0, 0, 0, 0.45);
    border-bottom-color: rgba(255, 255, 255, 0.38) !important;
}

@media (max-width: 1024px) {
    .mp-body { padding-top: 12px; }
}

.mp-tabs-wrap {
    width: 90%;
    margin: 0 auto 10px;
    padding: 0 16px;
    /* Same lightly-transparent surface as the Active Pack tile above it
       (#packMgrPanel), so the two read as one stacked header unit over the
       hero photograph rather than two different treatments. */
    background: rgba(255, 255, 255, 0.85);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
    border: 1px solid #d6eab8;
    border-radius: 10px;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.10);
}
.mp-tabs {
    display: flex;
    gap: 26px;
    overflow-x: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mp-tabs::-webkit-scrollbar { display: none; }
.mp-tab {
    flex: 0 0 auto;
    padding: 11px 0 9px;
    font-family: 'Oswald', sans-serif;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: #3a3a3a;
    text-decoration: none;
    white-space: nowrap;
    border-bottom: 2.5px solid transparent;
    transition: color 0.15s, border-color 0.15s;
}
.mp-tab:hover { color: #000000; border-bottom-color: rgba(0, 0, 0, 0.25); }
.mp-tab.active { color: #000000; border-bottom-color: #D4681E; }

@media (max-width: 1024px) {
    .mp-tabs-wrap { width: 94%; padding: 0 12px; }
    .mp-tabs { gap: 18px; }
    .mp-tab { font-size: 10.5px; letter-spacing: 1.1px; padding: 10px 0 8px; }
}