/* smartbusiness-desktop-v2.css — WO-SB-V3-FULL-PARITY S1 (chief c629; upgrades WO-SB-DESKTOP-BOUNCE c360). * * What this file does, in 3 lines: * The v3 responsive marketplace desktop skin for Smart Business — the dense multi-column grid that makes * the live page match the v3 standalone on tablet/PC. UNCONDITIONAL (chief c629 UN-FLAGGED sb_desktop_v2 — * full parity cannot hide behind a flag; the flag row is removed from the catalog in the same commit). * * PIXEL SOURCE = the v3 authority ≥768/≥1024/≥1400 blocks, value-for-value: * update/giobiz new design for smart business and store/DESIGN 07162026/giobiz-handoff/Smart Business Live v3.html * Responsive grid: ≤767 → 2 cols (base, in smartbusiness.html) · ≥768 → 3 · ≥1024 → 5 · ≥1400 → 6. * * EVERY rule keys on html.sb-v2-full — the class the flash-killer stamps PRE-PAINT (smartbusiness.html ), * so desktop renders the wide skin from first paint (no flag round-trip, no swap flash). Phones (<768px) are * untouched: there is NO rule below 768px here (grep-provable). Additive within the v2 skin. * (Legacy .sb-* dark shell desktop rules were dropped here — the legacy path is being deleted in S5.) */ /* ═══════════ ≥768 tablet — 3-column grid + 2-up hero (v3) ═══════════ */ @media (min-width: 768px) { html.sb-v2-full .mk-grid { grid-template-columns: repeat(3, 1fr); gap: 12px; } /* S5 (chief c641): the hero banners go 2-up on tablet (v3 flex-basis) — the single-slide carousel was the one structural gap the eyewitness found. Auto-rotate stays a harmless no-op once they all fit. */ /* grow=1 (chief c665): with a full set the banners keep their 50% basis; with FEWER (e.g. no deal banner) they GROW to fill the row so a 2-banner set never leaves an empty third that reads as a missing card. */ html.sb-v2-full .mk-slide { flex: 1 0 calc(50% - 5px); height: 152px; } } /* ═══════════ ≥1024 desktop — 5-column bounded marketplace (v3 value-for-value) ═══════════ */ @media (min-width: 1024px) { /* broad centred wrap — v3 .wrap max-width:1220 (overrides the 560px phone cap in smartbusiness.html) */ html.sb-v2-full .sb-wrap { max-width: 1220px; box-shadow: none; } /* header: roomy 24px gutters, bounded search, cart to the far right */ html.sb-v2-full .mk-header { padding-left: 24px; padding-right: 24px; } html.sb-v2-full .mk-header__row { gap: 12px; } /* S4a (v3): swap the phone back-arrow for the [logo] Smart Business by GioBiz row on desktop */ html.sb-v2-full .mk-back { display: none; } html.sb-v2-full .mk-logo { display: flex; margin-right: 18px; } html.sb-v2-full .mk-loc { padding: 10px 24px; font-size: 12.5px; } html.sb-v2-full .mk-perks { padding: 6px 24px 14px; } /* S4c (v3) — wide gutters on desktop */ /* S5 (chief c641): DESKTOP 3-UP HERO — all 3 banners side-by-side at ≥1024 (v3), closing the eyewitness's one structural gap (live was a single-slide carousel at every width). */ html.sb-v2-full .mk-hero { padding: 16px 24px 4px; } /* grow=1 (chief c665): 3 banners keep 33.33% each; 2 banners GROW to 50% each and fill the row (no empty third slot / "missing card"); 1 banner fills full width. Absence is always honest AND never looks broken. */ html.sb-v2-full .mk-slide { flex: 1 0 calc(33.33% - 7px); height: 172px; } html.sb-v2-full .mk-slide h3 { font-size: 22px; } html.sb-v2-full .mk-search { max-width: 580px; height: 44px; } html.sb-v2-full .mk-search input { font-size: 13.5px; } html.sb-v2-full .mk-search b { height: 32px; padding: 0 18px; } html.sb-v2-full .mk-cart { margin-left: auto; width: 52px; height: 52px; font-size: 29px; } html.sb-v2-full .mk-tabs { gap: 28px; margin-top: 12px; } html.sb-v2-full .mk-tab { font-size: 13.5px; } /* category ICON row: whole row visible (no scroller), roomier icons */ html.sb-v2-full .mk-cats { padding: 16px 24px 15px; gap: 14px; justify-content: flex-start; overflow-x: visible; flex-wrap: wrap; } html.sb-v2-full .mk-cat { width: 88px; } html.sb-v2-full .mk-cat i { width: 54px; height: 54px; font-size: 24px; } html.sb-v2-full .mk-cat span { font-size: 11px; } /* flash-deals strip: card look with 24px side margins + bigger deal tiles (v3) */ html.sb-v2-full .mk-flash { border-radius: 18px; margin: 16px 24px 0; padding: 16px 4px 18px; } html.sb-v2-full .mk-flash__head { padding: 0 18px 13px; } html.sb-v2-full .mk-flash__head h2 { font-size: 17px; } html.sb-v2-full .mk-flash__row { padding: 0 18px; } html.sb-v2-full .mk-flashcard, html.sb-v2-full .mk-flashcard i { width: 132px; } html.sb-v2-full .mk-flashcard i { height: 132px; font-size: 46px; } html.sb-v2-full .mk-flashcard .p { font-size: 14px; } /* section bar aligns to the wide gutters */ html.sb-v2-full .mk-secbar { padding: 24px 24px 13px; } html.sb-v2-full .mk-secbar h2 { font-size: 18px; } html.sb-v2-full .mk-secbar span { font-size: 12px; } /* THE dense product grid: 5 bounded columns, gap 14 (v3 value-for-value) */ html.sb-v2-full .mk-grid { grid-template-columns: repeat(5, 1fr); gap: 14px; padding: 0 24px 22px; } html.sb-v2-full .mk-card { border-radius: 16px; } html.sb-v2-full .mk-card__body { padding: 10px 12px 12px; } html.sb-v2-full .mk-card__name { font-size: 12.5px; min-height: 34px; } html.sb-v2-full .mk-card__price { font-size: 16.5px; } html.sb-v2-full .mk-card__meta { font-size: 10.5px; } html.sb-v2-full .mk-card__loc { font-size: 10px; } /* "Load more" reads as a centred button, not a full-bleed bar */ html.sb-v2-full .sb-more { max-width: 340px; margin: 2px auto 30px; display: block; } /* the phone bottom tab-bar is hidden on desktop (v3 parity — nav lives in the header + category row) */ html.sb-v2-full .mk-nav { display: none; } /* G1 (chief c562): the cart panel becomes a 420px RIGHT-SIDE DRAWER + shadow on desktop */ html.sb-v2-full #sbc-page.sbc-page { inset: 0 0 0 auto; left: auto; margin: 0; width: 420px; max-width: 420px; box-shadow: -16px 0 48px -12px rgba(3,12,8,.45); border-left: 1px solid #e5e9e7; } /* (G2 card hover lift moved to the base .mk-card in smartbusiness.html — S2 gives it the v3 values (translateY(-3px) + v3 shadow, transition .2s) at ALL widths, so no desktop-only override is needed.) */ } /* ═══════════ ≥1400 wide desktop — 6-column grid (v3) ═══════════ */ @media (min-width: 1400px) { html.sb-v2-full .mk-grid { grid-template-columns: repeat(6, 1fr); } }