/* ================================================================ Scrapo mobile app shell (v3, clean) - native-app feel on phones. Brand #128c37 | ink #1c2b21 | canvas #f4f6f4 ================================================================ */ @media screen and (max-width: 767px){ /* ---- global ---- */ html body{font-size:15px;-webkit-text-size-adjust:100%;background:#f4f6f4;} html body .wrapper_margin{margin:0!important;padding:8px 10px 96px!important;width:auto!important;min-width:0!important;} html body .wrapper2{width:auto!important;min-width:0!important;max-width:100%!important;padding:0!important;} img{max-width:100%;height:auto;} /* ---- top header: keep it pinned & sane ---- */ html body .header-main{position:sticky!important;top:0;z-index:1300;transform:none!important;background:#fff;display:block!important;width:100%!important;} html body #searchWidget,html body .siteWrapper{transform:none!important;} /* ---- own bottom tab bar ---- */ html body .m-tabbar{position:fixed;left:0;right:0;bottom:0;z-index:1400;display:flex;background:#fff; border-top:1px solid #e2e8e2;box-shadow:0 -2px 12px rgba(0,0,0,.07); padding:6px 2px calc(8px + env(safe-area-inset-bottom));} html body .m-tabbar .m-tab{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; color:#5b6b62;text-decoration:none;font-size:11px;line-height:1;} html body .m-tabbar .m-tab svg{width:23px;height:23px;} html body .m-tabbar .m-tab.is-active{color:#128c37;font-weight:600;} /* ---- product grid: exactly 2 per row ---- */ html body .product-grid{display:flex!important;flex-wrap:wrap;gap:10px;width:auto!important;margin:0!important;} html body .product-grid .grid-item{width:calc(50% - 5px)!important;max-width:calc(50% - 5px)!important; margin:0!important;float:none!important;border-radius:12px;overflow:hidden;background:#fff; box-shadow:0 1px 4px rgba(0,0,0,.07);box-sizing:border-box;} html body .product-grid .grid-item img{width:100%!important;height:120px!important;object-fit:cover;border-radius:0!important;} html body .product-grid .grid-item .grid_product_header{font-size:14px!important;line-height:1.3;} html body .product-grid .grid-item .product_footer{font-size:12px!important;} /* ---- offers meta row ---- */ html body .product-filter_text{display:block;font-size:13px;padding:4px 0;} html body .product-filter-selects{display:flex;gap:10px;align-items:center;font-size:13px;flex-wrap:wrap;} /* ---- filters: swipeable chips ---- */ html body .filters,html body .filter-block,html body .filters-line{display:flex;overflow-x:auto;white-space:nowrap; gap:8px;padding:8px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:none;} html body .filters::-webkit-scrollbar{display:none;} /* ---- buttons: tappable ---- */ html body .button,html body button.button,html body .button_std,html body .btn, html body button[type=submit],html body .solid_button_cyan{min-height:46px;font-size:16px!important; border-radius:10px;padding-top:12px;padding-bottom:12px;box-sizing:border-box;} html body .button.with-icon.custom-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;} /* ---- product view ---- */ html body .product-view .price,html body .product_price{font-size:22px!important;font-weight:700;} html body .product-view h1,html body .product-title{font-size:20px!important;line-height:1.25;} html body .details-table td,html body .product-details td{font-size:14px!important;padding:10px 0!important;} /* ---- profile ---- */ html body .profile-blc .wrapper2>div,html body .profile-left,html body .profile-right{width:100%!important;float:none!important;} /* ---- payment / Stripe modal ---- */ html body .modal .row .col.s2,html body .modal .row .col.s3,html body .modal .row .col.s4, html body .modal .row .col.s5,html body .modal .row .col.s6,html body .modal .row .col.s12{ width:100%!important;margin-left:0!important;float:none!important;} html body .modal{width:calc(100vw - 16px)!important;max-width:calc(100vw - 16px)!important; max-height:92vh!important;border-radius:14px;top:4vh!important;} html body .modal .modal-content{padding:18px 16px!important;max-height:calc(92vh - 76px);overflow-y:auto;} html body .modal .modal-content h4,html body .modal .modal-header{font-size:19px!important;line-height:1.3;} html body .modal input,html body .modal .input-field input, html body .modal #card-number,html body .modal #card-expiry-element,html body .modal #card-cvc-element{ font-size:16px!important;min-height:46px;box-sizing:border-box;width:100%!important;} html body .modal label{font-size:13px!important;display:block;} html body .modal .pf.pf-credit-card,html body #brand-icon{display:none!important;} html body .modal .modal-footer{padding:12px 16px calc(12px + env(safe-area-inset-bottom))!important;} html body .modal .modal-footer .button{width:100%;display:block;} /* ---- generic stacks & footer ---- */ html body .home-page-blc .left-column,html body .home-page-blc .right-column{width:100%!important;float:none!important;} html body .footer_main{padding-bottom:110px;} html body .footer_main a{font-size:14px;line-height:2.2;} html body .fixed-bottom.cookies{bottom:calc(66px + env(safe-area-inset-bottom))!important;} /* ---- CHAT: native messaging feel ---- */ /* dialog LIST (inbox) */ html body .message_dialogs_block_item,html body .message_item_dialog-wrapper{padding:2px 0;} html body .message_dialog_pofile,html body .message_block_name{align-items:center;} html body .message_dialog_text_name{font-size:15px!important;font-weight:600;} html body .last-message,html body .message_dialog_text{font-size:13px!important;color:#66756c; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:70vw;} /* two-pane -> single pane on phone: show whichever the controller rendered full-width */ html body .message_page_block_menu,html body .messages_parent_block{width:100%!important;float:none!important;border:0!important;} html body .message_page_block{width:100%!important;float:none!important;} /* THREAD: message stream fills the screen, composer sticks to bottom */ html body .messages_parent_block-content{padding:10px 12px 84px!important;background:#eef2ee;min-height:60vh;} html body .message_item_dialog{display:flex;margin:6px 0;} html body .message_item_dialog.me{justify-content:flex-end;} html body .message_item_dialog.opponent{justify-content:flex-start;} html body .message_item_dialog .message_item_dialog-wrapper{display:flex;align-items:flex-end;gap:6px;max-width:82%;} html body .message_item_dialog.me .message_item_dialog-wrapper{flex-direction:row-reverse;} /* the bubble itself (message body sits in .message-cloud / types/*) */ html body .message_item_dialog .message-cloud, html body .message_item_dialog .message_item_dialog-inner{background:#fff;border-radius:16px; padding:9px 13px!important;box-shadow:0 1px 2px rgba(0,0,0,.09);font-size:15px;line-height:1.35; word-break:break-word;} html body .message_item_dialog.me .message-cloud, html body .message_item_dialog.me .message_item_dialog-inner{background:#128c37;color:#fff;} html body .message_item_dialog.me .message_item_dialog-inner a{color:#dff5e6;} /* avatars small; hide my own avatar (WhatsApp-style) */ html body .message_item_dialog .profile_link_block img, html body .message_item_dialog .message_dialog_pofile img{width:28px;height:28px;border-radius:50%;object-fit:cover;} html body .message_item_dialog.me .profile_link_block{display:none;} html body .side_actions_date,html body .message_header_date{font-size:11px!important;color:#9aa8a0;} html body .message_item_dialog.me .side_actions_date{text-align:right;} html body .seen_block{font-size:11px;color:#9aa8a0;text-align:right;} /* sticky composer */ html body .message_textarea_block,html body .messages-text-form{position:fixed;left:0;right:0;bottom:0;z-index:1350; background:#fff;border-top:1px solid #e2e8e2;padding:8px 10px calc(8px + env(safe-area-inset-bottom))!important; display:flex;align-items:flex-end;gap:8px;margin:0!important;} html body .message_textarea_block-inner{flex:1;margin:0!important;} html body .message_textarea_block textarea,html body .messages-text-form textarea{width:100%!important; min-height:42px;max-height:120px;font-size:16px;border-radius:21px;border:1px solid #dbe3dc; padding:10px 14px!important;box-sizing:border-box;resize:none;background:#f4f6f4;} html body .send-button,html body .textarea_send_button{min-height:42px;min-width:42px;border-radius:50%; display:flex;align-items:center;justify-content:center;background:#128c37;color:#fff;flex-shrink:0;} /* thread header (product + name) pinned under app header */ html body .messages_parent_block_header{position:sticky;top:0;z-index:2;background:#fff; padding:8px 12px!important;border-bottom:1px solid #e8ede9;font-size:15px;} /* when a thread is open, hide the bottom tab bar so composer owns the bottom */ html body.chat-thread-open .m-tabbar{display:none;} } /* ===================================================================== Scrapo mobile DESIGN pass v5 - component polish (overrides v3 basics) ===================================================================== */ @media screen and (max-width: 767px){ /* ---- FILTER BAR: horizontal pill chips ---- */ html body .filter-inner{display:flex!important;gap:8px;align-items:center;overflow-x:auto; -webkit-overflow-scrolling:touch;scrollbar-width:none;padding:10px 12px!important; background:#fff;border-bottom:1px solid #eef1ee;margin:0!important;} html body .filter-inner::-webkit-scrollbar{display:none;} html body .filter-main-title,html body .filter-item-header{display:inline-flex!important;align-items:center;gap:6px; white-space:nowrap;background:#f1f4f1;border:1px solid #e2e8e2;border-radius:20px; padding:9px 14px!important;font-size:14px!important;font-weight:600;color:#2b3a31;margin:0!important;height:auto!important;} html body .filter-main-title{background:#128c37;border-color:#128c37;color:#fff;} html body .filter-main-title .icon svg,html body .filter-main-title .icon{filter:brightness(0) invert(1);} html body .filter-item{margin:0!important;position:relative;} html body .filter-item-header .caret{border-top-color:#5b6b62;margin-left:2px;} html body .filter-item-header .count{color:#128c37;font-weight:700;} /* dropdown bodies open as a sheet, not squished inline */ html body .filter-item-body{position:fixed!important;left:8px;right:8px;bottom:70px;top:auto!important; max-height:60vh;overflow-y:auto;background:#fff;border-radius:14px;box-shadow:0 8px 40px rgba(0,0,0,.22); padding:12px!important;z-index:1450;} /* ---- META ROW: compact & tidy ---- */ html body .product-filter{background:transparent;padding:6px 12px 2px!important;} html body .product-filter-inner{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;} html body .product-filter_text{font-size:12.5px!important;color:#78877e;padding:0!important;} html body .product-filter-selects{display:flex;align-items:center;gap:6px;font-size:12.5px;} html body .product-filter-selects label{color:#78877e;margin:0;} html body .product-filter-selects .select-field-wrap select{background:#eef2ee;border:1px solid #e2e8e2; border-radius:14px;padding:5px 26px 5px 12px!important;font-size:13px;font-weight:600;color:#128c37;height:auto;} /* ---- PREMIUM CARD: modern gradient + real button ---- */ html body .promo-line{margin:12px 0!important;} html body .promo-line-inner{display:flex!important;align-items:center;gap:12px; background:linear-gradient(120deg,#0f7a33 0%,#123a56 100%);border-radius:16px; padding:18px 16px!important;box-shadow:0 4px 16px rgba(15,58,86,.22);} html body .promo-line-inner-text{flex:1;color:#fff;} html body .promo-line-inner-text p{margin:0;color:#fff!important;} html body .promo-line-inner-text p b{font-size:17px;display:block;margin-bottom:3px;} html body .promo-line-inner-text p:last-child{font-size:13px;opacity:.9;line-height:1.35;} html body .promo-line-inner>a{flex-shrink:0;background:#fff;color:#0f7a33!important;font-weight:700; font-size:13px;text-decoration:none!important;padding:11px 16px;border-radius:22px;white-space:nowrap; box-shadow:0 2px 6px rgba(0,0,0,.12);} /* ---- CHAT: true single pane + back button ---- */ html body.chat-thread-open .message_page_block_menu{display:none!important;} html body:not(.chat-thread-open) .message_page_block{display:none!important;} html body:not(.chat-thread-open) .message_page_block_menu{width:100%!important;float:none!important;} html body .chat-back{display:none;} html body.chat-thread-open .chat-back{display:inline-flex;align-items:center;gap:6px; padding:6px 4px;color:#128c37;font-weight:600;font-size:15px;text-decoration:none;} html body.chat-thread-open .messages_parent_block_header{display:flex;align-items:center;gap:8px;} } /* ===================================================================== v6 - defect fixes from full-site mobile design audit ===================================================================== */ @media screen and (max-width: 767px){ /* ---- no sideways scrolling anywhere ---- */ html{max-width:100vw;overflow-x:hidden;} html body{max-width:100vw;overflow-x:clip;} html body .content-center,html body .header-main-inner{width:100%!important;max-width:100%!important; padding-left:10px;padding-right:10px;box-sizing:border-box;} html body .burger-menu{position:relative!important;float:right;margin-right:4px;} /* ---- FILTER dropdown sheet: fit the screen, Apply reachable ---- */ html body .filter-item-body{width:auto!important;max-width:none!important;min-width:0!important; left:8px!important;right:8px!important;z-index:1460!important;} html body .filter-item-body li label,html body .filter-item-body label{min-height:44px;display:flex; align-items:center;font-size:15px!important;} html body .filter-item-body .button,html body .filter-item-body button{width:100%!important; left:auto!important;position:static!important;margin-top:8px;} /* the decorative "Filters" pill has no action - don't make it look like a button */ html body .filter-main-title{background:transparent;border:0;color:#78877e;font-weight:600;padding-left:2px!important;} html body .filter-main-title .icon svg,html body .filter-main-title .icon{filter:none;} /* bring back search on mobile */ html body form#search-form{display:block!important;} /* ---- product cards: no grey bands, consistent thumbs ---- */ html body .product-grid .grid-item .imgholder{height:150px!important;overflow:hidden;display:block;background:#eef2ee;} html body .product-grid .grid-item .imgholder img{width:100%!important;height:150px!important;object-fit:cover;} /* ---- product view: use the full width ---- */ html body .product-view-inner{padding:0 14px!important;} html body .product-view-inner .button{width:100%!important;} /* ---- forms (Sell / Wanted / profile): stack + real touch targets ---- */ html body .row .col.s2,html body .row .col.s3,html body .row .col.s4, html body .row .col.s5,html body .row .col.s6{width:100%!important;margin-left:0!important;float:none!important;} html body select,html body select.browser-default,html body input[type=text],html body input[type=email], html body input[type=password],html body input[type=number],html body textarea{width:100%!important; min-height:46px!important;font-size:16px!important;box-sizing:border-box;} html body .select-field-wrap{width:100%;} /* TinyMCE: let the toolbar wrap instead of clipping */ html body .mce-toolbar-grp{overflow:visible!important;height:auto!important;} html body .mce-toolbar-grp .mce-btn button{min-width:38px;min-height:38px;} html body .mce-edit-area iframe{min-height:180px;} /* ---- buy-offer header: stop the overlap ---- */ html body .matching-offers_link{position:static!important;display:block;margin:10px 0 0;width:auto!important;} html body .buy-create .button.button-outline-primary{width:100%!important;margin-bottom:8px;} /* ---- BURGER menu: real full-screen sheet ---- */ html body .navigation.mobile-open{position:fixed!important;inset:0!important;left:0!important;right:0!important; top:0!important;bottom:0!important;width:100%!important;height:100%!important;background:#fff!important; z-index:1500!important;padding:14px 12px calc(20px + env(safe-area-inset-bottom))!important;overflow-y:auto;} html body .navigation.mobile-open .navigation-menu_link,html body .navigation.mobile-open li a{ min-height:50px!important;display:flex!important;align-items:center;gap:12px;font-size:16px!important; padding:6px 4px!important;width:100%!important;} html body .navigation.mobile-open ul,html body .navigation.mobile-open .navigation-menu{ width:100%!important;left:0!important;top:0!important;position:static!important;box-shadow:none!important;} html body.menu-open{overflow:hidden!important;} /* ---- notifications dropdown + page ---- */ html body .notifications-dropdown{width:auto!important;max-width:none!important;left:8px!important; right:8px!important;z-index:1460!important;} html body .image-profile{width:52px!important;height:52px!important;border-radius:50%!important;overflow:hidden;} html body .image-profile img,html body .colorful-placeholder{width:52px!important;height:52px!important;} html body .name-span,html body .action-word{width:auto!important;display:inline;font-size:14px!important;} html body .timeline-badge,html body .badge{position:static!important;float:none;font-size:11px;} /* ---- MESSAGES: seller panel flows below, bubbles render correctly ---- */ html body .message-info-seller{position:static!important;width:100%!important;left:auto!important; right:auto!important;float:none!important;margin:12px 0 0!important;} html body .messages_parent_block-content{overflow:visible!important;} html body .message-info-seller .info-user,html body .message-info-seller .product-blc{width:100%!important;left:auto!important;position:static!important;} html body .message-info-seller a.follow,html body .message-info-seller .button{width:100%!important; left:auto!important;position:static!important;margin:6px 0!important;} /* the text node inside a bubble must not be width-constrained */ html body .message_item_dialog .message_item_dialog-inner .text, html body .message_item_dialog .text{width:auto!important;max-width:none!important;min-width:0!important; background:transparent!important;color:inherit!important;display:block;text-align:left; white-space:normal!important;word-break:break-word;float:none!important;position:static!important;} html body .message_item_dialog.me .text{color:#fff!important;} html body .chat-back{position:relative;z-index:3;} /* ---- profile: stack the desktop 2-column ---- */ html body .location_block_in_profile,html body .change-loc,html body .business-type, html body .profile_inner_block,html body .profile-info-block{position:static!important;width:100%!important; left:auto!important;right:auto!important;float:none!important;margin-left:0!important;} html body .add-link{display:inline-block;min-height:44px;line-height:44px;} /* ---- static pages (terms/about) get app typography ---- */ html body .static-page,html body .site-about{padding:14px 14px 100px!important;font-family:inherit;} html body .static-page h1,html body .site-about h1{font-size:24px;margin:6px 0 12px;} html body .static-page h2{font-size:18px;margin:20px 0 8px;} html body .static-page p,html body .static-page li{font-size:15px;line-height:1.55;} html body code{word-break:break-all;max-width:100%;display:inline-block;} /* ---- bottom safe area so the tab bar never covers content ---- */ html body .wrapper_margin,html body .site-about,html body .static-page{padding-bottom:100px!important;} html body .m-tabbar .m-tab{min-height:48px;justify-content:center;} html body .m-tabbar span{font-size:11.5px;} /* ---- misc touch targets ---- */ html body .modal-close,html body .closer,html body .material-icons.modal-close{min-width:44px;min-height:44px; display:inline-flex;align-items:center;justify-content:center;} html body .delete-comment,html body .review_date,html body .verified-text{font-size:13px!important;} } /* ===================================================================== v7 - second-audit fixes (critical + high) ===================================================================== */ @media screen and (max-width: 767px){ /* ---- CHAT: single column, real bubbles, working nav ---- */ html body .messages_parent_block-content{flex-direction:column!important;display:block!important;} html body .message_page_block,html body .message_page_block_menu{width:100%!important;float:none!important;} /* beat style.css .messages_parent_block .message_item_dialog.me .text {margin-left:140px} */ html body .messages_parent_block .message_item_dialog .text, html body .messages_parent_block .message_item_dialog.me .text, html body .messages_parent_block .message_item_dialog.opponent .text{ margin:0!important;display:block!important;width:auto!important;max-width:none!important; min-width:0!important;white-space:normal!important;word-break:break-word;float:none!important; background:transparent!important;text-align:left!important;} html body .messages_parent_block .message_item_dialog.me .text{color:#fff!important;} /* keep navigation available inside a thread */ html body.chat-thread-open .m-tabbar{display:none!important;} html body .chat-back{display:inline-flex!important;align-items:center;gap:6px;min-height:44px; padding:0 4px;color:#128c37;font-weight:600;font-size:15px;text-decoration:none;} /* ---- BURGER menu: closable, above everything,真 scroll lock ---- */ html body.menu-open .header-main{z-index:1600!important;} html body.menu-open .m-tabbar{display:none!important;} html.menu-open,html body.menu-open{overflow:hidden!important;height:100%;} html body .navigation.mobile-open{z-index:1600!important;padding-top:56px!important;} html body .navigation.mobile-open .m-menu-close{display:flex!important;} html body .m-menu-close{display:none;position:fixed;top:10px;right:10px;z-index:1700; width:44px;height:44px;align-items:center;justify-content:center;border-radius:50%; background:#f1f4f1;color:#1c2b21;font-size:26px;line-height:1;border:0;} html body .navigation.mobile-open li a,html body .navigation.mobile-open .navigation-menu_link{ width:100%!important;justify-content:flex-start;} /* ---- header: usable burger + search ---- */ html body .burger-menu{min-width:44px;min-height:44px;display:flex!important;align-items:center; justify-content:center;padding:0!important;} html body .main_search_form,html body form#search-form{flex:1;min-width:0;} html body #search-field,html body .main_search_form .form_field{padding:0 12px!important;} /* ---- kill the leftover fixed-header spacer ---- */ html body .filter,html body .wrapper2>.filter{margin-top:0!important;} html body .wrapper_margin{padding-top:6px!important;} /* ---- SELL / WANTED forms:真 single column ---- */ html body .form-row-group-line{display:block!important;} html body .form-row-group-col{width:100%!important;max-width:100%!important;float:none!important; margin:0 0 12px 0!important;display:block!important;} html body .form-row-group-col select,html body .form-row-group-col input, html body .select-wrap,html body .select-wrap select{width:100%!important;min-width:0!important;} html body .field-title{font-size:14px!important;margin-bottom:4px;} html body .per-unit{width:100%!important;} /* ---- profile: nothing past the right edge ---- */ html body .review_item-content,html body .info_block,html body .tab-header-item, html body .comments-block,html body .review_item{width:100%!important;max-width:100%!important; left:auto!important;right:auto!important;position:static!important;float:none!important; margin-left:0!important;box-sizing:border-box;} /* ---- filter chips: reclaim the label space ---- */ html body .filter-main-title{display:none!important;} html body .filter-inner{padding-left:10px!important;} html body .filter-item-body .button,html body .filter-item-body .button_std{width:100%!important; margin:6px 0 0!important;left:auto!important;right:auto!important;} /* ---- Stripe modal: pay button always reachable ---- */ html body #stripeModal .modal-footer,html body .modal .modal-footer{position:static!important;background:#fff;border-top:1px solid #eef1ee;} /* ---- static pages: brand link colour ---- */ html body .static-page a,html body .site-about a{color:#128c37!important;} /* ---- card titles: room + ellipsis ---- */ html body .product-grid .grid-item h2.name,html body .product-grid .grid-item .name{ height:auto!important;line-height:1.3!important;display:-webkit-box!important;-webkit-line-clamp:2; -webkit-box-orient:vertical;overflow:hidden;} /* ---- small text floor ---- */ html body .wanted-list-footer_status,html body .matching-offers_link, html body .timeline-badge,html body .badge,html body .category-badge{font-size:13px!important;} html body input[type=radio],html body input[type=checkbox]{min-width:22px;min-height:22px;} } /* ===================================================================== v8 - round-3 audit fixes ===================================================================== */ @media screen and (max-width: 767px){ /* ---- burger icon: bars stay inside the 44px button ---- */ html body .burger-menu{width:44px;height:44px;overflow:visible;} html body .burger-menu span{width:22px!important;max-width:22px!important;left:11px!important;right:auto!important;} html body .navigation.mobile-open ~ .burger-menu span,html body .burger-menu--open span{width:22px!important;} /* ---- menu close button (injected on , so style it globally) ---- */ html body.menu-open .m-menu-close{display:flex!important;} html body .navigation.mobile-open{padding-top:52px!important;} html body .navigation.mobile-open ul{margin-top:0!important;padding-top:0!important;} /* ---- CHAT inbox: all conversations reachable ---- */ html body .messages_parent_block,html body .messages_parent_block-content, html body .message_dialogs_block,html body .message_page_block_menu{ overflow:visible!important;height:auto!important;max-height:none!important;} html body .message_page_block_menu,html body .message-info-seller, html body .messages_parent_block,html body .message_page_block{max-width:none!important;width:100%!important;} html body .message_dialogs_block .mCustomScrollBox,html body .message_dialogs_block .mCSB_container, html body .message_page_block_menu .mCustomScrollBox,html body .message_page_block_menu .mCSB_container{max-height:none!important;height:auto!important;overflow:visible!important;} /* composer above everything (tab bar hidden in thread view) */ html body .message_textarea_block,html body .messages-text-form{z-index:1450!important;} /* ---- home filters: openable by TAP (hover-only before) ---- */ html body .filter-item.m-open .filter-item-body{display:block!important;} html body .filter-item-header{padding:8px 12px!important;font-size:13.5px!important;} /* ---- modals above header AND tab bar; content clear of sticky footer ---- */ html body .modal,html body #stripeModal{z-index:1700!important;} html body .modal-overlay{z-index:1690!important;} html body .modal .modal-content{padding-bottom:24px!important;} html body.modal-open .m-tabbar,html body .modal.open ~ .m-tabbar{display:none!important;} /* ---- profile: nothing past the right edge (max-width was inherited) ---- */ html body .location_block_in_profile,html body .location_block_in_profile-wrap, html body .change-loc,html body .business-type,html body .description, html body .review_item-content,html body .info_block,html body .comments-block{ max-width:100%!important;width:100%!important;position:static!important;float:none!important; left:auto!important;right:auto!important;margin-left:0!important;box-sizing:border-box;} html body .profile-blc .content-center,html body .profile_inner_block{display:block!important;} /* ---- header: search gets its own full-width row ---- */ html body .header-main-inner{display:flex!important;flex-wrap:wrap!important;align-items:center;} html body .header-main-inner .logo{order:1;} html body .header-main-inner .burger-menu{order:2;margin-left:auto;} html body .main_search_form,html body .input_switch_container{order:3;flex:0 0 100%!important; width:100%!important;max-width:100%!important;margin:6px 0 2px!important;} html body #search-field,html body .main_input{width:100%!important;} html body label.select_offer,html body label.select_user{position:static!important;display:block!important; font-size:11px!important;margin:0 0 2px 2px;color:#78877e;} /* ---- sans-serif everywhere (terms rendered in Times) ---- */ html body,html body p,html body li,html body td,html body div{ font-family:-apple-system,BlinkMacSystemFont,"Proxima Nova",Roboto,Helvetica,Arial,sans-serif;} /* ---- buy-offer: stop the orphan link colliding ---- */ html body .matching-offers_link,html body a#matching-link{position:static!important;float:none!important; clear:both;display:block;width:auto!important;margin:10px 0 0!important;font-size:13px!important;} /* ---- misc overflow / legibility ---- */ html body .per-unit,html body #price_per_unit .per-unit{width:auto!important;position:static!important; float:none!important;display:inline-block;} html body .form-row-group{padding-left:4px!important;padding-right:4px!important;} html body .product-grid .grid-item .imgholder{background:#fff!important;} html body [class*=badge] span,html body .colorful-placeholder{font-size:13px!important;} html body .product-location-grid,html body .message_header_date, html body .info_block_img_edit{font-size:13px!important;} html body .info_block_img_edit{min-height:44px;display:inline-flex;align-items:center;} } @media screen and (max-width: 767px){ /* ---- fallback app bar for pages with no header (terms/about) ---- */ html body .m-app-bar{position:sticky;top:0;z-index:1300;display:flex;align-items:center;gap:10px; background:#fff;border-bottom:1px solid #eef1ee;padding:8px 12px;min-height:56px;} html body .m-app-bar_back{min-width:44px;min-height:44px;display:inline-flex;align-items:center; justify-content:center;font-size:24px;color:#1c2b21;text-decoration:none;} html body .m-app-bar_logo img{height:26px;width:auto;display:block;} } /* ===================================================================== v9 - round-4 audit fixes ===================================================================== */ @media screen and (max-width: 767px){ /* ---- PROFILE: the desktop layout is FLEX - collapse it properly ---- */ html body .profile-page .profile-page-top,html body .profile-page-top, html body .profile-page .profile_billboard_block,html body .profile-page .change-loc, html body .profile-page .follow-blcs,html body .profile-page .info_block{ display:block!important;flex-direction:column!important;} html body .profile-page .location_block_in_profile{flex:none!important;margin-left:0!important; margin-top:12px!important;max-width:100%!important;width:auto!important;} html body .profile-page .location_block_in_profile-wrap{padding:16px!important;} html body .profile-page .location_block_in_profile-inner, html body .profile-page .change-loc .location_block_in_profile-inner{max-width:100%!important; width:100%!important;padding-right:0!important;margin-bottom:10px;} html body .profile-page .review_item,html body .profile-page .review_item-content, html body .profile-page .comment,html body .profile-page .description, html body .profile-page .business-type,html body .profile-page .change-loc{ max-width:100%!important;width:auto!important;margin-left:0!important;} html body .profile-page #profile_map_image,html body .profile-page #app_map_profile_img{ max-width:100%!important;width:100%!important;} html body .profile-page .review_date{position:static!important;float:none!important;display:block; font-size:13px!important;margin-top:4px;} /* ---- product card titles: ellipsis needs a block box ---- */ html body .name-product,html body .grid-item .name-product{display:block!important; max-width:100%!important;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;} html body .product-grid .grid-item a{min-height:44px;display:block;} /* ---- header search: icon and text stop colliding ---- */ html body #search-field,html body .main_input{background-position:12px center!important; padding-left:42px!important;} html body label.select_offer::before,html body label.select_user::before{top:15px!important;} /* ---- only ONE close control in the menu ---- */ html body .navigation.mobile-open .burger-menu{display:none!important;} /* ---- filter chips: 44px tall and all three fit ---- */ html body .filter-item-header{min-height:44px;padding:8px 10px!important;font-size:13px!important;} html body .filter-inner{gap:6px;padding-right:14px!important;} /* the country list must scroll inside its own box, not over the buttons */ html body .filter-item-body ul.mCustomScrollbar{max-height:250px!important;overflow-y:auto!important;} html body .filter-item-body ul.mCustomScrollbar .mCSB_container{height:auto!important;} html body .filter-item-body .btns-group{position:relative;z-index:3;background:#fff;padding-top:8px;} /* ---- terms: DB html carries inline Times styling ---- */ html body .terms-content,html body .terms-content *{font-family:-apple-system,BlinkMacSystemFont, "Proxima Nova",Roboto,Helvetica,Arial,sans-serif!important;} html body .terms-content{padding:14px 14px 110px!important;font-size:15px!important;line-height:1.6;} html body .terms-content p,html body .terms-content li,html body .terms-content td{font-size:15px!important;} html body .terms-content h1,html body .terms-content h2{font-size:20px!important;} /* ---- reclaim the dead space above the footer ---- */ html body .siteWrapper{padding-bottom:0!important;} html body .wrapper_margin{padding-bottom:80px!important;} /* ---- readable tab labels + footer targets ---- */ html body .m-tabbar span{font-size:13px!important;} html body .footer_main a,html body .footer-inner a{min-height:44px;display:inline-flex;align-items:center;} html body .product-filter_text{font-size:13px!important;} html body .delete-comment,html body .delSpan,html body .add-link{min-height:44px;min-width:44px; display:inline-flex;align-items:center;justify-content:center;} } /* ===================================================================== v10 - round-5 polish (legibility + tap targets) ===================================================================== */ @media screen and (max-width: 767px){ /* ---- conversation list: readable ---- */ html body .message_dialog_date{font-size:13px!important;color:#8a978f;} html body .user-name,html body .message_dialog_text_name{font-size:15px!important;font-weight:600;} html body .message_dialogs_block_item{min-height:72px;} /* ---- seller action row: real buttons ---- */ html body .message-info-seller a.follow,html body .message-info-seller a, html body .open-block-user-modal,html body .open-report-modal{min-height:44px!important; display:flex!important;align-items:center;justify-content:center;font-size:14px!important;} html body .message-info-seller .error-btn{margin:6px 0;} /* ---- profile: follower rows + tabs tappable ---- */ html body .profile-page .follow-blcs a,html body .profile-page .filter-list a, html body .profile-page .tab-header-item_link{min-height:44px!important;display:flex!important; align-items:center;} html body .profile-page .tab-header,html body .profile-page .tab-header-item{width:auto!important; min-width:0;flex:1;} html body .profile-page .tab-header-item_link{white-space:nowrap;font-size:15px!important; justify-content:center;padding:0 8px;} /* the 3px right-edge clip: hardcoded 368px card in a 355px column */ html body .profile-page .profile_billboard_block{width:100%!important;max-width:100%!important;} /* ---- notifications: long names must not blow out the row ---- */ html body .notifications_block_container{overflow-x:hidden!important;} html body .notifications_block_container .badge,html body .timeline-badge{flex-shrink:0!important; white-space:nowrap!important;width:auto!important;min-width:0;} html body .notification .name-span,html body .name-span{overflow:hidden;text-overflow:ellipsis; white-space:nowrap;max-width:150px;display:inline-block;vertical-align:bottom;} /* ---- create listing: use the full width like every other page ---- */ html body .product_upload_form{width:auto!important;max-width:100%!important;margin:0!important;padding:0 10px!important;} html body .product_upload_form input,html body .product_upload_form select, html body .product_upload_form textarea{width:100%!important;} html body .mce-btn button{min-width:40px;min-height:40px;} /* ---- buy-offer matching links ---- */ html body .matching-offers_link{min-height:44px!important;display:inline-flex!important;align-items:center;} /* ---- chips fit exactly; logo target ---- */ html body .filter-inner{padding-right:16px!important;} html body .filter-item-header{padding:8px 9px!important;} html body a.logo{min-height:44px;display:inline-flex;align-items:center;} } @media screen and (max-width: 767px){ /* ---- meta row: one compact line instead of a stacked desktop remnant ---- */ html body .product-filter-inner{flex-wrap:nowrap!important;align-items:center;gap:8px;} html body .product-filter_text{flex:1;min-width:0;font-size:13px!important;} html body .product-filter-selects{flex:0 0 auto;flex-direction:row!important;gap:6px;} html body .product-filter-selects label{display:none;} html body .product-filter-selects .select-field-wrap{width:auto!important;} html body .product-filter-selects select{width:auto!important;min-width:66px;min-height:36px!important; padding:4px 24px 4px 10px!important;font-size:13px!important;} } @media screen and (max-width: 767px){ /* ---- burger icon: tidy 16px-tall stack centred in the 44px button ---- (legacy CSS spaced the bars at 0/20.5/41px, stretching them across the whole button) */ html body .header-main-inner .burger-menu span{width:22px!important;height:2px!important;left:11px!important; border-radius:2px;transition:transform .2s ease,opacity .2s ease;} html body .header-main-inner .burger-menu span:nth-child(1){top:14px!important;} html body .header-main-inner .burger-menu span:nth-child(2), html body .header-main-inner .burger-menu span:nth-child(3){top:21px!important;} html body .header-main-inner .burger-menu span:nth-child(4){top:28px!important;} } /* ===================================================================== v13 - match the Scrapo iOS app design language Reference: burger-left / centred logo / search icon-right; large green outline filter pills (active = solid green); bigger cards with bold 19px titles + green prices; key/value detail rows; solid green CTAs. ===================================================================== */ @media screen and (max-width: 767px){ /* ---------- HEADER: burger | logo | search ---------- */ html body .header-main{box-shadow:none;border-bottom:1px solid #ececec;} html body .header-main-inner{display:flex!important;flex-wrap:nowrap!important;align-items:center; min-height:60px;padding:0 12px!important;gap:8px;} html body .header-main-inner .burger-menu{order:1!important;margin:0!important;flex:0 0 44px;} html body .header-main-inner .logo{order:2!important;flex:1 1 auto;display:flex;justify-content:center; align-items:center;padding:0!important;} html body .header-main-inner .logo img,html body .header-main-inner .logo svg{height:30px;width:auto;} /* search collapses to an icon; tapping it reveals the field as its own row */ html body .main_search_form,html body .input_switch_container{order:4!important;flex:0 0 100%!important; width:100%!important;margin:0 0 10px!important;display:none!important;} html body.search-open .main_search_form,html body.search-open .input_switch_container{display:block!important;} html body .m-search-toggle{order:3!important;flex:0 0 44px;width:44px;height:44px;display:flex; align-items:center;justify-content:center;background:none;border:0;color:#128c37;padding:0;} html body .m-search-toggle svg{width:24px;height:24px;} html body #search-field,html body .main_input{height:46px;border-radius:23px;background:#f4f6f4; border:1px solid #e2e8e2;} /* ---------- FILTER PILLS (app style) ---------- */ html body .filter-inner{gap:10px;padding:12px!important;border-bottom:0;} html body .filter-item-header{min-height:46px!important;border:1.5px solid #128c37!important; background:#fff!important;color:#128c37!important;border-radius:23px!important; padding:0 18px!important;font-size:16px!important;font-weight:500!important;} html body .filter-item.m-open .filter-item-header, html body .filter-item.has-value .filter-item-header{background:#128c37!important;color:#fff!important;} html body .filter-item-header .caret{border-top-color:currentColor;} html body .filter-item-header .count{color:inherit;} /* ---------- PRODUCT CARDS (app style) ---------- */ html body .product-grid{gap:12px;padding:0 2px;} html body .product-grid .grid-item{border-radius:10px;box-shadow:0 1px 5px rgba(0,0,0,.10);} html body .product-grid .grid-item .imgholder, html body .product-grid .grid-item .imgholder img{height:168px!important;} html body .product-grid .grid-item .grid_product_header, html body .product-grid .grid-item h2.name,html body .name-product{font-size:18px!important; font-weight:600!important;color:#1c2b21!important;line-height:1.25!important;} html body .product-grid .grid-item .price,html body .product-grid .grid-item .product-price{ font-size:17px!important;font-weight:700!important;color:#128c37!important;} html body .product-grid .grid-item .product_footer{padding:12px 14px 14px!important;} html body .product-location-grid{font-size:12px!important;color:#8a978f!important;line-height:1.3;} /* ---------- DETAIL PAGE: big green price + key/value rows ---------- */ html body .product-view .price,html body .product_price{font-size:26px!important;font-weight:700!important; color:#128c37!important;} html body .product-view h1,html body .product-title{font-size:21px!important;font-weight:700!important; color:#1c2b21!important;} html body .details-table tr,html body .product-details tr{border-bottom:1px solid #eef1ee;} html body .details-table td:first-child,html body .product-details td:first-child{ font-weight:600!important;color:#1c2b21!important;text-align:left;} html body .details-table td:last-child,html body .product-details td:last-child{ color:#6d7d73!important;text-align:right;} html body .details-table td,html body .product-details td{font-size:15px!important;padding:14px 0!important;} /* ---------- BUTTONS (app style) ---------- */ html body .button-primary,html body .button.button-primary,html body button.button-primary{ background:#128c37!important;border-color:#128c37!important;color:#fff!important; min-height:54px!important;border-radius:6px!important;font-size:17px!important;font-weight:600!important; width:100%!important;display:flex!important;align-items:center;justify-content:center;gap:10px;} html body .button-outline-primary,html body .button.button-outline-primary{background:#fff!important; border:1.5px solid #128c37!important;color:#128c37!important;min-height:52px!important; border-radius:6px!important;font-size:17px!important;font-weight:600!important;width:100%!important; display:flex!important;align-items:center;justify-content:center;gap:10px;} /* green section headings, like "Seller" / "Offers by …" */ html body .inner_block_heading,html body .profile_inner_block_header, html body .product-view h2,html body .head-section{color:#128c37!important;font-weight:700!important; font-size:19px!important;} /* ---------- TAB BAR (app proportions) ---------- */ html body .m-tabbar{padding:6px 0 calc(6px + env(safe-area-inset-bottom));border-top:1px solid #ececec;} html body .m-tabbar .m-tab{gap:4px;color:#4a5a50!important;} html body .m-tabbar .m-tab svg{width:26px;height:26px;} html body .m-tabbar .m-tab span{font-size:13px!important;font-weight:500;} html body .m-tabbar .m-tab.is-active,html body .m-tabbar .m-tab.is-active span{color:#128c37!important;} /* ---------- CHAT header chips like the app ---------- */ html body .messages_parent_block_header{gap:10px;padding:10px 12px!important;} html body .message_block_menu_search a,html body .messages_parent_block_header .button{ border:1.5px solid #128c37;color:#128c37;border-radius:20px;padding:8px 16px;font-size:15px;} } @media screen and (max-width: 767px){ /* keep exactly 2 per row with the v13 12px gutter (card width must match the gap) */ html body .product-grid{gap:12px!important;padding:0!important;} html body .product-grid .grid-item{width:calc(50% - 6px)!important;max-width:calc(50% - 6px)!important;} html body .product-grid .grid-item .imgholder, html body .product-grid .grid-item .imgholder img{height:150px!important;} } /* ===================================================================== v15 - exact tokens measured from the Scrapo iOS app screenshots (1179px @3x = 393 CSS px). Brand green #10973e. chips 36px tall / r18 | cards 173px wide, 175px imagery, 16px margins ===================================================================== */ @media screen and (max-width: 767px){ /* ---- brand green corrected to the app's #10973e ---- */ html body .m-tabbar .m-tab.is-active,html body .m-tabbar .m-tab.is-active span, html body .filter-item-header,html body .chat-back,html body .m-search-toggle, html body .static-page a,html body .site-about a, html body .product-grid .grid-item .price,html body .product-view .price, html body .inner_block_heading,html body .head-section{color:#10973e!important;} html body .filter-item-header{border-color:#10973e!important;} html body .button-primary,html body .button.button-primary,html body button.button-primary, html body .m-tabbar .m-tab.is-active svg{background-color:#10973e!important;border-color:#10973e!important;} html body .m-tabbar .m-tab.is-active svg{background:none!important;} html body .button-outline-primary,html body .button.button-outline-primary{ border-color:#10973e!important;color:#10973e!important;} html body .message_item_dialog.me .message_item_dialog-inner, html body .messages_parent_block .message_item_dialog.me .message-cloud{background:#10973e!important;} /* ---- page rhythm: 16px side margins like the app ---- */ html body .wrapper_margin{padding-left:16px!important;padding-right:16px!important;} /* ---- filter pills: app geometry (32px visual, 44px tap via margin) ---- */ html body .filter-inner{gap:12px;padding:14px 16px!important;} html body .filter-item-header{min-height:36px!important;height:36px!important;border-radius:18px!important; border-width:1.5px!important;padding:0 16px!important;font-size:15px!important;font-weight:500!important;} /* ---- cards: 175px imagery, 14px gutter ---- */ html body .product-grid{gap:14px!important;} html body .product-grid .grid-item{width:calc(50% - 7px)!important;max-width:calc(50% - 7px)!important;} html body .product-grid .grid-item .imgholder, html body .product-grid .grid-item .imgholder img{height:175px!important;} html body .product-grid .grid-item .product_footer{padding:12px 12px 14px!important;} } /* ===================================================================== v16 - full rebuild against the app screenshots tokens: green #10973e | own-bubble slate #4d618a | band #e5e5e5 ===================================================================== */ @media screen and (max-width: 767px){ /* ---------- PREMIUM CARD: compact, not a wall of text ---------- */ html body .promo-line{margin:10px 0 14px!important;} html body .promo-line-inner{padding:14px 16px!important;border-radius:12px;gap:12px; background:linear-gradient(120deg,#10973e 0%,#0e6f4f 100%);box-shadow:none;} html body .promo-line-inner-text p b{font-size:16px!important;margin-bottom:2px;} html body .promo-line-inner-text p:last-child{font-size:13px!important;opacity:.92;line-height:1.3;} html body .promo-line-inner>a{padding:9px 16px;font-size:14px;border-radius:20px;} /* ---------- SECTION BANDS + KEY/VALUE ROWS (app pattern) ---------- */ html body .profile-page .info_block,html body .profile-page .location_block_in_profile{ border-radius:0!important;box-shadow:none!important;border-top:8px solid #e5e5e5;} html body .details-table td,html body .product-details td, html body .profile-page .change-loc{font-size:17px!important;} /* v35: Business type must match Business description (15px), not the 17px Location block - this 3-class rule was outranking the v35 declaration. */ html body .profile-page .business-type{font-size:15px!important;} html body .details-table tr,html body .product-details tr{min-height:56px;} /* ---------- CHAT: own bubbles are slate blue in the app ---------- */ html body .messages_parent_block .message_item_dialog.me .message_item_dialog-inner, html body .messages_parent_block .message_item_dialog.me .message-cloud, html body .message_item_dialog.me .message_item_dialog-inner{background:#4d618a!important; border-radius:14px!important;} html body .message_item_dialog.opponent .message_item_dialog-inner{background:#fff!important; border-radius:14px!important;color:#1c2b21!important;} html body .messages_parent_block-content{background:#fff!important;} html body .message_item_dialog .message_item_dialog-wrapper{max-width:78%;} /* conversation list rows like the app */ html body .message_dialogs_block_item{padding:12px 16px!important;border-bottom:1px solid #eef1ee;} html body .message_dialog_pofile img,html body .message_dialogs_block_item img{width:60px!important; height:60px!important;border-radius:50%!important;object-fit:cover;} html body .message_dialog_text_name{font-size:17px!important;font-weight:700!important;color:#1c2b21!important;} html body .message_dialog_date{font-size:13px!important;color:#8a978f!important;} /* chat header chips */ html body .messages_parent_block_header{border-bottom:1px solid #eef1ee;} /* ---------- PAGE TITLES: centred green like the app ---------- */ html body .head-section,html body .inner_block_heading{font-size:20px!important;font-weight:700!important; color:#10973e!important;} /* ---------- STAT ROW (followers / following) ---------- NOTE: .follow-blcs is the profile TAB widget, not a stat row - v17 fixes this. */ html body .profile-stat-row{display:flex!important;text-align:center; border-bottom:8px solid #e5e5e5;padding:14px 0!important;} html body .profile-stat-row>*{flex:1;border-right:1px solid #e5e5e5;} html body .profile-stat-row>*:last-child{border-right:0;} /* ---------- EMPTY STATES ---------- */ html body .empty_block_message,html body .no-messages-found,html body .msg-placeholder, html body .empty-content-block{text-align:center;color:#8a978f!important;font-size:15px!important; padding:40px 20px!important;} /* ---------- BOTTOM OF EVERY PAGE: nothing hidden behind the tab bar ---------- */ html body .wrapper_margin,html body .static-page,html body .site-about, html body .terms-content,html body .product_upload_form{padding-bottom:96px!important;} html body .footer_main,html body .footer-inner{padding-bottom:80px!important;} html body.chat-thread-open .messages_parent_block-content{padding-bottom:96px!important;} /* ================================================================ v17 - gaps found by frame-comparing the founder's two screen recordings (native app vs deployed web), 2026-09-09. ================================================================ */ /* ---------- 1. PROFILE / ACCOUNT: kill the desktop two-column split ---------- .profile-page .review is display:flex with .follow-blcs (max-width 376px, border-right) beside .comment - at 393px that produced the overlapping "I follow / My followers / Comments" mess in the recording. */ html body .profile-page .review, html body .profile-page .review .comment, html body .edit-account,html body .edit-account-form,html body .edit-account-blc, html body .edit_profile_inner_block,html body .edit_profile_info, html body .profile_inner_block,html body .user-profile{ display:block!important;float:none!important;width:auto!important; max-width:100%!important;min-width:0!important;} html body .profile-page .review{box-shadow:none!important;border-radius:0!important;background:transparent!important;} html body .profile-page .review>*{background:#fff;border-radius:12px;margin-bottom:12px;} html body .profile-page .follow-blcs{border-right:0!important;border-bottom:8px solid #e5e5e5!important; padding:16px!important;max-width:100%!important;width:auto!important;} /* profile tab strip: even thirds, no overlap, green underline (app: OFFERS|FOLLOWING|SAVED) */ html body .profile-page .tab-header{display:flex!important;align-items:stretch!important; border-bottom:1px solid #e5e5e5!important;} html body .profile-page .tab-header-item{flex:1 1 0!important;min-width:0!important;width:auto!important; text-align:center!important;padding:10px 4px!important;position:relative!important;} html body .profile-page .tab-header-item_link{display:block!important;font-size:14px!important; font-weight:600!important;white-space:nowrap!important;overflow:hidden!important; text-overflow:ellipsis!important;position:static!important;} html body .profile-page .tab-header-item_total{display:block!important;position:static!important; font-size:12px!important;color:#8a978f!important;margin-top:2px!important;white-space:nowrap!important;} html body .profile-page .tab-header-item.active{box-shadow:inset 0 -3px 0 #10973e;} html body .profile-page .tab-header-item.active .tab-header-item_link{color:#10973e!important;} /* ---------- 2. SIMILAR / OTHER OFFERS: swiper -> app-style 2-per-row grid ---------- Swiper ran slidesPerView:3 with no mobile breakpoint, and with <=3 items it never initialised at all - the recording shows 4 cards ~45px wide with titles collapsed to "t..." and prices wrapping onto three lines. */ html body .products-slider{margin:0 0 8px!important;padding:16px 0 0!important;background:#fff;} html body .products-slider-header{display:flex!important;align-items:center!important; justify-content:space-between!important;gap:12px!important;padding:0 16px 12px!important;} html body .products-slider-header .info__title{font-size:17px!important;font-weight:700!important; margin:0!important;white-space:nowrap!important;} html body .products-slider-header .button{border:0!important;background:none!important; padding:0!important;min-width:0!important;width:auto!important;height:auto!important; color:#10973e!important;font-size:15px!important;font-weight:600!important;box-shadow:none!important;} html body .products-slider-blc,html body .products-slider-blc.swiper-container{ overflow:visible!important;height:auto!important;padding:0 16px!important;} html body .products-slider-blc .swiper-wrapper{display:flex!important;flex-wrap:wrap!important; gap:14px!important;transform:none!important;width:auto!important;height:auto!important; align-items:stretch!important;} html body .products-slider-blc .swiper-slide{width:calc(50% - 7px)!important; flex:0 0 calc(50% - 7px)!important;max-width:calc(50% - 7px)!important;margin:0!important; height:auto!important;} /* v37: was 150px, which left video cards with a 175px holder around a 150px image (grey bands) and made photo cards 25px shorter than video cards in the same row. Every card image is 175px, exactly like the home grid. */ html body .products-slider-blc .swiper-slide .imgholder, html body .products-slider-blc .swiper-slide .imgholder img{height:175px!important; width:100%!important;object-fit:cover!important;} html body .products-slider-blc .swiper-slide .name, html body .products-slider-blc .swiper-slide .product_name{font-size:15px!important; line-height:1.3!important;white-space:normal!important;overflow:hidden!important; display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;} html body .products-slider-blc .swiper-slide .price{font-size:15px!important; white-space:nowrap!important;color:#10973e!important;font-weight:700!important;} html body .products-slider-blc .swiper-button-next, html body .products-slider-blc .swiper-button-prev, html body .products-slider .swiper-button-next, html body .products-slider .swiper-button-prev{display:none!important;} /* ---------- 3. "UPGRADE TO PREMIUM" - the founder called this ugly twice ---------- .promo-line was a tall green slab whose text collided with the Learn more button. One compact line, like an app inline nudge. */ html body .promo-line{margin:12px 16px!important;padding:0!important;background:none!important;} html body .promo-line-inner{display:flex!important;align-items:center!important; justify-content:space-between!important;gap:12px!important;background:#10973e!important; border-radius:12px!important;padding:12px 14px!important;min-height:0!important;} html body .promo-line-inner-text{flex:1 1 auto!important;min-width:0!important;padding:0!important;} html body .promo-line-inner-text p{margin:0!important;color:#fff!important;font-size:14px!important; line-height:1.3!important;} html body .promo-line-inner-text p:first-child b{font-size:15px!important;font-weight:700!important;} html body .promo-line-inner-text p:last-child{font-size:12px!important;opacity:.85; white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;} html body .promo-line-inner>a{flex:0 0 auto!important;background:#fff!important;color:#10973e!important; font-size:13px!important;font-weight:700!important;border-radius:16px!important; padding:8px 14px!important;min-height:32px!important;display:inline-flex!important; align-items:center!important;white-space:nowrap!important;text-transform:none!important;} /* payment page hero: navy full-bleed slab shrunk so price + CTA fit one screen */ html body .full-banner{padding:0!important;} html body .full-banner .center-blc,html body .full-banner-img{padding:0!important; min-height:0!important;background-position:center!important;} html body .full-banner-content{padding:24px 20px 28px!important;} html body .full-banner_title{font-size:22px!important;line-height:1.25!important;margin:0 0 8px!important;} html body .full-banner_title br{display:none!important;} html body .full-banner_subtitle{font-size:14px!important;line-height:1.4!important;margin:0 0 18px!important;} html body .full-banner .button-white{width:100%!important;max-width:100%!important; min-height:52px!important;font-size:16px!important;font-weight:700!important;border-radius:10px!important;} html body .full-banner .small-text{font-size:11px!important;line-height:1.4!important; opacity:.75;margin-top:14px!important;} html body .benefits .title-blc{font-size:20px!important;} /* ---------- 4. HOME FILTER BAR: all three pills must fit, no cut-off ---------- */ /* the app fits Country|Category|Condition on one line and puts Clear on the next; the web was scrolling them and clipping "Condition" at the edge. */ html body .filter-inner{display:flex!important;flex-wrap:wrap!important; align-items:center!important;gap:8px!important;overflow-x:visible!important; padding:10px 16px!important;background:#fff;} html body .filter-item{flex:1 1 0!important;min-width:0!important;width:auto!important; position:relative!important;} html body .filter-item-header{font-size:14px!important;padding:0 10px!important; white-space:nowrap!important;gap:4px!important;overflow:hidden!important; text-overflow:ellipsis!important;justify-content:center!important;} html body .filter-item-header .count{font-size:13px!important;} html body .reset-blc{flex:0 0 auto!important;order:9!important;margin:0!important;} html body .reset-blc .button{border:0!important;background:none!important;padding:0 6px!important; color:#10973e!important;font-size:14px!important;font-weight:600!important; white-space:nowrap!important;min-width:0!important;} html body .filter-fulfilled{flex:0 0 auto!important;order:10!important;margin:0!important;} html body .filter-fulfilled p{font-size:12px!important;white-space:nowrap!important;margin:0!important;} /* slider cards fill their slide (the .product-grid width rule must not leak in) */ html body .products-slider-blc .swiper-slide .grid-item{width:100%!important; max-width:100%!important;margin:0!important;} /* currency / unit strip: one quiet line, not a stacked block */ html body .product-filter{background:#fff;padding:0!important;border-bottom:8px solid #e5e5e5;} html body .product-filter-inner{display:flex!important;align-items:center!important; justify-content:space-between!important;gap:10px!important;padding:8px 16px 12px!important; flex-wrap:nowrap!important;} html body .product-filter_text{font-size:12px!important;color:#8a978f!important;line-height:1.3!important; flex:1 1 auto!important;min-width:0!important;margin:0!important;} html body .product-filter-selects{display:flex!important;align-items:center!important;gap:6px!important; flex:0 0 auto!important;} html body .product-filter-selects label{display:none!important;} html body .product-filter-selects .select-field-wrap{min-width:0!important;width:auto!important;margin:0!important;} html body .product-filter-selects select{height:32px!important;font-size:13px!important; padding:0 22px 0 8px!important;border:1px solid #dfe5e0!important;border-radius:8px!important; background-color:#fff!important;} /* ---------- 5. SITE FOOTER: the app has none. Make it a quiet end-of-page row, never a dark slab floating mid-screen above the tab bar. ---------- */ html body .footer{background:#fff!important;border-top:1px solid #eef1ee!important; padding:18px 16px calc(96px + env(safe-area-inset-bottom))!important;margin:0!important; position:static!important;box-shadow:none!important;} html body .footer .wrapper_margin{padding:0!important;margin:0!important;} html body .footer-inner{display:block!important;padding:0!important;text-align:center!important;} html body .footer-navigation ul{display:flex!important;flex-wrap:wrap!important; justify-content:center!important;gap:6px 18px!important;padding:0!important;margin:0!important; list-style:none!important;} html body .footer-navigation ul li{float:none!important;margin:0!important;} html body .footer-navigation ul li a{color:#8a978f!important;font-size:13px!important; min-height:36px!important;} html body .footer_copy{margin-top:8px!important;} html body .footer_copy p{color:#b3bdb6!important;font-size:12px!important;margin:0!important;} html body .footer-social{display:none!important;} /* ---------- 6. SELLER CARD on the product page: app-style avatar row ---------- */ html body .product-seller-blc,html body .seller-blc,html body .product_seller_block{ background:#fff;padding:16px!important;} html body .product-seller-blc .indicator,html body .seller-blc .indicator{display:none!important;} /* ---------- 7. FORMS everywhere: app-sized fields, full width, no stray columns ---------- */ html body .row{margin-left:0!important;margin-right:0!important;} html body .input-field-blc,html body .input-field-blc .row{width:auto!important; max-width:100%!important;float:none!important;display:block!important;margin-bottom:14px!important;} html body .input-field-blc input[type=text],html body .input-field-blc input[type=email], html body .input-field-blc input[type=tel],html body .input-field-blc input[type=number], html body .input-field-blc input[type=password],html body .input-field-blc select, html body .product_upload_form input[type=text],html body .product_upload_form select, html body .product_upload_form input[type=number]{ width:100%!important;height:48px!important;min-height:48px!important;font-size:16px!important; padding:0 12px!important;border:1px solid #dfe5e0!important;border-radius:10px!important; background:#fff!important;box-sizing:border-box!important;} html body .input-field-blc textarea,html body .product_upload_form textarea{ width:100%!important;min-height:120px!important;font-size:16px!important;padding:10px 12px!important; border:1px solid #dfe5e0!important;border-radius:10px!important;box-sizing:border-box!important;} html body .title-blc label,html body .product_upload_form label{font-size:14px!important; font-weight:600!important;color:#1c2b21!important;margin-bottom:6px!important;display:block!important;} html body .edit-account-form_title{font-size:20px!important;font-weight:700!important; color:#10973e!important;text-align:center!important;padding:14px 16px!important;} /* ---------- 8. BOTTOM OF EVERY PAGE (founder's standing note) ---------- */ html body .edit-account,html body .profile-page,html body .products-slider:last-child, html body .full-banner,html body .benefits,html body .review{padding-bottom:0;} html body .siteWrapper,html body .content-wrapper{padding-bottom:96px!important;} html body .footer+*{margin-bottom:0!important;} /* ================================================================ v18 - measured on staging after v17. Desktop side-padding was still squeezing form columns to a fraction of the screen. ================================================================ */ /* Edit Account: .edit-account-blc carried padding:0 105px -> inputs were 151px wide inside a 361px page (this is the narrow red-boxed form in the recording). */ html body .edit-account-blc,html body .edit-account-blc.password_change{ padding-left:16px!important;padding-right:16px!important;} /* Create a Listing: .product_upload_block_body.create_page carried 40px sides. */ html body .product_upload_block_body,html body .product_upload_block_body.create_page{ padding-left:16px!important;padding-right:16px!important;} /* catch-all: no desktop gutter may eat more than 32px of a 393px screen */ html body .wrapper2>*,html body .siteWrapper .center-blc{padding-left:0;padding-right:0;} /* payment page: kill the 68px dead band above the hero and the cropped art */ html body .full-width{padding-top:0!important;} html body .full-banner_title{padding:0 0 8px!important;} html body .full-banner .banner-img,html body .full-banner-img>.banner-img{display:none!important;} html body .full-banner-content>p:last-child{font-size:13px!important;line-height:1.4!important; margin:10px 0 0!important;} html body .full-banner-content>br{display:none!important;} /* footer: 3 links on one line, not a 300px block */ html body .footer{padding-top:14px!important;} html body .footer-navigation ul li a{min-height:32px!important;font-size:12px!important;} html body .footer-navigation ul{gap:2px 14px!important;} /* product card location: 2 lines max, like the app (was wrapping to 3) */ html body .product-grid .grid-item .product_footer .address, html body .product-grid .grid-item .location, html body .products-slider-blc .swiper-slide .address{ display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden!important;} /* ================================================================ v19 - founder QA round, 2026-09-09. Every item measured on staging before changing anything. ================================================================ */ /* ---------- 1. HEADER: logo centred, burger + search on the left ---------- was: burger x22, logo x74, search x236, 113px of dead space on the right. */ html body .header-main .header-inner,html body .header-main>.wrapper_margin, html body .header-main .header_block{position:relative!important;display:flex!important; align-items:center!important;min-height:56px!important;padding:0 8px!important;} html body .header-main .logo{position:absolute!important;left:50%!important; transform:translateX(-50%)!important;margin:0!important;z-index:1;} html body .burger-menu{order:0!important;position:relative!important;z-index:2;margin:0!important;} html body .m-search-toggle{order:1!important;position:relative!important;z-index:2;margin:0 0 0 4px!important;} /* search opens full width across the header (it was landing at x=288, off-screen) */ html body.search-open .main_search_form,html body.search-open #search-form{ position:fixed!important;top:0!important;left:0!important;right:0!important;width:auto!important; margin:0!important;padding:8px 12px calc(8px + env(safe-area-inset-top))!important; background:#fff!important;z-index:1500!important;box-shadow:0 1px 0 #eef1ee; display:flex!important;align-items:center!important;gap:8px!important;} html body.search-open #search-field{width:100%!important;flex:1 1 auto!important;height:44px!important; font-size:16px!important;border-radius:12px!important;background:#f0f2f0!important; border:0!important;padding:0 14px!important;margin:0!important;} html body.search-open .header-main>*:not(.main_search_form):not(#search-form){visibility:hidden;} /* ---------- 2. PRODUCT CARD: match the app ---------- app: 18px/700 title LEFT, 17px green price, 14px grey address clamped to 2 lines, ~280px card. Ours ran 329px because the address wrapped to 3 lines - the v18 clamp used the wrong class names (.address/.location don't exist). */ html body .product-grid .grid-item .product_footer{padding:8px 12px 11px!important;} html body .product-grid .grid-item .grid_product_header{text-align:left!important;} html body .product-grid .grid-item h2.name{margin:0!important;text-align:left!important; font-size:18px!important;font-weight:600!important;line-height:1.25!important; color:#1c2b21!important;display:block!important;} html body .product-grid .grid-item .name-product{display:-webkit-box!important; -webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden!important; text-align:left!important;font-size:18px!important;font-weight:600!important;} html body .product-grid .grid-item .product-price-grid{font-size:15px!important; font-weight:600!important;color:#10973e!important;text-align:left!important; margin:3px 0 2px!important;white-space:nowrap!important;overflow:hidden!important; text-overflow:ellipsis!important;} html body .product-grid .grid-item .product-location-grid{font-size:12px!important; line-height:1.3!important;color:#8a978f!important;text-align:left!important;margin:0!important; display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden!important;} /* premium / verified tag was inline inside the

and effectively invisible. Make it a real green pill on its own line, like a badge. */ html body .product-grid .grid-item .verified-block, html body .products-slider-blc .swiper-slide .verified-block{ display:inline-flex!important;align-items:center!important;gap:4px!important; background:#e7f5ec!important;color:#10973e!important;border-radius:10px!important; padding:2px 8px 2px 6px!important;margin:6px 0 0!important;vertical-align:middle!important; max-width:100%!important;} html body .product-grid .grid-item .verified-block svg, html body .products-slider-blc .swiper-slide .verified-block svg{width:14px!important; height:14px!important;flex:0 0 auto!important;} html body .product-grid .grid-item .verified-text, html body .products-slider-blc .swiper-slide .verified-text{display:inline!important; font-size:11px!important;font-weight:700!important;color:#10973e!important; white-space:nowrap!important;text-transform:none!important;} /* ---------- 3. FILTER PILL DROPDOWNS: Apply was below the fold ---------- founder: "I cant find the button Apply ... the same goes to all dropdown selections across the site". Turn the panel into a bottom sheet whose Reset/Apply row is pinned and always reachable. */ html body .filter-item{position:static!important;} html body .filter-item .filter-item-body{position:fixed!important;left:0!important;right:0!important; bottom:0!important;top:auto!important;width:auto!important;max-height:72vh!important; overflow-y:auto!important;-webkit-overflow-scrolling:touch;background:#fff!important; border-radius:16px 16px 0 0!important;box-shadow:0 -8px 32px rgba(0,0,0,.22)!important; z-index:1450!important;padding:16px 16px calc(16px + env(safe-area-inset-bottom))!important; margin:0!important;border:0!important;} html body .filter-item .filter-item-body ul{max-height:46vh!important;overflow-y:auto!important; margin:0 0 8px!important;padding:0!important;} html body .filter-item .filter-item-body li label{display:flex!important;align-items:center!important; gap:10px!important;min-height:46px!important;font-size:16px!important;} html body .filter-item .filter-item-body .filter-item-body_footer, html body .filter-item .filter-item-body .button-blc, html body .filter-item .filter-item-body>div:last-child{position:sticky!important;bottom:0!important; background:#fff!important;display:flex!important;gap:10px!important; padding:10px 0 0!important;border-top:1px solid #eef1ee!important;z-index:2;} html body .filter-item .filter-item-body .button-primary{flex:1 1 auto!important; min-height:50px!important;font-size:16px!important;font-weight:700!important; border-radius:10px!important;background:#10973e!important;color:#fff!important;} html body .filter-item .filter-item-body .jsReset{flex:0 0 auto!important;min-height:50px!important; display:inline-flex!important;align-items:center!important;padding:0 16px!important; color:#8a978f!important;font-size:15px!important;} /* ---------- 4. USD / lb selects: the caret sat 7px from the top of a 36px box ---------- */ html body .product-filter-selects .select-field-wrap{display:inline-flex!important; align-items:center!important;position:relative!important;} html body .product-filter-selects .select-field-wrap::after{top:50%!important; margin-top:-5px!important;right:9px!important;} /* ---------- 5. SELECTS EVERYWHERE: black text, not Materialize blue ---------- */ html body select,html body select option,html body .select-field-wrap select, html body .product_upload_form select,html body .input-field-blc select{ color:#1c2b21!important;-webkit-text-fill-color:#1c2b21!important;} html body .select-wrapper input.select-dropdown,html body .dropdown-content li>span, html body .dropdown-content li>a{color:#1c2b21!important;} html body .dropdown-content li.active>span,html body .dropdown-content li.selected>span{ color:#10973e!important;background:#e7f5ec!important;} /* ---------- 6. BURGER MENU: profile block first, even spacing ---------- */ /* MUST stay scoped to .mobile-open - unscoped display:flex forced the menu open on every page and swallowed the burger button (v20 regression). */ html body .navigation.mobile-open{display:flex!important;flex-direction:column!important;} html body .navigation.mobile-open .navigation-menu{order:-1!important;margin:0 0 4px!important; padding:16px 16px 14px!important;border-bottom:8px solid #e5e5e5!important;} html body .navigation.mobile-open .navigation-list{order:1!important;} html body .navigation.mobile-open .navigation-menu_link{display:flex!important;align-items:center!important; gap:12px!important;min-height:56px!important;font-size:17px!important;font-weight:700!important; color:#1c2b21!important;} html body .navigation.mobile-open .navigation-list>li,html body .navigation.mobile-open .sub-menu>li{ min-height:56px!important;display:block!important;margin:0!important;} html body .navigation.mobile-open .navigation-list>li>a,html body .navigation.mobile-open .sub-menu>li>a{ display:flex!important;align-items:center!important;gap:12px!important; min-height:56px!important;padding:0 16px!important;font-size:16px!important;} /* avatar circles (menu + followers/following) were ovals: a width was set but the box could still stretch or shrink in a flex row. */ html body .colorful-placeholder,html body .navigation-menu_link__avatar, html body .placeholder-img,html body .tab-user-list li>a>*, html body .follow-blcs .tab-user-list img,html body .follow-blcs .tab-user-list .colorful-placeholder{ border-radius:50%!important;flex:0 0 auto!important;aspect-ratio:1/1!important; object-fit:cover!important;overflow:hidden!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; line-height:1!important;text-align:center!important;padding:0!important;} html body .navigation.mobile-open .navigation-menu_link__avatar{width:44px!important;height:44px!important; font-size:15px!important;font-weight:700!important;} html body .tab-user-list li{margin:0 10px 10px 0!important;} /* ---------- 7. UPGRADE TO PREMIUM banner: fit the text, centre the card ---------- */ html body .promo-line{margin:12px auto!important;max-width:100%!important; padding:0 16px!important;box-sizing:border-box!important;} html body .promo-line-inner{margin:0 auto!important;width:100%!important;box-sizing:border-box!important;} html body .promo-line-inner-text p:first-child b{font-size:14px!important;} html body .promo-line-inner-text p:last-child{font-size:11px!important;line-height:1.3!important; white-space:normal!important;overflow:hidden!important; display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical;} /* ---------- 8. MESSAGES: the thread must be a full-screen chat ---------- it was rendering as a 163px sliver with a 1115px seller/product panel below, which is why the founder said the page "doesn't open at all". */ html body.chat-thread-open .message-info-seller{display:none!important;} html body.chat-thread-open .messages_parent_block{display:block!important; height:auto!important;padding-bottom:0!important;} html body.chat-thread-open .message_page_block{display:flex!important;flex-direction:column!important; width:auto!important;max-width:100%!important;margin:0!important; position:fixed!important;left:0!important;right:0!important;top:96px!important; bottom:0!important;background:#fff!important;z-index:900!important;} html body.chat-thread-open .message_page_block .name-seller{flex:0 0 auto!important; padding:10px 16px!important;border-bottom:1px solid #eef1ee!important;background:#fff!important;} html body.chat-thread-open .message_page_block_inner{flex:1 1 auto!important; height:auto!important;max-height:none!important;min-height:0!important; overflow-y:auto!important;-webkit-overflow-scrolling:touch; padding:12px 16px 8px!important;background:#f4f6f4!important;} html body.chat-thread-open .messages-text-form{flex:0 0 auto!important;position:relative!important; width:auto!important;display:flex!important;align-items:flex-end!important;gap:8px!important; padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important; border-top:1px solid #eef1ee!important;background:#fff!important;} html body.chat-thread-open .messages-text-form textarea{flex:1 1 auto!important; min-height:44px!important;max-height:120px!important;font-size:16px!important; border-radius:22px!important;padding:11px 14px!important;background:#f0f2f0!important; border:0!important;resize:none!important;} html body.chat-thread-open .m-tabbar{display:none!important;} /* ---------- 9. WANTED: centre the headline ---------- */ html body .wanted-empty,html body .buy-offer-empty,html body .without-content, html body .wanted-list-empty{text-align:center!important;} html body .wanted-empty p,html body .wanted-empty h2,html body .wanted-empty h3, html body .without-content p,html body .without-content h3,html body .without-content h4, html body .buy-offer-empty p,html body .buy-offer-empty h3{text-align:center!important; margin-left:auto!important;margin-right:auto!important;} /* ---------- 10. ACCOUNT: Location and Business type were touching ---------- */ html body .profile-page .profile_info_block>div,html body .profile-page .info-row, html body .profile-page .business-type-blc,html body .profile-page .location-blc, html body .edit_profile_info>.row{margin-bottom:18px!important;} html body .profile-page .title-blc,html body .profile-page .info__title{margin-top:18px!important;} html body .profile-page .add-link{display:inline-block!important;margin-top:6px!important;} /* ================================================================ v20 - verification pass on v19, all measured on staging. ================================================================ */ /* chat composer: .message_textarea_block was position:fixed, so it sat OUTSIDE the thread's flex column - the form collapsed to 17px and the message list scrolled underneath it. Put it back in flow as the column's last row. */ html body.chat-thread-open .messages-text-form{height:auto!important;min-height:0!important; padding:0!important;border-top:0!important;} html body.chat-thread-open .message_textarea_block{position:relative!important; left:auto!important;right:auto!important;bottom:auto!important;width:auto!important; flex:0 0 auto!important;display:flex!important;align-items:flex-end!important;gap:8px!important; padding:8px 12px calc(8px + env(safe-area-inset-bottom))!important; border-top:1px solid #eef1ee!important;background:#fff!important;} html body.chat-thread-open .message_textarea_block textarea{flex:1 1 auto!important; min-height:44px!important;max-height:120px!important;font-size:16px!important; border-radius:22px!important;padding:11px 14px!important;background:#f0f2f0!important; border:0!important;resize:none!important;margin:0!important;} /* header: burger stays hard left, search sits next to it (logo is centred) */ html body .burger-menu{order:-2!important;margin-left:4px!important;} html body .m-search-toggle{order:-1!important;} /* menu avatar: real class is .colorful-placeholder, not navigation-menu_link__avatar. Initials were 13px in a 52px circle. */ html body .navigation.mobile-open .navigation-menu_link .colorful-placeholder{ width:52px!important;height:52px!important;font-size:19px!important;font-weight:700!important; line-height:1!important;} /* even 56px rhythm for every menu row (the Sell/Wanted group was on 66px) */ html body .navigation.mobile-open .navigation-list>li,html body .navigation.mobile-open .navigation-list>li>a{ margin:0!important;padding-top:0!important;padding-bottom:0!important;height:56px!important; min-height:56px!important;} html body .navigation.mobile-open .navigation-list{margin:0!important;padding:0!important;} /* filter pill row: the fixed body must not leave 32px of ghost height behind */ /* v20's height:36px fought .filter-item's inherited padding:16px 0 - see v29 */ /* caret optical centring inside the 36px select */ html body .product-filter-selects .select-field-wrap::after{margin-top:-4px!important;} /* card: trim the last few px so height lands next to the app's ~280 */ html body .product-grid .grid-item .product_footer{padding:8px 12px 10px!important;} html body .product-grid .grid-item .product_footer-info{margin:0!important;} /* v20a - .burger-menu is a CHILD of .navigation, so the closed menu must NOT be display:none (that would kill the button). The original CSS already governs the closed state; v19/v20 only had to stop overriding it. */ /* v22 - .burger-menu lives inside .navigation and .m-search-toggle lives in the header, so they are not flex siblings and `order` could never swap them. Pin both explicitly: burger hard left, search beside it, logo stays centred. */ html body .header-main .burger-menu,html body .navigation:not(.mobile-open) .burger-menu{ position:absolute!important;left:10px!important;top:50%!important; transform:translateY(-50%)!important;margin:0!important;order:0!important;z-index:3!important;} html body .m-search-toggle{position:absolute!important;left:58px!important;top:50%!important; transform:translateY(-50%)!important;margin:0!important;order:0!important;z-index:3!important;} html body .navigation.mobile-open .burger-menu{position:static!important;transform:none!important;} /* ================================================================ v23 - product card rebuilt from PIXEL MEASUREMENTS of the app, not estimates. Source: native 1180x2556 app frame (@3x, /3 = CSS px). photo height 175.3 (row1 y220.7-396.0, row2 y505.0-680.3) card row pitch 284.3 -> card height ~274 with a 10px row gap card width ~186 (left card 5.3-192.7, gutter ~10) title cap-height 12.33 -> 18px/700 ('N' of "Nylon") price glyph h 11.67 -> 15px/700 ('$' is taller than cap, yet measured SHORTER than the title cap, so price < title for certain) address cap-height 8.00 -> 12px, line pitch 14.67 -> line-height 1.3 Applied to EVERY card, not just the home grid: the founder pointed out that the Account and Seller pages kept the old sizes. ================================================================ */ html body .product-grid{gap:10px!important;padding-left:6px!important;padding-right:6px!important;} html body .product-grid .grid-item{width:calc(50% - 5px)!important; max-width:calc(50% - 5px)!important;flex:0 0 calc(50% - 5px)!important;} /* geometry + type for cards ANYWHERE (home, account, seller, similar offers) */ html body .grid-item .imgholder,html body .grid-item .imgholder img, html body .grid-item .imgholder.video_wrapper{height:175px!important; width:100%!important;object-fit:cover!important;} html body .grid-item .product_footer{padding:8px 12px 11px!important;} html body .grid-item .grid_product_header{margin:0!important;text-align:left!important;} html body .grid-item h2.name{margin:0!important;padding:0!important;} html body .grid-item .name-product{font-size:18px!important;font-weight:700!important; line-height:1.25!important;color:#1c2b21!important;text-align:left!important; display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden!important;} html body .grid-item .product_footer-info{margin:0!important;padding:0!important;} html body .grid-item .product-price-grid{font-size:15px!important;font-weight:700!important; line-height:1.3!important;color:#10973e!important;text-align:left!important; margin:3px 0 2px!important;white-space:nowrap!important;overflow:hidden!important; text-overflow:ellipsis!important;} html body .grid-item .product-location-grid{font-size:12px!important;font-weight:400!important; line-height:1.3!important;color:#8a978f!important;text-align:left!important;margin:0!important; display:-webkit-box!important;-webkit-line-clamp:2;-webkit-box-orient:vertical; overflow:hidden!important;} html body .grid-item .verified-block{margin:5px 0 0!important;} html body .grid-item .verified-text{font-size:11px!important;} /* slider cards still fill their own slide */ html body .products-slider-blc .swiper-slide .grid-item{width:100%!important; max-width:100%!important;flex:1 1 auto!important;margin:0!important;} /* ================================================================ v24 - from the founder's logged-in screenshot. ================================================================ */ /* ---- FILTER ROW: only broken when LOGGED IN ---- as a guest the row holds 3 pills and fits. Logged in it also holds "Clear filters" and the "Fulfilled by Scrapo" toggle, and flex:1 1 0 crushed the pills into an overlapping pile. Pills keep their width; the two extras get their own line. */ html body .filter-inner{align-items:flex-start!important;row-gap:10px!important;} html body .filter-item{flex:1 1 auto!important;min-width:98px!important;max-width:none!important;} html body .reset-blc,html body .filter-fulfilled{flex:0 0 auto!important; width:auto!important;min-width:0!important;align-self:center!important;} html body .reset-blc{order:9!important;flex-basis:100%!important;} /* forces a line break */ html body .filter-fulfilled{order:10!important;margin-left:auto!important;} html body .reset-blc .button{padding:0!important;text-align:left!important;} /* ---- TYPOGRAPHY: the app is SF Pro throughout; the site mixed Roboto for the body with -apple-system for card titles, which is why the title read as a different font. One system stack everywhere on mobile. ---- */ html body,html body input,html body select,html body textarea,html body button, html body .grid-item,html body .grid-item .name-product, html body .grid-item .product-price-grid,html body .grid-item .product-location-grid{ font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","Segoe UI",Roboto, Helvetica,Arial,sans-serif!important;} /* the app's card title is semibold, not full bold */ html body .grid-item .name-product{font-weight:600!important;letter-spacing:-0.2px!important;} html body .grid-item .product-price-grid{font-weight:600!important;} /* ---- SEARCH ICON: the app puts it at the RIGHT edge, opposite the burger ---- */ html body .m-search-toggle{left:auto!important;right:10px!important;} /* v25 - card width: the app's cards are ~186 wide with ~5px page margins, but .wrapper_margin adds 16px each side, so ours came out 170. Pull the grid back out to the screen edges. */ html body .product-grid{margin-left:-10px!important;margin-right:-10px!important; padding-left:0!important;padding-right:0!important;gap:10px!important;} html body .product-grid .grid-item{width:calc(50% - 5px)!important; max-width:calc(50% - 5px)!important;flex:0 0 calc(50% - 5px)!important;} /* v25b - premium banner: title on one line, one short line underneath */ html body .promo-line-inner-text p{white-space:nowrap!important;overflow:hidden!important; text-overflow:ellipsis!important;-webkit-line-clamp:none!important;display:block!important;} html body .promo-line-inner-text p:first-child b{font-size:15px!important;font-weight:700!important;} html body .promo-line-inner-text p:last-child{font-size:12px!important;opacity:.9;margin-top:2px!important;} /* v26 - founder: hide the "Fulfilled by Scrapo" toggle on mobile entirely. With it gone the row is just the three pills plus Clear filters. */ html body .filter-fulfilled{display:none!important;} html body .reset-blc{order:9!important;flex-basis:auto!important;margin-left:auto!important;} /* v27 - with "Fulfilled by Scrapo" gone the row is 3 pills + Clear filters. Three equal thirds on line 1; Clear filters always on its own line so it can never squeeze them (that squeeze was the logged-in overlap the founder saw). */ html body .filter-item{flex:1 1 0!important;min-width:0!important;max-width:none!important;} html body .reset-blc{order:9!important;flex-basis:100%!important;width:100%!important; margin:0!important;align-self:flex-start!important;} /* ================================================================ v28 - three regressions from the founder's logged-in device. ================================================================ */ /* ---- 1. SEARCH DISAPPEARED (my bug) ---- v24 hid every child of .header-main while searching, but #search-form is nested at .header-main > .content-center > .header-main-inner > form, so the rule hid the search form's own ancestor. The fixed form already paints an opaque white bar over the header, so nothing needs hiding at all. */ html body.search-open .header-main>*, html body.search-open .header-main .content-center, html body.search-open .header-main .header-main-inner{visibility:visible!important;} html body.search-open .main_search_form,html body.search-open #search-form{ visibility:visible!important;opacity:1!important;pointer-events:auto!important;} /* ---- 2. FILTERS ON TWO LINES ---- the three pills were on line 1 and "Clear" wrapped onto line 2. One row, no wrapping: three equal pills plus a compact Clear link. */ html body .filter-inner{flex-wrap:nowrap!important;gap:6px!important; padding:10px!important;align-items:center!important;row-gap:0!important;} html body .filter-item{flex:1 1 0!important;min-width:0!important;max-width:none!important;} html body .filter-item-header{font-size:13px!important;padding:0 6px!important; gap:2px!important;justify-content:center!important;overflow:hidden!important; text-overflow:ellipsis!important;white-space:nowrap!important;} html body .reset-blc{order:9!important;flex:0 0 auto!important;flex-basis:auto!important; width:auto!important;margin:0!important;align-self:center!important;} html body .reset-blc .button{font-size:13px!important;padding:0 2px!important; white-space:nowrap!important;min-width:0!important;} /* ---- 3. PREMIUM BANNER ON THE PRODUCT PAGE ---- it sat as a floating pill inside a white card (card padding + its own margin), and v25b's nowrap+ellipsis was cutting both lines short. Let the text breathe and let the band span its container. */ html body .promo-line-inner-text p{white-space:normal!important;overflow:visible!important; text-overflow:clip!important;} html body .promo-line-inner-text p:first-child b{font-size:15px!important; font-weight:700!important;line-height:1.25!important;} html body .promo-line-inner-text p:last-child{font-size:12px!important;opacity:.9; margin-top:2px!important;line-height:1.3!important;} html body .product-view-inner .promo-line,html body .product-view .promo-line{ margin:14px 0!important;padding:0!important;width:auto!important;} html body .promo-line-inner{align-items:center!important;gap:12px!important; padding:12px 14px!important;border-radius:12px!important;} html body .promo-line-inner-text{flex:1 1 auto!important;min-width:0!important; letter-spacing:0!important;} html body .promo-line-inner>a{flex:0 0 auto!important;margin-left:0!important; border-bottom:0!important;} /* ================================================================ v29 - the filter pills overlapped as soon as one was selected. ROOT CAUSE: .filter .filter-item ships padding:16px 0 from the desktop sheet, and v20 forced height:36px on top of it. 36px of box with 32px of vertical padding left ~4px of content, so each pill overflowed its own box - they collided with each other and sat pinned to the bottom of the white strip instead of centred in it. ================================================================ */ html body .filter-item{padding:0!important;margin:0!important; height:auto!important;min-height:36px!important; display:flex!important;align-items:center!important;box-sizing:border-box!important;} html body .filter-item-header{width:100%!important;box-sizing:border-box!important; margin:0!important;} html body .filter-inner{align-items:center!important;min-height:56px!important; padding:10px!important;} /* Apply sat behind the bottom tab bar: .header-main is a sticky z-index:1300 stacking context, so the sheet's 1450 could not beat the 1400 tab bar. Lift the sheet and take the tab bar out of the way while it is open. */ html body .filter-item .filter-item-body{z-index:2147483000!important;} html body.m-filter-open .m-tabbar{display:none!important;} html body.m-filter-open{overflow:hidden!important;} /* ================================================================ v30 - avatars: one rule that makes every profile picture a true circle. The seller hero (.info_block_img) and .review_item-avatar carried object-fit:fill with aspect-ratio:auto, so any non-square photo rendered as an oval (measured one at 40x46). ================================================================ */ html body .info_block_img,html body .review_item-avatar, html body .colorful-placeholder,html body .navigation-menu_link__avatar, html body .profile_placeholder,html body .mainTopProfileImage_placeholder, html body img.rounded,html body .rounded-corner,html body .border_rounded, html body .placeholder-img,html body .user-avatar,html body .avatar{ border-radius:50%!important;aspect-ratio:1/1!important; object-fit:cover!important;overflow:hidden!important; flex:0 0 auto!important;box-sizing:border-box!important; background-size:cover!important;background-position:center!important;} /* and the inside those wrappers must fill the circle, not stretch */ html body .info_block_img img,html body .review_item-avatar img, html body .colorful-placeholder img,html body .profile_placeholder img, html body .rounded-corner img,html body .border_rounded img{ width:100%!important;height:100%!important;object-fit:cover!important; border-radius:50%!important;display:block!important;} /* keep the initials centred inside the circle */ html body .colorful-placeholder{display:inline-flex!important; align-items:center!important;justify-content:center!important; line-height:1!important;text-align:center!important;padding:0!important;} /* v31 - Cancel in the search overlay (the app has one). Without it there was no way to leave search once opened. */ html body .m-search-cancel{display:none;} html body.search-open .m-search-cancel{display:inline-flex!important;align-items:center!important; flex:0 0 auto!important;background:none!important;border:0!important;padding:0 4px 0 10px!important; color:#10973e!important;font-size:16px!important;font-weight:600!important; min-height:44px!important;white-space:nowrap!important;} /* the suggestion sheet must never cover the page when it has nothing to show */ html body #searchtext:empty,html body #searchtext{max-height:60vh!important;overflow-y:auto!important;} html body.search-open #append_here:empty{display:none!important;} /* ================================================================ v32 - founder QA: chip alignment, premium tag, card title size. ================================================================ */ /* ---- filter chips: text drifted left once a count appeared ---- the header is a centred flex row; with "Category (2)" the content grew wider than the pill, so centring pushed the overflow off BOTH edges and the label read as left-shifted. Smaller type + tighter padding keeps it inside. */ html body .filter-item-header{font-size:12px!important;padding:0 4px!important; gap:3px!important;justify-content:center!important;text-align:center!important; letter-spacing:-0.1px!important;} html body .filter-item-header .count{margin:0!important;font-size:12px!important;flex:0 0 auto!important;} html body .filter-item-header .caret{flex:0 0 auto!important;margin-left:1px!important;} /* ---- premium / verified tag on cards ---- the inline SVG (a green rounded square with a white star) rendered as a blob at badge size. Text-only pill reads cleanly. */ html body .grid-item .verified-block svg, html body .products-slider-blc .swiper-slide .verified-block svg{display:none!important;} html body .grid-item .verified-block,html body .products-slider-blc .swiper-slide .verified-block{ padding:2px 8px!important;border-radius:9px!important;margin:5px 0 0!important; background:#e7f5ec!important;line-height:1!important;} html body .grid-item .verified-text,html body .products-slider-blc .swiper-slide .verified-text{ font-size:10px!important;font-weight:700!important;letter-spacing:.2px!important; text-transform:uppercase!important;color:#10973e!important;} /* ---- product card title: founder asked for it smaller again ---- */ html body .product-grid .grid-item .name-product, html body .grid-item .name-product, html body .product-grid .grid-item h2.name{font-size:16px!important;line-height:1.25!important;} /* ---- premium banner copy is now two short lines; keep them tidy ---- */ html body .promo-line-inner-text p:first-child b{font-size:15px!important;} html body .promo-line-inner-text p:last-child{font-size:12px!important;} /* v33 - Wanted page: the real classes are .img-blc_* (my v19 guess at .wanted-empty / .without-content never matched anything here). */ html body .img-blc{text-align:center!important;} html body .img-blc_title,html body .img-blc_header-text,html body .img-blc_description{ text-align:center!important;margin-left:auto!important;margin-right:auto!important; display:block!important;width:auto!important;max-width:100%!important;} html body .img-blc_title{font-size:20px!important;font-weight:700!important;color:#10973e!important;} html body .img-blc_header-text{font-size:16px!important;font-weight:700!important; color:#1c2b21!important;margin-top:14px!important;} html body .img-blc_description{font-size:14px!important;line-height:1.4!important; color:#8a978f!important;margin-top:8px!important;} html body .img-blc svg{display:block!important;margin:16px auto!important;} /* v34 - search overlay: field fills the bar, Cancel pinned to the far right. The field lives inside .input_switch_container, which wasn't flexing, so Cancel ended up beside it on the left instead of at the edge. */ html body.search-open .main_search_form,html body.search-open #search-form{ flex-direction:row!important;flex-wrap:nowrap!important;} html body.search-open .input_switch_container{flex:1 1 auto!important;min-width:0!important; order:0!important;display:block!important;width:auto!important;margin:0!important;} html body.search-open .input_switch_container>label{display:block!important;width:100%!important;} html body.search-open .m-search-cancel{order:99!important;margin-left:auto!important; padding:0 2px 0 12px!important;} html body.search-open .switch_position{order:98!important;} /* ================================================================ v35 - Account page, founder QA. ================================================================ */ /* ---- Location block: address in black, Change smaller and green ---- */ html body .change-loc,html body .change-loc .profile-address,html body .change-loc p{ color:#1c2b21!important;} html body .profile_inner_block_header_change,html body .change-loc .change, html body a.change-address{font-size:13px!important;color:#10973e!important; font-weight:600!important;line-height:1.2!important;} /* ---- Business type must read exactly like Business description ---- it carried border-left:1px #e1e1e1 and padding-left:30px, so it sat indented with a rule down its side; .change-loc also drew a border-bottom separator between the two. Both removed, same left edge, same type. ---- */ html body .business-type{border-left:0!important;border-right:0!important; padding:15px 0 0 0!important;margin:0!important;font-size:15px!important; color:rgba(0,0,0,.87)!important;} html body .change-loc{border-bottom:0!important;padding-bottom:0!important;} html body .business-type>*,html body .description>*{margin-left:0!important;} html body .business-type .profile-title,html body .description .profile-title, html body .business-type>div:first-child,html body .description>div:first-child{ font-size:15px!important;font-weight:700!important;color:#1c2b21!important; margin-bottom:6px!important;} /* ---- "I follow" / followers list ---- the wrapper measured 40x52 with border-radius:50% - THAT was the oval, not the placeholder inside it (which was already a 52x52 circle). And .profile-tooltip sat at left:20px with translateX(-70px), landing at x=-22, off the left edge of the screen and unreadable. On a phone a hover tooltip is the wrong affordance anyway: show the name under the avatar. ---- */ html body .tab-user-list{display:flex!important;flex-wrap:wrap!important; gap:14px 10px!important;padding:0!important;margin:0!important;list-style:none!important;} html body .tab-user-list li{width:72px!important;margin:0!important;float:none!important; display:flex!important;flex-direction:column!important;align-items:center!important; text-align:center!important;position:relative!important;} html body .tab-user-list li>a{width:52px!important;height:52px!important; min-width:52px!important;flex:0 0 auto!important;border-radius:50%!important; overflow:hidden!important;display:block!important;padding:0!important;margin:0!important;} html body .tab-user-list li>a>*,html body .tab-user-list li>a img{ width:52px!important;height:52px!important;border-radius:50%!important; object-fit:cover!important;} html body .tab-user-list .profile-tooltip{position:static!important;transform:none!important; left:auto!important;right:auto!important;top:auto!important;bottom:auto!important; display:block!important;width:100%!important;max-width:100%!important; background:none!important;box-shadow:none!important;border:0!important; padding:0!important;margin:6px 0 0!important;opacity:1!important;visibility:visible!important;} html body .tab-user-list .profile-tooltip .name{font-size:11px!important;line-height:1.2!important; color:#1c2b21!important;white-space:nowrap!important;overflow:hidden!important; text-overflow:ellipsis!important;margin:0!important;} html body .tab-user-list .profile-tooltip p:not(.name), html body .tab-user-list .profile-tooltip span{display:none!important;} html body .tab-user-list li .indicator{position:absolute!important;top:38px!important; left:50%!important;margin-left:12px!important;} /* ================================================================ v37 - founder screenshots: menu alignment, Apply behind the tab bar, mismatched card heights on the seller page. ================================================================ */ /* ---- 1. BURGER MENU: Sell / Wanted / Notifications sat 16px left of the account rows, because .navigation-menu carries 16px side padding and .navigation-list does not. Strip it from the block, put it on the rows, so every item shares one left edge. ---- */ html body .navigation.mobile-open .navigation-menu{padding-left:0!important;padding-right:0!important;} html body .navigation.mobile-open .navigation-menu_link{padding:0 16px!important;} html body .navigation.mobile-open .sub-menu>li>a, html body .navigation.mobile-open .navigation-list>li>a{padding-left:16px!important; padding-right:16px!important;} /* ---- 2. FILTER SHEET: do not depend on JS to clear the tab bar. Anchoring the sheet above the tab bar keeps Reset/Apply reachable even if body.m-filter-open never gets set. ---- */ html body .filter-item .filter-item-body{ bottom:calc(56px + env(safe-area-inset-bottom))!important; max-height:calc(72vh - 56px)!important; border-radius:16px!important; padding-bottom:12px!important;} html body.m-filter-open .filter-item .filter-item-body{ bottom:0!important;max-height:72vh!important; border-radius:16px 16px 0 0!important; padding-bottom:calc(16px + env(safe-area-inset-bottom))!important;} /* ---- 3. CARD HEIGHTS: rows must match even when a video card sits beside a photo card. ---- */ html body .product-grid{align-items:stretch!important;} html body .products-slider-blc .swiper-wrapper{align-items:stretch!important;} html body .grid-item{display:flex!important;flex-direction:column!important;} html body .grid-item .product_footer{flex:1 1 auto!important;} html body .grid-item .imgholder{flex:0 0 auto!important;overflow:hidden!important; background:#f0f2f0!important;} html body .grid-item .imgholder img{width:100%!important;height:175px!important; object-fit:cover!important;display:block!important;} /* v38 - empty inbox state */ html body .m-empty-inbox{text-align:center!important;padding:64px 24px 120px!important;} html body .m-empty-inbox svg{display:block;margin:0 auto 18px;} html body .m-empty-inbox_title{font-size:18px!important;font-weight:700!important; color:#1c2b21!important;margin:0 0 8px!important;} html body .m-empty-inbox_text{font-size:14px!important;line-height:1.45!important; color:#8a978f!important;margin:0 auto 24px!important;max-width:280px!important;} html body .m-empty-inbox_cta{display:inline-flex!important;align-items:center!important; justify-content:center!important;min-height:50px!important;padding:0 28px!important; background:#10973e!important;color:#fff!important;border-radius:10px!important; font-size:16px!important;font-weight:700!important;} /* v39 - home premium banner: full-bleed green band, no white card behind it. .promo-line sits inside .wrapper_margin (16px sides); pull it back out to both screen edges and drop the card chrome. */ html body .promo-line{margin:12px -16px!important;padding:0!important;width:auto!important; max-width:none!important;background:transparent!important;box-shadow:none!important; border-radius:0!important;} html body .promo-line-inner{border-radius:0!important;padding:14px 16px!important; margin:0!important;width:auto!important;box-shadow:none!important;} /* the product page keeps a small inset so it lines up with the card content */ html body .product-view-inner .promo-line{margin:14px -16px!important;} /* ================================================================ v40 - chat thread rebuilt against the native app. Measured from the app frame at t=40s (1180x2556 @3x): header = back chevron | round product thumb | product title (bold) / seller name / country chips = green outlined pills under the header empty = centred grey "Type a question to start conversation..." composer= flat light band, paperclip LEFT, then the field, then a rounded-square green send button (~46px) on the right ================================================================ */ /* ---- header ---- */ html body.chat-thread-open .name-seller.m-chat-head{ display:flex!important;align-items:center!important;gap:10px!important; padding:8px 12px!important;background:#fff!important; border-bottom:1px solid #eef1ee!important;} html body.chat-thread-open .m-chat-back{flex:0 0 auto!important;width:32px!important; height:44px!important;display:inline-flex!important;align-items:center!important; justify-content:flex-start!important;color:#10973e!important;} html body.chat-thread-open .m-chat-thumb{flex:0 0 auto!important;width:52px!important; height:52px!important;border-radius:50%!important;overflow:hidden!important; display:block!important;background:#f0f2f0!important;} html body.chat-thread-open .m-chat-thumb img{width:52px!important;height:52px!important; object-fit:cover!important;border-radius:50%!important;display:block!important;} html body.chat-thread-open .m-chat-meta{flex:1 1 auto!important;min-width:0!important;} html body.chat-thread-open .m-chat-product{font-size:16px!important;font-weight:700!important; color:#1c2b21!important;line-height:1.2!important;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important;} html body.chat-thread-open .m-chat-seller{display:block!important;font-size:15px!important; color:#1c2b21!important;line-height:1.3!important;white-space:nowrap!important; overflow:hidden!important;text-overflow:ellipsis!important;margin-top:1px!important;} html body.chat-thread-open .m-chat-seller span{font-size:15px!important;} html body.chat-thread-open .m-chat-country{font-size:14px!important;color:#8a978f!important; line-height:1.3!important;white-space:nowrap!important;overflow:hidden!important; text-overflow:ellipsis!important;} /* ---- action chips ---- */ html body.chat-thread-open .m-chat-chips{flex:0 0 auto!important;display:flex!important; gap:8px!important;padding:10px 12px!important;overflow-x:auto!important; background:#fff!important;border-bottom:1px solid #eef1ee!important; scrollbar-width:none;-webkit-overflow-scrolling:touch;} html body.chat-thread-open .m-chat-chips::-webkit-scrollbar{display:none;} html body.chat-thread-open .m-chip{flex:0 0 auto!important;display:inline-flex!important; align-items:center!important;height:32px!important;padding:0 14px!important; border:1.5px solid #10973e!important;border-radius:16px!important; color:#10973e!important;font-size:14px!important;font-weight:500!important; white-space:nowrap!important;background:#fff!important;} /* ---- empty thread: the app's wording, centred ---- */ html body.chat-thread-open .message_page_block_inner:empty::before, html body.chat-thread-open .message_page_block_inner .empty_block_message{ display:block;text-align:center;color:#8a978f;font-size:15px;line-height:1.45; padding:0 48px;} html body.chat-thread-open .message_page_block_inner:empty{ display:flex!important;align-items:center!important;justify-content:center!important;} html body.chat-thread-open .message_page_block_inner:empty::before{ content:"Type a question to start conversation with this seller";} /* ---- composer: full width, paperclip left, square green send right ---- */ html body.chat-thread-open .message_textarea_block{ display:flex!important;align-items:center!important;gap:10px!important; padding:10px 12px calc(10px + env(safe-area-inset-bottom))!important; background:#f7f8f7!important;border-top:1px solid #e5e5e5!important;} html body.chat-thread-open .message_textarea_block-inner{ flex:1 1 auto!important;min-width:0!important;width:auto!important; display:flex!important;align-items:center!important;gap:8px!important; flex-direction:row-reverse!important; /* paperclip label sits first */ margin:0!important;padding:0!important;background:transparent!important;} html body.chat-thread-open .message_textarea_block-inner textarea{ flex:1 1 auto!important;width:auto!important;min-width:0!important; min-height:44px!important;max-height:120px!important;font-size:16px!important; line-height:1.35!important;padding:11px 12px!important;margin:0!important; background:transparent!important;border:0!important;box-shadow:none!important; resize:none!important;color:#1c2b21!important;} html body.chat-thread-open .message_textarea_block-inner label{ flex:0 0 auto!important;width:28px!important;height:28px!important;margin:0!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; position:static!important;color:#10973e!important;} html body.chat-thread-open .message_textarea_block-inner label svg{width:22px!important; height:22px!important;} html body.chat-thread-open .textarea_send_button{flex:0 0 auto!important; width:46px!important;height:46px!important;margin:0!important;padding:0!important;} html body.chat-thread-open .textarea_send_button button{width:46px!important; height:46px!important;border-radius:10px!important;background:#10973e!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; padding:0!important;border:0!important;} html body.chat-thread-open .textarea_send_button button[disabled]{background:#a8d5b8!important;} html body.chat-thread-open .textarea_send_button button svg{width:24px!important;height:24px!important;} /* v41 - the composer bar was 318px inside a 392px form: my earlier v20 rule pinned .message_textarea_block to flex:0 0 auto, so it never filled the row. */ html body.chat-thread-open .messages-text-form{width:auto!important;display:flex!important;} html body.chat-thread-open .message_textarea_block{flex:1 1 auto!important; width:100%!important;box-sizing:border-box!important;} html body.chat-thread-open .message_textarea_block-inner{flex:1 1 auto!important; width:auto!important;} /* v42 - embedded Stripe Checkout sheet (no redirect => nothing for iOS Universal Links to intercept on the way back from Stripe) */ html body .m-stripe-checkout{position:fixed;inset:0;z-index:2147483000;background:#fff; display:flex;flex-direction:column;} html body .m-stripe-checkout[hidden]{display:none!important;} html body .m-stripe-checkout_head{flex:0 0 auto;display:flex;align-items:center;gap:8px; min-height:52px;padding:0 12px calc(0px + env(safe-area-inset-top)); border-bottom:1px solid #eef1ee;font-size:17px;font-weight:700;color:#10973e;} html body .m-stripe-checkout_close{width:40px;height:40px;border:0;background:none; font-size:28px;line-height:1;color:#1c2b21;padding:0;margin-left:-6px;} html body #m-stripe-checkout_mount{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:8px 0 calc(16px + env(safe-area-inset-bottom));} html body .m-stripe-checkout_done{text-align:center;padding:48px 24px;} html body .m-stripe-checkout_tick{width:64px;height:64px;border-radius:50%;background:#10973e; color:#fff;font-size:34px;line-height:64px;margin:0 auto 16px;} html body .m-stripe-checkout_done h3{font-size:22px;font-weight:700;margin:0 0 6px;color:#1c2b21;} html body .m-stripe-checkout_done p{color:#8a978f;font-size:15px;margin:0 0 22px;} html body .m-stripe-checkout_done .button{display:inline-flex;align-items:center;justify-content:center; min-height:50px;padding:0 28px;border-radius:10px;background:#10973e;color:#fff;font-weight:700;} html body.m-checkout-open{overflow:hidden!important;} html body.m-checkout-open .m-tabbar{display:none!important;} } /* ================================================================ CHAT v2 (web: mobile + desktop) - v44 Deliberately OUTSIDE the 767px media query: the founder asked for the same chat on desktop, so this is one responsive system. Mobile = one pane at a time. Desktop >=900px = inbox + thread. Legacy .message_page_block rules are untouched (search view). ================================================================ */ body.m-chat-v2 .footer{display:none!important;} body.m-chat-v2 .m-chat-app{display:flex;background:#f4f6f4;} /* ---------- inbox pane ---------- */ .m-chat-app .m-inbox{display:flex;flex-direction:column;min-height:0;background:#fff;} .m-chat-app .m-inbox-head{flex:0 0 auto;padding:14px 16px 10px;} .m-chat-app .m-inbox-head h1{margin:0;font-size:20px;font-weight:700;color:#10973e;} .m-chat-app .m-inbox-search{flex:0 0 auto;display:flex;align-items:center;gap:8px;margin:0 12px 10px; padding:0 12px;height:40px;background:#f0f2f0;border-radius:12px;color:#8a978f;} .m-chat-app .m-inbox-search input{flex:1 1 auto;min-width:0;border:0;background:none;font-size:15px;color:#1c2b21;outline:none;} .m-chat-app .m-inbox-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;} .m-chat-app .m-inbox-empty{padding:40px 24px;text-align:center;color:#8a978f;font-size:15px;} .m-chat-app .m-inbox-item{display:flex;align-items:center;gap:12px;padding:12px 16px; border-bottom:1px solid #f0f2f0;text-decoration:none;color:inherit;} .m-chat-app .m-inbox-item.active{background:#f2f8f4;} .m-chat-app .m-inbox-thumb{flex:0 0 auto;width:52px;height:52px;border-radius:50%;overflow:hidden;background:#f0f2f0;display:block;} .m-chat-app .m-inbox-thumb img{width:52px;height:52px;object-fit:cover;display:block;} .m-chat-app .m-inbox-main{flex:1 1 auto;min-width:0;display:block;} .m-chat-app .m-inbox-top{display:flex;align-items:baseline;gap:8px;} .m-chat-app .m-inbox-top b{flex:1 1 auto;min-width:0;font-size:16px;font-weight:700;color:#1c2b21; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .m-chat-app .m-inbox-top i{flex:0 0 auto;font-style:normal;font-size:12px;color:#8a978f;} .m-chat-app .m-inbox-name{display:block;font-size:14px;color:#1c2b21;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .m-chat-app .m-inbox-prev{display:block;font-size:13px;color:#8a978f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .m-chat-app .m-inbox-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:10px; background:#10973e;color:#fff;font-size:12px;font-weight:700;display:inline-flex;align-items:center;justify-content:center;} /* unread pip on the bottom tab bar */ .m-tabbar a{position:relative;} .m-tab-badge{position:absolute;top:2px;left:calc(50% + 6px);min-width:18px;height:18px;padding:0 5px; border-radius:9px;background:#e02b2b;color:#fff;font-size:11px;font-weight:700; display:inline-flex;align-items:center;justify-content:center;} /* ---------- thread pane ---------- */ .m-chat-app .m-chat{display:flex;flex-direction:column;min-height:0;background:#f4f6f4;} .m-chat-app .m-chat-head{flex:0 0 auto;display:flex;align-items:center;gap:10px;padding:8px;background:#fff;border-bottom:1px solid #eef1ee;} .m-chat-app .m-chat-back{flex:0 0 auto;width:34px;height:44px;display:inline-flex;align-items:center;color:#10973e;} .m-chat-app .m-chat-thumb{flex:0 0 auto;width:48px;height:48px;border-radius:50%;overflow:hidden;background:#f0f2f0;} .m-chat-app .m-chat-thumb img{width:48px;height:48px;object-fit:cover;display:block;} .m-chat-app .m-chat-meta{flex:1 1 auto;min-width:0;} .m-chat-app .m-chat-product{font-size:16px;font-weight:700;color:#1c2b21;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .m-chat-app .m-chat-seller{display:flex;align-items:center;gap:6px;font-size:15px;color:#1c2b21;line-height:1.3;text-decoration:none;} .m-chat-app .m-chat-premium{font-size:11px;font-weight:700;color:#10973e;background:#e7f5ec;border-radius:9px;padding:1px 7px;} .m-chat-app .m-chat-country{font-size:13px;color:#8a978f;line-height:1.3;} .m-chat-app .m-chat-chips{flex:0 0 auto;display:flex;gap:8px;padding:10px 12px;overflow-x:auto;background:#fff;border-bottom:1px solid #eef1ee;scrollbar-width:none;} .m-chat-app .m-chat-chips::-webkit-scrollbar{display:none;} .m-chat-app .m-chip{flex:0 0 auto;display:inline-flex;align-items:center;height:32px;padding:0 14px; border:1.5px solid #10973e;border-radius:16px;color:#10973e;font-size:14px;font-weight:500; white-space:nowrap;background:#fff;text-decoration:none;cursor:pointer;} .m-chat-app .m-chip-offer{background:#10973e;color:#fff;} .m-chat-app .m-chat-list{flex:1 1 auto;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:12px 12px 8px;display:flex;flex-direction:column;} .m-chat-app .m-chat-empty{margin:auto;text-align:center;color:#8a978f;font-size:15px;line-height:1.45;padding:0 40px;} .m-chat-app .m-day{text-align:center;margin:10px 0 8px;} .m-chat-app .m-day span{display:inline-block;font-size:12px;color:#8a978f;background:#e9ece9;border-radius:10px;padding:3px 10px;} .m-chat-app .m-sys{align-self:center;max-width:86%;text-align:center;font-size:13px;color:#6d7d73;background:#eef1ee;border-radius:12px;padding:8px 12px;margin:6px 0;} .m-chat-app .m-row{display:flex;align-items:flex-end;gap:8px;margin:8px 0 0;max-width:100%;} .m-chat-app .m-row.grouped{margin-top:3px;} .m-chat-app .m-row.me{justify-content:flex-end;} .m-chat-app .m-row.is-offer{flex-direction:column;align-items:flex-start;} .m-chat-app .m-row.me.is-offer{align-items:flex-end;} .m-chat-app .m-avatar{flex:0 0 auto;width:28px;height:28px;} .m-chat-app .m-avatar>*{width:28px!important;height:28px!important;font-size:11px!important;border-radius:50%!important; display:inline-flex!important;align-items:center!important;justify-content:center!important;} .m-chat-app .m-bubble{max-width:78%;background:#fff;border-radius:18px;padding:9px 12px 6px; box-shadow:0 1px 1px rgba(0,0,0,.05);font-size:16px;line-height:1.35;color:#1c2b21;overflow-wrap:anywhere;} .m-chat-app .m-row.them .m-bubble{border-bottom-left-radius:6px;} .m-chat-app .m-row.me .m-bubble{background:#10973e;color:#fff;border-bottom-right-radius:6px;} .m-chat-app .m-row.me .m-bubble a{color:#fff;text-decoration:underline;} .m-chat-app .m-row.pending .m-bubble{opacity:.7;} .m-chat-app .m-bubble.is-image{padding:4px;} .m-chat-app .m-img img{display:block;max-width:100%;max-height:260px;border-radius:14px;object-fit:cover;} .m-chat-app .m-file{display:inline-flex;align-items:center;gap:8px;font-weight:600;text-decoration:none;color:inherit;} .m-chat-app .m-meta{display:flex;justify-content:flex-end;align-items:center;gap:4px;margin-top:3px;font-size:11px;opacity:.7;} .m-chat-app .m-tick{font-size:11px;letter-spacing:-2px;} .m-chat-app .m-tick.seen{color:#bfe8cf;} .m-chat-app .m-row.them .m-tick{display:none;} /* offers */ .m-chat-app .m-offer{max-width:280px;background:#fff;border:1.5px solid #10973e;border-radius:16px;padding:12px 14px;} .m-chat-app .m-offer-h{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.4px;color:#10973e;} .m-chat-app .m-offer-price{font-size:22px;font-weight:700;color:#1c2b21;margin:4px 0 2px;} .m-chat-app .m-offer-qty{font-size:13px;color:#8a978f;} .m-chat-app .m-offer-actions{display:flex;gap:8px;margin-top:10px;} .m-chat-app .m-offer-status{margin-top:8px;font-size:13px;font-weight:600;color:#8a978f;} .m-chat-app .m-offer-status.is-accepted{color:#10973e;} .m-chat-app .m-offer-status.is-declined{color:#c23b3b;} .m-btn{border:0;border-radius:10px;background:#10973e;color:#fff;font-size:15px;font-weight:700; min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .m-btn-ghost{border:1.5px solid #dfe5e0;border-radius:10px;background:#fff;color:#1c2b21;font-size:15px; min-height:44px;padding:0 18px;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} /* typing */ .m-chat-app .m-chat-typing{flex:0 0 auto;display:flex;align-items:center;gap:4px;padding:4px 16px 8px;color:#8a978f;font-size:12px;} .m-chat-app .m-chat-typing em{font-style:normal;margin-left:4px;} .m-chat-app .m-dot{width:6px;height:6px;border-radius:50%;background:#b3bdb6;display:inline-block;animation:mdot 1.2s infinite;} .m-chat-app .m-dot:nth-child(2){animation-delay:.15s;} .m-chat-app .m-dot:nth-child(3){animation-delay:.3s;} @keyframes mdot{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}} /* quick replies / attachment / composer */ .m-chat-app .m-chat-quick{flex:0 0 auto;display:flex;gap:8px;padding:8px 12px;overflow-x:auto;background:#f4f6f4;scrollbar-width:none;} .m-chat-app .m-chat-quick::-webkit-scrollbar{display:none;} .m-chat-app .m-quick{flex:0 0 auto;height:34px;padding:0 14px;border:1px solid #cfe6d7;border-radius:17px; background:#fff;color:#10973e;font-size:14px;white-space:nowrap;cursor:pointer;} .m-chat-app .m-chat-attach-preview{flex:0 0 auto;display:flex;align-items:center;gap:8px;padding:6px 14px; background:#fff;border-top:1px solid #e5e5e5;font-size:13px;} .m-chat-app .m-chat-attach-name{flex:1 1 auto;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;} .m-chat-app .m-chat-attach-remove{border:0;background:none;font-size:20px;color:#8a978f;width:32px;height:32px;cursor:pointer;} .m-chat-app .m-chat-composer{flex:0 0 auto;display:flex;align-items:flex-end;gap:8px; padding:10px 12px calc(10px + env(safe-area-inset-bottom));background:#f7f8f7;border-top:1px solid #e5e5e5;} .m-chat-app .m-chat-attach,.m-chat-app .m-chat-saved{flex:0 0 auto;width:32px;height:44px; display:inline-flex;align-items:center;justify-content:center;color:#10973e;border:0;background:none;cursor:pointer;} .m-chat-app .m-chat-attach input{display:none;} .m-chat-app .m-chat-input{flex:1 1 auto;min-width:0;min-height:44px;max-height:120px;padding:11px 12px; font-size:16px;line-height:1.35;border:0;border-radius:12px;background:#fff;color:#1c2b21;resize:none; box-shadow:inset 0 0 0 1px #e5e5e5;font-family:inherit;} .m-chat-app .m-chat-input:focus{outline:none;box-shadow:inset 0 0 0 1.5px #10973e;} .m-chat-app .m-chat-send{flex:0 0 auto;width:46px;height:46px;border:0;border-radius:10px;background:#10973e; color:#fff;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;} .m-chat-app .m-chat-send[disabled]{background:#a8d5b8;} /* sheets */ .m-sheet{position:fixed;inset:0;z-index:2147483000;background:rgba(0,0,0,.45);display:flex;align-items:flex-end;justify-content:center;} .m-sheet[hidden]{display:none;} .m-sheet-panel{width:100%;max-width:460px;background:#fff;border-radius:16px 16px 0 0; padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:80vh;overflow-y:auto;} .m-sheet-panel h3{margin:0 0 14px;font-size:18px;font-weight:700;color:#1c2b21;} .m-sheet-panel label{display:block;font-size:14px;font-weight:600;color:#1c2b21;margin-bottom:12px;} .m-sheet-panel input[type=number],.m-sheet-panel input[type=text]{display:block;width:100%;height:48px; margin-top:6px;padding:0 12px;font-size:16px;border:1px solid #dfe5e0;border-radius:10px;box-sizing:border-box;} .m-sheet-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px;} .m-saved-list{margin-bottom:12px;} .m-saved-row{display:flex;align-items:center;gap:8px;margin-bottom:8px;} .m-saved-use{flex:1 1 auto;min-width:0;text-align:left;border:1px solid #dfe5e0;border-radius:10px; background:#fff;padding:10px 12px;font-size:14px;color:#1c2b21;cursor:pointer;} .m-saved-del{flex:0 0 auto;width:36px;height:36px;border:0;background:none;color:#8a978f;font-size:20px;cursor:pointer;} .m-saved-none{color:#8a978f;font-size:14px;margin:0 0 12px;} .m-saved-add{display:flex;gap:8px;margin-bottom:8px;} .m-saved-add input{flex:1 1 auto;min-width:0;height:44px;padding:0 12px;font-size:15px;border:1px solid #dfe5e0;border-radius:10px;} .m-chat-lightbox{position:fixed;inset:0;background:rgba(0,0,0,.92);display:flex;align-items:center;justify-content:center;z-index:2147483001;} .m-chat-lightbox[hidden]{display:none;} .m-chat-lightbox img{max-width:100%;max-height:100%;object-fit:contain;} .m-chat-lightbox-close{position:absolute;top:calc(10px + env(safe-area-inset-top));right:12px;width:44px;height:44px; border:0;border-radius:50%;background:rgba(255,255,255,.15);color:#fff;font-size:28px;cursor:pointer;} /* ---------- MOBILE: one pane at a time, full screen ---------- */ @media screen and (max-width:899px){ body.m-chat-v2 .header-main,body.m-chat-v2 .m-tabbar{display:none!important;} body.m-chat-v2.chat-thread-open .m-tabbar{display:none!important;} body.m-chat-v2 .wrapper_margin,body.m-chat-v2 .wrapper2{padding:0!important;margin:0!important;} .m-chat-app{position:fixed;inset:0;z-index:1200;} .m-chat-app .m-inbox{flex:1 1 auto;width:100%;padding-top:env(safe-area-inset-top);} .m-chat-app .m-chat{display:none;} .m-chat-app.has-thread .m-inbox{display:none;} .m-chat-app.has-thread .m-chat{display:flex;flex:1 1 auto;width:100%;} .m-chat-app .m-chat-head{padding-top:calc(8px + env(safe-area-inset-top));} /* the inbox pane is a top-level screen: keep the app's tab bar reachable */ body.m-chat-v2:not(.chat-thread-open) .m-tabbar{display:flex!important;} body.m-chat-v2:not(.chat-thread-open) .m-chat-app{bottom:56px;} } /* ---------- DESKTOP: two panes side by side ---------- */ @media screen and (min-width:900px){ .m-chat-app{height:calc(100vh - 180px);min-height:520px;max-width:1160px;margin:20px auto; border:1px solid #e5e5e5;border-radius:14px;overflow:hidden;} .m-chat-app .m-inbox{flex:0 0 340px;border-right:1px solid #eef1ee;} .m-chat-app .m-chat{flex:1 1 auto;} .m-chat-app .m-chat-back{display:none;} /* the list is always visible */ .m-chat-app .m-bubble{max-width:62%;} .m-sheet{align-items:center;} .m-sheet-panel{border-radius:16px;} } /* ================================================================ v45 - founder QA 2026-09-12 ================================================================ */ /* ---- 1. empty white block above the chat composer ---- #m-chat-attach-preview and #m-chat-quick carry the `hidden` attribute in the markup, but `hidden` is only `display:none` from the UA stylesheet and a class rule that sets `display:flex` beats it. So the attachment preview rendered as a permanent empty white bar with a stray close button above the input. Other components in this file already guard for it (.m-sheet[hidden], .m-chat-lightbox[hidden]); these two were missed. */ .m-chat-app .m-chat-attach-preview[hidden], .m-chat-app .m-chat-quick[hidden]{display:none!important;} /* ---- 2. bottom tab bar riding up over the keyboard ---- .m-tabbar is position:fixed;bottom:0. On iOS the keyboard shrinks the VISUAL viewport while fixed elements stay pinned to the LAYOUT viewport, so the bar floats up into the middle of the screen on top of the form. Native apps hide the tab bar while typing; do the same. `kb-open` is toggled in default.js. */ html body.kb-open .m-tabbar{display:none!important;} /* ---- 3. Upgrade to Premium: a banner, and clickable everywhere ---- It read as a thin strip and only the "Learn more" text was a link. Give it real vertical presence and stretch the anchor across the whole band so a tap anywhere goes to the payment page. The anchor keeps its visible label; ::after is what makes the surface clickable, so no markup change and no nested anchors. */ html body .promo-line-inner{position:relative!important;padding:20px 16px!important; display:flex!important;align-items:center!important;justify-content:space-between!important; gap:12px!important;min-height:74px!important;} html body .promo-line-inner-text p:first-child b{font-size:17px!important;line-height:1.25!important;} html body .promo-line-inner-text p:last-child{font-size:13px!important;opacity:.92!important; margin-top:2px!important;} html body .promo-line-inner > a{position:static!important;flex:0 0 auto!important; font-weight:600!important;white-space:nowrap!important;text-decoration:underline!important;} html body .promo-line-inner > a::after{content:""!important;position:absolute!important; top:0!important;right:0!important;bottom:0!important;left:0!important;z-index:1!important;} /* ========================================================================== v46 - product page: seller block and premium banner ========================================================================== */ /* ---- 1. the seller avatar is an oval again ---- .user-info-avatar is a flex row (avatar link + name block). style.css sizes the but the around it is the flex item and carries no size of its own, so a long seller name squeezes the link and the circle collapses into an egg. Pin both axes on the link AND on what it contains, stop it shrinking, and crop a non-square photo rather than stretching it. 72px matches the design; the initials placeholder was left at the global 52px, so it is pinned to match. */ html body .user-info-avatar > a{flex:0 0 auto!important;display:block!important; width:72px!important;height:72px!important;line-height:0!important;} html body .user-info-avatar > a img, html body .user-info-avatar > a .colorful-placeholder{ width:72px!important;height:72px!important; min-width:72px!important;max-width:72px!important; border-radius:50%!important; object-fit:cover!important;object-position:center!important; flex:0 0 auto!important;} /* the initials placeholder is a div, so centre its text by hand */ html body .user-info-avatar > a .colorful-placeholder{ display:flex!important;align-items:center!important;justify-content:center!important; font-size:22px!important;line-height:1!important;text-transform:uppercase;} /* ---- 2. Follow / View Profile on two lines ---- style.css turns .user-info-footer into a column below 500px, so the two buttons stack. Keep them on one row, share the width evenly, and leave a gap. */ html body .user-info-footer{display:flex!important;flex-direction:row!important; align-items:center!important;gap:10px!important;} html body .user-info-footer > .button, html body .user-info-footer > button.button, html body .user-info-footer > a.button{ flex:1 1 0!important;width:auto!important;min-width:0!important; margin:0!important;padding:10px 8px!important; font-size:14px!important;line-height:1.2!important;font-weight:600!important; height:auto!important;min-height:42px!important; display:inline-flex!important;align-items:center!important;justify-content:center!important; white-space:nowrap!important;text-align:center!important;} /* ---- 3. premium banner: blue, not green ---- The banner used a green-to-navy gradient, so it read as the same green as the ordinary action buttons. Match the Upgrade to Premium page instead, whose .full-banner is linear-gradient(45deg,#3d4d77,#32426d). */ html body .promo-line-inner{ background:linear-gradient(45deg,#3d4d77 0%,#32426d 100%)!important; box-shadow:0 4px 16px rgba(50,66,109,.24)!important;} html body .promo-line-inner > a{color:#32426d!important;} /* ========================================================================== v47 - the custom openModal() dialog was cropped on phones ========================================================================== This is NOT the Materialize .modal the rules above deal with: default.js builds its own .modalWrapper > .modal-window > .modal-content and sets an inline width in px (400 for the post-submitted dialog), which is wider than a 375px phone - so the box was clipped horizontally. Vertically, mobile.main.css puts overflow:hidden on .modal-content, so anything past the wrapper's height - the OK button - was cut off rather than scrolled to. The wrapper is position:fixed;height:100%, which on iOS means the LAYOUT viewport, taller than the visible area once the browser chrome is showing. */ /* Let the dialog scroll as a whole, and respect the visible viewport. */ html body .modalWrapper.open{ align-items:flex-start!important; overflow-y:auto!important; -webkit-overflow-scrolling:touch; padding:12px 8px calc(12px + env(safe-area-inset-bottom))!important; box-sizing:border-box!important; } @supports (height: 100dvh){ html body .modalWrapper.open{height:100dvh!important;} } /* Beat the inline width:400px - !important in a stylesheet outranks an inline declaration that has none - and never exceed the screen. */ html body .modalWrapper.open .modal-window{ width:auto!important; max-width:calc(100vw - 16px)!important; margin:auto!important; display:flex!important; flex-direction:column!important; max-height:none!important; box-sizing:border-box!important; } /* overflow:hidden here was clipping the footer; let it size to its content. */ html body .modalWrapper .modal-window .modal-content{ overflow:visible!important; padding:18px 16px 20px!important; box-sizing:border-box!important; } /* The action row: full-width, tappable, and never clipped at the bottom. */ html body .modalWrapper .modal_window_content_footer{ margin-top:16px!important;padding-bottom:4px!important;} html body .modalWrapper .modal_window_content_footer .col{ padding:0!important;width:100%!important;} html body .modalWrapper .modal_window_content_footer a.send, html body .modalWrapper .modal_window_content_footer button.send{ display:flex!important;align-items:center!important;justify-content:center!important; width:100%!important;min-height:46px!important;box-sizing:border-box!important; border-radius:10px!important;font-size:16px!important;font-weight:600!important; line-height:1!important;margin:0!important;} /* ========================================================================== v48 - the signup Country field was invisible ========================================================================== materialize.min.css carries `select { display: none; }` and only exempts `select.browser-default`, while `$('select').material_select()` - the call that would build its replacement dropdown - is commented out in default.js. So the country