/* ---- HOME PAGE ---- */ .home-hero { background: transparent; margin: -32px -24px 44px; padding: 80px 48px 84px; text-align: center; position: relative; overflow: hidden; /* Fill the 740px hero photo so "Top Analyst Picks" and everything below it sits beneath the image instead of overlapping it. */ min-height: 740px; box-sizing: border-box; } .home-hero::before { display: none; } .home-hero-inner { max-width: 700px; margin: 0 auto; position: relative; z-index: 1; } .home-hero-eyebrow { display: inline-block; font-size: 10.4px; letter-spacing: 3px; text-transform: uppercase; color: #9ab860; border: 1px solid rgba(154,184,96,0.38); padding: 5px 18px; border-radius: 20px; margin-bottom: 26px; } .home-hero-title { font-size: 56.2px; font-weight: 900; color: #fff; line-height: 1.0; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 20px; text-shadow: 0 2px 14px rgba(0,0,0,0.65); } .home-hero-title span { color: #D4681E; } .home-hero-sub { font-size: 15.6px; color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 38px; letter-spacing: 0.4px; text-shadow: 0 1px 8px rgba(0,0,0,0.7); } .home-hero-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .home-btn-primary { padding: 14px 36px; background: #D4681E; color: #fff; border: none; border-radius: 8px; font-family: 'Oswald', sans-serif; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: background 0.15s; } .home-btn-primary:hover { background: #C85A10; } .home-btn-secondary { /* Mostly white, the same rgba(255,255,255,0.85) surface as the My Pack sub-tab strip and the Active Pack tile, so the two solid buttons in the hero read as a pair. The label is dark because at 85% white a white one is invisible. */ padding: 14px 36px; background: rgba(255,255,255,0.85); color: #1a2a0e; border: 1.5px solid rgba(255,255,255,0.75); border-radius: 8px; font-family: 'Oswald', sans-serif; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; transition: all 0.15s; } .home-btn-secondary:hover { background: rgba(255,255,255,0.95); border-color: rgba(255,255,255,0.9); color: #1a2a0e; } .home-stats-bar { display: flex; justify-content: center; align-items: center; background: rgba(255,255,255,0.85); border: 1px solid #c4d898; border-radius: 12px; padding: 22px 0; margin-bottom: 44px; } .home-stat { text-align: center; padding: 0 44px; } .home-stat-val { font-size: 31.2px; font-weight: 900; color: #1a2a0e; letter-spacing: 1px; } .home-stat-lbl { font-size: 10.4px; font-weight: 900; color: #9ab860; letter-spacing: 2px; text-transform: uppercase; margin-top: 4px; } .home-stat-div { width: 1px; height: 40px; background: #c4d898; } .home-section-title { font-size: 12.5px; font-weight: 900; color: #3A4A20; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 16px; padding-bottom: 10px; border-bottom: 2px solid #D4681E; } .home-ticker { background: #2a3c12; margin: -44px -24px 44px; padding: 11px 48px; display: flex; justify-content: center; align-items: center; gap: 32px; flex-wrap: wrap; border-bottom: 1px solid rgba(154,184,96,0.15); } .home-ticker-item { font-size: 10.4px; letter-spacing: 2px; text-transform: uppercase; color: rgba(154,184,96,0.6); white-space: nowrap; } .home-ticker-item strong { color: #c4d898; font-weight: 900; } .home-ticker-sep { color: rgba(154,184,96,0.2); font-size: 16.6px; line-height: 1; } .home-picks-wrap { background: #f7faf3; margin: 0 -24px; padding: 44px 24px; margin-bottom: 44px; } .home-picks-wrap .home-section-title { border-bottom-color: #D4681E; } /* Two tiles: the top analyst pick and Model Packs. */ .home-picks-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 44px; } .home-pick-card { background: rgba(255,255,255,0.85); border: 1px solid #c4d898; border-top: 3px solid #3A4A20; border-radius: 10px; padding: 22px 20px; cursor: pointer; transition: box-shadow 0.15s, transform 0.15s; /* Column flex so .home-pick-bottom can be pushed to the floor. */ display: flex; flex-direction: column; } /* Stars + price ride the bottom edge, so both rows line up across every card in the row no matter how many lines the gear name takes. */ .home-pick-bottom { margin-top: auto; } .home-pick-card.top-pick { border-top-color: #D4681E; } .home-pick-card:hover { box-shadow: 0 6px 24px rgba(58,74,32,0.12); transform: translateY(-2px); } .home-pick-badge { display: inline-block; font-size: 9.4px; letter-spacing: 2px; text-transform: uppercase; color: #D4681E; border: 1px solid rgba(212,104,30,0.35); padding: 2px 9px; border-radius: 10px; margin-bottom: 10px; } .home-pick-eyebrow { font-size: 10.4px; color: #9ab860; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; } .home-pick-name { font-size: 16.6px; font-weight: 900; color: #1a2a0e; margin-bottom: 3px; line-height: 1.2; } .home-pick-brand { font-size: 11.4px; color: #9ab860; letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 12px; } .home-pick-footer { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 14px; padding-top: 12px; border-top: 1px solid #e4efd0; } .home-pick-price { font-size: 18.7px; font-weight: 900; color: #1a2a0e; } .home-pick-action { font-size: 10.4px; color: #7a9448; letter-spacing: 1.5px; text-transform: uppercase; } .home-modelpacks-card { background: linear-gradient(160deg, #1a2a0e 0%, #2b3d16 100%); border: 1px solid #3A4A20; border-top: 3px solid #D4681E; display: flex; flex-direction: column; } .home-modelpacks-card .home-pick-footer { margin-top: auto; } /* Taller pill + 50% larger type (9.4px -> 14.1px). Only the Model Packs badge — .home-pick-badge stays as-is on the Top Pick card. */ .home-modelpacks-badge { color: #D4681E; border-color: rgba(212,104,30,0.5); font-size: 14.1px; padding: 9px 14px; border-radius: 16px; display: flex; align-items: center; } .home-cats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 44px; } .home-cat-card { background: #f2f7e8; border: 1px solid #c4d898; border-radius: 10px; padding: 30px 20px 24px; cursor: pointer; transition: all 0.15s; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; } .home-cat-card:hover { background: #e4efd0; border-color: #5a7030; transform: translateY(-1px); } .home-cat-badge { width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; margin: 0 auto 14px; color: #1a2a0e; } .home-cat-name { font-size: 16.6px; font-weight: 900; color: #1a2a0e; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 5px; } .home-cat-meta { font-size: 12.5px; color: #9ab860; letter-spacing: 1px; margin-bottom: 12px; } .home-cat-link { font-size: 11.4px; color: #7a9448; letter-spacing: 1.5px; text-transform: uppercase; } /* ---- ITEM DETAIL ---- */ .td-name { cursor: pointer; transition: color 0.15s; } .td-name:hover { color: #D4681E; } .item-hero { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 28px; padding-bottom: 24px; border-bottom: 2px solid #e4efd0; } /* Hero overlays the photo — the "N vs. Category" rating label (shared analystStars markup, inline-colored green) must read white here. */ .item-hero .stars-lbl { color: #ffffff !important; text-shadow: 0 1px 6px rgba(0,0,0,0.55); text-align: left; } /* Rating stars: gold when filled, white when empty (over the photo), and left-aligned so they line up under the category / name / brand text. */ .item-hero .stars { justify-content: flex-start; } .item-hero .star { color: #ffffff; text-shadow: 0 1px 5px rgba(0,0,0,0.5); } .item-hero .star.on { color: #E8B84B; } .item-hero .star.half { color: #E8B84B; opacity: 0.5; } .item-metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 32px; } .item-metric-card { background: rgba(255,255,255,0.85); border: 1px solid #c4d898; border-top: 3px solid #3A4A20; border-radius: 10px; padding: 16px 18px; } .item-metric-card.highlight { border-top-color: #D4681E; } /* Add to Pack / Wishlist / Share sit on the hero photograph, where a transparent button leaves its label fighting the image. They take the same lightly-frosted white surface as the metric cards below them (.item-metric-card), so the whole hero reads as one set of panels. Scoped to the item hero — the identical classes in the screener table stay transparent on their own row background, and the phone uses its own sticky .item-bar rather than this pair. */ .item-detail-top .add-wish-pair .btn-add, .item-detail-top .add-wish-pair .btn-wish { background: rgba(255,255,255,0.85); -webkit-backdrop-filter: blur(5px); backdrop-filter: blur(5px); border-color: #c4d898; color: #3A4A20; } .item-detail-top .add-wish-pair .btn-add:hover { background: #D4681E; border-color: #D4681E; color: #ffffff; } .item-detail-top .add-wish-pair .btn-add.in-pack { background: rgba(58,74,32,0.88); border-color: #3A4A20; color: #e4f2c8; } .item-metric-lbl { font-size: 10.4px; font-weight: 900; color: #7a9448; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; } .item-metric-val { font-size: 25px; font-weight: 900; color: #1a2a0e; } .item-metric-sub { font-size: 10.4px; font-weight: 600; color: #9ab860; letter-spacing: 1px; text-transform: uppercase; margin-top: 4px; } .similar-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 1024px) { .similar-grid { grid-template-columns: 1fr 1fr; } } /* ── Material Score gauges (title centered above a vertical red→green bar) ── */ /* justify-content defaults to flex-start, so a pack with one or two scored materials left-aligned them under a centred heading. Centring works for any count: a single gauge sits in the middle, and a wrapped final row centres instead of trailing off to the left. */ /* Pack Report / Share to Instagram / Definitions / Methodology sat in a 160px column on desktop, which cramped the button labels. Doubled to 320px. Desktop only — the phone stacks this block full-width already, and forcing 320px there would overflow a 390px screen. */ @media (min-width: 1025px) { .pack-report-col { min-width: 320px !important; } /* Export to Excel moved into the left column, so the right one had dead space under the Unit System card. Doubling this box (43px -> 86px CSS, which paints as ~70px under the 0.81 page zoom) takes up the slack. */ .find-gear-box { min-height: 86px !important; justify-content: center !important; } /* This column sized to its content, so Unit System and Can't Find Your Gear stopped short of the row's right edge and left a strip of background. flex:1 makes it claim the remainder. */ .pack-tools-col { flex: 1 1 auto !important; min-width: 0 !important; } /* 1.3x taller. Rendered height was 30px under the 0.81 page zoom, i.e. 37px of CSS, so 48px lands at ~39px painted. */ .export-xl-btn { min-height: 48px !important; } } /* On a phone the column collapses to its content, so space-between has nothing to distribute and the button sat flush against Definitions/Methodology. */ @media (max-width: 1024px) { .export-xl-btn { margin-top: 12px !important; } } /* The BLOCK is centred; the gauges inside run left to right. width:fit-content resolves to the gauges' own width while they fit on one line (so 1 or 2 sit centred under the heading) and to the full width once they wrap (so a leftover gauge on the last row starts at the left instead of floating centred under the row above). */ .ms-row { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 26px 34px; /* Desktop reads left-to-right from the section's left edge. It used to be width:fit-content with auto side margins, which centred the whole block — so with three gauges the row floated in the middle and no longer lined up with the heading above it. The phone keeps its own centred 2-column grid (mobile-shell.css). */ width: 100%; max-width: 100%; margin-left: 0; margin-right: 0; } .ms-part { display: flex; flex-direction: column; align-items: center; text-align: center; width: 150px; } .ms-part-name { font-size: 14px; font-weight: 700; color: #4a5e28; letter-spacing: 1px; text-transform: uppercase; margin-bottom: 11px; } .ms-bar { position: relative; width: 17px; min-height: 120px; border-radius: 10px; background: linear-gradient(to top, #c0392b, #e67e22, #f1c40f, #9acd32, #2e7d32); box-shadow: inset 0 0 0 1px rgba(0,0,0,0.08); } .ms-marker { position: absolute; left: -5px; right: -5px; height: 0; border-top: 3px solid #1a2a0e; box-shadow: 0 0 0 1px rgba(255,255,255,0.6); } .ms-mat { font-size: 14px; color: #7a8a5e; margin-top: 10px; max-width: 150px; line-height: 1.4; } .ms-gear { font-size: 11.5px; font-weight: 700; color: #3a5a10; margin-top: 5px; max-width: 150px; line-height: 1.3; } .ms-unavail { font-size: 13.6px; color: #9ab860; font-style: italic; } /* Reserve the hero-photo height so Analyst Rating onward lands on the topo bg */ .item-detail-top { min-height: 740px; } /* Match the phone hero photo, which is 75vw tall (4:3 at full-bleed width — see the .site-hero mobile rule). The old hard 220px was left over from the previous shorter hero, so everything after this block started ~70px too high and sat ON the photo. */ @media (max-width: 1024px) { .item-detail-top { min-height: 75vw; } } .item-section { margin-bottom: 32px; } .item-section-hd { font-size: 11.4px; font-weight: 900; color: #3A4A20; letter-spacing: 2.5px; text-transform: uppercase; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid #c4d898; } .specs-grid { display: grid; grid-template-columns: 1fr 1fr; background: rgba(255,255,255,0.85); border: 1px solid #c4d898; border-radius: 10px; overflow: hidden; } .spec-label { padding: 12px 18px; font-size: 11.4px; font-weight: 900; color: #7a9448; letter-spacing: 1.5px; text-transform: uppercase; background: #f2f7e8; border-bottom: 1px solid #e4efd0; } .spec-value { padding: 12px 18px; font-size: 13.5px; color: #1a2a0e; font-weight: 600; border-bottom: 1px solid #e4efd0; } .spec-label:last-of-type, .spec-value:last-of-type { border-bottom: none; } .item-analyst-box { background: #f2f7e8; border: 1px solid #c4d898; border-left: 4px solid #3A4A20; border-radius: 10px; padding: 20px 24px; } .item-analyst-note { font-size: 14.6px; color: #4a5e28; line-height: 1.65; margin-top: 12px; } /* ═══════════════ MOBILE V2 — compact app-style top bar + polish (≤768px) ═══════════════ Loaded last so these win the cascade over screener.css's older mobile block. */ @media (max-width: 1024px) { /* No ticker bar on mobile (desktop-only feature) */ .ticker-strip { display: none !important; } /* Compact two-row header: logo row (fixed controls overlay its right), full-width search */ header { align-items: stretch !important; gap: 9px !important; min-height: 0 !important; justify-content: flex-start !important; padding: max(10px, env(safe-area-inset-top, 10px)) 12px 10px !important; border-bottom: 1.6px solid #D4681E; } .header-logo-wrap { position: static !important; align-self: flex-start; } .header-logo { height: 34px !important; } .search-wrapper { width: 100% !important; } /* Keep in step with the screener.css mobile rule: >=16px font (or iOS zooms on focus and eats the first tap) and a 44px touch target. */ .search-bar { height: 44px !important; padding: 10px 12px 10px 38px !important; font-size: 16px !important; } .search-icon { left: 13px !important; } /* Top-right controls: icon-only, sized to the logo row */ #accountPillLabel { display: none !important; } #accountPillBtn { padding: 6px !important; height: 34px !important; width: 34px !important; justify-content: center !important; } #submitIdeaBtn { height: 34px !important; padding: 5px 10px !important; font-size: 15px !important; border-radius: 17px !important; } #hamburgerBtn { padding: 8px 9px !important; gap: 5px !important; } #hamburgerBtn span { width: 22px !important; height: 2.5px !important; } /* Drawer opens above the fixed top-right controls */ .mob-nav-overlay { z-index: 10002 !important; } .mob-nav-drawer { z-index: 10003 !important; padding-top: max(56px, env(safe-area-inset-top, 0px)) !important; } /* Hero buttons sit on the photo on a phone. Explore Screener is the primary call to action, so it stays fully opaque; Build My Pack is lightly translucent (25%) so the image shows through without hurting legibility. */ .home-btn-primary { background: #D4681E !important; } .home-btn-primary:hover { background: #C85A10 !important; } .home-btn-secondary { background: rgba(255,255,255,0.75) !important; border: 2px solid #3A4A20 !important; color: #3A4A20 !important; text-shadow: none !important; } /* Tables: pin the gear-name column while the stats scroll */ .table-wrap th:first-child, .table-wrap td:first-child { position: sticky; left: 0; z-index: 3; background: #ffffff; box-shadow: 6px 0 10px -6px rgba(26,42,14,0.28); } .table-wrap thead th:first-child { background: #3A4A20; z-index: 4; } .table-wrap tbody tr:nth-child(odd) td:first-child { background: #f4f9ee; } .table-wrap tbody tr:nth-child(even) td:first-child { background: #ffffff; } .table-wrap tbody tr:hover td:first-child { background: #e8f3d6; } /* My Pack: stack the tools row (defs/next-trip | unit/export/find) vertically */ .pack-ratios-row > div:last-child { flex-direction: column !important; top: 0 !important; width: 100% !important; gap: 10px !important; align-items: stretch !important; } .pack-ratios-row > div:last-child > div { width: 100% !important; min-width: 0 !important; } /* My Next Trip label sits on white below the 220px photo band */ .next-trip-label { color: #3A4A20 !important; } } /* ── Item page top area (over the hero photo) ── Section headers up here sit directly on the PNG — they read white, like the hero text. Sections below the fold keep the green headers. */ .item-detail-top .item-section-hd { color: #ffffff; text-shadow: 0 1px 6px rgba(0,0,0,0.55); border-bottom-color: rgba(255,255,255,0.4); } /* Style-box module: frosted card matching the metric tiles, so the box reads crisply instead of floating on the photo. */ .isb-card { background: rgba(255,255,255,0.88); border: 1px solid #c4d898; border-top: 3px solid #3A4A20; border-radius: 10px; padding: 14px 16px 10px; flex: 0 1 262px; min-width: 212px; box-shadow: 0 4px 18px rgba(26,42,14,0.18); } /* Affiliate disclosure under the analyst note. Grey and small — present and readable, but clearly secondary to the analysis it qualifies. */ .item-affiliate-note { margin-top: 12px; padding-top: 10px; border-top: 1px solid #e4efd0; font-family: Inter, sans-serif; font-size: 11px; line-height: 1.5; color: #8a8f84; letter-spacing: 0.2px; } /* Safari derives a viewBox SVG's intrinsic width from the viewBox and lets it inflate its flex parent; Chrome resolves width:100% against the container. Both declarations are no-ops in Chrome. */ .isb-card svg { max-width: 100%; height: auto; } .isb-title { font-size: 10px; font-weight: 900; color: #7a9448; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; text-align: center; } .isb-cap { font-size: 10.5px; color: #9ab860; text-align: center; margin-top: 5px; letter-spacing: 0.5px; } .item-detail-top .item-metrics { margin-bottom: 14px; } /* style box rides closer to the metric cards */ /* Chart on the left of the group, verdict + manufacturer description stacked to its right, and the whole group pushed to the right edge so the hero photo behind it is not completely covered. The panels used to be four equal quarters spanning the full width, which hid the photo entirely and gave the one-line verdict the same height as the chart. */ .isb-row { /* 34px column gap (≈28px painted at the 0.81 desktop zoom): at 14px the chart card sat right against the verdict/description column. Row gap stays tight for the phone, where these stack. */ /* Column gap trimmed 34 -> 18 so the chart sits close to the description column rather than floating mid-page. Row gap stays at 14 for the phone, where these stack instead. */ display: flex; gap: 14px 18px; flex-wrap: wrap; align-items: flex-start; justify-content: flex-end; } /* 388px = 353 * 1.1, i.e. 10% larger than the width the chart had when the row was four equal quarters. Desktop runs html{zoom:0.81}, so a flex-basis in CSS pixels lands on screen at 0.81x — 388 paints ~314px. The SVG scales with the card, so the whole box grows, not just its frame. */ /* Chrome and Safari disagree here, and the cause is html{zoom:0.81}: Chrome widens the layout viewport to match, Safari does not, so the same page has materially less CSS width in Safari. A pad renders TWO cards, and 388+388+14 plus the 419px description column needs ~1230px — fine in Chrome, past the edge in Safari, where the row wrapped and dropped the description onto its own line. max-width holds the ceiling at the old fixed 388px, so wherever there IS room (Chrome) the cards grow to exactly their previous size and nothing changes; where there isn't (Safari) they shrink instead of wrapping. */ .isb-row .isb-card { flex: 1 1 300px; min-width: 200px; max-width: 388px; } /* Heading + chart(s) travel together as one block. */ .isb-charts { /* min-width:0 is what actually permits the shrink: a flex item's automatic minimum is its content's min-content width, and the chart SVGs report a wide one in Safari. */ flex: 0 1 auto; min-width: 0; display: flex; flex-direction: column; /* No standoff: the row is right-aligned, so dropping this margin shifts the whole chart block right, up against the description column with only the row's 18px gap between them. */ margin-right: 0; } .isb-charts-inner { display: flex; gap: 14px; align-items: flex-start; } /* The heading is inside the group now, so its section-wide bottom rule would underline only the chart — keep the label, drop the rule. */ .isb-charts .item-section-hd { border-bottom: none; padding-bottom: 6px; margin-bottom: 6px; } .isb-side { /* 419 = 360 + 59, i.e. half an inch wider (59px CSS paints ~48px under the 0.81 desktop zoom). The column stays INSIDE the content boundary — flush with the metric tiles above it — so the extra width is taken from the gap on its left, not hung off the right edge of the page. */ flex: 0 1 419px; min-width: 240px; display: flex; flex-direction: column; gap: 14px; } /* The verdict keeps its natural height — about a quarter of the chart's — while the description takes whatever is left, so the column's bottom edge lands on the chart's. align-self:stretch is needed because the row itself is flex-start (the charts block must not stretch). */ .isb-side { align-self: stretch; } .isb-side .isb-explain { flex: 0 0 auto; } .isb-side .isb-mfr { flex: 1 1 auto; min-height: 0; } .isb-explain { border-radius: 10px; background: rgba(26,42,14,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.22); border-top: 3px solid #D4681E; padding: 18px 22px; display: flex; flex-direction: column; justify-content: center; } .isb-explain-hd { font-size: 10px; font-weight: 900; color: #D4681E; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .isb-explain-txt { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.65; font-family: Inter, sans-serif; } /* No rule/top spacing: the verdict is now the first thing in this card, and the divider it used to sit under separated it from the "How to read it" paragraph that has since been removed. */ .isb-explain-verdict { font-size: 13.5px; color: #ffffff; line-height: 1.6; font-family: Inter, sans-serif; } .isb-explain-verdict b { color: #E8B84B; letter-spacing: 0.5px; } /* Manufacturer Description — same dark-glass panel, green accent to set it apart from the orange "How to read it". Long copy scrolls inside the matched height; empty shows a muted placeholder dash. */ .isb-mfr { border-radius: 10px; background: rgba(26,42,14,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); border: 1px solid rgba(255,255,255,0.22); border-top: 3px solid #7a9448; padding: 18px 22px; display: flex; flex-direction: column; } .isb-mfr-hd { font-size: 10px; font-weight: 900; color: #9ab860; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 10px; } .isb-mfr-txt { font-size: 13px; color: rgba(255,255,255,0.82); line-height: 1.6; font-family: Inter, sans-serif; overflow-y: auto; max-height: 240px; } .isb-mfr-txt.empty { flex: 1; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.4); font-size: 22px; max-height: none; } /* Phone: one column, full width — there is no spare width to shift into, so the right-alignment simply collapses. */ @media (max-width: 1024px) { /* 'stretch' is not a flexbox value for justify-content — it computes to 'normal', i.e. flex-start — so the row packed left. The items are full-width here anyway, so start alignment is what we want; say so. */ .isb-row { justify-content: flex-start; } /* max-width:none is the fix for the gap down the right-hand side. The desktop rule caps a card at 388px, and html{zoom:0.81} only applies at >=1025px, so on a phone that 388 is 388 real pixels — narrower than any iPhone since the SE (390-430pt). The card filled its flex-basis of 100% and was then clipped back to 388, leaving the rest of the row empty. */ .isb-row .isb-card, .isb-side, .isb-charts { flex: 1 1 100%; min-width: 0; max-width: none; } .isb-charts-inner { flex-wrap: wrap; } /* No spare width on a phone — the desktop offsets would push these off the screen. */ .isb-charts { margin-right: 0; } /* Stacked on a phone — nothing to align to, so the description sizes to its own content again. */ .isb-side { margin-right: 0; align-self: auto; } .isb-side .isb-mfr { flex: 0 0 auto; } } /* Product link at the bottom of Specs — readable over the hero photo. */ .spec-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; padding: 9px 16px; border-radius: 8px; background: rgba(58,74,32,0.92); color: #d8e8b8; font-family: Oswald, sans-serif; font-size: 12px; font-weight: 700; letter-spacing: 0.8px; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(255,255,255,0.2); transition: background 0.15s, color 0.15s; } .spec-link:hover { background: #3A4A20; color: #ffffff; } /* Home page shows the first 6 categories and 6 brands; the rest carry .home-overflow until "Browse all …" is pressed (see homeToggleMore in js/views/home.js). They are rendered either way, so revealing costs nothing. */ .home-cat-card.home-overflow { display: none !important; }