in marketplace.blade.php) rather than the bare .section-title class, because that class is shared with About's own

About AccountHab

— a bare .section-title rule here would also hide About's heading, which this refinement must not touch. Desktop/tablet (>600px) keep the "Marketplace" heading exactly as before — untouched; the class/styling itself is unchanged, only this one id is newly hidden at this width. */ #marketPageTitle{display:none} .cat-all-fixed{display:none} .cat-wrap{padding:10px} /* Mobile Categories Section Header Simplification — the blue icon square and the "Browse by category and find what you need" subtitle are dropped on phone widths so the card's header is just the "Categories" heading; .cat-header-title's own gap:10px only applies between VISIBLE flex children, so hiding .cat-header-icon-wrap here doesn't leave a stray empty gap before the heading. Desktop/tablet (>600px) keep the icon and subtitle exactly as before — untouched. */ .cat-header-icon-wrap{display:none} .cat-header-sub{display:none} /* Mobile UI Refinement — the "Categories" heading text itself (the only part of .cat-header still visible at this width, now that its icon and subtitle are already hidden immediately above) is dropped too, to reclaim more vertical space for product rows below. This hides the whole .cat-header row (it has nothing else left to show at <=600px), not .category-bar or the mobile category-selector toggle (#catMobileToggle/.sub-mobile-toggle) just below .cat-wrap — both stay fully visible/functional, unchanged. Desktop/tablet (>600px) keep the "Categories" heading exactly as before — untouched. */ .cat-header{display:none} .cat-arrow{width:28px;height:28px;font-size:14px} .category-bar{gap:6px} .categories{gap:6px} .category{width:clamp(80px,22vw,112px);padding:8px 6px 6px;min-height:100px} .category-icon{width:22px;height:22px} .cat-tile-icon{width:18px;height:18px} .cat-name{font-size:11px;min-height:2.2em} .cat-count-badge{font-size:9px;padding:1px 5px} } /* Marketplace Sub Categories redesign — was a single unbounded chip row (every Sub Category rendered flat, filling most of the screen on a large list); now a compact white card with a capped desktop chip row + "View All" button, and a collapsed-by-default mobile/tablet control (see the @media(max-width:768px) block near the bottom of this file). .subcategory/.subcategory-icon keep their original class names (still built by the same renderSubCategories() data), just restyled as rounded pill chips with AccountHab's existing blue accent instead of the old flat gray box. */ .sub-wrap{background:#fff;border:1px solid #e3e5e8;border-radius:10px;padding:16px;margin-bottom:16px;box-shadow:var(--shadow-md)} .sub-header{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:12px;flex-wrap:wrap} /* Clickable "Sub Categories" heading (desktop/PC only) — .sub-title only ever renders inside .sub-header, which is already hidden on mobile/ tablet by the existing, untouched @media(max-width:768px) rule below, so no separate breakpoint is needed here either: this hover/focus styling and the cursor simply never apply on a hidden element. Does the exact same reset as clicking "All Sub Categories" (see #subTitleAllTrigger's click handler in marketplace.blade.php). */ .sub-title{display:flex;align-items:center;gap:8px;font-size:17px;font-weight:700;color:var(--text);cursor:pointer;border-radius:6px;transition:color .15s ease} .sub-title:hover,.sub-title:focus-visible{color:var(--blue-700)} .sub-title:hover .sub-title-icon,.sub-title:focus-visible .sub-title-icon{fill:var(--blue-800)} .sub-title:focus-visible{outline:2px solid var(--blue-500);outline-offset:3px} .sub-title:hover .sub-count-pill,.sub-title:focus-visible .sub-count-pill{background:var(--blue-500);color:#fff} /* Selected-Category logo wrapper (#subTitleLogo) — a plain inline flex box so it aligns on the same baseline as the heading text/count pill whether JS has filled it with an (a real Category logo) or the fallback