/* Marco Polo — Global mobile responsiveness layer. Loaded last in so same-specificity rules here override page-level inline styles without needing !important. Covers universal mobile patterns: - Nav / page-body / footer paddings sized for desktop - Multi-column grids that don't collapse below 768px - Two-column page layouts (sidebar + content) that overflow at narrow widths - Auth cards with fixed 460px width - Hero / CTA sections with calc() padding that misbehaves on mobile - Fallback background for transparent uploaded images. */ /* ───────────────────────────────────────────────────────────────────────── GLOBAL — fallback background for uploaded images. Transparent PNG logos / banners / product shots blend straight into the page background. Painting a light grey behind every Supabase-hosted image gives them something to sit on so the upload still reads as an image rather than disappearing into the layout. ───────────────────────────────────────────────────────────────────────── */ img[src*="/storage/v1/object/public/uploads/"] { background-color: #F1F3F5; } /* ───────────────────────────────────────────────────────────────────────── GLOBAL — user-dropdown header truncation. The dropdown is fixed-width (~240px); long company names like "Mystic Stainless & Aluminum Inc." overflow without these rules. Hover shows the full name via title attribute set in js/navbar.js. ───────────────────────────────────────────────────────────────────────── */ .user-dropdown .dropdown-header { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== Tablet & narrower (≤ 768px) Many pages already have rules here; we add the ones that were missing from the audit. Source order means we win same-specificity ties. ========================================================================== */ @media (max-width: 768px) { /* Two-column page layouts collapse universally — fixes 04/05/06/07/12/16/22/23/25 */ .page-layout, .detail-page, .main-grid, .messages-layout { grid-template-columns: 1fr !important; } /* Soft padding reduction at tablet — was 48px, now 24px */ .nav { padding: 0 24px; } .footer { padding: 48px 24px 24px; } .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; } .footer-grid > .footer-brand { grid-column: 1 / -1; } /* Big multi-column grids start collapsing here */ .product-grid, .cat-grid { grid-template-columns: repeat(3, 1fr) !important; } .value-props, .card-grid, .related-grid, .gallery-grid, .gallery-preview-grid, .gallery-manager, .facility-grid { grid-template-columns: repeat(2, 1fr) !important; } } /* ========================================================================== Mid-desktop tightening (1025-1280px). Before the tablet breakpoint forces search to wrap, gradually reduce the gaps between nav-left items and the side margins on nav-center so the search bar shrinks smoothly rather than suddenly running out of room and triggering the wrap. ========================================================================== */ @media (min-width: 1025px) and (max-width: 1280px) { .nav-left { gap: 24px !important; } .nav-links { gap: 20px !important; } .nav-center { margin: 0 20px !important; } .nav-search { min-width: 220px; } } /* ========================================================================== Tablet (769-1024px) — full nav links + auth stay on row 1, search bar wraps to row 2 so it doesn't get squashed. No hamburger here; this is the in-between size where the desktop layout almost works but the search field runs out of room. nav-right stays inline with nav-left because the user-menu has already collapsed to avatar-only (via inline @media 1100px) and nav-lang is hidden, both freeing enough horizontal space. Two nav DOM shapes exist — some pages wrap children in .nav-inner, others put .nav-left/.nav-center/.nav-right as direct children of .nav. Both need flex-wrap for the search to drop to a new row. ========================================================================== */ @media (min-width: 769px) and (max-width: 1024px) { .nav, .nav-inner { flex-wrap: wrap !important; row-gap: 8px !important; } .nav { padding: 10px 24px !important; height: auto !important; min-height: 64px; } /* Search drops to its own full-width row below the rest. */ .nav-center { flex: 0 0 100% !important; order: 99 !important; margin: 0 !important; } .nav-search { box-sizing: border-box !important; } .logo { flex-shrink: 0 !important; white-space: nowrap !important; } .nav-left { gap: 20px !important; flex-shrink: 0 !important; } .nav-links { gap: 18px !important; flex-shrink: 0 !important; } .nav-right { flex-shrink: 0 !important; gap: 10px !important; } /* Shrink the signed-out auth buttons so "Sign in + Create account" fits inline with nav-links on row 1 instead of wrapping to row 2. Signed-in users already see only the avatar circle here via the inline @media(<=1100px) user-menu collapse, so they're unaffected. */ .nav-right .btn-ghost, .nav-right .btn-primary { padding: 8px 14px !important; font-size: 13px !important; min-height: 40px !important; display: inline-flex !important; align-items: center !important; } .nav-hamburger { display: none !important; } /* Tablet tap targets — iPad / large-tablet touch needs the same 44pt standard as phones. Bumping search to 44, ensuring each nav-link has enough vertical padding to clear ~40px, and giving the signed-in avatar a 44x44 hit area centered on its 36px circle. */ .nav-search { height: 44px !important; } .nav-links a { padding: 10px 0 !important; display: inline-flex !important; align-items: center !important; } .user-menu { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .user-menu .user-avatar { width: 36px !important; height: 36px !important; } /* Reorder detail-page cards at tablet just like mobile (see ≤768px block): lift the .detail-main and .detail-sidebar children into the .detail-page grid via display:contents, then assign order so Customer Reviews lands at the bottom under "Provided by". Inline @media(<=1024px) blocks on the detail pages already collapse .detail-page to a single column at this width, so its children stack in `order` value. */ .detail-main, .detail-sidebar { display: contents !important; } #pricingCard { order: 3 !important; } #detailsCard { order: 4 !important; } #supplierMiniCard { order: 5 !important; } #reviewsCard { order: 6 !important; } } /* ========================================================================== Mobile (≤ 768px) — phones AND narrow tablets / browser windows. Originally scoped to 480px, but that left an awkward 481-768px zone where the homepage's existing tablet rules half-kicked in. Single breakpoint means a clean direct transition from desktop layout to mobile layout. ========================================================================== */ @media (max-width: 768px) { /* Kill horizontal scroll caused by elements with width:calc(100% - 48px) etc. */ html, body { overflow-x: hidden !important; } /* --- NAV --- Mobile order across two rows (Amazon-style): Row 1: [hamburger] [logo] ............ [Sign in OR avatar] Row 2: [ search input ] nav-inner is flex-wrap so nav-center pushes to a new line. Hamburger uses order:-1 to jump ahead of the logo within nav-left. Auth area trims: signed-out shows only "Sign in" (drawer covers Create account); signed-in shows only the avatar circle. */ /* Bumped nav min-height + padding so 44px tap targets (iOS HIG / Apple Human Interface Guidelines) and 48dp targets (Material) sit comfortably. 56 -> 60 gives breathing room above/below interactive elements. */ .nav { padding: 8px 16px !important; height: auto !important; min-height: 60px; flex-wrap: wrap !important; row-gap: 8px !important; } .nav-inner { flex-wrap: wrap !important; row-gap: 8px !important; padding-bottom: 4px; } .nav-center { display: flex !important; flex-basis: 100% !important; order: 99 !important; margin: 0 !important; align-items: center; } .nav-search { height: 44px !important; font-size: 14px !important; } .nav-lang { display: none !important; } .nav-links { display: none !important; } .nav-search-wrapper { display: none !important; } /* Hamburger: 44x44 tap target per iOS HIG. SVG inside scales to 24px. */ .nav-hamburger { display: flex !important; order: -1 !important; margin-right: 4px; width: 44px !important; height: 44px !important; padding: 10px !important; } .nav-hamburger svg { width: 24px !important; height: 24px !important; } .nav-left { gap: 8px !important; } .nav-right { gap: 0 !important; } /* Signed-out: hide "Create account" (drawer has it). Keep "Sign in". min-height 44 ensures the link itself is tappable. */ #authArea > div .btn-primary { display: none !important; } #authArea > div { gap: 0 !important; } #authArea .btn-ghost { padding: 10px 14px !important; font-size: 14px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; } /* Signed-in: shrink user-menu to just the avatar circle. Avatar bumped to 36px (standard mobile avatar size) and centered in a 44px tap area. */ .user-menu { font-size: 0 !important; gap: 0 !important; padding: 0 !important; min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; } .user-menu .user-avatar { font-size: 14px !important; width: 36px !important; height: 36px !important; } .user-menu .user-menu-name { display: none !important; } .user-menu > svg.chevron { display: none !important; } /* Logo bumped to standard mobile sizing: 32px icon (was 26), 16px text (was 15). Matches what Amazon / Stripe / most mobile marketplaces use. */ .logo { font-size: 16px !important; } .logo-icon { width: 32px !important; height: 32px !important; } .logo-icon svg { width: 18px !important; height: 18px !important; } /* Drawer slides from the LEFT to match hamburger position, with a smooth slide-in animation. The default page CSS toggles via display:none/block which can't animate, so we keep the drawer always-rendered (display:block) and use visibility + transform for the open/close state instead. */ .mobile-drawer { display: block !important; visibility: hidden; background: rgba(15,23,43,0) !important; pointer-events: none; transition: background 0.25s ease, visibility 0s linear 0.28s; } .mobile-drawer.active { visibility: visible; background: rgba(15,23,43,0.5) !important; pointer-events: auto; transition: background 0.25s ease, visibility 0s linear 0s; } .mobile-drawer-content { right: auto !important; left: 0 !important; box-shadow: 4px 0 20px rgba(0,0,0,0.15) !important; transform: translateX(-100%); transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1); } .mobile-drawer.active .mobile-drawer-content { transform: translateX(0); } /* --- COMMON PAGE CONTAINERS --- */ .page-body, .detail-page, .page-layout, .legal-wrap, .main-grid, .messages-layout, .results, .tabs, .tab-bar { padding-left: 16px !important; padding-right: 16px !important; } /* tab-bar-inner sits inside .tab-bar; its parent already gives 16px padding so no padding here, otherwise we'd double up to 32px. */ .tab-bar-inner { padding-left: 0 !important; padding-right: 0 !important; } /* Listing pages — first tab loses its internal left padding so the "Suppliers" text aligns to the same 16px column as the hamburger above. */ .tab-bar .tab:first-child, .tab-bar-inner .tab:first-child { padding-left: 0 !important; } /* Listing pages results-bar — hidden entirely on mobile. Sort lives in the filter drawer now (under the "Filters" pill); count is non-essential on small screens. */ .results-bar { display: none !important; } /* Quick-filter pills — horizontal scrollable strip (Amazon-style) so they fit a single row regardless of how many pills there are. Edge-to-edge so pills can scroll past the section's 16px padding. */ .quick-filters { flex-wrap: nowrap !important; overflow-x: auto !important; scrollbar-width: none !important; -webkit-overflow-scrolling: touch !important; margin: 0 -16px 16px !important; padding: 0 16px !important; } .quick-filters::-webkit-scrollbar { display: none !important; } .quick-filter { flex-shrink: 0 !important; } /* Hide the floating filter FAB on mobile — the "Filters" pill at top now opens the same drawer, so the FAB is redundant. */ .filters-fab { display: none !important; } /* --- HOMEPAGE HERO --- Full viewport height on phones (minus 56px sticky nav and 24px combined vertical margin), keeping the desktop-style white wrap on all 4 sides. Content (title, search, tags) is vertically centered via flex. Background shifted toward the right so the figures land in view. */ .hero { padding: 32px 16px !important; margin: 0 16px 16px !important; width: auto !important; border-radius: 16px !important; min-height: calc(100vh - 56px - 16px) !important; min-height: calc(100dvh - 56px - 16px) !important; display: flex !important; flex-direction: column !important; justify-content: center !important; background-position: 90% center !important; } /* Uniform dark overlay (slightly darker top, lighter bottom) so text stays readable across the whole hero regardless of where the figure lands. */ .hero::before { background: linear-gradient(180deg, rgba(15,23,43,0.82) 0%, rgba(15,23,43,0.72) 100%) !important; } .hero h1 { font-size: 38px !important; line-height: 1.05 !important; letter-spacing: -1px !important; } .hero p { font-size: 15px !important; } .hero-content { max-width: none !important; } /* Single-row search: keep input + button side by side, swap "Search" text for a magnifying glass icon to save space. */ .hero-search { flex-direction: row !important; gap: 0 !important; padding: 6px !important; max-width: none !important; } .hero-search-field { flex: 1; min-width: 0; } .hero-search-field input { font-size: 14px !important; padding-left: 36px !important; } .hero-search-field svg { left: 10px !important; } .hero-search .btn-primary, .hero-search-btn { width: auto !important; min-width: 44px; height: 44px !important; padding: 0 12px !important; flex-shrink: 0; } .hero-search-btn-label { display: none !important; } .hero-search-btn-icon { display: inline-block !important; } .hero-tags { flex-direction: column; align-items: flex-start; gap: 8px; } /* --- HOMEPAGE / SHARED SECTIONS --- */ .section, .section-alt, .how-section, .cta-section, .newsletter { padding-left: 16px !important; padding-right: 16px !important; width: auto; margin-left: 0; margin-right: 0; } /* All section-level h2s at the same mobile size for consistency. Covers .section-title (Suppliers), .section-title-sm (Products / Services), and .how-content h2 ("Connect with the right suppliers, faster"). */ .section-title, .section-title-sm, .how-content h2 { font-size: 26px !important; line-height: 1.2 !important; letter-spacing: -0.5px !important; } .section-header, .recommended-header { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } .section-link { font-size: 13px; } /* CTA — desktop-style white wrap (16px horizontal margin matches the section padding so all edges line up vertically). */ .cta-section { padding: 48px 20px !important; margin: 32px 16px 0 !important; width: auto !important; border-radius: 16px !important; } .cta-section h2 { font-size: 26px !important; line-height: 1.2 !important; } .cta-section p { font-size: 14px !important; } .cta-buttons { flex-direction: column !important; gap: 12px !important; } .cta-buttons button, .cta-btn-white, .cta-btn-outline { width: 100% !important; } /* Newsletter — same desktop-style white wrap */ .newsletter { padding: 28px 20px !important; margin: 16px !important; width: auto !important; border-radius: 16px !important; flex-direction: column !important; align-items: stretch !important; gap: 16px !important; } .newsletter-form { flex-direction: column; gap: 8px; } .newsletter-form input, .newsletter-form button { width: 100%; } /* How-it-works (homepage) — grid lives on .how-inner now (wraps .how-content + .how-image so the section can have matching carousel-width padding). */ .how-section { padding: 48px 16px !important; } .how-inner { grid-template-columns: 1fr !important; gap: 24px !important; } .how-image { aspect-ratio: 4 / 3; } /* --- ALL MULTI-COLUMN GRIDS → SINGLE COLUMN --- */ .value-props, .card-grid, .product-grid, .stat-grid, .stat-grid-3, .info-grid-2, .info-grid-3, .related-grid, .spec-grid, .certs-row, .facility-grid { grid-template-columns: 1fr !important; gap: 16px; } /* Categories stay 2-up so icons aren't oversized */ .cat-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px; } /* Galleries stay 2-up since they're square thumbnails */ .gallery-grid, .gallery-preview-grid, .gallery-manager { grid-template-columns: repeat(2, 1fr) !important; gap: 8px; } /* Carousel cards — fixed widths sized so the next card peeks beyond the section padding (16px each side = 343px usable on iPhone SE). Supplier/service: 300px → ~23px peek on iPhone SE, ~2 cards on tablets. Product: 180px → ~1.8 cards on iPhone SE (catalog feel), ~4 on tablets. */ .supplier-track > *, .service-track > * { flex: 0 0 300px !important; } .product-track > * { flex: 0 0 180px !important; } /* Zero out the carousel track's left/right padding on mobile so the first card lines up flush with its section header (16px from screen edge). */ .carousel-track { padding-left: 0 !important; padding-right: 0 !important; } /* Hide carousel edge-fade gradients on mobile — they overlap card content. The peek of the next card is the scrollability hint. */ .carousel-fade-left, .carousel-fade-right { display: none !important; } /* Hide carousel arrow buttons on mobile — touch swipe is the affordance, and the buttons absolute-positioned at left/right -20px stick out past the section's 16px padding and look weird on phone. */ .carousel-btn { display: none !important; } /* --- AUTH CARDS (sign-in / sign-up / forgot / reset) --- Scope to body > .card so this only catches the auth pages, where the card sits directly under . Nested .card elements on profile / listing / detail pages must NOT be capped to 460px. */ body > .card, .auth-card { width: calc(100vw - 32px) !important; max-width: 460px !important; padding: 28px 20px !important; margin: 16px auto !important; } /* --- LISTING CARDS — defensive width to keep cards inside viewport --- */ .main-content, .suppliers-list, .products-list, .services-list { min-width: 0 !important; max-width: 100% !important; } .supplier-list-card, .product-list-card, .service-list-card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } /* Force inner card body to honor card width — kills any 208px avatar column or 150px actions min-width inherited from desktop styles. */ .supplier-list-body, .product-list-body, .service-list-body { grid-template-columns: 1fr !important; padding: 12px !important; box-sizing: border-box !important; width: 100% !important; } /* --- FILTER DRAWER (mobile) — close button + apply bar --- */ .filter-heading-actions { display: flex !important; align-items: center !important; gap: 12px !important; } .filter-close { display: flex !important; align-items: center; justify-content: center; width: 32px; height: 32px; background: var(--gray-100); border: none; border-radius: 50%; color: var(--navy); cursor: pointer; padding: 0; } .filter-close:hover { background: var(--gray-200); } .filter-apply-bar { position: sticky !important; bottom: 0 !important; left: 0 !important; right: 0 !important; background: var(--white); padding: 12px 16px !important; margin: 16px -16px -16px !important; border-top: 1px solid var(--gray-200); z-index: 5; display: block !important; } .filter-apply { width: 100%; height: 48px; background: var(--orange); color: var(--white); border: none; border-radius: var(--radius-md, 8px); font-size: 15px; font-weight: 600; cursor: pointer; font-family: inherit; } .filter-apply:hover { background: var(--orange-hover); } /* --- SUPPLIER LISTING CARD BODY --- */ .supplier-list-card { margin-bottom: 16px; } .supplier-list-banner { height: 180px; } .supplier-list-body { grid-template-columns: 1fr !important; gap: 12px; padding: 12px; } .supplier-list-avatar { width: 96px; height: 96px; margin-top: -36px; } /* Action buttons stack vertically and fill the card width on mobile — the desktop "min-width: 150px" + flex-end was causing card overflow. */ .supplier-list-actions, .service-list-actions, .product-list-actions { min-width: 0 !important; width: 100% !important; flex-direction: column !important; align-items: stretch !important; } .supplier-list-actions .btn-primary-sm, .service-list-actions .btn-primary-sm, .product-list-actions .btn-primary-sm { width: 100% !important; text-align: center !important; } /* Center the heart-icon "Save to Compare" row under the button. */ .supplier-list-actions .save-link { justify-content: center !important; } /* PRODUCT + SERVICE listing cards — built with anonymous divs + inline styles, so they need structural selectors. Desktop has a 3-column grid (image 180px | content 1fr | actions auto) that squashes on mobile; stack everything to a single column. */ .product-list-card, .service-list-card { grid-template-columns: 1fr !important; padding: 12px !important; gap: 12px !important; } /* First child = image wrapper (was 180×180 inline). Full-width square so the image keeps a consistent 1:1 aspect ratio when the card stacks on mobile. */ .product-list-card > div:nth-child(1), .service-list-card > div:nth-child(1) { width: 100% !important; height: auto !important; aspect-ratio: 1 / 1 !important; } /* Last child = actions row. Stack vertically, centered, full-width button. */ .product-list-card > div:last-child, .service-list-card > div:last-child { flex-direction: column !important; align-items: stretch !important; gap: 8px !important; } .product-list-card > div:last-child button, .service-list-card > div:last-child button { width: 100% !important; text-align: center !important; } /* "Save to Compare" heart-icon row — center the inner flex content. */ .product-list-card > div:last-child > span[data-save-type], .service-list-card > div:last-child > span[data-save-type] { justify-content: center !important; } /* --- BUYER SAVED CARDS --- */ .saved-card { flex-direction: column !important; align-items: stretch !important; } /* "Can't find what you need?" card at the bottom of listing pages — match the listing cards above it (12px padding, 16px radius). Stack the text and button on mobile so the button doesn't get squeezed. */ .sourcing-cta { padding: 12px !important; border-radius: 16px !important; flex-direction: column !important; align-items: stretch !important; gap: 12px !important; } .sourcing-cta button { width: 100%; } /* --- PRODUCT / SERVICE DETAIL (06 / 07) --- */ /* Back link should align with the 16px page padding instead of the 48px desktop margin so it sits flush at the left edge on mobile. */ .back-link { margin: 16px 16px 0 !important; } /* Reorder cards on mobile. Source order on the page is: hero → gallery → details → reviews → pricing → sold-by We want mobile order to be: hero → gallery → pricing → details → sold-by → reviews "Lift" the children of .detail-main and .detail-sidebar into .detail-page (display: contents) so they all become direct grid items, then assign explicit `order` values to slot Pricing after Gallery and Reviews last. */ .detail-main, .detail-sidebar { display: contents !important; } #pricingCard { order: 3 !important; } #detailsCard { order: 4 !important; } #supplierMiniCard { order: 5 !important; } #reviewsCard { order: 6 !important; } .main-image { height: 280px !important; margin-bottom: 12px !important; } /* Hero card vertical rhythm: tight, consistent gaps between pill / title / description so the card feels unified instead of scattered. */ .detail-card { position: relative; } .pill-row { padding-right: 48px !important; margin-bottom: 8px !important; } .hero-title-row { flex-direction: column !important; align-items: stretch !important; gap: 0 !important; margin-bottom: 6px !important; padding-right: 48px !important; } .hero-title-row h1 { font-size: 22px !important; line-height: 1.25 !important; } .hero-actions { position: absolute !important; top: 16px !important; right: 16px !important; } .hero-description { font-size: 14px !important; line-height: 1.6 !important; margin-top: 0 !important; } /* Mobile gallery — replace the desktop main-image + thumb-column layout with a horizontally-scrolling carousel of full-card-width slides plus a dot indicator below. The desktop .main-image and .thumb-strip are hidden; .gallery-slides and .gallery-dots take over. */ .product-gallery { display: block !important; padding: 16px !important; } .product-gallery .main-image, .product-gallery .thumb-column, .product-gallery .thumb-strip { display: none !important; } .gallery-slides { display: flex !important; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; border-radius: 10px; background: var(--gray-100); } .gallery-slides::-webkit-scrollbar { display: none; } .gallery-slide { flex: 0 0 100%; aspect-ratio: 1 / 1; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gallery-slide img { max-width: 100%; max-height: 100%; object-fit: contain; } .gallery-slide svg { width: 80px; height: 80px; color: var(--gray-400); } .gallery-dots { display: flex !important; justify-content: center; gap: 6px; margin-top: 12px; } .gallery-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gray-300); border: none; padding: 0; cursor: pointer; transition: background 0.15s; } .gallery-dot.active { background: var(--gray-700); } /* --- SUPPLIER PROFILE DETAIL (05) --- Show more of the banner and tame the company-header card so the name doesn't word-break into 3 lines and the rating pill doesn't squash. */ /* Hide breadcrumb on mobile — back button + nav already cover navigation. */ .breadcrumb-bar { display: none !important; } .hero-banner { height: 200px !important; padding: 16px !important; } /* Card sits BELOW the banner (no overlap) just like desktop. */ .company-header-wrap { margin-top: 16px !important; padding: 0 16px !important; } .company-header { padding: 16px !important; gap: 12px !important; align-items: flex-start !important; } /* Detail page cards — page-level padding only (cards have their own padding via .tab-content / inline styles). Avoid doubling-up. */ .detail-page { gap: 16px !important; padding: 16px !important; } .detail-main { gap: 16px !important; padding: 0 !important; } /* Detail-card and sidebar-card visuals match the listing cards on mobile: 12px inner padding + 16px border-radius, so spacing/rounding feels consistent across product/service detail and the listing pages. */ .detail-card, .sidebar-card { padding: 12px !important; border-radius: 16px !important; } /* The tabs card (on 05) needs zero outer padding so .detail-tabs touches the card edges; .tab-content provides the inner padding. */ .detail-card:has(> .detail-tabs) { padding: 0 !important; } #supplierPhotosCard { padding: 12px !important; } /* Tabs centered + evenly spaced (override page's "flex: 0 0 auto" mobile rule). */ .detail-tabs { overflow-x: visible !important; } .detail-tab { flex: 1 !important; padding: 14px 8px !important; text-align: center !important; } /* Inner card content padding — desktop's 28px is too much on phone. */ .tab-content { padding: 16px !important; } .company-avatar { width: 56px !important; height: 56px !important; } .company-info { width: 100% !important; } .company-name-row { flex-wrap: wrap !important; gap: 8px !important; align-items: center !important; } .company-name { font-size: 20px !important; line-height: 1.2 !important; word-break: normal !important; /* Allow shrink so verified-check stays inline alongside name. */ flex: 0 1 auto !important; min-width: 0 !important; } /* Push the rating chip to its own line below name+verified */ .rating-pill { flex: 1 1 100% !important; font-size: 12px !important; padding: 0 !important; white-space: nowrap !important; } .company-desc { font-size: 13px !important; line-height: 1.5 !important; } /* --- FOOTER --- */ .footer { padding: 32px 16px 16px; } .footer-grid { grid-template-columns: 1fr !important; gap: 24px; } .footer-bottom { flex-direction: column; align-items: flex-start; gap: 12px; } .footer-bottom-left { flex-wrap: wrap; } /* --- BACK TO TOP --- */ .back-to-top { margin: 24px 16px 0 !important; } /* --- LEGAL PAGES (privacy / terms / cookies) --- */ .legal-wrap { padding: 32px 16px !important; gap: 16px; } .legal-toc { position: static !important; max-height: none !important; } .toc-list { display: flex; flex-wrap: wrap; gap: 4px; padding: 8px; border: 1px solid var(--gray-200); border-radius: 12px; background: var(--gray-50); border-left: none; } .toc-list a { padding: 6px 12px; font-size: 12px; border-left: none !important; border-radius: 6px; } .termly-wrap { padding: 0 !important; } } /* ========================================================================== Desktop only (≥ 769px) Hide the quick-filter pill row — the left filter sidebar is visible at this width and the pills become redundant clutter. ========================================================================== */ @media (min-width: 769px) { .quick-filters { display: none !important; } } /* Tablet (600-1023px) used to force product + service cards into a 2-up stacked-card grid (image on top, content below). The 1:1 aspect-ratio image looked enormous at viewport widths in the 700-1000px range, even inside a 2-up grid. Killed in favor of the desktop horizontal layout (image-left | content-middle | actions-right) at every width ≥769px; the mobile (≤768px) rules already stack cleanly. */