/* ===== products-seo-hardening.css ===== */
.tf-products-seo-intro{width:calc(100% - 48px);max-width:none;margin:18px auto 20px;padding:20px 22px;border:1px solid #e6e8ec;border-radius:18px;background:#fff}.tf-products-seo-intro h1{margin:0 0 8px;color:#172033;font-size:clamp(24px,2.2vw,38px);line-height:1.15}.tf-products-seo-intro p{max-width:920px;margin:0;color:#60697a;font-size:15px;line-height:1.65}@media(max-width:640px){.tf-products-seo-intro{width:calc(100% - 24px);padding:16px;border-radius:14px}.tf-products-seo-intro h1{font-size:24px}}
/* ===== enterprise-search-v4.css ===== */
/* Sprint 404 — Enterprise Search & Product Discovery */
.tf-search-v4{--search-accent:#f4b942;--search-ink:#0b1739;--search-line:#e5e7eb}
.tf-search-v4 .tf-search-hero{background:#fff;border-bottom:1px solid var(--search-line)}
.tf-search-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:28px;align-items:center}
.tf-search-proof{display:grid;grid-template-columns:repeat(3,minmax(112px,1fr));gap:8px}
.tf-search-proof article{padding:12px;border:1px solid var(--search-line);border-radius:12px;background:#fff}
.tf-search-proof b,.tf-search-proof span{display:block}.tf-search-proof b{color:var(--search-ink)}.tf-search-proof span{font-size:11px;color:#64748b;margin-top:3px}
.tf-search-expansion,.tf-search-discovery-row,.tf-search-trending-inline{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.tf-search-expansion a,.tf-search-discovery-row a,.tf-search-trending-inline a,.tf-zero-v4 a{border:1px solid #ead18e;background:#fffaf0;color:#5d4300;border-radius:999px;padding:6px 10px;text-decoration:none;font-weight:700;font-size:12px}
.tf-search-entity-matches{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:0 0 16px}
.tf-search-entity-matches>div{border:1px solid var(--search-line);border-radius:14px;padding:12px;background:#fff}
.tf-search-entity-matches>div>strong{display:block;margin-bottom:9px;color:var(--search-ink)}
.tf-search-entity-matches>div>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}
.tf-search-entity-matches a{display:grid;gap:2px;padding:9px;border:1px solid #eef0f3;border-radius:10px;text-decoration:none;color:var(--search-ink)}
.tf-search-entity-matches a:hover{border-color:#e0b84c;background:#fffdf7}
.tf-search-entity-matches a span,.tf-search-entity-matches a small{font-size:10px;color:#64748b}.tf-search-entity-matches a b{font-size:13px}
.tf-search-results-head{display:flex;justify-content:space-between;gap:14px;align-items:end;margin-bottom:12px}
.tf-search-results-head span{font-size:10px;font-weight:850;letter-spacing:.13em;color:#9a6700}
.tf-search-results-head h2{margin:3px 0 0;color:var(--search-ink)}
.search-facet-box{margin-top:12px;padding:12px;border:1px solid var(--search-line);border-radius:12px;background:#fff}
.search-facet-box strong,.search-facet-box span{display:block}.search-facet-box span{font-size:12px;padding:6px 0;border-bottom:1px solid #f1f5f9}.search-facet-box span:last-child{border-bottom:0}
.tf-zero-v4{border:1px solid #ead18e;background:#fffdf7;border-radius:14px;padding:16px;margin-bottom:16px}
.tf-zero-v4>div{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
@media(max-width:900px){.tf-search-hero-grid{grid-template-columns:1fr}.tf-search-proof{grid-template-columns:repeat(3,1fr)}.tf-search-entity-matches{grid-template-columns:1fr}}
@media(max-width:640px){.tf-search-proof{grid-template-columns:1fr 1fr}.tf-search-proof article:last-child{grid-column:1/-1}.tf-search-entity-matches>div>div{grid-template-columns:1fr}.tf-search-results-head{align-items:start;flex-direction:column}.tf-search-v4 .filter-sidebar{max-height:calc(100dvh - 76px);overflow:auto}}
/* Sprint 943 — autosuggest V3 visibility/stacking */
.global-search{position:relative!important}
.global-search .tf-search-autosuggest-v3{
position:absolute!important;
z-index:2147483000!important;
top:calc(100% + 6px)!important;
left:0!important;
right:0!important;
width:100%!important;
max-height:min(72vh,680px)!important;
overflow:auto!important;
background:#fff!important;
border:1px solid #d8e2f0!important;
border-radius:14px!important;
box-shadow:0 22px 55px rgba(7,31,73,.20)!important;
}
.global-search .tf-search-autosuggest-v3[hidden]{display:none!important}
.global-search.is-search-open{z-index:2147482000!important}
.tf-search-autosuggest-v3 .tf-v3-svg{
width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
background:#f5f8fc;color:#0a3779
}
.tf-search-autosuggest-v3 .tf-v3-svg svg{
width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round
}
.tf-search-autosuggest-v3 .tf-v3-trend{font-size:20px;color:#d59600}
@media(max-width:767px){
.global-search .tf-search-autosuggest-v3{
position:fixed!important;
left:10px!important;right:10px!important;top:118px!important;
width:auto!important;max-height:calc(100vh - 140px)!important;border-radius:12px!important
}
}
/* ===== search-autosuggest-v4.css ===== */
/* TradesFolks Search Autosuggest V4 — single owner */
.global-search[data-tf-search-owner="v4"]{position:relative!important;overflow:visible!important}
.global-search[data-tf-search-owner="v4"].tf-search-v4-open{z-index:2147482000!important}
.tf-search-v4-panel{
position:absolute!important;z-index:2147483000!important;top:calc(100% + 7px)!important;
left:0!important;right:0!important;width:100%!important;max-height:min(72vh,680px)!important;
overflow:auto!important;background:#fff!important;border:1px solid #d7e1ef!important;border-radius:14px!important;
box-shadow:0 20px 48px rgba(7,31,73,.18)!important;color:#10213c!important;
overscroll-behavior:contain
}
.tf-search-v4-panel[hidden]{display:none!important}
.tf-search-v4-body{padding:6px 0}
.tf-search-v4-group{padding:3px 8px 7px}
.tf-search-v4-group+.tf-search-v4-group{border-top:1px solid #edf1f6}
.tf-search-v4-group h3{
margin:0;padding:8px 9px 6px;font-size:11px;line-height:1.2;text-transform:uppercase;
letter-spacing:.075em;color:#718096;font-weight:800
}
.tf-search-v4-group>a{
min-height:52px;display:grid;grid-template-columns:42px minmax(0,1fr) 22px;align-items:center;
gap:10px;padding:6px 9px;border-radius:10px;text-decoration:none;color:#10213c
}
.tf-search-v4-group>a:hover,.tf-search-v4-group>a.is-active{background:#f5f8fc}
.tf-search-v4-icon{
width:42px;height:42px;border:1px solid #e2e8f0;border-radius:9px;background:#f7f9fc;
display:grid;place-items:center;overflow:hidden;color:#0b59b6
}
.tf-search-v4-icon img{width:100%;height:100%;object-fit:cover;display:block}
.tf-search-v4-icon svg{
width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;
stroke-linecap:round;stroke-linejoin:round
}
.tf-search-v4-copy{min-width:0;display:flex;flex-direction:column;gap:2px}
.tf-search-v4-copy strong{font-size:14px;line-height:1.3;color:#13233d;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-search-v4-copy small{font-size:11px;color:#718096;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tf-search-v4-arrow{font-size:17px;color:#97a6bb;text-align:center}
.tf-search-v4-all{
margin:3px 8px 8px;padding:11px 12px;display:flex;align-items:center;justify-content:space-between;
border-radius:10px;background:#fff7db;border:1px solid #f1cf67;color:#09295e!important;
font-size:13px;font-weight:800;text-decoration:none
}
.tf-search-v4-all:hover,.tf-search-v4-all.is-active{background:#ffefb6}
.tf-search-v4-footer{
position:sticky;bottom:0;display:flex;gap:18px;padding:8px 14px;background:#f8fafc;border-top:1px solid #e8edf4;
color:#77849a;font-size:10px;font-weight:700
}
.tf-search-v4-loading,.tf-search-v4-empty{padding:18px 20px;display:flex;align-items:center;gap:10px;color:#5c6a80;font-size:12px}
.tf-search-v4-empty{align-items:flex-start;flex-direction:column;gap:4px}
.tf-search-v4-empty strong{color:#172a48;font-size:13px}
.tf-search-v4-loading i{
width:17px;height:17px;border-radius:50%;border:2px solid #d9e2ee;border-top-color:#f5b800;
animation:tfSearchV4Spin .75s linear infinite
}
@keyframes tfSearchV4Spin{to{transform:rotate(360deg)}}
@media(max-width:767px){
.tf-search-v4-panel{
position:fixed!important;left:10px!important;right:10px!important;top:116px!important;
width:auto!important;max-height:calc(100vh - 138px)!important;border-radius:12px!important
}
.tf-search-v4-group>a{min-height:50px}
.tf-search-v4-footer{display:none}
}
/* ===== supplier-directory-hardening.css ===== */
/* TradesFolks 18.4.05 — Supplier directory semantic/enterprise layer */
.tf-supplier-directory-seo{width:calc(100% - 48px);max-width:none;margin:18px auto 22px;padding:22px 24px;border:1px solid #e4e8ef;border-radius:18px;background:#fff}
.tf-supplier-directory-kicker{display:block;margin-bottom:7px;color:#8a6a16;font-size:11px;font-weight:800;letter-spacing:.09em}
.tf-supplier-directory-seo h1{margin:0 0 9px;color:#172238;font-size:clamp(25px,2.35vw,40px);line-height:1.14}
.tf-supplier-directory-seo p{max-width:980px;margin:0;color:#606b7c;font-size:15px;line-height:1.65}
@media(max-width:760px){.tf-supplier-directory-seo{width:calc(100% - 24px);margin-top:12px;padding:17px 16px;border-radius:14px}.tf-supplier-directory-seo h1{font-size:24px}}
/* ===== category-region-discovery.css ===== */
/* TradesFolks 18.4.06 — category and regional discovery ownership */
.tf-category-seo-intro,.tf-region-seo-intro{width:calc(100% - 48px);max-width:none;margin:18px auto 22px;padding:22px 24px;border:1px solid #e4e8ef;border-radius:18px;background:#fff}
.tf-category-seo-intro>span,.tf-region-seo-intro>span{display:block;margin-bottom:7px;color:#8a6a16;font-size:11px;font-weight:800;letter-spacing:.09em}
.tf-category-seo-intro h1,.tf-region-seo-intro h1{margin:0 0 9px;color:#172238;font-size:clamp(25px,2.35vw,40px);line-height:1.14}
.tf-category-seo-intro p,.tf-region-seo-intro p{max-width:980px;margin:0;color:#606b7c;font-size:15px;line-height:1.65}
@media(max-width:760px){.tf-category-seo-intro,.tf-region-seo-intro{width:calc(100% - 24px);margin-top:12px;padding:17px 16px;border-radius:14px}.tf-category-seo-intro h1,.tf-region-seo-intro h1{font-size:24px}}
/* ===== rfq-buy-leads-hardening.css ===== */
/* TradesFolks 18.4.07 — buyer RFQ creation */
.tf-rfq-create{width:calc(100% - 48px);max-width:1180px;margin:28px auto 40px}
.tf-rfq-create__head{margin-bottom:18px}.tf-rfq-create__head>span{display:block;margin-bottom:6px;color:#8a6a16;font-size:11px;font-weight:900;letter-spacing:.09em}.tf-rfq-create__head h1{margin:0 0 8px;color:#172238;font-size:clamp(27px,2.5vw,42px);line-height:1.1}.tf-rfq-create__head p{max-width:880px;margin:0;color:#637084;line-height:1.6}
.tf-rfq-create__card{padding:24px;border:1px solid #e3e8ef;border-radius:20px;background:#fff;box-shadow:0 12px 30px rgba(15,35,66,.05)}
.tf-rfq-create__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}.tf-rfq-create label{display:grid;gap:7px}.tf-rfq-create label>span{color:#334155;font-size:12px;font-weight:800}.tf-rfq-create :is(input,select,textarea){width:100%;border:1px solid #d5dde8;border-radius:11px;background:#fff;color:#172238;font:inherit;outline:none}.tf-rfq-create :is(input,select){height:50px;padding:0 13px}.tf-rfq-create textarea{padding:13px;resize:vertical;line-height:1.55}.tf-rfq-create :is(input,select,textarea):focus{border-color:#b58c23;box-shadow:0 0 0 3px rgba(181,140,35,.09)}
.tf-rfq-create__details{margin-top:16px}.tf-rfq-create__actions{display:flex;gap:10px;margin-top:18px}.tf-rfq-create__actions button{min-height:44px;padding:0 18px;border-radius:10px;font-weight:800;cursor:pointer}.tf-rfq-create__actions .primary{border:1px solid #d7aa25;background:#f3c84b;color:#1c2432}.tf-rfq-create__actions .secondary{border:1px solid #d7dde6;background:#fff;color:#334155}.tf-rfq-create__note{margin:14px 0 0;color:#7a8494;font-size:12px;line-height:1.5}
@media(max-width:700px){.tf-rfq-create{width:calc(100% - 24px);margin-top:16px}.tf-rfq-create__card{padding:16px;border-radius:16px}.tf-rfq-create__grid{grid-template-columns:1fr}.tf-rfq-create__actions{display:grid;grid-template-columns:1fr 1fr}.tf-rfq-create__actions button{width:100%}}
/* Sprint 561 — unified Direct Buy + RFQ buyer entry */
.tf-buy-entry__modes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin:0 0 18px}.tf-buy-mode{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:13px;min-height:92px;padding:16px 18px;border:1px solid #dfe5ed;border-radius:17px;background:#fff;color:#172238;text-decoration:none;box-shadow:0 8px 24px rgba(15,35,66,.04);transition:.18s ease}.tf-buy-mode:hover{transform:translateY(-1px);border-color:#c5ceda;box-shadow:0 12px 28px rgba(15,35,66,.08)}.tf-buy-mode.is-active{border-color:#d4a51f;background:linear-gradient(135deg,#fffdf7,#fff8df);box-shadow:0 0 0 2px rgba(212,165,31,.09),0 12px 30px rgba(15,35,66,.06)}.tf-buy-mode__icon{display:grid;place-items:center;width:44px;height:44px;border-radius:13px;background:#f4f6f9;font-size:20px}.tf-buy-mode.is-active .tf-buy-mode__icon{background:#f4c94d;color:#1b2431}.tf-buy-mode b{display:block;margin-bottom:4px;font-size:16px}.tf-buy-mode small{display:block;color:#697689;font-size:12px;line-height:1.45}.tf-buy-mode em{color:#8a6a16;font-size:12px;font-style:normal;font-weight:900;white-space:nowrap}
.tf-direct-buy-panel{overflow:hidden;border:1px solid #dfe5ed;border-radius:22px;background:#fff;box-shadow:0 14px 34px rgba(15,35,66,.06)}.tf-direct-buy-panel__hero{display:flex;justify-content:space-between;gap:24px;padding:25px 26px 22px;background:linear-gradient(135deg,#172238,#253451);color:#fff}.tf-direct-buy-panel__eyebrow{display:block;margin-bottom:7px;color:#f3c84b;font-size:11px;font-weight:900;letter-spacing:.11em}.tf-direct-buy-panel__hero h2{margin:0 0 8px;font-size:clamp(24px,2.2vw,36px);line-height:1.08}.tf-direct-buy-panel__hero p{max-width:710px;margin:0;color:#d5ddea;line-height:1.55}.tf-direct-buy-panel__trust{display:flex;flex-wrap:wrap;align-content:flex-start;justify-content:flex-end;gap:7px;max-width:330px}.tf-direct-buy-panel__trust span{padding:7px 9px;border:1px solid rgba(255,255,255,.16);border-radius:999px;background:rgba(255,255,255,.07);font-size:11px;font-weight:800;white-space:nowrap}
.tf-direct-buy-search{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;padding:20px 22px 12px}.tf-direct-buy-search input{height:54px!important;border-radius:13px!important;padding:0 16px!important;font-size:15px!important}.tf-direct-buy-search button{min-width:160px;border:0;border-radius:13px;background:#f3c84b;color:#1d2632;font-weight:900;cursor:pointer}.tf-direct-buy-actions{display:flex;flex-wrap:wrap;gap:9px;padding:0 22px 18px}.tf-direct-buy-actions a{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 14px;border:1px solid #d8e0ea;border-radius:10px;background:#fff;color:#25344a;text-decoration:none;font-size:12px;font-weight:850}.tf-direct-buy-actions a.primary{border-color:#172238;background:#172238;color:#fff}.tf-direct-buy-panel__how{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid #edf0f4;border-bottom:1px solid #edf0f4;background:#fafbfc}.tf-direct-buy-panel__how article{display:flex;gap:11px;padding:18px 20px}.tf-direct-buy-panel__how article+article{border-left:1px solid #edf0f4}.tf-direct-buy-panel__how b{color:#b1871c;font-size:12px}.tf-direct-buy-panel__how strong,.tf-direct-buy-panel__how small{display:block}.tf-direct-buy-panel__how strong{margin-bottom:4px;color:#25344a;font-size:13px}.tf-direct-buy-panel__how small{color:#728095;font-size:11px;line-height:1.45}.tf-direct-buy-panel__fallback{margin:0;padding:15px 22px;color:#687588;font-size:12px}.tf-direct-buy-panel__fallback a{color:#765b10;font-weight:850}
@media(max-width:800px){.tf-buy-entry__modes{grid-template-columns:1fr}.tf-buy-mode{min-height:82px}.tf-direct-buy-panel__hero{display:block;padding:21px 18px}.tf-direct-buy-panel__trust{justify-content:flex-start;max-width:none;margin-top:14px}.tf-direct-buy-search{grid-template-columns:1fr;padding:16px}.tf-direct-buy-search button{height:48px}.tf-direct-buy-actions{padding:0 16px 16px}.tf-direct-buy-panel__how{grid-template-columns:1fr}.tf-direct-buy-panel__how article+article{border-left:0;border-top:1px solid #edf0f4}.tf-direct-buy-panel__fallback{padding:14px 16px}}
@media(max-width:520px){.tf-buy-mode{grid-template-columns:auto minmax(0,1fr);padding:14px}.tf-buy-mode em{display:none}.tf-direct-buy-actions{display:grid;grid-template-columns:1fr}.tf-direct-buy-actions a{width:100%}}
/* ===== rfq-quotation-hardening.css ===== */
/* TradesFolks 18.4.08 — quotation workflow hardening */
.seller-v2 form[action*="/quote"] .tf-form-grid{align-items:start}
.seller-v2 form[action*="/quote"] :is(.tf-input,.tf-select,.tf-textarea){width:100%}
.seller-v2 form[action*="/quote"] .tf-textarea{min-height:130px;resize:vertical}
.quote-compare-card .tf-table{min-width:980px}
.quote-actions{display:flex;gap:7px;flex-wrap:wrap}
.quote-summary-strip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin:16px 0}
.quote-summary-strip>div{padding:14px;border:1px solid #e3e8ef;border-radius:13px;background:#fff}
.quote-summary-strip small{display:block;color:#748095;font-size:11px}
.quote-summary-strip strong{display:block;margin-top:4px;color:#172238;font-size:18px}
@media(max-width:760px){.quote-summary-strip{grid-template-columns:1fr 1fr}.quote-summary-strip>div:last-child{grid-column:1/-1}.quote-compare-card{margin-inline:-2px}.seller-v2 form[action*="/quote"] .tf-form-grid{grid-template-columns:1fr!important}}
/* ===== order-lifecycle-hardening.css ===== */
/* TradesFolks 18.4.09 — order lifecycle reliability */
.tf-order-status{display:inline-flex;align-items:center;min-height:27px;padding:4px 9px;border:1px solid #dfe5ed;border-radius:999px;background:#fff;color:#40516a;font-size:11px;font-weight:800;text-transform:capitalize}
.tf-order-actions{display:flex;gap:8px;flex-wrap:wrap}
.tf-order-money{font-variant-numeric:tabular-nums;font-weight:800}
.tf-order-timeline{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin:14px 0}
.tf-order-timeline>div{padding:10px;border:1px solid #e4e9f0;border-radius:11px;background:#fff;font-size:11px;color:#657287}
@media(max-width:760px){.tf-order-actions{display:grid;grid-template-columns:1fr 1fr}.tf-order-timeline{display:flex;overflow-x:auto;scrollbar-width:none}.tf-order-timeline>div{flex:0 0 150px}.tf-order-timeline::-webkit-scrollbar{display:none}}
/* ===== payment-return-hardening.css ===== */
/* TradesFolks 18.4.10 — payments, returns and refund reconciliation */
.tf-finance-amount{font-variant-numeric:tabular-nums;font-weight:800}
.seller-page-head+.seller-alert{margin-bottom:14px}
.seller-panel form[action*="/returns/"] button{min-height:40px;padding:8px 13px;border-radius:9px}
.seller-panel form[action*="/returns/"] textarea{width:100%;border:1px solid #d9e0e9;border-radius:10px;padding:11px;resize:vertical}
@media(max-width:700px){.seller-panel form[action*="/returns/"]>div{display:grid!important;grid-template-columns:1fr 1fr}.seller-panel form[action*="/returns/"] button{width:100%}}
/* ===== buyer-order-detail-18.4.188.css ===== */
/* Sprint 564 — premium buyer order detail. Buyer-only scope; seller surfaces untouched. */
.tf-buyer-order-detail{box-sizing:border-box;width:100%!important;max-width:none!important;margin:0!important;padding:28px clamp(18px,2.2vw,42px) 52px!important;background:linear-gradient(180deg,#f6f9fe 0,#f8fafc 100%);color:#12233f;min-height:66vh}
.tf-buyer-order-detail *{box-sizing:border-box}
.tf-buyer-order-detail>.flex:first-of-type{position:relative;display:flex!important;align-items:flex-start!important;justify-content:space-between!important;gap:22px!important;padding:24px 26px;border:1px solid #dce6f2;border-radius:22px;background:#fff;box-shadow:0 16px 42px rgba(16,42,82,.07)}
.tf-buyer-order-detail>.flex:first-of-type:before{content:"BUYER ORDER";position:absolute;right:24px;bottom:18px;font-size:58px;line-height:1;font-weight:900;letter-spacing:.06em;color:#f2f6fb;pointer-events:none}
.tf-buyer-order-detail .trade-secure-badge{display:inline-flex!important;align-items:center;width:auto!important;max-width:160px!important;height:34px!important;margin:0 0 14px!important;overflow:hidden!important;border-radius:10px!important;background:#f3f8ff!important}
.tf-buyer-order-detail .trade-secure-badge img{display:block!important;width:auto!important;max-width:100%!important;height:34px!important;object-fit:contain!important}
.tf-buyer-order-detail>.flex:first-of-type p.text-sm{margin:0 0 7px;color:#0b63ce!important;font-size:11px!important;font-weight:900!important;letter-spacing:.14em;text-transform:uppercase}
.tf-buyer-order-detail>.flex:first-of-type h1{position:relative;z-index:1;margin:0;max-width:820px;color:#10213e;font-family:"Plus Jakarta Sans",Manrope,sans-serif;font-size:clamp(22px,2.1vw,34px)!important;line-height:1.17;font-weight:800!important;letter-spacing:-.025em;overflow-wrap:anywhere}
.tf-buyer-order-detail>.flex:first-of-type h1+p{position:relative;z-index:1;margin:9px 0 0;color:#62748d!important;font-size:14px}
.tf-buyer-order-detail>.flex:first-of-type>.flex{position:relative;z-index:2;display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:9px!important}
.tf-buyer-order-detail>.flex:first-of-type>.flex>div{display:inline-flex;align-items:center;min-height:35px;padding:8px 13px!important;border:1px solid #d8e6f8;border-radius:999px!important;background:#eef6ff!important;color:#0e5db8!important;font-size:11px!important;font-weight:900!important;white-space:nowrap}
.tf-buyer-order-detail>.grid{display:grid!important;grid-template-columns:minmax(0,1.75fr) minmax(300px,.65fr)!important;gap:22px!important;margin-top:22px}
.tf-buyer-order-detail .space-y-5>*+*{margin-top:18px!important}
.tf-buyer-order-detail .rounded-2xl{border-radius:18px!important}
.tf-buyer-order-detail .border{border:1px solid #dfe7f1!important}
.tf-buyer-order-detail .bg-white{background:#fff!important}
.tf-buyer-order-detail .overflow-hidden{overflow:hidden!important}
.tf-buyer-order-detail .p-5{padding:20px!important}
.tf-buyer-order-detail .p-4{padding:14px 16px!important}
.tf-buyer-order-detail .p-3{padding:11px 14px!important}
.tf-buyer-order-detail h2{margin:0;color:#162946;font-size:17px!important;line-height:1.3;font-weight:900!important}
.tf-buyer-order-detail .text-sm{font-size:12px!important}
.tf-buyer-order-detail .text-slate-500{color:#708198!important}
.tf-buyer-order-detail .font-bold{font-weight:800!important}.tf-buyer-order-detail .font-black{font-weight:900!important}
.tf-buyer-order-detail table{width:100%!important;border-collapse:collapse!important;background:#fff;font-size:12px!important}
.tf-buyer-order-detail thead{background:#f6f9fd!important}.tf-buyer-order-detail tfoot{background:#f8fafc!important}
.tf-buyer-order-detail th{color:#61728b;font-size:10px!important;font-weight:900!important;text-transform:uppercase;letter-spacing:.08em}
.tf-buyer-order-detail td{color:#273b56;vertical-align:top}
.tf-buyer-order-detail tbody tr{border-top:1px solid #e9eef5!important}
.tf-buyer-order-detail tbody tr:hover{background:#fbfdff}
.tf-buyer-order-detail td:first-child{color:#152844;font-weight:800!important}
.tf-buyer-order-detail .text-right{text-align:right!important}
.tf-buyer-order-detail tfoot tr:last-child td{padding-top:15px!important;padding-bottom:15px!important;border-top:1px solid #dce5ef;color:#10213e;font-weight:900!important}
.tf-buyer-order-detail .text-lg{font-size:17px!important}
.tf-buyer-order-detail .order-warehouse-tag{display:block;margin-top:5px;color:#71839a;font-size:9px!important;line-height:1.5;font-weight:700!important}
.tf-buyer-order-detail .trade-secure-order-banner{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 17px;border:1px solid #cfe0f5;border-radius:16px;background:linear-gradient(135deg,#f4f9ff,#fff)}
.tf-buyer-order-detail .trade-secure-order-banner>div{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.tf-buyer-order-detail .trade-secure-order-banner .trade-secure-badge{margin:0!important;max-width:116px!important;height:28px!important}.tf-buyer-order-detail .trade-secure-order-banner .trade-secure-badge img{height:28px!important}.tf-buyer-order-detail .trade-secure-order-banner strong{color:#133864;font-size:12px}.tf-buyer-order-detail .trade-secure-order-banner p{width:100%;margin:0;color:#74859a;font-size:10px}.tf-buyer-order-detail .trade-secure-status{padding:7px 10px;border-radius:999px;background:#e9f6ef;color:#17804b;font-size:10px;font-weight:900;white-space:nowrap}
.tf-buyer-order-detail .rounded-2xl.border.bg-white,.tf-buyer-order-detail .overflow-hidden.rounded-2xl{box-shadow:0 10px 28px rgba(23,48,85,.055)}
.tf-buyer-order-detail .mt-4{margin-top:14px!important}.tf-buyer-order-detail .mt-3{margin-top:11px!important}.tf-buyer-order-detail .mt-2{margin-top:8px!important}.tf-buyer-order-detail .mt-1{margin-top:4px!important}
.tf-buyer-order-detail .flex{display:flex}.tf-buyer-order-detail .items-center{align-items:center}.tf-buyer-order-detail .items-start{align-items:flex-start}.tf-buyer-order-detail .justify-between{justify-content:space-between}.tf-buyer-order-detail .gap-2{gap:8px}.tf-buyer-order-detail .gap-3{gap:11px}.tf-buyer-order-detail .gap-4{gap:15px}
.tf-buyer-order-detail .h-3.w-3{display:block;width:10px!important;height:10px!important;min-width:10px;border-radius:999px;background:#1769d2!important;box-shadow:0 0 0 4px #eaf3ff}
.tf-buyer-order-detail .space-y-4>*+*{margin-top:14px!important}.tf-buyer-order-detail .space-y-3>*+*{margin-top:11px!important}.tf-buyer-order-detail .space-y-2>*+*{margin-top:8px!important}
.tf-buyer-order-detail aside{position:relative;min-width:0}.tf-buyer-order-detail aside>.rounded-2xl{position:relative}
.tf-buyer-order-detail aside>.rounded-2xl:first-child{border-color:#cbdcf2!important;background:linear-gradient(180deg,#0d376f 0,#0a2d5e 100%)!important;color:#fff!important;box-shadow:0 18px 36px rgba(6,39,86,.17)!important}
.tf-buyer-order-detail aside>.rounded-2xl:first-child h2{color:#fff!important}.tf-buyer-order-detail aside>.rounded-2xl:first-child .text-slate-500{color:#bfd0e8!important}.tf-buyer-order-detail aside>.rounded-2xl:first-child .bg-slate-50{background:rgba(255,255,255,.09)!important}.tf-buyer-order-detail aside>.rounded-2xl:first-child .order-financial-ledger>div{border-color:rgba(255,255,255,.13);background:rgba(255,255,255,.07)}.tf-buyer-order-detail aside>.rounded-2xl:first-child .order-financial-ledger dt{color:#b9cae2}.tf-buyer-order-detail aside>.rounded-2xl:first-child .order-financial-ledger dd{color:#fff}
.tf-buyer-order-detail .order-financial-ledger{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:13px}.tf-buyer-order-detail .order-financial-ledger>div{padding:10px;border:1px solid #e0e7f0;border-radius:12px;background:#f9fbfd}.tf-buyer-order-detail .order-financial-ledger dt{font-size:9px;color:#708198}.tf-buyer-order-detail .order-financial-ledger dd{margin:3px 0 0;color:#173657;font-size:12px;font-weight:900}
.tf-buyer-order-detail a.block,.tf-buyer-order-detail button{cursor:pointer;text-decoration:none}.tf-buyer-order-detail a.block{display:block!important}.tf-buyer-order-detail .w-full{width:100%!important}.tf-buyer-order-detail .text-center{text-align:center!important}.tf-buyer-order-detail .bg-blue-700{background:#f7bc2e!important;color:#0b2348!important;border:0!important}.tf-buyer-order-detail .text-white{color:#fff}.tf-buyer-order-detail .rounded-xl{border-radius:12px!important}
.tf-buyer-order-detail form select,.tf-buyer-order-detail form textarea,.tf-buyer-order-detail form input{width:100%;max-width:100%;border:1px solid #dce5ef!important;border-radius:12px!important;background:#fff;color:#203550;font:inherit;outline:0}.tf-buyer-order-detail form select,.tf-buyer-order-detail form input{min-height:42px}.tf-buyer-order-detail form textarea{min-height:78px;resize:vertical}.tf-buyer-order-detail form select:focus,.tf-buyer-order-detail form textarea:focus,.tf-buyer-order-detail form input:focus{border-color:#2c73c9!important;box-shadow:0 0 0 3px rgba(44,115,201,.12)}
.tf-buyer-order-detail button{min-height:42px;border-radius:12px!important;font-weight:900!important}.tf-buyer-order-detail .border-rose-300{border-color:#f2b8bd!important;background:#fff8f8!important}.tf-buyer-order-detail .text-rose-700{color:#b4232d!important}.tf-buyer-order-detail .text-emerald-700{color:#13804b!important}.tf-buyer-order-detail .text-amber-700{color:#a56706!important}
.tf-buyer-order-detail>.rounded-2xl{margin-bottom:14px}
.tf-buyer-order-detail .transaction-audit-list{display:grid;gap:8px;margin-top:13px}.tf-buyer-order-detail .transaction-audit-list>div{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:center;padding:10px 12px;border:1px solid #e3eaf2;border-radius:12px;background:#fafcfe}.tf-buyer-order-detail .transaction-audit-list span{color:#274866;font-size:10px;font-weight:800;text-transform:capitalize}.tf-buyer-order-detail .transaction-audit-list b{color:#142b48;font-size:10px}.tf-buyer-order-detail .transaction-audit-list small{color:#8090a4;font-size:9px}
@media(min-width:1180px){.tf-buyer-order-detail aside>.rounded-2xl:first-child{position:sticky;top:18px}}
@media(max-width:980px){.tf-buyer-order-detail{padding:20px 16px 42px!important}.tf-buyer-order-detail>.grid{grid-template-columns:1fr!important}.tf-buyer-order-detail>.flex:first-of-type:before{font-size:42px}.tf-buyer-order-detail aside>.rounded-2xl:first-child{position:static}}
@media(max-width:700px){.tf-buyer-order-detail{padding:14px 10px 32px!important}.tf-buyer-order-detail>.flex:first-of-type{padding:17px 15px;border-radius:17px;display:grid!important}.tf-buyer-order-detail>.flex:first-of-type:before{display:none}.tf-buyer-order-detail>.flex:first-of-type h1{font-size:20px!important}.tf-buyer-order-detail>.flex:first-of-type>.flex{align-items:flex-start!important;flex-direction:row!important;flex-wrap:wrap!important}.tf-buyer-order-detail>.flex:first-of-type>.flex>div{font-size:9px!important;min-height:30px}.tf-buyer-order-detail>.grid{gap:14px!important;margin-top:14px}.tf-buyer-order-detail .p-5{padding:15px!important}.tf-buyer-order-detail .overflow-hidden.rounded-2xl{overflow-x:auto!important}.tf-buyer-order-detail table{min-width:650px!important}.tf-buyer-order-detail .order-financial-ledger{grid-template-columns:1fr 1fr}.tf-buyer-order-detail .transaction-audit-list>div{grid-template-columns:1fr auto}.tf-buyer-order-detail .transaction-audit-list small{grid-column:1/-1}.tf-buyer-order-detail .trade-secure-order-banner{align-items:flex-start;flex-direction:column}.tf-buyer-order-detail .trade-secure-status{align-self:flex-start}}
@media(max-width:420px){.tf-buyer-order-detail{padding-left:8px!important;padding-right:8px!important}.tf-buyer-order-detail>.flex:first-of-type{padding:14px 13px}.tf-buyer-order-detail>.flex:first-of-type h1{font-size:17px!important}.tf-buyer-order-detail .order-financial-ledger{grid-template-columns:1fr}.tf-buyer-order-detail .p-5{padding:13px!important}}
/* ===== messaging-notification-hardening.css ===== */
/* TradesFolks 18.4.11 — secure messaging and notification reliability */
.message-attachment{max-width:100%;overflow:hidden}.message-attachment span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.message-composer textarea{min-height:52px;max-height:180px;resize:vertical}
.notification-actions{display:flex;gap:7px;flex-wrap:wrap}
@media(max-width:760px){.message-composer{display:grid!important;grid-template-columns:auto 1fr}.message-composer textarea{grid-column:1/-1}.message-composer .btn-primary{grid-column:1/-1;width:100%}.notification-actions{display:grid}.notification-actions>*{width:100%}}
/* ===== curated-sourcing-premium.css ===== */
/* TradesFolks 18.4.14 — Curated sourcing premium responsive ownership
Target: "Discover more ways to source". Loaded last to neutralize old card overrides.
Desktop = 4 cards in one row. Tablet = 2x2. Mobile = one premium card per row. */
.curated-b2b-market{
width:100%;
margin:0;
padding:28px 0 34px;
background:#f5f7fa;
}
.curated-b2b-market>.shell{
width:calc(100% - 48px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
}
.curated-b2b-heading{
display:flex;
align-items:flex-end;
justify-content:space-between;
gap:18px;
margin:0 0 18px;
}
.curated-b2b-heading .eyebrow{
display:block;
margin:0 0 7px;
color:#0b5bc7!important;
font-size:11px!important;
font-weight:900!important;
line-height:1.2;
letter-spacing:.10em!important;
}
.curated-b2b-heading h2{
margin:0!important;
color:#0b2448!important;
font-size:clamp(28px,2.4vw,42px)!important;
font-weight:850!important;
line-height:1.08!important;
letter-spacing:-.035em!important;
}
/* Four premium panels, one row on desktop. */
.curated-b2b-rail{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:16px!important;
align-items:stretch!important;
overflow:visible!important;
scroll-snap-type:none!important;
}
.curated-b2b-card{
position:relative;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
min-height:510px;
padding:20px 20px 18px!important;
overflow:hidden!important;
border:1px solid #dfe5ed!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:0 8px 28px rgba(12,35,68,.055)!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.curated-b2b-card:hover{
transform:translateY(-2px);
border-color:#ccd7e5!important;
box-shadow:0 14px 34px rgba(12,35,68,.09)!important;
}
.curated-b2b-card h3{
min-height:50px;
margin:0 0 16px!important;
color:#122744!important;
font-size:19px!important;
font-weight:850!important;
line-height:1.25!important;
letter-spacing:-.025em!important;
}
/* Product tiles: consistent image ratio and clean merchandising hierarchy. */
.curated-b2b-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:14px 12px!important;
align-content:start!important;
flex:1 1 auto;
}
.curated-b2b-item{
display:grid!important;
grid-template-rows:auto auto auto!important;
align-content:start!important;
min-width:0!important;
padding:0!important;
border:0!important;
border-radius:12px!important;
background:transparent!important;
color:#152844!important;
text-decoration:none!important;
overflow:hidden!important;
}
.curated-b2b-image{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
aspect-ratio:1.22 / 1!important;
height:auto!important;
min-height:0!important;
margin:0 0 8px!important;
overflow:hidden!important;
border:1px solid #edf1f5!important;
border-radius:12px!important;
background:#f7f9fb!important;
}
.curated-b2b-image img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:none!important;
object-fit:contain!important;
object-position:center!important;
padding:5px!important;
transition:transform .22s ease;
}
.curated-b2b-item:hover .curated-b2b-image img{
transform:scale(1.025);
}
.curated-b2b-image.is-missing,
.curated-b2b-image:has(.curated-b2b-placeholder){
background:#f1f5fa!important;
}
.curated-b2b-placeholder{
display:grid!important;
place-items:center!important;
width:100%!important;
height:100%!important;
color:#7c8ba0!important;
font-size:13px!important;
font-weight:900!important;
}
.curated-b2b-item strong{
display:-webkit-box!important;
min-height:36px;
margin:0!important;
overflow:hidden!important;
color:#172a47!important;
font-size:13px!important;
font-weight:750!important;
line-height:1.35!important;
text-align:left!important;
-webkit-box-orient:vertical;
-webkit-line-clamp:2;
}
.curated-b2b-item small{
display:block!important;
margin-top:4px!important;
color:#748198!important;
font-size:10.5px!important;
line-height:1.35!important;
}
.curated-b2b-cta{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
align-self:flex-start!important;
margin-top:18px!important;
padding:8px 0!important;
color:#075fc9!important;
font-size:12px!important;
font-weight:850!important;
line-height:1.2!important;
text-decoration:none!important;
}
.curated-b2b-cta span{
display:inline-block;
transition:transform .18s ease;
}
.curated-b2b-cta:hover span{transform:translateX(3px)}
/* Standard desktop/laptop: still exactly four cards in one row. */
@media (min-width:1280px) and (max-width:1599px){
.curated-b2b-market>.shell{width:calc(100% - 40px)!important}
.curated-b2b-rail{gap:13px!important}
.curated-b2b-card{min-height:480px;padding:18px 16px 16px!important}
.curated-b2b-card h3{font-size:17px!important;min-height:44px}
.curated-b2b-grid{gap:12px 10px!important}
.curated-b2b-item strong{font-size:12px!important}
}
/* Tablet landscape/portrait: 2 x 2, no horizontal page overflow. */
@media (min-width:700px) and (max-width:1279px){
.curated-b2b-market{padding:24px 0 30px}
.curated-b2b-market>.shell{width:calc(100% - 32px)!important}
.curated-b2b-rail{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:14px!important;
}
.curated-b2b-card{min-height:470px!important}
}
/* Mobile: one full premium card; all 4 products stay visible as a clean 2x2 grid. */
@media (max-width:699px){
.curated-b2b-market{
padding:20px 0 24px!important;
}
.curated-b2b-market>.shell{
width:calc(100% - 24px)!important;
margin-inline:auto!important;
}
.curated-b2b-heading{
margin-bottom:13px!important;
}
.curated-b2b-heading .eyebrow{
margin-bottom:5px!important;
font-size:9px!important;
}
.curated-b2b-heading h2{
max-width:290px;
font-size:24px!important;
line-height:1.12!important;
}
.curated-b2b-rail{
display:grid!important;
grid-template-columns:1fr!important;
gap:14px!important;
width:100%!important;
overflow:visible!important;
}
.curated-b2b-card{
width:100%!important;
min-width:0!important;
min-height:0!important;
padding:15px 12px 13px!important;
border-radius:15px!important;
box-shadow:0 6px 20px rgba(12,35,68,.05)!important;
}
.curated-b2b-card h3{
min-height:0!important;
margin-bottom:12px!important;
font-size:16px!important;
line-height:1.25!important;
}
.curated-b2b-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:12px 8px!important;
}
.curated-b2b-image{
aspect-ratio:1.12 / 1!important;
margin-bottom:6px!important;
border-radius:10px!important;
}
.curated-b2b-image img{
padding:3px!important;
}
.curated-b2b-item strong{
min-height:31px!important;
font-size:11px!important;
line-height:1.3!important;
text-align:center!important;
}
.curated-b2b-item small{
display:none!important; /* keeps the mobile card compact */
}
.curated-b2b-cta{
margin-top:12px!important;
padding:7px 0 2px!important;
font-size:11.5px!important;
}
}
/* Very small devices: preserve 2x2 product matrix without text/image collision. */
@media (max-width:379px){
.curated-b2b-market>.shell{width:calc(100% - 18px)!important}
.curated-b2b-card{padding-inline:10px!important}
.curated-b2b-grid{gap:10px 7px!important}
.curated-b2b-item strong{font-size:10.5px!important}
}
/* ===== rfq-compact-18.4.20.css ===== */
/* TradesFolks 18.4.20 — RFQ/Easy Sourcing compact refinement
Keeps the current uploaded background artwork and exact section structure.
Goal: visibly shorter, tighter and more premium across devices. */
.tf-homepage .easy-sourcing-section,
body:has(.market-hero) .easy-sourcing-section{
margin-top:14px!important;
margin-bottom:18px!important;
padding:0!important;
}
.tf-homepage .easy-sourcing-section .shell.easy-sourcing-grid,
.easy-sourcing-section .shell.easy-sourcing-grid,
body:has(.market-hero) .easy-sourcing-section>.shell{
width:calc(100% - 64px)!important;
max-width:none!important;
margin:0 32px!important;
min-height:0!important;
height:auto!important;
grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr)!important;
border-radius:20px!important;
overflow:hidden!important;
box-shadow:0 10px 28px rgba(10,35,70,.07)!important;
}
/* Left visual/copy side */
.tf-homepage .easy-sourcing-visual,
body:has(.market-hero) .easy-sourcing-visual{
min-height:300px!important;
height:auto!important;
padding:24px 30px!important;
}
.tf-homepage .easy-sourcing-copy,
body:has(.market-hero) .easy-sourcing-copy{
max-width:590px!important;
}
.tf-homepage .easy-sourcing-copy .eyebrow,
body:has(.market-hero) .easy-sourcing-copy .eyebrow{
font-size:10px!important;
line-height:1.2!important;
}
.tf-homepage .easy-sourcing-copy h2,
body:has(.market-hero) .easy-sourcing-copy h2{
font-size:34px!important;
line-height:1.08!important;
margin:5px 0 8px!important;
}
.tf-homepage .easy-sourcing-copy>p,
body:has(.market-hero) .easy-sourcing-copy>p{
margin:0 0 11px!important;
font-size:14px!important;
line-height:1.45!important;
}
.tf-homepage .easy-sourcing-copy ul,
body:has(.market-hero) .easy-sourcing-copy ul{
margin:10px 0 12px!important;
gap:4px!important;
font-size:12.5px!important;
line-height:1.35!important;
}
.tf-homepage .easy-sourcing-copy li:before,
body:has(.market-hero) .easy-sourcing-copy li:before{
width:17px!important;
height:17px!important;
margin-right:7px!important;
font-size:10px!important;
}
.tf-homepage .easy-sourcing-copy>a,
body:has(.market-hero) .easy-sourcing-copy>a{
font-size:12.5px!important;
}
/* Right RFQ card */
.tf-homepage .easy-sourcing-form-card,
body:has(.market-hero) .easy-sourcing-form-card{
align-self:center!important;
min-height:0!important;
height:auto!important;
margin:18px 20px!important;
padding:20px 24px!important;
border-radius:20px!important;
background:rgba(255,255,255,.97)!important;
box-shadow:0 10px 24px rgba(7,31,72,.07)!important;
}
.tf-homepage .easy-sourcing-form-card>.eyebrow,
body:has(.market-hero) .easy-sourcing-form-card>.eyebrow{
display:none!important;
}
.tf-homepage .easy-sourcing-form-card h2,
body:has(.market-hero) .easy-sourcing-form-card h2{
font-size:27px!important;
line-height:1.12!important;
margin:0 0 10px!important;
}
.tf-homepage .easy-sourcing-form-card>p,
body:has(.market-hero) .easy-sourcing-form-card>p{
display:none!important;
}
.tf-homepage .easy-rfq-form,
body:has(.market-hero) .easy-rfq-form{
gap:9px!important;
}
.tf-homepage .easy-rfq-form label,
body:has(.market-hero) .easy-rfq-form label{
gap:4px!important;
}
.tf-homepage .easy-rfq-form label>span,
body:has(.market-hero) .easy-rfq-form label>span{
display:none!important;
}
.tf-homepage .easy-rfq-form input,
.tf-homepage .easy-rfq-form select,
body:has(.market-hero) .easy-rfq-form input,
body:has(.market-hero) .easy-rfq-form select{
height:42px!important;
min-height:42px!important;
padding:0 13px!important;
border-radius:10px!important;
font-size:14px!important;
}
.tf-homepage .easy-rfq-form textarea,
body:has(.market-hero) .easy-rfq-form textarea{
min-height:72px!important;
max-height:96px!important;
padding:11px 13px!important;
border-radius:10px!important;
font-size:14px!important;
}
.tf-homepage .easy-rfq-row,
body:has(.market-hero) .easy-rfq-row{
grid-template-columns:minmax(0,.88fr) minmax(150px,1fr)!important;
gap:9px!important;
}
.tf-homepage .easy-rfq-form button,
body:has(.market-hero) .easy-rfq-form button{
width:auto!important;
min-width:210px!important;
height:42px!important;
min-height:42px!important;
margin-top:1px!important;
padding:0 18px!important;
border-radius:999px!important;
font-size:13px!important;
justify-self:start!important;
}
/* Preserve background visibility after shrinking the block */
.tf-homepage .easy-sourcing-background-image,
body:has(.market-hero) .easy-sourcing-background-image{
object-fit:cover!important;
object-position:center center!important;
}
@media (min-width:1024px) and (max-width:1399px){
.tf-homepage .easy-sourcing-section .shell.easy-sourcing-grid,
.easy-sourcing-section .shell.easy-sourcing-grid,
body:has(.market-hero) .easy-sourcing-section>.shell{
width:calc(100% - 40px)!important;
margin-inline:20px!important;
grid-template-columns:minmax(0,1.05fr) minmax(390px,.95fr)!important;
}
.tf-homepage .easy-sourcing-visual,
body:has(.market-hero) .easy-sourcing-visual{
min-height:286px!important;
padding:20px 24px!important;
}
.tf-homepage .easy-sourcing-form-card,
body:has(.market-hero) .easy-sourcing-form-card{
margin:14px 16px!important;
padding:18px 20px!important;
}
.tf-homepage .easy-sourcing-copy h2,
body:has(.market-hero) .easy-sourcing-copy h2{font-size:31px!important}
.tf-homepage .easy-sourcing-form-card h2,
body:has(.market-hero) .easy-sourcing-form-card h2{font-size:24px!important}
}
/* Tablet: retain image first, compact form second. */
@media (min-width:700px) and (max-width:1023px){
.tf-homepage .easy-sourcing-section .shell.easy-sourcing-grid,
.easy-sourcing-section .shell.easy-sourcing-grid,
body:has(.market-hero) .easy-sourcing-section>.shell{
width:calc(100% - 32px)!important;
margin-inline:16px!important;
grid-template-columns:1fr 1fr!important;
border-radius:18px!important;
}
.tf-homepage .easy-sourcing-visual,
body:has(.market-hero) .easy-sourcing-visual{
min-height:275px!important;
padding:20px!important;
}
.tf-homepage .easy-sourcing-form-card,
body:has(.market-hero) .easy-sourcing-form-card{
margin:12px!important;
padding:17px!important;
border-radius:16px!important;
}
.tf-homepage .easy-sourcing-copy h2,
body:has(.market-hero) .easy-sourcing-copy h2{font-size:28px!important}
.tf-homepage .easy-sourcing-copy ul,
body:has(.market-hero) .easy-sourcing-copy ul{font-size:12px!important}
.tf-homepage .easy-sourcing-form-card h2,
body:has(.market-hero) .easy-sourcing-form-card h2{font-size:22px!important}
.tf-homepage .easy-rfq-row,
body:has(.market-hero) .easy-rfq-row{grid-template-columns:1fr!important}
}
/* Mobile: one compact card, much shorter than current version. */
@media (max-width:699px){
.tf-homepage .easy-sourcing-section,
body:has(.market-hero) .easy-sourcing-section{
margin-top:10px!important;
margin-bottom:14px!important;
}
.tf-homepage .easy-sourcing-section .shell.easy-sourcing-grid,
.easy-sourcing-section .shell.easy-sourcing-grid,
body:has(.market-hero) .easy-sourcing-section>.shell{
width:calc(100% - 24px)!important;
margin-inline:12px!important;
grid-template-columns:1fr!important;
border-radius:16px!important;
}
.tf-homepage .easy-sourcing-visual,
body:has(.market-hero) .easy-sourcing-visual{
min-height:220px!important;
padding:17px 15px!important;
}
.tf-homepage .easy-sourcing-copy h2,
body:has(.market-hero) .easy-sourcing-copy h2{
font-size:25px!important;
margin-bottom:6px!important;
}
.tf-homepage .easy-sourcing-copy>p,
body:has(.market-hero) .easy-sourcing-copy>p{
font-size:12px!important;
margin-bottom:7px!important;
}
.tf-homepage .easy-sourcing-copy ul,
body:has(.market-hero) .easy-sourcing-copy ul{
margin:7px 0 9px!important;
font-size:11.5px!important;
}
.tf-homepage .easy-sourcing-form-card,
body:has(.market-hero) .easy-sourcing-form-card{
margin:0!important;
padding:16px 14px 17px!important;
border-radius:0!important;
box-shadow:none!important;
}
.tf-homepage .easy-sourcing-form-card h2,
body:has(.market-hero) .easy-sourcing-form-card h2{
font-size:21px!important;
margin-bottom:9px!important;
}
.tf-homepage .easy-rfq-form input,
.tf-homepage .easy-rfq-form select,
body:has(.market-hero) .easy-rfq-form input,
body:has(.market-hero) .easy-rfq-form select{
height:42px!important;
font-size:16px!important;
}
.tf-homepage .easy-rfq-form textarea,
body:has(.market-hero) .easy-rfq-form textarea{
min-height:66px!important;
font-size:16px!important;
}
.tf-homepage .easy-rfq-row,
body:has(.market-hero) .easy-rfq-row{
grid-template-columns:minmax(0,1fr) minmax(110px,.7fr)!important;
}
.tf-homepage .easy-rfq-form button,
body:has(.market-hero) .easy-rfq-form button{
width:100%!important;
min-width:0!important;
height:43px!important;
justify-self:stretch!important;
}
}
@media (max-width:390px){
.tf-homepage .easy-rfq-row,
body:has(.market-hero) .easy-rfq-row{
grid-template-columns:1fr!important;
}
}
/* ===== category-showcase-complete-18.4.21.css ===== */
/* TradesFolks 18.4.21 — Homepage category showcase completion
Fixes the large empty right-side area and turns the section into a complete,
balanced marketplace category showcase across desktop/tablet/mobile. */
.tf-homepage .home-category-showcases{
padding:28px 0 34px!important;
background:#f6f8fb!important;
}
.tf-homepage .home-category-showcases>.shell{
width:calc(100% - 48px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
}
.tf-homepage .home-category-showcase-list{
display:grid!important;
gap:30px!important;
}
.tf-homepage .home-category-showcase{
width:100%!important;
min-width:0!important;
padding:20px!important;
border:1px solid #dce4ee!important;
border-radius:20px!important;
background:#fff!important;
box-shadow:0 8px 24px rgba(12,35,68,.045)!important;
overflow:hidden!important;
}
.tf-homepage .home-category-showcase-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:20px!important;
margin:0 0 16px!important;
}
.tf-homepage .home-category-showcase-head>div{
min-width:0!important;
}
.tf-homepage .home-category-browse-pill{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
padding:5px 9px!important;
border-radius:999px!important;
background:#fff6dc!important;
color:#835f07!important;
font-size:8px!important;
font-weight:900!important;
letter-spacing:.08em!important;
text-transform:uppercase!important;
}
.tf-homepage .home-category-browse-pill i{
display:block!important;
width:5px!important;
height:5px!important;
border-radius:50%!important;
background:#f5b82e!important;
}
.tf-homepage .home-category-showcase-head h3{
margin:7px 0 4px!important;
color:#112742!important;
font-size:27px!important;
font-weight:850!important;
line-height:1.08!important;
letter-spacing:-.03em!important;
}
.tf-homepage .home-category-showcase-head p{
max-width:720px!important;
margin:0!important;
color:#6b798e!important;
font-size:11px!important;
line-height:1.45!important;
}
.tf-homepage .home-category-showcase-head>a{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
min-height:38px!important;
padding:0 13px!important;
border:1px solid #d9e2ed!important;
border-radius:10px!important;
background:#fff!important;
color:#075bc5!important;
font-size:10px!important;
font-weight:850!important;
text-decoration:none!important;
}
/* Desktop ownership:
29% strong visual + 71% six-card matrix. No dead whitespace. */
@media (min-width:1200px){
.tf-homepage .home-category-showcase-grid{
display:grid!important;
grid-template-columns:minmax(320px,29%) minmax(0,71%)!important;
gap:16px!important;
align-items:stretch!important;
width:100%!important;
min-width:0!important;
}
.tf-homepage .home-category-source-card{
min-width:0!important;
min-height:500px!important;
height:100%!important;
padding:18px!important;
border-radius:17px!important;
background-size:cover!important;
background-position:center center!important;
overflow:hidden!important;
}
.tf-homepage .home-category-source-emblem{
width:74px!important;
height:74px!important;
margin:18px auto 12px!important;
font-size:22px!important;
}
.tf-homepage .home-category-source-card strong{
margin-top:auto!important;
font-size:24px!important;
line-height:1.08!important;
}
.tf-homepage .home-category-source-card strong b{font-size:20px!important}
.tf-homepage .home-category-source-card p{
max-width:310px!important;
font-size:10px!important;
line-height:1.45!important;
}
.tf-homepage .home-category-source-card ul{
gap:6px!important;
margin-top:12px!important;
}
.tf-homepage .home-category-source-card li{
font-size:9px!important;
}
.tf-homepage .home-category-subgrid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
grid-auto-flow:row!important;
grid-auto-rows:auto!important;
gap:12px!important;
width:100%!important;
min-width:0!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .home-category-subcard{
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:150px minmax(0,1fr) 38px!important;
width:100%!important;
min-width:0!important;
min-height:244px!important;
border:1px solid #dde5ef!important;
border-radius:14px!important;
background:#fff!important;
box-shadow:0 3px 12px rgba(13,42,82,.035)!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-image{
grid-column:1!important;
grid-row:1!important;
width:100%!important;
min-width:0!important;
height:150px!important;
background:#f4f6f9!important;
}
.tf-homepage .home-category-subcard-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
padding:6px!important;
}
.tf-homepage .home-category-subcard-body{
grid-column:1!important;
grid-row:2!important;
min-width:0!important;
padding:10px 11px 8px!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 6px!important;
font-size:12px!important;
line-height:1.25!important;
}
.tf-homepage .home-category-subcard-body ul{
gap:3px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:8.5px!important;
line-height:1.35!important;
}
.tf-homepage .home-category-subcard-action{
grid-column:1!important;
grid-row:3!important;
min-height:38px!important;
padding:0 11px!important;
font-size:9px!important;
}
.tf-homepage .home-hot-popular{
top:10px!important;
padding:5px 9px!important;
font-size:7px!important;
}
}
/* Standard laptop: keep complete two-part layout but reduce visual width. */
@media (min-width:900px) and (max-width:1199px){
.tf-homepage .home-category-showcases>.shell{
width:calc(100% - 32px)!important;
}
.tf-homepage .home-category-showcase{
padding:16px!important;
}
.tf-homepage .home-category-showcase-grid{
display:grid!important;
grid-template-columns:260px minmax(0,1fr)!important;
gap:12px!important;
}
.tf-homepage .home-category-source-card{
min-height:470px!important;
}
.tf-homepage .home-category-subgrid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:repeat(2,1fr)!important;
gap:10px!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .home-category-subcard{
grid-template-columns:1fr!important;
grid-template-rows:120px minmax(0,1fr) 34px!important;
min-height:225px!important;
}
.tf-homepage .home-category-subcard-image{
grid-row:1!important;
height:120px!important;
}
.tf-homepage .home-category-subcard-image img{
object-fit:contain!important;
padding:5px!important;
}
.tf-homepage .home-category-subcard-body{
grid-column:1!important;grid-row:2!important;padding:9px!important;
}
.tf-homepage .home-category-subcard-action{
grid-column:1!important;grid-row:3!important;
}
}
/* Tablet: hero on top, six cards below in 3 columns. */
@media (min-width:700px) and (max-width:899px){
.tf-homepage .home-category-showcases>.shell{
width:calc(100% - 28px)!important;
}
.tf-homepage .home-category-showcase{
padding:15px!important;
}
.tf-homepage .home-category-showcase-grid{
display:grid!important;
grid-template-columns:1fr!important;
gap:12px!important;
}
.tf-homepage .home-category-source-card{
min-height:270px!important;
}
.tf-homepage .home-category-source-emblem{
display:none!important;
}
.tf-homepage .home-category-subgrid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:none!important;
grid-auto-flow:row!important;
gap:10px!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .home-category-subcard{
grid-template-columns:1fr!important;
grid-template-rows:112px minmax(0,1fr) 34px!important;
min-height:220px!important;
}
.tf-homepage .home-category-subcard-image{
grid-row:1!important;
height:112px!important;
}
.tf-homepage .home-category-subcard-body{
grid-column:1!important;grid-row:2!important;
}
.tf-homepage .home-category-subcard-action{
grid-column:1!important;grid-row:3!important;
}
}
/* Mobile: compact visual + true 2-column product grid.
No horizontal carousel: the section looks complete immediately. */
@media (max-width:699px){
.tf-homepage .home-category-showcases{
padding:18px 0 24px!important;
}
.tf-homepage .home-category-showcases>.shell{
width:calc(100% - 24px)!important;
}
.tf-homepage .home-category-showcase-list{
gap:18px!important;
}
.tf-homepage .home-category-showcase{
padding:13px!important;
border-radius:16px!important;
}
.tf-homepage .home-category-showcase-head{
align-items:flex-end!important;
margin-bottom:10px!important;
}
.tf-homepage .home-category-showcase-head h3{
font-size:22px!important;
}
.tf-homepage .home-category-showcase-head p{
max-width:250px!important;
font-size:9px!important;
}
.tf-homepage .home-category-showcase-head>a{
min-height:32px!important;
padding:0 9px!important;
font-size:8px!important;
}
.tf-homepage .home-category-showcase-grid{
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
}
.tf-homepage .home-category-source-card{
min-height:215px!important;
margin:0!important;
padding:14px!important;
border-radius:13px!important;
}
.tf-homepage .home-category-source-emblem{
display:none!important;
}
.tf-homepage .home-category-source-card strong{
margin:58px 0 5px!important;
font-size:19px!important;
}
.tf-homepage .home-category-source-card p{
max-width:280px!important;
font-size:8px!important;
}
.tf-homepage .home-category-source-card ul{
margin-top:8px!important;
gap:4px!important;
}
.tf-homepage .home-category-source-card li{
font-size:7.5px!important;
}
.tf-homepage .home-category-subgrid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-template-rows:none!important;
grid-auto-flow:row!important;
grid-auto-columns:auto!important;
gap:9px!important;
width:100%!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
scroll-snap-type:none!important;
}
.tf-homepage .home-category-subcard{
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:96px minmax(0,1fr) 32px!important;
min-height:205px!important;
border-radius:11px!important;
scroll-snap-align:none!important;
}
.tf-homepage .home-category-subcard-image{
grid-column:1!important;
grid-row:1!important;
width:100%!important;
height:96px!important;
}
.tf-homepage .home-category-subcard-image img{
object-fit:contain!important;
padding:4px!important;
}
.tf-homepage .home-category-subcard-body{
grid-column:1!important;
grid-row:2!important;
padding:8px 8px 5px!important;
}
.tf-homepage .home-category-subcard-body h4{
margin-bottom:4px!important;
font-size:10px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:7px!important;
}
.tf-homepage .home-category-subcard-action{
grid-column:1!important;
grid-row:3!important;
min-height:32px!important;
padding:0 8px!important;
font-size:7.5px!important;
}
}
@media (max-width:390px){
.tf-homepage .home-category-showcase{
padding:10px!important;
}
.tf-homepage .home-category-subgrid{
gap:7px!important;
}
.tf-homepage .home-category-subcard{
grid-template-rows:86px minmax(0,1fr) 30px!important;
min-height:190px!important;
}
.tf-homepage .home-category-subcard-image{
height:86px!important;
}
}
/* ===== featured-marketplace-compact-18.4.22.css ===== */
/* TradesFolks 18.4.22 — Featured marketplace opportunities compact + responsive
Target: homepage "Featured marketplace opportunities".
Smaller cards, tighter information density, device-aware columns. */
.tf-homepage .marketplace-products{
padding:26px 0 30px!important;
background:#fff!important;
}
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 48px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
}
.tf-homepage .marketplace-products .curated-products-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:18px!important;
margin:0 0 14px!important;
}
.tf-homepage .marketplace-products .curated-products-head .eyebrow{
margin:0 0 4px!important;
font-size:8px!important;
font-weight:900!important;
letter-spacing:.09em!important;
}
.tf-homepage .marketplace-products .curated-products-head h2{
margin:0!important;
color:#102544!important;
font-size:30px!important;
line-height:1.08!important;
letter-spacing:-.035em!important;
}
.tf-homepage .marketplace-products .curated-products-head .section-copy{
max-width:560px!important;
margin:4px 0 0!important;
color:#718096!important;
font-size:10px!important;
line-height:1.4!important;
}
.tf-homepage .marketplace-products .curated-products-head>a{
flex:0 0 auto!important;
min-height:38px!important;
padding:0 13px!important;
border-radius:10px!important;
font-size:10px!important;
}
/* Desktop: 6 compact cards per row */
.tf-homepage .marketplace-products .featured-twelve-grid{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:10px!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
min-height:0!important;
border:1px solid #dce4ee!important;
border-radius:13px!important;
background:#fff!important;
overflow:hidden!important;
box-shadow:0 4px 14px rgba(12,37,77,.035)!important;
transform:none!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-card:hover{
transform:translateY(-2px)!important;
box-shadow:0 9px 20px rgba(12,37,77,.07)!important;
}
/* Image area significantly shorter than current screenshot */
.tf-homepage .marketplace-products .featured-twelve-grid .product-image,
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-media{
position:relative!important;
width:100%!important;
height:164px!important;
min-height:164px!important;
max-height:164px!important;
overflow:hidden!important;
background:#f5f7fa!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-image img,
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-media img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
padding:8px!important;
}
/* Wishlist becomes smaller and less dominant */
.tf-homepage .marketplace-products .featured-twelve-grid .product-card :is(.wishlist-btn,.favorite-btn,[class*="wishlist"],[class*="favorite"]){
width:30px!important;
height:30px!important;
min-width:30px!important;
min-height:30px!important;
top:9px!important;
right:9px!important;
border-radius:50%!important;
}
/* Compact textual body */
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-body,
.tf-homepage .marketplace-products .featured-twelve-grid .product-content{
padding:11px 11px 10px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-card h3,
.tf-homepage .marketplace-products .featured-twelve-grid .product-title{
display:-webkit-box!important;
min-height:34px!important;
margin:0 0 7px!important;
overflow:hidden!important;
color:#192a45!important;
font-size:12px!important;
font-weight:800!important;
line-height:1.35!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-price{
margin:0 0 6px!important;
color:#0b2349!important;
font-size:16px!important;
font-weight:900!important;
line-height:1.2!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-price small,
.tf-homepage .marketplace-products .featured-twelve-grid .product-price span{
font-size:9px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid :is(.product-moq,.product-meta,.moq){
margin:0 0 8px!important;
color:#73829a!important;
font-size:9px!important;
line-height:1.3!important;
}
/* Supplier row: one line, ellipsis */
.tf-homepage .marketplace-products .featured-twelve-grid :is(.product-supplier,.supplier-name,.product-seller){
display:flex!important;
align-items:center!important;
min-height:28px!important;
margin-top:auto!important;
padding-top:7px!important;
border-top:1px solid #edf1f5!important;
overflow:hidden!important;
color:#63728b!important;
font-size:8.5px!important;
line-height:1.2!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* Buttons more compact but still easy to click */
.tf-homepage .marketplace-products .featured-twelve-grid .product-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
padding:9px 10px 10px!important;
margin:0!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-actions a,
.tf-homepage .marketplace-products .featured-twelve-grid .product-actions button{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-width:0!important;
min-height:34px!important;
height:34px!important;
padding:0 7px!important;
border-radius:8px!important;
font-size:9px!important;
font-weight:800!important;
line-height:1!important;
white-space:nowrap!important;
}
/* Large desktop: 6-column is preserved */
@media (min-width:1500px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:11px!important;
}
}
/* Standard laptops: 4 cards per row for readability */
@media (min-width:1024px) and (max-width:1499px){
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 36px)!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-image,
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-media{
height:158px!important;
min-height:158px!important;
max-height:158px!important;
}
}
/* Tablet: 3 cards per row */
@media (min-width:700px) and (max-width:1023px){
.tf-homepage .marketplace-products{
padding:22px 0 26px!important;
}
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 28px)!important;
}
.tf-homepage .marketplace-products .curated-products-head{
margin-bottom:12px!important;
}
.tf-homepage .marketplace-products .curated-products-head h2{
font-size:25px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-image,
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-media{
height:145px!important;
min-height:145px!important;
max-height:145px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-card h3,
.tf-homepage .marketplace-products .featured-twelve-grid .product-title{
font-size:11px!important;
}
}
/* Mobile: true 2-column compact marketplace grid */
@media (max-width:699px){
.tf-homepage .marketplace-products{
padding:18px 0 22px!important;
}
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 24px)!important;
}
.tf-homepage .marketplace-products .curated-products-head{
display:flex!important;
align-items:flex-end!important;
margin-bottom:10px!important;
}
.tf-homepage .marketplace-products .curated-products-head h2{
font-size:21px!important;
}
.tf-homepage .marketplace-products .curated-products-head .section-copy{
max-width:240px!important;
font-size:8px!important;
}
.tf-homepage .marketplace-products .curated-products-head>a{
min-height:32px!important;
padding:0 9px!important;
font-size:8px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
overflow:visible!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-card{
border-radius:11px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-image,
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-media{
height:118px!important;
min-height:118px!important;
max-height:118px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-image img,
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-media img{
padding:5px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-body,
.tf-homepage .marketplace-products .featured-twelve-grid .product-content{
padding:8px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-card h3,
.tf-homepage .marketplace-products .featured-twelve-grid .product-title{
min-height:30px!important;
margin-bottom:5px!important;
font-size:10px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-price{
margin-bottom:5px!important;
font-size:13px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid :is(.product-moq,.product-meta,.moq){
margin-bottom:6px!important;
font-size:8px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid :is(.product-supplier,.supplier-name,.product-seller){
min-height:24px!important;
padding-top:5px!important;
font-size:7.5px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-actions{
gap:5px!important;
padding:7px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-actions a,
.tf-homepage .marketplace-products .featured-twelve-grid .product-actions button{
height:32px!important;
min-height:32px!important;
padding:0 4px!important;
border-radius:7px!important;
font-size:8px!important;
}
}
@media (max-width:390px){
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 18px)!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid{
gap:7px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid .product-image,
.tf-homepage .marketplace-products .featured-twelve-grid .product-card-media{
height:105px!important;
min-height:105px!important;
max-height:105px!important;
}
}
/* ===== premium-compact-ui-18.4.35.css ===== */
/* TradesFolks 18.4.35 — Premium Compact UI Polish
Additive final layer for public desktop + mobile homepage.
Goal: tighter density, clearer hierarchy, smaller controls, less visual noise. */
:root{
--tf-ui-radius:12px;
--tf-ui-radius-sm:9px;
--tf-ui-line:#e4e9f0;
--tf-ui-ink:#0b1739;
--tf-ui-muted:#667085;
--tf-ui-gold:#f5bd37;
}
/* ---------- DESKTOP ---------- */
@media(min-width:1024px){
.tf-home-v3-hero{
width:min(1480px,calc(100% - 32px))!important;
height:458px!important;margin-top:12px!important;border-radius:15px!important;
}
.tf-home-v3-copy{max-width:560px!important;padding:38px 0 28px!important}
.tf-home-v3-copy h1{font-size:clamp(38px,3.4vw,56px)!important;line-height:.98!important;letter-spacing:-.035em!important}
.tf-home-v3-copy p{max-width:540px!important;font-size:14px!important;line-height:1.55!important}
.tf-home-v3-eyebrow{font-size:9px!important;padding:6px 10px!important}
.tf-home-v3-search{height:48px!important;max-width:570px!important}
.tf-home-v3-search select,.tf-home-v3-search input,.tf-home-v3-search button{height:48px!important;font-size:12px!important}
.tf-home-v3-popular{margin-top:8px!important;gap:5px!important;font-size:10px!important}
.tf-home-v3-popular a{padding:5px 8px!important}
.tf-home-v3-actions{margin-top:12px!important;gap:8px!important}
.tf-home-v3-actions a{min-height:38px!important;padding:0 14px!important;font-size:11px!important;border-radius:9px!important}
.tf-home-v3-stats{margin-top:13px!important;max-width:500px!important}
.tf-home-v3-stats>div{padding:10px 12px!important}
.tf-home-v3-stats strong{font-size:17px!important}
.tf-home-v3-stats span{font-size:9px!important}
.tf-home-v3-trust{min-height:40px!important}
.tf-home-v3-trust .shell{min-height:40px!important;font-size:9.5px!important}
.tf-home-v3-industries{padding-top:26px!important;padding-bottom:30px!important}
.tf-home-v3-section-head{margin-bottom:12px!important;align-items:end!important}
.tf-home-v3-section-head h2{font-size:32px!important;line-height:1.05!important;letter-spacing:-.025em!important}
.tf-home-v3-section-head p{font-size:12px!important;margin-top:5px!important}
.tf-home-v3-section-head>a{min-height:34px!important;padding:0 11px!important;font-size:10px!important;border-radius:9px!important}
.tf-home-v3-category-grid{gap:9px!important}
.tf-home-v3-category-card{border-radius:12px!important}
.tf-home-v3-category-media{min-height:150px!important}
.tf-home-v3-category-body{padding:8px 10px 10px!important}
.tf-home-v3-category-body>span{font-size:8px!important}
.tf-home-v3-category-body>strong{font-size:11px!important;line-height:1.25!important}
.tf-home-v3-subcategories{margin-top:16px!important}
.tf-home-v3-subcategories>strong{font-size:11px!important}
.tf-home-v3-subcategories a{padding:6px 9px!important;font-size:10px!important}
}
/* ---------- TABLET / MOBILE ---------- */
@media(max-width:1023px){
body.tf-homepage{background:#f7f9fc!important}
.tf-home-v3-hero{
width:calc(100% - 16px)!important;
height:330px!important;
margin:8px auto 0!important;border-radius:13px!important;
}
.tf-home-v3-copy{
padding:22px 18px 18px!important;
max-width:88%!important;
}
.tf-home-v3-copy h1{font-size:28px!important;line-height:1.02!important;letter-spacing:-.035em!important}
.tf-home-v3-copy p{font-size:11.5px!important;line-height:1.45!important;max-width:310px!important}
.tf-home-v3-eyebrow{font-size:8px!important;padding:5px 8px!important}
.tf-home-v3-search{display:none!important}
.tf-home-v3-popular{margin-top:9px!important;gap:4px!important}
.tf-home-v3-popular>span{font-size:8px!important}
.tf-home-v3-popular a{font-size:8px!important;padding:4px 6px!important}
.tf-home-v3-actions{margin-top:12px!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.tf-home-v3-actions a{min-height:36px!important;padding:0 10px!important;font-size:9px!important;border-radius:8px!important}
.tf-home-v3-stats{margin-top:10px!important}
.tf-home-v3-stats>div{padding:8px 7px!important}
.tf-home-v3-stats strong{font-size:14px!important}
.tf-home-v3-stats span{font-size:7px!important}
.tf-home-v3-slider-ui{bottom:10px!important;right:10px!important}
.tf-home-v3-trust{min-height:32px!important;overflow:hidden!important}
.tf-home-v3-trust .shell{min-height:32px!important;white-space:nowrap!important;overflow:hidden!important;font-size:7px!important;gap:8px!important}
.tf-home-v3-industries{padding:18px 0 88px!important}
.tf-home-v3-section-head{margin-bottom:10px!important;gap:8px!important}
.tf-home-v3-section-head>div>span{font-size:8px!important}
.tf-home-v3-section-head h2{font-size:22px!important;line-height:1.05!important;letter-spacing:-.025em!important}
.tf-home-v3-section-head p{font-size:10px!important;line-height:1.35!important;margin-top:4px!important}
.tf-home-v3-section-head>a{min-height:32px!important;padding:0 9px!important;font-size:9px!important;border-radius:8px!important}
.tf-home-v3-category-grid{
display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:7px!important;
}
.tf-home-v3-category-card{border-radius:10px!important;min-width:0!important}
.tf-home-v3-category-media{height:92px!important;min-height:92px!important}
.tf-home-v3-category-media img{width:100%!important;height:100%!important;object-fit:contain!important}
.tf-home-v3-category-body{padding:6px 7px 8px!important}
.tf-home-v3-category-body>span{font-size:7px!important;margin-bottom:2px!important}
.tf-home-v3-category-body>strong{font-size:9px!important;line-height:1.2!important}
.tf-home-v3-subcategories{margin-top:12px!important}
.tf-home-v3-subcategories>strong{font-size:9px!important;margin-bottom:6px!important}
.tf-home-v3-subcategories>div{gap:5px!important;overflow-x:auto!important;flex-wrap:nowrap!important;padding-bottom:2px!important}
.tf-home-v3-subcategories a{font-size:8px!important;padding:5px 8px!important;white-space:nowrap!important}
/* Compact floating AI control */
.tf-ai-launcher,[data-ai-launcher]{transform:scale(.88)!important;transform-origin:right bottom!important}
}
/* Very small phones */
@media(max-width:390px){
.tf-home-v3-hero{height:312px!important}
.tf-home-v3-copy{padding:19px 15px 16px!important}
.tf-home-v3-copy h1{font-size:25px!important}
.tf-home-v3-section-head h2{font-size:20px!important}
}
/* ===== hero-stability-18.4.36.css ===== */
/* TradesFolks 18.4.36 — Stable Hero Banner Geometry
Fixed banner geometry independent of copy length.
Background artwork never stretches: cover + centered crop only. */
.tf-home-v3-hero{
position:relative!important;
overflow:hidden!important;
contain:layout paint!important;
}
.tf-home-v3-media,
.tf-home-v3-slide,
.tf-home-v3-overlay{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
}
.tf-home-v3-media{z-index:0!important;overflow:hidden!important}
.tf-home-v3-slide{
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:center center!important;
transform:none!important;
}
.tf-home-v3-overlay{z-index:1!important}
.tf-home-v3-inner{
position:relative!important;
z-index:2!important;
height:100%!important;
min-height:0!important;
overflow:hidden!important;
display:flex!important;
align-items:center!important;
}
.tf-home-v3-copy{
box-sizing:border-box!important;
min-height:0!important;
max-height:100%!important;
overflow:hidden!important;
}
.tf-home-v3-copy h1,
.tf-home-v3-copy p,
.tf-home-v3-eyebrow{
max-width:100%!important;
}
.tf-home-v3-copy h1{
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
.tf-home-v3-copy p{
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
.tf-home-v3-popular{
min-width:0!important;
overflow:hidden!important;
flex-wrap:nowrap!important;
}
.tf-home-v3-popular a{white-space:nowrap!important}
.tf-home-v3-actions{min-width:0!important}
.tf-home-v3-stats{min-width:0!important}
/* Desktop: one fixed premium geometry for every slide. */
@media(min-width:1024px){
.tf-home-v3-hero{
height:458px!important;
min-height:458px!important;
max-height:458px!important;
}
.tf-home-v3-copy{
width:min(590px,48%)!important;
padding:30px 0 24px 48px!important;
}
.tf-home-v3-copy h1{
-webkit-line-clamp:3!important;
font-size:clamp(38px,3.15vw,52px)!important;
line-height:1.02!important;
margin:12px 0 10px!important;
}
.tf-home-v3-copy p{
-webkit-line-clamp:3!important;
max-width:520px!important;
margin:0 0 12px!important;
}
.tf-home-v3-popular{max-width:530px!important}
.tf-home-v3-actions{max-width:530px!important}
.tf-home-v3-stats{max-width:500px!important}
}
/* Mobile/tablet: fixed banner size, content clamped so it cannot resize the slider. */
@media(max-width:1023px){
.tf-home-v3-hero{
height:312px!important;
min-height:312px!important;
max-height:312px!important;
}
.tf-home-v3-slide{
background-size:cover!important;
background-position:center center!important;
}
.tf-home-v3-inner{
align-items:flex-start!important;
}
.tf-home-v3-copy{
width:100%!important;
max-width:100%!important;
padding:18px 16px 14px!important;
}
.tf-home-v3-copy h1{
-webkit-line-clamp:3!important;
font-size:25px!important;
line-height:1.03!important;
margin:10px 0 8px!important;
max-width:88%!important;
}
.tf-home-v3-copy p{
-webkit-line-clamp:3!important;
max-width:86%!important;
margin:0 0 8px!important;
font-size:10.5px!important;
line-height:1.4!important;
}
.tf-home-v3-popular{
max-width:100%!important;
overflow-x:auto!important;
scrollbar-width:none!important;
}
.tf-home-v3-popular::-webkit-scrollbar{display:none!important}
.tf-home-v3-actions{
grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;
max-width:100%!important;
}
.tf-home-v3-actions a{
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-home-v3-stats{
width:100%!important;
max-width:100%!important;
}
}
/* Small phones retain the same fixed geometry. */
@media(max-width:390px){
.tf-home-v3-hero{
height:300px!important;
min-height:300px!important;
max-height:300px!important;
}
.tf-home-v3-copy{padding:16px 14px 12px!important}
.tf-home-v3-copy h1{font-size:23px!important}
.tf-home-v3-copy p{font-size:10px!important}
}
/* Prevent accidental distortion if a future slide swaps to an ![]()
. */
.tf-home-v3-media img,
.tf-home-v3-slide img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center center!important;
aspect-ratio:auto!important;
}
/* ===== industry-grid-responsive-18.4.42.css ===== */
/* TradesFolks 18.4.42 — Responsive Industry Cards
Smaller, denser and device-aware category grid.
Images stay proportional with object-fit:contain; no stretching. */
.tf-home-v3-industries{
overflow:hidden!important;
}
.tf-home-v3-industries .shell{
width:min(calc(100% - 32px),1880px)!important;
max-width:1880px!important;
margin-inline:auto!important;
}
.tf-home-v3-section-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:14px!important;
}
.tf-home-v3-section-head>div{
min-width:0!important;
}
.tf-home-v3-section-head h2{
margin:0!important;
}
.tf-home-v3-section-head p{
margin:4px 0 0!important;
}
.tf-home-v3-section-head>a{
align-self:end!important;
white-space:nowrap!important;
}
.tf-home-v3-category-grid{
width:100%!important;
min-width:0!important;
display:grid!important;
grid-auto-flow:row!important;
overflow:visible!important;
}
.tf-home-v3-category-card{
display:grid!important;
grid-template-rows:auto auto!important;
min-width:0!important;
width:100%!important;
overflow:hidden!important;
background:#fff!important;
border:1px solid #dfe6ef!important;
box-shadow:none!important;
transform:none!important;
}
.tf-home-v3-category-card:hover{
border-color:#e4b644!important;
box-shadow:0 4px 14px rgba(15,35,70,.06)!important;
transform:translateY(-1px)!important;
}
.tf-home-v3-category-media{
width:100%!important;
overflow:hidden!important;
display:grid!important;
place-items:center!important;
background:#fff!important;
}
.tf-home-v3-category-media img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
transform:none!important;
aspect-ratio:auto!important;
}
.tf-home-v3-category-body{
min-width:0!important;
}
.tf-home-v3-category-body strong{
display:block!important;
min-width:0!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-home-v3-subcategories{
min-width:0!important;
}
.tf-home-v3-subcategories>div{
min-width:0!important;
overflow-x:auto!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-home-v3-subcategories>div::-webkit-scrollbar{display:none!important}
/* Ultra-wide desktop: six compact cards per row. */
@media(min-width:1600px){
.tf-home-v3-industries{padding-top:22px!important;padding-bottom:24px!important}
.tf-home-v3-section-head{margin-bottom:10px!important}
.tf-home-v3-section-head>div>span{font-size:8px!important;letter-spacing:.13em!important}
.tf-home-v3-section-head h2{font-size:28px!important;line-height:1.04!important}
.tf-home-v3-section-head p{font-size:11px!important}
.tf-home-v3-section-head>a{min-height:32px!important;padding:0 10px!important;font-size:9px!important;border-radius:8px!important}
.tf-home-v3-category-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-home-v3-category-card{border-radius:10px!important}
.tf-home-v3-category-media{height:150px!important;min-height:150px!important}
.tf-home-v3-category-body{padding:7px 9px 9px!important}
.tf-home-v3-category-body>span{font-size:7px!important;margin-bottom:2px!important}
.tf-home-v3-category-body>strong{font-size:10px!important;line-height:1.18!important}
}
/* Desktop / laptop: five columns. */
@media(min-width:1200px) and (max-width:1599px){
.tf-home-v3-industries{padding-top:20px!important;padding-bottom:24px!important}
.tf-home-v3-section-head h2{font-size:27px!important}
.tf-home-v3-section-head p{font-size:11px!important}
.tf-home-v3-category-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-home-v3-category-card{border-radius:10px!important}
.tf-home-v3-category-media{height:142px!important;min-height:142px!important}
.tf-home-v3-category-body{padding:7px 8px 9px!important}
.tf-home-v3-category-body>span{font-size:7px!important}
.tf-home-v3-category-body>strong{font-size:9.5px!important;line-height:1.18!important}
}
/* Tablet landscape / small desktop: four columns. */
@media(min-width:768px) and (max-width:1199px){
.tf-home-v3-industries .shell{width:calc(100% - 24px)!important}
.tf-home-v3-industries{padding:18px 0 24px!important}
.tf-home-v3-section-head{grid-template-columns:minmax(0,1fr) auto!important;gap:10px!important}
.tf-home-v3-section-head h2{font-size:24px!important}
.tf-home-v3-section-head p{font-size:10.5px!important}
.tf-home-v3-category-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-home-v3-category-media{height:126px!important;min-height:126px!important}
.tf-home-v3-category-body{padding:7px 8px 8px!important}
.tf-home-v3-category-body>strong{font-size:9.5px!important;line-height:1.18!important}
}
/* Mobile: true three-column compact grid; no horizontal strips or ghost rails. */
@media(max-width:767px){
.tf-home-v3-industries{
padding:15px 0 84px!important;
overflow:hidden!important;
}
.tf-home-v3-industries .shell{
width:100%!important;
max-width:none!important;
padding-inline:10px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.tf-home-v3-section-head{
grid-template-columns:1fr!important;
align-items:start!important;
gap:8px!important;
margin-bottom:10px!important;
}
.tf-home-v3-section-head>div>span{
font-size:7.5px!important;
letter-spacing:.12em!important;
}
.tf-home-v3-section-head h2{
font-size:21px!important;
line-height:1.04!important;
letter-spacing:-.025em!important;
}
.tf-home-v3-section-head p{
font-size:9.5px!important;
line-height:1.35!important;
margin-top:3px!important;
}
.tf-home-v3-section-head>a{
width:100%!important;
min-height:34px!important;
padding:0 10px!important;
font-size:9.5px!important;
border-radius:9px!important;
justify-self:stretch!important;
}
.tf-home-v3-category-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:7px!important;
padding:0!important;
margin:0!important;
overflow:visible!important;
}
.tf-home-v3-category-card{
border-radius:9px!important;
min-width:0!important;
width:100%!important;
}
.tf-home-v3-category-media{
height:86px!important;
min-height:86px!important;
background:#fff!important;
}
.tf-home-v3-category-media img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
padding:5px!important;
box-sizing:border-box!important;
}
.tf-home-v3-category-body{
padding:6px 6px 7px!important;
min-height:50px!important;
}
.tf-home-v3-category-body>span{
font-size:6.5px!important;
margin-bottom:2px!important;
}
.tf-home-v3-category-body>strong{
font-size:8.5px!important;
line-height:1.18!important;
white-space:normal!important;
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-home-v3-subcategories{
margin-top:12px!important;
}
.tf-home-v3-subcategories>strong{
font-size:9.5px!important;
margin-bottom:6px!important;
}
.tf-home-v3-subcategories>div{
display:flex!important;
flex-wrap:nowrap!important;
gap:5px!important;
overflow-x:auto!important;
padding-bottom:2px!important;
}
.tf-home-v3-subcategories a{
flex:0 0 auto!important;
white-space:nowrap!important;
font-size:8.5px!important;
padding:5px 8px!important;
border-radius:999px!important;
}
}
/* Small phones: keep three columns, reduce media/text rather than forcing horizontal scroll. */
@media(max-width:390px){
.tf-home-v3-industries .shell{padding-inline:8px!important}
.tf-home-v3-category-grid{gap:6px!important}
.tf-home-v3-category-media{height:78px!important;min-height:78px!important}
.tf-home-v3-category-body{padding:5px 5px 6px!important;min-height:47px!important}
.tf-home-v3-category-body>strong{font-size:8px!important}
.tf-home-v3-section-head h2{font-size:19px!important}
.tf-home-v3-section-head p{font-size:9px!important}
}
/* ===== industry-compact-swipe-18.4.43.css ===== */
/* TradesFolks 18.4.43 — Compact Desktop + Mobile Swipe Industries
Desktop becomes denser; mobile becomes horizontal left-to-right card rail.
All category artwork remains proportional and never stretches. */
/* Shared image integrity */
.tf-home-v3-category-media img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
transform:none!important;
}
/* ---------- DESKTOP / LARGE TABLET ---------- */
@media(min-width:768px){
.tf-home-v3-industries{
padding-top:16px!important;
padding-bottom:18px!important;
}
.tf-home-v3-industries .shell{
width:min(calc(100% - 28px),1780px)!important;
max-width:1780px!important;
}
.tf-home-v3-section-head{
margin-bottom:8px!important;
gap:10px!important;
}
.tf-home-v3-section-head>div>span{
font-size:7px!important;
letter-spacing:.12em!important;
}
.tf-home-v3-section-head h2{
font-size:24px!important;
line-height:1.02!important;
letter-spacing:-.025em!important;
}
.tf-home-v3-section-head p{
font-size:10px!important;
margin-top:3px!important;
}
.tf-home-v3-section-head>a{
min-height:30px!important;
padding:0 9px!important;
font-size:8.5px!important;
border-radius:8px!important;
}
.tf-home-v3-category-grid{
gap:7px!important;
}
.tf-home-v3-category-card{
border-radius:9px!important;
}
.tf-home-v3-category-media{
height:116px!important;
min-height:116px!important;
}
.tf-home-v3-category-body{
padding:6px 7px 7px!important;
min-height:42px!important;
}
.tf-home-v3-category-body>span{
font-size:6.5px!important;
margin-bottom:1px!important;
}
.tf-home-v3-category-body>strong{
font-size:8.8px!important;
line-height:1.15!important;
}
.tf-home-v3-subcategories{
margin-top:10px!important;
}
.tf-home-v3-subcategories>strong{
font-size:9px!important;
}
.tf-home-v3-subcategories a{
font-size:8px!important;
padding:4px 7px!important;
}
}
/* Ultra-wide: more columns = smaller overall section height. */
@media(min-width:1600px){
.tf-home-v3-category-grid{
grid-template-columns:repeat(7,minmax(0,1fr))!important;
}
.tf-home-v3-category-media{
height:108px!important;
min-height:108px!important;
}
}
/* Standard desktop */
@media(min-width:1280px) and (max-width:1599px){
.tf-home-v3-category-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
}
.tf-home-v3-category-media{
height:112px!important;
min-height:112px!important;
}
}
/* Laptop / tablet landscape */
@media(min-width:768px) and (max-width:1279px){
.tf-home-v3-category-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
.tf-home-v3-category-media{
height:104px!important;
min-height:104px!important;
}
}
/* ---------- MOBILE HORIZONTAL SWIPE ---------- */
@media(max-width:767px){
.tf-home-v3-industries{
padding:14px 0 82px!important;
overflow:hidden!important;
}
.tf-home-v3-industries .shell{
width:100%!important;
max-width:none!important;
padding-inline:10px!important;
overflow:visible!important;
box-sizing:border-box!important;
}
.tf-home-v3-section-head{
display:grid!important;
grid-template-columns:1fr!important;
gap:7px!important;
margin-bottom:9px!important;
}
.tf-home-v3-section-head h2{
font-size:20px!important;
line-height:1.03!important;
}
.tf-home-v3-section-head p{
font-size:9px!important;
line-height:1.3!important;
}
.tf-home-v3-section-head>a{
width:100%!important;
min-height:32px!important;
font-size:9px!important;
}
/* Rail replaces 3-column grid. */
.tf-home-v3-category-grid{
display:flex!important;
flex-wrap:nowrap!important;
grid-template-columns:none!important;
gap:7px!important;
width:auto!important;
max-width:none!important;
margin:0 -10px!important;
padding:0 10px 4px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-padding-left:10px!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-inline:contain!important;
scrollbar-width:none!important;
}
.tf-home-v3-category-grid::-webkit-scrollbar{
display:none!important;
}
.tf-home-v3-category-card{
flex:0 0 132px!important;
width:132px!important;
min-width:132px!important;
max-width:132px!important;
scroll-snap-align:start!important;
border-radius:9px!important;
}
.tf-home-v3-category-media{
width:100%!important;
height:84px!important;
min-height:84px!important;
}
.tf-home-v3-category-media img{
padding:5px!important;
box-sizing:border-box!important;
}
.tf-home-v3-category-body{
min-height:49px!important;
padding:6px 7px 7px!important;
}
.tf-home-v3-category-body>span{
font-size:6.5px!important;
margin-bottom:2px!important;
}
.tf-home-v3-category-body>strong{
font-size:8.5px!important;
line-height:1.17!important;
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
overflow:hidden!important;
white-space:normal!important;
}
.tf-home-v3-subcategories{
margin-top:11px!important;
}
.tf-home-v3-subcategories>div{
display:flex!important;
flex-wrap:nowrap!important;
overflow-x:auto!important;
gap:5px!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-home-v3-subcategories>div::-webkit-scrollbar{
display:none!important;
}
.tf-home-v3-subcategories a{
flex:0 0 auto!important;
white-space:nowrap!important;
font-size:8px!important;
padding:5px 8px!important;
}
}
/* Small phones: slightly narrower cards so 2.5 cards remain visible. */
@media(max-width:390px){
.tf-home-v3-industries .shell{
padding-inline:8px!important;
}
.tf-home-v3-category-grid{
margin-inline:-8px!important;
padding-inline:8px!important;
scroll-padding-left:8px!important;
}
.tf-home-v3-category-card{
flex-basis:122px!important;
width:122px!important;
min-width:122px!important;
max-width:122px!important;
}
.tf-home-v3-category-media{
height:78px!important;
min-height:78px!important;
}
.tf-home-v3-section-head h2{
font-size:19px!important;
}
}
/* ===== country-markets-responsive-18.4.45.css ===== */
/* TradesFolks 18.4.45 — Compact Responsive Supplier Markets
Smaller desktop country cards + app-like mobile horizontal swipe.
Country artwork keeps natural proportions and is never stretched. */
.country-network-premium{
overflow:hidden!important;
}
.country-network-premium>.shell{
min-width:0!important;
}
.country-network-premium .country-network-head{
min-width:0!important;
}
.country-network-premium .country-market-card{
min-width:0!important;
overflow:hidden!important;
background:#fff!important;
border:1px solid #dfe6ef!important;
box-shadow:none!important;
transform:none!important;
}
.country-network-premium .country-market-card:hover{
border-color:#e4b644!important;
box-shadow:0 4px 14px rgba(15,35,70,.06)!important;
transform:translateY(-1px)!important;
}
.country-network-premium .country-market-visual,
.country-network-premium .country-market-visual.has-market-image{
position:relative!important;
width:100%!important;
min-height:0!important;
padding:0!important;
overflow:hidden!important;
background:#eef2f7!important;
aspect-ratio:2/1!important;
}
.country-network-premium .country-market-artwork{
position:absolute!important;
inset:0!important;
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:cover!important;
object-position:center center!important;
transform:none!important;
}
.country-network-premium .country-market-body{
min-width:0!important;
display:flex!important;
flex-direction:column!important;
box-sizing:border-box!important;
}
.country-network-premium .country-market-body>span,
.country-network-premium .country-market-body>strong,
.country-network-premium .country-market-body>small{
min-width:0!important;
}
.country-network-premium .country-market-body>strong{
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.country-network-premium .country-market-body>small{
margin-top:auto!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:6px!important;
}
/* ---------- DESKTOP ---------- */
@media(min-width:1280px){
.country-network-premium{
padding-top:18px!important;
padding-bottom:20px!important;
}
.country-network-premium>.shell{
width:min(calc(100% - 28px),1780px)!important;
max-width:1780px!important;
margin-inline:auto!important;
}
.country-network-premium .country-network-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:12px!important;
margin-bottom:10px!important;
}
.country-network-premium .country-network-head .eyebrow{
font-size:7px!important;
letter-spacing:.13em!important;
}
.country-network-premium .country-network-head h2{
margin:3px 0 0!important;
font-size:25px!important;
line-height:1.03!important;
letter-spacing:-.025em!important;
}
.country-network-premium .country-network-head p{
margin:4px 0 0!important;
font-size:10px!important;
line-height:1.35!important;
}
.country-network-premium .country-network-head>a{
min-height:30px!important;
padding:0 9px!important;
border-radius:8px!important;
font-size:8.5px!important;
}
.country-network-premium .country-market-rail{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:8px!important;
width:100%!important;
overflow:visible!important;
padding:0!important;
margin:0!important;
}
.country-network-premium .country-market-card{
width:100%!important;
max-width:none!important;
border-radius:10px!important;
}
.country-network-premium .country-market-visual,
.country-network-premium .country-market-visual.has-market-image{
height:auto!important;
aspect-ratio:2/1!important;
}
.country-network-premium .country-market-body{
min-height:68px!important;
height:68px!important;
padding:7px 9px 8px!important;
}
.country-network-premium .country-market-body>span{
font-size:7px!important;
line-height:1.15!important;
}
.country-network-premium .country-market-body>strong{
margin-top:2px!important;
font-size:10px!important;
line-height:1.15!important;
}
.country-network-premium .country-market-body>small{
font-size:7.5px!important;
line-height:1!important;
}
.country-network-premium .country-market-visual .country-flag{
top:9px!important;
left:9px!important;
width:32px!important;
min-width:32px!important;
max-width:32px!important;
height:22px!important;
min-height:22px!important;
max-height:22px!important;
border-radius:4px!important;
}
.country-network-premium .country-market-visual .country-market-mark{
top:9px!important;
right:9px!important;
width:32px!important;
height:32px!important;
min-width:32px!important;
min-height:32px!important;
border-radius:9px!important;
font-size:8px!important;
}
}
/* Laptop / tablet landscape */
@media(min-width:768px) and (max-width:1279px){
.country-network-premium{
padding:16px 0 18px!important;
}
.country-network-premium>.shell{
width:calc(100% - 24px)!important;
}
.country-network-premium .country-network-head{
margin-bottom:9px!important;
}
.country-network-premium .country-network-head h2{
font-size:23px!important;
}
.country-network-premium .country-network-head p{
font-size:9.5px!important;
}
.country-network-premium .country-market-rail{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:8px!important;
overflow:visible!important;
}
.country-network-premium .country-market-card{
border-radius:10px!important;
}
.country-network-premium .country-market-body{
min-height:66px!important;
height:66px!important;
padding:7px 8px!important;
}
.country-network-premium .country-market-body>span{font-size:7px!important}
.country-network-premium .country-market-body>strong{font-size:9.5px!important}
.country-network-premium .country-market-body>small{font-size:7px!important}
}
/* ---------- MOBILE: LEFT-TO-RIGHT SWIPE ---------- */
@media(max-width:767px){
.country-network-premium{
padding:15px 0 18px!important;
overflow:hidden!important;
}
.country-network-premium>.shell{
width:100%!important;
max-width:none!important;
padding-inline:10px!important;
box-sizing:border-box!important;
overflow:visible!important;
}
.country-network-premium .country-network-head{
display:grid!important;
grid-template-columns:1fr!important;
align-items:start!important;
gap:8px!important;
margin-bottom:10px!important;
}
.country-network-premium .country-network-head .eyebrow{
font-size:7.5px!important;
letter-spacing:.12em!important;
}
.country-network-premium .country-network-head h2{
margin:3px 0 0!important;
font-size:20px!important;
line-height:1.04!important;
letter-spacing:-.025em!important;
}
.country-network-premium .country-network-head p{
margin:4px 0 0!important;
font-size:9.5px!important;
line-height:1.35!important;
}
.country-network-premium .country-network-head>a{
width:100%!important;
min-height:32px!important;
padding:0 9px!important;
border-radius:9px!important;
font-size:9px!important;
justify-self:stretch!important;
}
.country-network-premium .country-market-rail{
display:flex!important;
flex-wrap:nowrap!important;
grid-template-columns:none!important;
grid-auto-flow:initial!important;
gap:8px!important;
width:auto!important;
max-width:none!important;
margin:0 -10px!important;
padding:0 10px 4px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-padding-left:10px!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-inline:contain!important;
scrollbar-width:none!important;
}
.country-network-premium .country-market-rail::-webkit-scrollbar{
display:none!important;
}
.country-network-premium .country-market-card{
flex:0 0 214px!important;
width:214px!important;
min-width:214px!important;
max-width:214px!important;
scroll-snap-align:start!important;
border-radius:11px!important;
}
.country-network-premium .country-market-visual,
.country-network-premium .country-market-visual.has-market-image{
width:100%!important;
height:108px!important;
min-height:108px!important;
max-height:108px!important;
aspect-ratio:auto!important;
}
.country-network-premium .country-market-body{
height:72px!important;
min-height:72px!important;
padding:7px 9px 8px!important;
}
.country-network-premium .country-market-body>span{
font-size:7px!important;
}
.country-network-premium .country-market-body>strong{
margin-top:2px!important;
font-size:10.5px!important;
}
.country-network-premium .country-market-body>small{
font-size:7.5px!important;
}
.country-network-premium .country-market-visual .country-flag{
top:8px!important;
left:8px!important;
width:30px!important;
min-width:30px!important;
max-width:30px!important;
height:20px!important;
min-height:20px!important;
max-height:20px!important;
}
.country-network-premium .country-market-visual .country-market-mark{
top:8px!important;
right:8px!important;
width:30px!important;
height:30px!important;
min-width:30px!important;
min-height:30px!important;
border-radius:8px!important;
font-size:8px!important;
}
}
/* Small phones: show ~1.7 cards to communicate swipe. */
@media(max-width:390px){
.country-network-premium>.shell{
padding-inline:8px!important;
}
.country-network-premium .country-market-rail{
margin-inline:-8px!important;
padding-inline:8px!important;
scroll-padding-left:8px!important;
}
.country-network-premium .country-market-card{
flex-basis:196px!important;
width:196px!important;
min-width:196px!important;
max-width:196px!important;
}
.country-network-premium .country-market-visual,
.country-network-premium .country-market-visual.has-market-image{
height:100px!important;
min-height:100px!important;
max-height:100px!important;
}
.country-network-premium .country-market-body{
height:68px!important;
min-height:68px!important;
}
.country-network-premium .country-network-head h2{
font-size:19px!important;
}
}
/* ===== rfq-mobile-compact-18.4.46.css ===== */
/* TradesFolks 18.4.46 — Compact Mobile RFQ
Mobile-only density pass for "Want to get quotations?".
Desktop/tablet desktop layout is intentionally untouched. */
@media(max-width:640px){
body:has(.tf-home-v3) .tf-rfq-canonical{
padding:8px 0 14px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__canvas{
width:calc(100% - 16px)!important;
padding-top:320px!important;
border-radius:16px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__artwork{
height:320px!important;
object-fit:cover!important;
object-position:center top!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__scrim{
height:320px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__copy{
top:20px!important;
left:14px!important;
right:14px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__label{
margin-bottom:10px!important;
padding:5px 7px!important;
font-size:22px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__copy>p{
margin-bottom:12px!important;
font-size:12px!important;
line-height:1.4!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__copy ul{
margin-bottom:14px!important;
font-size:11px!important;
line-height:1.5!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__copy a{
font-size:12px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form-card{
width:auto!important;
min-width:0!important;
max-width:none!important;
margin:-20px 7px 8px!important;
padding:14px 12px 13px!important;
border-radius:14px!important;
box-shadow:0 8px 24px rgba(15,23,42,.10)!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form-card>h2{
margin:0 0 10px!important;
font-size:23px!important;
line-height:1.02!important;
letter-spacing:-.025em!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form{
gap:9px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form :is(input,select,textarea){
border-radius:10px!important;
font-size:13px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form input,
body:has(.tf-home-v3) .tf-rfq-canonical__form select{
height:44px!important;
min-height:44px!important;
padding:0 11px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form textarea{
min-height:76px!important;
height:76px!important;
padding:10px 11px!important;
line-height:1.35!important;
}
/* Keep quantity + unit in one compact row on phones. */
body:has(.tf-home-v3) .tf-rfq-canonical__row{
display:grid!important;
grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)!important;
gap:7px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__row label{
min-width:0!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__row :is(input,select){
min-width:0!important;
width:100%!important;
font-size:12.5px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form button{
width:100%!important;
height:42px!important;
min-height:42px!important;
margin-top:2px!important;
padding:0 14px!important;
border-width:1.5px!important;
font-size:13px!important;
font-weight:700!important;
}
}
@media(max-width:390px){
body:has(.tf-home-v3) .tf-rfq-canonical__canvas{
width:calc(100% - 12px)!important;
padding-top:300px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__artwork,
body:has(.tf-home-v3) .tf-rfq-canonical__scrim{
height:300px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form-card{
margin:-18px 6px 7px!important;
padding:13px 10px 12px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form-card>h2{
font-size:21px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form input,
body:has(.tf-home-v3) .tf-rfq-canonical__form select{
height:42px!important;
min-height:42px!important;
padding-inline:9px!important;
font-size:12px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form textarea{
height:70px!important;
min-height:70px!important;
padding:9px!important;
font-size:12px!important;
}
body:has(.tf-home-v3) .tf-rfq-canonical__form button{
height:40px!important;
min-height:40px!important;
font-size:12.5px!important;
}
}
/* ===== sourcing-services-compact-18.4.47.css ===== */
/* TradesFolks 18.4.47 — Compact Sourcing Services
Smaller desktop/mobile service cards + pure white subcategory image circles. */
body:has(.tf-home-v3) .tf-sourcing-solutions{
background:#fff!important;
}
/* Shared mini-card cleanup */
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image{
background:#fff!important;
border-color:#e5eaf1!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image img{
object-fit:contain!important;
background:#fff!important;
}
/* Desktop */
@media(min-width:1281px){
body:has(.tf-home-v3) .tf-sourcing-solutions{
padding:20px 0!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions>.shell{
width:min(calc(100% - 32px),1780px)!important;
max-width:1780px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head{
gap:16px!important;
margin-bottom:12px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head span{
margin-bottom:4px!important;
font-size:8px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head h2{
font-size:30px!important;
line-height:1.03!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head p{
margin-top:5px!important;
font-size:11px!important;
line-height:1.4!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head>a{
padding:8px 11px!important;
border-radius:9px!important;
font-size:9px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-grid{
gap:10px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card{
border-radius:14px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero{
min-height:210px!important;
padding:16px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero span{
padding:4px 7px!important;
font-size:7px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero h3{
margin-bottom:7px!important;
font-size:23px!important;
line-height:1.05!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero p{
margin-bottom:10px!important;
font-size:10.5px!important;
line-height:1.35!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero>b{
font-size:9px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-grid{
gap:5px!important;
padding:10px 8px 11px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image{
width:58px!important;
height:58px!important;
margin-bottom:6px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image img{
padding:5px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-grid strong{
font-size:9px!important;
line-height:1.2!important;
}
}
/* Tablet / small desktop */
@media(min-width:761px) and (max-width:1280px){
body:has(.tf-home-v3) .tf-sourcing-solutions{
padding:18px 0!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-grid{
gap:10px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card{
border-radius:13px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero{
min-height:190px!important;
padding:15px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero h3{
font-size:21px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero p{
font-size:10px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image{
width:56px!important;
height:56px!important;
}
}
/* Mobile horizontal rail, more compact */
@media(max-width:760px){
body:has(.tf-home-v3) .tf-sourcing-solutions{
padding:14px 0!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions>.shell{
width:calc(100% - 16px)!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head{
margin-bottom:9px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head span{
margin-bottom:3px!important;
font-size:7px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head h2{
font-size:21px!important;
line-height:1.04!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head p{
margin-top:4px!important;
font-size:9px!important;
line-height:1.35!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-section-head>a{
margin-top:8px!important;
padding:7px 9px!important;
font-size:8.5px!important;
border-radius:8px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-grid{
gap:8px!important;
padding-bottom:6px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card{
flex:0 0 min(78vw,300px)!important;
border-radius:13px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero{
min-height:172px!important;
padding:13px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero span{
padding:4px 6px!important;
font-size:6.5px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero h3{
margin-bottom:6px!important;
font-size:20px!important;
line-height:1.05!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero p{
margin-bottom:8px!important;
font-size:9px!important;
line-height:1.35!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero>b{
font-size:8px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-grid{
gap:4px!important;
padding:8px 6px 9px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image{
width:50px!important;
height:50px!important;
margin-bottom:5px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image img{
padding:4px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-grid strong{
font-size:8px!important;
line-height:1.15!important;
}
}
@media(max-width:390px){
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card{
flex-basis:276px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero{
min-height:160px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-card-hero h3{
font-size:18px!important;
}
body:has(.tf-home-v3) .tf-sourcing-solutions .tf-service-mini-image{
width:46px!important;
height:46px!important;
}
}
/* ===== business-growth-compact-18.4.48.css ===== */
/* TradesFolks 18.4.48 — Compact Business Growth Services
Mirrors Sprint 421 treatment for the Business Growth & Trade Services section.
Smaller desktop/mobile cards + pure-white mini-category image backgrounds. */
body:has(.tf-home-v3) .tf-business-growth-services{
background:#f5f7fb!important;
}
/* White mini-image surfaces so white-background product/category images blend naturally. */
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image{
background:#fff!important;
border-color:#e5eaf1!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image img{
object-fit:contain!important;
background:#fff!important;
}
/* Desktop */
@media(min-width:1281px){
body:has(.tf-home-v3) .tf-business-growth-services{
padding:20px 0!important;
}
body:has(.tf-home-v3) .tf-business-growth-services>.shell{
width:min(calc(100% - 32px),1780px)!important;
max-width:1780px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head{
gap:16px!important;
margin-bottom:12px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head span{
margin-bottom:4px!important;
font-size:8px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head h2{
font-size:30px!important;
line-height:1.03!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head p{
margin-top:5px!important;
font-size:11px!important;
line-height:1.4!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head>a{
padding:8px 11px!important;
border-radius:9px!important;
font-size:9px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-grid{
gap:10px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card{
border-radius:14px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero{
min-height:210px!important;
padding:16px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero span{
padding:4px 7px!important;
font-size:7px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero h3{
margin-bottom:7px!important;
font-size:23px!important;
line-height:1.05!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero p{
margin-bottom:10px!important;
font-size:10.5px!important;
line-height:1.35!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero>b{
font-size:9px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-grid{
gap:5px!important;
padding:10px 8px 11px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image{
width:58px!important;
height:58px!important;
margin-bottom:6px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image img{
padding:5px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-grid strong{
font-size:9px!important;
line-height:1.2!important;
}
}
/* Tablet / small desktop */
@media(min-width:761px) and (max-width:1280px){
body:has(.tf-home-v3) .tf-business-growth-services{
padding:18px 0!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-grid{
gap:10px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card{
border-radius:13px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero{
min-height:190px!important;
padding:15px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero h3{
font-size:21px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero p{
font-size:10px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image{
width:56px!important;
height:56px!important;
}
}
/* Mobile: retain horizontal swipe but reduce card footprint */
@media(max-width:760px){
body:has(.tf-home-v3) .tf-business-growth-services{
padding:14px 0!important;
}
body:has(.tf-home-v3) .tf-business-growth-services>.shell{
width:calc(100% - 16px)!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head{
margin-bottom:9px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head span{
margin-bottom:3px!important;
font-size:7px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head h2{
font-size:21px!important;
line-height:1.04!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head p{
margin-top:4px!important;
font-size:9px!important;
line-height:1.35!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-section-head>a{
margin-top:8px!important;
padding:7px 9px!important;
font-size:8.5px!important;
border-radius:8px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-grid{
gap:8px!important;
padding-bottom:6px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card{
flex:0 0 min(78vw,300px)!important;
border-radius:13px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero{
min-height:172px!important;
padding:13px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero span{
padding:4px 6px!important;
font-size:6.5px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero h3{
margin-bottom:6px!important;
font-size:20px!important;
line-height:1.05!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero p{
margin-bottom:8px!important;
font-size:9px!important;
line-height:1.35!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero>b{
font-size:8px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-grid{
gap:4px!important;
padding:8px 6px 9px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image{
width:50px!important;
height:50px!important;
margin-bottom:5px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image img{
padding:4px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-grid strong{
font-size:8px!important;
line-height:1.15!important;
}
}
@media(max-width:390px){
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card{
flex-basis:276px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero{
min-height:160px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-card-hero h3{
font-size:18px!important;
}
body:has(.tf-home-v3) .tf-business-growth-services .tf-service-mini-image{
width:46px!important;
height:46px!important;
}
}
/* ===== category-showcase-responsive-18.4.49.css ===== */
/* TradesFolks 18.4.49 — Compact Responsive Category Showcase
Device-aware category hero + subcategory matrix.
Removes mobile header compression and reduces vertical footprint. */
/* Shared image integrity */
.tf-homepage .home-category-subcard-image{
background:#fff!important;
}
.tf-homepage .home-category-subcard-image img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
background:#fff!important;
transform:none!important;
}
/* ---------- LARGE DESKTOP ---------- */
@media(min-width:1440px){
.tf-homepage .home-category-showcases{
padding:18px 0 22px!important;
}
.tf-homepage .home-category-showcases>.shell{
width:min(calc(100% - 32px),1780px)!important;
max-width:1780px!important;
}
.tf-homepage .home-category-showcase-list{
gap:18px!important;
}
.tf-homepage .home-category-showcase{
padding:14px!important;
border-radius:15px!important;
}
.tf-homepage .home-category-showcase-head{
gap:14px!important;
margin-bottom:10px!important;
}
.tf-homepage .home-category-browse-pill{
padding:4px 7px!important;
font-size:7px!important;
}
.tf-homepage .home-category-showcase-head h3{
margin:5px 0 3px!important;
font-size:24px!important;
}
.tf-homepage .home-category-showcase-head p{
font-size:9.5px!important;
}
.tf-homepage .home-category-showcase-head>a{
min-height:31px!important;
padding:0 10px!important;
font-size:8.5px!important;
border-radius:8px!important;
}
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(280px,28%) minmax(0,72%)!important;
gap:10px!important;
}
.tf-homepage .home-category-source-card{
min-height:390px!important;
height:390px!important;
padding:14px!important;
border-radius:13px!important;
}
.tf-homepage .home-category-source-card strong{
font-size:21px!important;
line-height:1.04!important;
}
.tf-homepage .home-category-source-card strong b{
font-size:18px!important;
}
.tf-homepage .home-category-source-card p{
max-width:270px!important;
font-size:8.5px!important;
}
.tf-homepage .home-category-source-card ul{
gap:4px!important;
margin-top:9px!important;
}
.tf-homepage .home-category-source-card li{
font-size:7.5px!important;
}
.tf-homepage .home-category-subgrid{
gap:8px!important;
}
.tf-homepage .home-category-subcard{
grid-template-rows:100px 88px 30px!important;
min-height:218px!important;
height:218px!important;
border-radius:10px!important;
}
.tf-homepage .home-category-subcard-image{
height:100px!important;
}
.tf-homepage .home-category-subcard-image img{
padding:5px!important;
}
.tf-homepage .home-category-subcard-body{
height:88px!important;
padding:7px 9px 6px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-body h4{
margin-bottom:4px!important;
font-size:10px!important;
}
.tf-homepage .home-category-subcard-body ul{
gap:2px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:7px!important;
line-height:1.25!important;
}
.tf-homepage .home-category-subcard-action{
min-height:30px!important;
height:30px!important;
padding:0 9px!important;
font-size:7.5px!important;
}
}
/* ---------- DESKTOP / LAPTOP ---------- */
@media(min-width:900px) and (max-width:1439px){
.tf-homepage .home-category-showcases{
padding:16px 0 20px!important;
}
.tf-homepage .home-category-showcases>.shell{
width:calc(100% - 24px)!important;
}
.tf-homepage .home-category-showcase{
padding:12px!important;
border-radius:14px!important;
}
.tf-homepage .home-category-showcase-head{
margin-bottom:9px!important;
}
.tf-homepage .home-category-showcase-head h3{
font-size:22px!important;
}
.tf-homepage .home-category-showcase-head p{
font-size:9px!important;
}
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(235px,27%) minmax(0,73%)!important;
gap:9px!important;
}
.tf-homepage .home-category-source-card{
min-height:360px!important;
height:360px!important;
padding:13px!important;
border-radius:12px!important;
}
.tf-homepage .home-category-source-card strong{
font-size:19px!important;
}
.tf-homepage .home-category-source-card p{
font-size:8px!important;
}
.tf-homepage .home-category-source-card li{
font-size:7px!important;
}
.tf-homepage .home-category-subgrid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:repeat(2,1fr)!important;
gap:7px!important;
}
.tf-homepage .home-category-subcard{
grid-template-rows:88px 78px 28px!important;
min-height:194px!important;
height:194px!important;
border-radius:9px!important;
}
.tf-homepage .home-category-subcard-image{
height:88px!important;
}
.tf-homepage .home-category-subcard-body{
height:78px!important;
padding:6px 7px 5px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-body h4{
margin-bottom:3px!important;
font-size:9px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6.5px!important;
line-height:1.22!important;
}
.tf-homepage .home-category-subcard-action{
height:28px!important;
min-height:28px!important;
padding-inline:7px!important;
font-size:7px!important;
}
}
/* ---------- TABLET ---------- */
@media(min-width:700px) and (max-width:899px){
.tf-homepage .home-category-showcase{
padding:11px!important;
}
.tf-homepage .home-category-showcase-head{
margin-bottom:9px!important;
}
.tf-homepage .home-category-showcase-head h3{
font-size:21px!important;
}
.tf-homepage .home-category-showcase-grid{
gap:8px!important;
}
.tf-homepage .home-category-source-card{
min-height:210px!important;
height:210px!important;
padding:12px!important;
}
.tf-homepage .home-category-subgrid{
gap:7px!important;
}
.tf-homepage .home-category-subcard{
grid-template-rows:82px 76px 28px!important;
min-height:186px!important;
height:186px!important;
}
.tf-homepage .home-category-subcard-image{
height:82px!important;
}
.tf-homepage .home-category-subcard-body{
height:76px!important;
padding:6px 7px 5px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-body h4{
font-size:9px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6.5px!important;
}
.tf-homepage .home-category-subcard-action{
height:28px!important;
min-height:28px!important;
font-size:7px!important;
}
}
/* ---------- MOBILE ---------- */
@media(max-width:699px){
.tf-homepage .home-category-showcases{
padding:12px 0 16px!important;
}
.tf-homepage .home-category-showcases>.shell{
width:calc(100% - 14px)!important;
}
.tf-homepage .home-category-showcase-list{
gap:12px!important;
}
.tf-homepage .home-category-showcase{
padding:9px!important;
border-radius:13px!important;
}
/* Critical fix: heading copy gets full width; CTA sits below instead of squeezing text. */
.tf-homepage .home-category-showcase-head{
display:grid!important;
grid-template-columns:1fr!important;
align-items:start!important;
gap:7px!important;
margin-bottom:8px!important;
}
.tf-homepage .home-category-showcase-head>div{
width:100%!important;
min-width:0!important;
}
.tf-homepage .home-category-browse-pill{
padding:4px 7px!important;
font-size:7px!important;
}
.tf-homepage .home-category-showcase-head h3{
margin:6px 0 3px!important;
font-size:20px!important;
line-height:1.03!important;
}
.tf-homepage .home-category-showcase-head p{
width:100%!important;
max-width:none!important;
margin:0!important;
font-size:9px!important;
line-height:1.35!important;
}
.tf-homepage .home-category-showcase-head>a{
width:100%!important;
min-height:30px!important;
padding:0 9px!important;
justify-content:center!important;
font-size:8px!important;
border-radius:8px!important;
}
.tf-homepage .home-category-showcase-grid{
gap:8px!important;
}
.tf-homepage .home-category-source-card{
min-height:178px!important;
height:178px!important;
padding:11px!important;
border-radius:11px!important;
background-position:center center!important;
}
.tf-homepage .home-category-source-card strong{
margin:44px 0 4px!important;
font-size:17px!important;
line-height:1.04!important;
max-width:75%!important;
}
.tf-homepage .home-category-source-card p{
max-width:78%!important;
font-size:7.5px!important;
line-height:1.35!important;
}
.tf-homepage .home-category-source-card ul{
margin-top:6px!important;
gap:3px!important;
}
.tf-homepage .home-category-source-card li{
font-size:6.5px!important;
}
.tf-homepage .home-category-subgrid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:6px!important;
}
.tf-homepage .home-category-subcard{
grid-template-rows:72px 74px 27px!important;
min-height:173px!important;
height:173px!important;
border-radius:9px!important;
}
.tf-homepage .home-category-subcard-image{
height:72px!important;
}
.tf-homepage .home-category-subcard-image img{
padding:3px!important;
}
.tf-homepage .home-category-subcard-body{
height:74px!important;
padding:5px 6px 4px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-body h4{
margin-bottom:3px!important;
font-size:8.5px!important;
line-height:1.18!important;
}
.tf-homepage .home-category-subcard-body ul{
gap:1px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6.3px!important;
line-height:1.2!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .home-category-subcard-action{
height:27px!important;
min-height:27px!important;
padding:0 6px!important;
font-size:6.8px!important;
}
}
/* Small phones */
@media(max-width:390px){
.tf-homepage .home-category-showcase{
padding:8px!important;
}
.tf-homepage .home-category-source-card{
min-height:164px!important;
height:164px!important;
}
.tf-homepage .home-category-source-card strong{
margin-top:38px!important;
font-size:16px!important;
}
.tf-homepage .home-category-subgrid{
gap:5px!important;
}
.tf-homepage .home-category-subcard{
grid-template-rows:66px 70px 26px!important;
min-height:162px!important;
height:162px!important;
}
.tf-homepage .home-category-subcard-image{
height:66px!important;
}
.tf-homepage .home-category-subcard-body{
height:70px!important;
padding:5px!important;
}
.tf-homepage .home-category-subcard-body h4{
font-size:8px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6px!important;
}
.tf-homepage .home-category-subcard-action{
height:26px!important;
min-height:26px!important;
font-size:6.5px!important;
}
}
/* ===== hero-source-integrity-18.4.50.css ===== */
/* TradesFolks 18.4.50 — Hero Source Image Integrity
Hero artwork must preserve the uploaded source aspect ratio.
Never use background-size:100% 100% and never scale X/Y independently. */
.tf-homepage .tf-home-v3-slide{
background-repeat:no-repeat!important;
transform:none!important;
}
/* Desktop: preserve full uploaded artwork at its natural ratio.
Image is anchored right; unused space becomes the intentional copy zone. */
@media(min-width:1024px){
.tf-homepage .tf-home-v3-hero{
background:#071b46!important;
}
.tf-homepage .tf-home-v3-slide{
background-size:auto 100%!important;
background-position:right center!important;
background-color:#071b46!important;
}
/* Blend the preserved artwork into the left copy zone without distorting it. */
.tf-homepage .tf-home-v3-overlay{
background:linear-gradient(
90deg,
rgba(7,27,70,.98) 0%,
rgba(7,27,70,.92) 27%,
rgba(7,27,70,.58) 44%,
rgba(7,27,70,.14) 59%,
rgba(7,27,70,0) 72%
)!important;
}
}
/* Tablet/mobile: show the complete source image rather than stretching/cropping it.
The remaining hero area uses the same navy canvas for copy readability. */
@media(max-width:1023px){
.tf-homepage .tf-home-v3-hero{
background:#071b46!important;
}
.tf-homepage .tf-home-v3-slide{
background-size:contain!important;
background-position:center top!important;
background-color:#071b46!important;
}
.tf-homepage .tf-home-v3-overlay{
background:linear-gradient(
180deg,
rgba(7,27,70,.18) 0%,
rgba(7,27,70,.42) 42%,
rgba(7,27,70,.90) 78%,
rgba(7,27,70,.98) 100%
)!important;
}
}
/* Future ![]()
-based hero assets: proportional only. */
.tf-homepage .tf-home-v3-media img,
.tf-homepage .tf-home-v3-slide img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
transform:none!important;
}
/* ===== category-showcase-mobile-swipe-18.4.51.css ===== */
/* TradesFolks 18.4.51 — Mobile Category Showcase Swipe Fix
Fixes oversized stacked mobile subcategory cards.
Hero remains compact; subcategories become a horizontal swipe rail. */
@media(max-width:699px){
.tf-homepage .home-category-showcases{
padding:10px 0 14px!important;
}
.tf-homepage .home-category-showcases>.shell{
width:100%!important;
max-width:none!important;
padding-inline:8px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.tf-homepage .home-category-showcase{
padding:8px!important;
border-radius:12px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-showcase-head{
gap:6px!important;
margin-bottom:7px!important;
}
.tf-homepage .home-category-browse-pill{
width:max-content!important;
padding:4px 7px!important;
font-size:7px!important;
}
.tf-homepage .home-category-showcase-head h3{
margin:5px 0 2px!important;
font-size:19px!important;
}
.tf-homepage .home-category-showcase-head p{
font-size:8.5px!important;
line-height:1.3!important;
}
.tf-homepage .home-category-showcase-head>a{
min-height:29px!important;
height:29px!important;
font-size:7.5px!important;
border-radius:8px!important;
}
.tf-homepage .home-category-showcase-grid{
display:grid!important;
grid-template-columns:1fr!important;
gap:7px!important;
width:100%!important;
min-width:0!important;
}
/* Compact category hero */
.tf-homepage .home-category-source-card{
min-height:154px!important;
height:154px!important;
padding:10px!important;
border-radius:10px!important;
background-size:cover!important;
background-position:center center!important;
}
.tf-homepage .home-category-source-card strong{
margin:34px 0 4px!important;
max-width:76%!important;
font-size:16px!important;
line-height:1.03!important;
}
.tf-homepage .home-category-source-card p{
max-width:80%!important;
font-size:7px!important;
line-height:1.3!important;
}
.tf-homepage .home-category-source-card ul{
margin-top:5px!important;
gap:2px!important;
}
.tf-homepage .home-category-source-card li{
font-size:6.2px!important;
}
/* Horizontal swipe rail for all subcategories */
.tf-homepage .home-category-subgrid{
display:flex!important;
flex-wrap:nowrap!important;
grid-template-columns:none!important;
grid-template-rows:none!important;
grid-auto-flow:initial!important;
gap:7px!important;
width:auto!important;
max-width:none!important;
margin:0 -8px!important;
padding:0 8px 4px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-padding-left:8px!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-inline:contain!important;
scrollbar-width:none!important;
}
.tf-homepage .home-category-subgrid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .home-category-subcard{
flex:0 0 154px!important;
width:154px!important;
min-width:154px!important;
max-width:154px!important;
height:164px!important;
min-height:164px!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:78px 58px 28px!important;
scroll-snap-align:start!important;
border-radius:9px!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-homepage .home-category-subcard-image{
width:100%!important;
height:78px!important;
min-height:78px!important;
background:#fff!important;
}
.tf-homepage .home-category-subcard-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center center!important;
padding:4px!important;
box-sizing:border-box!important;
background:#fff!important;
}
.tf-homepage .home-category-subcard-body{
height:58px!important;
min-height:58px!important;
padding:5px 6px 4px!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 2px!important;
font-size:8px!important;
line-height:1.15!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* Show only two child lines in compact rail cards. */
.tf-homepage .home-category-subcard-body ul{
display:block!important;
margin:0!important;
padding:0 0 0 10px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6px!important;
line-height:1.18!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .home-category-subcard-body li:nth-child(n+3){
display:none!important;
}
.tf-homepage .home-category-subcard-action{
height:28px!important;
min-height:28px!important;
padding:0 6px!important;
font-size:6.8px!important;
background:#fff!important;
}
}
@media(max-width:390px){
.tf-homepage .home-category-showcase{
padding:7px!important;
}
.tf-homepage .home-category-source-card{
min-height:144px!important;
height:144px!important;
}
.tf-homepage .home-category-source-card strong{
margin-top:30px!important;
font-size:15px!important;
}
.tf-homepage .home-category-subgrid{
margin-inline:-7px!important;
padding-inline:7px!important;
scroll-padding-left:7px!important;
gap:6px!important;
}
.tf-homepage .home-category-subcard{
flex-basis:142px!important;
width:142px!important;
min-width:142px!important;
max-width:142px!important;
height:156px!important;
min-height:156px!important;
grid-template-rows:72px 57px 27px!important;
}
.tf-homepage .home-category-subcard-image{
height:72px!important;
min-height:72px!important;
}
.tf-homepage .home-category-subcard-body{
height:57px!important;
min-height:57px!important;
padding:4px 5px!important;
}
.tf-homepage .home-category-subcard-action{
height:27px!important;
min-height:27px!important;
}
}
/* ===== category-directory-layout-hotfix-18.4.135.css ===== */
/* TradesFolks 18.4.135
Category Directory hotfix after CSS consolidation.
Desktop: left parent card + 8 child cards in a true 4 x 2 grid.
Mobile: compact horizontal child-card rail with no reserved dead height.
*/
@media(min-width:821px){
.tf-homepage .home-category-showcases{
width:calc(100% - 56px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
.tf-homepage .home-category-showcases > .shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .home-category-showcase{
margin:0 0 14px!important;
padding:12px!important;
border-radius:16px!important;
box-sizing:border-box!important;
}
.tf-homepage .home-category-showcase-grid{
display:grid!important;
grid-template-columns:minmax(300px,1.16fr) minmax(0,3.04fr)!important;
align-items:stretch!important;
min-height:400px!important;
height:auto!important;
gap:0!important;
}
.tf-homepage .home-category-source-card{
grid-column:1!important;
grid-row:1!important;
min-height:400px!important;
height:100%!important;
margin:0!important;
border-radius:14px 0 0 14px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subgrid{
grid-column:2!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
min-height:400px!important;
height:100%!important;
gap:0!important;
align-content:stretch!important;
}
.tf-homepage .home-category-subcard{
min-width:0!important;
min-height:200px!important;
height:100%!important;
margin:0!important;
padding:14px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard strong{
display:block!important;
min-height:20px!important;
margin:0!important;
font-size:13px!important;
line-height:1.2!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.tf-homepage .home-category-subcard-image{
display:flex!important;
align-items:center!important;
justify-content:center!important;
height:145px!important;
min-height:145px!important;
margin-top:6px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
display:block!important;
}
.tf-homepage .home-category-subcard:nth-child(n+9){
display:none!important;
}
}
@media(min-width:821px) and (max-width:1180px){
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(250px,1fr) minmax(0,3fr)!important;
min-height:360px!important;
}
.tf-homepage .home-category-source-card,
.tf-homepage .home-category-subgrid{
min-height:360px!important;
}
.tf-homepage .home-category-subcard{
min-height:180px!important;
padding:11px!important;
}
.tf-homepage .home-category-subcard-image{
height:126px!important;
min-height:126px!important;
}
}
@media(max-width:820px){
.tf-homepage .home-category-showcases{
width:calc(100% - 16px)!important;
margin:10px auto!important;
min-height:0!important;
height:auto!important;
}
.tf-homepage .home-category-showcases > .shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .home-category-showcase{
margin:0 0 10px!important;
padding:10px!important;
min-height:0!important;
height:auto!important;
border-radius:14px!important;
}
.tf-homepage .home-category-showcase-head{
margin-bottom:8px!important;
}
.tf-homepage .home-category-showcase-grid{
display:block!important;
min-height:0!important;
height:auto!important;
}
.tf-homepage .home-category-source-card{
min-height:138px!important;
height:138px!important;
margin:0 0 8px!important;
border-radius:12px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subgrid{
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
width:100%!important;
min-height:0!important;
height:auto!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .home-category-subgrid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .home-category-subcard{
flex:0 0 42vw!important;
width:42vw!important;
min-width:42vw!important;
max-width:42vw!important;
min-height:120px!important;
height:120px!important;
padding:8px!important;
border-radius:11px!important;
scroll-snap-align:start!important;
}
.tf-homepage .home-category-subcard strong{
font-size:7px!important;
line-height:1.15!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .home-category-subcard-image{
height:82px!important;
min-height:82px!important;
margin-top:4px!important;
}
.tf-homepage .home-category-subcard-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
}
}
/* ===== service-sections-premium-compact-18.4.136.css ===== */
/* TradesFolks 18.4.136
Premium compact treatment for:
- Sourcing Solutions & Tailored Services
- Business Growth & Trade Services
No content/card-count changes.
*/
/* =========================
DESKTOP / LARGE TABLET
========================= */
@media(min-width:821px){
.tf-homepage .tf-service-directory-section,
.tf-homepage .tf-service-section,
.tf-homepage .home-service-section{
width:calc(100% - 56px)!important;
max-width:none!important;
margin:18px auto!important;
padding:0!important;
}
.tf-homepage .tf-service-directory-section > .shell,
.tf-homepage .tf-service-section > .shell,
.tf-homepage .home-service-section > .shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
/* Section heading */
.tf-homepage .tf-service-section-head,
.tf-homepage .tf-service-directory-head,
.tf-homepage .home-service-head{
margin:0 0 10px!important;
align-items:end!important;
}
.tf-homepage .tf-service-section-head .eyebrow,
.tf-homepage .tf-service-directory-head .eyebrow,
.tf-homepage .home-service-head .eyebrow{
margin-bottom:3px!important;
font-size:9px!important;
letter-spacing:.11em!important;
}
.tf-homepage .tf-service-section-head h2,
.tf-homepage .tf-service-directory-head h2,
.tf-homepage .home-service-head h2{
margin:0!important;
font-size:27px!important;
line-height:1.05!important;
letter-spacing:-.035em!important;
}
.tf-homepage .tf-service-section-head p,
.tf-homepage .tf-service-directory-head p,
.tf-homepage .home-service-head p{
margin:4px 0 0!important;
font-size:11px!important;
line-height:1.35!important;
}
.tf-homepage .tf-service-section-head > a,
.tf-homepage .tf-service-directory-head > a,
.tf-homepage .home-service-head > a{
min-height:34px!important;
padding:0 14px!important;
border-radius:999px!important;
font-size:10px!important;
font-weight:800!important;
}
/* Exactly four cards per row */
.tf-homepage .tf-service-directory-grid,
.tf-homepage .tf-service-grid,
.tf-homepage .home-service-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
align-items:stretch!important;
}
.tf-homepage .tf-service-card{
min-width:0!important;
min-height:0!important;
height:292px!important;
margin:0!important;
border-radius:14px!important;
border:1px solid #dce5ef!important;
background:#fff!important;
overflow:hidden!important;
box-shadow:0 6px 16px rgba(16,43,87,.045)!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tf-homepage .tf-service-card:hover{
transform:translateY(-2px)!important;
border-color:#c9d8e8!important;
box-shadow:0 12px 26px rgba(16,43,87,.08)!important;
}
/* Hero area: reduce excessive whitespace */
.tf-homepage .tf-service-card-hero{
position:relative!important;
display:block!important;
height:208px!important;
min-height:208px!important;
padding:0!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-homepage .tf-service-card-media{
position:absolute!important;
inset:0 0 65px 0!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
padding:9px 18px 4px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.tf-homepage .tf-service-card-media img{
width:100%!important;
height:100%!important;
max-width:88%!important;
object-fit:contain!important;
object-position:center!important;
display:block!important;
}
/* Coloured title strip */
.tf-homepage .tf-service-card-directory-copy{
position:absolute!important;
left:14px!important;
right:14px!important;
bottom:9px!important;
min-height:57px!important;
height:57px!important;
padding:7px 11px!important;
border-radius:0!important;
box-sizing:border-box!important;
overflow:hidden!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
}
.tf-homepage .tf-service-card-directory-copy small{
display:block!important;
margin:0 0 1px!important;
font-size:6.5px!important;
line-height:1!important;
letter-spacing:.08em!important;
text-transform:uppercase!important;
font-weight:800!important;
opacity:.76!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
margin:0!important;
max-width:100%!important;
font-size:18px!important;
line-height:1.02!important;
letter-spacing:-.035em!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-service-card-directory-cta{
display:flex!important;
align-items:center!important;
gap:5px!important;
width:max-content!important;
max-width:100%!important;
margin-top:4px!important;
padding:0!important;
background:transparent!important;
border:0!important;
font-size:7px!important;
line-height:1!important;
font-weight:800!important;
letter-spacing:.055em!important;
white-space:nowrap!important;
}
.tf-homepage .tf-service-card-directory-cta svg{
width:10px!important;
height:10px!important;
flex:0 0 10px!important;
}
/* Three small categories: one compact footer row */
.tf-homepage .tf-service-mini-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
height:84px!important;
min-height:84px!important;
border-top:1px solid #e5ebf2!important;
background:#fff!important;
}
.tf-homepage .tf-service-mini-grid > a{
min-width:0!important;
min-height:0!important;
height:84px!important;
padding:7px 6px 6px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
align-items:center!important;
gap:4px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.tf-homepage .tf-service-mini-grid > a + a{
border-left:1px solid #e5ebf2!important;
}
.tf-homepage .tf-service-mini-image{
width:42px!important;
height:36px!important;
min-width:42px!important;
min-height:36px!important;
padding:0!important;
border:0!important;
border-radius:8px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-homepage .tf-service-mini-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
display:block!important;
}
.tf-homepage .tf-service-mini-grid strong{
width:100%!important;
margin:0!important;
font-size:7px!important;
line-height:1.1!important;
font-weight:750!important;
text-align:center!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
}
/* =========================
MID-SIZE DESKTOP / TABLET
========================= */
@media(min-width:821px) and (max-width:1180px){
.tf-homepage .tf-service-directory-grid,
.tf-homepage .tf-service-grid,
.tf-homepage .home-service-grid{
gap:8px!important;
}
.tf-homepage .tf-service-card{
height:272px!important;
}
.tf-homepage .tf-service-card-hero{
height:194px!important;
min-height:194px!important;
}
.tf-homepage .tf-service-card-media{
inset:0 0 61px 0!important;
padding:8px 13px 3px!important;
}
.tf-homepage .tf-service-card-directory-copy{
left:10px!important;
right:10px!important;
bottom:8px!important;
min-height:53px!important;
height:53px!important;
padding:6px 9px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:15px!important;
}
.tf-homepage .tf-service-mini-grid,
.tf-homepage .tf-service-mini-grid > a{
height:78px!important;
min-height:78px!important;
}
.tf-homepage .tf-service-mini-image{
width:36px!important;
min-width:36px!important;
height:31px!important;
min-height:31px!important;
}
}
/* =========================
MOBILE
========================= */
@media(max-width:820px){
.tf-homepage .tf-service-directory-section,
.tf-homepage .tf-service-section,
.tf-homepage .home-service-section{
width:calc(100% - 16px)!important;
max-width:none!important;
margin:14px auto!important;
padding:0!important;
}
.tf-homepage .tf-service-directory-section > .shell,
.tf-homepage .tf-service-section > .shell,
.tf-homepage .home-service-section > .shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .tf-service-section-head,
.tf-homepage .tf-service-directory-head,
.tf-homepage .home-service-head{
margin-bottom:8px!important;
}
.tf-homepage .tf-service-section-head h2,
.tf-homepage .tf-service-directory-head h2,
.tf-homepage .home-service-head h2{
font-size:21px!important;
line-height:1.05!important;
}
.tf-homepage .tf-service-section-head p,
.tf-homepage .tf-service-directory-head p,
.tf-homepage .home-service-head p{
font-size:10px!important;
line-height:1.3!important;
}
/* Horizontal swipe cards instead of giant stacked cards */
.tf-homepage .tf-service-directory-grid,
.tf-homepage .tf-service-grid,
.tf-homepage .home-service-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:9px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
padding:0 1px 4px!important;
}
.tf-homepage .tf-service-directory-grid::-webkit-scrollbar,
.tf-homepage .tf-service-grid::-webkit-scrollbar,
.tf-homepage .home-service-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-service-card{
flex:0 0 78vw!important;
width:78vw!important;
min-width:78vw!important;
max-width:78vw!important;
height:242px!important;
min-height:242px!important;
border-radius:13px!important;
scroll-snap-align:start!important;
overflow:hidden!important;
box-shadow:0 5px 14px rgba(16,43,87,.05)!important;
}
.tf-homepage .tf-service-card-hero{
height:174px!important;
min-height:174px!important;
}
.tf-homepage .tf-service-card-media{
inset:0 0 57px 0!important;
padding:8px 12px 3px!important;
}
.tf-homepage .tf-service-card-media img{
max-width:84%!important;
object-fit:contain!important;
}
.tf-homepage .tf-service-card-directory-copy{
left:9px!important;
right:9px!important;
bottom:7px!important;
height:50px!important;
min-height:50px!important;
padding:6px 9px!important;
}
.tf-homepage .tf-service-card-directory-copy small{
font-size:6px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:15px!important;
}
.tf-homepage .tf-service-card-directory-cta{
margin-top:3px!important;
font-size:6.5px!important;
}
.tf-homepage .tf-service-mini-grid,
.tf-homepage .tf-service-mini-grid > a{
height:68px!important;
min-height:68px!important;
}
.tf-homepage .tf-service-mini-grid > a{
padding:5px 4px!important;
gap:3px!important;
}
.tf-homepage .tf-service-mini-image{
width:32px!important;
min-width:32px!important;
height:27px!important;
min-height:27px!important;
}
.tf-homepage .tf-service-mini-grid strong{
font-size:6.5px!important;
}
}
@media(max-width:430px){
.tf-homepage .tf-service-card{
flex-basis:82vw!important;
width:82vw!important;
min-width:82vw!important;
max-width:82vw!important;
height:228px!important;
min-height:228px!important;
}
.tf-homepage .tf-service-card-hero{
height:164px!important;
min-height:164px!important;
}
.tf-homepage .tf-service-mini-grid,
.tf-homepage .tf-service-mini-grid > a{
height:64px!important;
min-height:64px!important;
}
}
/* ===== homepage-canonical-overrides-18.4.134.css ===== */
/*
* TradesFolks Homepage Canonical Overrides — 18.4.134
* Phase 1 stability consolidation.
* No declarations rewritten or reordered.
* Missing historical files are not recreated; stale links are removed.
*/
/* =========================================================
SOURCE: category-showcase-premium-18.4.72.css
SHA256: 8967ee486d6f558998238b41fbced00a7a5b0e15114f51a6f437d40e444fafd9
Production order preserved.
========================================================= */
/* TradesFolks 18.4.71 — Premium Category Showcase Refinement
Additive override for homepage Browse by Category showcase.
Goals: premium hierarchy, lower vertical density, correct image proportions,
compact desktop cards and app-style mobile horizontal swipe. */
.tf-homepage .home-category-showcases{
background:linear-gradient(180deg,#f7f9fc 0%,#f4f7fb 100%)!important;
}
.tf-homepage .home-category-showcase{
border:1px solid #dfe7f0!important;
background:#fff!important;
box-shadow:0 8px 28px rgba(13,35,68,.045)!important;
}
.tf-homepage .home-category-showcase-head{
align-items:flex-end!important;
}
.tf-homepage .home-category-browse-pill{
border:1px solid rgba(222,161,0,.10)!important;
box-shadow:none!important;
}
.tf-homepage .home-category-showcase-head h3{
color:#0a2242!important;
letter-spacing:-.035em!important;
}
.tf-homepage .home-category-showcase-head p{
color:#667991!important;
}
.tf-homepage .home-category-showcase-head>a{
flex:0 0 auto!important;
width:auto!important;
border:1px solid #d8e4f1!important;
background:#fff!important;
color:#075bc7!important;
box-shadow:0 3px 10px rgba(8,39,82,.035)!important;
font-weight:800!important;
white-space:nowrap!important;
}
.tf-homepage .home-category-showcase-head>a:hover{
border-color:#abc7e8!important;
background:#f7fbff!important;
transform:translateY(-1px)!important;
}
.tf-homepage .home-category-source-card{
isolation:isolate!important;
overflow:hidden!important;
border:1px solid rgba(8,31,63,.08)!important;
box-shadow:0 8px 22px rgba(5,26,55,.08)!important;
background-size:cover!important;
background-repeat:no-repeat!important;
}
.tf-homepage .home-category-source-card:before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:-1!important;
background:linear-gradient(180deg,rgba(5,24,50,.02) 5%,rgba(5,25,54,.12) 45%,rgba(5,24,52,.90) 100%)!important;
pointer-events:none!important;
}
.tf-homepage .home-category-source-card strong{
letter-spacing:-.035em!important;
text-shadow:0 2px 12px rgba(1,18,41,.22)!important;
}
.tf-homepage .home-category-source-card p,
.tf-homepage .home-category-source-card li{
text-shadow:0 1px 6px rgba(1,18,41,.18)!important;
}
.tf-homepage .home-category-subcard{
border:1px solid #dde6ef!important;
background:#fff!important;
box-shadow:0 3px 12px rgba(11,37,71,.035)!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.tf-homepage .home-category-subcard:hover{
transform:translateY(-2px)!important;
border-color:#c4d5e8!important;
box-shadow:0 10px 24px rgba(11,37,71,.075)!important;
}
.tf-homepage .home-category-subcard-image{
position:relative!important;
background:#fff!important;
border-bottom:1px solid #edf1f5!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
background:#fff!important;
transform:none!important;
transition:transform .22s ease!important;
}
.tf-homepage .home-category-subcard:hover .home-category-subcard-image img{
transform:scale(1.025)!important;
}
.tf-homepage .home-category-subcard-body{
background:#fff!important;
}
.tf-homepage .home-category-subcard-body h4{
color:#102746!important;
font-weight:800!important;
letter-spacing:-.015em!important;
}
.tf-homepage .home-category-subcard-body li{
color:#6a7d94!important;
}
.tf-homepage .home-category-subcard-action{
border-top:1px solid #edf1f5!important;
background:#fff!important;
color:#075bc7!important;
font-weight:800!important;
}
.tf-homepage .home-category-subcard-action:hover{
background:#f7fbff!important;
}
.tf-homepage .tf-sub-more{
display:none;
color:#7b8da1;
font-weight:700;
}
/* Large desktop: stronger 25/75 hierarchy and lower section height. */
@media(min-width:1440px){
.tf-homepage .home-category-showcases{
padding:14px 0 18px!important;
}
.tf-homepage .home-category-showcase-list{
gap:14px!important;
}
.tf-homepage .home-category-showcase{
padding:13px!important;
border-radius:16px!important;
}
.tf-homepage .home-category-showcase-head{
margin-bottom:9px!important;
}
.tf-homepage .home-category-browse-pill{
padding:4px 8px!important;
font-size:7px!important;
}
.tf-homepage .home-category-showcase-head h3{
margin:5px 0 2px!important;
font-size:23px!important;
}
.tf-homepage .home-category-showcase-head p{
font-size:9px!important;
line-height:1.35!important;
}
.tf-homepage .home-category-showcase-head>a{
min-height:30px!important;
padding:0 11px!important;
border-radius:8px!important;
font-size:8px!important;
}
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(270px,25%) minmax(0,75%)!important;
gap:9px!important;
}
.tf-homepage .home-category-source-card{
height:356px!important;
min-height:356px!important;
padding:14px!important;
border-radius:13px!important;
}
.tf-homepage .home-category-source-card strong{
margin-top:auto!important;
max-width:88%!important;
font-size:20px!important;
line-height:1.02!important;
}
.tf-homepage .home-category-source-card p{
max-width:86%!important;
margin-top:5px!important;
font-size:8px!important;
line-height:1.35!important;
}
.tf-homepage .home-category-source-card ul{
margin-top:7px!important;
gap:3px!important;
}
.tf-homepage .home-category-source-card li{
font-size:7px!important;
}
.tf-homepage .home-category-subgrid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .home-category-subcard{
height:174px!important;
min-height:174px!important;
grid-template-rows:82px 64px 28px!important;
border-radius:10px!important;
}
.tf-homepage .home-category-subcard-image{
height:82px!important;
}
.tf-homepage .home-category-subcard-image img{
padding:6px!important;
box-sizing:border-box!important;
}
.tf-homepage .home-category-subcard-body{
height:64px!important;
padding:6px 8px 4px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 3px!important;
font-size:9px!important;
line-height:1.16!important;
}
.tf-homepage .home-category-subcard-body ul{
margin:0!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6.3px!important;
line-height:1.2!important;
}
.tf-homepage .home-category-subcard-body li:nth-child(n+4){
display:none!important;
}
.tf-homepage .home-category-subcard-action{
height:28px!important;
min-height:28px!important;
padding:0 8px!important;
font-size:7px!important;
}
}
/* Laptop / standard desktop: compact without sacrificing readability. */
@media(min-width:900px) and (max-width:1439px){
.tf-homepage .home-category-showcases{
padding:13px 0 17px!important;
}
.tf-homepage .home-category-showcase-list{
gap:13px!important;
}
.tf-homepage .home-category-showcase{
padding:11px!important;
border-radius:14px!important;
}
.tf-homepage .home-category-showcase-head{
margin-bottom:8px!important;
}
.tf-homepage .home-category-showcase-head h3{
font-size:20px!important;
}
.tf-homepage .home-category-showcase-head p{
font-size:8.5px!important;
}
.tf-homepage .home-category-showcase-head>a{
min-height:29px!important;
padding:0 10px!important;
font-size:7.5px!important;
}
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(225px,25%) minmax(0,75%)!important;
gap:8px!important;
}
.tf-homepage .home-category-source-card{
height:330px!important;
min-height:330px!important;
padding:12px!important;
border-radius:12px!important;
}
.tf-homepage .home-category-source-card strong{
font-size:18px!important;
max-width:90%!important;
}
.tf-homepage .home-category-source-card p{
max-width:90%!important;
font-size:7.5px!important;
}
.tf-homepage .home-category-source-card li{
font-size:6.7px!important;
}
.tf-homepage .home-category-subgrid{
gap:7px!important;
}
.tf-homepage .home-category-subcard{
height:161px!important;
min-height:161px!important;
grid-template-rows:75px 59px 27px!important;
}
.tf-homepage .home-category-subcard-image{
height:75px!important;
}
.tf-homepage .home-category-subcard-image img{
padding:5px!important;
box-sizing:border-box!important;
}
.tf-homepage .home-category-subcard-body{
height:59px!important;
padding:5px 7px 4px!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 2px!important;
font-size:8.5px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6px!important;
line-height:1.18!important;
}
.tf-homepage .home-category-subcard-body li:nth-child(n+4){
display:none!important;
}
.tf-homepage .home-category-subcard-action{
height:27px!important;
min-height:27px!important;
font-size:6.7px!important;
}
}
/* Tablet: hero + 3-column matrix remain balanced. */
@media(min-width:700px) and (max-width:899px){
.tf-homepage .home-category-showcase{
padding:10px!important;
border-radius:13px!important;
}
.tf-homepage .home-category-showcase-head h3{
font-size:20px!important;
}
.tf-homepage .home-category-showcase-grid{
gap:8px!important;
}
.tf-homepage .home-category-source-card{
min-height:195px!important;
height:195px!important;
}
.tf-homepage .home-category-subcard{
min-height:170px!important;
height:170px!important;
grid-template-rows:78px 64px 28px!important;
}
.tf-homepage .home-category-subcard-image{
height:78px!important;
}
.tf-homepage .home-category-subcard-body{
height:64px!important;
}
}
/* Mobile: compact header, compact hero and true two-card + peek swipe rail. */
@media(max-width:699px){
.tf-homepage .home-category-showcases{
padding:8px 0 12px!important;
}
.tf-homepage .home-category-showcases>.shell{
width:100%!important;
max-width:none!important;
padding-inline:7px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.tf-homepage .home-category-showcase-list{
gap:10px!important;
}
.tf-homepage .home-category-showcase{
padding:9px!important;
border-radius:14px!important;
}
.tf-homepage .home-category-showcase-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-areas:
"pill action"
"title action"
"desc desc"!important;
column-gap:8px!important;
row-gap:2px!important;
align-items:center!important;
margin-bottom:8px!important;
}
.tf-homepage .home-category-browse-pill{
grid-area:pill!important;
padding:4px 7px!important;
font-size:6.7px!important;
border-radius:999px!important;
}
.tf-homepage .home-category-showcase-head>div{
display:contents!important;
}
.tf-homepage .home-category-showcase-head h3{
grid-area:title!important;
margin:5px 0 0!important;
font-size:19px!important;
line-height:1.04!important;
}
.tf-homepage .home-category-showcase-head p{
grid-area:desc!important;
margin:3px 0 0!important;
font-size:8px!important;
line-height:1.32!important;
}
.tf-homepage .home-category-showcase-head>a{
grid-area:action!important;
align-self:center!important;
min-height:28px!important;
height:28px!important;
padding:0 9px!important;
border-radius:8px!important;
font-size:7px!important;
}
.tf-homepage .home-category-showcase-grid{
grid-template-columns:1fr!important;
gap:7px!important;
width:100%!important;
}
.tf-homepage .home-category-source-card{
height:208px!important;
min-height:208px!important;
padding:11px!important;
border-radius:12px!important;
background-position:center center!important;
}
.tf-homepage .home-category-source-card strong{
margin-top:auto!important;
max-width:78%!important;
font-size:17px!important;
line-height:1.03!important;
}
.tf-homepage .home-category-source-card p{
max-width:80%!important;
margin:5px 0 0!important;
font-size:7.2px!important;
line-height:1.32!important;
}
.tf-homepage .home-category-source-card ul{
margin-top:6px!important;
gap:2px!important;
}
.tf-homepage .home-category-source-card li{
font-size:6.2px!important;
}
.tf-homepage .home-category-subgrid{
display:flex!important;
flex-wrap:nowrap!important;
gap:7px!important;
width:auto!important;
max-width:none!important;
margin:0 -9px!important;
padding:0 9px 5px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-padding-inline:9px!important;
scroll-behavior:smooth!important;
-webkit-overflow-scrolling:touch!important;
overscroll-behavior-inline:contain!important;
scrollbar-width:none!important;
}
.tf-homepage .home-category-subgrid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .home-category-subcard{
flex:0 0 clamp(142px,44vw,176px)!important;
width:clamp(142px,44vw,176px)!important;
min-width:clamp(142px,44vw,176px)!important;
max-width:clamp(142px,44vw,176px)!important;
height:174px!important;
min-height:174px!important;
display:grid!important;
grid-template-columns:1fr!important;
grid-template-rows:88px 59px 27px!important;
scroll-snap-align:start!important;
scroll-snap-stop:normal!important;
border-radius:10px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-image{
height:88px!important;
min-height:88px!important;
}
.tf-homepage .home-category-subcard-image img{
padding:5px!important;
box-sizing:border-box!important;
}
.tf-homepage .home-category-subcard-body{
height:59px!important;
min-height:59px!important;
padding:5px 7px 3px!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 3px!important;
font-size:8.2px!important;
line-height:1.15!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .home-category-subcard-body ul{
margin:0!important;
padding-left:10px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6.2px!important;
line-height:1.18!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .home-category-subcard-body li:nth-child(n+3){
display:none!important;
}
.tf-homepage .tf-sub-more{
display:block!important;
margin-top:2px!important;
padding-left:1px!important;
font-size:5.8px!important;
line-height:1!important;
}
.tf-homepage .home-category-subcard-action{
height:27px!important;
min-height:27px!important;
padding:0 7px!important;
font-size:6.8px!important;
}
}
/* Narrow phones: maintain two cards rather than one oversized card. */
@media(max-width:390px){
.tf-homepage .home-category-showcase{
padding:8px!important;
}
.tf-homepage .home-category-showcase-head h3{
font-size:18px!important;
}
.tf-homepage .home-category-showcase-head p{
font-size:7.6px!important;
}
.tf-homepage .home-category-source-card{
min-height:194px!important;
height:194px!important;
}
.tf-homepage .home-category-source-card strong{
font-size:16px!important;
}
.tf-homepage .home-category-subgrid{
margin-inline:-8px!important;
padding-inline:8px!important;
gap:6px!important;
scroll-padding-inline:8px!important;
}
.tf-homepage .home-category-subcard{
flex-basis:43.5vw!important;
width:43.5vw!important;
min-width:43.5vw!important;
max-width:43.5vw!important;
height:166px!important;
min-height:166px!important;
grid-template-rows:82px 58px 26px!important;
}
.tf-homepage .home-category-subcard-image{
height:82px!important;
min-height:82px!important;
}
.tf-homepage .home-category-subcard-body{
height:58px!important;
}
.tf-homepage .home-category-subcard-action{
height:26px!important;
min-height:26px!important;
}
}
/* Motion accessibility */
@media(prefers-reduced-motion:reduce){
.tf-homepage .home-category-subcard,
.tf-homepage .home-category-subcard-image img,
.tf-homepage .home-category-showcase-head>a{
transition:none!important;
}
.tf-homepage .home-category-subgrid{
scroll-behavior:auto!important;
}
}
/* TradesFolks 18.4.72 — Category Showcase Layout Hotfix
Fixes clipped titles, oversized empty body space and mismatched card heights introduced
by rigid grid-template rows in 18.4.71. */
.tf-homepage .home-category-subcard{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
height:auto!important;
overflow:hidden!important;
}
.tf-homepage .home-category-subcard-image{
flex:0 0 auto!important;
min-height:0!important;
}
.tf-homepage .home-category-subcard-body{
flex:1 1 auto!important;
min-height:0!important;
height:auto!important;
overflow:hidden!important;
display:block!important;
}
.tf-homepage .home-category-subcard-action{
flex:0 0 auto!important;
margin-top:auto!important;
}
.tf-homepage .home-category-subcard-body h4{
position:relative!important;
z-index:1!important;
display:block!important;
overflow:visible!important;
clip:auto!important;
max-height:none!important;
}
/* Large desktop */
@media(min-width:1440px){
.tf-homepage .home-category-showcase{
padding:14px!important;
}
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(330px,25%) minmax(0,75%)!important;
gap:10px!important;
align-items:stretch!important;
}
.tf-homepage .home-category-source-card{
height:438px!important;
min-height:438px!important;
}
.tf-homepage .home-category-subgrid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:9px!important;
align-items:stretch!important;
}
.tf-homepage .home-category-subcard{
height:214px!important;
min-height:214px!important;
}
.tf-homepage .home-category-subcard-image{
height:116px!important;
min-height:116px!important;
flex-basis:116px!important;
}
.tf-homepage .home-category-subcard-image img{
padding:7px!important;
}
.tf-homepage .home-category-subcard-body{
padding:8px 10px 6px!important;
min-height:64px!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 5px!important;
font-size:10px!important;
line-height:1.2!important;
}
.tf-homepage .home-category-subcard-body ul{
margin:0!important;
padding-left:12px!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6.8px!important;
line-height:1.3!important;
}
.tf-homepage .home-category-subcard-body li:nth-child(n+4){
display:none!important;
}
.tf-homepage .home-category-subcard-action{
height:31px!important;
min-height:31px!important;
padding:0 10px!important;
font-size:7.2px!important;
}
}
/* Standard desktop / laptop */
@media(min-width:1000px) and (max-width:1439px){
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(280px,27%) minmax(0,73%)!important;
gap:9px!important;
align-items:stretch!important;
}
.tf-homepage .home-category-source-card{
height:392px!important;
min-height:392px!important;
}
.tf-homepage .home-category-subgrid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .home-category-subcard{
height:192px!important;
min-height:192px!important;
}
.tf-homepage .home-category-subcard-image{
height:100px!important;
min-height:100px!important;
flex-basis:100px!important;
}
.tf-homepage .home-category-subcard-body{
padding:7px 9px 5px!important;
min-height:61px!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 4px!important;
font-size:9px!important;
line-height:1.18!important;
}
.tf-homepage .home-category-subcard-body li{
font-size:6.4px!important;
line-height:1.25!important;
}
.tf-homepage .home-category-subcard-action{
height:30px!important;
min-height:30px!important;
padding:0 9px!important;
font-size:7px!important;
}
}
/* Tablet */
@media(min-width:700px) and (max-width:999px){
.tf-homepage .home-category-showcase-grid{
align-items:stretch!important;
}
.tf-homepage .home-category-source-card{
height:250px!important;
min-height:250px!important;
}
.tf-homepage .home-category-subcard{
height:184px!important;
min-height:184px!important;
}
.tf-homepage .home-category-subcard-image{
height:94px!important;
min-height:94px!important;
flex-basis:94px!important;
}
.tf-homepage .home-category-subcard-body{
padding:7px 8px 5px!important;
min-height:60px!important;
}
.tf-homepage .home-category-subcard-action{
height:29px!important;
min-height:29px!important;
}
}
/* Mobile keeps horizontal rail but also uses flexible card internals. */
@media(max-width:699px){
.tf-homepage .home-category-source-card{
height:214px!important;
min-height:214px!important;
}
.tf-homepage .home-category-subcard{
height:170px!important;
min-height:170px!important;
}
.tf-homepage .home-category-subcard-image{
height:88px!important;
min-height:88px!important;
flex-basis:88px!important;
}
.tf-homepage .home-category-subcard-body{
min-height:55px!important;
height:auto!important;
padding:5px 7px 4px!important;
}
.tf-homepage .home-category-subcard-body h4{
margin:0 0 3px!important;
font-size:8.2px!important;
line-height:1.15!important;
}
.tf-homepage .home-category-subcard-action{
height:27px!important;
min-height:27px!important;
}
}
/* Prevent image/content collision regardless of upstream styles. */
.tf-homepage .home-category-subcard-image + .home-category-subcard-body{
margin-top:0!important;
transform:none!important;
}
.tf-homepage .home-category-subcard-body,
.tf-homepage .home-category-subcard-body *{
transform:none!important;
}
/* =========================================================
SOURCE: category-directory-reference-18.4.88.css
SHA256: 62be0cf7d146ecfd583fd5f75c818f131670665c8deadd5ef6f17e59f72019bd
Production order preserved.
========================================================= */
/* TradesFolks 18.4.88 — Category Directory Unique Parent Palettes
Reference-inspired parent category + 4x2 subcategory matrix.
Parent: light branded panel + Source Now + single category image.
Child: name on top + single image. No lists, no footer CTA, no heavy card chrome. */
.tf-homepage .tf-category-directory{
padding:12px 0 16px!important;
background:#f6f8fb!important;
}
.tf-homepage .tf-category-directory>.shell{
width:calc(100% - 24px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
}
.tf-homepage .tf-category-directory-list{
display:grid!important;
gap:12px!important;
}
.tf-homepage .tf-category-directory-module{
padding:11px!important;
overflow:hidden!important;
border:1px solid #e1e7ef!important;
border-radius:17px!important;
background:#fff!important;
box-shadow:0 5px 18px rgba(9,35,69,.035)!important;
}
.tf-homepage .tf-category-directory-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:12px!important;
margin:0 0 8px!important;
}
.tf-homepage .tf-category-directory-head>div{
min-width:0!important;
}
.tf-homepage .tf-category-directory-head .home-category-browse-pill{
display:inline-flex!important;
align-items:center!important;
gap:5px!important;
min-height:23px!important;
padding:0 8px!important;
border:1px solid rgba(223,165,16,.13)!important;
border-radius:999px!important;
background:#fff8dd!important;
color:#8a5b00!important;
font-size:6.8px!important;
font-weight:850!important;
letter-spacing:.06em!important;
text-transform:uppercase!important;
}
.tf-homepage .tf-category-directory-head .home-category-browse-pill i{
width:5px!important;
height:5px!important;
border-radius:50%!important;
background:#f8b91f!important;
}
.tf-homepage .tf-category-directory-head h3{
margin:5px 0 0!important;
color:#0b2343!important;
font-size:21px!important;
line-height:1.05!important;
letter-spacing:-.035em!important;
}
.tf-homepage .tf-category-directory-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 auto!important;
min-height:29px!important;
padding:0 10px!important;
border:1px solid #d8e4f1!important;
border-radius:9px!important;
background:#fff!important;
color:#075bc7!important;
font-size:7px!important;
font-weight:850!important;
text-decoration:none!important;
white-space:nowrap!important;
}
/* Reference: one parent hero + 4x2 subcategory tiles */
.tf-homepage .tf-category-directory-grid{
display:grid!important;
grid-template-columns:minmax(220px,21%) minmax(0,79%)!important;
gap:0!important;
min-height:318px!important;
overflow:hidden!important;
border:1px solid #e1e7ef!important;
border-radius:15px!important;
background:#fff!important;
}
/* Parent panel */
.tf-homepage .tf-category-parent-panel{
position:relative!important;
display:flex!important;
flex-direction:column!important;
justify-content:space-between!important;
width:100%!important;
min-height:318px!important;
height:318px!important;
padding:22px 20px 12px!important;
overflow:hidden!important;
border:0!important;
border-right:1px solid #e1e7ef!important;
border-radius:0!important;
background:linear-gradient(145deg,#fff8d9 0%,#f3f0c9 100%)!important;
box-shadow:none!important;
color:#17233a!important;
text-decoration:none!important;
isolation:isolate!important;
}
.tf-homepage .tf-category-parent-panel:before{
display:none!important;
content:none!important;
}
.tf-homepage .tf-category-parent-copy{
position:relative!important;
z-index:3!important;
display:flex!important;
align-items:flex-start!important;
flex-direction:column!important;
gap:14px!important;
}
.tf-homepage .tf-category-parent-copy>strong{
margin:0!important;
color:#20242c!important;
font-size:19px!important;
font-weight:900!important;
line-height:1.1!important;
text-shadow:none!important;
}
.tf-homepage .tf-category-source-now{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:32px!important;
padding:0 15px!important;
border:1.5px solid #26303f!important;
border-radius:999px!important;
background:#fff!important;
color:#20242c!important;
font-size:9px!important;
font-weight:750!important;
}
.tf-homepage .tf-category-parent-image{
position:absolute!important;
inset:74px 10px 8px 10px!important;
z-index:1!important;
display:flex!important;
align-items:flex-end!important;
justify-content:center!important;
overflow:hidden!important;
}
.tf-homepage .tf-category-parent-image img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
padding:2px!important;
object-fit:contain!important;
object-position:center bottom!important;
filter:none!important;
transform:none!important;
}
.tf-homepage .tf-category-parent-image i{
display:grid!important;
place-items:center!important;
width:92px!important;
height:92px!important;
border-radius:24px!important;
background:rgba(255,255,255,.7)!important;
color:#0b5cc7!important;
font-style:normal!important;
font-weight:900!important;
}
/* 4 columns x 2 rows */
.tf-homepage .tf-category-subcategory-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
grid-template-rows:repeat(2,minmax(0,1fr))!important;
gap:0!important;
width:100%!important;
min-width:0!important;
min-height:318px!important;
background:#fff!important;
}
.tf-homepage .tf-category-subcategory-tile{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
min-height:159px!important;
height:159px!important;
margin:0!important;
padding:15px 14px 7px!important;
overflow:hidden!important;
border:0!important;
border-right:1px solid #e1e7ef!important;
border-bottom:1px solid #e1e7ef!important;
border-radius:0!important;
background:#fff!important;
box-shadow:none!important;
color:#343a44!important;
text-decoration:none!important;
transition:background .16s ease!important;
}
.tf-homepage .tf-category-subcategory-tile:nth-child(4n){
border-right:0!important;
}
.tf-homepage .tf-category-subcategory-tile:nth-child(n+5){
border-bottom:0!important;
}
.tf-homepage .tf-category-subcategory-tile:hover{
transform:none!important;
background:#fbfcfe!important;
box-shadow:none!important;
}
.tf-homepage .tf-category-subcategory-tile>strong{
position:relative!important;
z-index:2!important;
display:block!important;
flex:0 0 auto!important;
max-width:100%!important;
margin:0!important;
overflow:hidden!important;
color:#50545b!important;
font-size:12px!important;
font-weight:650!important;
line-height:1.2!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-category-subcategory-image{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:1 1 auto!important;
width:100%!important;
height:auto!important;
min-height:0!important;
margin:5px 0 0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
background:#fff!important;
}
.tf-homepage .tf-category-subcategory-image img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
padding:3px!important;
object-fit:contain!important;
object-position:center!important;
transform:none!important;
}
.tf-homepage .tf-category-subcategory-image i{
display:grid!important;
place-items:center!important;
width:58px!important;
height:58px!important;
border-radius:16px!important;
background:#f5f7fa!important;
color:#0b5cc7!important;
font-style:normal!important;
font-weight:900!important;
}
.tf-homepage .tf-category-subcategory-empty{
align-items:center!important;
justify-content:center!important;
gap:8px!important;
text-align:center!important;
}
/* Large desktop: slightly larger but still compact */
@media(min-width:1536px){
.tf-homepage .tf-category-directory-grid,
.tf-homepage .tf-category-parent-panel,
.tf-homepage .tf-category-subcategory-grid{
min-height:330px!important;
}
.tf-homepage .tf-category-parent-panel{
height:330px!important;
}
.tf-homepage .tf-category-subcategory-tile{
min-height:165px!important;
height:165px!important;
}
}
/* Laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .tf-category-directory-grid{
grid-template-columns:minmax(205px,24%) minmax(0,76%)!important;
min-height:300px!important;
}
.tf-homepage .tf-category-parent-panel{
min-height:300px!important;
height:300px!important;
padding:18px 16px 10px!important;
}
.tf-homepage .tf-category-parent-copy>strong{
font-size:17px!important;
}
.tf-homepage .tf-category-source-now{
min-height:29px!important;
padding-inline:12px!important;
font-size:8px!important;
}
.tf-homepage .tf-category-subcategory-grid{
min-height:300px!important;
}
.tf-homepage .tf-category-subcategory-tile{
min-height:150px!important;
height:150px!important;
padding:13px 11px 6px!important;
}
.tf-homepage .tf-category-subcategory-tile>strong{
font-size:10.5px!important;
}
}
/* Tablet: parent left, children 3 columns; overflow remains contained. */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-category-directory-module{
padding:9px!important;
}
.tf-homepage .tf-category-directory-grid{
grid-template-columns:210px minmax(0,1fr)!important;
min-height:336px!important;
}
.tf-homepage .tf-category-parent-panel{
min-height:336px!important;
height:336px!important;
padding:18px 14px 10px!important;
}
.tf-homepage .tf-category-subcategory-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
grid-template-rows:none!important;
min-height:336px!important;
}
.tf-homepage .tf-category-subcategory-tile{
min-height:112px!important;
height:112px!important;
padding:9px 8px 4px!important;
}
.tf-homepage .tf-category-subcategory-tile:nth-child(n){
border-right:1px solid #e1e7ef!important;
border-bottom:1px solid #e1e7ef!important;
}
.tf-homepage .tf-category-subcategory-tile:nth-child(3n){
border-right:0!important;
}
.tf-homepage .tf-category-subcategory-tile>strong{
font-size:8.8px!important;
}
}
/* Mobile: parent hero first, then left-to-right swipe tiles. */
@media(max-width:699px){
.tf-homepage .tf-category-directory{
padding:10px 0 14px!important;
}
.tf-homepage .tf-category-directory>.shell{
width:100%!important;
padding:0 7px!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-category-directory-list{
gap:10px!important;
}
.tf-homepage .tf-category-directory-module{
padding:8px!important;
border-radius:14px!important;
}
.tf-homepage .tf-category-directory-head{
align-items:center!important;
margin-bottom:7px!important;
}
.tf-homepage .tf-category-directory-head .home-category-browse-pill{
min-height:20px!important;
padding-inline:7px!important;
font-size:5.8px!important;
}
.tf-homepage .tf-category-directory-head h3{
margin-top:4px!important;
font-size:17px!important;
}
.tf-homepage .tf-category-directory-head>a{
min-height:27px!important;
padding-inline:8px!important;
font-size:6.2px!important;
}
.tf-homepage .tf-category-directory-grid{
display:block!important;
min-height:0!important;
overflow:visible!important;
border-radius:13px!important;
}
.tf-homepage .tf-category-parent-panel{
min-height:210px!important;
height:210px!important;
padding:16px 14px 9px!important;
border-right:0!important;
border-bottom:1px solid #e1e7ef!important;
}
.tf-homepage .tf-category-parent-copy{
gap:10px!important;
}
.tf-homepage .tf-category-parent-copy>strong{
font-size:16px!important;
}
.tf-homepage .tf-category-source-now{
min-height:28px!important;
padding-inline:12px!important;
font-size:7.5px!important;
}
.tf-homepage .tf-category-parent-image{
inset:58px 8px 5px!important;
}
.tf-homepage .tf-category-subcategory-grid{
display:flex!important;
gap:7px!important;
min-height:0!important;
padding:7px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-category-subcategory-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-category-subcategory-tile{
flex:0 0 142px!important;
width:142px!important;
min-width:142px!important;
min-height:126px!important;
height:126px!important;
padding:10px 9px 5px!important;
border:1px solid #e1e7ef!important;
border-radius:10px!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-category-subcategory-tile>strong{
font-size:8.5px!important;
}
}
@media(max-width:360px){
.tf-homepage .tf-category-subcategory-tile{
flex-basis:132px!important;
width:132px!important;
min-width:132px!important;
}
}
/* Sprint 462 — unique soft enterprise palette per parent category.
Palette cycles safely for category 7+ without hard-coding category names. */
.tf-homepage .tf-category-directory-module:nth-child(8n+1) .tf-category-parent-panel{
background:linear-gradient(145deg,#fff7cf 0%,#f6efc8 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+2) .tf-category-parent-panel{
background:linear-gradient(145deg,#eaf5ff 0%,#dcecff 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+3) .tf-category-parent-panel{
background:linear-gradient(145deg,#eef9ed 0%,#def1df 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+4) .tf-category-parent-panel{
background:linear-gradient(145deg,#fff0e7 0%,#fbe1d2 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+5) .tf-category-parent-panel{
background:linear-gradient(145deg,#f4efff 0%,#e8defb 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+6) .tf-category-parent-panel{
background:linear-gradient(145deg,#eaf9f6 0%,#d9f0ea 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n+7) .tf-category-parent-panel{
background:linear-gradient(145deg,#fff1f3 0%,#f9dfe4 100%)!important;
}
.tf-homepage .tf-category-directory-module:nth-child(8n) .tf-category-parent-panel{
background:linear-gradient(145deg,#f1f3f8 0%,#e3e8f1 100%)!important;
}
/* With the duplicate heading removed, keep the utility row deliberately compact. */
.tf-homepage .tf-category-directory-head{
align-items:center!important;
min-height:27px!important;
}
/* =========================================================
SOURCE: service-directory-pattern-18.4.92.css
SHA256: 6985ee5393432481ab3e9841966bb78486451afd73de4d25e39cb42a13668cd6
Production order preserved.
========================================================= */
/* TradesFolks 18.4.89 — Service Directory Pattern
Aligns Sourcing Solutions + Business Growth with the recent clean image-first system. */
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services{
padding:13px 0 16px!important;
background:#f7f9fc!important;
}
.tf-homepage .tf-sourcing-solutions>.shell,
.tf-homepage .tf-business-growth-services>.shell{
width:calc(100% - 24px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
}
.tf-homepage .tf-service-section-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:14px!important;
margin:0 0 9px!important;
}
.tf-homepage .tf-service-section-head>div{
min-width:0!important;
}
.tf-homepage .tf-service-section-head>div>span{
display:block!important;
margin:0 0 3px!important;
color:#075bc7!important;
font-size:6.8px!important;
font-weight:900!important;
letter-spacing:.10em!important;
}
.tf-homepage .tf-service-section-head h2{
margin:0!important;
color:#0b2343!important;
font-size:23px!important;
line-height:1.03!important;
letter-spacing:-.04em!important;
}
.tf-homepage .tf-service-section-head p{
margin:3px 0 0!important;
color:#718096!important;
font-size:7.8px!important;
line-height:1.3!important;
}
.tf-homepage .tf-service-section-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 auto!important;
min-height:29px!important;
padding:0 10px!important;
border:1px solid #d8e4f1!important;
border-radius:9px!important;
background:#fff!important;
color:#075bc7!important;
font-size:6.8px!important;
font-weight:850!important;
text-decoration:none!important;
white-space:nowrap!important;
}
.tf-homepage .tf-service-section-head>a b{
margin-left:5px!important;
}
.tf-homepage .tf-service-card-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .tf-service-card--directory{
min-width:0!important;
overflow:hidden!important;
border:1px solid #dfe7f0!important;
border-radius:15px!important;
background:#fff!important;
box-shadow:0 5px 16px rgba(9,35,69,.04)!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tf-homepage .tf-service-card--directory:hover{
transform:translateY(-2px)!important;
border-color:#c7d7e8!important;
box-shadow:0 10px 24px rgba(9,35,69,.08)!important;
}
/* image-first hero */
.tf-homepage .tf-service-card-directory-hero{
display:flex!important;
flex-direction:column!important;
width:100%!important;
height:auto!important;
min-height:0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
background:#fff!important;
box-shadow:none!important;
color:#0b2343!important;
text-decoration:none!important;
}
.tf-homepage .tf-service-card-directory-hero:before,
.tf-homepage .tf-service-card-directory-hero:after{
display:none!important;
content:none!important;
}
.tf-homepage .tf-service-card-media{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:188px!important;
min-height:188px!important;
padding:5px!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-homepage .tf-service-card-media img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
transform:none!important;
}
.tf-homepage .tf-service-card-media i{
display:grid!important;
place-items:center!important;
width:72px!important;
height:72px!important;
border-radius:20px!important;
background:#f2f6fb!important;
color:#075bc7!important;
font-style:normal!important;
font-weight:900!important;
}
/* compact branded footer */
.tf-homepage .tf-service-card-directory-copy{
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
min-height:76px!important;
padding:10px 12px 11px!important;
background:linear-gradient(180deg,#ffd85f 0%,#fbbf24 100%)!important;
color:#0b2343!important;
}
.tf-homepage .tf-service-card-directory-copy small{
display:block!important;
margin:0 0 4px!important;
color:#71510b!important;
font-size:5.7px!important;
font-weight:900!important;
letter-spacing:.08em!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
display:block!important;
width:100%!important;
margin:0!important;
overflow:hidden!important;
color:#0b2343!important;
font-size:12px!important;
font-weight:900!important;
line-height:1.15!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-service-card-directory-cta{
display:inline-flex!important;
align-items:center!important;
gap:5px!important;
margin-top:6px!important;
color:#0b4f9f!important;
font-size:6.8px!important;
font-weight:850!important;
}
.tf-homepage .tf-service-card-directory-cta svg{
width:12px!important;
height:12px!important;
flex:0 0 auto!important;
}
/* subtle distinct palette per service card */
.tf-homepage .tf-service-card-grid .tf-service-card--directory:nth-child(4n+2) .tf-service-card-directory-copy{
background:linear-gradient(180deg,#e7f3ff 0%,#d7eaff 100%)!important;
}
.tf-homepage .tf-service-card-grid .tf-service-card--directory:nth-child(4n+3) .tf-service-card-directory-copy{
background:linear-gradient(180deg,#e9f7e7 0%,#dcefd9 100%)!important;
}
.tf-homepage .tf-service-card-grid .tf-service-card--directory:nth-child(4n) .tf-service-card-directory-copy{
background:linear-gradient(180deg,#fff0e5 0%,#f8dfcf 100%)!important;
}
/* clean 3-item directory row */
.tf-homepage .tf-service-directory-mini-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:0!important;
min-height:96px!important;
border-top:1px solid #e7edf4!important;
background:#fff!important;
}
.tf-homepage .tf-service-directory-mini-grid>a{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
min-width:0!important;
min-height:96px!important;
padding:7px 5px!important;
border:0!important;
border-right:1px solid #e7edf4!important;
border-radius:0!important;
background:#fff!important;
box-shadow:none!important;
color:#40506a!important;
text-decoration:none!important;
}
.tf-homepage .tf-service-directory-mini-grid>a:last-child{
border-right:0!important;
}
.tf-homepage .tf-service-directory-mini-grid>a:hover{
background:#fbfcfe!important;
transform:none!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:58px!important;
height:58px!important;
margin:0 0 5px!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
background:#fff!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image i{
display:grid!important;
place-items:center!important;
width:48px!important;
height:48px!important;
border-radius:13px!important;
background:#f3f6fa!important;
color:#075bc7!important;
font-style:normal!important;
font-weight:900!important;
}
.tf-homepage .tf-service-directory-mini-grid strong{
display:block!important;
width:100%!important;
overflow:hidden!important;
color:#45546c!important;
font-size:6.9px!important;
font-weight:750!important;
line-height:1.2!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .tf-service-card-grid{
gap:8px!important;
}
.tf-homepage .tf-service-card-media{
height:162px!important;
min-height:162px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:68px!important;
padding:9px 10px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:10.5px!important;
}
.tf-homepage .tf-service-directory-mini-grid,
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:86px!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image{
width:50px!important;
height:50px!important;
}
}
/* tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-service-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .tf-service-card-media{
height:175px!important;
min-height:175px!important;
}
}
/* mobile */
@media(max-width:699px){
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services{
padding:10px 0 14px!important;
}
.tf-homepage .tf-sourcing-solutions>.shell,
.tf-homepage .tf-business-growth-services>.shell{
width:100%!important;
padding:0 7px!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-service-section-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:4px 7px!important;
margin-bottom:7px!important;
}
.tf-homepage .tf-service-section-head h2{
font-size:17px!important;
}
.tf-homepage .tf-service-section-head p{
font-size:6.4px!important;
}
.tf-homepage .tf-service-section-head>a{
min-height:26px!important;
padding-inline:7px!important;
font-size:5.8px!important;
}
.tf-homepage .tf-service-card-grid{
display:flex!important;
gap:8px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-service-card-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-service-card--directory{
flex:0 0 78vw!important;
width:78vw!important;
min-width:78vw!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-service-card-media{
height:175px!important;
min-height:175px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:68px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:10.5px!important;
}
.tf-homepage .tf-service-directory-mini-grid,
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:82px!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image{
width:46px!important;
height:46px!important;
}
.tf-homepage .tf-service-directory-mini-grid strong{
font-size:6.2px!important;
}
}
/* TradesFolks 18.4.90 — Compact Service Directory refinement
Reduces vertical footprint while preserving the recent image-first pattern. */
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services{
padding:10px 0 13px!important;
}
.tf-homepage .tf-service-section-head{
gap:11px!important;
margin-bottom:7px!important;
}
.tf-homepage .tf-service-section-head>div>span{
margin-bottom:2px!important;
font-size:6.1px!important;
}
.tf-homepage .tf-service-section-head h2{
font-size:20px!important;
line-height:1.02!important;
}
.tf-homepage .tf-service-section-head p{
margin-top:2px!important;
font-size:7px!important;
}
.tf-homepage .tf-service-section-head>a{
min-height:27px!important;
height:27px!important;
padding:0 9px!important;
border-radius:8px!important;
font-size:6.2px!important;
}
.tf-homepage .tf-service-card-grid{
gap:8px!important;
}
.tf-homepage .tf-service-card--directory{
border-radius:13px!important;
}
/* Main media becomes visibly more compact */
.tf-homepage .tf-service-card-media{
height:148px!important;
min-height:148px!important;
padding:4px!important;
}
/* Compact colored title band */
.tf-homepage .tf-service-card-directory-copy{
min-height:60px!important;
padding:7px 10px 8px!important;
}
.tf-homepage .tf-service-card-directory-copy small{
margin-bottom:2px!important;
font-size:4.9px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:10.5px!important;
line-height:1.1!important;
}
.tf-homepage .tf-service-card-directory-cta{
gap:4px!important;
margin-top:4px!important;
font-size:5.9px!important;
}
.tf-homepage .tf-service-card-directory-cta svg{
width:10px!important;
height:10px!important;
}
/* Mini category strip becomes shallower */
.tf-homepage .tf-service-directory-mini-grid{
min-height:74px!important;
}
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:74px!important;
padding:5px 4px!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image{
width:42px!important;
height:42px!important;
margin-bottom:3px!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image i{
width:38px!important;
height:38px!important;
border-radius:10px!important;
}
.tf-homepage .tf-service-directory-mini-grid strong{
font-size:5.9px!important;
line-height:1.15!important;
}
/* 1280–1535: keep four compact cards */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .tf-service-card-media{
height:138px!important;
min-height:138px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:56px!important;
padding:6px 9px 7px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:9.5px!important;
}
.tf-homepage .tf-service-directory-mini-grid,
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:68px!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image{
width:38px!important;
height:38px!important;
}
.tf-homepage .tf-service-directory-mini-grid strong{
font-size:5.4px!important;
}
}
/* Laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .tf-service-card-grid{
gap:7px!important;
}
.tf-homepage .tf-service-card-media{
height:132px!important;
min-height:132px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:54px!important;
padding:6px 8px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:9px!important;
}
.tf-homepage .tf-service-directory-mini-grid,
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:66px!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image{
width:36px!important;
height:36px!important;
}
}
/* Tablet remains 2-column, but more compact */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-service-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .tf-service-card-media{
height:145px!important;
min-height:145px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:58px!important;
}
.tf-homepage .tf-service-directory-mini-grid,
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:70px!important;
}
}
/* Mobile: swipe cards smaller and denser */
@media(max-width:699px){
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services{
padding:9px 0 12px!important;
}
.tf-homepage .tf-service-section-head{
margin-bottom:6px!important;
}
.tf-homepage .tf-service-section-head h2{
font-size:15.5px!important;
}
.tf-homepage .tf-service-section-head p{
font-size:5.9px!important;
}
.tf-homepage .tf-service-section-head>a{
min-height:24px!important;
height:24px!important;
padding-inline:6px!important;
font-size:5.3px!important;
}
.tf-homepage .tf-service-card-grid{
gap:7px!important;
}
.tf-homepage .tf-service-card--directory{
flex-basis:72vw!important;
width:72vw!important;
min-width:72vw!important;
border-radius:12px!important;
}
.tf-homepage .tf-service-card-media{
height:140px!important;
min-height:140px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:54px!important;
padding:6px 8px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:9px!important;
}
.tf-homepage .tf-service-card-directory-cta{
font-size:5.3px!important;
}
.tf-homepage .tf-service-directory-mini-grid,
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:64px!important;
}
.tf-homepage .tf-service-directory-mini-grid .tf-service-mini-image{
width:34px!important;
height:34px!important;
}
.tf-homepage .tf-service-directory-mini-grid strong{
font-size:5.2px!important;
}
}
/* TradesFolks 18.4.91 — Service Card Footer UI Fix
Fixes oversized pill/blob footer appearance seen in production QA. */
.tf-homepage .tf-service-card-directory-copy{
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:center!important;
width:100%!important;
min-height:64px!important;
height:64px!important;
margin:0!important;
padding:8px 11px 9px!important;
overflow:hidden!important;
border-radius:0!important;
box-shadow:none!important;
box-sizing:border-box!important;
}
/* remove inherited rounded-pill shapes from legacy styles */
.tf-homepage .tf-service-card-directory-copy,
.tf-homepage .tf-service-card-directory-copy *{
transform:none!important;
}
.tf-homepage .tf-service-card-directory-copy:before,
.tf-homepage .tf-service-card-directory-copy:after{
display:none!important;
content:none!important;
}
.tf-homepage .tf-service-card-directory-copy small{
display:block!important;
width:100%!important;
margin:0 0 3px!important;
padding:0!important;
overflow:hidden!important;
color:#6f5412!important;
font-size:5.1px!important;
font-weight:900!important;
line-height:1!important;
letter-spacing:.075em!important;
text-transform:uppercase!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
color:#0b2343!important;
font-size:10.6px!important;
font-weight:900!important;
line-height:1.12!important;
letter-spacing:-.02em!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
text-shadow:none!important;
}
/* CTA becomes a clean text action, not a grey capsule */
.tf-homepage .tf-service-card-directory-cta{
display:inline-flex!important;
align-items:center!important;
justify-content:flex-start!important;
gap:4px!important;
width:auto!important;
min-width:0!important;
min-height:0!important;
height:auto!important;
margin:5px 0 0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#075bc7!important;
font-size:5.9px!important;
font-weight:850!important;
line-height:1!important;
white-space:nowrap!important;
}
.tf-homepage .tf-service-card-directory-cta svg{
width:10px!important;
height:10px!important;
flex:0 0 auto!important;
}
/* clean divider between media/footer/mini grid */
.tf-homepage .tf-service-card-media{
border-bottom:1px solid #edf1f5!important;
}
.tf-homepage .tf-service-directory-mini-grid{
border-top:1px solid #e6edf4!important;
}
/* Keep color variety but as flat compact bands */
.tf-homepage .tf-service-card-grid .tf-service-card--directory:nth-child(4n+1) .tf-service-card-directory-copy{
background:#ffd257!important;
}
.tf-homepage .tf-service-card-grid .tf-service-card--directory:nth-child(4n+2) .tf-service-card-directory-copy{
background:#dcecff!important;
}
.tf-homepage .tf-service-card-grid .tf-service-card--directory:nth-child(4n+3) .tf-service-card-directory-copy{
background:#dff1dc!important;
}
.tf-homepage .tf-service-card-grid .tf-service-card--directory:nth-child(4n) .tf-service-card-directory-copy{
background:#f9dfd0!important;
}
/* Desktop visual balance */
@media(min-width:1280px){
.tf-homepage .tf-service-card-media{
height:142px!important;
min-height:142px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:62px!important;
height:62px!important;
padding:8px 10px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:10.2px!important;
}
.tf-homepage .tf-service-directory-mini-grid,
.tf-homepage .tf-service-directory-mini-grid>a{
min-height:70px!important;
}
}
/* Laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .tf-service-card-media{
height:132px!important;
min-height:132px!important;
}
.tf-homepage .tf-service-card-directory-copy{
min-height:58px!important;
height:58px!important;
padding:7px 9px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:9.3px!important;
}
.tf-homepage .tf-service-card-directory-copy small{
font-size:4.7px!important;
}
}
/* Tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-service-card-directory-copy{
min-height:60px!important;
height:60px!important;
}
}
/* Mobile */
@media(max-width:699px){
.tf-homepage .tf-service-card-directory-copy{
min-height:56px!important;
height:56px!important;
padding:7px 8px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:8.8px!important;
}
.tf-homepage .tf-service-card-directory-copy small{
font-size:4.4px!important;
}
.tf-homepage .tf-service-card-directory-cta{
margin-top:4px!important;
font-size:5.1px!important;
}
}
/* TradesFolks 18.4.92 — Service Title Clipping / Alignment Fix
Removes legacy fixed-height clipping and stabilizes title + CTA rendering. */
.tf-homepage .tf-service-card-directory-copy{
position:relative!important;
display:grid!important;
grid-template-rows:auto auto auto!important;
align-content:center!important;
align-items:start!important;
gap:3px!important;
width:100%!important;
min-width:0!important;
min-height:68px!important;
height:auto!important;
max-height:none!important;
margin:0!important;
padding:8px 11px 9px!important;
overflow:visible!important;
box-sizing:border-box!important;
border-radius:0!important;
}
/* kill inherited offsets/sizes from previous service-card styles */
.tf-homepage .tf-service-card-directory-copy small,
.tf-homepage .tf-service-card-directory-copy h3,
.tf-homepage .tf-service-card-directory-cta{
position:static!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
transform:none!important;
float:none!important;
}
.tf-homepage .tf-service-card-directory-copy small{
display:block!important;
width:100%!important;
min-width:0!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
color:#755711!important;
font-size:5px!important;
font-weight:900!important;
line-height:1.15!important;
letter-spacing:.065em!important;
text-transform:uppercase!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
display:block!important;
width:100%!important;
min-width:0!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
color:#0b2343!important;
font-size:10.4px!important;
font-weight:900!important;
line-height:1.16!important;
letter-spacing:-.018em!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
text-shadow:none!important;
}
.tf-homepage .tf-service-card-directory-cta{
display:inline-flex!important;
align-items:center!important;
justify-content:flex-start!important;
justify-self:start!important;
width:auto!important;
min-width:0!important;
min-height:16px!important;
height:16px!important;
margin:1px 0 0!important;
padding:0!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#075bc7!important;
font-size:5.8px!important;
font-weight:850!important;
line-height:1!important;
white-space:nowrap!important;
}
.tf-homepage .tf-service-card-directory-cta svg{
display:block!important;
width:9px!important;
height:9px!important;
margin-left:3px!important;
flex:0 0 auto!important;
}
/* media/footer seam stays clean */
.tf-homepage .tf-service-card-media{
position:relative!important;
z-index:1!important;
border-bottom:1px solid #edf1f5!important;
}
.tf-homepage .tf-service-card-directory-copy{
position:relative!important;
z-index:2!important;
}
/* Desktop */
@media(min-width:1280px){
.tf-homepage .tf-service-card-directory-copy{
min-height:66px!important;
height:auto!important;
padding:8px 10px 9px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:10px!important;
}
}
/* Laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .tf-service-card-directory-copy{
min-height:62px!important;
height:auto!important;
padding:7px 9px 8px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:9.2px!important;
}
.tf-homepage .tf-service-card-directory-copy small{
font-size:4.6px!important;
}
}
/* Tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-service-card-directory-copy{
min-height:64px!important;
height:auto!important;
}
}
/* Mobile */
@media(max-width:699px){
.tf-homepage .tf-service-card-directory-copy{
min-height:58px!important;
height:auto!important;
padding:7px 8px!important;
gap:2px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:8.7px!important;
}
.tf-homepage .tf-service-card-directory-copy small{
font-size:4.3px!important;
}
.tf-homepage .tf-service-card-directory-cta{
min-height:14px!important;
height:14px!important;
font-size:5px!important;
}
}
/* =========================================================
SOURCE: curated-sourcing-premium-blue-18.4.93.css
SHA256: 7a1ea91220822d4fa6ed2ba65f2bf9b967a8b0d97df28ec1c6c40f01186d6ed2
Production order preserved.
========================================================= */
/* TradesFolks 18.4.93 — Curated Sourcing Premium Blue System
Uses the blue/navy side of the TradesFolks identity instead of yellow. */
.tf-homepage .curated-b2b-market{
position:relative!important;
padding:13px 0 17px!important;
background:
radial-gradient(circle at 85% 0%,rgba(7,91,199,.07),transparent 26%),
linear-gradient(180deg,#f6f9fd 0%,#f2f6fb 100%)!important;
overflow:hidden!important;
}
.tf-homepage .curated-b2b-market>.shell{
width:calc(100% - 24px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
box-sizing:border-box!important;
}
/* premium section heading */
.tf-homepage .curated-b2b-heading{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
margin:0 0 10px!important;
}
.tf-homepage .curated-b2b-heading .eyebrow{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
margin:0!important;
color:#075bc7!important;
font-size:6.8px!important;
font-weight:900!important;
letter-spacing:.105em!important;
}
.tf-homepage .curated-b2b-heading .eyebrow:before{
content:""!important;
width:18px!important;
height:2px!important;
border-radius:999px!important;
background:#075bc7!important;
}
.tf-homepage .curated-b2b-heading h2{
margin:0!important;
color:#0b2343!important;
font-size:25px!important;
font-weight:900!important;
line-height:1.03!important;
letter-spacing:-.04em!important;
text-align:right!important;
}
/* 4 enterprise cards */
.tf-homepage .curated-b2b-rail{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .curated-b2b-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
min-height:0!important;
padding:11px!important;
overflow:hidden!important;
border:1px solid #d8e4f1!important;
border-radius:15px!important;
background:rgba(255,255,255,.96)!important;
box-shadow:0 6px 18px rgba(7,31,63,.045)!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.tf-homepage .curated-b2b-card:before{
content:""!important;
position:absolute!important;
top:0!important;
left:0!important;
right:0!important;
height:3px!important;
background:linear-gradient(90deg,#075bc7 0%,#0b2343 100%)!important;
}
.tf-homepage .curated-b2b-card:hover{
transform:translateY(-3px)!important;
border-color:#b9cfe7!important;
box-shadow:0 14px 28px rgba(7,31,63,.09)!important;
}
.tf-homepage .curated-b2b-card h3{
min-height:34px!important;
margin:5px 0 9px!important;
color:#0b2343!important;
font-size:13px!important;
font-weight:900!important;
line-height:1.12!important;
letter-spacing:-.02em!important;
}
/* product tile matrix */
.tf-homepage .curated-b2b-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
width:100%!important;
margin:0!important;
}
.tf-homepage .curated-b2b-item{
display:flex!important;
flex-direction:column!important;
min-width:0!important;
min-height:0!important;
padding:6px!important;
overflow:hidden!important;
border:1px solid #e1e9f2!important;
border-radius:10px!important;
background:#f8fbff!important;
box-shadow:none!important;
color:#0b2343!important;
text-decoration:none!important;
transition:background .16s ease,border-color .16s ease,transform .16s ease!important;
}
.tf-homepage .curated-b2b-item:hover{
transform:translateY(-1px)!important;
border-color:#c3d6ea!important;
background:#f1f7ff!important;
}
.tf-homepage .curated-b2b-image{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:96px!important;
min-height:96px!important;
margin:0 0 5px!important;
padding:3px!important;
overflow:hidden!important;
border:0!important;
border-radius:8px!important;
background:#fff!important;
}
.tf-homepage .curated-b2b-image img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
transform:none!important;
}
.tf-homepage .curated-b2b-placeholder{
display:grid!important;
place-items:center!important;
width:100%!important;
height:100%!important;
border-radius:8px!important;
background:linear-gradient(145deg,#edf4fb,#e2edf8)!important;
color:#075bc7!important;
font-size:12px!important;
font-weight:900!important;
}
.tf-homepage .curated-b2b-item>strong{
display:-webkit-box!important;
min-height:25px!important;
max-height:25px!important;
margin:0!important;
overflow:hidden!important;
color:#172b48!important;
font-size:8.1px!important;
font-weight:800!important;
line-height:1.2!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
.tf-homepage .curated-b2b-item>small{
display:none!important;
}
/* premium blue CTA */
.tf-homepage .curated-b2b-cta{
display:inline-flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
width:100%!important;
min-height:31px!important;
margin-top:9px!important;
padding:0 10px!important;
border:1px solid #c4d7eb!important;
border-radius:9px!important;
background:linear-gradient(180deg,#edf5ff 0%,#e1efff 100%)!important;
color:#075bc7!important;
font-size:7.2px!important;
font-weight:900!important;
text-decoration:none!important;
box-sizing:border-box!important;
}
.tf-homepage .curated-b2b-cta svg{
width:13px!important;
height:13px!important;
flex:0 0 auto!important;
transition:transform .16s ease!important;
}
.tf-homepage .curated-b2b-cta:hover{
border-color:#9fc0e1!important;
background:#dcecff!important;
}
.tf-homepage .curated-b2b-cta:hover svg{
transform:translateX(2px)!important;
}
/* Subtle visual differentiation while remaining in blue family */
.tf-homepage .curated-b2b-card:nth-child(2):before{
background:linear-gradient(90deg,#0b2343,#075bc7)!important;
}
.tf-homepage .curated-b2b-card:nth-child(3):before{
background:linear-gradient(90deg,#075bc7,#4a89d7)!important;
}
.tf-homepage .curated-b2b-card:nth-child(4):before{
background:linear-gradient(90deg,#163a68,#075bc7)!important;
}
/* large desktop */
@media(min-width:1536px){
.tf-homepage .curated-b2b-image{
height:104px!important;
min-height:104px!important;
}
}
/* laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .curated-b2b-heading h2{
font-size:22px!important;
}
.tf-homepage .curated-b2b-card{
padding:9px!important;
}
.tf-homepage .curated-b2b-card h3{
min-height:31px!important;
font-size:11.5px!important;
}
.tf-homepage .curated-b2b-image{
height:82px!important;
min-height:82px!important;
}
.tf-homepage .curated-b2b-item>strong{
font-size:7.3px!important;
}
}
/* tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .curated-b2b-rail{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .curated-b2b-image{
height:100px!important;
min-height:100px!important;
}
}
/* mobile: premium swipe rail */
@media(max-width:699px){
.tf-homepage .curated-b2b-market{
padding:10px 0 14px!important;
}
.tf-homepage .curated-b2b-market>.shell{
width:100%!important;
padding:0 7px!important;
}
.tf-homepage .curated-b2b-heading{
display:block!important;
margin-bottom:8px!important;
}
.tf-homepage .curated-b2b-heading h2{
margin-top:4px!important;
font-size:18px!important;
text-align:left!important;
}
.tf-homepage .curated-b2b-rail{
display:flex!important;
gap:8px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .curated-b2b-rail::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .curated-b2b-card{
flex:0 0 82vw!important;
width:82vw!important;
min-width:82vw!important;
padding:9px!important;
border-radius:13px!important;
scroll-snap-align:start!important;
}
.tf-homepage .curated-b2b-card h3{
min-height:0!important;
margin:5px 0 7px!important;
font-size:11px!important;
}
.tf-homepage .curated-b2b-image{
height:92px!important;
min-height:92px!important;
}
.tf-homepage .curated-b2b-cta{
min-height:29px!important;
margin-top:7px!important;
font-size:6.7px!important;
}
}
@media(max-width:360px){
.tf-homepage .curated-b2b-card{
flex-basis:86vw!important;
width:86vw!important;
min-width:86vw!important;
}
}
/* =========================================================
SOURCE: featured-marketplace-product-first-18.4.85.css
SHA256: 88668bebcb97662c15e981dcaa24665bd4b2f5754dea1e9178d44e92388826c7
Production order preserved.
========================================================= */
/* TradesFolks 18.4.82 — Featured Marketplace 6x2 Reference Cards
Direct implementation of approved reference:
large product image + yellow footer + centered name + underline.
No price, MOQ, seller row or bulky CTA buttons.
Premium inline SVG action icons.
*/
.tf-homepage .marketplace-products{
padding:16px 0 22px!important;
background:#fff!important;
overflow:hidden!important;
}
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 24px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
box-sizing:border-box!important;
}
.tf-homepage .marketplace-products .curated-products-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
margin:0 0 12px!important;
}
.tf-homepage .marketplace-products .curated-products-head .eyebrow{
margin:0 0 4px!important;
color:#075bc7!important;
font-size:7.5px!important;
font-weight:900!important;
letter-spacing:.10em!important;
}
.tf-homepage .marketplace-products .curated-products-head h2{
margin:0!important;
color:#0b2343!important;
font-size:26px!important;
line-height:1.03!important;
letter-spacing:-.045em!important;
}
.tf-homepage .marketplace-products .curated-products-head .section-copy{
margin:4px 0 0!important;
color:#718096!important;
font-size:8.5px!important;
line-height:1.3!important;
}
.tf-homepage .marketplace-products .curated-products-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 auto!important;
min-height:32px!important;
height:32px!important;
padding:0 12px!important;
border:1px solid #d8e4f1!important;
border-radius:10px!important;
background:#fff!important;
color:#075bc7!important;
font-size:7.4px!important;
font-weight:850!important;
text-decoration:none!important;
}
/* exactly 6 + 6 on desktop */
.tf-homepage .marketplace-products .featured-twelve-grid{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:12px!important;
width:100%!important;
margin:0!important;
padding:0!important;
align-items:stretch!important;
}
/* reference card shell */
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
width:100%!important;
height:auto!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:1px solid #f0c23f!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:0 7px 20px rgba(8,31,63,.065)!important;
box-sizing:border-box!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-card:hover{
transform:translateY(-3px)!important;
border-color:#e5ae13!important;
box-shadow:0 14px 30px rgba(8,31,63,.11)!important;
}
/* image occupies the complete upper card */
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
position:relative!important;
display:block!important;
flex:0 0 245px!important;
width:100%!important;
height:245px!important;
min-height:245px!important;
max-height:245px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
background:#fff!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media > .tf-featured-opportunity-image-link{
position:absolute!important;
inset:0!important;
z-index:1!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:auto!important;
height:auto!important;
margin:0!important;
padding:7px!important;
overflow:hidden!important;
border:0!important;
background:#fff!important;
box-sizing:border-box!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-image-link img{
display:block!important;
width:100%!important;
height:100%!important;
min-width:0!important;
min-height:0!important;
max-width:100%!important;
max-height:100%!important;
margin:0!important;
padding:0!important;
border:0!important;
background:#fff!important;
object-fit:contain!important;
object-position:center center!important;
aspect-ratio:auto!important;
transform:none!important;
}
/* premium SVG action rail */
.tf-homepage .marketplace-products .tf-featured-opportunity-media > .tf-featured-card-tools{
position:absolute!important;
z-index:6!important;
top:9px!important;
right:9px!important;
left:auto!important;
bottom:auto!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
gap:6px!important;
width:auto!important;
height:auto!important;
margin:0!important;
padding:0!important;
background:transparent!important;
}
.tf-homepage .marketplace-products .tf-featured-tool,
.tf-homepage .marketplace-products .tf-featured-card-tools > *{
position:static!important;
display:grid!important;
place-items:center!important;
flex:0 0 31px!important;
width:31px!important;
height:31px!important;
min-width:31px!important;
min-height:31px!important;
max-width:31px!important;
max-height:31px!important;
margin:0!important;
padding:0!important;
border:1px solid #d8e3ed!important;
border-radius:50%!important;
background:rgba(255,255,255,.97)!important;
color:#0a2347!important;
box-shadow:0 4px 12px rgba(7,31,64,.10)!important;
text-decoration:none!important;
cursor:pointer!important;
backdrop-filter:blur(8px)!important;
}
.tf-homepage .marketplace-products .tf-featured-tool svg,
.tf-homepage .marketplace-products .tf-featured-card-tools > * svg{
display:block!important;
width:15px!important;
height:15px!important;
fill:none!important;
}
.tf-homepage .marketplace-products .tf-featured-card-tools > *:hover{
border-color:#efb516!important;
background:#fffaf0!important;
color:#075bc7!important;
}
/* yellow reference footer */
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
position:relative!important;
display:flex!important;
flex:0 0 86px!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:86px!important;
height:86px!important;
margin:0!important;
padding:11px 12px 13px!important;
border-top:1px solid rgba(187,126,0,.12)!important;
background:linear-gradient(180deg,#ffd454 0%,#fbbf24 100%)!important;
box-sizing:border-box!important;
}
/* simple centered title, no white pill */
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
position:static!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-width:0!important;
min-height:32px!important;
max-height:32px!important;
margin:0!important;
padding:0 8px!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#0b2343!important;
font-size:12px!important;
font-weight:900!important;
line-height:1.15!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3:before,
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3:after{
display:none!important;
content:none!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3 a{
display:block!important;
width:100%!important;
overflow:hidden!important;
color:inherit!important;
text-decoration:none!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* reference underline */
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
content:""!important;
display:block!important;
width:34px!important;
height:4px!important;
margin-top:8px!important;
border-radius:999px!important;
background:#fff!important;
box-shadow:0 1px 2px rgba(126,84,0,.08)!important;
}
/* hard-hide everything except product name */
.tf-homepage .marketplace-products .tf-featured-opportunity-body .price,
.tf-homepage .marketplace-products .tf-featured-moq,
.tf-homepage .marketplace-products .tf-featured-opportunity-card .supplier-line,
.tf-homepage .marketplace-products .tf-featured-opportunity-card .card-actions,
.tf-homepage .marketplace-products .tf-featured-opportunity-card .product-badge{
display:none!important;
}
/* laptop: still 6 columns where usable */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:205px!important;
height:205px!important;
min-height:205px!important;
max-height:205px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:76px!important;
min-height:76px!important;
height:76px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
font-size:10px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool,
.tf-homepage .marketplace-products .tf-featured-card-tools > *{
flex-basis:28px!important;
width:28px!important;
height:28px!important;
min-width:28px!important;
min-height:28px!important;
max-width:28px!important;
max-height:28px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool svg,
.tf-homepage .marketplace-products .tf-featured-card-tools > * svg{
width:13px!important;
height:13px!important;
}
}
/* smaller laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:215px!important;
height:215px!important;
min-height:215px!important;
max-height:215px!important;
}
}
/* tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:190px!important;
height:190px!important;
min-height:190px!important;
max-height:190px!important;
}
}
/* mobile */
@media(max-width:699px){
.tf-homepage .marketplace-products{
padding:13px 0 18px!important;
}
.tf-homepage .marketplace-products>.shell{
width:100%!important;
padding:0 7px!important;
}
.tf-homepage .marketplace-products .curated-products-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:4px 7px!important;
align-items:center!important;
}
.tf-homepage .marketplace-products .curated-products-head h2{
font-size:18px!important;
}
.tf-homepage .marketplace-products .curated-products-head .section-copy{
font-size:7px!important;
}
.tf-homepage .marketplace-products .curated-products-head>a{
min-height:27px!important;
height:27px!important;
padding:0 8px!important;
font-size:6.3px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
border-radius:14px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:142px!important;
height:142px!important;
min-height:142px!important;
max-height:142px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:58px!important;
min-height:58px!important;
height:58px!important;
padding:8px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
min-height:25px!important;
max-height:25px!important;
font-size:8px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
width:25px!important;
height:3px!important;
margin-top:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media > .tf-featured-card-tools{
top:5px!important;
right:5px!important;
gap:4px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool,
.tf-homepage .marketplace-products .tf-featured-card-tools > *{
flex-basis:23px!important;
width:23px!important;
height:23px!important;
min-width:23px!important;
min-height:23px!important;
max-width:23px!important;
max-height:23px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool svg,
.tf-homepage .marketplace-products .tf-featured-card-tools > * svg{
width:11px!important;
height:11px!important;
}
}
@media(max-width:340px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:1fr!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:225px!important;
height:225px!important;
min-height:225px!important;
max-height:225px!important;
}
}
@media(prefers-reduced-motion:reduce){
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
transition:none!important;
}
}
/* TradesFolks 18.4.83 — Trending / Popular Products Reference Cards
Same approved card system as Featured Marketplace. */
.tf-homepage .trending-products-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
margin:0 0 12px!important;
}
.tf-homepage .trending-products-head .eyebrow{
margin:0 0 4px!important;
color:#075bc7!important;
font-size:7.5px!important;
font-weight:900!important;
letter-spacing:.10em!important;
}
.tf-homepage .trending-products-head h2{
margin:0!important;
color:#0b2343!important;
font-size:26px!important;
line-height:1.03!important;
letter-spacing:-.045em!important;
}
.tf-homepage .trending-products-head .section-copy{
margin:4px 0 0!important;
color:#718096!important;
font-size:8.5px!important;
line-height:1.3!important;
}
.tf-homepage .trending-products-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 auto!important;
min-height:32px!important;
height:32px!important;
padding:0 12px!important;
border:1px solid #d8e4f1!important;
border-radius:10px!important;
background:#fff!important;
color:#075bc7!important;
font-size:7.4px!important;
font-weight:850!important;
text-decoration:none!important;
}
.tf-homepage .trending-twelve-grid{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:12px!important;
width:100%!important;
margin:0!important;
padding:0!important;
align-items:stretch!important;
}
/* Reference card shell */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
width:100%!important;
height:auto!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:1px solid #f0c23f!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:0 7px 20px rgba(8,31,63,.065)!important;
box-sizing:border-box!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-card:hover{
transform:translateY(-3px)!important;
border-color:#e5ae13!important;
box-shadow:0 14px 30px rgba(8,31,63,.11)!important;
}
/* Large product media */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
position:relative!important;
display:block!important;
flex:0 0 245px!important;
width:100%!important;
height:245px!important;
min-height:245px!important;
max-height:245px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border:0!important;
background:#fff!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media > .tf-featured-opportunity-image-link{
position:absolute!important;
inset:0!important;
z-index:1!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:auto!important;
height:auto!important;
margin:0!important;
padding:7px!important;
overflow:hidden!important;
border:0!important;
background:#fff!important;
box-sizing:border-box!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-image-link img{
display:block!important;
width:100%!important;
height:100%!important;
min-width:0!important;
min-height:0!important;
max-width:100%!important;
max-height:100%!important;
margin:0!important;
padding:0!important;
border:0!important;
background:#fff!important;
object-fit:contain!important;
object-position:center center!important;
transform:none!important;
}
/* Premium SVG action rail */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media > .tf-featured-card-tools{
position:absolute!important;
z-index:6!important;
top:9px!important;
right:9px!important;
left:auto!important;
bottom:auto!important;
display:flex!important;
flex-direction:column!important;
gap:6px!important;
width:auto!important;
height:auto!important;
margin:0!important;
padding:0!important;
background:transparent!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
position:static!important;
display:grid!important;
place-items:center!important;
flex:0 0 31px!important;
width:31px!important;
height:31px!important;
min-width:31px!important;
min-height:31px!important;
max-width:31px!important;
max-height:31px!important;
margin:0!important;
padding:0!important;
border:1px solid #d8e3ed!important;
border-radius:50%!important;
background:rgba(255,255,255,.97)!important;
color:#0a2347!important;
box-shadow:0 4px 12px rgba(7,31,64,.10)!important;
text-decoration:none!important;
cursor:pointer!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:15px!important;
height:15px!important;
display:block!important;
fill:none!important;
}
/* Yellow name footer */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
position:relative!important;
display:flex!important;
flex:0 0 86px!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:86px!important;
height:86px!important;
margin:0!important;
padding:11px 12px 13px!important;
border-top:1px solid rgba(187,126,0,.12)!important;
background:linear-gradient(180deg,#ffd454 0%,#fbbf24 100%)!important;
box-sizing:border-box!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
position:static!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-width:0!important;
min-height:32px!important;
max-height:32px!important;
margin:0!important;
padding:0 8px!important;
overflow:hidden!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
box-shadow:none!important;
color:#0b2343!important;
font-size:12px!important;
font-weight:900!important;
line-height:1.15!important;
text-align:center!important;
white-space:nowrap!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3:before,
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3:after{
display:none!important;
content:none!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3 a{
display:block!important;
width:100%!important;
overflow:hidden!important;
color:inherit!important;
text-decoration:none!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body:after{
content:""!important;
display:block!important;
width:34px!important;
height:4px!important;
margin-top:8px!important;
border-radius:999px!important;
background:#fff!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body .price,
.tf-homepage .trending-twelve-grid .tf-featured-moq,
.tf-homepage .trending-twelve-grid .supplier-line,
.tf-homepage .trending-twelve-grid .card-actions,
.tf-homepage .trending-twelve-grid .product-badge{
display:none!important;
}
/* responsive */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:205px!important;height:205px!important;min-height:205px!important;max-height:205px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:76px!important;min-height:76px!important;height:76px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
font-size:10px!important;
}
}
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media(max-width:699px){
.tf-homepage .trending-products-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:4px 7px!important;
}
.tf-homepage .trending-products-head h2{
font-size:18px!important;
}
.tf-homepage .trending-products-head .section-copy{
font-size:7px!important;
}
.tf-homepage .trending-products-head>a{
min-height:27px!important;height:27px!important;padding:0 8px!important;font-size:6.3px!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-card{
border-radius:14px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:142px!important;height:142px!important;min-height:142px!important;max-height:142px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:58px!important;min-height:58px!important;height:58px!important;padding:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
min-height:25px!important;max-height:25px!important;font-size:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body:after{
width:25px!important;height:3px!important;margin-top:5px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
flex-basis:23px!important;width:23px!important;height:23px!important;min-width:23px!important;min-height:23px!important;max-width:23px!important;max-height:23px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:11px!important;height:11px!important;
}
}
@media(max-width:340px){
.tf-homepage .trending-twelve-grid{
grid-template-columns:1fr!important;
}
}
/* TradesFolks 18.4.84 — Trending Section Size Parity
User requirement: "Popular products buyers are exploring" must occupy the same
overall section footprint as "Featured marketplace opportunities".
This override synchronizes shell width, section padding, header rhythm,
desktop card media/footer heights and responsive sizing. */
/* Section shell + vertical rhythm match Featured marketplace */
.tf-homepage .trending-products{
padding:16px 0 22px!important;
background:#fff!important;
overflow:hidden!important;
}
.tf-homepage .trending-products>.shell{
width:calc(100% - 24px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
box-sizing:border-box!important;
}
/* Header exactly follows Featured marketplace proportions */
.tf-homepage .trending-products-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
margin:0 0 12px!important;
}
.tf-homepage .trending-products-head .eyebrow{
margin:0 0 4px!important;
font-size:7.5px!important;
font-weight:900!important;
letter-spacing:.10em!important;
color:#075bc7!important;
}
.tf-homepage .trending-products-head h2{
margin:0!important;
color:#0b2343!important;
font-size:26px!important;
line-height:1.03!important;
letter-spacing:-.045em!important;
}
.tf-homepage .trending-products-head .section-copy{
margin:4px 0 0!important;
color:#718096!important;
font-size:8.5px!important;
line-height:1.3!important;
}
.tf-homepage .trending-products-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 auto!important;
min-height:32px!important;
height:32px!important;
padding:0 12px!important;
border:1px solid #d8e4f1!important;
border-radius:10px!important;
background:#fff!important;
color:#075bc7!important;
font-size:7.4px!important;
font-weight:850!important;
text-decoration:none!important;
white-space:nowrap!important;
}
/* 6 + 6 desktop matrix, same footprint as Featured section */
.tf-homepage .trending-twelve-grid{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:12px!important;
width:100%!important;
margin:0!important;
padding:0!important;
align-items:stretch!important;
}
/* Match Featured card geometry */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-card{
border-radius:18px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex:0 0 245px!important;
height:245px!important;
min-height:245px!important;
max-height:245px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex:0 0 86px!important;
min-height:86px!important;
height:86px!important;
padding:11px 12px 13px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
min-height:32px!important;
max-height:32px!important;
font-size:12px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body:after{
width:34px!important;
height:4px!important;
margin-top:8px!important;
}
/* Keep SVG action rail proportionally identical */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media > .tf-featured-card-tools{
top:9px!important;
right:9px!important;
gap:6px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
flex-basis:31px!important;
width:31px!important;
height:31px!important;
min-width:31px!important;
min-height:31px!important;
max-width:31px!important;
max-height:31px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:15px!important;
height:15px!important;
}
/* 1280–1535: exact same compact geometry as Featured marketplace */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .trending-products>.shell{
width:calc(100% - 24px)!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:205px!important;
height:205px!important;
min-height:205px!important;
max-height:205px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:76px!important;
min-height:76px!important;
height:76px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
font-size:10px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
flex-basis:28px!important;
width:28px!important;
height:28px!important;
min-width:28px!important;
min-height:28px!important;
max-width:28px!important;
max-height:28px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:13px!important;
height:13px!important;
}
}
/* Smaller laptop parity */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .trending-products>.shell{
width:calc(100% - 24px)!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:215px!important;
height:215px!important;
min-height:215px!important;
max-height:215px!important;
}
}
/* Tablet parity */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .trending-products{
padding:16px 0 22px!important;
}
.tf-homepage .trending-products>.shell{
width:calc(100% - 24px)!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:190px!important;
height:190px!important;
min-height:190px!important;
max-height:190px!important;
}
}
/* Mobile follows Featured section sizing and rhythm */
@media(max-width:699px){
.tf-homepage .trending-products{
padding:13px 0 18px!important;
}
.tf-homepage .trending-products>.shell{
width:100%!important;
max-width:none!important;
padding:0 7px!important;
box-sizing:border-box!important;
}
.tf-homepage .trending-products-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:4px 7px!important;
margin-bottom:9px!important;
}
.tf-homepage .trending-products-head h2{
font-size:18px!important;
}
.tf-homepage .trending-products-head .section-copy{
font-size:7px!important;
}
.tf-homepage .trending-products-head>a{
min-height:27px!important;
height:27px!important;
padding:0 8px!important;
font-size:6.3px!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-card{
border-radius:14px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:142px!important;
height:142px!important;
min-height:142px!important;
max-height:142px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:58px!important;
min-height:58px!important;
height:58px!important;
padding:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
min-height:25px!important;
max-height:25px!important;
font-size:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body:after{
width:25px!important;
height:3px!important;
margin-top:5px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media > .tf-featured-card-tools{
top:5px!important;
right:5px!important;
gap:4px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
flex-basis:23px!important;
width:23px!important;
height:23px!important;
min-width:23px!important;
min-height:23px!important;
max-width:23px!important;
max-height:23px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:11px!important;
height:11px!important;
}
}
@media(max-width:340px){
.tf-homepage .trending-twelve-grid{
grid-template-columns:1fr!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:225px!important;
height:225px!important;
min-height:225px!important;
max-height:225px!important;
}
}
/* TradesFolks 18.4.85 — Trending Compact Density Hotfix
Keeps the approved 6 + 6 layout but reduces the overall section footprint. */
.tf-homepage .trending-products{
padding:12px 0 16px!important;
}
.tf-homepage .trending-products-head{
gap:12px!important;
margin-bottom:9px!important;
}
.tf-homepage .trending-products-head .eyebrow{
margin-bottom:3px!important;
font-size:6.8px!important;
}
.tf-homepage .trending-products-head h2{
font-size:23px!important;
line-height:1.02!important;
}
.tf-homepage .trending-products-head .section-copy{
margin-top:3px!important;
font-size:7.8px!important;
}
.tf-homepage .trending-products-head>a{
min-height:29px!important;
height:29px!important;
padding:0 10px!important;
border-radius:9px!important;
font-size:6.8px!important;
}
/* Compact 6 + 6 matrix */
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:8px!important;
}
/* Compact card geometry */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-card{
border-radius:15px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:188px!important;
height:188px!important;
min-height:188px!important;
max-height:188px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media > .tf-featured-opportunity-image-link{
padding:5px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:64px!important;
min-height:64px!important;
height:64px!important;
padding:8px 10px 9px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
min-height:26px!important;
max-height:26px!important;
font-size:9.4px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body:after{
width:28px!important;
height:3px!important;
margin-top:6px!important;
}
/* Smaller action rail */
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media > .tf-featured-card-tools{
top:7px!important;
right:7px!important;
gap:4px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
flex-basis:25px!important;
width:25px!important;
height:25px!important;
min-width:25px!important;
min-height:25px!important;
max-width:25px!important;
max-height:25px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:12px!important;
height:12px!important;
}
/* Common desktop / laptop */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:176px!important;
height:176px!important;
min-height:176px!important;
max-height:176px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:60px!important;
min-height:60px!important;
height:60px!important;
padding:7px 8px 8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
min-height:24px!important;
max-height:24px!important;
font-size:8.6px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body:after{
width:25px!important;
margin-top:5px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
flex-basis:24px!important;
width:24px!important;
height:24px!important;
min-width:24px!important;
min-height:24px!important;
max-width:24px!important;
max-height:24px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:11px!important;
height:11px!important;
}
}
/* Smaller laptop */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .trending-products{
padding:11px 0 15px!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:184px!important;
height:184px!important;
min-height:184px!important;
max-height:184px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:60px!important;
min-height:60px!important;
height:60px!important;
}
}
/* Tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .trending-products{
padding:11px 0 15px!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:168px!important;
height:168px!important;
min-height:168px!important;
max-height:168px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:58px!important;
min-height:58px!important;
height:58px!important;
}
}
/* Mobile */
@media(max-width:699px){
.tf-homepage .trending-products{
padding:10px 0 14px!important;
}
.tf-homepage .trending-products-head{
margin-bottom:7px!important;
}
.tf-homepage .trending-products-head h2{
font-size:16.5px!important;
}
.tf-homepage .trending-products-head .section-copy{
font-size:6.6px!important;
}
.tf-homepage .trending-products-head>a{
min-height:25px!important;
height:25px!important;
padding:0 7px!important;
font-size:6px!important;
}
.tf-homepage .trending-twelve-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-card{
border-radius:12px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:122px!important;
height:122px!important;
min-height:122px!important;
max-height:122px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body{
flex-basis:50px!important;
min-height:50px!important;
height:50px!important;
padding:6px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body h3{
min-height:21px!important;
max-height:21px!important;
font-size:7.3px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-body:after{
width:22px!important;
height:2.5px!important;
margin-top:4px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > *{
flex-basis:21px!important;
width:21px!important;
height:21px!important;
min-width:21px!important;
min-height:21px!important;
max-width:21px!important;
max-height:21px!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-tool svg,
.tf-homepage .trending-twelve-grid .tf-featured-card-tools > * svg{
width:10px!important;
height:10px!important;
}
}
@media(max-width:340px){
.tf-homepage .trending-twelve-grid{
grid-template-columns:1fr!important;
}
.tf-homepage .trending-twelve-grid .tf-featured-opportunity-media{
flex-basis:190px!important;
height:190px!important;
min-height:190px!important;
max-height:190px!important;
}
}
/* =========================================================
SOURCE: serious-sourcing-visual-cards-18.4.97.css
SHA256: 334d8a1ec0e48b4f2674b44c371fcbafe3e12c82a58a63aac3313313d018224e
Production order preserved.
========================================================= */
/* TradesFolks 18.4.94 — Serious Sourcing Visual Cards */
.tf-homepage .trade-advantage .advantage-cards{
align-items:stretch!important;
}
.tf-homepage .trade-advantage .advantage-cards>.advantage-visual-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
overflow:hidden!important;
padding:14px!important;
border:1px solid #d7e2ee!important;
border-radius:17px!important;
background:#fff!important;
box-shadow:0 7px 20px rgba(8,35,68,.045)!important;
}
.tf-homepage .advantage-visual-card>.advantage-number{
position:absolute!important;
z-index:3!important;
top:14px!important;
left:14px!important;
display:grid!important;
place-items:center!important;
width:44px!important;
height:44px!important;
margin:0!important;
border-radius:13px!important;
background:#075bc7!important;
color:#fff!important;
font-size:12px!important;
font-weight:900!important;
line-height:1!important;
box-shadow:0 6px 15px rgba(7,91,199,.18)!important;
}
.tf-homepage .advantage-visual{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:164px!important;
min-height:164px!important;
margin:0 0 12px!important;
padding:9px!important;
overflow:hidden!important;
border-radius:13px!important;
background:
radial-gradient(circle at 50% 48%,rgba(7,91,199,.08),transparent 50%),
linear-gradient(145deg,#f8fbff,#eef5fc)!important;
}
.tf-homepage .advantage-visual:after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:12px!important;
width:54%!important;
height:12px!important;
transform:translateX(-50%)!important;
border-radius:50%!important;
background:rgba(11,35,67,.07)!important;
filter:blur(7px)!important;
}
.tf-homepage .advantage-visual img{
position:relative!important;
z-index:2!important;
display:block!important;
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
.tf-homepage .advantage-visual-fallback{
position:absolute!important;
inset:0!important;
display:grid!important;
place-items:center!important;
color:#075bc7!important;
font-size:24px!important;
font-weight:900!important;
opacity:.18!important;
}
.tf-homepage .advantage-visual img+.advantage-visual-fallback{
display:none!important;
}
.tf-homepage .advantage-content{
margin-top:auto!important;
padding:0 3px 3px!important;
}
.tf-homepage .advantage-content h3{
margin:0 0 7px!important;
color:#0b2343!important;
font-size:16px!important;
font-weight:900!important;
line-height:1.12!important;
letter-spacing:-.025em!important;
}
.tf-homepage .advantage-content p{
margin:0!important;
color:#61748e!important;
font-size:10px!important;
line-height:1.42!important;
}
.tf-homepage .advantage-visual-card:hover{
border-color:#b8cde4!important;
box-shadow:0 14px 30px rgba(8,35,68,.09)!important;
transform:translateY(-2px)!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
@media(min-width:1400px){
.tf-homepage .advantage-visual{height:178px!important;min-height:178px!important}
}
@media(max-width:1100px){
.tf-homepage .advantage-visual{height:145px!important;min-height:145px!important}
.tf-homepage .advantage-content h3{font-size:14px!important}
}
@media(max-width:760px){
.tf-homepage .trade-advantage .advantage-cards{
display:flex!important;
gap:9px!important;
overflow-x:auto!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
}
.tf-homepage .trade-advantage .advantage-cards::-webkit-scrollbar{display:none!important}
.tf-homepage .trade-advantage .advantage-cards>.advantage-visual-card{
flex:0 0 78vw!important;
min-width:78vw!important;
padding:10px!important;
scroll-snap-align:start!important;
}
.tf-homepage .advantage-visual{height:150px!important;min-height:150px!important}
.tf-homepage .advantage-visual-card>.advantage-number{
top:10px!important;left:10px!important;width:38px!important;height:38px!important;border-radius:11px!important;font-size:10px!important
}
}
/* TradesFolks 18.4.95 — Static Experience Image Binding */
.tf-homepage .advantage-visual.is-missing .advantage-visual-fallback{
display:grid!important;
}
.tf-homepage .advantage-visual:not(.is-missing) .advantage-visual-fallback{
display:none!important;
}
/* TradesFolks 18.4.97 — Serious Sourcing Premium White Visual Refinement */
/* Card shell */
.tf-homepage .trade-advantage .advantage-cards>.advantage-visual-card{
position:relative!important;
overflow:hidden!important;
border:1px solid #d7e3f0!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:0 8px 24px rgba(8,35,68,.055)!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.tf-homepage .trade-advantage .advantage-cards>.advantage-visual-card:before{
content:""!important;
position:absolute!important;
top:0!important;
left:0!important;
right:0!important;
height:3px!important;
background:linear-gradient(90deg,#075bc7,#0b2343)!important;
z-index:4!important;
}
/* White image area – remove grey/blue canvas */
.tf-homepage .advantage-visual{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:166px!important;
min-height:166px!important;
margin:0 0 13px!important;
padding:8px!important;
overflow:hidden!important;
border:1px solid #edf1f5!important;
border-radius:14px!important;
background:#fff!important;
box-shadow:inset 0 0 0 1px rgba(7,91,199,.015)!important;
}
.tf-homepage .advantage-visual:before{
content:""!important;
position:absolute!important;
inset:12px!important;
border-radius:11px!important;
border:1px solid rgba(7,91,199,.045)!important;
pointer-events:none!important;
z-index:1!important;
}
.tf-homepage .advantage-visual:after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:11px!important;
width:38%!important;
height:8px!important;
transform:translateX(-50%)!important;
border-radius:50%!important;
background:rgba(11,35,67,.055)!important;
filter:blur(6px)!important;
}
.tf-homepage .advantage-visual img{
position:relative!important;
z-index:2!important;
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
background:#fff!important;
}
/* Number badge – premium blue */
.tf-homepage .advantage-visual-card>.advantage-number{
top:13px!important;
left:13px!important;
width:42px!important;
height:42px!important;
border:1px solid rgba(255,255,255,.8)!important;
border-radius:12px!important;
background:linear-gradient(180deg,#0868dc 0%,#075bc7 100%)!important;
color:#fff!important;
box-shadow:0 7px 16px rgba(7,91,199,.18)!important;
}
/* Copy area */
.tf-homepage .advantage-content{
position:relative!important;
margin-top:auto!important;
padding:0 4px 4px!important;
}
.tf-homepage .advantage-content:before{
content:""!important;
display:block!important;
width:28px!important;
height:3px!important;
margin:0 0 8px!important;
border-radius:999px!important;
background:#075bc7!important;
}
.tf-homepage .advantage-content h3{
margin:0 0 6px!important;
color:#0b2343!important;
font-size:15.5px!important;
font-weight:900!important;
line-height:1.12!important;
letter-spacing:-.025em!important;
}
.tf-homepage .advantage-content p{
margin:0!important;
color:#61748e!important;
font-size:9.5px!important;
line-height:1.42!important;
}
/* Hover */
.tf-homepage .trade-advantage .advantage-cards>.advantage-visual-card:hover{
transform:translateY(-3px)!important;
border-color:#b8cee5!important;
box-shadow:0 16px 32px rgba(8,35,68,.095)!important;
}
/* Left panel polish to balance the white cards */
.tf-homepage .trade-advantage .advantage-intro{
position:relative!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.06)!important;
border-radius:18px!important;
background:
radial-gradient(circle at 88% 18%,rgba(7,91,199,.18),transparent 28%),
linear-gradient(145deg,#0a2342 0%,#0b2343 100%)!important;
box-shadow:0 12px 28px rgba(8,35,68,.12)!important;
}
.tf-homepage .trade-advantage .advantage-intro:after{
content:""!important;
position:absolute!important;
right:-48px!important;
bottom:-62px!important;
width:180px!important;
height:180px!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:50%!important;
}
.tf-homepage .trade-advantage .advantage-intro .eyebrow{
color:#f9bd2b!important;
}
/* responsive */
@media(min-width:1400px){
.tf-homepage .advantage-visual{
height:174px!important;
min-height:174px!important;
}
}
@media(max-width:1100px){
.tf-homepage .advantage-visual{
height:145px!important;
min-height:145px!important;
}
.tf-homepage .advantage-content h3{
font-size:13.5px!important;
}
}
@media(max-width:760px){
.tf-homepage .trade-advantage .advantage-cards>.advantage-visual-card{
border-radius:14px!important;
}
.tf-homepage .advantage-visual{
height:145px!important;
min-height:145px!important;
margin-bottom:10px!important;
}
.tf-homepage .advantage-content h3{
font-size:12px!important;
}
.tf-homepage .advantage-content p{
font-size:8px!important;
}
}
/* =========================================================
SOURCE: product-sections-compact-mobile-18.4.99.css
SHA256: 4d378c686c96f1b85f81bb89e0f59834bc78c2ab1fce4b54d8711e980c794731
Production order preserved.
========================================================= */
/* TradesFolks 18.4.99 — Product Section Compact Footer + Mobile QA
Applies to Featured marketplace opportunities and Trending products. */
/* ---------- shared section rhythm ---------- */
.tf-homepage .marketplace-products,
.tf-homepage .trending-products{
padding-top:8px!important;
padding-bottom:10px!important;
margin-top:0!important;
margin-bottom:0!important;
}
.tf-homepage .marketplace-products>.shell,
.tf-homepage .trending-products>.shell{
width:calc(100% - 20px)!important;
max-width:none!important;
margin-inline:auto!important;
padding-top:0!important;
padding-bottom:0!important;
}
.tf-homepage .marketplace-products .curated-products-head,
.tf-homepage .trending-products .trending-products-head{
margin-top:0!important;
margin-bottom:7px!important;
padding-top:0!important;
padding-bottom:0!important;
}
/* ---------- desktop: shorter yellow name band ---------- */
.tf-homepage .marketplace-products .tf-featured-opportunity-body,
.tf-homepage .trending-products .tf-featured-opportunity-body{
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
flex-basis:50px!important;
min-height:50px!important;
height:50px!important;
max-height:50px!important;
padding:6px 9px 7px!important;
box-sizing:border-box!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3,
.tf-homepage .trending-products .tf-featured-opportunity-body h3{
display:block!important;
width:100%!important;
min-height:15px!important;
max-height:18px!important;
margin:0!important;
overflow:hidden!important;
color:#0b2343!important;
font-size:9.5px!important;
font-weight:900!important;
line-height:1.1!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after,
.tf-homepage .trending-products .tf-featured-opportunity-body:after{
width:24px!important;
height:3px!important;
margin-top:5px!important;
border-radius:999px!important;
}
/* tighter grid spacing */
.tf-homepage .marketplace-products .featured-twelve-grid,
.tf-homepage .trending-products .trending-twelve-grid{
gap:8px!important;
margin-top:0!important;
margin-bottom:0!important;
}
/* image/card balance */
.tf-homepage .marketplace-products .tf-featured-opportunity-card,
.tf-homepage .trending-products .tf-featured-opportunity-card{
min-height:0!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media,
.tf-homepage .trending-products .tf-featured-opportunity-media{
background:#fff!important;
}
/* large desktop */
@media(min-width:1536px){
.tf-homepage .marketplace-products,
.tf-homepage .trending-products{
padding-top:8px!important;
padding-bottom:11px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body,
.tf-homepage .trending-products .tf-featured-opportunity-body{
flex-basis:52px!important;
min-height:52px!important;
height:52px!important;
max-height:52px!important;
}
}
/* laptop */
@media(min-width:1024px) and (max-width:1535px){
.tf-homepage .marketplace-products .tf-featured-opportunity-body,
.tf-homepage .trending-products .tf-featured-opportunity-body{
flex-basis:46px!important;
min-height:46px!important;
height:46px!important;
max-height:46px!important;
padding:5px 7px 6px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3,
.tf-homepage .trending-products .tf-featured-opportunity-body h3{
font-size:8.5px!important;
}
}
/* ---------- mobile QA ---------- */
@media(max-width:699px){
.tf-homepage .marketplace-products,
.tf-homepage .trending-products{
padding:7px 0 9px!important;
overflow:hidden!important;
}
.tf-homepage .marketplace-products>.shell,
.tf-homepage .trending-products>.shell{
width:100%!important;
max-width:none!important;
padding:0 8px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
/* heading: no oversized blank area, CTA stays within viewport */
.tf-homepage .marketplace-products .curated-products-head,
.tf-homepage .trending-products .trending-products-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:4px 7px!important;
margin:0 0 7px!important;
}
.tf-homepage .marketplace-products .curated-products-head>div,
.tf-homepage .trending-products .trending-products-head>div{
min-width:0!important;
}
.tf-homepage .marketplace-products .curated-products-head .eyebrow,
.tf-homepage .trending-products .trending-products-head .eyebrow{
font-size:6.5px!important;
line-height:1!important;
}
.tf-homepage .marketplace-products .curated-products-head h2,
.tf-homepage .trending-products .trending-products-head h2{
margin-top:3px!important;
font-size:17px!important;
line-height:1.02!important;
letter-spacing:-.035em!important;
}
.tf-homepage .marketplace-products .curated-products-head .section-copy,
.tf-homepage .trending-products .trending-products-head .section-copy{
margin-top:3px!important;
font-size:6.8px!important;
line-height:1.25!important;
}
.tf-homepage .marketplace-products .curated-products-head>a,
.tf-homepage .trending-products .trending-products-head>a{
align-self:center!important;
min-height:28px!important;
height:28px!important;
max-width:112px!important;
padding:0 8px!important;
overflow:hidden!important;
border-radius:9px!important;
font-size:6.2px!important;
white-space:nowrap!important;
}
/* true responsive 2-column grid; remove horizontal/partial-card behavior */
.tf-homepage .marketplace-products .featured-twelve-grid,
.tf-homepage .trending-products .trending-twelve-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:7px!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
transform:none!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-card,
.tf-homepage .trending-products .tf-featured-opportunity-card{
width:100%!important;
min-width:0!important;
max-width:100%!important;
margin:0!important;
border-radius:12px!important;
overflow:hidden!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media,
.tf-homepage .trending-products .tf-featured-opportunity-media{
flex-basis:132px!important;
height:132px!important;
min-height:132px!important;
max-height:132px!important;
padding:3px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media img,
.tf-homepage .trending-products .tf-featured-opportunity-media img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
/* much shorter yellow footer on mobile */
.tf-homepage .marketplace-products .tf-featured-opportunity-body,
.tf-homepage .trending-products .tf-featured-opportunity-body{
flex-basis:42px!important;
min-height:42px!important;
height:42px!important;
max-height:42px!important;
padding:5px 6px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3,
.tf-homepage .trending-products .tf-featured-opportunity-body h3{
min-height:13px!important;
max-height:14px!important;
font-size:7.4px!important;
line-height:1.05!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after,
.tf-homepage .trending-products .tf-featured-opportunity-body:after{
width:20px!important;
height:2.5px!important;
margin-top:4px!important;
}
/* controls scaled down to avoid crowding */
.tf-homepage .marketplace-products .tf-featured-opportunity-media>.tf-featured-card-tools,
.tf-homepage .trending-products .tf-featured-opportunity-media>.tf-featured-card-tools{
top:5px!important;
right:5px!important;
gap:4px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool,
.tf-homepage .marketplace-products .tf-featured-card-tools>*,
.tf-homepage .trending-products .tf-featured-tool,
.tf-homepage .trending-products .tf-featured-card-tools>*{
width:22px!important;
height:22px!important;
min-width:22px!important;
min-height:22px!important;
max-width:22px!important;
max-height:22px!important;
flex-basis:22px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool svg,
.tf-homepage .marketplace-products .tf-featured-card-tools>* svg,
.tf-homepage .trending-products .tf-featured-tool svg,
.tf-homepage .trending-products .tf-featured-card-tools>* svg{
width:10px!important;
height:10px!important;
}
}
/* very small phones: still 2 compact columns rather than one oversized card */
@media(max-width:380px){
.tf-homepage .marketplace-products>.shell,
.tf-homepage .trending-products>.shell{
padding-inline:6px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid,
.tf-homepage .trending-products .trending-twelve-grid{
gap:6px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media,
.tf-homepage .trending-products .tf-featured-opportunity-media{
flex-basis:116px!important;
height:116px!important;
min-height:116px!important;
max-height:116px!important;
}
.tf-homepage .marketplace-products .curated-products-head h2,
.tf-homepage .trending-products .trending-products-head h2{
font-size:15.5px!important;
}
}
/* =========================================================
SOURCE: featured-height-only-18.4.100.css
SHA256: 4df6e44a43c2ab0f21d602e3587abadbb87f62041f7604376e78577ac31cc478
Production order preserved.
========================================================= */
/* TradesFolks 18.4.100 — Featured Cards Height-Only Reduction
IMPORTANT: preserves existing column count, card width, grid layout and actions.
Only reduces vertical height and whitespace. */
/* Featured marketplace opportunities only */
.tf-homepage .marketplace-products{
padding-top:6px!important;
padding-bottom:7px!important;
}
.tf-homepage .marketplace-products .curated-products-head{
margin-bottom:6px!important;
}
/* Keep layout untouched; only shorten media */
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:168px!important;
height:168px!important;
min-height:168px!important;
max-height:168px!important;
padding:3px!important;
}
/* Keep full image visible without crop/stretch */
.tf-homepage .marketplace-products .tf-featured-opportunity-media img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
/* Shorter yellow name band */
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:38px!important;
min-height:38px!important;
height:38px!important;
max-height:38px!important;
padding:4px 7px 5px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
min-height:12px!important;
max-height:13px!important;
margin:0!important;
font-size:8.5px!important;
line-height:1.05!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
width:20px!important;
height:2px!important;
margin-top:3px!important;
}
/* 1280–1535 desktop/laptop */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:154px!important;
height:154px!important;
min-height:154px!important;
max-height:154px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:36px!important;
min-height:36px!important;
height:36px!important;
max-height:36px!important;
}
}
/* 1024–1279: preserve current responsive columns; only reduce height */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:146px!important;
height:146px!important;
min-height:146px!important;
max-height:146px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:35px!important;
min-height:35px!important;
height:35px!important;
max-height:35px!important;
}
}
/* Tablet: no column changes */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:138px!important;
height:138px!important;
min-height:138px!important;
max-height:138px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:34px!important;
min-height:34px!important;
height:34px!important;
max-height:34px!important;
}
}
/* Mobile: preserve Sprint 473 2-column layout; only reduce vertical height */
@media(max-width:699px){
.tf-homepage .marketplace-products{
padding-top:5px!important;
padding-bottom:6px!important;
}
.tf-homepage .marketplace-products .curated-products-head{
margin-bottom:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:108px!important;
height:108px!important;
min-height:108px!important;
max-height:108px!important;
padding:2px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:32px!important;
min-height:32px!important;
height:32px!important;
max-height:32px!important;
padding:3px 5px 4px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
min-height:11px!important;
max-height:12px!important;
font-size:6.8px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
width:17px!important;
height:2px!important;
margin-top:2px!important;
}
}
@media(max-width:380px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:98px!important;
height:98px!important;
min-height:98px!important;
max-height:98px!important;
}
}
/* =========================================================
SOURCE: featured-product-name-fix-18.4.102.css
SHA256: 938724035980dfb3b4050a03cdda35d208017f3abb5b1d612e41840df5fe39f3
Production order preserved.
========================================================= */
/* TradesFolks 18.4.102 — Featured Product Name Alignment Fix
Keeps the same grid/card layout. Fixes product names riding on the yellow band edge. */
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
flex-basis:44px!important;
min-height:44px!important;
height:44px!important;
max-height:44px!important;
margin:0!important;
padding:6px 8px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
position:static!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
display:block!important;
width:100%!important;
min-width:0!important;
min-height:14px!important;
max-height:16px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
transform:none!important;
float:none!important;
color:#0b2343!important;
font-size:8.7px!important;
font-weight:900!important;
line-height:1.15!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
vertical-align:middle!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
position:static!important;
display:block!important;
width:20px!important;
height:2px!important;
margin:4px auto 0!important;
border-radius:999px!important;
transform:none!important;
}
/* 1280–1535 */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:42px!important;
min-height:42px!important;
height:42px!important;
max-height:42px!important;
padding:5px 7px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
font-size:8.2px!important;
}
}
/* 1024–1279 */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:40px!important;
min-height:40px!important;
height:40px!important;
max-height:40px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
font-size:7.8px!important;
}
}
/* Tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:38px!important;
min-height:38px!important;
height:38px!important;
max-height:38px!important;
}
}
/* Mobile: preserve existing 2-column layout */
@media(max-width:699px){
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:36px!important;
min-height:36px!important;
height:36px!important;
max-height:36px!important;
padding:4px 5px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
min-height:12px!important;
max-height:13px!important;
font-size:6.9px!important;
line-height:1.12!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
width:17px!important;
height:2px!important;
margin-top:3px!important;
}
}
/* =========================================================
SOURCE: featured-trending-exact-parity-18.4.103.css
SHA256: 37d96e972293b7eb2d6878566c4e0882a68955374700801e28d253adf53f33ba
Production order preserved.
========================================================= */
/* TradesFolks 18.4.103 — Featured = Trending Exact UI Parity
Featured marketplace opportunities now uses the exact same visual rhythm
as Trending Now / Popular products buyers are exploring.
Heading copy remains different; product UI is synchronized. */
/* section rhythm */
.tf-homepage .marketplace-products{
padding-top:6px!important;
padding-bottom:7px!important;
margin-top:0!important;
margin-bottom:0!important;
}
/* heading spacing parity */
.tf-homepage .marketplace-products .curated-products-head{
margin-top:0!important;
margin-bottom:6px!important;
padding-top:0!important;
padding-bottom:0!important;
}
/* exact Trending media sizing */
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:168px!important;
height:168px!important;
min-height:168px!important;
max-height:168px!important;
padding:3px!important;
background:#fff!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
/* exact Trending yellow footer */
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
flex-basis:38px!important;
min-height:38px!important;
height:38px!important;
max-height:38px!important;
margin:0!important;
padding:4px 7px 5px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
/* exact Trending title behavior */
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
position:static!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
display:block!important;
width:100%!important;
min-width:0!important;
min-height:12px!important;
max-height:13px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
transform:none!important;
float:none!important;
color:#0b2343!important;
font-size:8.5px!important;
font-weight:900!important;
line-height:1.05!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* exact Trending underline */
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
position:static!important;
display:block!important;
width:20px!important;
height:2px!important;
margin:3px auto 0!important;
border-radius:999px!important;
transform:none!important;
}
/* card shell parity */
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
min-height:0!important;
border-radius:15px!important;
overflow:hidden!important;
}
/* action rail parity */
.tf-homepage .marketplace-products .tf-featured-opportunity-media>.tf-featured-card-tools{
top:7px!important;
right:7px!important;
gap:4px!important;
}
/* 1280–1535 */
@media(min-width:1280px) and (max-width:1535px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:154px!important;
height:154px!important;
min-height:154px!important;
max-height:154px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:36px!important;
min-height:36px!important;
height:36px!important;
max-height:36px!important;
}
}
/* 1024–1279 */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:146px!important;
height:146px!important;
min-height:146px!important;
max-height:146px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:35px!important;
min-height:35px!important;
height:35px!important;
max-height:35px!important;
}
}
/* tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:138px!important;
height:138px!important;
min-height:138px!important;
max-height:138px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:34px!important;
min-height:34px!important;
height:34px!important;
max-height:34px!important;
}
}
/* mobile parity: preserve existing 2-column layout, same Trending heights */
@media(max-width:699px){
.tf-homepage .marketplace-products{
padding-top:5px!important;
padding-bottom:6px!important;
}
.tf-homepage .marketplace-products .curated-products-head{
margin-bottom:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:108px!important;
height:108px!important;
min-height:108px!important;
max-height:108px!important;
padding:2px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex-basis:32px!important;
min-height:32px!important;
height:32px!important;
max-height:32px!important;
padding:3px 5px 4px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
min-height:11px!important;
max-height:12px!important;
font-size:6.8px!important;
line-height:1.05!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
width:17px!important;
height:2px!important;
margin-top:2px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media>.tf-featured-card-tools{
top:5px!important;
right:5px!important;
gap:4px!important;
}
}
@media(max-width:380px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
flex-basis:98px!important;
height:98px!important;
min-height:98px!important;
max-height:98px!important;
}
}
/* =========================================================
SOURCE: featured-card-title-position-18.4.104.css
SHA256: 0f5a767fd3e3ff05239f7b20d20d1eda5650287a479cb78446a0b9947573b551
Production order preserved.
========================================================= */
/* TradesFolks 18.4.104
Featured cards: force the product-name band to match Trending cards.
Fixes title sitting on the image/footer divider. Grid remains unchanged. */
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
}
/* Important: remove old flex/absolute title behavior from the Featured card */
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
position:relative!important;
flex:none!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
margin:0!important;
padding:6px 10px 7px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3,
.tf-homepage .marketplace-products .tf-featured-opportunity-body .tf-featured-opportunity-title{
position:relative!important;
inset:auto!important;
top:auto!important;
right:auto!important;
bottom:auto!important;
left:auto!important;
transform:none!important;
translate:none!important;
flex:none!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
height:18px!important;
min-height:18px!important;
max-height:18px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
font-size:10px!important;
font-weight:800!important;
line-height:18px!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* same small white underline used by Trending */
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
content:""!important;
position:relative!important;
inset:auto!important;
flex:none!important;
display:block!important;
width:22px!important;
height:3px!important;
margin:5px auto 0!important;
border-radius:999px!important;
background:#fff!important;
transform:none!important;
}
/* Prevent title from being pulled upward by any older card rules */
.tf-homepage .marketplace-products .tf-featured-opportunity-media + .tf-featured-opportunity-body{
margin-top:0!important;
}
@media(max-width:699px){
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
height:46px!important;
min-height:46px!important;
max-height:46px!important;
padding:5px 7px 6px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3,
.tf-homepage .marketplace-products .tf-featured-opportunity-body .tf-featured-opportunity-title{
height:17px!important;
min-height:17px!important;
max-height:17px!important;
font-size:9px!important;
line-height:17px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body:after{
width:20px!important;
height:3px!important;
margin-top:4px!important;
}
}
/* =========================================================
SOURCE: explore-industries-network-18.4.105.css
SHA256: ad73a1d6d3268a061ede33834e70ff91f6fa3c8328136e9cd9bc576faedba706
Production order preserved.
========================================================= */
/* TradesFolks 18.4.105 — Explore Industries Premium Network
Reference direction: deep blue/purple marketplace panel with compact white category tiles.
Existing 21 category data is preserved. */
/* section canvas */
.tf-homepage .tf-home-v3-industries{
position:relative!important;
overflow:hidden!important;
padding:18px 0 20px!important;
background:
radial-gradient(circle at 82% 18%,rgba(78,116,255,.28),transparent 28%),
radial-gradient(circle at 18% 88%,rgba(119,92,246,.22),transparent 26%),
linear-gradient(145deg,#18245f 0%,#252d86 46%,#4f55b8 100%)!important;
border-top:1px solid rgba(255,255,255,.08)!important;
border-bottom:1px solid rgba(13,30,75,.2)!important;
}
/* subtle network curves */
.tf-homepage .tf-home-v3-industries:before,
.tf-homepage .tf-home-v3-industries:after{
content:""!important;
position:absolute!important;
pointer-events:none!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:50%!important;
}
.tf-homepage .tf-home-v3-industries:before{
width:760px!important;
height:760px!important;
right:18%!important;
top:-500px!important;
}
.tf-homepage .tf-home-v3-industries:after{
width:520px!important;
height:520px!important;
left:-280px!important;
bottom:-360px!important;
}
.tf-homepage .tf-home-v3-industries>.shell{
position:relative!important;
z-index:2!important;
width:calc(100% - 24px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
}
/* header */
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
margin:0 0 12px!important;
padding:0!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head>div{
min-width:0!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head>div>span{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
margin:0 0 4px!important;
color:#9fc1ff!important;
font-size:6.8px!important;
font-weight:900!important;
letter-spacing:.11em!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
margin:0!important;
color:#fff!important;
font-size:24px!important;
font-weight:900!important;
line-height:1.03!important;
letter-spacing:-.04em!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head p{
margin:4px 0 0!important;
color:rgba(255,255,255,.72)!important;
font-size:7.5px!important;
line-height:1.3!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
flex:0 0 auto!important;
min-height:30px!important;
padding:0 11px!important;
border:1px solid rgba(255,255,255,.75)!important;
border-radius:999px!important;
background:#fff!important;
color:#17326d!important;
box-shadow:0 7px 18px rgba(5,16,58,.14)!important;
font-size:6.7px!important;
font-weight:900!important;
text-decoration:none!important;
white-space:nowrap!important;
}
/* 21 categories => 7 x 3 desktop */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
display:grid!important;
grid-template-columns:repeat(7,minmax(0,1fr))!important;
gap:8px!important;
width:100%!important;
margin:0!important;
padding:0!important;
}
/* clean white cards */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
min-width:0!important;
height:126px!important;
min-height:126px!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.2)!important;
border-radius:12px!important;
background:#fff!important;
box-shadow:0 6px 18px rgba(4,15,54,.10)!important;
color:#102342!important;
text-decoration:none!important;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card:hover{
transform:translateY(-2px)!important;
border-color:#9fc1ff!important;
box-shadow:0 12px 24px rgba(4,15,54,.17)!important;
}
/* image area */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:1 1 auto!important;
width:100%!important;
min-height:0!important;
padding:7px 9px 2px!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
transform:none!important;
}
/* title row like reference: image + centered category name, no visual clutter */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 32px!important;
width:100%!important;
min-height:32px!important;
height:32px!important;
max-height:32px!important;
margin:0!important;
padding:4px 7px 6px!important;
overflow:hidden!important;
border-top:1px solid #edf1f6!important;
background:#fff!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body>span{
display:none!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body>strong{
display:block!important;
width:100%!important;
margin:0!important;
overflow:hidden!important;
color:#15243e!important;
font-size:7.4px!important;
font-weight:800!important;
line-height:1.1!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* popular subcategories strip */
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories{
display:flex!important;
align-items:center!important;
gap:8px!important;
margin-top:10px!important;
min-width:0!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories>strong{
flex:0 0 auto!important;
color:#fff!important;
font-size:6.8px!important;
font-weight:900!important;
white-space:nowrap!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories>div{
display:flex!important;
gap:5px!important;
min-width:0!important;
overflow-x:auto!important;
scrollbar-width:none!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories>div::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories a{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
min-height:24px!important;
padding:0 8px!important;
border:1px solid rgba(255,255,255,.28)!important;
border-radius:999px!important;
background:rgba(255,255,255,.11)!important;
color:#fff!important;
font-size:6.2px!important;
font-weight:700!important;
text-decoration:none!important;
backdrop-filter:blur(6px)!important;
}
/* large desktop */
@media(min-width:1536px){
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
height:132px!important;
min-height:132px!important;
}
}
/* laptop: 7 columns preserved, slightly tighter */
@media(min-width:1100px) and (max-width:1399px){
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
gap:7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
height:116px!important;
min-height:116px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body>strong{
font-size:6.8px!important;
}
}
/* tablet */
@media(min-width:700px) and (max-width:1099px){
.tf-homepage .tf-home-v3-industries{
padding:14px 0 16px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
height:120px!important;
min-height:120px!important;
}
}
/* mobile */
@media(max-width:699px){
.tf-homepage .tf-home-v3-industries{
padding:12px 0 14px!important;
}
.tf-homepage .tf-home-v3-industries>.shell{
width:100%!important;
padding:0 8px!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:5px 7px!important;
margin-bottom:9px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
font-size:17px!important;
line-height:1.05!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head p{
font-size:6.2px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head>a{
min-height:27px!important;
padding:0 8px!important;
font-size:5.7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
height:112px!important;
min-height:112px!important;
border-radius:10px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
flex-basis:30px!important;
min-height:30px!important;
height:30px!important;
max-height:30px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body>strong{
font-size:6.7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories{
display:block!important;
margin-top:9px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories>strong{
display:block!important;
margin-bottom:5px!important;
}
}
/* =========================================================
SOURCE: country-markets-premium-18.4.106.css
SHA256: 5d525c6a4c47903da357d9a021aa362034423f4f8b5f5be0ded3c3e48d84dc35
Production order preserved.
========================================================= */
/* TradesFolks 18.4.106 — Premium Supplier Markets
Polishes the existing country-market cards without changing country order/data. */
.tf-homepage .country-network-premium{
position:relative!important;
overflow:hidden!important;
padding-top:14px!important;
padding-bottom:16px!important;
background:
radial-gradient(circle at 86% 8%,rgba(7,91,199,.065),transparent 26%),
linear-gradient(180deg,#f7f9fc 0%,#f2f6fb 100%)!important;
}
.tf-homepage .country-network-premium>.shell{
width:calc(100% - 24px)!important;
max-width:none!important;
margin-inline:auto!important;
padding:0!important;
}
/* section heading */
.tf-homepage .country-network-premium .country-network-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:14px!important;
margin:0 0 10px!important;
}
.tf-homepage .country-network-premium .country-network-head .eyebrow{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
margin:0 0 3px!important;
color:#075bc7!important;
font-size:6.8px!important;
font-weight:900!important;
letter-spacing:.105em!important;
}
.tf-homepage .country-network-premium .country-network-head .eyebrow:before{
content:""!important;
width:18px!important;
height:2px!important;
border-radius:999px!important;
background:#075bc7!important;
}
.tf-homepage .country-network-premium .country-network-head h2{
margin:0!important;
color:#0b2343!important;
font-size:24px!important;
font-weight:900!important;
line-height:1.03!important;
letter-spacing:-.04em!important;
}
.tf-homepage .country-network-premium .country-network-head p{
margin:3px 0 0!important;
color:#6f8096!important;
font-size:7.4px!important;
line-height:1.3!important;
}
.tf-homepage .country-network-premium .country-network-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
flex:0 0 auto!important;
min-height:30px!important;
padding:0 11px!important;
border:1px solid #cbdced!important;
border-radius:999px!important;
background:#fff!important;
color:#075bc7!important;
box-shadow:0 5px 14px rgba(9,35,69,.045)!important;
font-size:6.5px!important;
font-weight:900!important;
text-decoration:none!important;
white-space:nowrap!important;
}
/* rail / cards */
.tf-homepage .country-network-premium .country-market-rail{
gap:10px!important;
}
.tf-homepage .country-network-premium .country-market-card{
position:relative!important;
overflow:hidden!important;
border:1px solid #dbe5ef!important;
border-radius:15px!important;
background:#fff!important;
box-shadow:0 7px 20px rgba(9,35,69,.05)!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.tf-homepage .country-network-premium .country-market-card:hover{
transform:translateY(-3px)!important;
border-color:#b9cee5!important;
box-shadow:0 14px 28px rgba(9,35,69,.10)!important;
}
/* media */
.tf-homepage .country-network-premium .country-market-visual{
position:relative!important;
overflow:hidden!important;
border-radius:14px 14px 0 0!important;
background:#eef3f8!important;
}
.tf-homepage .country-network-premium .country-market-visual:after{
content:""!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:
linear-gradient(180deg,rgba(5,24,53,.02) 0%,rgba(5,24,53,0) 56%,rgba(5,24,53,.12) 100%)!important;
z-index:2!important;
}
.tf-homepage .country-network-premium .country-market-artwork{
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
background:#eef3f8!important;
transition:transform .24s ease!important;
}
.tf-homepage .country-network-premium .country-market-card:hover .country-market-artwork{
transform:scale(1.025)!important;
}
/* flag badge */
.tf-homepage .country-network-premium .country-market-visual .country-flag{
top:12px!important;
left:12px!important;
width:42px!important;
height:28px!important;
min-width:42px!important;
max-width:42px!important;
min-height:28px!important;
max-height:28px!important;
border:1px solid rgba(255,255,255,.9)!important;
border-radius:7px!important;
background:#fff!important;
box-shadow:0 6px 16px rgba(4,18,47,.16)!important;
z-index:4!important;
}
/* TF badge in brand colors */
.tf-homepage .country-network-premium .country-market-mark{
top:12px!important;
right:12px!important;
display:grid!important;
place-items:center!important;
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
padding:0!important;
border:1px solid rgba(255,255,255,.78)!important;
border-radius:10px!important;
background:linear-gradient(145deg,#f9bd2b,#ffd65a)!important;
color:#0b2343!important;
box-shadow:0 7px 16px rgba(4,18,47,.14)!important;
font-size:7px!important;
font-weight:900!important;
z-index:4!important;
}
/* body */
.tf-homepage .country-network-premium .country-market-body{
padding:10px 12px 11px!important;
background:#fff!important;
}
.tf-homepage .country-network-premium .country-market-body>span,
.tf-homepage .country-network-premium .country-market-body>small{
display:block!important;
margin:0 0 3px!important;
color:#8190a3!important;
font-size:5.8px!important;
font-weight:650!important;
line-height:1.2!important;
}
.tf-homepage .country-network-premium .country-market-body h3,
.tf-homepage .country-network-premium .country-market-body strong{
display:block!important;
margin:0!important;
color:#0b2343!important;
font-size:9.8px!important;
font-weight:900!important;
line-height:1.15!important;
letter-spacing:-.015em!important;
}
/* footer / supplier count */
.tf-homepage .country-network-premium .country-market-footer{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
min-height:34px!important;
padding:7px 12px!important;
border-top:1px solid #edf1f5!important;
background:#fbfcfe!important;
color:#64758a!important;
font-size:5.9px!important;
font-weight:700!important;
}
.tf-homepage .country-network-premium .country-market-footer:after{
content:"→"!important;
display:grid!important;
place-items:center!important;
width:18px!important;
height:18px!important;
border-radius:999px!important;
background:#edf5ff!important;
color:#075bc7!important;
font-size:8px!important;
font-weight:900!important;
}
/* tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .country-network-premium{
padding-top:12px!important;
padding-bottom:14px!important;
}
.tf-homepage .country-network-premium .country-network-head h2{
font-size:20px!important;
}
}
/* mobile */
@media(max-width:699px){
.tf-homepage .country-network-premium{
padding:10px 0 13px!important;
}
.tf-homepage .country-network-premium>.shell{
width:100%!important;
padding:0 8px!important;
box-sizing:border-box!important;
}
.tf-homepage .country-network-premium .country-network-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:5px 7px!important;
margin-bottom:8px!important;
}
.tf-homepage .country-network-premium .country-network-head h2{
font-size:17px!important;
}
.tf-homepage .country-network-premium .country-network-head p{
font-size:6.1px!important;
}
.tf-homepage .country-network-premium .country-network-head>a{
min-height:27px!important;
padding:0 8px!important;
font-size:5.6px!important;
}
.tf-homepage .country-network-premium .country-market-rail{
gap:8px!important;
}
.tf-homepage .country-network-premium .country-market-card{
border-radius:13px!important;
}
.tf-homepage .country-network-premium .country-market-visual{
border-radius:12px 12px 0 0!important;
}
.tf-homepage .country-network-premium .country-market-visual .country-flag{
top:9px!important;
left:9px!important;
width:36px!important;
height:24px!important;
min-width:36px!important;
max-width:36px!important;
min-height:24px!important;
max-height:24px!important;
}
.tf-homepage .country-network-premium .country-market-mark{
top:9px!important;
right:9px!important;
width:30px!important;
height:30px!important;
min-width:30px!important;
min-height:30px!important;
border-radius:9px!important;
font-size:6px!important;
}
.tf-homepage .country-network-premium .country-market-body{
padding:8px 9px 9px!important;
}
.tf-homepage .country-network-premium .country-market-body h3,
.tf-homepage .country-network-premium .country-market-body strong{
font-size:8.6px!important;
}
.tf-homepage .country-network-premium .country-market-footer{
min-height:31px!important;
padding:6px 9px!important;
font-size:5.4px!important;
}
}
/* =========================================================
SOURCE: country-markets-visibility-fix-18.4.107.css
SHA256: fe1eb338750deaa5a10714663679d90d00da926c981ab31f61f2743e3f72dcc4
Production order preserved.
========================================================= */
/* TradesFolks 18.4.107 — Supplier Market Visibility + Premium Balance
Fixes oversized empty white body and makes all market information clearly visible. */
/* card becomes a balanced 3-part layout */
.tf-homepage .country-network-premium .country-market-card{
display:flex!important;
flex-direction:column!important;
height:auto!important;
min-height:0!important;
overflow:hidden!important;
border:1px solid #d8e4ef!important;
border-radius:15px!important;
background:#fff!important;
box-shadow:0 8px 22px rgba(9,35,69,.065)!important;
}
/* image area: visually dominant but not oversized */
.tf-homepage .country-network-premium .country-market-visual{
flex:0 0 150px!important;
height:150px!important;
min-height:150px!important;
max-height:150px!important;
overflow:hidden!important;
background:#eef3f8!important;
}
.tf-homepage .country-network-premium .country-market-artwork{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
}
/* body: remove giant blank space */
.tf-homepage .country-network-premium .country-market-body{
position:relative!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
flex:0 0 58px!important;
min-height:58px!important;
height:58px!important;
max-height:58px!important;
margin:0!important;
padding:8px 12px 9px!important;
overflow:hidden!important;
background:#fff!important;
box-sizing:border-box!important;
}
/* small sourcing label stays visible */
.tf-homepage .country-network-premium .country-market-body>span,
.tf-homepage .country-network-premium .country-market-body>small{
position:static!important;
display:block!important;
margin:0 0 3px!important;
padding:0!important;
color:#6f8095!important;
font-size:5.8px!important;
font-weight:700!important;
line-height:1.15!important;
opacity:1!important;
visibility:visible!important;
}
/* country name: prominent and readable */
.tf-homepage .country-network-premium .country-market-body h3,
.tf-homepage .country-network-premium .country-market-body strong{
position:static!important;
display:block!important;
width:100%!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
color:#0b2343!important;
font-size:10.5px!important;
font-weight:900!important;
line-height:1.15!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
opacity:1!important;
visibility:visible!important;
}
/* footer: visible, compact and premium */
.tf-homepage .country-network-premium .country-market-footer{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
flex:0 0 34px!important;
min-height:34px!important;
height:34px!important;
max-height:34px!important;
margin:0!important;
padding:0 11px!important;
border-top:1px solid #e9eff5!important;
background:linear-gradient(180deg,#f8fbff 0%,#f2f7fd 100%)!important;
color:#46617f!important;
font-size:6.2px!important;
font-weight:800!important;
line-height:1!important;
opacity:1!important;
visibility:visible!important;
box-sizing:border-box!important;
}
/* prevent any old footer text from being pushed off-screen */
.tf-homepage .country-network-premium .country-market-footer>*{
position:static!important;
margin:0!important;
transform:none!important;
opacity:1!important;
visibility:visible!important;
}
/* premium arrow button */
.tf-homepage .country-network-premium .country-market-footer:after{
content:"→"!important;
position:static!important;
display:grid!important;
place-items:center!important;
flex:0 0 20px!important;
width:20px!important;
height:20px!important;
margin-left:8px!important;
border-radius:50%!important;
background:#075bc7!important;
color:#fff!important;
box-shadow:0 4px 10px rgba(7,91,199,.18)!important;
font-size:8px!important;
font-weight:900!important;
}
/* richer but controlled hover */
.tf-homepage .country-network-premium .country-market-card:hover{
transform:translateY(-3px)!important;
border-color:#abc5e0!important;
box-shadow:0 16px 30px rgba(9,35,69,.11)!important;
}
/* desktop/laptop */
@media(min-width:1280px){
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:148px!important;
height:148px!important;
min-height:148px!important;
max-height:148px!important;
}
.tf-homepage .country-network-premium .country-market-body{
flex-basis:56px!important;
min-height:56px!important;
height:56px!important;
max-height:56px!important;
}
}
/* tablet */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:138px!important;
height:138px!important;
min-height:138px!important;
max-height:138px!important;
}
.tf-homepage .country-network-premium .country-market-body{
flex-basis:54px!important;
min-height:54px!important;
height:54px!important;
max-height:54px!important;
}
}
/* mobile */
@media(max-width:699px){
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:124px!important;
height:124px!important;
min-height:124px!important;
max-height:124px!important;
}
.tf-homepage .country-network-premium .country-market-body{
flex-basis:50px!important;
min-height:50px!important;
height:50px!important;
max-height:50px!important;
padding:7px 9px 8px!important;
}
.tf-homepage .country-network-premium .country-market-body>span,
.tf-homepage .country-network-premium .country-market-body>small{
font-size:5.2px!important;
}
.tf-homepage .country-network-premium .country-market-body h3,
.tf-homepage .country-network-premium .country-market-body strong{
font-size:9px!important;
}
.tf-homepage .country-network-premium .country-market-footer{
flex-basis:31px!important;
min-height:31px!important;
height:31px!important;
max-height:31px!important;
padding:0 9px!important;
font-size:5.5px!important;
}
.tf-homepage .country-network-premium .country-market-footer:after{
flex-basis:18px!important;
width:18px!important;
height:18px!important;
font-size:7px!important;
}
}
/* =========================================================
SOURCE: country-destination-cards-18.4.108.css
SHA256: 3a2117fc036a523340a0bf032af64379bdb40e6bd10af76fd834d0ed62520d61
Production order preserved.
========================================================= */
/* TradesFolks 18.4.108 — Country Destination Card
Reference-led redesign: image-led destination card with curved separator,
prominent country information, supplier CTA and four marketplace trust signals. */
.tf-homepage .country-network-premium{
padding:14px 0 17px!important;
background:
radial-gradient(circle at 88% 0%,rgba(7,91,199,.06),transparent 28%),
linear-gradient(180deg,#f7f9fc 0%,#f3f6fa 100%)!important;
}
/* slightly roomier grid so the new information architecture stays readable */
.tf-homepage .country-network-premium .country-market-rail{
display:grid!important;
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:10px!important;
overflow:visible!important;
}
/* premium destination shell */
.tf-homepage .country-network-premium .country-market-card{
position:relative!important;
display:flex!important;
flex-direction:column!important;
height:292px!important;
min-height:292px!important;
max-height:292px!important;
overflow:hidden!important;
border:1px solid #d6e2ee!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:0 9px 24px rgba(7,31,63,.065)!important;
text-decoration:none!important;
transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease!important;
}
.tf-homepage .country-network-premium .country-market-card:hover{
transform:translateY(-4px)!important;
border-color:#a8c5e1!important;
box-shadow:0 18px 34px rgba(7,31,63,.12)!important;
}
/* image occupies the upper destination area */
.tf-homepage .country-network-premium .country-market-visual{
position:relative!important;
flex:0 0 146px!important;
width:100%!important;
height:146px!important;
min-height:146px!important;
max-height:146px!important;
overflow:hidden!important;
border-radius:17px 17px 0 0!important;
background:#eef3f8!important;
}
.tf-homepage .country-network-premium .country-market-artwork{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
background:#eef3f8!important;
}
/* curved white/yellow transition inspired by supplied reference */
.tf-homepage .country-network-premium .country-market-visual:before{
content:""!important;
position:absolute!important;
z-index:3!important;
left:-4%!important;
right:-4%!important;
bottom:-30px!important;
height:50px!important;
border-radius:50% 50% 0 0 / 100% 100% 0 0!important;
background:#f9bd2b!important;
transform:rotate(-1deg)!important;
pointer-events:none!important;
}
.tf-homepage .country-network-premium .country-market-visual:after{
content:""!important;
position:absolute!important;
z-index:4!important;
left:-4%!important;
right:-4%!important;
bottom:-33px!important;
height:48px!important;
border-radius:50% 50% 0 0 / 100% 100% 0 0!important;
background:#fff!important;
transform:rotate(1deg)!important;
pointer-events:none!important;
}
/* premium flag */
.tf-homepage .country-network-premium .country-market-visual .country-flag{
position:absolute!important;
z-index:7!important;
top:10px!important;
left:10px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:46px!important;
height:31px!important;
min-width:46px!important;
max-width:46px!important;
min-height:31px!important;
max-height:31px!important;
padding:2px!important;
overflow:hidden!important;
border:2px solid #fff!important;
border-radius:8px!important;
background:#fff!important;
box-shadow:0 6px 16px rgba(4,18,47,.18)!important;
}
.tf-homepage .country-network-premium .country-market-visual .country-flag img{
width:100%!important;
height:100%!important;
object-fit:cover!important;
border-radius:5px!important;
}
/* TF mark */
.tf-homepage .country-network-premium .country-market-mark{
position:absolute!important;
z-index:7!important;
top:10px!important;
right:10px!important;
display:grid!important;
place-items:center!important;
width:36px!important;
height:36px!important;
min-width:36px!important;
min-height:36px!important;
border:2px solid #fff!important;
border-radius:11px!important;
background:linear-gradient(145deg,#ffd65a,#f9bd2b)!important;
color:#0b2343!important;
box-shadow:0 6px 16px rgba(4,18,47,.16)!important;
font-size:7px!important;
font-weight:950!important;
}
.tf-homepage .country-network-premium .country-market-tags{
display:none!important;
}
/* New body is compact two-column information architecture */
.tf-homepage .country-network-premium .country-market-body.country-market-body-premium{
position:relative!important;
z-index:5!important;
display:grid!important;
grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr)!important;
gap:10px!important;
flex:1 1 auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0!important;
padding:13px 12px 11px!important;
overflow:hidden!important;
background:#fff!important;
box-sizing:border-box!important;
}
.tf-homepage .country-market-info{
display:flex!important;
flex-direction:column!important;
min-width:0!important;
padding-right:9px!important;
border-right:1px solid #e8eef5!important;
}
.tf-homepage .country-market-source{
display:block!important;
margin:0 0 3px!important;
color:#71829a!important;
font-size:5.4px!important;
font-weight:850!important;
line-height:1!important;
letter-spacing:.025em!important;
text-transform:uppercase!important;
}
.tf-homepage .country-market-name{
display:block!important;
margin:0!important;
overflow:hidden!important;
color:#0b2343!important;
font-size:15px!important;
font-weight:950!important;
line-height:1.03!important;
letter-spacing:-.035em!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .country-market-copy{
display:-webkit-box!important;
margin:5px 0 7px!important;
overflow:hidden!important;
color:#67798f!important;
font-size:6px!important;
font-weight:600!important;
line-height:1.3!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
/* supplier count pill */
.tf-homepage .country-market-count{
display:flex!important;
align-items:center!important;
gap:4px!important;
width:100%!important;
min-width:0!important;
min-height:27px!important;
margin-top:auto!important;
padding:4px 6px!important;
overflow:hidden!important;
border:1px solid #dce7f2!important;
border-radius:999px!important;
background:#fbfdff!important;
color:#0b2343!important;
box-sizing:border-box!important;
}
.tf-homepage .country-market-count>svg{
flex:0 0 17px!important;
width:17px!important;
height:17px!important;
padding:3px!important;
border-radius:50%!important;
background:#fff0c4!important;
color:#0b2343!important;
box-sizing:content-box!important;
}
.tf-homepage .country-market-count>b{
flex:0 0 auto!important;
color:#0b2343!important;
font-size:7.4px!important;
font-weight:950!important;
line-height:1!important;
}
.tf-homepage .country-market-count>span{
min-width:0!important;
overflow:hidden!important;
color:#64758b!important;
font-size:5.3px!important;
font-weight:700!important;
line-height:1!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .country-market-count>i{
flex:0 0 auto!important;
margin-left:auto!important;
color:#075bc7!important;
font-size:9px!important;
font-style:normal!important;
font-weight:900!important;
}
/* four reference-style trust signals */
.tf-homepage .country-market-benefits{
display:grid!important;
grid-template-columns:1fr 1fr!important;
align-content:center!important;
gap:8px 7px!important;
min-width:0!important;
}
.tf-homepage .country-market-benefits>span{
display:grid!important;
grid-template-columns:24px minmax(0,1fr)!important;
grid-template-rows:auto auto!important;
align-items:center!important;
column-gap:5px!important;
min-width:0!important;
}
.tf-homepage .country-benefit-icon{
grid-row:1 / span 2!important;
display:grid!important;
place-items:center!important;
width:24px!important;
height:24px!important;
border-radius:50%!important;
}
.tf-homepage .country-benefit-icon svg{
width:13px!important;
height:13px!important;
}
.tf-homepage .country-benefit-icon.is-blue{background:#eaf3ff!important;color:#075bc7!important}
.tf-homepage .country-benefit-icon.is-yellow{background:#fff3d3!important;color:#d98e00!important}
.tf-homepage .country-benefit-icon.is-green{background:#e9f7ef!important;color:#138a55!important}
.tf-homepage .country-benefit-icon.is-purple{background:#f0edff!important;color:#6650c7!important}
.tf-homepage .country-market-benefits b{
min-width:0!important;
overflow:hidden!important;
color:#0b2343!important;
font-size:5.5px!important;
font-weight:900!important;
line-height:1.1!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .country-market-benefits small{
min-width:0!important;
overflow:hidden!important;
color:#7b8ba0!important;
font-size:4.6px!important;
font-weight:600!important;
line-height:1.1!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* Disable old separate footer generated by CSS/legacy structure */
.tf-homepage .country-network-premium .country-market-footer{
display:none!important;
}
/* Wide desktop */
@media(min-width:1600px){
.tf-homepage .country-network-premium .country-market-card{
height:304px!important;
min-height:304px!important;
max-height:304px!important;
}
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:154px!important;
height:154px!important;
min-height:154px!important;
max-height:154px!important;
}
}
/* Laptop */
@media(min-width:1100px) and (max-width:1399px){
.tf-homepage .country-network-premium .country-market-rail{
gap:8px!important;
}
.tf-homepage .country-network-premium .country-market-card{
height:280px!important;
min-height:280px!important;
max-height:280px!important;
}
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:136px!important;
height:136px!important;
min-height:136px!important;
max-height:136px!important;
}
.tf-homepage .country-network-premium .country-market-body.country-market-body-premium{
gap:7px!important;
padding:11px 9px 9px!important;
}
.tf-homepage .country-market-info{padding-right:6px!important}
.tf-homepage .country-market-name{font-size:13px!important}
.tf-homepage .country-market-benefits{gap:6px 4px!important}
.tf-homepage .country-market-benefits>span{grid-template-columns:20px minmax(0,1fr)!important;column-gap:4px!important}
.tf-homepage .country-benefit-icon{width:20px!important;height:20px!important}
.tf-homepage .country-benefit-icon svg{width:11px!important;height:11px!important}
}
/* Tablet: 2 columns to keep reference UI readable */
@media(min-width:700px) and (max-width:1099px){
.tf-homepage .country-network-premium .country-market-rail{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:9px!important;
}
.tf-homepage .country-network-premium .country-market-card{
height:286px!important;
min-height:286px!important;
max-height:286px!important;
}
}
/* Mobile: one premium card per swipe viewport, like a destination carousel */
@media(max-width:699px){
.tf-homepage .country-network-premium .country-market-rail{
display:flex!important;
gap:8px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .country-network-premium .country-market-rail::-webkit-scrollbar{display:none!important}
.tf-homepage .country-network-premium .country-market-card{
flex:0 0 88vw!important;
width:88vw!important;
min-width:88vw!important;
max-width:88vw!important;
height:300px!important;
min-height:300px!important;
max-height:300px!important;
scroll-snap-align:start!important;
border-radius:16px!important;
}
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:150px!important;
height:150px!important;
min-height:150px!important;
max-height:150px!important;
}
.tf-homepage .country-network-premium .country-market-body.country-market-body-premium{
grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr)!important;
gap:8px!important;
padding:12px 10px 10px!important;
}
.tf-homepage .country-market-name{font-size:15px!important}
.tf-homepage .country-market-copy{font-size:5.8px!important}
.tf-homepage .country-market-benefits{gap:7px 5px!important}
.tf-homepage .country-market-benefits>span{grid-template-columns:21px minmax(0,1fr)!important}
.tf-homepage .country-benefit-icon{width:21px!important;height:21px!important}
.tf-homepage .country-benefit-icon svg{width:11px!important;height:11px!important}
}
@media(max-width:380px){
.tf-homepage .country-network-premium .country-market-card{
flex-basis:91vw!important;
width:91vw!important;
min-width:91vw!important;
max-width:91vw!important;
}
}
/* =========================================================
SOURCE: country-card-readability-18.4.109.css
SHA256: 15f9b57ae3d009d94b3a89e1a253b976628c86ec8982e82315d9baea78c36883
Production order preserved.
========================================================= */
/* TradesFolks 18.4.109 — Country Card Readability + Compactness
Fixes tiny benefit text and removes excess white space without changing card concept. */
.tf-homepage .country-network-premium .country-market-card{
height:252px!important;
min-height:252px!important;
max-height:252px!important;
}
/* keep strong visual image, slightly tighter */
.tf-homepage .country-network-premium .country-market-visual{
flex:0 0 132px!important;
height:132px!important;
min-height:132px!important;
max-height:132px!important;
}
/* compact lower area */
.tf-homepage .country-network-premium .country-market-body.country-market-body-premium{
grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)!important;
gap:9px!important;
padding:10px 11px 9px!important;
align-items:center!important;
}
/* left info */
.tf-homepage .country-market-info{
padding-right:8px!important;
}
.tf-homepage .country-market-source{
margin-bottom:4px!important;
font-size:6.5px!important;
line-height:1.05!important;
}
.tf-homepage .country-market-name{
font-size:17px!important;
line-height:1.02!important;
}
.tf-homepage .country-market-copy{
margin:5px 0 6px!important;
font-size:7.2px!important;
line-height:1.28!important;
-webkit-line-clamp:2!important;
}
/* supplier pill: more readable and tighter */
.tf-homepage .country-market-count{
min-height:29px!important;
height:29px!important;
padding:4px 7px!important;
}
.tf-homepage .country-market-count>svg{
flex-basis:18px!important;
width:18px!important;
height:18px!important;
}
.tf-homepage .country-market-count>b{
font-size:8.6px!important;
}
.tf-homepage .country-market-count>span{
font-size:6.2px!important;
}
.tf-homepage .country-market-count>i{
font-size:10px!important;
}
/* right benefits: larger and readable */
.tf-homepage .country-market-benefits{
gap:9px 7px!important;
}
.tf-homepage .country-market-benefits>span{
grid-template-columns:27px minmax(0,1fr)!important;
column-gap:6px!important;
}
.tf-homepage .country-benefit-icon{
width:27px!important;
height:27px!important;
}
.tf-homepage .country-benefit-icon svg{
width:15px!important;
height:15px!important;
}
.tf-homepage .country-market-benefits b{
font-size:6.8px!important;
line-height:1.1!important;
}
.tf-homepage .country-market-benefits small{
font-size:5.6px!important;
line-height:1.12!important;
}
/* avoid clipping on narrower desktop */
@media(min-width:1100px) and (max-width:1399px){
.tf-homepage .country-network-premium .country-market-card{
height:244px!important;
min-height:244px!important;
max-height:244px!important;
}
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:124px!important;
height:124px!important;
min-height:124px!important;
max-height:124px!important;
}
.tf-homepage .country-market-name{
font-size:15px!important;
}
.tf-homepage .country-market-copy{
font-size:6.5px!important;
}
.tf-homepage .country-market-benefits>span{
grid-template-columns:24px minmax(0,1fr)!important;
column-gap:5px!important;
}
.tf-homepage .country-benefit-icon{
width:24px!important;
height:24px!important;
}
.tf-homepage .country-market-benefits b{
font-size:6.1px!important;
}
.tf-homepage .country-market-benefits small{
font-size:5px!important;
}
}
/* tablet */
@media(min-width:700px) and (max-width:1099px){
.tf-homepage .country-network-premium .country-market-card{
height:252px!important;
min-height:252px!important;
max-height:252px!important;
}
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:130px!important;
height:130px!important;
min-height:130px!important;
max-height:130px!important;
}
.tf-homepage .country-market-name{
font-size:16px!important;
}
.tf-homepage .country-market-benefits b{
font-size:6.5px!important;
}
.tf-homepage .country-market-benefits small{
font-size:5.3px!important;
}
}
/* mobile: one swipe card, compact + readable */
@media(max-width:699px){
.tf-homepage .country-network-premium .country-market-card{
height:260px!important;
min-height:260px!important;
max-height:260px!important;
}
.tf-homepage .country-network-premium .country-market-visual{
flex-basis:132px!important;
height:132px!important;
min-height:132px!important;
max-height:132px!important;
}
.tf-homepage .country-network-premium .country-market-body.country-market-body-premium{
gap:7px!important;
padding:9px 9px 8px!important;
}
.tf-homepage .country-market-source{
font-size:6px!important;
}
.tf-homepage .country-market-name{
font-size:15.5px!important;
}
.tf-homepage .country-market-copy{
font-size:6.5px!important;
}
.tf-homepage .country-market-count{
min-height:27px!important;
height:27px!important;
}
.tf-homepage .country-market-count>b{
font-size:8px!important;
}
.tf-homepage .country-market-count>span{
font-size:5.7px!important;
}
.tf-homepage .country-market-benefits{
gap:7px 5px!important;
}
.tf-homepage .country-market-benefits>span{
grid-template-columns:23px minmax(0,1fr)!important;
column-gap:4px!important;
}
.tf-homepage .country-benefit-icon{
width:23px!important;
height:23px!important;
}
.tf-homepage .country-benefit-icon svg{
width:12px!important;
height:12px!important;
}
.tf-homepage .country-market-benefits b{
font-size:6px!important;
}
.tf-homepage .country-market-benefits small{
font-size:4.9px!important;
}
}
/* =========================================================
SOURCE: premium-global-sourcing-hero-18.4.110.css
SHA256: 546894e5d070536db1dd83b9ea9c7d437bc96aeb4ee313ac472e7b81b79e91fc
Production order preserved.
========================================================= */
/* TradesFolks 18.4.110 — Premium Global Sourcing Hero
CSS-only visual upgrade. Existing hero markup/data/search/slider behavior is preserved. */
/* hero outer shell / common current variants */
.tf-homepage [class*="hero"]{
box-sizing:border-box;
}
.tf-homepage .hero,
.tf-homepage .hero-slider,
.tf-homepage .homepage-hero,
.tf-homepage .home-hero,
.tf-homepage .tf-hero,
.tf-homepage .tf-home-hero{
position:relative!important;
isolation:isolate!important;
}
/* visible slide/frame */
.tf-homepage .hero-slide,
.tf-homepage .hero-slider-slide,
.tf-homepage .swiper-slide.hero-slide,
.tf-homepage .tf-hero-slide,
.tf-homepage .tf-home-hero-slide{
position:relative!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.14)!important;
border-radius:22px!important;
background:#071d38!important;
box-shadow:0 18px 48px rgba(4,18,47,.16)!important;
}
/* image rendering */
.tf-homepage .hero-slide img,
.tf-homepage .hero-slider-slide img,
.tf-homepage .tf-hero-slide img,
.tf-homepage .tf-home-hero-slide img,
.tf-homepage .hero-background img,
.tf-homepage .hero-bg img{
width:100%!important;
height:100%!important;
max-width:none!important;
object-fit:cover!important;
object-position:center!important;
transform:none!important;
}
/* layered cinematic overlay */
.tf-homepage .hero-slide:before,
.tf-homepage .hero-slider-slide:before,
.tf-homepage .tf-hero-slide:before,
.tf-homepage .tf-home-hero-slide:before{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
pointer-events:none!important;
background:
linear-gradient(90deg,rgba(3,20,42,.92) 0%,rgba(3,20,42,.78) 25%,rgba(3,20,42,.40) 49%,rgba(3,20,42,.10) 71%,rgba(3,20,42,.18) 100%),
linear-gradient(180deg,rgba(3,20,42,.04) 0%,rgba(3,20,42,.12) 65%,rgba(3,20,42,.48) 100%)!important;
}
.tf-homepage .hero-slide:after,
.tf-homepage .hero-slider-slide:after,
.tf-homepage .tf-hero-slide:after,
.tf-homepage .tf-home-hero-slide:after{
content:""!important;
position:absolute!important;
inset:0!important;
z-index:1!important;
pointer-events:none!important;
background:
radial-gradient(circle at 15% 18%,rgba(7,91,199,.18),transparent 24%),
radial-gradient(circle at 73% 68%,rgba(249,189,43,.10),transparent 21%)!important;
}
/* common content wrappers */
.tf-homepage .hero-content,
.tf-homepage .hero-copy,
.tf-homepage .hero-inner,
.tf-homepage .hero-caption,
.tf-homepage .hero-search-panel{
position:relative!important;
z-index:3!important;
}
/* verified/supplier badge variants */
.tf-homepage .hero-content .badge,
.tf-homepage .hero-content .eyebrow,
.tf-homepage .hero-copy .badge,
.tf-homepage .hero-kicker{
display:inline-flex!important;
align-items:center!important;
min-height:30px!important;
padding:0 12px!important;
border:1px solid rgba(249,189,43,.68)!important;
border-radius:999px!important;
background:rgba(4,22,48,.46)!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
color:#ffd35d!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.03)!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.055em!important;
}
/* headline */
.tf-homepage .hero h1,
.tf-homepage .hero-content h1,
.tf-homepage .hero-copy h1,
.tf-homepage .hero-content h2,
.tf-homepage .tf-home-hero h1{
max-width:640px!important;
margin:12px 0 8px!important;
color:#fff!important;
font-size:42px!important;
font-weight:950!important;
line-height:.98!important;
letter-spacing:-.045em!important;
text-shadow:0 4px 20px rgba(0,0,0,.20)!important;
}
/* descriptive copy */
.tf-homepage .hero-content p,
.tf-homepage .hero-copy p,
.tf-homepage .hero-description{
max-width:620px!important;
margin:0 0 12px!important;
color:rgba(255,255,255,.87)!important;
font-size:12px!important;
line-height:1.42!important;
}
/* Search container */
.tf-homepage .hero-search,
.tf-homepage .hero-search-form,
.tf-homepage .hero-searchbox,
.tf-homepage .hero-search-bar,
.tf-homepage form[class*="hero"][class*="search"]{
display:flex!important;
align-items:stretch!important;
width:min(650px,100%)!important;
min-height:54px!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.58)!important;
border-radius:15px!important;
background:rgba(255,255,255,.96)!important;
box-shadow:0 14px 32px rgba(4,18,47,.20)!important;
}
.tf-homepage .hero-search select,
.tf-homepage .hero-search input,
.tf-homepage .hero-search-form select,
.tf-homepage .hero-search-form input,
.tf-homepage .hero-searchbox select,
.tf-homepage .hero-searchbox input,
.tf-homepage .hero-search-bar select,
.tf-homepage .hero-search-bar input{
min-height:52px!important;
border:0!important;
border-radius:0!important;
background:transparent!important;
color:#0b2343!important;
box-shadow:none!important;
font-size:10px!important;
}
.tf-homepage .hero-search select,
.tf-homepage .hero-search-form select,
.tf-homepage .hero-searchbox select,
.tf-homepage .hero-search-bar select{
flex:0 0 138px!important;
border-right:1px solid #e5eaf0!important;
font-weight:850!important;
}
.tf-homepage .hero-search input,
.tf-homepage .hero-search-form input,
.tf-homepage .hero-searchbox input,
.tf-homepage .hero-search-bar input{
flex:1 1 auto!important;
min-width:0!important;
padding-inline:14px!important;
}
.tf-homepage .hero-search button,
.tf-homepage .hero-search-form button,
.tf-homepage .hero-searchbox button,
.tf-homepage .hero-search-bar button{
flex:0 0 132px!important;
min-height:52px!important;
border:0!important;
border-radius:0!important;
background:linear-gradient(180deg,#ffc93f 0%,#f9bd2b 100%)!important;
color:#0b2343!important;
box-shadow:none!important;
font-size:10px!important;
font-weight:950!important;
}
/* keyword chips */
.tf-homepage .hero-popular,
.tf-homepage .hero-keywords,
.tf-homepage .popular-searches{
display:flex!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:5px!important;
margin-top:8px!important;
color:rgba(255,255,255,.74)!important;
font-size:7px!important;
}
.tf-homepage .hero-popular a,
.tf-homepage .hero-keywords a,
.tf-homepage .popular-searches a{
display:inline-flex!important;
align-items:center!important;
min-height:25px!important;
padding:0 9px!important;
border:1px solid rgba(255,255,255,.28)!important;
border-radius:999px!important;
background:rgba(5,24,52,.34)!important;
backdrop-filter:blur(8px)!important;
color:#fff!important;
text-decoration:none!important;
font-size:6.7px!important;
}
/* CTA group */
.tf-homepage .hero-actions,
.tf-homepage .hero-cta-row{
display:flex!important;
gap:8px!important;
margin-top:10px!important;
}
.tf-homepage .hero-actions a,
.tf-homepage .hero-actions button,
.tf-homepage .hero-cta-row a,
.tf-homepage .hero-cta-row button{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:40px!important;
padding:0 14px!important;
border-radius:10px!important;
font-size:8px!important;
font-weight:900!important;
text-decoration:none!important;
}
/* stats / metrics */
.tf-homepage .hero-stats,
.tf-homepage .hero-metrics,
.tf-homepage .hero-stat-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:min(630px,100%)!important;
margin-top:12px!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.22)!important;
border-radius:14px!important;
background:rgba(5,24,52,.36)!important;
backdrop-filter:blur(10px)!important;
-webkit-backdrop-filter:blur(10px)!important;
box-shadow:0 10px 24px rgba(4,18,47,.13)!important;
}
.tf-homepage .hero-stats>*,
.tf-homepage .hero-metrics>*,
.tf-homepage .hero-stat-grid>*{
min-height:58px!important;
padding:10px 14px!important;
border-right:1px solid rgba(255,255,255,.16)!important;
}
.tf-homepage .hero-stats>*:last-child,
.tf-homepage .hero-metrics>*:last-child,
.tf-homepage .hero-stat-grid>*:last-child{
border-right:0!important;
}
.tf-homepage .hero-stats strong,
.tf-homepage .hero-metrics strong,
.tf-homepage .hero-stat-grid strong{
display:block!important;
color:#fff!important;
font-size:16px!important;
font-weight:950!important;
line-height:1!important;
}
.tf-homepage .hero-stats span,
.tf-homepage .hero-stats small,
.tf-homepage .hero-metrics span,
.tf-homepage .hero-metrics small,
.tf-homepage .hero-stat-grid span,
.tf-homepage .hero-stat-grid small{
display:block!important;
margin-top:5px!important;
color:rgba(255,255,255,.73)!important;
font-size:6.5px!important;
}
/* Slider arrows */
.tf-homepage .hero-slider .swiper-button-prev,
.tf-homepage .hero-slider .swiper-button-next,
.tf-homepage .hero-prev,
.tf-homepage .hero-next,
.tf-homepage .hero-arrow{
width:38px!important;
height:38px!important;
border:1px solid rgba(255,255,255,.36)!important;
border-radius:50%!important;
background:rgba(5,24,52,.58)!important;
backdrop-filter:blur(8px)!important;
color:#fff!important;
box-shadow:0 6px 16px rgba(4,18,47,.18)!important;
}
/* Dots */
.tf-homepage .hero-slider .swiper-pagination-bullet,
.tf-homepage .hero-dots button,
.tf-homepage .hero-dots span{
width:7px!important;
height:7px!important;
border-radius:999px!important;
background:rgba(255,255,255,.58)!important;
opacity:1!important;
}
.tf-homepage .hero-slider .swiper-pagination-bullet-active,
.tf-homepage .hero-dots .active{
width:22px!important;
background:#f9bd2b!important;
}
/* bottom trust strip */
.tf-homepage .hero-trust-strip,
.tf-homepage .hero-bottom-strip,
.tf-homepage .hero-usps,
.tf-homepage .hero-benefits{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex-wrap:wrap!important;
gap:16px!important;
min-height:42px!important;
margin-top:0!important;
padding:8px 14px!important;
border:1px solid #dfe7f0!important;
border-top:0!important;
border-radius:0 0 18px 18px!important;
background:#fff!important;
color:#38506d!important;
box-shadow:0 7px 18px rgba(7,31,63,.035)!important;
font-size:6.8px!important;
font-weight:800!important;
}
/* desktop height */
@media(min-width:1200px){
.tf-homepage .hero-slide,
.tf-homepage .hero-slider-slide,
.tf-homepage .tf-hero-slide,
.tf-homepage .tf-home-hero-slide{
min-height:510px!important;
max-height:560px!important;
}
}
/* mobile */
@media(max-width:699px){
.tf-homepage .hero-slide,
.tf-homepage .hero-slider-slide,
.tf-homepage .tf-hero-slide,
.tf-homepage .tf-home-hero-slide{
min-height:500px!important;
border-radius:16px!important;
}
.tf-homepage .hero-slide:before,
.tf-homepage .hero-slider-slide:before,
.tf-homepage .tf-hero-slide:before,
.tf-homepage .tf-home-hero-slide:before{
background:linear-gradient(180deg,rgba(3,20,42,.50) 0%,rgba(3,20,42,.80) 52%,rgba(3,20,42,.94) 100%)!important;
}
.tf-homepage .hero h1,
.tf-homepage .hero-content h1,
.tf-homepage .hero-copy h1,
.tf-homepage .hero-content h2,
.tf-homepage .tf-home-hero h1{
max-width:100%!important;
font-size:29px!important;
line-height:1!important;
}
.tf-homepage .hero-content p,
.tf-homepage .hero-copy p,
.tf-homepage .hero-description{
font-size:9px!important;
line-height:1.35!important;
}
.tf-homepage .hero-search,
.tf-homepage .hero-search-form,
.tf-homepage .hero-searchbox,
.tf-homepage .hero-search-bar{
min-height:46px!important;
border-radius:12px!important;
}
.tf-homepage .hero-search select,
.tf-homepage .hero-search-form select,
.tf-homepage .hero-searchbox select,
.tf-homepage .hero-search-bar select{
flex-basis:92px!important;
min-height:44px!important;
font-size:8px!important;
}
.tf-homepage .hero-search input,
.tf-homepage .hero-search-form input,
.tf-homepage .hero-searchbox input,
.tf-homepage .hero-search-bar input{
min-height:44px!important;
padding-inline:9px!important;
font-size:8px!important;
}
.tf-homepage .hero-search button,
.tf-homepage .hero-search-form button,
.tf-homepage .hero-searchbox button,
.tf-homepage .hero-search-bar button{
flex-basis:78px!important;
min-height:44px!important;
font-size:8px!important;
}
.tf-homepage .hero-stats,
.tf-homepage .hero-metrics,
.tf-homepage .hero-stat-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
.tf-homepage .hero-stats>*,
.tf-homepage .hero-metrics>*,
.tf-homepage .hero-stat-grid>*{
min-height:50px!important;
padding:8px 7px!important;
}
.tf-homepage .hero-stats strong,
.tf-homepage .hero-metrics strong,
.tf-homepage .hero-stat-grid strong{
font-size:12px!important;
}
.tf-homepage .hero-trust-strip,
.tf-homepage .hero-bottom-strip,
.tf-homepage .hero-usps,
.tf-homepage .hero-benefits{
gap:8px 12px!important;
min-height:38px!important;
padding:7px 8px!important;
font-size:5.7px!important;
}
}
/* =========================================================
SOURCE: exact-hero-slider-fix-18.4.111.css
SHA256: 0f0a093d461e136a9350badaf2337d11c0a2186ddede948ae8beba4480bc1a8d
Production order preserved.
========================================================= */
/* TradesFolks 18.4.111 — Exact Hero Slider Geometry Fix
Targets the REAL homepage hero classes.
Desktop banner geometry = 32:9 (recommended asset 1920x540).
No stretching. Content cannot resize the slider. */
/* ===== REAL HERO ROOT ===== */
.tf-homepage .tf-home-v3-hero{
position:relative!important;
isolation:isolate!important;
width:100%!important;
aspect-ratio:32 / 9!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
border:1px solid #d7e2ee!important;
border-radius:20px!important;
background:#071d38!important;
box-shadow:0 14px 38px rgba(5,24,52,.13)!important;
contain:layout paint!important;
}
/* Media, slide and overlay must exactly fill hero */
.tf-homepage .tf-home-v3-media,
.tf-homepage .tf-home-v3-slide,
.tf-homepage .tf-home-v3-overlay{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
min-width:100%!important;
min-height:100%!important;
max-width:100%!important;
max-height:100%!important;
margin:0!important;
padding:0!important;
}
/* Background artwork: never stretch */
.tf-homepage .tf-home-v3-media{
z-index:0!important;
overflow:hidden!important;
border-radius:inherit!important;
}
.tf-homepage .tf-home-v3-slide{
z-index:0!important;
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:center center!important;
transform:none!important;
transition:opacity .35s ease!important;
}
.tf-homepage .tf-home-v3-slide img,
.tf-homepage .tf-home-v3-media img{
display:block!important;
width:100%!important;
height:100%!important;
min-width:100%!important;
min-height:100%!important;
object-fit:cover!important;
object-position:center center!important;
aspect-ratio:auto!important;
transform:none!important;
}
/* Premium overlay with readable left content */
.tf-homepage .tf-home-v3-overlay{
z-index:1!important;
pointer-events:none!important;
background:
linear-gradient(90deg,
rgba(3,18,39,.94) 0%,
rgba(3,18,39,.83) 25%,
rgba(3,18,39,.52) 44%,
rgba(3,18,39,.15) 67%,
rgba(3,18,39,.10) 100%),
linear-gradient(180deg,
rgba(3,18,39,.03) 0%,
rgba(3,18,39,.10) 68%,
rgba(3,18,39,.42) 100%)!important;
}
/* Content layer fills hero but cannot alter hero size */
.tf-homepage .tf-home-v3-inner{
position:relative!important;
z-index:2!important;
display:flex!important;
align-items:center!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
}
/* Left content: compact, premium, no overflow */
.tf-homepage .tf-home-v3-copy{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
width:min(640px,46%)!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
margin:0!important;
padding:24px 0 22px 48px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
/* Eyebrow */
.tf-homepage .tf-home-v3-eyebrow{
display:inline-flex!important;
align-items:center!important;
align-self:flex-start!important;
min-height:29px!important;
margin:0!important;
padding:0 12px!important;
border:1px solid rgba(249,189,43,.72)!important;
border-radius:999px!important;
background:rgba(5,24,52,.40)!important;
color:#ffd157!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.06em!important;
backdrop-filter:blur(8px)!important;
}
/* Headline */
.tf-homepage .tf-home-v3-copy h1{
display:-webkit-box!important;
max-width:600px!important;
max-height:104px!important;
margin:12px 0 8px!important;
overflow:hidden!important;
color:#fff!important;
font-size:clamp(34px,2.75vw,52px)!important;
font-weight:950!important;
line-height:1!important;
letter-spacing:-.045em!important;
text-shadow:0 3px 16px rgba(0,0,0,.18)!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
/* Intro copy */
.tf-homepage .tf-home-v3-copy>p{
display:-webkit-box!important;
max-width:570px!important;
max-height:48px!important;
margin:0 0 10px!important;
overflow:hidden!important;
color:rgba(255,255,255,.84)!important;
font-size:10px!important;
line-height:1.42!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
/* Search row */
.tf-homepage .tf-home-v3-search{
display:flex!important;
align-items:stretch!important;
width:min(620px,100%)!important;
min-height:48px!important;
max-height:48px!important;
margin:0!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.55)!important;
border-radius:13px!important;
background:#fff!important;
box-shadow:0 10px 26px rgba(0,0,0,.16)!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
min-height:46px!important;
max-height:46px!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
.tf-homepage .tf-home-v3-search select{
flex:0 0 135px!important;
border-right:1px solid #e3e9ef!important;
background:#fff!important;
color:#0b2343!important;
font-size:8px!important;
font-weight:850!important;
}
.tf-homepage .tf-home-v3-search input{
flex:1 1 auto!important;
min-width:0!important;
padding:0 13px!important;
background:#fff!important;
color:#0b2343!important;
font-size:8px!important;
}
.tf-homepage .tf-home-v3-search button{
flex:0 0 116px!important;
background:linear-gradient(180deg,#ffc83b,#f9bd2b)!important;
color:#0b2343!important;
font-size:8px!important;
font-weight:950!important;
}
/* Popular chips */
.tf-homepage .tf-home-v3-popular{
display:flex!important;
align-items:center!important;
flex-wrap:nowrap!important;
gap:4px!important;
width:min(610px,100%)!important;
min-height:26px!important;
margin:6px 0 0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
color:rgba(255,255,255,.70)!important;
font-size:6.5px!important;
}
.tf-homepage .tf-home-v3-popular::-webkit-scrollbar{display:none!important}
.tf-homepage .tf-home-v3-popular a{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
min-height:23px!important;
padding:0 8px!important;
border:1px solid rgba(255,255,255,.30)!important;
border-radius:999px!important;
background:rgba(5,24,52,.30)!important;
color:#fff!important;
font-size:6.2px!important;
text-decoration:none!important;
white-space:nowrap!important;
}
/* CTA buttons */
.tf-homepage .tf-home-v3-actions{
display:flex!important;
align-items:center!important;
gap:7px!important;
width:min(520px,100%)!important;
min-height:36px!important;
margin:7px 0 0!important;
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:36px!important;
padding:0 12px!important;
border-radius:9px!important;
font-size:7px!important;
font-weight:900!important;
text-decoration:none!important;
}
/* Stats */
.tf-homepage .tf-home-v3-stats{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:min(510px,100%)!important;
min-height:58px!important;
max-height:58px!important;
margin:8px 0 0!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.24)!important;
border-radius:12px!important;
background:rgba(5,24,52,.38)!important;
backdrop-filter:blur(8px)!important;
}
.tf-homepage .tf-home-v3-stats>*{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
min-width:0!important;
padding:8px 12px!important;
border-right:1px solid rgba(255,255,255,.16)!important;
}
.tf-homepage .tf-home-v3-stats>*:last-child{border-right:0!important}
.tf-homepage .tf-home-v3-stats strong{
color:#fff!important;
font-size:14px!important;
font-weight:950!important;
line-height:1!important;
}
.tf-homepage .tf-home-v3-stats span,
.tf-homepage .tf-home-v3-stats small{
margin-top:4px!important;
color:rgba(255,255,255,.72)!important;
font-size:5.8px!important;
line-height:1.1!important;
}
/* Slider dots/arrows */
.tf-homepage .tf-home-v3-hero [class*="prev"],
.tf-homepage .tf-home-v3-hero [class*="next"]{
z-index:5!important;
}
.tf-homepage .tf-home-v3-hero button[class*="prev"],
.tf-homepage .tf-home-v3-hero button[class*="next"],
.tf-homepage .tf-home-v3-hero .swiper-button-prev,
.tf-homepage .tf-home-v3-hero .swiper-button-next{
width:36px!important;
height:36px!important;
border:1px solid rgba(255,255,255,.34)!important;
border-radius:50%!important;
background:rgba(5,24,52,.54)!important;
color:#fff!important;
backdrop-filter:blur(8px)!important;
}
.tf-homepage .tf-home-v3-hero .swiper-pagination-bullet{
width:6px!important;
height:6px!important;
background:rgba(255,255,255,.58)!important;
opacity:1!important;
}
.tf-homepage .tf-home-v3-hero .swiper-pagination-bullet-active{
width:22px!important;
border-radius:999px!important;
background:#f9bd2b!important;
}
/* ===== TABLET ===== */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-home-v3-hero{
aspect-ratio:auto!important;
height:390px!important;
min-height:390px!important;
max-height:390px!important;
border-radius:18px!important;
}
.tf-homepage .tf-home-v3-copy{
width:58%!important;
padding:20px 0 18px 28px!important;
}
.tf-homepage .tf-home-v3-copy h1{
font-size:32px!important;
max-height:68px!important;
}
.tf-homepage .tf-home-v3-search{min-height:45px!important;max-height:45px!important}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
min-height:43px!important;
max-height:43px!important;
}
}
/* ===== MOBILE ===== */
@media(max-width:699px){
.tf-homepage .tf-home-v3-hero{
aspect-ratio:auto!important;
height:430px!important;
min-height:430px!important;
max-height:430px!important;
border-radius:15px!important;
}
.tf-homepage .tf-home-v3-slide{
background-position:center center!important;
}
.tf-homepage .tf-home-v3-overlay{
background:
linear-gradient(180deg,
rgba(3,18,39,.18) 0%,
rgba(3,18,39,.52) 31%,
rgba(3,18,39,.88) 59%,
rgba(3,18,39,.96) 100%)!important;
}
.tf-homepage .tf-home-v3-inner{
align-items:flex-end!important;
}
.tf-homepage .tf-home-v3-copy{
justify-content:flex-end!important;
width:100%!important;
height:auto!important;
max-height:100%!important;
padding:16px 12px 14px!important;
}
.tf-homepage .tf-home-v3-eyebrow{
min-height:25px!important;
padding:0 9px!important;
font-size:6px!important;
}
.tf-homepage .tf-home-v3-copy h1{
max-width:100%!important;
max-height:58px!important;
margin:8px 0 6px!important;
font-size:27px!important;
line-height:1!important;
-webkit-line-clamp:2!important;
}
.tf-homepage .tf-home-v3-copy>p{
max-width:100%!important;
max-height:34px!important;
margin-bottom:7px!important;
font-size:8px!important;
line-height:1.3!important;
-webkit-line-clamp:2!important;
}
.tf-homepage .tf-home-v3-search{
width:100%!important;
min-height:43px!important;
max-height:43px!important;
border-radius:10px!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
min-height:41px!important;
max-height:41px!important;
font-size:7px!important;
}
.tf-homepage .tf-home-v3-search select{flex-basis:82px!important}
.tf-homepage .tf-home-v3-search button{flex-basis:70px!important}
.tf-homepage .tf-home-v3-popular{
min-height:23px!important;
margin-top:5px!important;
}
.tf-homepage .tf-home-v3-actions{
min-height:32px!important;
margin-top:5px!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
min-height:32px!important;
padding:0 9px!important;
font-size:6.3px!important;
}
.tf-homepage .tf-home-v3-stats{
min-height:48px!important;
max-height:48px!important;
margin-top:6px!important;
}
.tf-homepage .tf-home-v3-stats>*{padding:6px!important}
.tf-homepage .tf-home-v3-stats strong{font-size:11px!important}
.tf-homepage .tf-home-v3-stats span,
.tf-homepage .tf-home-v3-stats small{font-size:5px!important}
}
/* Small phone */
@media(max-width:390px){
.tf-homepage .tf-home-v3-hero{
height:410px!important;
min-height:410px!important;
max-height:410px!important;
}
.tf-homepage .tf-home-v3-copy h1{font-size:24px!important}
}
/* =========================================================
SOURCE: homepage-unified-gutters-mobile-categories-18.4.112.css
SHA256: 42bc245b3106798950630274e9268ff85ce3142921a59f00d1cfa0a109f16877
Production order preserved.
========================================================= */
/* TradesFolks 18.4.112 — Homepage Unified Margins + Mobile Categories Fix
Goal:
1) Desktop homepage sections align to the same left/right gutter as the hero.
2) Explore Industries mobile view becomes compact, readable and overflow-safe. */
/* =========================================================
DESKTOP HOMEPAGE — SAME HORIZONTAL GUTTER AS HERO
Hero screenshot target ≈ 28px left + right.
========================================================= */
@media(min-width:1024px){
/* Generic homepage section shells */
.tf-homepage main > section > .shell,
.tf-homepage .section > .shell,
.tf-homepage section.section > .shell,
.tf-homepage .marketplace-products > .shell,
.tf-homepage .trending-products > .shell,
.tf-homepage .tf-home-v3-industries > .shell,
.tf-homepage .country-network-premium > .shell,
.tf-homepage .trade-advantage > .shell,
.tf-homepage .homepage-section > .shell{
width:calc(100% - 56px)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
padding-left:0!important;
padding-right:0!important;
box-sizing:border-box!important;
}
/* Hero itself uses same exact gutter */
.tf-homepage .tf-home-v3-hero,
.tf-homepage .home-hero,
.tf-homepage .hero-slider{
width:calc(100% - 56px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Some full-width homepage modules don't have .shell */
.tf-homepage .marketplace-products,
.tf-homepage .trending-products,
.tf-homepage .tf-home-v3-industries,
.tf-homepage .country-network-premium,
.tf-homepage .trade-advantage{
box-sizing:border-box!important;
}
}
/* Wide screens: keep consistent edge spacing instead of huge max-width gutters */
@media(min-width:1600px){
.tf-homepage main > section > .shell,
.tf-homepage .section > .shell,
.tf-homepage section.section > .shell,
.tf-homepage .marketplace-products > .shell,
.tf-homepage .trending-products > .shell,
.tf-homepage .tf-home-v3-industries > .shell,
.tf-homepage .country-network-premium > .shell,
.tf-homepage .trade-advantage > .shell,
.tf-homepage .homepage-section > .shell,
.tf-homepage .tf-home-v3-hero{
width:calc(100% - 56px)!important;
}
}
/* =========================================================
EXPLORE INDUSTRIES / CATEGORIES — MOBILE FIX
========================================================= */
@media(max-width:699px){
/* Section itself */
.tf-homepage .tf-home-v3-industries{
width:100%!important;
margin:0!important;
padding:11px 0 13px!important;
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-industries > .shell{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0 10px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
/* Header becomes clean two-row layout; CTA no longer crushes title */
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
grid-template-rows:auto auto!important;
align-items:end!important;
gap:4px 8px!important;
width:100%!important;
margin:0 0 9px!important;
padding:0!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div{
min-width:0!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div > span{
margin-bottom:3px!important;
font-size:6px!important;
letter-spacing:.09em!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
max-width:100%!important;
margin:0!important;
font-size:20px!important;
line-height:1.03!important;
letter-spacing:-.035em!important;
white-space:normal!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head p{
margin:3px 0 0!important;
font-size:6.4px!important;
line-height:1.3!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
align-self:center!important;
min-height:30px!important;
height:30px!important;
max-width:146px!important;
padding:0 10px!important;
border-radius:999px!important;
font-size:5.8px!important;
white-space:nowrap!important;
}
/* True 2-column compact grid */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-auto-flow:row!important;
gap:8px!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
transform:none!important;
}
/* Compact app-like category card */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
display:flex!important;
flex-direction:column!important;
width:100%!important;
min-width:0!important;
max-width:100%!important;
height:148px!important;
min-height:148px!important;
max-height:148px!important;
margin:0!important;
overflow:hidden!important;
border-radius:13px!important;
box-sizing:border-box!important;
}
/* Smaller product image zone */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 112px!important;
width:100%!important;
height:112px!important;
min-height:112px!important;
max-height:112px!important;
padding:7px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
transform:none!important;
}
/* Clean category title strip */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex:0 0 36px!important;
width:100%!important;
height:36px!important;
min-height:36px!important;
max-height:36px!important;
margin:0!important;
padding:4px 6px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body > strong{
display:block!important;
width:100%!important;
margin:0!important;
overflow:hidden!important;
font-size:7.3px!important;
font-weight:850!important;
line-height:1.15!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* popular subcategories become lightweight horizontal pills */
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories{
display:block!important;
width:100%!important;
margin-top:9px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > strong{
display:block!important;
margin:0 0 5px!important;
font-size:6px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div{
display:flex!important;
gap:5px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div::-webkit-scrollbar{
display:none!important;
}
}
/* Very small phones */
@media(max-width:380px){
.tf-homepage .tf-home-v3-industries > .shell{
padding-inline:7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
gap:6px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
height:138px!important;
min-height:138px!important;
max-height:138px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
flex-basis:104px!important;
height:104px!important;
min-height:104px!important;
max-height:104px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
flex-basis:34px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
font-size:18px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
max-width:124px!important;
padding-inline:8px!important;
font-size:5.3px!important;
}
}
/* =========================================================
SOURCE: hero-slider-production-fix-18.4.113.css
SHA256: 839ba170bd5c9b59ca10d4f4253ed12d9987d39bd8f12be2db0df649ec439bbb
Production order preserved.
========================================================= */
/* TradesFolks 18.4.113 — Hero Slider Production Fix
Scope: fix current hero only. Preserve current width, current markup and content.
Images preserve aspect ratio and are never stretched. */
/* ==========================
HERO FRAME / MEDIA
========================== */
.tf-homepage .tf-home-v3{
padding-top:0!important;
}
.tf-homepage .tf-home-v3-hero{
position:relative!important;
isolation:isolate!important;
width:calc(100% - 56px)!important;
aspect-ratio:30 / 9!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
margin:0 auto!important;
overflow:hidden!important;
border:1px solid #d7e2ee!important;
border-radius:20px!important;
background:#071d38!important;
box-shadow:0 12px 32px rgba(8,31,61,.10)!important;
}
/* Slider image is a CSS background. `cover` preserves its natural proportions:
no width/height stretching is possible. */
.tf-homepage .tf-home-v3-media,
.tf-homepage .tf-home-v3-slide{
position:absolute!important;
inset:0!important;
width:100%!important;
height:100%!important;
margin:0!important;
padding:0!important;
}
.tf-homepage .tf-home-v3-media{
z-index:0!important;
overflow:hidden!important;
border-radius:inherit!important;
}
.tf-homepage .tf-home-v3-slide{
opacity:0!important;
background-repeat:no-repeat!important;
background-size:cover!important;
background-position:center center!important;
transform:none!important;
transition:opacity .42s ease!important;
}
.tf-homepage .tf-home-v3-slide.is-active{
opacity:1!important;
}
/* readable left-side cinematic overlay, but do not wash out artwork */
.tf-homepage .tf-home-v3-overlay{
position:absolute!important;
inset:0!important;
z-index:1!important;
width:100%!important;
height:100%!important;
pointer-events:none!important;
background:
linear-gradient(90deg,
rgba(4,20,42,.88) 0%,
rgba(4,20,42,.75) 24%,
rgba(4,20,42,.40) 44%,
rgba(4,20,42,.08) 68%,
rgba(4,20,42,.04) 100%),
linear-gradient(180deg,
rgba(4,20,42,.02) 0%,
rgba(4,20,42,.04) 68%,
rgba(4,20,42,.24) 100%)!important;
}
/* ==========================
CONTENT — COMPACT & BALANCED
========================== */
.tf-homepage .tf-home-v3-inner{
position:relative!important;
z-index:2!important;
display:flex!important;
align-items:center!important;
width:100%!important;
height:100%!important;
min-height:0!important;
max-height:100%!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-copy{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
width:min(625px,45%)!important;
height:auto!important;
max-height:calc(100% - 28px)!important;
margin:0!important;
padding:18px 0 18px 48px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
/* Kicker */
.tf-homepage .tf-home-v3-eyebrow{
display:inline-flex!important;
align-items:center!important;
align-self:flex-start!important;
min-height:27px!important;
margin:0 0 9px!important;
padding:0 11px!important;
border:1px solid rgba(249,189,43,.70)!important;
border-radius:999px!important;
background:rgba(5,24,52,.32)!important;
color:#ffd35d!important;
backdrop-filter:blur(8px)!important;
font-size:6.4px!important;
font-weight:900!important;
letter-spacing:.055em!important;
}
/* Hero title */
.tf-homepage .tf-home-v3-copy h1{
display:-webkit-box!important;
width:100%!important;
max-width:590px!important;
max-height:100px!important;
margin:0 0 7px!important;
overflow:hidden!important;
color:#fff!important;
font-size:clamp(34px,2.45vw,48px)!important;
font-weight:950!important;
line-height:.99!important;
letter-spacing:-.045em!important;
text-shadow:0 3px 14px rgba(0,0,0,.18)!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
/* supporting description */
.tf-homepage .tf-home-v3-copy>p{
display:-webkit-box!important;
width:100%!important;
max-width:570px!important;
max-height:38px!important;
margin:0 0 9px!important;
overflow:hidden!important;
color:rgba(255,255,255,.86)!important;
font-size:8.4px!important;
font-weight:500!important;
line-height:1.36!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
/* Search */
.tf-homepage .tf-home-v3-search{
display:flex!important;
align-items:stretch!important;
width:min(610px,100%)!important;
height:47px!important;
min-height:47px!important;
max-height:47px!important;
margin:0!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.58)!important;
border-radius:12px!important;
background:#fff!important;
box-shadow:0 9px 22px rgba(0,0,0,.14)!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
height:45px!important;
min-height:45px!important;
max-height:45px!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
.tf-homepage .tf-home-v3-search select{
flex:0 0 132px!important;
padding:0 12px!important;
border-right:1px solid #e4e9ef!important;
background:#fff!important;
color:#0b2343!important;
font-size:7.4px!important;
font-weight:850!important;
}
.tf-homepage .tf-home-v3-search input{
flex:1 1 auto!important;
min-width:0!important;
padding:0 12px!important;
background:#fff!important;
color:#0b2343!important;
font-size:7.5px!important;
}
.tf-homepage .tf-home-v3-search button{
flex:0 0 112px!important;
background:linear-gradient(180deg,#ffc93f,#f9bd2b)!important;
color:#0b2343!important;
font-size:7.5px!important;
font-weight:950!important;
}
/* Popular pills — compact */
.tf-homepage .tf-home-v3-popular{
display:flex!important;
align-items:center!important;
flex-wrap:nowrap!important;
gap:4px!important;
width:min(590px,100%)!important;
min-height:22px!important;
margin:5px 0 0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
color:rgba(255,255,255,.72)!important;
font-size:5.7px!important;
}
.tf-homepage .tf-home-v3-popular::-webkit-scrollbar{display:none!important}
.tf-homepage .tf-home-v3-popular a{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
min-height:21px!important;
padding:0 7px!important;
border:1px solid rgba(255,255,255,.29)!important;
border-radius:999px!important;
background:rgba(5,24,52,.26)!important;
color:#fff!important;
font-size:5.5px!important;
text-decoration:none!important;
}
/* CTA row */
.tf-homepage .tf-home-v3-actions{
display:flex!important;
align-items:center!important;
gap:7px!important;
width:min(520px,100%)!important;
min-height:34px!important;
margin:6px 0 0!important;
}
.tf-homepage .tf-home-v3-actions a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:34px!important;
padding:0 11px!important;
border-radius:8px!important;
font-size:6.3px!important;
font-weight:900!important;
text-decoration:none!important;
}
/* Stats stay, but don't dominate the banner */
.tf-homepage .tf-home-v3-stats{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:min(500px,100%)!important;
height:55px!important;
min-height:55px!important;
max-height:55px!important;
margin:7px 0 0!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.22)!important;
border-radius:11px!important;
background:rgba(5,24,52,.32)!important;
backdrop-filter:blur(7px)!important;
}
.tf-homepage .tf-home-v3-stats>div{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
min-width:0!important;
padding:7px 11px!important;
border-right:1px solid rgba(255,255,255,.15)!important;
}
.tf-homepage .tf-home-v3-stats>div:last-child{border-right:0!important}
.tf-homepage .tf-home-v3-stats strong{
color:#fff!important;
font-size:13px!important;
font-weight:950!important;
line-height:1!important;
}
.tf-homepage .tf-home-v3-stats span{
margin-top:4px!important;
color:rgba(255,255,255,.72)!important;
font-size:5.2px!important;
line-height:1.05!important;
}
/* ==========================
SLIDER CONTROLS
========================== */
.tf-homepage .tf-home-v3-slider-ui{
position:absolute!important;
left:0!important;
right:0!important;
bottom:10px!important;
z-index:4!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:7px!important;
padding:0 14px!important;
pointer-events:none!important;
}
.tf-homepage .tf-home-v3-slider-ui>button{
pointer-events:auto!important;
display:grid!important;
place-items:center!important;
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
padding:0!important;
border:1px solid rgba(255,255,255,.34)!important;
border-radius:50%!important;
background:rgba(5,24,52,.55)!important;
color:#fff!important;
backdrop-filter:blur(7px)!important;
font-size:22px!important;
}
.tf-homepage .tf-home-v3-dots{
display:flex!important;
align-items:center!important;
gap:4px!important;
pointer-events:auto!important;
}
.tf-homepage .tf-home-v3-dots button{
width:6px!important;
height:6px!important;
min-width:6px!important;
min-height:6px!important;
padding:0!important;
border:0!important;
border-radius:999px!important;
background:rgba(255,255,255,.55)!important;
}
.tf-homepage .tf-home-v3-dots button.is-active{
width:21px!important;
background:#f9bd2b!important;
}
/* ==========================
TRUST STRIP + NEXT SECTION GAP
========================== */
.tf-homepage .tf-home-v3-trust{
width:calc(100% - 56px)!important;
min-height:42px!important;
margin:0 auto 16px!important;
padding:0!important;
overflow:hidden!important;
border:1px solid #dbe5ef!important;
border-top:0!important;
border-radius:0 0 16px 16px!important;
background:#fff!important;
box-shadow:0 5px 16px rgba(8,31,61,.035)!important;
}
.tf-homepage .tf-home-v3-trust>.shell{
display:flex!important;
align-items:center!important;
justify-content:center!important;
flex-wrap:wrap!important;
gap:10px!important;
width:100%!important;
min-height:42px!important;
margin:0!important;
padding:6px 12px!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-trust span{
color:#3d5874!important;
font-size:6px!important;
font-weight:800!important;
white-space:nowrap!important;
}
.tf-homepage .tf-home-v3-trust i{
width:4px!important;
height:4px!important;
border-radius:50%!important;
background:#f9bd2b!important;
}
/* Explicit separation so the blue industries section never looks attached */
.tf-homepage .tf-home-v3-industries{
margin-top:0!important;
border-top:0!important;
}
/* ==========================
TABLET
========================== */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-home-v3-hero{
width:calc(100% - 32px)!important;
aspect-ratio:auto!important;
height:390px!important;
min-height:390px!important;
max-height:390px!important;
border-radius:17px!important;
}
.tf-homepage .tf-home-v3-copy{
width:58%!important;
max-height:calc(100% - 20px)!important;
padding:16px 0 16px 28px!important;
}
.tf-homepage .tf-home-v3-copy h1{
font-size:31px!important;
max-height:66px!important;
}
.tf-homepage .tf-home-v3-trust{
width:calc(100% - 32px)!important;
margin-bottom:14px!important;
}
}
/* ==========================
MOBILE
========================== */
@media(max-width:699px){
.tf-homepage .tf-home-v3-hero{
width:calc(100% - 16px)!important;
aspect-ratio:auto!important;
height:420px!important;
min-height:420px!important;
max-height:420px!important;
border-radius:15px!important;
}
/* keep image proportions; use full-height crop instead of distortion */
.tf-homepage .tf-home-v3-slide{
background-size:cover!important;
background-position:center center!important;
}
.tf-homepage .tf-home-v3-overlay{
background:
linear-gradient(180deg,
rgba(4,20,42,.16) 0%,
rgba(4,20,42,.45) 38%,
rgba(4,20,42,.88) 68%,
rgba(4,20,42,.96) 100%)!important;
}
.tf-homepage .tf-home-v3-inner{
align-items:flex-end!important;
}
.tf-homepage .tf-home-v3-copy{
justify-content:flex-end!important;
width:100%!important;
height:auto!important;
max-height:100%!important;
padding:13px 12px 14px!important;
}
.tf-homepage .tf-home-v3-eyebrow{
min-height:23px!important;
margin-bottom:6px!important;
padding:0 9px!important;
font-size:5.5px!important;
}
.tf-homepage .tf-home-v3-copy h1{
max-width:100%!important;
max-height:57px!important;
margin-bottom:5px!important;
font-size:26px!important;
}
.tf-homepage .tf-home-v3-copy>p{
max-width:100%!important;
max-height:31px!important;
margin-bottom:6px!important;
font-size:7px!important;
line-height:1.28!important;
}
.tf-homepage .tf-home-v3-search{
height:42px!important;
min-height:42px!important;
max-height:42px!important;
border-radius:10px!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
height:40px!important;
min-height:40px!important;
max-height:40px!important;
font-size:6.7px!important;
}
.tf-homepage .tf-home-v3-search select{flex-basis:82px!important;padding-inline:8px!important}
.tf-homepage .tf-home-v3-search input{padding-inline:8px!important}
.tf-homepage .tf-home-v3-search button{flex-basis:66px!important}
.tf-homepage .tf-home-v3-popular{
margin-top:4px!important;
min-height:20px!important;
}
.tf-homepage .tf-home-v3-popular a{
min-height:19px!important;
padding-inline:6px!important;
font-size:5px!important;
}
.tf-homepage .tf-home-v3-actions{
min-height:31px!important;
margin-top:4px!important;
}
.tf-homepage .tf-home-v3-actions a{
min-height:31px!important;
padding-inline:8px!important;
font-size:5.8px!important;
}
.tf-homepage .tf-home-v3-stats{
height:46px!important;
min-height:46px!important;
max-height:46px!important;
margin-top:5px!important;
}
.tf-homepage .tf-home-v3-stats>div{padding:5px!important}
.tf-homepage .tf-home-v3-stats strong{font-size:10.5px!important}
.tf-homepage .tf-home-v3-stats span{font-size:4.6px!important}
.tf-homepage .tf-home-v3-slider-ui{
bottom:7px!important;
padding-inline:8px!important;
}
.tf-homepage .tf-home-v3-slider-ui>button{
width:29px!important;
height:29px!important;
min-width:29px!important;
min-height:29px!important;
font-size:18px!important;
}
.tf-homepage .tf-home-v3-trust{
width:calc(100% - 16px)!important;
min-height:38px!important;
margin:0 auto 12px!important;
border-radius:0 0 13px 13px!important;
}
.tf-homepage .tf-home-v3-trust>.shell{
justify-content:flex-start!important;
flex-wrap:nowrap!important;
min-height:38px!important;
padding:6px 9px!important;
overflow-x:auto!important;
scrollbar-width:none!important;
}
.tf-homepage .tf-home-v3-trust>.shell::-webkit-scrollbar{display:none!important}
.tf-homepage .tf-home-v3-trust span{
flex:0 0 auto!important;
font-size:5.4px!important;
}
}
/* =========================================================
SOURCE: hero-spacing-mobile-simplify-18.4.115.css
SHA256: f5e72e14428881bd88adf1b1d1fd7520c52a419023c661441fb3fb73c723b2f6
Production order preserved.
========================================================= */
/* TradesFolks 18.4.115 — Hero Spacing + Desktop Height + Mobile Simplification */
/* =========================
DESKTOP
========================= */
@media(min-width:1024px){
/* breathing room above hero */
.tf-homepage .tf-home-v3{
padding-top:14px!important;
}
.tf-homepage .tf-home-v3-hero{
/* slightly taller than 18.4.114, width unchanged */
aspect-ratio:28.5 / 9!important;
width:calc(100% - 56px)!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* =========================
TABLET
========================= */
@media(min-width:700px) and (max-width:1023px){
.tf-homepage .tf-home-v3{
padding-top:10px!important;
}
.tf-homepage .tf-home-v3-hero{
height:405px!important;
min-height:405px!important;
max-height:405px!important;
}
}
/* =========================
MOBILE
Keep only badge + heading.
Hide the rest of the heavy hero UI.
========================= */
@media(max-width:699px){
.tf-homepage .tf-home-v3{
padding-top:9px!important;
}
.tf-homepage .tf-home-v3-hero{
width:calc(100% - 16px)!important;
height:290px!important;
min-height:290px!important;
max-height:290px!important;
aspect-ratio:auto!important;
margin-left:auto!important;
margin-right:auto!important;
border-radius:15px!important;
}
/* Banner image remains proportional; no stretching */
.tf-homepage .tf-home-v3-slide{
background-size:cover!important;
background-position:center center!important;
}
/* Darker lower overlay for clean heading visibility */
.tf-homepage .tf-home-v3-overlay{
background:
linear-gradient(180deg,
rgba(4,20,42,.08) 0%,
rgba(4,20,42,.22) 38%,
rgba(4,20,42,.72) 100%)!important;
}
.tf-homepage .tf-home-v3-inner{
align-items:flex-end!important;
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-copy{
justify-content:flex-end!important;
width:100%!important;
height:auto!important;
max-height:100%!important;
padding:0 14px 18px!important;
overflow:hidden!important;
}
/* keep top badge */
.tf-homepage .tf-home-v3-eyebrow{
display:inline-flex!important;
min-height:22px!important;
margin:0 0 6px!important;
padding:0 9px!important;
font-size:5.4px!important;
}
/* keep main heading only */
.tf-homepage .tf-home-v3-copy h1{
display:-webkit-box!important;
max-width:92%!important;
max-height:64px!important;
margin:0!important;
overflow:hidden!important;
color:#fff!important;
font-size:28px!important;
font-weight:950!important;
line-height:1.02!important;
letter-spacing:-.04em!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
/* remove all remaining content on mobile */
.tf-homepage .tf-home-v3-copy>p,
.tf-homepage .tf-home-v3-search,
.tf-homepage .tf-home-v3-popular,
.tf-homepage .tf-home-v3-actions,
.tf-homepage .tf-home-v3-stats{
display:none!important;
}
/* keep slider controls compact */
.tf-homepage .tf-home-v3-slider-ui{
bottom:8px!important;
padding-inline:8px!important;
}
.tf-homepage .tf-home-v3-slider-ui>button{
width:28px!important;
height:28px!important;
min-width:28px!important;
min-height:28px!important;
font-size:17px!important;
}
.tf-homepage .tf-home-v3-dots{
gap:4px!important;
}
.tf-homepage .tf-home-v3-dots button{
width:5px!important;
height:5px!important;
min-width:5px!important;
min-height:5px!important;
}
.tf-homepage .tf-home-v3-dots button.is-active{
width:18px!important;
}
/* trust strip remains separate and compact */
.tf-homepage .tf-home-v3-trust{
width:calc(100% - 16px)!important;
min-height:34px!important;
margin:0 auto 12px!important;
}
.tf-homepage .tf-home-v3-trust>.shell{
min-height:34px!important;
padding:5px 8px!important;
}
}
@media(max-width:380px){
.tf-homepage .tf-home-v3-hero{
height:270px!important;
min-height:270px!important;
max-height:270px!important;
}
.tf-homepage .tf-home-v3-copy{
padding:0 12px 16px!important;
}
.tf-homepage .tf-home-v3-copy h1{
font-size:25px!important;
max-height:58px!important;
}
}
/* =========================================================
SOURCE: hero-mobile-content-restore-18.4.116.css
SHA256: 3da1e2ed371f2119877d78e1f5e9597550450efca93044904e6f9e25bcd567fd
Production order preserved.
========================================================= */
/* 18.4.116 — Restore full hero content on mobile, keep compact responsive layout */
@media(max-width:699px){
.tf-homepage .tf-home-v3-hero{
height:500px!important;
min-height:500px!important;
max-height:500px!important;
}
.tf-homepage .tf-home-v3-copy{
justify-content:flex-end!important;
padding:0 14px 48px!important;
overflow:visible!important;
}
.tf-homepage .tf-home-v3-copy h1{
max-width:94%!important;
max-height:none!important;
font-size:27px!important;
line-height:1.02!important;
-webkit-line-clamp:unset!important;
overflow:visible!important;
}
/* Restore all content hidden in 18.4.115 */
.tf-homepage .tf-home-v3-copy>p{
display:block!important;
margin:7px 0 10px!important;
max-width:96%!important;
font-size:11px!important;
line-height:1.35!important;
}
.tf-homepage .tf-home-v3-search{
display:flex!important;
width:100%!important;
min-height:44px!important;
margin:0 0 7px!important;
}
.tf-homepage .tf-home-v3-popular{
display:flex!important;
flex-wrap:wrap!important;
gap:4px!important;
margin:0 0 8px!important;
font-size:8px!important;
}
.tf-homepage .tf-home-v3-actions{
display:flex!important;
flex-wrap:wrap!important;
gap:6px!important;
margin:0 0 8px!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
min-height:34px!important;
padding:0 11px!important;
font-size:9px!important;
}
.tf-homepage .tf-home-v3-stats{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:100%!important;
min-height:54px!important;
}
.tf-homepage .tf-home-v3-stats strong{
font-size:16px!important;
}
.tf-homepage .tf-home-v3-stats span{
font-size:7px!important;
}
.tf-homepage .tf-home-v3-slider-ui{
bottom:8px!important;
}
}
@media(max-width:380px){
.tf-homepage .tf-home-v3-hero{
height:480px!important;
min-height:480px!important;
max-height:480px!important;
}
.tf-homepage .tf-home-v3-copy{
padding:0 12px 44px!important;
}
.tf-homepage .tf-home-v3-copy h1{
font-size:24px!important;
}
}
/* =========================================================
SOURCE: hero-responsive-balance-18.4.117.css
SHA256: 86fc0bf0b560cd2c1d1ec8ed7d803ca0d9dad13549e3b38b98bf652091de5b50
Production order preserved.
========================================================= */
/* TradesFolks 18.4.117 — Hero Responsive Balance
Root cause fix:
the production "mobile" viewport is ~754px wide, so the old <=699px rules
did not run. This stylesheet treats <=820px as compact/mobile hero mode. */
/* =========================================================
DESKTOP / LARGE TABLET — stronger content scale
========================================================= */
@media(min-width:821px){
.tf-homepage .tf-home-v3-copy{
width:min(650px,46%)!important;
padding-left:54px!important;
padding-right:0!important;
}
.tf-homepage .tf-home-v3-eyebrow{
min-height:29px!important;
margin-bottom:10px!important;
padding-inline:12px!important;
font-size:6.8px!important;
}
.tf-homepage .tf-home-v3-copy h1{
max-width:610px!important;
max-height:110px!important;
font-size:clamp(38px,2.65vw,52px)!important;
line-height:.99!important;
}
.tf-homepage .tf-home-v3-copy>p{
max-width:590px!important;
margin-bottom:10px!important;
font-size:9.2px!important;
line-height:1.38!important;
}
.tf-homepage .tf-home-v3-search{
width:min(625px,100%)!important;
height:50px!important;
min-height:50px!important;
max-height:50px!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
height:48px!important;
min-height:48px!important;
max-height:48px!important;
}
.tf-homepage .tf-home-v3-search select{
flex-basis:136px!important;
font-size:7.8px!important;
}
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
font-size:7.9px!important;
}
.tf-homepage .tf-home-v3-popular{
margin-top:6px!important;
min-height:23px!important;
}
.tf-homepage .tf-home-v3-popular a{
min-height:22px!important;
font-size:5.7px!important;
}
.tf-homepage .tf-home-v3-actions{
margin-top:7px!important;
min-height:35px!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
min-height:35px!important;
font-size:6.5px!important;
}
.tf-homepage .tf-home-v3-stats{
width:min(510px,100%)!important;
height:57px!important;
min-height:57px!important;
max-height:57px!important;
margin-top:8px!important;
}
.tf-homepage .tf-home-v3-stats strong{
font-size:14px!important;
}
.tf-homepage .tf-home-v3-stats span{
font-size:5.5px!important;
}
}
/* =========================================================
COMPACT / MOBILE MODE — IMPORTANT: <=820px
Keeps ALL hero content but compresses it properly.
========================================================= */
@media(max-width:820px){
.tf-homepage .tf-home-v3{
padding-top:8px!important;
}
.tf-homepage .tf-home-v3-hero{
width:calc(100% - 16px)!important;
height:430px!important;
min-height:430px!important;
max-height:430px!important;
aspect-ratio:auto!important;
margin-left:auto!important;
margin-right:auto!important;
border-radius:15px!important;
}
/* Keep original artwork ratio — crop only, never stretch */
.tf-homepage .tf-home-v3-slide{
background-size:cover!important;
background-position:center center!important;
transform:none!important;
}
/* Mobile readability without blacking out the artwork */
.tf-homepage .tf-home-v3-overlay{
background:
linear-gradient(180deg,
rgba(4,20,42,.07) 0%,
rgba(4,20,42,.13) 30%,
rgba(4,20,42,.56) 58%,
rgba(4,20,42,.91) 100%)!important;
}
.tf-homepage .tf-home-v3-inner{
display:flex!important;
align-items:flex-end!important;
width:100%!important;
height:100%!important;
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-copy{
display:flex!important;
flex-direction:column!important;
justify-content:flex-end!important;
width:100%!important;
height:auto!important;
max-height:100%!important;
padding:0 13px 40px!important;
overflow:hidden!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-eyebrow{
display:inline-flex!important;
align-self:flex-start!important;
min-height:22px!important;
margin:0 0 5px!important;
padding:0 9px!important;
font-size:5.4px!important;
}
.tf-homepage .tf-home-v3-copy h1{
display:-webkit-box!important;
width:100%!important;
max-width:92%!important;
max-height:58px!important;
margin:0 0 5px!important;
overflow:hidden!important;
font-size:26px!important;
line-height:1.01!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
.tf-homepage .tf-home-v3-copy>p{
display:-webkit-box!important;
max-width:94%!important;
max-height:30px!important;
margin:0 0 7px!important;
overflow:hidden!important;
font-size:7.2px!important;
line-height:1.28!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
/* Search: compact full width */
.tf-homepage .tf-home-v3-search{
display:flex!important;
width:100%!important;
height:42px!important;
min-height:42px!important;
max-height:42px!important;
margin:0!important;
border-radius:10px!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
height:40px!important;
min-height:40px!important;
max-height:40px!important;
font-size:6.4px!important;
}
.tf-homepage .tf-home-v3-search select{
flex:0 0 84px!important;
padding-inline:8px!important;
}
.tf-homepage .tf-home-v3-search input{
min-width:0!important;
padding-inline:8px!important;
}
.tf-homepage .tf-home-v3-search button{
flex:0 0 68px!important;
padding:0!important;
}
/* Popular chips: single horizontal row, no huge wrapping */
.tf-homepage .tf-home-v3-popular{
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:4px!important;
width:100%!important;
min-height:20px!important;
margin:5px 0 0!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
font-size:5.3px!important;
}
.tf-homepage .tf-home-v3-popular::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-home-v3-popular a{
flex:0 0 auto!important;
min-height:19px!important;
padding:0 6px!important;
font-size:4.9px!important;
white-space:nowrap!important;
}
/* Buttons stay visible, compact */
.tf-homepage .tf-home-v3-actions{
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:6px!important;
width:100%!important;
min-height:31px!important;
margin:5px 0 0!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
min-height:31px!important;
padding:0 9px!important;
border-radius:8px!important;
font-size:5.8px!important;
white-space:nowrap!important;
}
/* Metrics: readable but much less bulky */
.tf-homepage .tf-home-v3-stats{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
width:100%!important;
height:48px!important;
min-height:48px!important;
max-height:48px!important;
margin:6px 0 0!important;
border-radius:10px!important;
}
.tf-homepage .tf-home-v3-stats>div{
min-width:0!important;
padding:5px 7px!important;
}
.tf-homepage .tf-home-v3-stats strong{
font-size:11px!important;
}
.tf-homepage .tf-home-v3-stats span,
.tf-homepage .tf-home-v3-stats small{
margin-top:3px!important;
font-size:4.7px!important;
}
/* Controls move out of the content block */
.tf-homepage .tf-home-v3-slider-ui{
left:auto!important;
right:8px!important;
bottom:8px!important;
width:auto!important;
padding:0!important;
gap:5px!important;
}
.tf-homepage .tf-home-v3-slider-ui>button{
width:27px!important;
height:27px!important;
min-width:27px!important;
min-height:27px!important;
font-size:16px!important;
}
.tf-homepage .tf-home-v3-dots{
gap:3px!important;
}
.tf-homepage .tf-home-v3-dots button{
width:5px!important;
height:5px!important;
min-width:5px!important;
min-height:5px!important;
}
.tf-homepage .tf-home-v3-dots button.is-active{
width:17px!important;
}
/* Trust strip: no oversized white slab */
.tf-homepage .tf-home-v3-trust{
width:calc(100% - 16px)!important;
min-height:34px!important;
margin:0 auto 12px!important;
border-radius:0 0 13px 13px!important;
}
.tf-homepage .tf-home-v3-trust>.shell{
justify-content:flex-start!important;
flex-wrap:nowrap!important;
min-height:34px!important;
padding:5px 9px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
}
.tf-homepage .tf-home-v3-trust>.shell::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-home-v3-trust span{
flex:0 0 auto!important;
font-size:5.1px!important;
}
}
/* Very small phones */
@media(max-width:420px){
.tf-homepage .tf-home-v3-hero{
height:410px!important;
min-height:410px!important;
max-height:410px!important;
}
.tf-homepage .tf-home-v3-copy{
padding:0 11px 36px!important;
}
.tf-homepage .tf-home-v3-copy h1{
font-size:23px!important;
max-height:52px!important;
}
.tf-homepage .tf-home-v3-copy>p{
font-size:6.5px!important;
}
.tf-homepage .tf-home-v3-search select{
flex-basis:74px!important;
}
.tf-homepage .tf-home-v3-search button{
flex-basis:60px!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
padding-inline:7px!important;
font-size:5.2px!important;
}
}
/* =========================================================
SOURCE: mobile-hero-height-category-carousel-18.4.118.css
SHA256: ec8b3e602105db5282e312129e061f8bd77c6bef91f0de20425ffb316b1cf69c
Production order preserved.
========================================================= */
/* TradesFolks 18.4.118
Mobile hero height reduction + horizontal category carousel.
Desktop category layout is preserved. */
@media(max-width:820px){
/* ======================================================
HERO — reduce height, retain all content
====================================================== */
.tf-homepage .tf-home-v3-hero{
height:380px!important;
min-height:380px!important;
max-height:380px!important;
}
.tf-homepage .tf-home-v3-copy{
padding:0 12px 34px!important;
}
.tf-homepage .tf-home-v3-eyebrow{
min-height:20px!important;
margin-bottom:4px!important;
padding:0 8px!important;
font-size:5px!important;
}
.tf-homepage .tf-home-v3-copy h1{
max-height:50px!important;
margin-bottom:4px!important;
font-size:23px!important;
line-height:1!important;
}
.tf-homepage .tf-home-v3-copy>p{
max-height:24px!important;
margin-bottom:5px!important;
font-size:6.4px!important;
line-height:1.22!important;
}
.tf-homepage .tf-home-v3-search{
height:38px!important;
min-height:38px!important;
max-height:38px!important;
}
.tf-homepage .tf-home-v3-search select,
.tf-homepage .tf-home-v3-search input,
.tf-homepage .tf-home-v3-search button{
height:36px!important;
min-height:36px!important;
max-height:36px!important;
font-size:5.9px!important;
}
.tf-homepage .tf-home-v3-search select{
flex-basis:76px!important;
}
.tf-homepage .tf-home-v3-search button{
flex-basis:60px!important;
}
.tf-homepage .tf-home-v3-popular{
min-height:18px!important;
margin-top:4px!important;
gap:3px!important;
}
.tf-homepage .tf-home-v3-popular a{
min-height:17px!important;
padding-inline:5px!important;
font-size:4.5px!important;
}
.tf-homepage .tf-home-v3-actions{
min-height:28px!important;
margin-top:4px!important;
gap:5px!important;
}
.tf-homepage .tf-home-v3-actions a,
.tf-homepage .tf-home-v3-actions button{
min-height:28px!important;
padding:0 7px!important;
font-size:5.2px!important;
}
.tf-homepage .tf-home-v3-stats{
height:43px!important;
min-height:43px!important;
max-height:43px!important;
margin-top:5px!important;
}
.tf-homepage .tf-home-v3-stats>div{
padding:4px 6px!important;
}
.tf-homepage .tf-home-v3-stats strong{
font-size:10px!important;
}
.tf-homepage .tf-home-v3-stats span,
.tf-homepage .tf-home-v3-stats small{
margin-top:2px!important;
font-size:4.3px!important;
}
.tf-homepage .tf-home-v3-slider-ui{
bottom:6px!important;
}
.tf-homepage .tf-home-v3-slider-ui>button{
width:25px!important;
height:25px!important;
min-width:25px!important;
min-height:25px!important;
font-size:15px!important;
}
/* ======================================================
EXPLORE INDUSTRIES — horizontal left/right carousel
====================================================== */
.tf-homepage .tf-home-v3-industries{
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-industries > .shell{
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:0 1px 5px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scroll-padding-left:1px!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
overscroll-behavior-x:contain!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
flex:0 0 42vw!important;
width:42vw!important;
min-width:42vw!important;
max-width:42vw!important;
height:148px!important;
min-height:148px!important;
max-height:148px!important;
margin:0!important;
scroll-snap-align:start!important;
scroll-snap-stop:normal!important;
border-radius:13px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
flex:0 0 112px!important;
width:100%!important;
height:112px!important;
min-height:112px!important;
max-height:112px!important;
padding:7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
flex:0 0 36px!important;
height:36px!important;
min-height:36px!important;
max-height:36px!important;
padding:4px 6px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body > strong{
font-size:7px!important;
line-height:1.1!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
overflow:hidden!important;
}
}
@media(max-width:420px){
.tf-homepage .tf-home-v3-hero{
height:360px!important;
min-height:360px!important;
max-height:360px!important;
}
.tf-homepage .tf-home-v3-copy{
padding:0 10px 31px!important;
}
.tf-homepage .tf-home-v3-copy h1{
font-size:21px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
flex-basis:44vw!important;
width:44vw!important;
min-width:44vw!important;
max-width:44vw!important;
height:140px!important;
min-height:140px!important;
max-height:140px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
flex-basis:106px!important;
height:106px!important;
min-height:106px!important;
max-height:106px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
flex-basis:34px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
}
}
/* =========================================================
SOURCE: explore-industries-gutter-compact-mobile-18.4.120.css
SHA256: 72180451ffb617d9f67d0ddc7a3d1c4db2b12ec4592273078c6eed3b6b11af00
Production order preserved.
========================================================= */
/* TradesFolks 18.4.120 — Explore Industries Gutter + Compact Mobile */
/* =========================================================
DESKTOP / TABLET: blue section gets same left-right gutter
as hero / other homepage sections.
========================================================= */
@media(min-width:821px){
.tf-homepage .tf-home-v3-industries{
width:calc(100% - 56px)!important;
margin-left:auto!important;
margin-right:auto!important;
border-radius:18px!important;
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-industries > .shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:18px 18px 16px!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
margin-bottom:12px!important;
}
}
/* =========================================================
MOBILE / COMPACT: smaller, tighter, still horizontal swipe
========================================================= */
@media(max-width:820px){
.tf-homepage .tf-home-v3-industries{
width:calc(100% - 16px)!important;
margin:0 auto!important;
padding:0!important;
border-radius:14px!important;
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-industries > .shell{
width:100%!important;
max-width:100%!important;
margin:0!important;
padding:12px 10px 11px!important;
box-sizing:border-box!important;
overflow:hidden!important;
}
/* header */
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:4px 7px!important;
margin:0 0 9px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div{
min-width:0!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > div > span{
display:block!important;
margin:0 0 3px!important;
font-size:5.2px!important;
font-weight:900!important;
letter-spacing:.085em!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
max-width:100%!important;
margin:0!important;
font-size:18px!important;
line-height:1.02!important;
letter-spacing:-.035em!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head p{
margin:3px 0 0!important;
font-size:5.8px!important;
line-height:1.28!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
align-self:center!important;
min-height:29px!important;
height:29px!important;
max-width:132px!important;
padding:0 9px!important;
border-radius:999px!important;
font-size:5.1px!important;
white-space:nowrap!important;
}
/* horizontal category carousel — more compact */
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:7px!important;
width:100%!important;
margin:0!important;
padding:0 1px 4px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
flex:0 0 36vw!important;
width:36vw!important;
min-width:36vw!important;
max-width:36vw!important;
height:122px!important;
min-height:122px!important;
max-height:122px!important;
margin:0!important;
border-radius:11px!important;
scroll-snap-align:start!important;
overflow:hidden!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
flex:0 0 90px!important;
width:100%!important;
height:90px!important;
min-height:90px!important;
max-height:90px!important;
padding:5px!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
flex:0 0 32px!important;
height:32px!important;
min-height:32px!important;
max-height:32px!important;
padding:3px 5px!important;
box-sizing:border-box!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body > span{
display:none!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body > strong{
width:100%!important;
margin:0!important;
overflow:hidden!important;
font-size:6.4px!important;
line-height:1.1!important;
text-align:center!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
/* popular subcategories: compact horizontal pills */
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories{
width:100%!important;
margin:8px 0 0!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > strong{
display:block!important;
margin:0 0 5px!important;
font-size:5.6px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div{
display:flex!important;
flex-wrap:nowrap!important;
gap:5px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories > div::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-subcategories a{
flex:0 0 auto!important;
min-height:24px!important;
padding:0 9px!important;
border-radius:999px!important;
font-size:5.3px!important;
white-space:nowrap!important;
}
}
@media(max-width:420px){
.tf-homepage .tf-home-v3-industries{
width:calc(100% - 12px)!important;
}
.tf-homepage .tf-home-v3-industries > .shell{
padding:10px 8px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head h2{
font-size:17px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-section-head > a{
max-width:118px!important;
min-height:27px!important;
height:27px!important;
padding-inline:7px!important;
font-size:4.7px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-card{
flex-basis:38vw!important;
width:38vw!important;
min-width:38vw!important;
max-width:38vw!important;
height:116px!important;
min-height:116px!important;
max-height:116px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-media{
flex-basis:86px!important;
height:86px!important;
min-height:86px!important;
max-height:86px!important;
}
.tf-homepage .tf-home-v3-industries .tf-home-v3-category-body{
flex-basis:30px!important;
height:30px!important;
min-height:30px!important;
max-height:30px!important;
}
}
/* =========================================================
SOURCE: mobile-sourcing-cleanup-18.4.124.css
SHA256: ec7d7654a7fb1d2dc8acc600497ecd5b8862b78ad2d35042b877efa86f867765
Production order preserved.
========================================================= */
/* TradesFolks 18.4.124 — mobile sourcing cleanup */
/* Prevent any malformed legacy cache-buster remnants from affecting layout */
.tf-homepage{overflow-x:hidden}
/* Compact "Discover more ways to source" area on phones */
@media(max-width:820px){
.tf-homepage .tf-sourcing-solutions{
width:calc(100% - 16px)!important;
margin:14px auto!important;
padding:0!important;
}
.tf-homepage .tf-sourcing-solutions > h2,
.tf-homepage .tf-sourcing-solutions .section-title{
font-size:22px!important;
line-height:1.12!important;
margin:0 0 10px!important;
}
.tf-homepage .tf-custom-sourcing-enterprise,
.tf-homepage .tf-rfq-enterprise{
padding:12px!important;
border-radius:14px!important;
min-height:0!important;
}
.tf-homepage .tf-custom-sourcing-card,
.tf-homepage .tf-rfq-enterprise-card{
padding:12px!important;
min-height:0!important;
}
.tf-homepage .tf-custom-sourcing-card h2,
.tf-homepage .tf-custom-sourcing-card h3,
.tf-homepage .tf-rfq-enterprise-card h2,
.tf-homepage .tf-rfq-enterprise-card h3{
font-size:22px!important;
line-height:1.12!important;
margin:0 0 12px!important;
}
.tf-homepage .tf-custom-sourcing-card .products-grid,
.tf-homepage .tf-rfq-enterprise-card .products-grid{
gap:10px!important;
}
.tf-homepage .tf-custom-sourcing-actions,
.tf-homepage .tf-rfq-enterprise-actions{
margin-top:14px!important;
}
}
/* Exact mobile procurement card layout: tighter images/text and remove huge dead space */
@media(max-width:820px){
.tf-homepage [class*="procurement"]{
min-height:0!important;
}
.tf-homepage [class*="procurement"] img{
max-height:150px!important;
object-fit:contain!important;
}
.tf-homepage [class*="procurement"] a,
.tf-homepage [class*="procurement"] p{
line-height:1.18!important;
}
}
/* Sprint 966 — Global Trade Map Country Market Surface */
.tf-homepage .country-network-premium{isolation:isolate!important;padding:22px 0 24px!important;background:#061b46!important;color:#fff!important}
.tf-homepage .country-network-premium:before{content:""!important;position:absolute!important;inset:0!important;z-index:-2!important;pointer-events:none!important;opacity:.24!important;background-image:radial-gradient(circle at 16% 28%,rgba(255,255,255,.16) 0 1px,transparent 1.4px),radial-gradient(circle at 62% 18%,rgba(255,193,7,.22) 0 1px,transparent 1.4px),radial-gradient(ellipse at 19% 46%,transparent 0 17%,rgba(83,143,222,.16) 17.2% 17.8%,transparent 18%),radial-gradient(ellipse at 48% 39%,transparent 0 13%,rgba(83,143,222,.13) 13.2% 13.8%,transparent 14%),radial-gradient(ellipse at 76% 49%,transparent 0 16%,rgba(83,143,222,.14) 16.2% 16.8%,transparent 17%);background-size:26px 26px,31px 31px,520px 250px,430px 210px,520px 250px!important;background-position:0 0,9px 7px,-75px 5px,39% 0,92% 10px!important}
.tf-homepage .country-network-premium:after{content:""!important;position:absolute!important;inset:0!important;z-index:-1!important;pointer-events:none!important;background:radial-gradient(circle at 82% 4%,rgba(32,119,220,.23),transparent 25%),radial-gradient(circle at 12% 94%,rgba(10,69,151,.28),transparent 28%),linear-gradient(180deg,rgba(3,18,50,.04),rgba(1,13,38,.32))!important}
.tf-homepage .country-network-premium>.shell{position:relative!important;z-index:1!important}.tf-homepage .country-network-premium .country-network-head{align-items:center!important;margin-bottom:15px!important}.tf-homepage .country-network-premium .country-network-head .eyebrow{color:#a8d947!important}.tf-homepage .country-network-premium .country-network-head .eyebrow:before{background:#a8d947!important}.tf-homepage .country-network-premium .country-network-head h2{color:#fff!important}.tf-homepage .country-network-premium .country-network-head p{color:#b9c8df!important}.tf-homepage .country-network-premium .country-network-head>a{border-color:rgba(255,255,255,.30)!important;background:rgba(5,24,60,.72)!important;color:#fff!important;box-shadow:0 8px 24px rgba(0,0,0,.18)!important;backdrop-filter:blur(8px)!important}.tf-homepage .country-network-premium .country-network-head>a span{color:#b7df4a!important}
.tf-homepage .country-network-premium .country-network-head:after{content:"🌐 ▣ ↗ ◫"!important;position:absolute!important;right:17%!important;top:-8px!important;color:#b7df4a!important;opacity:.34!important;font-size:20px!important;letter-spacing:14px!important;transform:rotate(-5deg)!important;pointer-events:none!important}
.tf-homepage .country-network-premium .country-market-card{border-color:rgba(150,181,224,.30)!important;background:#071f4c!important;box-shadow:0 10px 24px rgba(0,8,30,.22)!important}.tf-homepage .country-network-premium .country-market-card:hover{border-color:rgba(183,223,74,.56)!important;box-shadow:0 17px 34px rgba(0,7,28,.34)!important}.tf-homepage .country-network-premium .country-market-visual{background:#0a2858!important}.tf-homepage .country-network-premium .country-market-visual:after{background:linear-gradient(180deg,rgba(4,20,48,.02) 0%,rgba(4,20,48,0) 52%,rgba(4,20,48,.38) 100%)!important}.tf-homepage .country-network-premium .country-market-body,.tf-homepage .country-network-premium .country-market-body-premium{background:#071f4c!important}.tf-homepage .country-network-premium .country-market-source{color:#8ea8ce!important}.tf-homepage .country-network-premium .country-market-name{color:#fff!important}.tf-homepage .country-network-premium .country-market-copy{color:#bdcbe0!important}.tf-homepage .country-network-premium .country-market-count{border-color:rgba(153,183,224,.32)!important;background:#0a2858!important;color:#dce7f7!important}.tf-homepage .country-network-premium .country-market-count b{color:#fff!important}.tf-homepage .country-network-premium .country-market-count i{color:#b7df4a!important}.tf-homepage .country-network-premium .country-market-benefits{border-left-color:rgba(153,183,224,.24)!important}.tf-homepage .country-network-premium .country-market-benefits b{color:#fff!important}.tf-homepage .country-network-premium .country-market-benefits small{color:#8fa6c7!important}.tf-homepage .country-network-premium .country-market-rail{position:relative!important}.tf-homepage .country-network-premium .country-market-rail:before{content:""!important;position:absolute!important;left:2%!important;right:2%!important;top:-9px!important;height:1px!important;opacity:.25!important;background:repeating-linear-gradient(90deg,#b7df4a 0 8px,transparent 8px 18px)!important;pointer-events:none!important}
@media(max-width:699px){.tf-homepage .country-network-premium{padding:15px 0 17px!important}.tf-homepage .country-network-premium:before{opacity:.16!important;background-size:24px 24px,29px 29px,360px 190px,320px 170px,360px 190px!important}.tf-homepage .country-network-premium .country-network-head:after{display:none!important}.tf-homepage .country-network-premium .country-network-head h2{color:#fff!important}.tf-homepage .country-network-premium .country-network-head p{color:#afc0d8!important}.tf-homepage .country-network-premium .country-market-card{background:#071f4c!important}}
/* ===== service-sections-title-visibility-hotfix-18.4.137.css ===== */
/* TradesFolks 18.4.137
Service section title visibility + final compact balance.
*/
@media(min-width:821px){
.tf-homepage .tf-service-card{
height:304px!important;
}
.tf-homepage .tf-service-card-hero{
height:218px!important;
min-height:218px!important;
}
.tf-homepage .tf-service-card-media{
inset:0 0 74px 0!important;
padding:8px 18px 3px!important;
}
.tf-homepage .tf-service-card-media img{
max-width:86%!important;
max-height:100%!important;
object-fit:contain!important;
}
.tf-homepage .tf-service-card-directory-copy{
left:14px!important;
right:14px!important;
bottom:8px!important;
height:66px!important;
min-height:66px!important;
padding:7px 11px 6px!important;
overflow:visible!important;
justify-content:flex-start!important;
}
.tf-homepage .tf-service-card-directory-copy small{
flex:0 0 auto!important;
margin:0 0 2px!important;
font-size:6px!important;
line-height:1.05!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
display:block!important;
flex:0 0 auto!important;
width:100%!important;
margin:0!important;
font-size:16px!important;
line-height:1.08!important;
letter-spacing:-.025em!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-service-card-directory-cta{
flex:0 0 auto!important;
margin-top:5px!important;
font-size:7px!important;
line-height:1!important;
}
.tf-homepage .tf-service-mini-grid,
.tf-homepage .tf-service-mini-grid > a{
height:86px!important;
min-height:86px!important;
}
.tf-homepage .tf-service-mini-image{
width:40px!important;
min-width:40px!important;
height:34px!important;
min-height:34px!important;
}
.tf-homepage .tf-service-mini-grid strong{
font-size:7px!important;
line-height:1.1!important;
}
}
@media(min-width:821px) and (max-width:1180px){
.tf-homepage .tf-service-card{
height:286px!important;
}
.tf-homepage .tf-service-card-hero{
height:205px!important;
min-height:205px!important;
}
.tf-homepage .tf-service-card-media{
inset:0 0 69px 0!important;
}
.tf-homepage .tf-service-card-directory-copy{
left:10px!important;
right:10px!important;
height:61px!important;
min-height:61px!important;
padding:6px 9px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:14px!important;
}
.tf-homepage .tf-service-mini-grid,
.tf-homepage .tf-service-mini-grid > a{
height:81px!important;
min-height:81px!important;
}
}
/* Mobile: compact but title must remain fully readable */
@media(max-width:820px){
.tf-homepage .tf-service-card{
height:248px!important;
min-height:248px!important;
}
.tf-homepage .tf-service-card-hero{
height:178px!important;
min-height:178px!important;
}
.tf-homepage .tf-service-card-media{
inset:0 0 61px 0!important;
}
.tf-homepage .tf-service-card-directory-copy{
left:8px!important;
right:8px!important;
bottom:6px!important;
height:54px!important;
min-height:54px!important;
padding:6px 8px!important;
overflow:visible!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:14px!important;
line-height:1.07!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-service-card-directory-cta{
margin-top:4px!important;
font-size:6.5px!important;
}
.tf-homepage .tf-service-mini-grid,
.tf-homepage .tf-service-mini-grid > a{
height:70px!important;
min-height:70px!important;
}
}
@media(max-width:430px){
.tf-homepage .tf-service-card{
height:238px!important;
min-height:238px!important;
}
.tf-homepage .tf-service-card-hero{
height:170px!important;
min-height:170px!important;
}
.tf-homepage .tf-service-card-directory-copy{
height:52px!important;
min-height:52px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:13px!important;
}
.tf-homepage .tf-service-mini-grid,
.tf-homepage .tf-service-mini-grid > a{
height:68px!important;
min-height:68px!important;
}
}
/* ===== homepage-unified-responsive-system-18.4.138.css ===== */
/* TradesFolks 18.4.138
COMPLETE HOMEPAGE — Unified Hero Gutter + Responsive System
Canonical gutters:
Desktop >= 1280px : 28px each side
Small desktop : 22px each side
Tablet : 16px each side
Mobile : 8px each side
*/
/* ==========================================================
1. GLOBAL HOMEPAGE SAFETY
========================================================== */
.tf-homepage{
width:100%!important;
max-width:100%!important;
overflow-x:hidden!important;
box-sizing:border-box!important;
}
.tf-homepage *,
.tf-homepage *::before,
.tf-homepage *::after{
box-sizing:border-box!important;
}
.tf-homepage img,
.tf-homepage video,
.tf-homepage svg{
max-width:100%;
}
/* ==========================================================
2. DESKTOP — EXACT HERO GUTTER
Hero uses 28px each side => width calc(100% - 56px)
Apply same outer width to every principal homepage section.
========================================================== */
@media(min-width:1280px){
.tf-homepage .hero-shell,
.tf-homepage .tf-hero-shell,
.tf-homepage .home-hero-shell,
.tf-homepage .home-hero,
.tf-homepage .hero-slider-wrap,
.tf-homepage .home-category-showcases,
.tf-homepage .tf-category-showcase,
.tf-homepage .tf-home-category-showcase,
.tf-homepage .tf-category-section,
.tf-homepage .featured-marketplace-section,
.tf-homepage .tf-featured-marketplace,
.tf-homepage .home-featured-marketplace,
.tf-homepage .trending-products-section,
.tf-homepage .tf-trending-products,
.tf-homepage .home-trending-products,
.tf-homepage .tf-service-directory-section,
.tf-homepage .tf-service-section,
.tf-homepage .home-service-section,
.tf-homepage .country-markets-section,
.tf-homepage .tf-country-markets,
.tf-homepage .home-country-markets,
.tf-homepage .tf-serious-sourcing,
.tf-homepage .home-serious-sourcing,
.tf-homepage .serious-sourcing-section,
.tf-homepage .curated-b2b,
.tf-homepage .curated-b2b-section,
.tf-homepage .tf-curated-b2b,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .homepage-section,
.tf-homepage section[data-home-section]{
width:calc(100% - 56px)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Inner shells must not add a second gutter */
.tf-homepage .home-category-showcases > .shell,
.tf-homepage .tf-service-directory-section > .shell,
.tf-homepage .tf-service-section > .shell,
.tf-homepage .home-service-section > .shell,
.tf-homepage .country-markets-section > .shell,
.tf-homepage .tf-country-markets > .shell,
.tf-homepage .home-country-markets > .shell,
.tf-homepage .featured-marketplace-section > .shell,
.tf-homepage .trending-products-section > .shell,
.tf-homepage .curated-b2b > .shell,
.tf-homepage .curated-b2b-section > .shell{
width:100%!important;
max-width:none!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
}
}
/* ==========================================================
3. SMALL DESKTOP
========================================================== */
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .hero-shell,
.tf-homepage .tf-hero-shell,
.tf-homepage .home-hero-shell,
.tf-homepage .home-hero,
.tf-homepage .hero-slider-wrap,
.tf-homepage .home-category-showcases,
.tf-homepage .tf-category-showcase,
.tf-homepage .tf-home-category-showcase,
.tf-homepage .tf-category-section,
.tf-homepage .featured-marketplace-section,
.tf-homepage .tf-featured-marketplace,
.tf-homepage .home-featured-marketplace,
.tf-homepage .trending-products-section,
.tf-homepage .tf-trending-products,
.tf-homepage .home-trending-products,
.tf-homepage .tf-service-directory-section,
.tf-homepage .tf-service-section,
.tf-homepage .home-service-section,
.tf-homepage .country-markets-section,
.tf-homepage .tf-country-markets,
.tf-homepage .home-country-markets,
.tf-homepage .tf-serious-sourcing,
.tf-homepage .home-serious-sourcing,
.tf-homepage .serious-sourcing-section,
.tf-homepage .curated-b2b,
.tf-homepage .curated-b2b-section,
.tf-homepage .tf-curated-b2b,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .homepage-section,
.tf-homepage section[data-home-section]{
width:calc(100% - 44px)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* ==========================================================
4. TABLET
========================================================== */
@media(min-width:821px) and (max-width:1023px){
.tf-homepage .hero-shell,
.tf-homepage .tf-hero-shell,
.tf-homepage .home-hero-shell,
.tf-homepage .home-hero,
.tf-homepage .hero-slider-wrap,
.tf-homepage .home-category-showcases,
.tf-homepage .tf-category-showcase,
.tf-homepage .tf-home-category-showcase,
.tf-homepage .tf-category-section,
.tf-homepage .featured-marketplace-section,
.tf-homepage .tf-featured-marketplace,
.tf-homepage .home-featured-marketplace,
.tf-homepage .trending-products-section,
.tf-homepage .tf-trending-products,
.tf-homepage .home-trending-products,
.tf-homepage .tf-service-directory-section,
.tf-homepage .tf-service-section,
.tf-homepage .home-service-section,
.tf-homepage .country-markets-section,
.tf-homepage .tf-country-markets,
.tf-homepage .home-country-markets,
.tf-homepage .tf-serious-sourcing,
.tf-homepage .home-serious-sourcing,
.tf-homepage .serious-sourcing-section,
.tf-homepage .curated-b2b,
.tf-homepage .curated-b2b-section,
.tf-homepage .tf-curated-b2b,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .homepage-section,
.tf-homepage section[data-home-section]{
width:calc(100% - 32px)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
}
/* ==========================================================
5. MOBILE — CONSISTENT COMPACT GUTTER
========================================================== */
@media(max-width:820px){
.tf-homepage .hero-shell,
.tf-homepage .tf-hero-shell,
.tf-homepage .home-hero-shell,
.tf-homepage .home-hero,
.tf-homepage .hero-slider-wrap,
.tf-homepage .home-category-showcases,
.tf-homepage .tf-category-showcase,
.tf-homepage .tf-home-category-showcase,
.tf-homepage .tf-category-section,
.tf-homepage .featured-marketplace-section,
.tf-homepage .tf-featured-marketplace,
.tf-homepage .home-featured-marketplace,
.tf-homepage .trending-products-section,
.tf-homepage .tf-trending-products,
.tf-homepage .home-trending-products,
.tf-homepage .tf-service-directory-section,
.tf-homepage .tf-service-section,
.tf-homepage .home-service-section,
.tf-homepage .country-markets-section,
.tf-homepage .tf-country-markets,
.tf-homepage .home-country-markets,
.tf-homepage .tf-serious-sourcing,
.tf-homepage .home-serious-sourcing,
.tf-homepage .serious-sourcing-section,
.tf-homepage .curated-b2b,
.tf-homepage .curated-b2b-section,
.tf-homepage .tf-curated-b2b,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .homepage-section,
.tf-homepage section[data-home-section]{
width:calc(100% - 16px)!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
.tf-homepage .shell{
max-width:100%!important;
}
}
/* ==========================================================
6. HEADINGS / SECTION SPACING
========================================================== */
@media(min-width:821px){
.tf-homepage section{
scroll-margin-top:110px;
}
.tf-homepage .section-head,
.tf-homepage .home-section-head,
.tf-homepage .tf-section-head{
min-width:0!important;
}
.tf-homepage .section-head h2,
.tf-homepage .home-section-head h2,
.tf-homepage .tf-section-head h2{
max-width:100%!important;
overflow-wrap:anywhere!important;
}
}
@media(max-width:820px){
.tf-homepage .section-head,
.tf-homepage .home-section-head,
.tf-homepage .tf-section-head{
gap:8px!important;
}
.tf-homepage .section-head h2,
.tf-homepage .home-section-head h2,
.tf-homepage .tf-section-head h2{
max-width:100%!important;
font-size:clamp(20px,6vw,27px)!important;
line-height:1.07!important;
overflow-wrap:anywhere!important;
}
.tf-homepage .section-head p,
.tf-homepage .home-section-head p,
.tf-homepage .tf-section-head p{
max-width:100%!important;
font-size:11px!important;
line-height:1.35!important;
}
}
/* ==========================================================
7. FEATURED + TRENDING PRODUCT GRIDS
========================================================== */
@media(min-width:1280px){
.tf-homepage .featured-marketplace-grid,
.tf-homepage .tf-featured-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-homepage .trending-products-grid,
.tf-homepage .tf-trending-grid{
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:10px!important;
}
}
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .featured-marketplace-grid,
.tf-homepage .tf-featured-grid,
.tf-homepage .trending-products-grid,
.tf-homepage .tf-trending-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:9px!important;
}
}
@media(min-width:821px) and (max-width:1023px){
.tf-homepage .featured-marketplace-grid,
.tf-homepage .tf-featured-grid,
.tf-homepage .trending-products-grid,
.tf-homepage .tf-trending-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
}
}
@media(max-width:820px){
.tf-homepage .featured-marketplace-grid,
.tf-homepage .tf-featured-grid,
.tf-homepage .trending-products-grid,
.tf-homepage .tf-trending-grid{
min-width:0!important;
}
}
/* ==========================================================
8. CATEGORY DIRECTORY
========================================================== */
@media(min-width:1280px){
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(290px,1.12fr) minmax(0,3fr)!important;
}
}
@media(min-width:821px) and (max-width:1279px){
.tf-homepage .home-category-showcase-grid{
grid-template-columns:minmax(230px,.95fr) minmax(0,3.05fr)!important;
}
}
@media(max-width:820px){
.tf-homepage .home-category-subgrid{
padding-bottom:2px!important;
}
.tf-homepage .home-category-subcard{
flex-basis:min(44vw,190px)!important;
width:min(44vw,190px)!important;
min-width:min(44vw,190px)!important;
max-width:min(44vw,190px)!important;
}
}
/* ==========================================================
9. SERVICE SECTIONS
========================================================== */
@media(min-width:1280px){
.tf-homepage .tf-service-directory-grid,
.tf-homepage .tf-service-grid,
.tf-homepage .home-service-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
@media(min-width:821px) and (max-width:1279px){
.tf-homepage .tf-service-directory-grid,
.tf-homepage .tf-service-grid,
.tf-homepage .home-service-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
/* ==========================================================
10. COUNTRY / SUPPLIER MARKETS
========================================================== */
@media(min-width:1280px){
.tf-homepage .country-markets-grid,
.tf-homepage .tf-country-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
gap:10px!important;
}
}
@media(min-width:1024px) and (max-width:1279px){
.tf-homepage .country-markets-grid,
.tf-homepage .tf-country-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
@media(min-width:821px) and (max-width:1023px){
.tf-homepage .country-markets-grid,
.tf-homepage .tf-country-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
/* ==========================================================
11. HORIZONTAL RAILS — NEVER BREAK PAGE WIDTH
========================================================== */
.tf-homepage [class*="rail"],
.tf-homepage [class*="track"]{
max-width:100%!important;
}
@media(max-width:820px){
.tf-homepage [class*="rail"],
.tf-homepage [class*="track"]{
overflow-x:auto;
overscroll-behavior-inline:contain;
-webkit-overflow-scrolling:touch;
}
}
/* ==========================================================
12. CARDS — CONTENT SAFETY
========================================================== */
.tf-homepage [class*="card"]{
min-width:0!important;
}
.tf-homepage [class*="card"] img{
object-position:center;
}
.tf-homepage [class*="card"] h2,
.tf-homepage [class*="card"] h3,
.tf-homepage [class*="card"] strong{
max-width:100%;
}
/* ==========================================================
13. MOBILE CTA / BUTTON SAFETY
========================================================== */
@media(max-width:820px){
.tf-homepage a,
.tf-homepage button{
max-width:100%;
}
.tf-homepage .section-head > a,
.tf-homepage .home-section-head > a,
.tf-homepage .tf-section-head > a{
flex:0 0 auto!important;
}
}
/* ==========================================================
14. VERY SMALL PHONES
========================================================== */
@media(max-width:430px){
.tf-homepage .hero-shell,
.tf-homepage .tf-hero-shell,
.tf-homepage .home-hero-shell,
.tf-homepage .home-hero,
.tf-homepage .hero-slider-wrap,
.tf-homepage .home-category-showcases,
.tf-homepage .featured-marketplace-section,
.tf-homepage .trending-products-section,
.tf-homepage .tf-service-directory-section,
.tf-homepage .tf-service-section,
.tf-homepage .country-markets-section,
.tf-homepage .tf-country-markets,
.tf-homepage .tf-serious-sourcing,
.tf-homepage .curated-b2b,
.tf-homepage .homepage-section,
.tf-homepage section[data-home-section]{
width:calc(100% - 12px)!important;
}
.tf-homepage .home-category-subcard{
flex-basis:46vw!important;
width:46vw!important;
min-width:46vw!important;
max-width:46vw!important;
}
}
/* ===== homepage-zoom-safe-exact-sections-18.4.139.css ===== */
/* TradesFolks 18.4.139
Homepage zoom-safe exact-section hotfix.
Targets live homepage classes that were missed by the generic responsive layer.
*/
.tf-homepage{
--tf-home-gutter:28px;
}
@media(max-width:1279px){
.tf-homepage{ --tf-home-gutter:22px; }
}
@media(max-width:1023px){
.tf-homepage{ --tf-home-gutter:16px; }
}
@media(max-width:820px){
.tf-homepage{ --tf-home-gutter:8px; }
}
@media(max-width:430px){
.tf-homepage{ --tf-home-gutter:6px; }
}
/* =========================================================
EXACT LIVE HOMEPAGE SECTIONS
Every major section uses the same outer gutter as hero.
========================================================= */
.tf-homepage .tf-home-v3,
.tf-homepage .country-network,
.tf-homepage .curated-b2b-market,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services,
.tf-homepage .home-category-showcases,
.tf-homepage .festival-marketplace,
.tf-homepage .marketplace-products,
.tf-homepage .trade-advantage,
.tf-homepage .trending-products,
.tf-homepage .new-arrivals,
.tf-homepage .tf-rfq-enterprise,
.tf-homepage .commerce-offers,
.tf-homepage .tf-commerce-capabilities,
.tf-homepage .tf-industry-enterprise,
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-dual-cta-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .home-reels,
.tf-homepage .tf-content-enterprise,
.tf-homepage .tf-custom-sourcing-enterprise{
width:calc(100% - (var(--tf-home-gutter) * 2))!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* Sections with full-bleed colour/background may keep their background wrapper,
but their inner shell must follow the same hero gutter width. */
.tf-homepage .country-network > .shell,
.tf-homepage .curated-b2b-market > .shell,
.tf-homepage .tf-sourcing-solutions > .shell,
.tf-homepage .tf-business-growth-services > .shell,
.tf-homepage .home-category-showcases > .shell,
.tf-homepage .festival-marketplace > .shell,
.tf-homepage .marketplace-products > .shell,
.tf-homepage .trade-advantage > .shell,
.tf-homepage .trending-products > .shell,
.tf-homepage .new-arrivals > .shell,
.tf-homepage .tf-rfq-enterprise > .shell,
.tf-homepage .commerce-offers > .shell,
.tf-homepage .tf-commerce-capabilities > .shell,
.tf-homepage .tf-industry-enterprise > .shell,
.tf-homepage .tf-process-enterprise > .shell,
.tf-homepage .tf-dual-cta-enterprise > .shell,
.tf-homepage .tf-insights-enterprise > .shell,
.tf-homepage .home-reels > .shell,
.tf-homepage .tf-content-enterprise > .shell,
.tf-homepage .tf-custom-sourcing-enterprise > .shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding-left:0!important;
padding-right:0!important;
}
/* Hero already owns its internal visual gutter; avoid double shrinking. */
.tf-homepage .tf-home-v3{
width:100%!important;
}
.tf-homepage .tf-home-v3 > .tf-home-v3-hero,
.tf-homepage .tf-home-v3 > .tf-home-v3-trust,
.tf-homepage .tf-home-v3 > .tf-home-v3-industries{
width:calc(100% - (var(--tf-home-gutter) * 2))!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
/* =========================================================
SERVICE SECTIONS — FULL WIDTH + READABLE
========================================================= */
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services{
overflow:visible!important;
padding-left:0!important;
padding-right:0!important;
}
.tf-homepage .tf-sourcing-solutions > .shell,
.tf-homepage .tf-business-growth-services > .shell{
overflow:visible!important;
}
.tf-homepage .tf-service-card-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:12px!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
align-items:stretch!important;
}
.tf-homepage .tf-service-card{
display:grid!important;
grid-template-rows:auto auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
overflow:hidden!important;
min-width:0!important;
}
.tf-homepage .tf-service-card-hero{
height:220px!important;
min-height:220px!important;
max-height:none!important;
overflow:hidden!important;
}
.tf-homepage .tf-service-card-media{
inset:0 0 74px 0!important;
}
.tf-homepage .tf-service-card-directory-copy{
height:66px!important;
min-height:66px!important;
max-height:66px!important;
overflow:hidden!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
display:block!important;
width:100%!important;
max-width:100%!important;
margin:0!important;
font-size:17px!important;
line-height:1.08!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
/* Product/subcategory names were being clipped by fixed card/footer height. */
.tf-homepage .tf-service-mini-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
height:auto!important;
min-height:88px!important;
max-height:none!important;
overflow:visible!important;
}
.tf-homepage .tf-service-mini-grid > a{
display:grid!important;
grid-template-rows:46px minmax(24px,auto)!important;
align-content:center!important;
justify-items:center!important;
height:auto!important;
min-height:88px!important;
max-height:none!important;
padding:8px 6px!important;
overflow:visible!important;
}
.tf-homepage .tf-service-mini-image{
width:48px!important;
height:42px!important;
min-width:48px!important;
min-height:42px!important;
}
.tf-homepage .tf-service-mini-grid strong{
display:-webkit-box!important;
width:100%!important;
min-height:20px!important;
max-height:30px!important;
margin:2px 0 0!important;
padding:0 3px!important;
font-size:8px!important;
line-height:1.15!important;
font-weight:750!important;
text-align:center!important;
white-space:normal!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
/* =========================================================
ZOOM / NARROW DESKTOP RESPONSIVENESS
Browser zoom changes effective CSS viewport width.
These breakpoints preserve readability instead of shrinking
the entire section into a tiny centered shell.
========================================================= */
@media(min-width:1180px){
.tf-homepage .tf-service-card-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
@media(min-width:821px) and (max-width:1179px){
.tf-homepage .tf-service-card-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-homepage .tf-service-card-hero{
height:205px!important;
min-height:205px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:16px!important;
}
.tf-homepage .tf-service-mini-grid strong{
font-size:8.5px!important;
}
}
/* Curated "Discover more ways to source" should not become four microscopic cards. */
@media(min-width:1180px){
.tf-homepage .curated-b2b-rail{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
}
}
@media(min-width:821px) and (max-width:1179px){
.tf-homepage .curated-b2b-rail{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}
}
/* Category modules keep their full available width at any desktop zoom. */
@media(min-width:821px){
.tf-homepage .home-category-showcase,
.tf-homepage .tf-category-directory-module{
width:100%!important;
max-width:none!important;
min-width:0!important;
}
}
/* =========================================================
MOBILE
========================================================= */
@media(max-width:820px){
.tf-homepage .tf-home-v3 > .tf-home-v3-hero,
.tf-homepage .tf-home-v3 > .tf-home-v3-trust,
.tf-homepage .tf-home-v3 > .tf-home-v3-industries{
width:calc(100% - (var(--tf-home-gutter) * 2))!important;
}
.tf-homepage .tf-service-card-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:9px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-service-card-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-service-card{
flex:0 0 min(82vw,360px)!important;
width:min(82vw,360px)!important;
min-width:min(82vw,360px)!important;
max-width:min(82vw,360px)!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-service-card-hero{
height:176px!important;
min-height:176px!important;
}
.tf-homepage .tf-service-card-media{
inset:0 0 60px 0!important;
}
.tf-homepage .tf-service-card-directory-copy{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
}
.tf-homepage .tf-service-card-directory-copy h3{
font-size:14px!important;
}
.tf-homepage .tf-service-mini-grid{
min-height:78px!important;
}
.tf-homepage .tf-service-mini-grid > a{
grid-template-rows:36px minmax(22px,auto)!important;
min-height:78px!important;
padding:6px 4px!important;
}
.tf-homepage .tf-service-mini-image{
width:38px!important;
height:34px!important;
min-width:38px!important;
min-height:34px!important;
}
.tf-homepage .tf-service-mini-grid strong{
font-size:7px!important;
min-height:18px!important;
max-height:28px!important;
}
.tf-homepage .curated-b2b-rail{
display:flex!important;
flex-wrap:nowrap!important;
gap:9px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .curated-b2b-card{
flex:0 0 min(88vw,420px)!important;
min-width:min(88vw,420px)!important;
max-width:min(88vw,420px)!important;
height:auto!important;
min-height:0!important;
scroll-snap-align:start!important;
}
}
/* ===== featured-marketplace-title-strip-fix-18.4.140.css ===== */
/* TradesFolks 18.4.140
Featured Marketplace — yellow title strip + product-name alignment fix.
*/
@media(min-width:821px){
/* Keep card body geometry stable */
.tf-homepage .featured-marketplace-card,
.tf-homepage .tf-featured-card,
.tf-homepage .marketplace-product-card{
overflow:hidden!important;
height:auto!important;
min-height:0!important;
}
/* Product image area must end cleanly before title strip */
.tf-homepage .featured-marketplace-card-media,
.tf-homepage .tf-featured-card-media,
.tf-homepage .marketplace-product-card-media{
margin:0!important;
padding-bottom:0!important;
}
/* Canonical yellow footer/title strip */
.tf-homepage .featured-marketplace-card-title,
.tf-homepage .tf-featured-card-title,
.tf-homepage .marketplace-product-card-title,
.tf-homepage .featured-marketplace-card-footer,
.tf-homepage .tf-featured-card-footer{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:54px!important;
height:54px!important;
max-height:54px!important;
margin:0!important;
padding:7px 16px 13px!important;
box-sizing:border-box!important;
background:linear-gradient(180deg,#ffd453 0%,#ffc52d 100%)!important;
border-top:1px solid rgba(230,164,0,.35)!important;
overflow:hidden!important;
}
/* Product name: centered, visible, no edge clipping */
.tf-homepage .featured-marketplace-card-title h3,
.tf-homepage .featured-marketplace-card-title strong,
.tf-homepage .featured-marketplace-card-title a,
.tf-homepage .tf-featured-card-title h3,
.tf-homepage .tf-featured-card-title strong,
.tf-homepage .tf-featured-card-title a,
.tf-homepage .marketplace-product-card-title h3,
.tf-homepage .marketplace-product-card-title strong,
.tf-homepage .marketplace-product-card-title a,
.tf-homepage .featured-marketplace-card-footer h3,
.tf-homepage .featured-marketplace-card-footer strong,
.tf-homepage .tf-featured-card-footer h3,
.tf-homepage .tf-featured-card-footer strong{
display:-webkit-box!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
margin:0!important;
padding:0 2px!important;
color:#102b57!important;
font-size:13px!important;
line-height:1.16!important;
font-weight:800!important;
text-align:center!important;
white-space:normal!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
text-decoration:none!important;
}
/* Small white drag/indicator line must sit at bottom and never overlap text */
.tf-homepage .featured-marketplace-card-title::after,
.tf-homepage .tf-featured-card-title::after,
.tf-homepage .marketplace-product-card-title::after,
.tf-homepage .featured-marketplace-card-footer::after,
.tf-homepage .tf-featured-card-footer::after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:4px!important;
width:26px!important;
height:3px!important;
border-radius:999px!important;
background:rgba(255,255,255,.96)!important;
transform:translateX(-50%)!important;
pointer-events:none!important;
}
}
/* Mid-size desktop/tablet zoom */
@media(min-width:821px) and (max-width:1180px){
.tf-homepage .featured-marketplace-card-title,
.tf-homepage .tf-featured-card-title,
.tf-homepage .marketplace-product-card-title,
.tf-homepage .featured-marketplace-card-footer,
.tf-homepage .tf-featured-card-footer{
min-height:50px!important;
height:50px!important;
max-height:50px!important;
padding:6px 10px 12px!important;
}
.tf-homepage .featured-marketplace-card-title h3,
.tf-homepage .featured-marketplace-card-title strong,
.tf-homepage .featured-marketplace-card-title a,
.tf-homepage .tf-featured-card-title h3,
.tf-homepage .tf-featured-card-title strong,
.tf-homepage .tf-featured-card-title a,
.tf-homepage .marketplace-product-card-title h3,
.tf-homepage .marketplace-product-card-title strong,
.tf-homepage .marketplace-product-card-title a{
font-size:12px!important;
}
}
/* Mobile: same visual language, compact */
@media(max-width:820px){
.tf-homepage .featured-marketplace-card-title,
.tf-homepage .tf-featured-card-title,
.tf-homepage .marketplace-product-card-title,
.tf-homepage .featured-marketplace-card-footer,
.tf-homepage .tf-featured-card-footer{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-height:48px!important;
height:48px!important;
max-height:48px!important;
margin:0!important;
padding:6px 9px 11px!important;
box-sizing:border-box!important;
background:linear-gradient(180deg,#ffd453 0%,#ffc52d 100%)!important;
overflow:hidden!important;
}
.tf-homepage .featured-marketplace-card-title h3,
.tf-homepage .featured-marketplace-card-title strong,
.tf-homepage .featured-marketplace-card-title a,
.tf-homepage .tf-featured-card-title h3,
.tf-homepage .tf-featured-card-title strong,
.tf-homepage .tf-featured-card-title a,
.tf-homepage .marketplace-product-card-title h3,
.tf-homepage .marketplace-product-card-title strong,
.tf-homepage .marketplace-product-card-title a{
display:-webkit-box!important;
width:100%!important;
margin:0!important;
color:#102b57!important;
font-size:11px!important;
line-height:1.15!important;
font-weight:800!important;
text-align:center!important;
white-space:normal!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-homepage .featured-marketplace-card-title::after,
.tf-homepage .tf-featured-card-title::after,
.tf-homepage .marketplace-product-card-title::after,
.tf-homepage .featured-marketplace-card-footer::after,
.tf-homepage .tf-featured-card-footer::after{
content:""!important;
position:absolute!important;
left:50%!important;
bottom:3px!important;
width:22px!important;
height:3px!important;
border-radius:999px!important;
background:#fff!important;
transform:translateX(-50%)!important;
}
}
/* ===== rfq-enterprise-app-ui-18.4.143.css ===== */
/* TradesFolks 18.4.143
RFQ Marketplace — exact-class premium/mobile-app UI.
No heuristic parent-class styling.
*/
.tf-homepage{
--tf-rfq-gutter:28px;
}
@media(max-width:1279px){.tf-homepage{--tf-rfq-gutter:22px}}
@media(max-width:1023px){.tf-homepage{--tf-rfq-gutter:16px}}
@media(max-width:820px){.tf-homepage{--tf-rfq-gutter:8px}}
@media(max-width:430px){.tf-homepage{--tf-rfq-gutter:6px}}
/* =========================================
OUTER SECTION — same horizontal gutter as hero
========================================= */
.tf-homepage .tf-rfq-enterprise{
width:calc(100% - (var(--tf-rfq-gutter) * 2))!important;
max-width:none!important;
margin:18px auto!important;
padding:0!important;
background:transparent!important;
overflow:visible!important;
}
.tf-homepage .tf-rfq-enterprise > .shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0!important;
}
/* =========================================
HEADER — always light, readable
========================================= */
.tf-homepage .tf-rfq-enterprise-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
width:100%!important;
margin:0 0 12px!important;
padding:0!important;
background:transparent!important;
color:#102b57!important;
}
.tf-homepage .tf-rfq-enterprise-head > div{
min-width:0!important;
}
.tf-homepage .tf-rfq-enterprise-head .eyebrow{
display:block!important;
margin:0 0 4px!important;
color:#0867d8!important;
font-size:9px!important;
line-height:1!important;
font-weight:850!important;
letter-spacing:.11em!important;
}
.tf-homepage .tf-rfq-enterprise-head h2{
margin:0!important;
color:#102b57!important;
font-size:32px!important;
line-height:1.02!important;
letter-spacing:-.04em!important;
font-weight:800!important;
}
.tf-homepage .tf-rfq-enterprise-head p{
margin:5px 0 0!important;
color:#61748d!important;
font-size:11px!important;
line-height:1.35!important;
}
.tf-homepage .tf-rfq-enterprise-head > a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
flex:0 0 auto!important;
min-height:38px!important;
padding:0 14px!important;
border:1px solid #d8e4f1!important;
border-radius:12px!important;
background:#fff!important;
color:#0667d8!important;
font-size:10px!important;
line-height:1!important;
font-weight:800!important;
box-shadow:0 5px 14px rgba(16,43,87,.035)!important;
text-decoration:none!important;
}
/* =========================================
DESKTOP GRID
========================================= */
.tf-homepage .tf-rfq-enterprise-layout{
display:grid!important;
grid-template-columns:minmax(350px,.78fr) minmax(0,1.22fr)!important;
gap:12px!important;
width:100%!important;
max-width:none!important;
align-items:stretch!important;
}
/* Left intro card */
.tf-homepage .tf-rfq-enterprise-intro{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
min-width:0!important;
min-height:330px!important;
margin:0!important;
padding:28px!important;
border:1px solid rgba(255,255,255,.13)!important;
border-radius:18px!important;
background:
radial-gradient(circle at 88% 8%,rgba(255,195,47,.14),transparent 27%),
linear-gradient(145deg,#0a2b5b 0%,#143d73 100%)!important;
color:#fff!important;
box-shadow:0 14px 34px rgba(9,42,88,.12)!important;
overflow:hidden!important;
}
.tf-homepage .tf-rfq-enterprise-intro > span{
align-self:flex-start!important;
margin:0 0 18px!important;
padding:8px 13px!important;
border-radius:999px!important;
background:#ffbf2f!important;
color:#102b57!important;
font-size:9px!important;
line-height:1!important;
font-weight:850!important;
letter-spacing:.04em!important;
}
.tf-homepage .tf-rfq-enterprise-intro h3{
max-width:480px!important;
margin:0!important;
color:#fff!important;
font-size:29px!important;
line-height:1.06!important;
letter-spacing:-.035em!important;
font-weight:800!important;
}
.tf-homepage .tf-rfq-enterprise-intro > p{
max-width:520px!important;
margin:12px 0 0!important;
color:rgba(255,255,255,.84)!important;
font-size:11px!important;
line-height:1.45!important;
}
.tf-homepage .tf-rfq-enterprise-actions{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
margin-top:24px!important;
}
.tf-homepage .tf-rfq-enterprise-actions a{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
min-width:0!important;
min-height:62px!important;
padding:10px 12px!important;
border:1px solid rgba(255,255,255,.22)!important;
border-radius:12px!important;
background:rgba(255,255,255,.08)!important;
color:rgba(255,255,255,.80)!important;
font-size:9px!important;
line-height:1.2!important;
text-decoration:none!important;
}
.tf-homepage .tf-rfq-enterprise-actions a b{
display:block!important;
margin-top:4px!important;
color:#fff!important;
font-size:13px!important;
line-height:1.1!important;
}
.tf-homepage .tf-rfq-enterprise-intro > small{
display:block!important;
margin-top:16px!important;
color:rgba(255,255,255,.56)!important;
font-size:8px!important;
line-height:1.3!important;
}
/* Right RFQ list/card */
.tf-homepage .tf-rfq-enterprise-list{
display:grid!important;
grid-template-columns:1fr!important;
gap:10px!important;
min-width:0!important;
width:100%!important;
}
.tf-homepage .tf-rfq-enterprise-card{
display:flex!important;
flex-direction:column!important;
min-width:0!important;
min-height:330px!important;
height:100%!important;
margin:0!important;
padding:22px!important;
border:1px solid #d9e3ef!important;
border-radius:18px!important;
background:linear-gradient(180deg,#fffdf7 0%,#fff 72%)!important;
box-shadow:0 12px 28px rgba(16,43,87,.06)!important;
overflow:hidden!important;
}
.tf-homepage .tf-rfq-enterprise-meta{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
min-width:0!important;
}
.tf-homepage .tf-rfq-enterprise-meta > span{
display:inline-flex!important;
align-items:center!important;
min-height:30px!important;
padding:0 11px!important;
border-radius:999px!important;
background:#e5f8ef!important;
color:#078850!important;
font-size:9px!important;
line-height:1!important;
font-weight:800!important;
}
.tf-homepage .tf-rfq-enterprise-meta > span::before{
content:""!important;
width:7px!important;
height:7px!important;
margin-right:7px!important;
border-radius:50%!important;
background:#23ad69!important;
box-shadow:0 0 0 4px rgba(35,173,105,.10)!important;
}
.tf-homepage .tf-rfq-enterprise-meta small{
min-width:0!important;
color:#667991!important;
font-size:9px!important;
line-height:1.2!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-rfq-enterprise-card > h3{
margin:16px 0 14px!important;
color:#102b57!important;
font-size:22px!important;
line-height:1.08!important;
letter-spacing:-.025em!important;
font-weight:800!important;
}
.tf-homepage .tf-rfq-enterprise-card dl{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
margin:0!important;
}
.tf-homepage .tf-rfq-enterprise-card dl > div{
min-width:0!important;
min-height:66px!important;
padding:11px 12px!important;
border-radius:12px!important;
background:#f5f7fa!important;
}
.tf-homepage .tf-rfq-enterprise-card dt{
margin:0 0 5px!important;
color:#72849a!important;
font-size:8px!important;
line-height:1!important;
}
.tf-homepage .tf-rfq-enterprise-card dd{
display:flex!important;
align-items:center!important;
flex-wrap:wrap!important;
gap:7px!important;
min-width:0!important;
margin:0!important;
color:#102b57!important;
font-size:13px!important;
line-height:1.15!important;
font-weight:800!important;
}
/* Compact in-field country badge */
.tf-homepage .tf-rfq-country-inline{
display:inline-flex!important;
align-items:center!important;
gap:5px!important;
max-width:100%!important;
padding:3px 7px 3px 4px!important;
border:1px solid #efc34c!important;
border-radius:999px!important;
background:#fff9e5!important;
color:#102b57!important;
font-size:9px!important;
line-height:1!important;
font-weight:800!important;
}
.tf-homepage .tf-rfq-country-inline img{
width:18px!important;
height:18px!important;
min-width:18px!important;
border-radius:50%!important;
object-fit:cover!important;
border:1px solid #fff!important;
box-shadow:0 0 0 1px rgba(16,43,87,.12)!important;
}
.tf-homepage .tf-rfq-enterprise-buyer{
display:flex!important;
align-items:center!important;
gap:8px!important;
margin-top:auto!important;
padding-top:14px!important;
border-top:1px solid #e5ebf2!important;
color:#5b708a!important;
font-size:10px!important;
}
.tf-homepage .tf-rfq-enterprise-buyer b{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
width:22px!important;
height:22px!important;
border-radius:50%!important;
background:#0b6dd8!important;
color:#fff!important;
font-size:11px!important;
}
.tf-homepage .tf-rfq-enterprise-cta{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
min-height:44px!important;
margin-top:12px!important;
padding:0 14px!important;
border-radius:11px!important;
background:#08285c!important;
color:#fff!important;
font-size:10px!important;
line-height:1!important;
font-weight:800!important;
text-decoration:none!important;
}
/* =========================================
TABLET / ZOOM
========================================= */
@media(min-width:821px) and (max-width:1179px){
.tf-homepage .tf-rfq-enterprise-layout{
grid-template-columns:minmax(280px,.8fr) minmax(0,1.2fr)!important;
gap:10px!important;
}
.tf-homepage .tf-rfq-enterprise-intro,
.tf-homepage .tf-rfq-enterprise-card{
min-height:310px!important;
}
.tf-homepage .tf-rfq-enterprise-intro{
padding:22px!important;
}
.tf-homepage .tf-rfq-enterprise-intro h3{
font-size:24px!important;
}
}
/* =========================================
MOBILE APP MODE — smaller, cleaner
========================================= */
@media(max-width:820px){
.tf-homepage .tf-rfq-enterprise{
width:calc(100% - (var(--tf-rfq-gutter) * 2))!important;
margin:12px auto!important;
}
.tf-homepage .tf-rfq-enterprise-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:8px!important;
margin-bottom:9px!important;
}
.tf-homepage .tf-rfq-enterprise-head .eyebrow{
margin-bottom:3px!important;
font-size:7px!important;
}
.tf-homepage .tf-rfq-enterprise-head h2{
font-size:21px!important;
line-height:1.03!important;
}
.tf-homepage .tf-rfq-enterprise-head p{
max-width:260px!important;
margin-top:3px!important;
font-size:9px!important;
line-height:1.25!important;
}
.tf-homepage .tf-rfq-enterprise-head > a{
min-height:34px!important;
padding:0 11px!important;
border-radius:10px!important;
font-size:9px!important;
}
.tf-homepage .tf-rfq-enterprise-layout{
display:grid!important;
grid-template-columns:1fr!important;
gap:8px!important;
}
.tf-homepage .tf-rfq-enterprise-intro{
min-height:0!important;
height:auto!important;
padding:16px!important;
border-radius:15px!important;
}
.tf-homepage .tf-rfq-enterprise-intro > span{
margin-bottom:11px!important;
padding:6px 10px!important;
font-size:7px!important;
}
.tf-homepage .tf-rfq-enterprise-intro h3{
max-width:320px!important;
font-size:21px!important;
line-height:1.06!important;
}
.tf-homepage .tf-rfq-enterprise-intro > p{
max-width:340px!important;
margin-top:8px!important;
font-size:9px!important;
line-height:1.35!important;
}
.tf-homepage .tf-rfq-enterprise-actions{
gap:7px!important;
margin-top:14px!important;
}
.tf-homepage .tf-rfq-enterprise-actions a{
min-height:50px!important;
padding:8px 10px!important;
border-radius:10px!important;
font-size:7px!important;
}
.tf-homepage .tf-rfq-enterprise-actions a b{
margin-top:3px!important;
font-size:11px!important;
}
.tf-homepage .tf-rfq-enterprise-intro > small{
display:none!important;
}
.tf-homepage .tf-rfq-enterprise-card{
min-height:0!important;
height:auto!important;
padding:14px!important;
border-radius:15px!important;
}
.tf-homepage .tf-rfq-enterprise-meta > span{
min-height:26px!important;
padding:0 9px!important;
font-size:7px!important;
}
.tf-homepage .tf-rfq-enterprise-meta > span::before{
width:6px!important;
height:6px!important;
margin-right:6px!important;
box-shadow:0 0 0 3px rgba(35,173,105,.10)!important;
}
.tf-homepage .tf-rfq-enterprise-meta small{
max-width:110px!important;
font-size:7px!important;
}
.tf-homepage .tf-rfq-enterprise-card > h3{
margin:11px 0 10px!important;
font-size:20px!important;
line-height:1.04!important;
}
.tf-homepage .tf-rfq-enterprise-card dl{
gap:7px!important;
}
.tf-homepage .tf-rfq-enterprise-card dl > div{
min-height:58px!important;
padding:9px 10px!important;
border-radius:10px!important;
}
.tf-homepage .tf-rfq-enterprise-card dt{
margin-bottom:4px!important;
font-size:7px!important;
}
.tf-homepage .tf-rfq-enterprise-card dd{
gap:5px!important;
font-size:11px!important;
}
.tf-homepage .tf-rfq-country-inline{
padding:2px 6px 2px 3px!important;
font-size:7px!important;
}
.tf-homepage .tf-rfq-country-inline img{
width:15px!important;
height:15px!important;
min-width:15px!important;
}
.tf-homepage .tf-rfq-enterprise-buyer{
margin-top:11px!important;
padding-top:10px!important;
font-size:8px!important;
}
.tf-homepage .tf-rfq-enterprise-buyer b{
width:19px!important;
height:19px!important;
font-size:9px!important;
}
.tf-homepage .tf-rfq-enterprise-cta{
min-height:38px!important;
margin-top:9px!important;
padding:0 11px!important;
border-radius:10px!important;
font-size:9px!important;
}
}
@media(max-width:430px){
.tf-homepage .tf-rfq-enterprise-head{
grid-template-columns:1fr!important;
}
.tf-homepage .tf-rfq-enterprise-head > a{
justify-self:start!important;
}
.tf-homepage .tf-rfq-enterprise-intro{
padding:14px!important;
}
.tf-homepage .tf-rfq-enterprise-card{
padding:12px!important;
}
.tf-homepage .tf-rfq-enterprise-card > h3{
font-size:18px!important;
}
}
/* ===== commerce-capabilities-premium-18.4.144.css ===== */
/* TradesFolks 18.4.144
Built for confident sourcing — premium procurement capability cards.
Exact `.tf-commerce-capabilities-*` implementation; no heuristic selectors.
*/
.tf-homepage .tf-commerce-capabilities{
width:calc(100% - 56px)!important;
max-width:none!important;
margin:18px auto!important;
padding:24px 0 26px!important;
overflow:hidden!important;
border:1px solid #e5ebf2!important;
border-radius:22px!important;
background:
radial-gradient(circle at 92% 7%,rgba(255,191,47,.09),transparent 22%),
linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
box-shadow:0 16px 40px rgba(16,43,87,.045)!important;
}
.tf-homepage .tf-commerce-capabilities>.shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0 24px!important;
}
/* Header */
.tf-homepage .tf-commerce-capabilities-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:18px!important;
margin:0 0 16px!important;
}
.tf-homepage .tf-commerce-capabilities-head .eyebrow{
display:block!important;
margin:0 0 5px!important;
color:#0c64d7!important;
font-size:9px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:.12em!important;
}
.tf-homepage .tf-commerce-capabilities-head h2{
margin:0!important;
max-width:760px!important;
color:#0b2347!important;
font-size:clamp(29px,2.35vw,40px)!important;
line-height:1.02!important;
letter-spacing:-.045em!important;
font-weight:820!important;
}
.tf-homepage .tf-commerce-capabilities-head p{
max-width:640px!important;
margin:6px 0 0!important;
color:#637891!important;
font-size:11px!important;
line-height:1.45!important;
}
.tf-homepage .tf-commerce-capabilities-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:9px!important;
min-height:40px!important;
padding:0 15px!important;
border:1px solid #d6e2ef!important;
border-radius:999px!important;
background:#fff!important;
color:#0b67d8!important;
font-size:9px!important;
line-height:1!important;
font-weight:850!important;
text-decoration:none!important;
box-shadow:0 6px 16px rgba(16,43,87,.045)!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tf-homepage .tf-commerce-capabilities-head>a:hover{
transform:translateY(-1px)!important;
border-color:#bcd3eb!important;
box-shadow:0 10px 22px rgba(16,43,87,.08)!important;
}
/* Grid */
.tf-homepage .tf-commerce-capabilities-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:12px!important;
width:100%!important;
}
.tf-homepage .tf-commerce-capability-card{
--cap-accent:#0d6edc;
--cap-soft:#eaf3ff;
--cap-line:#cfe2f8;
display:grid!important;
grid-template-columns:140px minmax(0,1fr)!important;
min-width:0!important;
min-height:226px!important;
overflow:hidden!important;
border:1px solid #dbe5ef!important;
border-radius:18px!important;
background:#fff!important;
padding:0!important;
box-shadow:0 10px 24px rgba(16,43,87,.05)!important;
transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease!important;
}
.tf-homepage .tf-commerce-capability-card.is-trust{
--cap-accent:#146dd3;
--cap-soft:#e9f3ff;
--cap-line:#c7def7;
}
.tf-homepage .tf-commerce-capability-card.is-commerce{
--cap-accent:#986d00;
--cap-soft:#fff6d9;
--cap-line:#f2d887;
}
.tf-homepage .tf-commerce-capability-card.is-discovery{
--cap-accent:#0a8b69;
--cap-soft:#e9f8f3;
--cap-line:#c6eadf;
}
.tf-homepage .tf-commerce-capability-card.is-secure{
--cap-accent:#6c57c7;
--cap-soft:#f1edff;
--cap-line:#dcd3fb;
}
.tf-homepage .tf-commerce-capability-card:hover{
transform:translateY(-3px)!important;
border-color:var(--cap-line)!important;
box-shadow:0 18px 34px rgba(16,43,87,.09)!important;
}
/* Visual rail */
.tf-homepage .tf-commerce-capability-visual{
position:relative!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
min-width:0!important;
overflow:hidden!important;
padding:18px 12px!important;
background:
radial-gradient(circle at 50% 28%,rgba(255,255,255,.9),transparent 32%),
linear-gradient(160deg,var(--cap-soft) 0%,#fff 100%)!important;
border-right:1px solid #e7edf4!important;
}
.tf-homepage .tf-commerce-capability-visual::before{
content:""!important;
position:absolute!important;
width:140px!important;
height:140px!important;
border:1px solid var(--cap-line)!important;
border-radius:50%!important;
opacity:.5!important;
transform:translate(38px,-55px)!important;
}
.tf-homepage .tf-commerce-capability-icon{
position:relative!important;
z-index:1!important;
display:grid!important;
width:62px!important;
height:62px!important;
place-items:center!important;
border:1px solid var(--cap-line)!important;
border-radius:18px!important;
background:#fff!important;
color:var(--cap-accent)!important;
box-shadow:0 9px 20px rgba(16,43,87,.08)!important;
}
.tf-homepage .tf-commerce-capability-icon svg{
width:34px!important;
height:34px!important;
stroke:currentColor!important;
stroke-width:2.2!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.tf-homepage .tf-commerce-capability-visual>span{
position:relative!important;
z-index:1!important;
margin-top:13px!important;
color:var(--cap-accent)!important;
font-size:8px!important;
line-height:1.2!important;
font-weight:850!important;
text-align:center!important;
letter-spacing:.035em!important;
}
.tf-homepage .tf-commerce-capability-visual>i{
position:absolute!important;
display:block!important;
width:44px!important;
height:5px!important;
border-radius:99px!important;
background:var(--cap-line)!important;
opacity:.55!important;
bottom:19px!important;
}
.tf-homepage .tf-commerce-capability-visual>i:nth-of-type(1){left:22px!important;width:32px!important}
.tf-homepage .tf-commerce-capability-visual>i:nth-of-type(2){right:18px!important;width:19px!important}
/* Body */
.tf-homepage .tf-commerce-capability-body{
display:flex!important;
min-width:0!important;
flex-direction:column!important;
padding:18px 18px 15px!important;
}
.tf-homepage .tf-commerce-capability-top{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
}
.tf-homepage .tf-commerce-capability-top b{
display:inline-flex!important;
width:auto!important;
height:auto!important;
min-height:28px!important;
align-items:center!important;
justify-content:center!important;
padding:0 9px!important;
border-radius:9px!important;
background:var(--cap-soft)!important;
color:var(--cap-accent)!important;
font-size:10px!important;
line-height:1!important;
font-weight:900!important;
}
.tf-homepage .tf-commerce-capability-top span{
display:inline-flex!important;
min-width:0!important;
min-height:26px!important;
max-width:46%!important;
align-items:center!important;
border:1px solid var(--cap-line)!important;
border-radius:999px!important;
background:#fff!important;
padding:0 8px!important;
color:var(--cap-accent)!important;
font-size:7px!important;
line-height:1!important;
font-weight:850!important;
white-space:nowrap!important;
overflow:hidden!important;
text-overflow:ellipsis!important;
}
.tf-homepage .tf-commerce-capability-card h3{
max-width:28ch!important;
margin:17px 0 7px!important;
color:#0d274b!important;
font-size:19px!important;
line-height:1.1!important;
letter-spacing:-.022em!important;
font-weight:800!important;
}
.tf-homepage .tf-commerce-capability-card p{
max-width:50ch!important;
margin:0!important;
color:#657a92!important;
font-size:10px!important;
line-height:1.45!important;
}
.tf-homepage .tf-commerce-capability-card>a,
.tf-homepage .tf-commerce-capability-body>a{
display:flex!important;
min-height:36px!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
margin-top:auto!important;
border-top:1px solid #e6edf4!important;
padding-top:11px!important;
color:var(--cap-accent)!important;
font-size:9px!important;
line-height:1!important;
font-weight:850!important;
text-decoration:none!important;
}
.tf-homepage .tf-commerce-capability-body>a span{
display:grid!important;
width:24px!important;
height:24px!important;
flex:0 0 24px!important;
place-items:center!important;
border-radius:50%!important;
background:var(--cap-soft)!important;
color:var(--cap-accent)!important;
transition:transform .18s ease!important;
}
.tf-homepage .tf-commerce-capability-card:hover .tf-commerce-capability-body>a span{
transform:translateX(2px)!important;
}
/* 4 cards: maintain balanced density */
@media(min-width:1500px){
.tf-homepage .tf-commerce-capabilities-grid:has(.tf-commerce-capability-card:nth-child(4)){
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.tf-homepage .tf-commerce-capabilities-grid:has(.tf-commerce-capability-card:nth-child(4)) .tf-commerce-capability-card{
grid-template-columns:112px minmax(0,1fr)!important;
}
}
/* Tablet / zoom */
@media(min-width:821px) and (max-width:1179px){
.tf-homepage .tf-commerce-capabilities{
width:calc(100% - 32px)!important;
padding:20px 0 22px!important;
}
.tf-homepage .tf-commerce-capabilities>.shell{
padding:0 16px!important;
}
.tf-homepage .tf-commerce-capabilities-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.tf-homepage .tf-commerce-capability-card{
grid-template-columns:120px minmax(0,1fr)!important;
min-height:216px!important;
}
.tf-homepage .tf-commerce-capability-card h3{
font-size:17px!important;
}
}
/* Mobile app mode */
@media(max-width:820px){
.tf-homepage .tf-commerce-capabilities{
width:calc(100% - 16px)!important;
margin:12px auto!important;
padding:16px 0 17px!important;
border-radius:18px!important;
}
.tf-homepage .tf-commerce-capabilities>.shell{
padding:0 10px!important;
}
.tf-homepage .tf-commerce-capabilities-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:8px!important;
margin-bottom:10px!important;
}
.tf-homepage .tf-commerce-capabilities-head .eyebrow{
margin-bottom:3px!important;
font-size:7px!important;
}
.tf-homepage .tf-commerce-capabilities-head h2{
font-size:21px!important;
line-height:1.03!important;
}
.tf-homepage .tf-commerce-capabilities-head p{
max-width:280px!important;
margin-top:3px!important;
font-size:9px!important;
line-height:1.3!important;
}
.tf-homepage .tf-commerce-capabilities-head>a{
min-height:34px!important;
padding:0 10px!important;
font-size:8px!important;
}
.tf-homepage .tf-commerce-capabilities-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:9px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding:0 1px 4px!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-commerce-capabilities-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-commerce-capability-card{
grid-template-columns:88px minmax(0,1fr)!important;
flex:0 0 min(86vw,355px)!important;
width:min(86vw,355px)!important;
min-width:min(86vw,355px)!important;
min-height:176px!important;
border-radius:15px!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-commerce-capability-visual{
padding:12px 7px!important;
}
.tf-homepage .tf-commerce-capability-icon{
width:46px!important;
height:46px!important;
border-radius:14px!important;
}
.tf-homepage .tf-commerce-capability-icon svg{
width:25px!important;
height:25px!important;
}
.tf-homepage .tf-commerce-capability-visual>span{
margin-top:8px!important;
font-size:6.5px!important;
}
.tf-homepage .tf-commerce-capability-body{
padding:12px 12px 10px!important;
}
.tf-homepage .tf-commerce-capability-top b{
min-height:23px!important;
padding:0 7px!important;
font-size:8px!important;
}
.tf-homepage .tf-commerce-capability-top span{
min-height:22px!important;
max-width:48%!important;
padding:0 6px!important;
font-size:6px!important;
}
.tf-homepage .tf-commerce-capability-card h3{
margin:11px 0 5px!important;
font-size:15px!important;
line-height:1.08!important;
}
.tf-homepage .tf-commerce-capability-card p{
display:-webkit-box!important;
font-size:8px!important;
line-height:1.35!important;
overflow:hidden!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-homepage .tf-commerce-capability-body>a{
min-height:30px!important;
padding-top:8px!important;
font-size:7px!important;
}
.tf-homepage .tf-commerce-capability-body>a span{
width:20px!important;
height:20px!important;
flex-basis:20px!important;
}
}
@media(max-width:430px){
.tf-homepage .tf-commerce-capabilities{
width:calc(100% - 12px)!important;
}
.tf-homepage .tf-commerce-capabilities-head{
grid-template-columns:1fr!important;
}
.tf-homepage .tf-commerce-capabilities-head>a{
justify-self:start!important;
}
.tf-homepage .tf-commerce-capability-card{
flex-basis:88vw!important;
width:88vw!important;
min-width:88vw!important;
}
}
/* ===== industry-collections-icons-isolated-18.4.146.css ===== */
/* TradesFolks 18.4.146
Industry Collections — isolated icon-based redesign.
Every selector is scoped under `.tf-homepage .tf-industry-enterprise`
so no other homepage section is modified.
*/
.tf-homepage .tf-industry-enterprise{
width:calc(100% - 56px)!important;
max-width:none!important;
margin:18px auto!important;
padding:22px 0 24px!important;
overflow:hidden!important;
border:1px solid #e4ebf3!important;
border-radius:22px!important;
background:linear-gradient(180deg,#fbfdff 0%,#f6f9fd 100%)!important;
box-shadow:0 14px 34px rgba(16,43,87,.04)!important;
}
.tf-homepage .tf-industry-enterprise>.shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0 22px!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
margin:0 0 14px!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head>div>span{
display:block!important;
margin:0 0 5px!important;
color:#0b67d8!important;
font-size:8px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:.12em!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head h2{
max-width:760px!important;
margin:0!important;
color:#0b2448!important;
font-size:clamp(28px,2.25vw,38px)!important;
line-height:1.03!important;
letter-spacing:-.04em!important;
font-weight:820!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head p{
max-width:650px!important;
margin:5px 0 0!important;
color:#657991!important;
font-size:10px!important;
line-height:1.4!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head>a{
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
flex:0 0 auto!important;
min-height:38px!important;
padding:0 14px!important;
border:1px solid #d7e3ef!important;
border-radius:999px!important;
background:#fff!important;
color:#0b67d8!important;
font-size:8px!important;
line-height:1!important;
font-weight:850!important;
text-decoration:none!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:11px!important;
width:100%!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card{
--industry-accent:#0b67d8;
--industry-soft:#eaf3ff;
--industry-line:#cfe1f6;
display:grid!important;
grid-template-columns:98px minmax(0,1fr)!important;
min-width:0!important;
min-height:156px!important;
overflow:hidden!important;
border:1px solid #dce5ef!important;
border-radius:17px!important;
background:#fff!important;
color:#102b57!important;
text-decoration:none!important;
box-shadow:0 8px 20px rgba(16,43,87,.04)!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-agri{--industry-accent:#15805b;--industry-soft:#e8f6ef;--industry-line:#cae8dc}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-fashion{--industry-accent:#6a58bd;--industry-soft:#f0edff;--industry-line:#dad3f8}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-mobility{--industry-accent:#2b6cb0;--industry-soft:#eaf2fb;--industry-line:#ccdef1}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-wellness{--industry-accent:#947018;--industry-soft:#fff7dd;--industry-line:#edda92}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-services{--industry-accent:#117d9b;--industry-soft:#e8f6fa;--industry-line:#cae8ee}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-science{--industry-accent:#5368a7;--industry-soft:#edf1fb;--industry-line:#d4dcf2}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-build{--industry-accent:#92613b;--industry-soft:#f8efe8;--industry-line:#ead8c9}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-technology{--industry-accent:#226fca;--industry-soft:#eaf3fd;--industry-line:#cce1f8}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card:hover{
transform:translateY(-2px)!important;
border-color:var(--industry-line)!important;
box-shadow:0 14px 28px rgba(16,43,87,.08)!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-iconwrap{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-width:0!important;
padding:16px 8px!important;
overflow:hidden!important;
border-right:1px solid #e7edf4!important;
background:radial-gradient(circle at 50% 42%,#fff 0%,#fff 34%,var(--industry-soft) 100%)!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-index{
position:absolute!important;
top:9px!important;
left:9px!important;
display:grid!important;
width:27px!important;
height:27px!important;
place-items:center!important;
border:1px solid var(--industry-line)!important;
border-radius:8px!important;
background:#fff!important;
color:var(--industry-accent)!important;
font-size:7px!important;
line-height:1!important;
font-weight:900!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-kicker{
position:absolute!important;
right:7px!important;
bottom:8px!important;
left:7px!important;
color:var(--industry-accent)!important;
font-size:5.5px!important;
line-height:1!important;
font-weight:850!important;
text-align:center!important;
letter-spacing:.035em!important;
text-transform:uppercase!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon{
display:grid!important;
width:54px!important;
height:54px!important;
place-items:center!important;
border:1px solid var(--industry-line)!important;
border-radius:16px!important;
background:#fff!important;
color:var(--industry-accent)!important;
box-shadow:0 8px 18px rgba(16,43,87,.07)!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon svg{
width:30px!important;
height:30px!important;
stroke:currentColor!important;
stroke-width:2.15!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content{
display:flex!important;
min-width:0!important;
flex-direction:column!important;
padding:15px 14px 12px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content h3{
display:-webkit-box!important;
max-width:100%!important;
margin:12px 0 0!important;
color:#0e284c!important;
font-size:14px!important;
line-height:1.12!important;
letter-spacing:-.018em!important;
font-weight:800!important;
overflow:hidden!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content p{
margin:5px 0 0!important;
color:#71839a!important;
font-size:7.5px!important;
line-height:1.35!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content>b{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
margin-top:auto!important;
padding-top:9px!important;
border-top:1px solid #e8edf3!important;
color:var(--industry-accent)!important;
font-size:7.5px!important;
line-height:1!important;
font-weight:850!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content>b i{
display:grid!important;
width:21px!important;
height:21px!important;
flex:0 0 21px!important;
place-items:center!important;
border-radius:50%!important;
background:var(--industry-soft)!important;
color:var(--industry-accent)!important;
font-style:normal!important;
}
@media(min-width:821px) and (max-width:1179px){
.tf-homepage .tf-industry-enterprise{
width:calc(100% - 32px)!important;
}
.tf-homepage .tf-industry-enterprise>.shell{
padding:0 16px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:10px!important;
}
}
@media(max-width:820px){
.tf-homepage .tf-industry-enterprise{
width:calc(100% - 16px)!important;
margin:12px auto!important;
padding:15px 0 16px!important;
border-radius:18px!important;
}
.tf-homepage .tf-industry-enterprise>.shell{
padding:0 10px!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:8px!important;
margin-bottom:10px!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head>div>span{
font-size:6.5px!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head h2{
max-width:270px!important;
font-size:20px!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head p{
max-width:280px!important;
font-size:8px!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head>a{
min-height:32px!important;
padding:0 9px!important;
font-size:7px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding:0 1px 4px!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card{
grid-template-columns:76px minmax(0,1fr)!important;
flex:0 0 min(78vw,300px)!important;
width:min(78vw,300px)!important;
min-width:min(78vw,300px)!important;
min-height:136px!important;
border-radius:14px!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon{
width:44px!important;
height:44px!important;
border-radius:13px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon svg{
width:24px!important;
height:24px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-index{
top:7px!important;
left:7px!important;
width:23px!important;
height:23px!important;
font-size:6px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-kicker{
bottom:6px!important;
font-size:4.8px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content{
padding:11px 10px 9px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content h3{
margin-top:8px!important;
font-size:12px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content p{
margin-top:3px!important;
font-size:6.5px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content>b{
padding-top:7px!important;
font-size:6.5px!important;
}
}
@media(max-width:430px){
.tf-homepage .tf-industry-enterprise{
width:calc(100% - 12px)!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head{
grid-template-columns:1fr!important;
}
.tf-homepage .tf-industry-enterprise .tf-lower-section-head>a{
justify-self:start!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card{
flex-basis:82vw!important;
width:82vw!important;
min-width:82vw!important;
}
}
/* ===== premium-section-backgrounds-18.4.147.css ===== */
/* TradesFolks 18.4.147
Premium background treatment for ONLY:
1) Commerce capability / confident sourcing section
2) Industry collections section
No card markup/layout changes.
*/
/* Confident sourcing: deep premium commerce canvas */
.tf-homepage .tf-commerce-capabilities,
.tf-homepage .tf-commerce-capability-section,
.tf-homepage section:has(.tf-commerce-capability-grid){
position:relative!important;
isolation:isolate!important;
overflow:hidden!important;
border:1px solid rgba(21,73,132,.10)!important;
background:
radial-gradient(circle at 8% 5%,rgba(34,116,220,.13),transparent 24%),
radial-gradient(circle at 94% 18%,rgba(20,155,125,.08),transparent 23%),
linear-gradient(135deg,#f4f8ff 0%,#fbfdff 45%,#f3f8fb 100%)!important;
box-shadow:0 18px 46px rgba(16,43,87,.065)!important;
}
.tf-homepage .tf-commerce-capabilities:before,
.tf-homepage .tf-commerce-capability-section:before,
.tf-homepage section:has(.tf-commerce-capability-grid):before{
content:""!important;
position:absolute!important;
z-index:-1!important;
width:380px!important;
height:380px!important;
top:-260px!important;
right:10%!important;
border:1px solid rgba(17,103,216,.08)!important;
border-radius:50%!important;
box-shadow:0 0 0 70px rgba(17,103,216,.025),0 0 0 140px rgba(17,103,216,.018)!important;
pointer-events:none!important;
}
/* Industry collections: premium navy/ice canvas while keeping white cards */
.tf-homepage .tf-industry-enterprise{
position:relative!important;
isolation:isolate!important;
border:1px solid rgba(18,71,132,.14)!important;
background:
radial-gradient(circle at 5% 0%,rgba(17,103,216,.14),transparent 25%),
radial-gradient(circle at 93% 10%,rgba(20,155,125,.085),transparent 22%),
linear-gradient(135deg,#eef5ff 0%,#f9fbff 42%,#edf4f8 100%)!important;
box-shadow:0 20px 48px rgba(16,43,87,.075)!important;
}
.tf-homepage .tf-industry-enterprise:before{
content:""!important;
position:absolute!important;
z-index:-1!important;
width:440px!important;
height:440px!important;
left:-250px!important;
bottom:-330px!important;
border-radius:50%!important;
border:1px solid rgba(11,103,216,.10)!important;
box-shadow:0 0 0 75px rgba(11,103,216,.025),0 0 0 150px rgba(11,103,216,.018)!important;
pointer-events:none!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card{
background:rgba(255,255,255,.94)!important;
box-shadow:0 10px 26px rgba(16,43,87,.055)!important;
backdrop-filter:blur(8px)!important;
-webkit-backdrop-filter:blur(8px)!important;
}
/* Keep mobile subtle, clean and app-like */
@media(max-width:820px){
.tf-homepage .tf-commerce-capabilities,
.tf-homepage .tf-commerce-capability-section,
.tf-homepage section:has(.tf-commerce-capability-grid){
background:
radial-gradient(circle at 10% 0%,rgba(34,116,220,.11),transparent 28%),
linear-gradient(180deg,#f4f8ff 0%,#f9fbfd 100%)!important;
}
.tf-homepage .tf-industry-enterprise{
background:
radial-gradient(circle at 8% 0%,rgba(17,103,216,.11),transparent 28%),
linear-gradient(180deg,#f2f7ff 0%,#f8fbfd 100%)!important;
}
}
/* ===== colorful-dual-layout-sections-18.4.149.css ===== */
/* TradesFolks 18.4.149
Two premium sections, intentionally DIFFERENT layouts.
A) Built for confident sourcing
= large visual service cards inspired by premium marketplace service blocks.
B) Focused sourcing for every business need
= compact industry market tiles / icon grid.
All selectors are isolated to their exact section classes.
*/
/* ==========================================================
A) CONFIDENT SOURCING — LARGE COLOUR SERVICE CARDS
========================================================== */
.tf-homepage .tf-commerce-capabilities{
background:
radial-gradient(circle at 4% 0%,rgba(30,110,220,.08),transparent 25%),
linear-gradient(180deg,#f8fbff 0%,#f3f7fc 100%)!important;
}
/* 3 large service cards */
.tf-homepage .tf-commerce-capabilities .tf-commerce-capabilities-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:14px!important;
}
/* Each card has its own premium identity */
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card{
--svc-bg1:#8fa3b5;
--svc-bg2:#bcc7d0;
--svc-ink:#ffffff;
--svc-soft:rgba(255,255,255,.20);
--svc-line:rgba(255,255,255,.28);
display:grid!important;
grid-template-columns:minmax(0,1fr) 145px!important;
grid-template-areas:"body visual"!important;
min-height:250px!important;
overflow:hidden!important;
border:0!important;
border-radius:18px!important;
background:
radial-gradient(circle at 88% 22%,rgba(255,255,255,.22),transparent 28%),
linear-gradient(135deg,var(--svc-bg1) 0%,var(--svc-bg2) 100%)!important;
box-shadow:0 16px 34px rgba(16,43,87,.10)!important;
color:var(--svc-ink)!important;
transition:transform .20s ease,box-shadow .20s ease!important;
}
/* Different colours – not same-card syndrome */
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card.is-trust{
--svc-bg1:#8fa3b5;
--svc-bg2:#b8c5d0;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card.is-commerce{
--svc-bg1:#f28a16;
--svc-bg2:#ef6f13;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card.is-discovery{
--svc-bg1:#67405f;
--svc-bg2:#9a5e88;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card.is-secure{
--svc-bg1:#ef6469;
--svc-bg2:#ff8d91;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card:hover{
transform:translateY(-3px)!important;
box-shadow:0 22px 42px rgba(16,43,87,.15)!important;
}
/* Body sits left, illustration right */
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-body{
grid-area:body!important;
display:flex!important;
min-width:0!important;
flex-direction:column!important;
padding:24px 8px 18px 24px!important;
background:transparent!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-visual{
grid-area:visual!important;
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-width:0!important;
padding:18px!important;
overflow:hidden!important;
border:0!important;
background:transparent!important;
box-shadow:none!important;
}
/* decorative soft wave / disc */
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-visual::before{
content:""!important;
position:absolute!important;
width:170px!important;
height:170px!important;
right:-38px!important;
bottom:-50px!important;
border-radius:50%!important;
background:rgba(255,255,255,.13)!important;
border:1px solid rgba(255,255,255,.16)!important;
box-shadow:0 0 0 34px rgba(255,255,255,.045)!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-icon{
position:relative!important;
z-index:2!important;
display:grid!important;
width:94px!important;
height:94px!important;
place-items:center!important;
border:0!important;
border-radius:24px!important;
background:rgba(255,255,255,.17)!important;
color:#fff!important;
box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),0 12px 24px rgba(0,0,0,.09)!important;
backdrop-filter:blur(3px)!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-icon svg{
width:49px!important;
height:49px!important;
stroke:#fff!important;
stroke-width:2!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-visual>span{
position:absolute!important;
z-index:3!important;
right:16px!important;
bottom:20px!important;
margin:0!important;
color:rgba(255,255,255,.90)!important;
font-size:7px!important;
line-height:1.15!important;
font-weight:800!important;
text-align:center!important;
letter-spacing:.03em!important;
}
/* hide old decorative mini bars for cleaner illustrated-card language */
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-visual>i{
display:none!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-top{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-top b{
display:inline-flex!important;
min-height:28px!important;
align-items:center!important;
justify-content:center!important;
padding:0 9px!important;
border:1px solid rgba(255,255,255,.26)!important;
border-radius:9px!important;
background:rgba(255,255,255,.16)!important;
color:#fff!important;
font-size:9px!important;
font-weight:900!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-top span{
display:inline-flex!important;
min-height:26px!important;
align-items:center!important;
padding:0 8px!important;
border:1px solid rgba(255,255,255,.25)!important;
border-radius:999px!important;
background:rgba(255,255,255,.12)!important;
color:#fff!important;
font-size:6.5px!important;
font-weight:850!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card h3{
max-width:21ch!important;
margin:24px 0 8px!important;
color:#fff!important;
font-size:22px!important;
line-height:1.05!important;
letter-spacing:-.025em!important;
font-weight:820!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card p{
display:-webkit-box!important;
max-width:44ch!important;
margin:0!important;
color:rgba(255,255,255,.83)!important;
font-size:9.5px!important;
line-height:1.42!important;
overflow:hidden!important;
-webkit-line-clamp:3!important;
-webkit-box-orient:vertical!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-body>a{
display:inline-flex!important;
width:max-content!important;
min-height:34px!important;
align-items:center!important;
justify-content:flex-start!important;
gap:8px!important;
margin-top:auto!important;
padding:0!important;
border:0!important;
color:#fff!important;
font-size:9px!important;
line-height:1!important;
font-weight:850!important;
text-decoration:none!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-body>a span{
display:grid!important;
width:28px!important;
height:28px!important;
place-items:center!important;
border-radius:50%!important;
background:#fff!important;
color:#15345c!important;
box-shadow:0 4px 10px rgba(0,0,0,.10)!important;
}
/* ==========================================================
B) INDUSTRY COLLECTIONS — COMPACT MARKET TILES
Completely different card architecture.
========================================================== */
.tf-homepage .tf-industry-enterprise{
background:
radial-gradient(circle at 95% 0%,rgba(255,191,47,.09),transparent 24%),
linear-gradient(180deg,#f9fbfe 0%,#eef4fa 100%)!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card{
--industry-accent:#0b67d8;
--industry-soft:#eaf3ff;
--industry-wash:#f4f9ff;
position:relative!important;
display:block!important;
min-width:0!important;
min-height:154px!important;
overflow:hidden!important;
padding:16px!important;
border:1px solid #dce5ef!important;
border-radius:16px!important;
background:
linear-gradient(145deg,#fff 0%,var(--industry-wash) 100%)!important;
box-shadow:0 8px 20px rgba(16,43,87,.045)!important;
color:#102b57!important;
text-decoration:none!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-agri{
--industry-accent:#15805b;--industry-soft:#e5f6ee;--industry-wash:#f0fbf6;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-fashion{
--industry-accent:#7057c8;--industry-soft:#eeeaff;--industry-wash:#f7f5ff;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-mobility{
--industry-accent:#2c71c3;--industry-soft:#e8f2fd;--industry-wash:#f3f8fe;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-wellness{
--industry-accent:#a37510;--industry-soft:#fff4cf;--industry-wash:#fffaf0;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-services{
--industry-accent:#117d9b;--industry-soft:#e5f5f9;--industry-wash:#f2fbfd;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-science{
--industry-accent:#5368a7;--industry-soft:#ebeffa;--industry-wash:#f6f8fd;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-build{
--industry-accent:#9a6336;--industry-soft:#f7ece3;--industry-wash:#fcf7f3;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card.is-technology{
--industry-accent:#216fce;--industry-soft:#e8f2fe;--industry-wash:#f3f8fe;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card:hover{
transform:translateY(-2px)!important;
border-color:color-mix(in srgb,var(--industry-accent) 28%,#dce5ef)!important;
box-shadow:0 14px 28px rgba(16,43,87,.075)!important;
}
/* icon becomes compact badge, not a left illustration rail */
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-iconwrap{
position:static!important;
display:block!important;
min-width:0!important;
padding:0!important;
overflow:visible!important;
border:0!important;
background:none!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-index{
position:absolute!important;
top:13px!important;
right:13px!important;
left:auto!important;
width:27px!important;
height:27px!important;
border:0!important;
border-radius:8px!important;
background:var(--industry-soft)!important;
color:var(--industry-accent)!important;
font-size:7px!important;
box-shadow:none!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-kicker{
position:absolute!important;
top:18px!important;
left:68px!important;
right:auto!important;
bottom:auto!important;
color:var(--industry-accent)!important;
font-size:5.8px!important;
text-align:left!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon{
display:grid!important;
width:42px!important;
height:42px!important;
place-items:center!important;
margin:0!important;
border:0!important;
border-radius:12px!important;
background:var(--industry-soft)!important;
color:var(--industry-accent)!important;
box-shadow:none!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon svg{
width:23px!important;
height:23px!important;
stroke:currentColor!important;
stroke-width:2.1!important;
}
/* Content no longer split into two columns */
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content{
display:flex!important;
min-width:0!important;
min-height:92px!important;
flex-direction:column!important;
padding:0!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content h3{
margin:21px 0 0!important;
color:#0f294d!important;
font-size:14px!important;
line-height:1.12!important;
font-weight:820!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content p{
margin:4px 0 0!important;
color:#71839a!important;
font-size:7.4px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content>b{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
margin-top:auto!important;
padding-top:9px!important;
border-top:1px solid #e5ebf2!important;
color:var(--industry-accent)!important;
font-size:7.4px!important;
font-weight:850!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content>b i{
display:grid!important;
width:20px!important;
height:20px!important;
place-items:center!important;
border-radius:50%!important;
background:var(--industry-soft)!important;
color:var(--industry-accent)!important;
}
/* ==========================================================
RESPONSIVE
========================================================== */
@media(min-width:821px) and (max-width:1179px){
.tf-homepage .tf-commerce-capabilities .tf-commerce-capabilities-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card{
min-height:225px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media(max-width:820px){
/* service cards: horizontal app carousel */
.tf-homepage .tf-commerce-capabilities .tf-commerce-capabilities-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:9px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capabilities-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card{
grid-template-columns:minmax(0,1fr) 92px!important;
flex:0 0 min(88vw,360px)!important;
width:min(88vw,360px)!important;
min-width:min(88vw,360px)!important;
min-height:178px!important;
border-radius:15px!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-body{
padding:14px 4px 12px 14px!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card h3{
margin:14px 0 5px!important;
font-size:15px!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-card p{
font-size:7.5px!important;
-webkit-line-clamp:2!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-icon{
width:58px!important;
height:58px!important;
border-radius:17px!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-icon svg{
width:31px!important;
height:31px!important;
}
.tf-homepage .tf-commerce-capabilities .tf-commerce-capability-visual>span{
right:8px!important;
bottom:11px!important;
font-size:5.5px!important;
}
/* industry: two compact columns on mobile, not same as service rail */
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
overflow:visible!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card{
min-width:0!important;
width:auto!important;
min-height:132px!important;
padding:11px!important;
border-radius:13px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon{
width:36px!important;
height:36px!important;
border-radius:10px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-icon svg{
width:20px!important;
height:20px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-index{
top:9px!important;
right:9px!important;
width:22px!important;
height:22px!important;
font-size:5.5px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-kicker{
top:14px!important;
left:54px!important;
font-size:4.5px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content{
min-height:78px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content h3{
margin-top:15px!important;
font-size:10.5px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content p{
font-size:5.8px!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-content>b{
padding-top:6px!important;
font-size:5.8px!important;
}
}
@media(max-width:430px){
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.tf-homepage .tf-industry-enterprise .tf-industry-enterprise-card{
min-height:126px!important;
padding:10px!important;
}
}
/* ===== process-insights-content-premium-18.4.150.css ===== */
/* TradesFolks 18.4.150
Three distinct premium sections:
A. How TradesFolks Works = connected process journey
B. Marketplace Insights = editorial intelligence layout
C. Blogs + Live News = visual newsroom
All selectors are section-scoped.
*/
/* ==========================================================
SHARED TARGET GUTTER ONLY
========================================================== */
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .tf-content-enterprise{
width:calc(100% - 56px)!important;
max-width:none!important;
margin:18px auto!important;
border-radius:22px!important;
overflow:hidden!important;
}
.tf-homepage .tf-process-enterprise>.shell,
.tf-homepage .tf-insights-enterprise>.shell,
.tf-homepage .tf-content-enterprise>.shell{
width:100%!important;
max-width:none!important;
margin:0!important;
padding:0 24px!important;
}
/* ==========================================================
A) HOW TRADESFOLKS WORKS — CONNECTED PROCESS JOURNEY
========================================================== */
.tf-homepage .tf-process-enterprise{
padding:24px 0 26px!important;
border:1px solid #dde7f2!important;
background:
radial-gradient(circle at 100% 0%,rgba(255,189,47,.12),transparent 26%),
linear-gradient(135deg,#f7fbff 0%,#edf4fb 100%)!important;
box-shadow:0 16px 38px rgba(16,43,87,.05)!important;
}
.tf-homepage .tf-process-enterprise .tf-lower-section-head{
margin-bottom:18px!important;
}
/* horizontal enterprise journey with connector */
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid{
position:relative!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:12px!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid::before{
content:""!important;
position:absolute!important;
top:54px!important;
left:10%!important;
right:10%!important;
height:2px!important;
background:linear-gradient(90deg,#1b78dc,#8061cd,#ea8d1c,#19a06d)!important;
opacity:.22!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid>article{
--step:#176fd0;
--soft:#e9f3ff;
position:relative!important;
z-index:1!important;
min-width:0!important;
min-height:216px!important;
padding:17px 17px 15px!important;
border:1px solid #dce6f1!important;
border-radius:17px!important;
background:rgba(255,255,255,.94)!important;
box-shadow:0 10px 24px rgba(16,43,87,.045)!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid>article.is-compare{--step:#7656c5;--soft:#f0ecff}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid>article.is-connect{--step:#d47b13;--soft:#fff3dd}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid>article.is-grow{--step:#138c68;--soft:#e6f7f0}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-visual{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
min-height:74px!important;
margin-bottom:14px!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-visual>b{
display:grid!important;
width:43px!important;height:43px!important;
place-items:center!important;
border-radius:13px!important;
background:var(--step)!important;
color:#fff!important;
font-size:10px!important;
font-weight:900!important;
box-shadow:0 7px 16px color-mix(in srgb,var(--step) 22%,transparent)!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-visual>svg{
width:48px!important;height:48px!important;
padding:10px!important;
border-radius:15px!important;
background:var(--soft)!important;
stroke:var(--step)!important;
stroke-width:2!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.tf-homepage .tf-process-enterprise article>span{
color:var(--step)!important;
font-size:7px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:.06em!important;
text-transform:uppercase!important;
}
.tf-homepage .tf-process-enterprise article>h3{
margin:8px 0 7px!important;
color:#102b57!important;
font-size:16px!important;
line-height:1.1!important;
letter-spacing:-.02em!important;
font-weight:820!important;
}
.tf-homepage .tf-process-enterprise article>p{
margin:0!important;
color:#677b93!important;
font-size:8.5px!important;
line-height:1.4!important;
}
/* ==========================================================
B) MARKETPLACE INSIGHTS — EDITORIAL / INTELLIGENCE BOARD
========================================================== */
.tf-homepage .tf-insights-enterprise{
padding:24px 0 26px!important;
border:1px solid #e5e2ef!important;
background:
radial-gradient(circle at 90% 4%,rgba(120,87,196,.09),transparent 25%),
linear-gradient(135deg,#fbfaff 0%,#f4f5fb 100%)!important;
box-shadow:0 16px 38px rgba(39,28,76,.045)!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid{
display:grid!important;
grid-template-columns:1.35fr .825fr .825fr!important;
gap:12px!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article{
--insight:#176fd0;
--soft:#e9f3ff;
display:flex!important;
min-width:0!important;
min-height:246px!important;
flex-direction:column!important;
padding:20px!important;
border:1px solid #dfe6ef!important;
border-radius:18px!important;
background:#fff!important;
box-shadow:0 10px 25px rgba(16,43,87,.045)!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article.is-primary{
--insight:#7254bd;--soft:#f0ecff;
background:
radial-gradient(circle at 90% 8%,rgba(255,255,255,.20),transparent 24%),
linear-gradient(145deg,#65479f 0%,#8466c6 100%)!important;
border:0!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article.is-rfq{
--insight:#c77a14;--soft:#fff3d9;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article.is-global{
--insight:#0f8d69;--soft:#e5f6ef;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-top{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-top>span{
color:var(--insight)!important;
font-size:7px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:.04em!important;
text-transform:uppercase!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-top>i{
display:grid!important;
width:48px!important;height:48px!important;
place-items:center!important;
border-radius:14px!important;
background:var(--soft)!important;
color:var(--insight)!important;
font-size:10px!important;
font-style:normal!important;
font-weight:900!important;
}
.tf-homepage .tf-insights-enterprise article>h3{
max-width:27ch!important;
margin:26px 0 8px!important;
color:#102b57!important;
font-size:18px!important;
line-height:1.08!important;
letter-spacing:-.025em!important;
font-weight:820!important;
}
.tf-homepage .tf-insights-enterprise article>p{
margin:0!important;
color:#687c94!important;
font-size:8.5px!important;
line-height:1.45!important;
}
.tf-homepage .tf-insights-enterprise article>b{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
margin-top:auto!important;
padding-top:12px!important;
border-top:1px solid #e6ecf3!important;
color:var(--insight)!important;
font-size:7.5px!important;
font-weight:850!important;
}
.tf-homepage .tf-insights-enterprise article>b em{
display:grid!important;
width:23px!important;height:23px!important;
place-items:center!important;
border-radius:50%!important;
background:var(--soft)!important;
font-style:normal!important;
}
.tf-homepage .tf-insights-enterprise article.is-primary .tf-insights-enterprise-top>span,
.tf-homepage .tf-insights-enterprise article.is-primary>h3,
.tf-homepage .tf-insights-enterprise article.is-primary>b{
color:#fff!important;
}
.tf-homepage .tf-insights-enterprise article.is-primary>p{
color:rgba(255,255,255,.80)!important;
}
.tf-homepage .tf-insights-enterprise article.is-primary>b{
border-color:rgba(255,255,255,.18)!important;
}
.tf-homepage .tf-insights-enterprise article.is-primary .tf-insights-enterprise-top>i,
.tf-homepage .tf-insights-enterprise article.is-primary>b em{
background:rgba(255,255,255,.15)!important;
color:#fff!important;
}
/* ==========================================================
C) BLOGS + LIVE MARKETPLACE NEWS — VISUAL NEWSROOM
========================================================== */
.tf-homepage .tf-content-enterprise{
padding:24px 0 26px!important;
border:1px solid #e2e8f1!important;
background:
radial-gradient(circle at 5% 0%,rgba(20,107,218,.08),transparent 24%),
linear-gradient(180deg,#fbfdff 0%,#f4f8fc 100%)!important;
box-shadow:0 16px 40px rgba(16,43,87,.05)!important;
}
.tf-homepage .tf-content-enterprise .tf-content-enterprise-layout{
display:grid!important;
grid-template-columns:minmax(0,1.65fr) minmax(315px,.75fr)!important;
gap:14px!important;
align-items:stretch!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-grid{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card{
display:flex!important;
min-width:0!important;
min-height:310px!important;
flex-direction:column!important;
overflow:hidden!important;
border:1px solid #dce5ef!important;
border-radius:17px!important;
background:#fff!important;
box-shadow:0 10px 24px rgba(16,43,87,.045)!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-media{
position:relative!important;
display:block!important;
height:158px!important;
min-height:158px!important;
overflow:hidden!important;
background:linear-gradient(145deg,#123a72,#0a2550)!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-media img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
transition:transform .22s ease!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card:hover .tf-content-blog-media img{
transform:scale(1.035)!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-media>span{
position:absolute!important;
left:14px!important;
bottom:12px!important;
display:grid!important;
width:38px!important;height:38px!important;
place-items:center!important;
border-radius:11px!important;
background:rgba(7,31,70,.82)!important;
color:#fff!important;
font-size:11px!important;
font-weight:900!important;
backdrop-filter:blur(5px)!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-media:not(.is-missing):has(img)>span{
opacity:.92!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card>div{
display:flex!important;
flex:1 1 auto!important;
flex-direction:column!important;
padding:13px 13px 12px!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card small{
color:#0b67d8!important;
font-size:6.5px!important;
line-height:1.2!important;
font-weight:850!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card h3{
margin:9px 0 6px!important;
font-size:14px!important;
line-height:1.12!important;
letter-spacing:-.015em!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card h3 a{
color:#102b57!important;
text-decoration:none!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card p{
display:-webkit-box!important;
margin:0!important;
color:#6b7e94!important;
font-size:7.5px!important;
line-height:1.4!important;
overflow:hidden!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card>div>a{
margin-top:auto!important;
padding-top:9px!important;
border-top:1px solid #e7edf3!important;
color:#0b67d8!important;
font-size:7px!important;
font-weight:850!important;
text-decoration:none!important;
}
/* Live-news board is intentionally different */
.tf-homepage .tf-content-enterprise .tf-live-news-enterprise{
min-width:0!important;
overflow:hidden!important;
border:0!important;
border-radius:18px!important;
background:
radial-gradient(circle at 100% 0%,rgba(255,193,47,.13),transparent 28%),
linear-gradient(145deg,#071d43 0%,#0b2c5c 100%)!important;
box-shadow:0 16px 32px rgba(6,25,57,.14)!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-head{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
min-height:48px!important;
padding:0 14px!important;
border-bottom:1px solid rgba(255,255,255,.10)!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-head span{
color:#fff!important;
font-size:7px!important;
font-weight:900!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-head i{
display:inline-block!important;
width:7px!important;height:7px!important;
margin-right:6px!important;
border-radius:50%!important;
background:#ff4f67!important;
box-shadow:0 0 0 4px rgba(255,79,103,.12)!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-head small{
color:#9fb2cb!important;
font-size:6px!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list>a{
display:grid!important;
grid-template-columns:44px minmax(0,1fr)!important;
gap:10px!important;
padding:14px!important;
border-bottom:1px solid rgba(255,255,255,.09)!important;
color:#fff!important;
text-decoration:none!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list>a:last-child{
border-bottom:0!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list time{
color:#8fb1d9!important;
font-size:6px!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list b{
display:inline-flex!important;
min-height:21px!important;
align-items:center!important;
padding:0 7px!important;
border-radius:999px!important;
background:#ff4f67!important;
color:#fff!important;
font-size:5px!important;
line-height:1!important;
text-transform:uppercase!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list h3{
margin:8px 0 5px!important;
color:#fff!important;
font-size:11px!important;
line-height:1.2!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list p{
margin:0!important;
color:#b6c5d7!important;
font-size:6.5px!important;
line-height:1.4!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list div>span{
display:block!important;
margin-top:9px!important;
color:#74b6ff!important;
font-size:6px!important;
}
/* ==========================================================
TABLET / ZOOM
========================================================== */
@media(min-width:821px) and (max-width:1179px){
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .tf-content-enterprise{
width:calc(100% - 32px)!important;
}
.tf-homepage .tf-process-enterprise>.shell,
.tf-homepage .tf-insights-enterprise>.shell,
.tf-homepage .tf-content-enterprise>.shell{
padding:0 16px!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid::before{
display:none!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid{
grid-template-columns:1fr 1fr!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article.is-primary{
grid-column:1/-1!important;
min-height:205px!important;
}
.tf-homepage .tf-content-enterprise .tf-content-enterprise-layout{
grid-template-columns:1fr!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-enterprise{
min-height:220px!important;
}
}
/* ==========================================================
MOBILE — SMALLER, APP-LIKE, RESPONSIVE
========================================================== */
@media(max-width:820px){
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .tf-content-enterprise{
width:calc(100% - 16px)!important;
margin:12px auto!important;
padding:15px 0 16px!important;
border-radius:18px!important;
}
.tf-homepage .tf-process-enterprise>.shell,
.tf-homepage .tf-insights-enterprise>.shell,
.tf-homepage .tf-content-enterprise>.shell{
padding:0 10px!important;
}
/* Process = horizontal small step cards */
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding-bottom:3px!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid::-webkit-scrollbar{display:none!important}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid::before{display:none!important}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-grid>article{
flex:0 0 min(72vw,270px)!important;
min-width:min(72vw,270px)!important;
min-height:148px!important;
padding:11px!important;
border-radius:13px!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-visual{
min-height:48px!important;
margin-bottom:9px!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-visual>b{
width:31px!important;height:31px!important;border-radius:9px!important;font-size:7px!important;
}
.tf-homepage .tf-process-enterprise .tf-process-enterprise-visual>svg{
width:35px!important;height:35px!important;padding:7px!important;border-radius:10px!important;
}
.tf-homepage .tf-process-enterprise article>span{font-size:5.5px!important}
.tf-homepage .tf-process-enterprise article>h3{margin:6px 0 4px!important;font-size:12px!important}
.tf-homepage .tf-process-enterprise article>p{
display:-webkit-box!important;font-size:6.5px!important;line-height:1.35!important;
overflow:hidden!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
}
/* Insights = one feature + two mini tiles */
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid{
grid-template-columns:1fr 1fr!important;
gap:8px!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article{
min-height:145px!important;
padding:11px!important;
border-radius:13px!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article.is-primary{
grid-column:1/-1!important;
min-height:160px!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-top>span{font-size:5px!important}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-top>i{
width:34px!important;height:34px!important;border-radius:10px!important;font-size:7px!important;
}
.tf-homepage .tf-insights-enterprise article>h3{margin:14px 0 5px!important;font-size:11px!important}
.tf-homepage .tf-insights-enterprise article>p{
display:-webkit-box!important;font-size:6px!important;line-height:1.35!important;
overflow:hidden!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
}
.tf-homepage .tf-insights-enterprise article>b{padding-top:7px!important;font-size:5.5px!important}
.tf-homepage .tf-insights-enterprise article>b em{width:18px!important;height:18px!important}
/* Content hub = horizontal blog cards + compact news below */
.tf-homepage .tf-content-enterprise .tf-content-enterprise-layout{
display:grid!important;
grid-template-columns:1fr!important;
gap:9px!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
overflow-x:auto!important;
padding-bottom:3px!important;
scroll-snap-type:x mandatory!important;
scrollbar-width:none!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-grid::-webkit-scrollbar{display:none!important}
.tf-homepage .tf-content-enterprise .tf-content-blog-card{
flex:0 0 min(76vw,285px)!important;
min-width:min(76vw,285px)!important;
min-height:230px!important;
border-radius:14px!important;
scroll-snap-align:start!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-media{
height:112px!important;
min-height:112px!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-media>span{
left:9px!important;bottom:8px!important;width:28px!important;height:28px!important;
border-radius:8px!important;font-size:8px!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card>div{padding:9px!important}
.tf-homepage .tf-content-enterprise .tf-content-blog-card small{font-size:5.5px!important}
.tf-homepage .tf-content-enterprise .tf-content-blog-card h3{margin:6px 0 4px!important;font-size:10.5px!important}
.tf-homepage .tf-content-enterprise .tf-content-blog-card p{font-size:6px!important}
.tf-homepage .tf-content-enterprise .tf-content-blog-card>div>a{padding-top:6px!important;font-size:5.8px!important}
.tf-homepage .tf-content-enterprise .tf-live-news-enterprise{border-radius:14px!important}
.tf-homepage .tf-content-enterprise .tf-live-news-head{min-height:38px!important;padding:0 10px!important}
.tf-homepage .tf-content-enterprise .tf-live-news-list>a{
grid-template-columns:35px minmax(0,1fr)!important;
gap:8px!important;
padding:10px!important;
}
.tf-homepage .tf-content-enterprise .tf-live-news-list h3{margin:6px 0 3px!important;font-size:9px!important}
.tf-homepage .tf-content-enterprise .tf-live-news-list p{
display:-webkit-box!important;font-size:5.8px!important;overflow:hidden!important;
-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;
}
}
@media(max-width:430px){
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .tf-content-enterprise{
width:calc(100% - 12px)!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid{
grid-template-columns:1fr!important;
}
.tf-homepage .tf-insights-enterprise .tf-insights-enterprise-grid>article.is-primary{
grid-column:auto!important;
}
}
/* ===== homepage-premium-rhythm-custom-sourcing-18.4.153.css ===== */
/* TradesFolks 18.4.153
Canonical homepage gutter/rhythm + premium Custom Sourcing.
This is the final authoritative spacing layer.
*/
.tf-homepage{
--tf-canonical-gutter:28px;
--tf-section-gap:14px;
}
/* ==========================================================
CANONICAL HOMEPAGE OUTER WIDTH
Matches hero slider: 28px each side on large desktop.
========================================================== */
.tf-homepage .country-network,
.tf-homepage .curated-b2b-market,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services,
.tf-homepage .home-category-showcases,
.tf-homepage .festival-marketplace,
.tf-homepage .marketplace-products,
.tf-homepage .trade-advantage,
.tf-homepage .trending-products,
.tf-homepage .new-arrivals,
.tf-homepage .tf-rfq-enterprise,
.tf-homepage .commerce-offers,
.tf-homepage .tf-commerce-capabilities,
.tf-homepage .tf-industry-enterprise,
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-dual-cta-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .home-reels,
.tf-homepage .tf-content-enterprise,
.tf-homepage .tf-custom-sourcing-enterprise{
box-sizing:border-box!important;
width:calc(100% - (var(--tf-canonical-gutter) * 2))!important;
max-width:none!important;
margin-top:var(--tf-section-gap)!important;
margin-right:auto!important;
margin-bottom:var(--tf-section-gap)!important;
margin-left:auto!important;
}
/* Inner shells never create a second gutter. */
.tf-homepage .country-network>.shell,
.tf-homepage .curated-b2b-market>.shell,
.tf-homepage .tf-sourcing-solutions>.shell,
.tf-homepage .tf-business-growth-services>.shell,
.tf-homepage .home-category-showcases>.shell,
.tf-homepage .festival-marketplace>.shell,
.tf-homepage .marketplace-products>.shell,
.tf-homepage .trade-advantage>.shell,
.tf-homepage .trending-products>.shell,
.tf-homepage .new-arrivals>.shell,
.tf-homepage .tf-rfq-enterprise>.shell,
.tf-homepage .commerce-offers>.shell,
.tf-homepage .tf-commerce-capabilities>.shell,
.tf-homepage .tf-industry-enterprise>.shell,
.tf-homepage .tf-process-enterprise>.shell,
.tf-homepage .tf-dual-cta-enterprise>.shell,
.tf-homepage .tf-insights-enterprise>.shell,
.tf-homepage .home-reels>.shell,
.tf-homepage .tf-content-enterprise>.shell,
.tf-homepage .tf-custom-sourcing-enterprise>.shell{
box-sizing:border-box!important;
width:100%!important;
max-width:none!important;
margin:0!important;
}
/* Hero remains the canonical ruler. */
.tf-homepage .tf-home-v3{
width:100%!important;
margin:0!important;
}
.tf-homepage .tf-home-v3>.tf-home-v3-hero,
.tf-homepage .tf-home-v3>.tf-home-v3-trust,
.tf-homepage .tf-home-v3>.tf-home-v3-industries{
box-sizing:border-box!important;
width:calc(100% - (var(--tf-canonical-gutter) * 2))!important;
max-width:none!important;
margin-left:auto!important;
margin-right:auto!important;
}
.tf-homepage .tf-home-v3>.tf-home-v3-hero{
margin-bottom:var(--tf-section-gap)!important;
}
/* Prevent accidental giant blank bands between the target major modules. */
.tf-homepage .country-network,
.tf-homepage .curated-b2b-market,
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services,
.tf-homepage .home-category-showcases,
.tf-homepage .festival-marketplace,
.tf-homepage .marketplace-products,
.tf-homepage .trade-advantage,
.tf-homepage .trending-products,
.tf-homepage .new-arrivals,
.tf-homepage .tf-rfq-enterprise,
.tf-homepage .commerce-offers,
.tf-homepage .tf-commerce-capabilities,
.tf-homepage .tf-industry-enterprise,
.tf-homepage .tf-process-enterprise,
.tf-homepage .tf-dual-cta-enterprise,
.tf-homepage .tf-insights-enterprise,
.tf-homepage .home-reels,
.tf-homepage .tf-content-enterprise,
.tf-homepage .tf-custom-sourcing-enterprise{
scroll-margin-top:90px!important;
}
/* ==========================================================
CUSTOM SOURCING — premium tri-panel CTA
========================================================== */
.tf-homepage .tf-custom-sourcing-enterprise{
padding:0!important;
overflow:hidden!important;
border:1px solid #dce5ef!important;
border-radius:22px!important;
background:
radial-gradient(circle at 92% 8%,rgba(255,191,47,.16),transparent 25%),
linear-gradient(145deg,#f8fbff 0%,#eef4fa 100%)!important;
box-shadow:0 16px 40px rgba(16,43,87,.06)!important;
}
.tf-homepage .tf-custom-sourcing-enterprise>.shell{
padding:0!important;
}
.tf-homepage .tf-custom-sourcing-card{
--rfq-yellow:#ffbd2f;
--rfq-navy:#0b2d5d;
display:grid!important;
grid-template-columns:minmax(0,1.45fr) 190px minmax(300px,.82fr)!important;
align-items:stretch!important;
min-height:250px!important;
overflow:hidden!important;
border:0!important;
border-radius:21px!important;
background:#fff!important;
box-shadow:none!important;
}
.tf-homepage .tf-custom-sourcing-copy{
display:flex!important;
min-width:0!important;
flex-direction:column!important;
justify-content:center!important;
padding:30px 18px 28px 30px!important;
}
.tf-homepage .tf-custom-sourcing-copy>span{
display:inline-flex!important;
width:max-content!important;
min-height:27px!important;
align-items:center!important;
padding:0 10px!important;
border-radius:999px!important;
background:#fff3cf!important;
color:#a96d00!important;
font-size:7px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:.10em!important;
}
.tf-homepage .tf-custom-sourcing-copy h2{
max-width:19ch!important;
margin:12px 0 8px!important;
color:#0b274f!important;
font-size:clamp(27px,2.4vw,42px)!important;
line-height:1.02!important;
letter-spacing:-.042em!important;
font-weight:850!important;
}
.tf-homepage .tf-custom-sourcing-copy>p{
max-width:62ch!important;
margin:0!important;
color:#667b94!important;
font-size:9.5px!important;
line-height:1.45!important;
}
.tf-homepage .tf-custom-sourcing-points{
display:flex!important;
flex-wrap:wrap!important;
gap:7px!important;
margin-top:18px!important;
}
.tf-homepage .tf-custom-sourcing-points>span{
display:inline-flex!important;
align-items:center!important;
gap:6px!important;
min-height:30px!important;
padding:0 9px 0 5px!important;
border:1px solid #e1e9f2!important;
border-radius:999px!important;
background:#f8fbff!important;
color:#38536f!important;
font-size:7px!important;
font-weight:800!important;
}
.tf-homepage .tf-custom-sourcing-points i{
display:grid!important;
width:21px!important;
height:21px!important;
place-items:center!important;
border-radius:50%!important;
background:#e9f2ff!important;
color:#176fd0!important;
font-size:5.7px!important;
font-style:normal!important;
font-weight:900!important;
}
.tf-homepage .tf-custom-sourcing-visual{
position:relative!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
background:
radial-gradient(circle at 50% 50%,rgba(255,255,255,.18),transparent 34%),
linear-gradient(150deg,#f59a17 0%,#ffbd2f 100%)!important;
}
.tf-homepage .tf-custom-sourcing-orbit{
position:absolute!important;
width:210px!important;
height:210px!important;
border:1px solid rgba(255,255,255,.42)!important;
border-radius:50%!important;
box-shadow:0 0 0 34px rgba(255,255,255,.10),0 0 0 68px rgba(255,255,255,.06)!important;
}
.tf-homepage .tf-custom-sourcing-icon{
position:relative!important;
z-index:2!important;
display:grid!important;
width:86px!important;
height:86px!important;
place-items:center!important;
border:1px solid rgba(255,255,255,.68)!important;
border-radius:24px!important;
background:rgba(255,255,255,.88)!important;
color:#0b2d5d!important;
box-shadow:0 15px 30px rgba(105,61,0,.15)!important;
}
.tf-homepage .tf-custom-sourcing-icon svg{
width:44px!important;
height:44px!important;
stroke:currentColor!important;
stroke-width:2.1!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
}
.tf-homepage .tf-custom-sourcing-visual>span{
position:absolute!important;
z-index:3!important;
right:13px!important;
bottom:12px!important;
color:rgba(11,45,93,.82)!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.14em!important;
}
.tf-homepage .tf-custom-sourcing-actions{
display:flex!important;
min-width:0!important;
flex-direction:column!important;
justify-content:center!important;
gap:13px!important;
padding:26px!important;
background:
radial-gradient(circle at 100% 0%,rgba(61,119,190,.27),transparent 38%),
linear-gradient(145deg,#08254e 0%,#0d3b76 100%)!important;
color:#fff!important;
}
.tf-homepage .tf-custom-sourcing-actions>div small{
display:block!important;
color:#ffcb54!important;
font-size:6.5px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:.10em!important;
}
.tf-homepage .tf-custom-sourcing-actions>div strong{
display:block!important;
max-width:24ch!important;
margin-top:6px!important;
color:#fff!important;
font-size:17px!important;
line-height:1.15!important;
font-weight:800!important;
}
.tf-homepage .tf-custom-sourcing-actions>a{
display:flex!important;
min-height:48px!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
padding:0 15px!important;
border-radius:12px!important;
background:linear-gradient(135deg,#ffbd2f,#f3a315)!important;
color:#10284c!important;
box-shadow:0 11px 22px rgba(0,0,0,.13)!important;
font-size:8.5px!important;
font-weight:900!important;
text-decoration:none!important;
}
.tf-homepage .tf-custom-sourcing-actions>a b{
display:grid!important;
width:25px!important;
height:25px!important;
place-items:center!important;
border-radius:50%!important;
background:#fff!important;
font-size:10px!important;
}
.tf-homepage .tf-custom-sourcing-actions>em{
color:#aebfd3!important;
font-size:6.5px!important;
line-height:1.35!important;
font-style:normal!important;
}
/* ==========================================================
RESPONSIVE GUTTER / RHYTHM
========================================================== */
@media(max-width:1279px){
.tf-homepage{
--tf-canonical-gutter:22px;
--tf-section-gap:13px;
}
.tf-homepage .tf-custom-sourcing-card{
grid-template-columns:minmax(0,1.3fr) 160px minmax(270px,.8fr)!important;
}
}
@media(max-width:1023px){
.tf-homepage{
--tf-canonical-gutter:16px;
--tf-section-gap:12px;
}
.tf-homepage .tf-custom-sourcing-card{
grid-template-columns:minmax(0,1fr) 145px!important;
grid-template-areas:"copy visual" "actions actions"!important;
}
.tf-homepage .tf-custom-sourcing-copy{grid-area:copy!important}
.tf-homepage .tf-custom-sourcing-visual{grid-area:visual!important}
.tf-homepage .tf-custom-sourcing-actions{
grid-area:actions!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) minmax(250px,.65fr)!important;
align-items:center!important;
padding:15px 20px!important;
}
.tf-homepage .tf-custom-sourcing-actions>em{display:none!important}
}
@media(max-width:820px){
.tf-homepage{
--tf-canonical-gutter:8px;
--tf-section-gap:10px;
}
.tf-homepage .tf-custom-sourcing-enterprise{
border-radius:17px!important;
}
.tf-homepage .tf-custom-sourcing-card{
grid-template-columns:minmax(0,1fr) 94px!important;
min-height:0!important;
border-radius:16px!important;
}
.tf-homepage .tf-custom-sourcing-copy{
padding:16px 8px 15px 16px!important;
}
.tf-homepage .tf-custom-sourcing-copy>span{
min-height:23px!important;
padding:0 8px!important;
font-size:5.7px!important;
}
.tf-homepage .tf-custom-sourcing-copy h2{
max-width:20ch!important;
margin:8px 0 5px!important;
font-size:20px!important;
}
.tf-homepage .tf-custom-sourcing-copy>p{
display:-webkit-box!important;
max-width:48ch!important;
font-size:7px!important;
line-height:1.35!important;
overflow:hidden!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-homepage .tf-custom-sourcing-points{
gap:5px!important;
margin-top:10px!important;
}
.tf-homepage .tf-custom-sourcing-points>span{
min-height:25px!important;
padding-right:7px!important;
font-size:5.5px!important;
}
.tf-homepage .tf-custom-sourcing-points>span:nth-child(3){
display:none!important;
}
.tf-homepage .tf-custom-sourcing-points i{
width:18px!important;
height:18px!important;
font-size:4.8px!important;
}
.tf-homepage .tf-custom-sourcing-orbit{
width:120px!important;
height:120px!important;
box-shadow:0 0 0 20px rgba(255,255,255,.09),0 0 0 38px rgba(255,255,255,.05)!important;
}
.tf-homepage .tf-custom-sourcing-icon{
width:56px!important;
height:56px!important;
border-radius:17px!important;
}
.tf-homepage .tf-custom-sourcing-icon svg{
width:29px!important;
height:29px!important;
}
.tf-homepage .tf-custom-sourcing-actions{
grid-template-columns:minmax(0,1fr) minmax(180px,.75fr)!important;
gap:10px!important;
padding:11px 13px!important;
}
.tf-homepage .tf-custom-sourcing-actions>div small{font-size:5px!important}
.tf-homepage .tf-custom-sourcing-actions>div strong{
margin-top:4px!important;
font-size:10.5px!important;
}
.tf-homepage .tf-custom-sourcing-actions>a{
min-height:38px!important;
padding:0 10px!important;
border-radius:10px!important;
font-size:6.5px!important;
}
.tf-homepage .tf-custom-sourcing-actions>a b{
width:21px!important;
height:21px!important;
}
}
@media(max-width:560px){
.tf-homepage{
--tf-canonical-gutter:6px;
--tf-section-gap:9px;
}
.tf-homepage .tf-custom-sourcing-card{
grid-template-columns:minmax(0,1fr) 78px!important;
}
.tf-homepage .tf-custom-sourcing-copy{
padding:13px 7px 12px 13px!important;
}
.tf-homepage .tf-custom-sourcing-copy h2{
font-size:17px!important;
}
.tf-homepage .tf-custom-sourcing-points>span:nth-child(2){
display:none!important;
}
.tf-homepage .tf-custom-sourcing-icon{
width:48px!important;
height:48px!important;
}
.tf-homepage .tf-custom-sourcing-icon svg{
width:25px!important;
height:25px!important;
}
.tf-homepage .tf-custom-sourcing-actions{
grid-template-columns:1fr!important;
gap:7px!important;
}
.tf-homepage .tf-custom-sourcing-actions>div{
display:none!important;
}
.tf-homepage .tf-custom-sourcing-actions>a{
width:100%!important;
}
}
@media(max-width:380px){
.tf-homepage{
--tf-canonical-gutter:5px;
--tf-section-gap:8px;
}
.tf-homepage .tf-custom-sourcing-card{
grid-template-columns:1fr!important;
grid-template-areas:"copy" "actions"!important;
}
.tf-homepage .tf-custom-sourcing-visual{
display:none!important;
}
}
/* ===== homepage-blog-media-visibility-18.4.154.css ===== */
/* TradesFolks 18.4.154 — Homepage Blog Media Visibility */
.tf-homepage .tf-content-enterprise .tf-content-blog-card.has-featured-image .tf-content-blog-media{
background:#eaf1f8!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card.has-featured-image .tf-content-blog-media img{
position:relative!important;
z-index:2!important;
display:block!important;
width:100%!important;
height:100%!important;
object-fit:cover!important;
object-position:center!important;
opacity:1!important;
visibility:visible!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card.has-featured-image .tf-content-blog-media>span{
display:none!important;
}
.tf-homepage .tf-content-enterprise .tf-content-blog-card.is-image-missing .tf-content-blog-media>span{
display:grid!important;
}
.tf-blog-homepage-help{
margin:7px 0 0!important;
color:#7c8fa5!important;
font-size:9px!important;
line-height:1.4!important;
}
/* ===== service-sections-mobile-image-reverse-18.4.155.css ===== */
/* TradesFolks 18.4.155
Service sections: mobile hero-image containment + reverse discovery order.
Main order itself is reversed in PHP; this CSS only fixes responsive rendering.
*/
.tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
.tf-homepage .tf-business-growth-services .tf-service-card-media img{
display:block!important;
width:auto!important;
height:auto!important;
max-width:88%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
transform:none!important;
margin:auto!important;
}
/* Keep both sections independent from old transforms / cropping rules. */
.tf-homepage .tf-sourcing-solutions .tf-service-card-media,
.tf-homepage .tf-business-growth-services .tf-service-card-media{
box-sizing:border-box!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
/* Mobile app-style rail. */
@media(max-width:820px){
.tf-homepage .tf-sourcing-solutions,
.tf-homepage .tf-business-growth-services{
overflow:hidden!important;
}
.tf-homepage .tf-sourcing-solutions>.shell,
.tf-homepage .tf-business-growth-services>.shell{
overflow:hidden!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-grid,
.tf-homepage .tf-business-growth-services .tf-service-card-grid{
display:flex!important;
flex-wrap:nowrap!important;
gap:8px!important;
width:100%!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding:0 0 3px!important;
scroll-snap-type:x mandatory!important;
scroll-padding-inline:0!important;
overscroll-behavior-inline:contain!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-grid::-webkit-scrollbar,
.tf-homepage .tf-business-growth-services .tf-service-card-grid::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card,
.tf-homepage .tf-business-growth-services .tf-service-card{
flex:0 0 min(79vw,338px)!important;
width:min(79vw,338px)!important;
min-width:min(79vw,338px)!important;
max-width:min(79vw,338px)!important;
scroll-snap-align:start!important;
}
/* More usable media box: image never touches/crosses the top edge. */
.tf-homepage .tf-sourcing-solutions .tf-service-card-hero,
.tf-homepage .tf-business-growth-services .tf-service-card-hero{
position:relative!important;
height:186px!important;
min-height:186px!important;
overflow:hidden!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-media,
.tf-homepage .tf-business-growth-services .tf-service-card-media{
position:absolute!important;
inset:8px 0 61px 0!important;
height:auto!important;
min-height:0!important;
padding:4px 13px 5px!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
.tf-homepage .tf-business-growth-services .tf-service-card-media img{
width:auto!important;
height:auto!important;
max-width:82%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center center!important;
transform:none!important;
margin:auto!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-directory-copy,
.tf-homepage .tf-business-growth-services .tf-service-card-directory-copy{
position:absolute!important;
left:10px!important;
right:10px!important;
bottom:7px!important;
box-sizing:border-box!important;
height:55px!important;
min-height:55px!important;
max-height:55px!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-directory-copy h3,
.tf-homepage .tf-business-growth-services .tf-service-card-directory-copy h3{
font-size:13.5px!important;
line-height:1.08!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-mini-grid,
.tf-homepage .tf-business-growth-services .tf-service-mini-grid{
min-height:74px!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-mini-grid>a,
.tf-homepage .tf-business-growth-services .tf-service-mini-grid>a{
min-height:74px!important;
padding:5px 3px!important;
}
}
/* Narrow phones: smaller card and extra image breathing room. */
@media(max-width:560px){
.tf-homepage .tf-sourcing-solutions .tf-service-card,
.tf-homepage .tf-business-growth-services .tf-service-card{
flex-basis:min(80vw,318px)!important;
width:min(80vw,318px)!important;
min-width:min(80vw,318px)!important;
max-width:min(80vw,318px)!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-hero,
.tf-homepage .tf-business-growth-services .tf-service-card-hero{
height:174px!important;
min-height:174px!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-media,
.tf-homepage .tf-business-growth-services .tf-service-card-media{
inset:8px 0 58px 0!important;
padding:4px 15px 6px!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
.tf-homepage .tf-business-growth-services .tf-service-card-media img{
max-width:78%!important;
max-height:96%!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-directory-copy,
.tf-homepage .tf-business-growth-services .tf-service-card-directory-copy{
left:9px!important;
right:9px!important;
bottom:6px!important;
height:52px!important;
min-height:52px!important;
max-height:52px!important;
}
}
@media(max-width:390px){
.tf-homepage .tf-sourcing-solutions .tf-service-card,
.tf-homepage .tf-business-growth-services .tf-service-card{
flex-basis:82vw!important;
width:82vw!important;
min-width:82vw!important;
max-width:82vw!important;
}
.tf-homepage .tf-sourcing-solutions .tf-service-card-media img,
.tf-homepage .tf-business-growth-services .tf-service-card-media img{
max-width:75%!important;
}
}
/* ===== curated-sourcing-premium-colors-18.4.156.css ===== */
/* TradesFolks 18.4.156
Premium treatment for "Discover more ways to source".
Scoped only to .curated-b2b-market.
*/
.tf-homepage .curated-b2b-market{
position:relative!important;
overflow:hidden!important;
padding:18px 0 20px!important;
border:1px solid #dce6f0!important;
border-radius:22px!important;
background:
radial-gradient(circle at 8% 0%,rgba(17,109,221,.10),transparent 27%),
radial-gradient(circle at 94% 8%,rgba(255,190,47,.12),transparent 24%),
linear-gradient(145deg,#f7fbff 0%,#f4f7fb 52%,#fffaf0 100%)!important;
box-shadow:0 14px 34px rgba(16,43,87,.05)!important;
}
.tf-homepage .curated-b2b-market::before{
content:""!important;
position:absolute!important;
width:260px!important;
height:260px!important;
right:-100px!important;
top:-130px!important;
border:1px solid rgba(17,109,221,.10)!important;
border-radius:50%!important;
box-shadow:0 0 0 48px rgba(17,109,221,.035),0 0 0 96px rgba(255,190,47,.025)!important;
pointer-events:none!important;
}
.tf-homepage .curated-b2b-market>.shell{
position:relative!important;
z-index:1!important;
padding:0 18px!important;
}
.tf-homepage .curated-b2b-heading{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:16px!important;
margin-bottom:12px!important;
}
.tf-homepage .curated-b2b-heading .eyebrow{
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
margin-bottom:7px!important;
color:#1267c8!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.10em!important;
}
.tf-homepage .curated-b2b-heading .eyebrow::before{
content:""!important;
width:24px!important;
height:3px!important;
border-radius:999px!important;
background:linear-gradient(90deg,#126bd2,#ffbb2c)!important;
}
.tf-homepage .curated-b2b-heading h2{
margin:0!important;
color:#0b274f!important;
font-size:clamp(24px,2vw,34px)!important;
line-height:1.04!important;
letter-spacing:-.035em!important;
}
/* Four differentiated but consistent premium card tones. */
.tf-homepage .curated-b2b-card{
--tone:#176fd0;
--tone-soft:#eaf3ff;
--tone-deep:#0d3b76;
position:relative!important;
overflow:hidden!important;
border:1px solid color-mix(in srgb,var(--tone) 22%,#dbe5ef)!important;
border-top:4px solid var(--tone)!important;
border-radius:17px!important;
background:
linear-gradient(180deg,color-mix(in srgb,var(--tone-soft) 56%,white) 0 34%,#ffffff 34% 100%)!important;
box-shadow:0 12px 26px rgba(16,43,87,.055)!important;
}
.tf-homepage .curated-b2b-card.is-tone-1{
--tone:#b97812;
--tone-soft:#fff0c8;
--tone-deep:#855200;
}
.tf-homepage .curated-b2b-card.is-tone-2{
--tone:#14906c;
--tone-soft:#e4f7f0;
--tone-deep:#0b694f;
}
.tf-homepage .curated-b2b-card.is-tone-3{
--tone:#7656c5;
--tone-soft:#eee9ff;
--tone-deep:#563b9e;
}
.tf-homepage .curated-b2b-card::after{
content:""!important;
position:absolute!important;
width:120px!important;
height:120px!important;
right:-58px!important;
top:-54px!important;
border:1px solid color-mix(in srgb,var(--tone) 20%,transparent)!important;
border-radius:50%!important;
box-shadow:0 0 0 22px color-mix(in srgb,var(--tone) 5%,transparent)!important;
pointer-events:none!important;
}
.tf-homepage .curated-b2b-card>h3{
position:relative!important;
z-index:1!important;
margin:0!important;
padding:15px 15px 12px!important;
color:#0b274f!important;
font-size:15px!important;
line-height:1.08!important;
letter-spacing:-.018em!important;
font-weight:850!important;
}
.tf-homepage .curated-b2b-grid{
position:relative!important;
z-index:1!important;
gap:8px!important;
padding:0 12px 10px!important;
}
.tf-homepage .curated-b2b-item{
min-width:0!important;
padding:0 0 7px!important;
border-radius:11px!important;
background:rgba(255,255,255,.76)!important;
}
.tf-homepage .curated-b2b-image{
overflow:hidden!important;
border:1px solid #e4eaf1!important;
border-radius:10px!important;
background:#fff!important;
box-shadow:0 4px 12px rgba(16,43,87,.035)!important;
}
.tf-homepage .curated-b2b-image img{
transition:transform .22s ease!important;
}
.tf-homepage .curated-b2b-item:hover .curated-b2b-image img{
transform:scale(1.025)!important;
}
.tf-homepage .curated-b2b-item>strong{
display:block!important;
margin-top:7px!important;
padding:0 3px!important;
color:#142b4b!important;
font-weight:760!important;
}
.tf-homepage .curated-b2b-item>small{
padding:0 3px!important;
color:#7a8da2!important;
}
.tf-homepage .curated-b2b-cta{
position:relative!important;
z-index:1!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
min-height:42px!important;
margin:0 12px 12px!important;
padding:0 12px!important;
border:1px solid color-mix(in srgb,var(--tone) 22%,#dce5ef)!important;
border-radius:10px!important;
background:color-mix(in srgb,var(--tone-soft) 72%,white)!important;
color:var(--tone-deep)!important;
font-weight:850!important;
text-decoration:none!important;
}
.tf-homepage .curated-b2b-cta svg{
width:20px!important;
height:20px!important;
padding:4px!important;
border-radius:50%!important;
background:#fff!important;
box-shadow:0 3px 9px rgba(16,43,87,.06)!important;
}
/* Laptop/zoom safety. */
@media(max-width:1180px){
.tf-homepage .curated-b2b-market{
padding:16px 0 18px!important;
}
.tf-homepage .curated-b2b-market>.shell{
padding:0 14px!important;
}
}
/* Mobile: compact, premium and still 2x2 inside each card. */
@media(max-width:820px){
.tf-homepage .curated-b2b-market{
padding:14px 0 15px!important;
border-radius:18px!important;
}
.tf-homepage .curated-b2b-market>.shell{
padding:0 10px!important;
}
.tf-homepage .curated-b2b-heading{
margin-bottom:9px!important;
}
.tf-homepage .curated-b2b-heading h2{
font-size:20px!important;
line-height:1.05!important;
}
.tf-homepage .curated-b2b-heading .eyebrow{
margin-bottom:5px!important;
font-size:5.8px!important;
}
.tf-homepage .curated-b2b-rail{
gap:8px!important;
}
.tf-homepage .curated-b2b-card{
flex:0 0 min(82vw,318px)!important;
width:min(82vw,318px)!important;
min-width:min(82vw,318px)!important;
max-width:min(82vw,318px)!important;
border-radius:14px!important;
border-top-width:3px!important;
}
.tf-homepage .curated-b2b-card>h3{
padding:11px 11px 9px!important;
font-size:12.5px!important;
}
.tf-homepage .curated-b2b-grid{
gap:6px!important;
padding:0 9px 8px!important;
}
.tf-homepage .curated-b2b-image{
border-radius:8px!important;
}
.tf-homepage .curated-b2b-item>strong{
margin-top:5px!important;
font-size:8.5px!important;
line-height:1.15!important;
}
.tf-homepage .curated-b2b-item>small{
font-size:6px!important;
}
.tf-homepage .curated-b2b-cta{
min-height:35px!important;
margin:0 9px 9px!important;
padding:0 9px!important;
border-radius:8px!important;
font-size:7px!important;
}
}
@media(max-width:430px){
.tf-homepage .curated-b2b-card{
flex-basis:84vw!important;
width:84vw!important;
min-width:84vw!important;
max-width:84vw!important;
}
.tf-homepage .curated-b2b-market::before{
width:180px!important;
height:180px!important;
}
}
/* ===== curated-sourcing-mobile-compact-18.4.157.css ===== */
/* TradesFolks 18.4.157
Mobile compact fix for "Discover more ways to source".
Desktop/tablet-wide layout intentionally untouched.
*/
@media(max-width:820px){
.tf-homepage .curated-b2b-market{
padding:10px 0 11px!important;
}
.tf-homepage .curated-b2b-market>.shell{
padding:0 8px!important;
}
.tf-homepage .curated-b2b-heading{
margin-bottom:7px!important;
}
.tf-homepage .curated-b2b-heading h2{
font-size:18px!important;
line-height:1.04!important;
letter-spacing:-.025em!important;
}
.tf-homepage .curated-b2b-heading .eyebrow{
margin-bottom:4px!important;
font-size:5.4px!important;
}
.tf-homepage .curated-b2b-rail{
display:flex!important;
flex-wrap:nowrap!important;
gap:7px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
padding:0 0 2px!important;
scroll-snap-type:x mandatory!important;
overscroll-behavior-inline:contain!important;
-webkit-overflow-scrolling:touch!important;
scrollbar-width:none!important;
}
.tf-homepage .curated-b2b-rail::-webkit-scrollbar{
display:none!important;
}
.tf-homepage .curated-b2b-card{
display:flex!important;
flex:0 0 min(88vw,330px)!important;
width:min(88vw,330px)!important;
min-width:min(88vw,330px)!important;
max-width:min(88vw,330px)!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
flex-direction:column!important;
scroll-snap-align:start!important;
overflow:hidden!important;
border-radius:14px!important;
}
.tf-homepage .curated-b2b-card>h3{
margin:0!important;
padding:10px 10px 8px!important;
font-size:12.5px!important;
line-height:1.08!important;
min-height:0!important;
}
.tf-homepage .curated-b2b-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
padding:0 9px 8px!important;
min-height:0!important;
}
.tf-homepage .curated-b2b-item{
display:flex!important;
min-width:0!important;
flex-direction:column!important;
padding:0!important;
border-radius:9px!important;
background:transparent!important;
}
.tf-homepage .curated-b2b-image{
display:flex!important;
width:100%!important;
height:94px!important;
min-height:94px!important;
max-height:94px!important;
align-items:center!important;
justify-content:center!important;
overflow:hidden!important;
border-radius:8px!important;
background:#fff!important;
}
.tf-homepage .curated-b2b-image img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
object-fit:contain!important;
object-position:center!important;
margin:0!important;
}
.tf-homepage .curated-b2b-item>strong{
display:-webkit-box!important;
margin:5px 1px 0!important;
padding:0!important;
overflow:hidden!important;
color:#142b4b!important;
font-size:8.4px!important;
line-height:1.16!important;
font-weight:780!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
min-height:19px!important;
}
.tf-homepage .curated-b2b-item>small{
display:none!important;
}
.tf-homepage .curated-b2b-cta{
margin:auto 9px 9px!important;
min-height:34px!important;
height:34px!important;
padding:0 9px!important;
border-radius:8px!important;
font-size:7px!important;
line-height:1!important;
}
.tf-homepage .curated-b2b-cta svg{
width:18px!important;
height:18px!important;
padding:4px!important;
}
.tf-homepage .curated-b2b-card::after{
width:84px!important;
height:84px!important;
right:-38px!important;
top:-35px!important;
}
}
@media(max-width:560px){
.tf-homepage .curated-b2b-card{
flex-basis:min(89vw,314px)!important;
width:min(89vw,314px)!important;
min-width:min(89vw,314px)!important;
max-width:min(89vw,314px)!important;
}
.tf-homepage .curated-b2b-image{
height:88px!important;
min-height:88px!important;
max-height:88px!important;
}
.tf-homepage .curated-b2b-card>h3{
font-size:12px!important;
}
}
@media(max-width:390px){
.tf-homepage .curated-b2b-card{
flex-basis:90vw!important;
width:90vw!important;
min-width:90vw!important;
max-width:90vw!important;
}
.tf-homepage .curated-b2b-image{
height:82px!important;
min-height:82px!important;
max-height:82px!important;
}
.tf-homepage .curated-b2b-item>strong{
font-size:8px!important;
}
}
/* ===== search-marketplace-premium-responsive-18.4.158.css ===== */
/* TradesFolks 18.4.158
Premium, resolution-safe Search Marketplace.
Scoped strictly to .tf-search-marketplace.
*/
.tf-search-marketplace{
--sr-navy:#0a2b5a;
--sr-navy-2:#103d78;
--sr-blue:#0b68d8;
--sr-gold:#ffbc2d;
--sr-bg:#f4f7fb;
--sr-line:#dbe5ef;
--sr-text:#102746;
--sr-muted:#687d95;
}
/* ===========================
PREMIUM SEARCH INTELLIGENCE HERO
=========================== */
.tf-search-marketplace .tf-search-hero{
position:relative!important;
overflow:hidden!important;
padding:28px 0!important;
background:
radial-gradient(circle at 92% 12%,rgba(49,116,203,.26),transparent 28%),
radial-gradient(circle at 62% 120%,rgba(255,188,45,.10),transparent 30%),
linear-gradient(135deg,#092957 0%,#103d78 100%)!important;
}
.tf-search-marketplace .tf-search-hero::before{
content:""!important;
position:absolute!important;
width:360px!important;
height:360px!important;
right:-150px!important;
top:-230px!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:50%!important;
box-shadow:0 0 0 48px rgba(255,255,255,.025),0 0 0 96px rgba(255,188,45,.018)!important;
pointer-events:none!important;
}
.tf-search-marketplace .tf-search-hero .shell,
.tf-search-marketplace .tf-search-results-section>.shell{
width:calc(100% - 56px)!important;
max-width:none!important;
margin-inline:auto!important;
}
.tf-search-marketplace .tf-search-hero-grid{
position:relative!important;
z-index:1!important;
display:grid!important;
grid-template-columns:minmax(0,1.12fr) minmax(430px,.88fr)!important;
gap:34px!important;
align-items:end!important;
}
.tf-search-marketplace .tf-search-intro{
min-width:0!important;
}
.tf-search-marketplace .tf-search-hero .eyebrow{
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
color:#ffd15b!important;
font-size:8px!important;
line-height:1!important;
font-weight:900!important;
letter-spacing:.13em!important;
}
.tf-search-marketplace .tf-search-hero .eyebrow::before{
content:""!important;
width:26px!important;
height:3px!important;
border-radius:999px!important;
background:#ffbc2d!important;
}
.tf-search-marketplace .tf-search-hero h1{
max-width:15ch!important;
margin:11px 0 8px!important;
color:#fff!important;
font-size:clamp(38px,3.65vw,58px)!important;
line-height:.99!important;
letter-spacing:-.05em!important;
font-weight:850!important;
}
.tf-search-marketplace .tf-search-hero p{
max-width:760px!important;
margin:0!important;
color:#dce8f6!important;
font-size:12px!important;
line-height:1.5!important;
}
.tf-search-marketplace .tf-search-expansion,
.tf-search-marketplace .tf-search-discovery-row>div{
display:flex!important;
min-width:0!important;
gap:6px!important;
align-items:center!important;
}
.tf-search-marketplace .tf-search-expansion{
flex-wrap:wrap!important;
margin-top:13px!important;
}
.tf-search-marketplace .tf-search-expansion>span,
.tf-search-marketplace .tf-search-discovery-row b{
flex:0 0 auto!important;
color:#fff!important;
font-size:8px!important;
font-weight:850!important;
text-transform:none!important;
letter-spacing:0!important;
}
.tf-search-marketplace .tf-search-expansion>a,
.tf-search-marketplace .tf-search-discovery-row a{
display:inline-flex!important;
flex:0 0 auto!important;
min-height:28px!important;
align-items:center!important;
padding:0 10px!important;
border:1px solid rgba(255,194,55,.58)!important;
border-radius:999px!important;
background:#fff9e8!important;
color:#6b4800!important;
font-size:7.5px!important;
line-height:1!important;
font-weight:850!important;
text-decoration:none!important;
}
.tf-search-marketplace .tf-search-discovery-row{
display:flex!important;
flex-wrap:wrap!important;
gap:8px 14px!important;
margin-top:13px!important;
}
.tf-search-marketplace .tf-search-proof{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-search-marketplace .tf-search-proof article{
display:flex!important;
min-width:0!important;
min-height:82px!important;
align-items:flex-start!important;
gap:10px!important;
padding:13px!important;
border:1px solid rgba(255,255,255,.15)!important;
border-radius:15px!important;
background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.035))!important;
box-shadow:inset 0 1px rgba(255,255,255,.06)!important;
backdrop-filter:blur(4px)!important;
}
.tf-search-marketplace .tf-search-proof i{
display:grid!important;
width:28px!important;
height:28px!important;
flex:0 0 28px!important;
place-items:center!important;
border-radius:9px!important;
background:rgba(255,188,45,.13)!important;
color:#ffd15b!important;
font-size:7px!important;
font-style:normal!important;
font-weight:900!important;
}
.tf-search-marketplace .tf-search-proof article>div{
min-width:0!important;
}
.tf-search-marketplace .tf-search-proof b{
display:block!important;
color:#fff!important;
font-size:14px!important;
line-height:1.12!important;
font-weight:850!important;
}
.tf-search-marketplace .tf-search-proof span{
display:block!important;
margin-top:6px!important;
color:#bdcde0!important;
font-size:6.6px!important;
line-height:1.35!important;
}
/* ===========================
RESULTS SURFACE
=========================== */
.tf-search-marketplace .tf-search-results-section{
padding:20px 0 42px!important;
background:
linear-gradient(180deg,#f5f8fc 0%,#f1f5fa 100%)!important;
}
.tf-search-marketplace .tf-search-results-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:18px!important;
margin-bottom:12px!important;
}
.tf-search-marketplace .tf-search-results-head>div>span{
display:block!important;
color:#0868d6!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.12em!important;
}
.tf-search-marketplace .tf-search-results-head h2{
margin:5px 0 0!important;
color:#102746!important;
font-size:23px!important;
line-height:1.06!important;
letter-spacing:-.025em!important;
}
.tf-search-marketplace .tf-search-results-head>small{
display:flex!important;
align-items:center!important;
gap:5px!important;
min-height:32px!important;
padding:0 10px!important;
border:1px solid #d8e3ee!important;
border-radius:999px!important;
background:#fff!important;
box-shadow:0 4px 12px rgba(16,43,87,.035)!important;
color:#667c94!important;
font-size:6.7px!important;
font-style:normal!important;
white-space:nowrap!important;
}
.tf-search-marketplace .tf-search-results-head>small b{
color:#284765!important;
font-size:7px!important;
}
.tf-search-marketplace .tf-search-results-head>small em{
color:#526a84!important;
font-style:normal!important;
font-weight:750!important;
}
.tf-search-marketplace .tf-search-results-head>small i{
color:#7d90a5!important;
font-style:normal!important;
}
.tf-search-marketplace .tf-search-trending-inline{
display:flex!important;
gap:6px!important;
align-items:center!important;
overflow-x:auto!important;
margin:-1px 0 10px!important;
padding-bottom:2px!important;
scrollbar-width:none!important;
}
.tf-search-marketplace .tf-search-trending-inline::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-search-trending-inline>*{flex:0 0 auto!important}
.tf-search-marketplace .tf-search-trending-inline b{
color:#49617c!important;
font-size:7px!important;
}
.tf-search-marketplace .tf-search-trending-inline a{
min-height:26px!important;
display:inline-flex!important;
align-items:center!important;
padding:0 9px!important;
border:1px solid #dce5ef!important;
border-radius:999px!important;
background:#fff!important;
color:#31506f!important;
font-size:6.5px!important;
font-weight:750!important;
}
/* ===========================
FILTER + CATALOG
=========================== */
.tf-search-marketplace .tf-search-catalog{
display:grid!important;
grid-template-columns:245px minmax(0,1fr)!important;
gap:16px!important;
align-items:start!important;
}
.tf-search-marketplace .tf-search-catalog>.filter-sidebar{
position:sticky!important;
top:82px!important;
min-width:0!important;
border:1px solid #dbe5ef!important;
border-radius:16px!important;
background:#fff!important;
box-shadow:0 10px 26px rgba(16,43,87,.045)!important;
overflow:hidden!important;
}
.tf-search-marketplace .catalog-filter{
padding:14px!important;
}
.tf-search-marketplace .filter-head{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
margin-bottom:13px!important;
}
.tf-search-marketplace .filter-head>div{
display:flex!important;
align-items:center!important;
gap:6px!important;
}
.tf-search-marketplace .filter-head strong{
color:#102746!important;
font-size:14px!important;
}
.tf-search-marketplace .filter-head span{
padding:4px 7px!important;
border-radius:999px!important;
background:#eaf3ff!important;
color:#0969d6!important;
font-size:6px!important;
font-weight:850!important;
}
.tf-search-marketplace .filter-head>[data-filter-close]{
display:none!important;
}
.tf-search-marketplace .tf-filter-field,
.tf-search-marketplace .tf-facet-group{
display:block!important;
margin:0 0 12px!important;
padding:0!important;
border:0!important;
}
.tf-search-marketplace .tf-filter-field>span,
.tf-search-marketplace .tf-facet-group legend{
display:block!important;
margin-bottom:6px!important;
color:#334e6c!important;
font-size:8px!important;
font-weight:850!important;
}
.tf-search-marketplace .catalog-filter input[type="search"],
.tf-search-marketplace .catalog-filter input[type="number"],
.tf-search-marketplace .catalog-filter select{
width:100%!important;
min-height:40px!important;
border:1px solid #d8e2ed!important;
border-radius:10px!important;
background:#fbfdff!important;
padding:0 10px!important;
color:#173251!important;
font-size:8px!important;
}
.tf-search-marketplace .range-row{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:6px!important;
}
.tf-search-marketplace .check-row{
display:flex!important;
min-height:30px!important;
align-items:center!important;
gap:7px!important;
color:#425d79!important;
font-size:8px!important;
}
.tf-search-marketplace .check-row input{
width:15px!important;
height:15px!important;
}
.tf-search-marketplace .tf-filter-actions{
display:grid!important;
gap:6px!important;
margin-top:13px!important;
}
.tf-search-marketplace .filter-apply{
min-height:40px!important;
border:0!important;
border-radius:10px!important;
background:linear-gradient(135deg,#0a4fa9,#0d6ddd)!important;
color:#fff!important;
font-size:8px!important;
font-weight:850!important;
}
.tf-search-marketplace .filter-clear{
text-align:center!important;
color:#687e96!important;
font-size:7px!important;
font-weight:750!important;
}
.tf-search-marketplace .catalog-toolbar{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
min-height:48px!important;
margin:0 0 10px!important;
padding:0!important;
border:0!important;
background:transparent!important;
}
.tf-search-marketplace .catalog-toolbar>div{
display:flex!important;
align-items:center!important;
gap:8px!important;
}
.tf-search-marketplace .catalog-toolbar strong{
color:#172f4d!important;
font-size:10px!important;
}
.tf-search-marketplace .mobile-filter-button{
display:none!important;
}
.tf-search-marketplace .catalog-toolbar select{
min-width:165px!important;
min-height:40px!important;
border:1px solid #d8e2ed!important;
border-radius:10px!important;
background:#fff!important;
padding:0 32px 0 10px!important;
color:#1b324e!important;
font-size:8px!important;
}
/* Search result cards: denser/premium without changing component logic. */
.tf-search-marketplace .product-grid{
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:12px!important;
}
.tf-search-marketplace .product-card{
border:1px solid #dbe5ef!important;
border-radius:16px!important;
background:#fff!important;
box-shadow:0 7px 18px rgba(16,43,87,.035)!important;
overflow:hidden!important;
}
.tf-search-marketplace .product-card:hover{
transform:translateY(-2px)!important;
box-shadow:0 14px 28px rgba(16,43,87,.075)!important;
}
.tf-search-marketplace .product-image{
height:205px!important;
padding:11px!important;
}
.tf-search-marketplace .product-image img{
object-fit:contain!important;
}
.tf-search-marketplace .product-body{
padding:13px!important;
}
.tf-search-marketplace .product-body h3{
height:auto!important;
min-height:38px!important;
margin-bottom:8px!important;
font-size:11px!important;
line-height:1.32!important;
}
.tf-search-marketplace .price{
font-size:15px!important;
}
.tf-search-marketplace .supplier-line{
font-size:8px!important;
}
.tf-search-marketplace .card-actions{
gap:6px!important;
margin-top:10px!important;
}
.tf-search-marketplace .card-actions a,
.tf-search-marketplace .card-actions button{
min-height:35px!important;
border-radius:8px!important;
font-size:7.5px!important;
}
/* ===========================
TABLET
=========================== */
@media(max-width:1180px){
.tf-search-marketplace .tf-search-hero .shell,
.tf-search-marketplace .tf-search-results-section>.shell{
width:calc(100% - 36px)!important;
}
.tf-search-marketplace .tf-search-hero-grid{
grid-template-columns:minmax(0,1fr) minmax(340px,.82fr)!important;
gap:22px!important;
}
.tf-search-marketplace .tf-search-catalog{
grid-template-columns:220px minmax(0,1fr)!important;
gap:12px!important;
}
.tf-search-marketplace .product-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
}
}
/* ===========================
MOBILE / SMALL TABLET
=========================== */
@media(max-width:900px){
.tf-search-marketplace .tf-search-hero{
padding:18px 0!important;
}
.tf-search-marketplace .tf-search-hero .shell,
.tf-search-marketplace .tf-search-results-section>.shell{
width:calc(100% - 16px)!important;
}
.tf-search-marketplace .tf-search-hero-grid{
grid-template-columns:1fr!important;
gap:14px!important;
}
.tf-search-marketplace .tf-search-hero h1{
max-width:14ch!important;
margin:8px 0 6px!important;
font-size:30px!important;
line-height:1.01!important;
}
.tf-search-marketplace .tf-search-hero p{
display:-webkit-box!important;
max-width:100%!important;
overflow:hidden!important;
font-size:9px!important;
line-height:1.4!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-search-marketplace .tf-search-expansion,
.tf-search-marketplace .tf-search-discovery-row,
.tf-search-marketplace .tf-search-discovery-row>div{
flex-wrap:nowrap!important;
overflow-x:auto!important;
overflow-y:hidden!important;
width:100%!important;
padding-bottom:2px!important;
scrollbar-width:none!important;
overscroll-behavior-inline:contain!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-search-marketplace .tf-search-expansion::-webkit-scrollbar,
.tf-search-marketplace .tf-search-discovery-row::-webkit-scrollbar,
.tf-search-marketplace .tf-search-discovery-row>div::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-search-expansion>a,
.tf-search-marketplace .tf-search-discovery-row a{
min-height:27px!important;
padding:0 9px!important;
font-size:7px!important;
}
.tf-search-marketplace .tf-search-proof{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:6px!important;
}
.tf-search-marketplace .tf-search-proof article{
min-height:64px!important;
gap:6px!important;
padding:9px!important;
border-radius:11px!important;
}
.tf-search-marketplace .tf-search-proof i{
display:none!important;
}
.tf-search-marketplace .tf-search-proof b{
font-size:10px!important;
}
.tf-search-marketplace .tf-search-proof span{
margin-top:4px!important;
font-size:5.5px!important;
}
.tf-search-marketplace .tf-search-results-section{
padding:13px 0 92px!important;
}
.tf-search-marketplace .tf-search-results-head{
display:block!important;
margin-bottom:9px!important;
}
.tf-search-marketplace .tf-search-results-head h2{
font-size:18px!important;
line-height:1.05!important;
}
.tf-search-marketplace .tf-search-results-head>small{
display:inline-flex!important;
max-width:100%!important;
margin-top:8px!important;
min-height:29px!important;
overflow:hidden!important;
padding:0 8px!important;
font-size:6px!important;
}
.tf-search-marketplace .tf-search-results-head>small i{
display:none!important;
}
.tf-search-marketplace .tf-search-catalog{
display:block!important;
width:100%!important;
}
.tf-search-marketplace .tf-search-catalog>main{
width:100%!important;
min-width:0!important;
}
/* Premium off-canvas filter drawer */
.tf-search-marketplace .tf-search-catalog>.filter-sidebar{
position:fixed!important;
z-index:1002!important;
top:0!important;
bottom:0!important;
left:0!important;
width:min(340px,88vw)!important;
height:100dvh!important;
overflow-y:auto!important;
border:0!important;
border-radius:0 18px 18px 0!important;
transform:translateX(-105%)!important;
transition:transform .23s ease!important;
box-shadow:18px 0 44px rgba(6,28,58,.22)!important;
}
.tf-search-marketplace .tf-search-catalog>.filter-sidebar.open{
transform:translateX(0)!important;
}
.tf-search-marketplace .filter-head>[data-filter-close]{
display:grid!important;
width:32px!important;
height:32px!important;
place-items:center!important;
border:1px solid #dce5ef!important;
border-radius:9px!important;
background:#fff!important;
color:#294764!important;
}
.tf-search-marketplace .filter-backdrop{
position:fixed!important;
z-index:1001!important;
inset:0!important;
background:rgba(5,24,49,.42)!important;
backdrop-filter:blur(2px)!important;
opacity:0!important;
visibility:hidden!important;
transition:.2s!important;
}
.tf-search-marketplace:has(.filter-sidebar.open) .filter-backdrop{
opacity:1!important;
visibility:visible!important;
}
.tf-search-marketplace .catalog-toolbar{
position:sticky!important;
top:0!important;
z-index:24!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
gap:7px!important;
min-height:48px!important;
margin:0 0 8px!important;
padding:5px 0!important;
background:rgba(245,248,252,.94)!important;
backdrop-filter:blur(10px)!important;
}
.tf-search-marketplace .mobile-filter-button{
display:inline-flex!important;
min-height:38px!important;
align-items:center!important;
justify-content:center!important;
padding:0 10px!important;
border:1px solid #d8e2ed!important;
border-radius:10px!important;
background:#fff!important;
color:#173251!important;
font-size:8px!important;
font-weight:850!important;
}
.tf-search-marketplace .catalog-toolbar strong{
font-size:8px!important;
white-space:nowrap!important;
}
.tf-search-marketplace .catalog-toolbar select{
min-width:132px!important;
min-height:38px!important;
font-size:7.5px!important;
}
.tf-search-marketplace .product-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-search-marketplace .product-card{
border-radius:13px!important;
}
.tf-search-marketplace .product-image{
height:150px!important;
padding:8px!important;
}
.tf-search-marketplace .product-body{
padding:9px!important;
}
.tf-search-marketplace .product-body h3{
display:-webkit-box!important;
min-height:31px!important;
overflow:hidden!important;
margin-bottom:6px!important;
font-size:8.5px!important;
line-height:1.25!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
}
.tf-search-marketplace .price{
font-size:12px!important;
}
.tf-search-marketplace .product-body>p,
.tf-search-marketplace .supplier-line{
font-size:6.5px!important;
}
.tf-search-marketplace .card-actions a,
.tf-search-marketplace .card-actions button{
min-height:32px!important;
font-size:6.5px!important;
}
}
/* ===========================
PHONE
=========================== */
@media(max-width:560px){
.tf-search-marketplace .tf-search-hero{
padding:15px 0 14px!important;
}
.tf-search-marketplace .tf-search-hero .shell,
.tf-search-marketplace .tf-search-results-section>.shell{
width:calc(100% - 12px)!important;
}
.tf-search-marketplace .tf-search-hero .eyebrow{
font-size:6.2px!important;
}
.tf-search-marketplace .tf-search-hero h1{
max-width:13ch!important;
font-size:27px!important;
}
.tf-search-marketplace .tf-search-proof article{
min-height:58px!important;
padding:8px!important;
}
.tf-search-marketplace .tf-search-proof b{
font-size:9.5px!important;
}
.tf-search-marketplace .tf-search-results-head h2{
font-size:17px!important;
}
.tf-search-marketplace .product-image{
height:132px!important;
}
}
@media(max-width:390px){
.tf-search-marketplace .tf-search-hero h1{
font-size:24px!important;
}
.tf-search-marketplace .tf-search-proof{
grid-template-columns:1fr 1fr!important;
}
.tf-search-marketplace .tf-search-proof article:nth-child(3){
grid-column:1/-1!important;
min-height:52px!important;
}
.tf-search-marketplace .catalog-toolbar{
grid-template-columns:1fr auto!important;
}
.tf-search-marketplace .catalog-toolbar select{
min-width:118px!important;
}
.tf-search-marketplace .product-image{
height:118px!important;
}
}
/* Sprint 931 — supplier-style product list view. Grid view remains untouched. */
.tf-search-marketplace .tf-catalog-toolbar-actions{display:flex;align-items:center;justify-content:flex-end;gap:10px;min-width:0}
.tf-search-marketplace .tf-catalog-toolbar-actions form{margin:0}
.tf-search-marketplace .tf-catalog-view-switch{display:inline-flex;gap:5px;align-items:center}
.tf-search-marketplace .tf-catalog-view-switch a{width:34px;height:34px;display:grid;place-items:center;border:1px solid #d8e0ea;border-radius:9px;background:#fff;color:#687386;text-decoration:none;transition:.18s ease}
.tf-search-marketplace .tf-catalog-view-switch a:hover{border-color:#0a67d8;color:#0a67d8}
.tf-search-marketplace .tf-catalog-view-switch a.active{background:#eaf3ff;border-color:#9dc6ff;color:#075fc8}
.tf-search-marketplace .tf-catalog-view-switch svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.65;stroke-linecap:round;stroke-linejoin:round}
.tf-search-marketplace .tf-catalog-view-switch svg rect{fill:currentColor;stroke:none}
.tf-search-marketplace .tf-supplier-product-list{display:grid;gap:18px;min-width:0}
.tf-search-marketplace .tf-supplier-list-card{background:#fff;border:1px solid #dfe4ea;border-radius:17px;padding:18px;box-shadow:0 5px 20px rgba(13,31,57,.045);min-width:0;overflow:hidden}
.tf-search-marketplace .tf-supplier-list-head{display:grid;grid-template-columns:54px minmax(0,1fr) auto;align-items:center;gap:14px}
.tf-search-marketplace .tf-supplier-avatar{width:54px;height:54px;border:1px solid #d8e0e8;border-radius:9px;background:#fff;display:grid;place-items:center;text-decoration:none;overflow:hidden}
.tf-search-marketplace .tf-supplier-avatar span{width:42px;height:42px;border:2px solid #0871c9;border-radius:50%;display:grid;place-items:center;color:#0b63a9;font-size:11px;font-weight:900;letter-spacing:-.04em;background:#f4fbff}
.tf-search-marketplace .tf-supplier-list-identity{min-width:0}
.tf-search-marketplace .tf-supplier-title-line{display:flex;align-items:baseline;gap:10px;min-width:0;flex-wrap:wrap}
.tf-search-marketplace .tf-supplier-title-line h3{margin:0;font-size:18px;line-height:1.25;min-width:0}
.tf-search-marketplace .tf-supplier-title-line h3 a{color:#18212d;text-decoration:none}
.tf-search-marketplace .tf-supplier-title-line>span{font-size:12px;color:#5f6875}
.tf-search-marketplace .tf-supplier-trust-row{display:flex;align-items:center;gap:9px;flex-wrap:wrap;margin-top:6px;font-size:11px;color:#596573}
.tf-search-marketplace .tf-supplier-trust-row>*+*{padding-left:9px;border-left:1px solid #dde2e7}
.tf-search-marketplace .tf-supplier-trust-row .is-verified{color:#0869cc;border-left:0;padding-left:0}
.tf-search-marketplace .tf-supplier-trust-row strong{color:#173e72;font-weight:800}
.tf-search-marketplace .tf-list-rating{color:#252c35}.tf-search-marketplace .tf-list-rating::first-letter{color:#ffb200}.tf-search-marketplace .tf-list-rating u{font-weight:500;color:#454f5b;text-underline-offset:2px}
.tf-search-marketplace .tf-supplier-list-actions{display:flex;align-items:center;gap:10px;white-space:nowrap}
.tf-search-marketplace .tf-supplier-list-actions a,.tf-search-marketplace .tf-supplier-list-actions button{height:42px;padding:0 20px;border-radius:999px;font:800 12px/1 inherit;display:inline-flex;align-items:center;justify-content:center;cursor:pointer;text-decoration:none}
.tf-search-marketplace .tf-list-contact{background:#fff;border:1px solid #5c636c;color:#1e252d}
.tf-search-marketplace .tf-list-chat{background:#202020;border:1px solid #202020;color:#fff}
.tf-search-marketplace .tf-supplier-list-badges{display:flex;gap:8px;align-items:center;overflow-x:auto;scrollbar-width:none;margin:14px 0 16px}.tf-search-marketplace .tf-supplier-list-badges::-webkit-scrollbar{display:none}
.tf-search-marketplace .tf-supplier-list-badges span{flex:0 0 auto;padding:8px 11px;border-radius:8px;background:#f6f6f6;color:#272d35;font-size:11px;font-weight:700}
.tf-search-marketplace .tf-supplier-list-badges .tf-match-badge,.tf-search-marketplace .tf-supplier-list-badges .tf-rank-badge{background:#fff2ea;color:#7c3b13}.tf-search-marketplace .tf-supplier-list-badges .tf-rank-badge{color:#bd4f10}
.tf-search-marketplace .tf-supplier-list-main{display:grid;grid-template-columns:minmax(285px,33%) minmax(0,1fr);gap:24px;align-items:stretch}
.tf-search-marketplace .tf-supplier-list-metrics{padding-top:1px;min-width:0}
.tf-search-marketplace .tf-supplier-list-metrics dl{margin:0;display:grid;grid-template-columns:1fr 1fr;column-gap:24px;row-gap:13px}
.tf-search-marketplace .tf-supplier-list-metrics dl>div{min-width:0}.tf-search-marketplace .tf-supplier-list-metrics dt{font-size:11px;color:#4b5562;margin-bottom:3px}.tf-search-marketplace .tf-supplier-list-metrics dd{margin:0;font-size:14px;font-weight:800;color:#171e26;line-height:1.25;min-width:0;overflow:hidden;text-overflow:ellipsis}.tf-search-marketplace .tf-supplier-list-metrics dd a{color:inherit;text-decoration:none}
.tf-search-marketplace .tf-list-customization{margin-top:18px}.tf-search-marketplace .tf-list-customization small{display:block;font-size:11px;color:#4d5764;margin-bottom:8px}.tf-search-marketplace .tf-list-customization>div{display:flex;flex-wrap:wrap;gap:7px}.tf-search-marketplace .tf-list-customization span{padding:7px 10px;border:1px solid #d9dee4;border-radius:8px;background:#fff;color:#272e36;font-size:10px;font-weight:700}
.tf-search-marketplace .tf-supplier-list-gallery{display:grid;grid-template-columns:minmax(210px,1.75fr) repeat(3,minmax(105px,1fr));gap:10px;min-height:210px;min-width:0}
.tf-search-marketplace .tf-supplier-list-gallery>a{position:relative;display:block;border-radius:10px;overflow:hidden;background:#f4f6f8;min-width:0;text-decoration:none}.tf-search-marketplace .tf-supplier-list-gallery>a:nth-child(n+5){display:none}
.tf-search-marketplace .tf-supplier-list-gallery img{width:100%;height:100%;min-height:210px;object-fit:cover;display:block;transition:transform .25s ease}.tf-search-marketplace .tf-supplier-list-gallery>a:not(.is-primary) img{min-height:100%;height:100%}.tf-search-marketplace .tf-supplier-list-gallery>a:hover img{transform:scale(1.025)}
.tf-search-marketplace .tf-supplier-list-gallery strong{position:absolute;left:0;right:0;bottom:0;padding:10px 9px 7px;background:rgba(24,30,38,.82);color:#fff;font-size:12px;font-weight:900;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tf-search-marketplace .tf-supplier-list-gallery small{position:absolute;left:9px;top:9px;padding:5px 7px;border-radius:6px;background:rgba(255,255,255,.9);color:#25303c;font-size:9px;font-weight:800}
.tf-search-marketplace .tf-supplier-list-foot{display:flex;align-items:center;justify-content:flex-end;gap:14px;margin-top:12px;min-height:22px}.tf-search-marketplace .tf-supplier-list-foot a{color:#075fc8;font-size:11px;font-weight:800;text-decoration:none}.tf-search-marketplace .tf-supplier-list-foot span{font-size:10px;color:#6a7480}.tf-search-marketplace .tf-supplier-list-foot span::first-letter{color:#f4b400}
@media(max-width:1180px){.tf-search-marketplace .tf-supplier-list-main{grid-template-columns:260px minmax(0,1fr);gap:16px}.tf-search-marketplace .tf-supplier-list-gallery{grid-template-columns:minmax(190px,1.5fr) repeat(2,minmax(90px,1fr))}.tf-search-marketplace .tf-supplier-list-gallery>a:nth-child(4){display:none}.tf-search-marketplace .tf-supplier-list-actions a,.tf-search-marketplace .tf-supplier-list-actions button{padding:0 14px}}
@media(max-width:900px){.tf-search-marketplace .tf-supplier-list-card{padding:14px}.tf-search-marketplace .tf-supplier-list-head{grid-template-columns:46px minmax(0,1fr)}.tf-search-marketplace .tf-supplier-avatar{width:46px;height:46px}.tf-search-marketplace .tf-supplier-avatar span{width:36px;height:36px}.tf-search-marketplace .tf-supplier-list-actions{grid-column:1/-1}.tf-search-marketplace .tf-supplier-list-actions>*{flex:1}.tf-search-marketplace .tf-supplier-list-main{grid-template-columns:1fr}.tf-search-marketplace .tf-supplier-list-gallery{min-height:180px}.tf-search-marketplace .tf-supplier-list-gallery img{min-height:180px}.tf-search-marketplace .catalog-toolbar{align-items:center}.tf-search-marketplace .tf-catalog-toolbar-actions{gap:6px}}
@media(max-width:620px){.tf-search-marketplace .tf-catalog-toolbar-actions{width:100%;justify-content:space-between}.tf-search-marketplace .tf-catalog-toolbar-actions form{flex:1}.tf-search-marketplace .tf-catalog-toolbar-actions select{width:100%!important}.tf-search-marketplace .tf-supplier-list-title-line h3,.tf-search-marketplace .tf-supplier-title-line h3{font-size:15px}.tf-search-marketplace .tf-supplier-trust-row{gap:6px;font-size:9px}.tf-search-marketplace .tf-supplier-trust-row>*+*{padding-left:6px}.tf-search-marketplace .tf-supplier-list-actions a,.tf-search-marketplace .tf-supplier-list-actions button{height:39px;padding:0 10px;font-size:10px}.tf-search-marketplace .tf-supplier-list-badges{margin:12px 0}.tf-search-marketplace .tf-supplier-list-badges span{padding:7px 9px;font-size:9px}.tf-search-marketplace .tf-supplier-list-metrics dl{column-gap:12px;row-gap:10px}.tf-search-marketplace .tf-supplier-list-metrics dt{font-size:9px}.tf-search-marketplace .tf-supplier-list-metrics dd{font-size:12px}.tf-search-marketplace .tf-supplier-list-gallery{grid-template-columns:1.7fr 1fr;grid-template-rows:110px 110px;min-height:230px}.tf-search-marketplace .tf-supplier-list-gallery>a.is-primary{grid-row:1/3}.tf-search-marketplace .tf-supplier-list-gallery>a:nth-child(4){display:block}.tf-search-marketplace .tf-supplier-list-gallery>a:nth-child(n+4){display:none}.tf-search-marketplace .tf-supplier-list-gallery img,.tf-search-marketplace .tf-supplier-list-gallery>a:not(.is-primary) img{min-height:100%;height:100%}.tf-search-marketplace .tf-supplier-list-gallery strong{font-size:9px;padding:15px 6px 6px}.tf-search-marketplace .tf-supplier-list-foot{justify-content:space-between}}
/* ======================================================================
Sprint 932 — Premium Compact Supplier Product List Card
Scope: list view only. Grid view intentionally unchanged.
Theme: TradesFolks navy + golden yellow, no gradients.
====================================================================== */
.tf-search-marketplace .catalog-results.is-list .tf-supplier-list-card,
.tf-search-marketplace .tf-catalog-results.is-list .tf-supplier-list-card,
.tf-search-marketplace [data-catalog-results].is-list .tf-supplier-list-card{
border:1px solid #dbe3ec!important;
border-radius:14px!important;
padding:14px 15px 12px!important;
box-shadow:0 6px 18px rgba(7,29,73,.055)!important;
background:#fff!important;
}
.tf-search-marketplace .tf-supplier-list-head{
grid-template-columns:44px minmax(0,1fr) auto!important;
gap:10px!important;
}
.tf-search-marketplace .tf-supplier-avatar{
width:44px!important;height:44px!important;border-radius:10px!important;
border:1px solid #d7e1ec!important;background:#fff!important;
}
.tf-search-marketplace .tf-supplier-avatar span{
width:34px!important;height:34px!important;border:2px solid #0a69cc!important;
font-size:10px!important;color:#0a5eb8!important;background:#fff!important;
}
.tf-search-marketplace .tf-supplier-title-line{gap:8px!important;align-items:baseline!important}
.tf-search-marketplace .tf-supplier-title-line h3{
font-size:16px!important;line-height:1.15!important;letter-spacing:-.015em!important;
color:#102746!important;
}
.tf-search-marketplace .tf-supplier-title-line>span{font-size:10px!important;color:#64748b!important}
.tf-search-marketplace .tf-supplier-trust-row{
margin-top:5px!important;gap:7px!important;font-size:9px!important;color:#536477!important;
}
.tf-search-marketplace .tf-supplier-trust-row .is-verified{color:#0969d6!important}
.tf-search-marketplace .tf-list-rating{color:#263547!important}
.tf-search-marketplace .tf-list-rating::first-letter{color:#ffb900!important}
.tf-search-marketplace .tf-supplier-list-actions{gap:7px!important}
.tf-search-marketplace .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-list-actions button{
height:34px!important;min-width:118px!important;padding:0 15px!important;border-radius:999px!important;
font-size:10px!important;font-weight:850!important;box-shadow:none!important;
}
.tf-search-marketplace .tf-list-contact{
background:#fff!important;color:#102746!important;border:1px solid #9daaba!important;
}
.tf-search-marketplace .tf-list-chat{
background:#071d49!important;color:#fff!important;border:1px solid #071d49!important;
}
.tf-search-marketplace .tf-list-chat:hover{background:#ffbd17!important;color:#071d49!important;border-color:#ffbd17!important}
.tf-search-marketplace .tf-list-contact:hover{border-color:#ffbd17!important;color:#071d49!important;background:#fffaf0!important}
.tf-search-marketplace .tf-supplier-list-badges{
gap:6px!important;margin:10px 0 11px!important;padding:0!important;
}
.tf-search-marketplace .tf-supplier-list-badges span{
padding:6px 9px!important;border-radius:7px!important;background:#f5f7fa!important;
color:#35445a!important;font-size:8px!important;line-height:1.1!important;
}
.tf-search-marketplace .tf-supplier-list-badges .tf-match-badge,
.tf-search-marketplace .tf-supplier-list-badges .tf-rank-badge{
background:#fff4e9!important;color:#9b4a12!important;
}
.tf-search-marketplace .tf-supplier-list-main{
grid-template-columns:minmax(250px,31%) minmax(0,1fr)!important;
gap:16px!important;align-items:stretch!important;
}
.tf-search-marketplace .tf-supplier-list-metrics dl{
grid-template-columns:1fr 1fr!important;column-gap:18px!important;row-gap:8px!important;
}
.tf-search-marketplace .tf-supplier-list-metrics dt{font-size:8px!important;color:#6b7888!important;margin-bottom:2px!important}
.tf-search-marketplace .tf-supplier-list-metrics dd{font-size:11px!important;line-height:1.2!important;color:#15263d!important}
.tf-search-marketplace .tf-list-customization{margin-top:11px!important}
.tf-search-marketplace .tf-list-customization small{font-size:8px!important;color:#66768a!important}
.tf-search-marketplace .tf-list-customization>div{gap:5px!important;margin-top:5px!important}
.tf-search-marketplace .tf-list-customization span{
padding:5px 7px!important;border-radius:7px!important;border:1px solid #d7e0ea!important;
background:#fff!important;color:#26384e!important;font-size:8px!important;line-height:1!important;
}
.tf-search-marketplace .tf-supplier-list-gallery{
grid-template-columns:minmax(180px,1.55fr) repeat(3,minmax(78px,.72fr))!important;
gap:7px!important;min-height:154px!important;max-height:174px!important;
}
.tf-search-marketplace .tf-supplier-list-gallery>a{border-radius:9px!important;background:#f6f8fb!important;border:1px solid #edf1f5!important}
.tf-search-marketplace .tf-supplier-list-gallery img{
min-height:154px!important;height:100%!important;max-height:174px!important;object-fit:contain!important;background:#fff!important;
}
.tf-search-marketplace .tf-supplier-list-gallery>a:not(.is-primary) img{min-height:100%!important;height:100%!important;object-fit:cover!important}
.tf-search-marketplace .tf-supplier-list-gallery strong{
padding:7px 7px 6px!important;background:#071d49!important;color:#fff!important;font-size:9px!important;
}
.tf-search-marketplace .tf-supplier-list-gallery small{
top:7px!important;left:7px!important;padding:4px 6px!important;border-radius:5px!important;
background:#fff!important;color:#24364d!important;font-size:7px!important;box-shadow:0 2px 7px rgba(7,29,73,.08)!important;
}
.tf-search-marketplace .tf-supplier-list-foot{
margin-top:8px!important;min-height:18px!important;gap:10px!important;
}
.tf-search-marketplace .tf-supplier-list-foot a{font-size:9px!important;color:#075fc8!important}
.tf-search-marketplace .tf-supplier-list-foot span{font-size:8px!important;color:#69788a!important}
@media(max-width:1180px){
.tf-search-marketplace .tf-supplier-list-main{grid-template-columns:230px minmax(0,1fr)!important;gap:12px!important}
.tf-search-marketplace .tf-supplier-list-gallery{grid-template-columns:minmax(170px,1.5fr) repeat(2,minmax(82px,.8fr))!important}
.tf-search-marketplace .tf-supplier-list-gallery>a:nth-child(4){display:none!important}
.tf-search-marketplace .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-list-actions button{min-width:104px!important;padding:0 11px!important}
}
@media(max-width:900px){
.tf-search-marketplace .catalog-results.is-list .tf-supplier-list-card,
.tf-search-marketplace .tf-catalog-results.is-list .tf-supplier-list-card,
.tf-search-marketplace [data-catalog-results].is-list .tf-supplier-list-card,
.tf-search-marketplace .tf-supplier-list-card{padding:12px!important;border-radius:13px!important}
.tf-search-marketplace .tf-supplier-list-head{grid-template-columns:40px minmax(0,1fr)!important;gap:9px!important}
.tf-search-marketplace .tf-supplier-avatar{width:40px!important;height:40px!important}
.tf-search-marketplace .tf-supplier-avatar span{width:31px!important;height:31px!important;font-size:9px!important}
.tf-search-marketplace .tf-supplier-list-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important;margin-top:2px!important}
.tf-search-marketplace .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-list-actions button{width:100%!important;min-width:0!important;height:36px!important}
.tf-search-marketplace .tf-supplier-list-main{grid-template-columns:1fr!important;gap:11px!important}
.tf-search-marketplace .tf-supplier-list-metrics dl{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.tf-search-marketplace .tf-supplier-list-gallery{grid-template-columns:minmax(0,1.65fr) repeat(2,minmax(72px,.75fr))!important;min-height:160px!important;max-height:170px!important}
.tf-search-marketplace .tf-supplier-list-gallery img{min-height:160px!important;max-height:170px!important}
}
@media(max-width:620px){
.tf-search-marketplace .tf-supplier-list-card{padding:10px!important;border-radius:12px!important;box-shadow:0 4px 14px rgba(7,29,73,.05)!important}
.tf-search-marketplace .tf-supplier-list-head{grid-template-columns:36px minmax(0,1fr)!important;gap:8px!important}
.tf-search-marketplace .tf-supplier-avatar{width:36px!important;height:36px!important;border-radius:9px!important}
.tf-search-marketplace .tf-supplier-avatar span{width:28px!important;height:28px!important;border-width:1.5px!important;font-size:8px!important}
.tf-search-marketplace .tf-supplier-title-line{display:block!important}
.tf-search-marketplace .tf-supplier-title-line h3{font-size:13px!important;line-height:1.15!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.tf-search-marketplace .tf-supplier-title-line>span{display:block!important;margin-top:2px!important;font-size:8px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important}
.tf-search-marketplace .tf-supplier-trust-row{margin-top:4px!important;gap:4px!important;font-size:7.5px!important;white-space:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important}
.tf-search-marketplace .tf-supplier-trust-row::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-supplier-trust-row>*+*{padding-left:4px!important}
.tf-search-marketplace .tf-supplier-list-actions{margin-top:6px!important;gap:6px!important}
.tf-search-marketplace .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-list-actions button{height:34px!important;font-size:9px!important}
.tf-search-marketplace .tf-supplier-list-badges{margin:8px 0!important;gap:5px!important}
.tf-search-marketplace .tf-supplier-list-badges span{padding:5px 7px!important;font-size:7px!important}
.tf-search-marketplace .tf-supplier-list-metrics dl{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:5px!important}
.tf-search-marketplace .tf-supplier-list-metrics dl>div{padding-right:4px!important;border-right:1px solid #edf1f5!important}
.tf-search-marketplace .tf-supplier-list-metrics dl>div:last-child{border-right:0!important;padding-right:0!important}
.tf-search-marketplace .tf-supplier-list-metrics dt{font-size:6.5px!important;margin-bottom:2px!important;white-space:nowrap!important}
.tf-search-marketplace .tf-supplier-list-metrics dd{font-size:8.5px!important;white-space:nowrap!important;text-overflow:ellipsis!important;overflow:hidden!important}
.tf-search-marketplace .tf-list-customization{margin-top:8px!important}
.tf-search-marketplace .tf-list-customization small{font-size:7px!important}
.tf-search-marketplace .tf-list-customization>div{display:flex!important;overflow-x:auto!important;flex-wrap:nowrap!important;scrollbar-width:none!important;margin-top:4px!important}
.tf-search-marketplace .tf-list-customization>div::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-list-customization span{flex:0 0 auto!important;padding:4px 6px!important;font-size:7px!important}
.tf-search-marketplace .tf-supplier-list-gallery{grid-template-columns:minmax(0,1fr)!important;display:block!important;min-height:0!important;max-height:none!important;margin-top:1px!important}
.tf-search-marketplace .tf-supplier-list-gallery>a{display:none!important}
.tf-search-marketplace .tf-supplier-list-gallery>a.is-primary{display:block!important;height:190px!important;border-radius:10px!important}
.tf-search-marketplace .tf-supplier-list-gallery img,
.tf-search-marketplace .tf-supplier-list-gallery>a:not(.is-primary) img{width:100%!important;height:190px!important;min-height:190px!important;max-height:190px!important;object-fit:contain!important;background:#fff!important}
.tf-search-marketplace .tf-supplier-list-gallery strong{font-size:9px!important;padding:7px 8px!important}
.tf-search-marketplace .tf-supplier-list-gallery small{font-size:7px!important}
.tf-search-marketplace .tf-supplier-list-foot{margin-top:7px!important;justify-content:space-between!important}
.tf-search-marketplace .tf-supplier-list-foot a{font-size:8px!important}
.tf-search-marketplace .tf-supplier-list-foot span{font-size:7px!important}
}
@media(max-width:390px){
.tf-search-marketplace .tf-supplier-list-metrics dl{grid-template-columns:1fr 1fr!important;row-gap:6px!important}
.tf-search-marketplace .tf-supplier-list-metrics dl>div:nth-child(2n){border-right:0!important}
.tf-search-marketplace .tf-supplier-list-gallery>a.is-primary,
.tf-search-marketplace .tf-supplier-list-gallery img{height:168px!important;min-height:168px!important;max-height:168px!important}
}
/* ==============================================================
Sprint 933 / v1.0.337 — Premium Compact Supplier List Card v2
Reference-density rebuild. LIST VIEW ONLY. Grid view untouched.
Solid TradesFolks navy + golden-yellow palette; no new gradients.
============================================================== */
.tf-search-marketplace .tf-supplier-product-list{
display:grid!important;
gap:12px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card{
width:100%!important;
min-height:0!important;
padding:16px 18px 14px!important;
border:1px solid #dfe6ef!important;
border-radius:16px!important;
background:#fff!important;
box-shadow:0 7px 22px rgba(7,29,73,.055)!important;
overflow:hidden!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-head{
display:grid!important;
grid-template-columns:48px minmax(0,1fr) auto!important;
gap:12px!important;
align-items:center!important;
min-height:48px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-avatar{
width:48px!important;height:48px!important;border-radius:11px!important;
border:1px solid #d9e3ee!important;background:#fff!important;
display:grid!important;place-items:center!important;text-decoration:none!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-avatar span{
width:38px!important;height:38px!important;border:2px solid #0b68d8!important;
border-radius:50%!important;display:grid!important;place-items:center!important;
color:#075fc8!important;font-size:10px!important;font-weight:900!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line{
display:flex!important;align-items:baseline!important;gap:9px!important;min-width:0!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line h3{
min-width:0!important;margin:0!important;font-size:18px!important;line-height:1.15!important;
letter-spacing:-.02em!important;font-weight:850!important;white-space:nowrap!important;
overflow:hidden!important;text-overflow:ellipsis!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line h3 a{color:#172439!important;text-decoration:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line>span{
flex:0 1 auto!important;color:#6d7887!important;font-size:10px!important;white-space:nowrap!important;
overflow:hidden!important;text-overflow:ellipsis!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row{
display:flex!important;align-items:center!important;gap:7px!important;margin-top:5px!important;
color:#516176!important;font-size:9px!important;font-weight:700!important;white-space:nowrap!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row>*+*{
border-left:1px solid #dfe4eb!important;padding-left:7px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row .is-verified{color:#0667d8!important;font-weight:900!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-rating{color:#263547!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions{
display:flex!important;align-items:center!important;gap:8px!important;margin:0!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions button{
height:36px!important;min-width:128px!important;padding:0 18px!important;border-radius:999px!important;
display:inline-flex!important;align-items:center!important;justify-content:center!important;
font-size:10px!important;font-weight:800!important;line-height:1!important;cursor:pointer!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-list-contact{border:1px solid #27374c!important;background:#fff!important;color:#172439!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-chat{border:1px solid #071d49!important;background:#071d49!important;color:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-chat:hover{background:#ffbd17!important;border-color:#ffbd17!important;color:#071d49!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-contact:hover{border-color:#ffbd17!important;background:#fffaf0!important;color:#071d49!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges{
display:flex!important;align-items:center!important;gap:6px!important;margin:10px 0 12px!important;
overflow-x:auto!important;scrollbar-width:none!important;white-space:nowrap!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges span{
flex:0 0 auto!important;padding:6px 9px!important;border-radius:7px!important;background:#f5f6f8!important;
color:#344155!important;font-size:8px!important;line-height:1!important;font-weight:800!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges .tf-match-badge,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges .tf-rank-badge{
background:#fff2e9!important;color:#8f4212!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{
display:grid!important;
grid-template-columns:minmax(300px,360px) minmax(420px,640px)!important;
justify-content:space-between!important;
gap:18px!important;
align-items:stretch!important;
min-width:0!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics{
align-self:center!important;min-width:0!important;padding:0!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{
display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:11px 20px!important;margin:0!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dt{
margin:0 0 3px!important;color:#697789!important;font-size:8px!important;line-height:1.1!important;font-weight:600!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dd{
margin:0!important;color:#172439!important;font-size:12px!important;line-height:1.15!important;font-weight:850!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dd a{color:inherit!important;text-decoration:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization{margin-top:13px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization small{display:block!important;margin:0 0 6px!important;color:#687789!important;font-size:8px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization>div{display:flex!important;flex-wrap:wrap!important;gap:5px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization span{
padding:5px 8px!important;border:1px solid #d9e1ea!important;border-radius:7px!important;background:#fff!important;
color:#2c3a4e!important;font-size:8px!important;line-height:1!important;font-weight:750!important;
}
/* gallery: reference-like compact main image + thumbnails; one-image products stay compact */
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery{
display:grid!important;
grid-template-columns:minmax(210px,1.75fr) repeat(2,minmax(90px,.72fr))!important;
grid-template-rows:86px 86px!important;
gap:7px!important;
width:100%!important;max-width:640px!important;height:179px!important;min-height:179px!important;
justify-self:end!important;align-self:center!important;overflow:hidden!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a{
position:relative!important;display:block!important;min-width:0!important;min-height:0!important;
border:1px solid #e7ecf2!important;border-radius:9px!important;overflow:hidden!important;background:#f8fafc!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a.is-primary{
grid-row:1 / 3!important;grid-column:1!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:nth-child(2){grid-column:2!important;grid-row:1!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:nth-child(3){grid-column:3!important;grid-row:1!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:nth-child(4){grid-column:2!important;grid-row:2!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:nth-child(5){grid-column:3!important;grid-row:2!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:only-child{
width:min(100%,330px)!important;grid-column:1!important;grid-row:1/3!important;justify-self:end!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery img,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:not(.is-primary) img{
width:100%!important;height:100%!important;min-height:0!important;max-height:none!important;display:block!important;
object-fit:contain!important;background:#fff!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:not(.is-primary) img{object-fit:cover!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery strong{
position:absolute!important;left:0!important;right:0!important;bottom:0!important;padding:7px 8px!important;
background:#071d49!important;color:#fff!important;font-size:9px!important;line-height:1!important;font-weight:900!important;
white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery small{
position:absolute!important;top:7px!important;left:7px!important;padding:4px 6px!important;border-radius:6px!important;
background:#fff!important;color:#24364d!important;font-size:7px!important;line-height:1!important;font-weight:850!important;
box-shadow:0 2px 7px rgba(7,29,73,.08)!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot{
display:flex!important;align-items:center!important;justify-content:flex-end!important;gap:12px!important;
min-height:18px!important;margin-top:8px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot a{color:#075fc8!important;font-size:8.5px!important;font-weight:850!important;text-decoration:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot span{color:#69788a!important;font-size:7.5px!important}
@media(max-width:1200px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{grid-template-columns:minmax(260px,320px) minmax(360px,1fr)!important;gap:14px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery{grid-template-columns:minmax(190px,1.6fr) repeat(2,minmax(76px,.7fr))!important;max-width:540px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions button{min-width:112px!important;padding:0 13px!important}
}
@media(max-width:900px){
.tf-search-marketplace .tf-supplier-product-list{gap:10px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card{padding:13px!important;border-radius:14px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-head{grid-template-columns:42px minmax(0,1fr)!important;gap:9px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-avatar{width:42px!important;height:42px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-avatar span{width:33px!important;height:33px!important;font-size:9px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions{grid-column:1/-1!important;display:grid!important;grid-template-columns:1fr 1fr!important;gap:7px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions button{width:100%!important;min-width:0!important;height:35px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{grid-template-columns:minmax(0,1fr)!important;gap:10px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:8px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery{justify-self:stretch!important;max-width:none!important;width:100%!important;height:170px!important;min-height:170px!important;grid-template-rows:81.5px 81.5px!important;grid-template-columns:minmax(190px,1.6fr) repeat(2,minmax(74px,.7fr))!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:only-child{width:min(100%,320px)!important;justify-self:start!important}
}
@media(max-width:620px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card{padding:11px!important;border-radius:12px!important;box-shadow:0 4px 14px rgba(7,29,73,.05)!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-head{grid-template-columns:36px minmax(0,1fr)!important;gap:8px!important;align-items:start!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-avatar{width:36px!important;height:36px!important;border-radius:9px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-avatar span{width:28px!important;height:28px!important;font-size:8px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line{display:block!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line h3{font-size:13px!important;line-height:1.18!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line>span{display:block!important;margin-top:2px!important;font-size:7.5px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row{gap:4px!important;margin-top:4px!important;font-size:7px!important;overflow-x:auto!important;scrollbar-width:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row>*+*{padding-left:4px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions{margin-top:4px!important;gap:6px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions a,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions button{height:34px!important;font-size:8.5px!important;padding:0 7px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges{margin:8px 0!important;gap:5px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges span{padding:5px 7px!important;font-size:7px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px 12px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dt{font-size:7px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dd{font-size:9.5px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization{margin-top:9px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization small{font-size:7px!important;margin-bottom:5px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization>div{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization>div::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-customization span{flex:0 0 auto!important;padding:4px 6px!important;font-size:7px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery{display:block!important;width:100%!important;height:176px!important;min-height:176px!important;overflow:hidden!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a{display:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a.is-primary{display:block!important;width:100%!important;height:176px!important;min-height:176px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery img{width:100%!important;height:176px!important;min-height:176px!important;object-fit:contain!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery strong{font-size:8.5px!important;padding:7px 8px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot{margin-top:7px!important;justify-content:space-between!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot a{font-size:8px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot span{font-size:7px!important}
}
@media(max-width:390px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a.is-primary,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery img{height:158px!important;min-height:158px!important}
}
/* ==============================================================
Sprint 934 / v1.0.338 — real supplier logo + real gallery premium card
Uses users.logo and products.image/gallery_images. LIST VIEW ONLY.
============================================================== */
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{padding:14px 16px 12px!important;border-radius:15px!important;border-color:#dbe4ef!important;box-shadow:0 8px 24px rgba(7,29,73,.06)!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-logo{overflow:hidden!important;background:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-logo img{display:block;width:100%!important;height:100%!important;object-fit:contain!important;padding:3px!important;background:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-logo span{display:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line h3{font-size:17px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges{margin:9px 0 10px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{grid-template-columns:minmax(300px,355px) minmax(430px,650px)!important;gap:16px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{gap:9px 20px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery{height:172px!important;min-height:172px!important;grid-template-rows:82.5px 82.5px!important;gap:7px!important;max-width:650px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single{display:block!important;width:min(100%,300px)!important;height:172px!important;min-height:172px!important;justify-self:end!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single>a.is-primary{display:block!important;width:100%!important;height:172px!important;min-height:172px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{grid-template-columns:minmax(220px,1.72fr) repeat(2,minmax(92px,.72fr))!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery img{object-fit:contain!important;background:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi>a:not(.is-primary) img{object-fit:cover!important}
.tf-search-marketplace .tf-supplier-product-list .tf-gallery-count{position:absolute!important;left:8px!important;top:8px!important;z-index:2!important;background:#071d49!important;color:#fff!important;border-radius:6px!important;padding:4px 6px!important;font-size:7px!important;font-weight:850!important;line-height:1!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery small{left:auto!important;right:7px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-chat{background:#f4b400!important;border-color:#f4b400!important;color:#fff!important;box-shadow:0 4px 10px rgba(244,180,0,.18)!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-chat:hover{background:#e5a900!important;border-color:#e5a900!important;color:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-contact{border-color:#0a2858!important;color:#0a2858!important;background:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-details{display:inline-flex!important;align-items:center!important;justify-content:center!important;min-height:26px!important;padding:0 10px!important;border-radius:7px!important;background:#fff8df!important;color:#8a6500!important}
@media(max-width:1200px){.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{grid-template-columns:minmax(255px,315px) minmax(360px,1fr)!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single{width:min(100%,280px)!important}}
@media(max-width:900px){.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{grid-template-columns:1fr!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery,.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single{justify-self:stretch!important;width:100%!important;max-width:none!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single>a.is-primary{width:100%!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{grid-template-columns:repeat(4,minmax(0,1fr))!important}}
@media(max-width:620px){.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{padding:10px!important;border-radius:12px!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-head{grid-template-columns:40px minmax(0,1fr)!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-logo{width:40px!important;height:40px!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line h3{font-size:13px!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{grid-template-columns:repeat(2,minmax(0,1fr))!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery,.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single{height:168px!important;min-height:168px!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a.is-primary,.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single>a.is-primary,.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery img{height:168px!important;min-height:168px!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-actions{order:4!important}.tf-search-marketplace .tf-supplier-product-list .tf-list-chat{background:#f4b400!important;color:#fff!important}.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot{margin-top:6px!important}}
/* ==============================================================
Sprint 935 / v1.0.339 — Reference-accurate premium supplier card
Wider filters, narrower result column, same-supplier product showcase,
Trade Secure SVG trust badge. List view only.
============================================================== */
@media(min-width:901px){
.tf-search-marketplace .tf-search-catalog{grid-template-columns:272px minmax(0,1fr)!important;gap:18px!important}
.tf-search-marketplace .tf-search-catalog>.filter-sidebar{border-radius:15px!important;box-shadow:0 8px 24px rgba(7,29,73,.055)!important}
.tf-search-marketplace .catalog-filter{padding:16px!important}
.tf-search-marketplace .tf-search-page{min-width:0!important;max-width:1240px!important;width:100%!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{padding:14px 16px 12px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{grid-template-columns:minmax(300px,36%) minmax(0,64%)!important;gap:18px!important;align-items:end!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery{max-width:none!important;width:100%!important;height:190px!important;min-height:190px!important;grid-template-rows:91.5px 91.5px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{grid-template-columns:minmax(250px,1.7fr) repeat(2,minmax(100px,.72fr))!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single{width:min(100%,330px)!important;height:190px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single>a.is-primary{height:190px!important;min-height:190px!important}
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{transition:border-color .18s ease,box-shadow .18s ease,transform .18s ease!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3:hover{border-color:#cbd8e8!important;box-shadow:0 12px 30px rgba(7,29,73,.085)!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-head{align-items:start!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row .is-verified{color:#0668d8!important}
.tf-search-marketplace .tf-supplier-product-list .tf-trade-secure{display:inline-flex!important;align-items:center!important;gap:4px!important;color:#0a2858!important;font-weight:850!important}
.tf-search-marketplace .tf-supplier-product-list .tf-trade-secure svg{width:14px!important;height:14px!important;fill:#f4b400!important;stroke:#0a2858!important;stroke-width:1.8!important;stroke-linecap:round!important;stroke-linejoin:round!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges .tf-trade-secure{background:#fff8df!important;border:1px solid #f6df94!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics{align-self:stretch!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{grid-template-columns:repeat(2,minmax(0,1fr))!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dt{color:#718198!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dd{color:#102746!important;font-weight:850!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a{position:relative!important;border:1px solid #e1e7ef!important;border-radius:10px!important;overflow:hidden!important;background:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:hover{border-color:#c8d6e7!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery .is-primary{grid-row:1/3!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery .is-primary img{object-fit:contain!important;padding:2px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery>a:not(.is-primary) img{object-fit:contain!important;padding:3px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-gallery-count{display:inline-flex!important;align-items:center!important;gap:4px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-gallery-count svg{width:10px!important;height:10px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important}
.tf-search-marketplace .tf-supplier-product-list .tf-thumb-price{position:absolute!important;left:5px!important;right:5px!important;bottom:4px!important;z-index:2!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;padding:3px 5px!important;border-radius:5px!important;background:rgba(255,255,255,.9)!important;color:#102746!important;font-size:7px!important;font-weight:900!important;backdrop-filter:blur(3px)!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-chat{background:#f4b400!important;border-color:#f4b400!important;color:#fff!important;font-weight:850!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-chat:hover{background:#dca300!important;border-color:#dca300!important}
.tf-search-marketplace .tf-supplier-product-list .tf-list-contact{font-weight:800!important}
@media(max-width:900px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{display:grid!important;grid-template-columns:minmax(0,1.65fr) repeat(2,minmax(72px,.68fr))!important;grid-template-rows:82px 82px!important;height:171px!important;min-height:171px!important;gap:7px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi>a{display:block!important;height:auto!important;min-height:0!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi>a.is-primary{height:171px!important;min-height:171px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi img{height:100%!important;min-height:0!important}
}
@media(max-width:620px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges{flex-wrap:nowrap!important;overflow-x:auto!important;scrollbar-width:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges::-webkit-scrollbar{display:none!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges>span{flex:0 0 auto!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{grid-template-columns:minmax(0,1.55fr) repeat(2,minmax(58px,.65fr))!important;grid-template-rows:70px 70px!important;height:147px!important;min-height:147px!important;gap:6px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi>a.is-primary{height:147px!important;min-height:147px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-thumb-price{font-size:6px!important}
}
/* ==============================================================
Sprint 936 / v1.0.340 — Premium visibility + sidebar refinement
Slightly stronger typography/contrast, premium facet surface and
country/region flag rows. Keeps approved Sprint 935 geometry.
============================================================== */
.tf-search-marketplace{
--tf-ink-strong:#102746;
--tf-ink:#1d3856;
--tf-muted-strong:#5f7188;
--tf-line-strong:#cfdae8;
--tf-soft-panel:#f8fafc;
}
.tf-search-marketplace .tf-search-catalog>.filter-sidebar{
border-color:#cdd9e8!important;
background:#fff!important;
box-shadow:0 10px 28px rgba(7,29,73,.075)!important;
}
.tf-search-marketplace .catalog-filter{padding:17px!important}
.tf-search-marketplace .filter-head{margin-bottom:17px!important;padding-bottom:12px!important;border-bottom:1px solid #e4eaf2!important}
.tf-search-marketplace .filter-head strong{font-size:15px!important;letter-spacing:-.015em!important;color:var(--tf-ink-strong)!important}
.tf-search-marketplace .filter-head span{font-size:7px!important;padding:4px 8px!important;background:#edf4ff!important;color:#075fca!important}
.tf-search-marketplace .tf-filter-field,
.tf-search-marketplace .tf-facet-group{margin-bottom:15px!important}
.tf-search-marketplace .tf-filter-field>span,
.tf-search-marketplace .tf-facet-group legend{margin-bottom:8px!important;color:#284561!important;font-size:9px!important;line-height:1.25!important;font-weight:850!important}
.tf-search-marketplace .catalog-filter input[type="search"],
.tf-search-marketplace .catalog-filter input[type="number"],
.tf-search-marketplace .catalog-filter select{min-height:43px!important;border-color:#cfdbea!important;border-radius:11px!important;background:#fff!important;color:#173251!important;font-size:9px!important;font-weight:650!important;box-shadow:0 1px 2px rgba(7,29,73,.02)!important}
.tf-search-marketplace .catalog-filter input:focus,
.tf-search-marketplace .catalog-filter select:focus{outline:2px solid rgba(15,96,201,.12)!important;outline-offset:1px!important;border-color:#75a7e7!important}
.tf-search-marketplace .check-row{min-height:32px!important;color:#314d6b!important;font-size:9px!important;font-weight:650!important}
.tf-search-marketplace .check-row input{width:16px!important;height:16px!important;accent-color:#0b63ce!important}
.tf-search-marketplace .tf-facet-group:not(.tf-country-facet){padding-bottom:13px!important;border-bottom:1px solid #edf1f5!important}
.tf-search-marketplace .tf-filter-actions{margin-top:16px!important}
.tf-search-marketplace .filter-apply{min-height:42px!important;border-radius:10px!important;background:#f4b400!important;color:#fff!important;font-size:9px!important;font-weight:900!important;box-shadow:0 7px 16px rgba(244,180,0,.18)!important}
.tf-search-marketplace .filter-apply:hover{background:#dfa600!important}
.tf-search-marketplace .filter-clear{font-size:8px!important;color:#4c6580!important}
/* Premium country/region facet */
.tf-search-marketplace .tf-country-facet{padding:0 0 14px!important;border-bottom:1px solid #edf1f5!important}
.tf-search-marketplace .tf-country-list,.tf-search-marketplace .tf-country-more-list{display:grid!important;gap:2px!important}
.tf-search-marketplace .tf-country-row{display:grid!important;grid-template-columns:18px 27px minmax(0,1fr) auto!important;align-items:center!important;gap:7px!important;min-height:34px!important;padding:4px 6px!important;border-radius:8px!important;color:#243e5c!important;cursor:pointer!important;transition:background .16s ease,color .16s ease!important}
.tf-search-marketplace .tf-country-row:hover{background:#f5f8fc!important}
.tf-search-marketplace .tf-country-row:has(input:checked){background:#fff8df!important;color:#102746!important}
.tf-search-marketplace .tf-country-row input{appearance:none!important;-webkit-appearance:none!important;width:16px!important;height:16px!important;margin:0!important;border:1.5px solid #c8d3e0!important;border-radius:4px!important;background:#fff!important;display:grid!important;place-items:center!important}
.tf-search-marketplace .tf-country-row input:checked{border-color:#0b63ce!important;background:#0b63ce!important;box-shadow:inset 0 0 0 3px #fff!important}
.tf-search-marketplace .tf-country-flag{display:inline-flex!important;align-items:center!important;justify-content:center!important;width:27px!important;min-width:27px!important;font-size:18px!important;line-height:1!important;filter:saturate(1.05)!important}
.tf-search-marketplace .tf-country-globe{font-size:16px!important}
.tf-search-marketplace .tf-country-name{min-width:0!important;overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important;font-size:10px!important;font-weight:700!important}
.tf-search-marketplace .tf-country-count{padding:2px 6px!important;border-radius:999px!important;background:#f2f5f9!important;color:#718198!important;font-size:7px!important;font-weight:800!important}
.tf-search-marketplace .tf-country-row:has(input:checked) .tf-country-count{background:#fff!important;color:#8a6500!important}
.tf-search-marketplace .tf-country-more{margin-top:3px!important}
.tf-search-marketplace .tf-country-more summary{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:5px 6px!important;color:#0969d6!important;font-size:8px!important;font-weight:800!important;cursor:pointer!important;list-style:none!important}
.tf-search-marketplace .tf-country-more summary::-webkit-details-marker{display:none!important}
.tf-search-marketplace .tf-country-more summary svg{width:11px!important;height:11px!important;fill:none!important;stroke:currentColor!important;stroke-width:1.8!important;transition:transform .18s ease!important}
.tf-search-marketplace .tf-country-more[open] summary svg{transform:rotate(180deg)!important}
/* Approved card — slightly stronger visibility only */
.tf-search-marketplace .catalog-toolbar strong{font-size:11px!important;color:#102746!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line h3{font-size:15px!important;color:#102746!important;font-weight:900!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-location{font-size:9px!important;color:#64768d!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row{font-size:8.5px!important;color:#38516d!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges>span{font-size:8px!important;font-weight:800!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dt{font-size:8.5px!important;color:#60738b!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dd{font-size:12px!important;color:#102746!important}
.tf-search-marketplace .tf-supplier-product-list .tf-option-label{font-size:8.5px!important;color:#60738b!important}
.tf-search-marketplace .tf-supplier-product-list .tf-option-chips span{font-size:8px!important;color:#2c4562!important;border-color:#cfd9e5!important;background:#fff!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{border-color:#ccd9e7!important;background:#fff!important;box-shadow:0 7px 20px rgba(7,29,73,.045)!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3:hover{box-shadow:0 14px 34px rgba(7,29,73,.095)!important}
@media(max-width:900px){
.tf-search-marketplace .catalog-filter{padding:16px!important}
.tf-search-marketplace .tf-country-row{min-height:38px!important}
.tf-search-marketplace .tf-country-name{font-size:11px!important}
}
@media(max-width:620px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-title-line h3{font-size:13.5px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-trust-row{font-size:8px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dd{font-size:11px!important}
}
\n\n/* =============================================================\n Sprint 937 — Full-width balance, stable-view polish, premium density\n ============================================================= */\n.tf-search-marketplace .tf-search-results-section>.shell,\n.tf-search-marketplace .tf-search-hero .shell{\n width:calc(100% - 48px)!important;\n max-width:none!important;\n margin-left:auto!important;\n margin-right:auto!important;\n}\n.tf-search-marketplace .tf-search-catalog{\n grid-template-columns:278px minmax(0,1fr)!important;\n gap:18px!important;\n width:100%!important;\n}\n.tf-search-marketplace .tf-search-page{\n width:100%!important;\n min-width:0!important;\n max-width:none!important;\n}\n.tf-search-marketplace .catalog-toolbar{\n min-height:52px!important;\n margin:0 0 12px!important;\n padding:8px 10px 8px 13px!important;\n border:1px solid #d8e2ee!important;\n border-radius:13px!important;\n background:#fff!important;\n box-shadow:0 6px 18px rgba(7,29,73,.045)!important;\n}\n.tf-search-marketplace .catalog-toolbar strong{font-size:11.5px!important;font-weight:900!important}\n.tf-search-marketplace .catalog-toolbar select{\n min-width:156px!important;\n height:36px!important;\n border-color:#d2ddea!important;\n background:#fff!important;\n color:#173251!important;\n font-weight:750!important;\n}\n.tf-search-marketplace .tf-catalog-view-switch a{\n width:36px!important;height:36px!important;border-radius:10px!important;\n box-shadow:0 2px 6px rgba(7,29,73,.035)!important;\n}\n.tf-search-marketplace .tf-catalog-view-switch a.active{\n background:#eef5ff!important;border-color:#7fb3f2!important;color:#075fc8!important;\n box-shadow:0 3px 10px rgba(7,95,200,.10)!important;\n}\n.tf-search-marketplace .tf-supplier-product-list{gap:14px!important}\n.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{\n border-color:#c9d7e6!important;\n box-shadow:0 8px 24px rgba(7,29,73,.055)!important;\n}\n.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3:hover{\n transform:translateY(-1px)!important;\n border-color:#afc7df!important;\n box-shadow:0 14px 34px rgba(7,29,73,.095)!important;\n}\n.tf-search-marketplace .product-grid{gap:14px!important}\n.tf-search-marketplace .product-card{\n border-color:#d2ddea!important;\n box-shadow:0 7px 20px rgba(7,29,73,.045)!important;\n transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;\n}\n.tf-search-marketplace .product-card:hover{\n transform:translateY(-2px)!important;\n border-color:#b7cadf!important;\n box-shadow:0 14px 30px rgba(7,29,73,.09)!important;\n}\n.tf-search-marketplace .product-image{background:#f7f9fc!important}\n.tf-search-marketplace .tf-search-results-head{margin-bottom:10px!important}\n.tf-search-marketplace .tf-search-results-head>small{\n border-color:#d2ddea!important;\n box-shadow:0 5px 14px rgba(7,29,73,.045)!important;\n}\n.tf-search-marketplace .tf-search-results-section{background:#f4f7fb!important}\n.tf-search-marketplace .pagination{margin-top:18px!important}\n.tf-search-marketplace .pagination a{\n border:1px solid #d5e0ec!important;background:#fff!important;box-shadow:0 2px 7px rgba(7,29,73,.035)!important;\n}\n.tf-search-marketplace .pagination a.active{background:#0b63ce!important;color:#fff!important;border-color:#0b63ce!important}\n@media(max-width:1180px){\n .tf-search-marketplace .tf-search-results-section>.shell,\n .tf-search-marketplace .tf-search-hero .shell{width:calc(100% - 32px)!important}\n .tf-search-marketplace .tf-search-catalog{grid-template-columns:258px minmax(0,1fr)!important;gap:14px!important}\n}\n@media(max-width:900px){\n .tf-search-marketplace .tf-search-results-section>.shell,\n .tf-search-marketplace .tf-search-hero .shell{width:calc(100% - 24px)!important}\n .tf-search-marketplace .tf-search-catalog{display:block!important}\n .tf-search-marketplace .catalog-toolbar{padding:7px 8px!important}\n}\n@media(max-width:620px){\n .tf-search-marketplace .tf-search-results-section>.shell,\n .tf-search-marketplace .tf-search-hero .shell{width:calc(100% - 16px)!important}\n .tf-search-marketplace .catalog-toolbar{border-radius:11px!important}\n .tf-search-marketplace .catalog-toolbar select{min-width:0!important}\n}\n
/* ==========================================================
Sprint 938 — edge-balanced full width + readability polish
Keep the approved card/filter architecture; only remove the
remaining asymmetric desktop gutter and lift typography.
========================================================== */
@media (min-width: 1025px){
.tf-search-marketplace .tf-search-hero .shell,
.tf-search-marketplace .tf-search-results-section > .shell{
width:auto!important;
max-width:none!important;
margin-left:28px!important;
margin-right:28px!important;
}
/* Defensive override against legacy .shell width/max-width rules. */
body .tf-search-marketplace .tf-search-results-section > .shell,
main .tf-search-marketplace .tf-search-results-section > .shell{
width:auto!important;
max-width:none!important;
margin-inline:28px!important;
}
}
/* Readability lift requested after the approved premium layout. */
.tf-search-marketplace .tf-search-results-head>div>span{
font-size:7.8px!important;
}
.tf-search-marketplace .tf-search-results-head h2{
font-size:26px!important;
line-height:1.08!important;
font-weight:850!important;
}
.tf-search-marketplace .tf-search-results-head>small{
min-height:34px!important;
padding-inline:12px!important;
font-size:7.25px!important;
}
.tf-search-marketplace .tf-search-results-head>small b{
font-size:7.6px!important;
}
.tf-search-marketplace .tf-search-trending-inline b{
font-size:7.6px!important;
}
.tf-search-marketplace .tf-search-trending-inline a{
min-height:28px!important;
padding-inline:10px!important;
font-size:7.2px!important;
}
.tf-search-marketplace .catalog-toolbar strong{
font-size:11px!important;
}
.tf-search-marketplace .catalog-toolbar select{
font-size:8.8px!important;
}
.tf-search-marketplace .filter-head strong{
font-size:15px!important;
}
.tf-search-marketplace .tf-filter-field>span,
.tf-search-marketplace .tf-facet-group legend{
font-size:8.7px!important;
}
.tf-search-marketplace .catalog-filter input[type="search"],
.tf-search-marketplace .catalog-filter input[type="number"],
.tf-search-marketplace .catalog-filter select,
.tf-search-marketplace .check-row{
font-size:8.7px!important;
}
/* A little more premium visual definition without changing layout. */
.tf-search-marketplace .tf-search-results-section{
background:#f4f7fb!important;
}
.tf-search-marketplace .tf-search-catalog>.filter-sidebar{
border-color:#cedbe9!important;
box-shadow:0 12px 30px rgba(16,43,87,.065)!important;
}
.tf-search-marketplace .product-card{
border-color:#d4e0ec!important;
box-shadow:0 8px 22px rgba(16,43,87,.05)!important;
}
@media (max-width:1024px){
.tf-search-marketplace .tf-search-hero .shell,
.tf-search-marketplace .tf-search-results-section > .shell{
width:auto!important;
max-width:none!important;
margin-inline:14px!important;
}
}
@media (max-width:760px){
.tf-search-marketplace .tf-search-hero .shell,
.tf-search-marketplace .tf-search-results-section > .shell{
margin-inline:10px!important;
}
.tf-search-marketplace .tf-search-results-head h2{
font-size:22px!important;
}
}
/* ==========================================================
Sprint 939 — viewport-locked equal gutters
Fixes the remaining right-side dead space by sizing the search
shell against the viewport rather than any inherited parent width.
========================================================== */
@media (min-width:1025px){
html,body{overflow-x:clip}
.tf-search-marketplace .tf-search-results-section > .shell,
.tf-search-marketplace .tf-search-hero > .shell{
position:relative!important;
left:50%!important;
transform:translateX(-50%)!important;
width:calc(100vw - 56px)!important;
max-width:calc(100vw - 56px)!important;
margin-left:0!important;
margin-right:0!important;
padding-left:0!important;
padding-right:0!important;
box-sizing:border-box!important;
}
.tf-search-marketplace .tf-search-results-section > .shell > *,
.tf-search-marketplace .tf-search-catalog,
.tf-search-marketplace .tf-search-page,
.tf-search-marketplace .catalog-toolbar,
.tf-search-marketplace .product-grid,
.tf-search-marketplace .tf-supplier-product-list{
max-width:none!important;
min-width:0!important;
}
.tf-search-marketplace .tf-search-catalog{
width:100%!important;
grid-template-columns:278px minmax(0,1fr)!important;
}
.tf-search-marketplace .tf-search-page{width:100%!important}
}
/* Sprint 942 — exact viewport gutters + denser supplier list */
@media (min-width:1025px){
.tf-search-marketplace .tf-search-results-section > .shell{
position:relative!important;
left:28px!important;
right:auto!important;
transform:none!important;
width:calc(100vw - 56px)!important;
max-width:calc(100vw - 56px)!important;
margin:0!important;
padding:0!important;
box-sizing:border-box!important;
}
.tf-search-marketplace .tf-search-results-section > .shell > .tf-search-catalog,
.tf-search-marketplace .tf-search-catalog{
width:calc(100vw - 56px)!important;
max-width:calc(100vw - 56px)!important;
min-width:0!important;
margin:0!important;
padding:0!important;
grid-template-columns:278px minmax(0,1fr)!important;
gap:18px!important;
box-sizing:border-box!important;
}
.tf-search-marketplace .tf-search-catalog > .tf-search-page,
.tf-search-marketplace .tf-search-catalog > main,
.tf-search-marketplace .tf-search-page{
width:100%!important;
max-width:none!important;
min-width:0!important;
margin:0!important;
justify-self:stretch!important;
}
.tf-search-marketplace .catalog-toolbar,
.tf-search-marketplace .product-grid,
.tf-search-marketplace .tf-supplier-product-list{
width:100%!important;max-width:none!important;min-width:0!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{padding:11px 14px 9px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges{margin:7px 0 9px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{gap:14px!important;grid-template-columns:minmax(290px,35%) minmax(0,65%)!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery{height:168px!important;min-height:168px!important;grid-template-rows:80px 80px!important;gap:8px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single>a.is-primary{height:168px!important;min-height:168px!important}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot{margin-top:5px!important}
}
/* ===== product-ask-price-policy-18.4.159.css ===== */
/* TradesFolks 18.4.159 — canonical Ask Price presentation */
.product-card .price.is-ask-price,
.tf-e-product-card .tf-e-price-row.is-ask-price strong,
.compare-price.is-ask-price,
.ef-products p.is-ask-price,
.curated-b2b-item small.is-ask-price{
color:#0b66cc!important;
font-weight:850!important;
}
.product-card .price.is-ask-price::before,
.tf-e-product-card .tf-e-price-row.is-ask-price strong::before{
content:""!important;
display:inline-block!important;
width:6px!important;
height:6px!important;
margin-right:6px!important;
border-radius:50%!important;
background:#ffb81f!important;
vertical-align:middle!important;
}
/* ===== inhouse-collection-premium-18.4.162.css ===== */
/* TradesFolks 18.4.162 — Premium In-house Collection Engine */
.tf-collection-page{--tfc-navy:#0b2853;--tfc-cream:#fff9ee;--tfc-gold:#e7ad2e;--tfc-line:#e5e9f0;--tfc-muted:#6c7c91;box-sizing:border-box;width:calc(100% - 56px);max-width:none;margin:16px auto 44px;color:var(--tfc-navy)}
.tf-collection-page *{box-sizing:border-box}.tf-collection-page a{text-decoration:none}
.tfc-breadcrumb{display:flex;gap:9px;align-items:center;margin:0 0 10px;color:#718097;font-size:11px}.tfc-breadcrumb a{color:#55708d}.tfc-breadcrumb strong{color:#17375d}
.tfc-category-strip{padding:10px 0 14px}.tfc-section-label{color:#b78512;font-size:9px;font-weight:900;letter-spacing:.14em;margin-bottom:10px}
.tfc-category-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x proximity;padding:0 3px 7px;scrollbar-width:none}.tfc-category-rail::-webkit-scrollbar{display:none}
.tfc-category-chip{flex:0 0 92px;scroll-snap-align:start;text-align:center;color:#172d4d}.tfc-category-chip>span{display:grid;width:84px;height:84px;margin:auto;place-items:center;border-radius:50%;overflow:hidden;border:3px solid #fff;box-shadow:0 0 0 1px #d8e1eb,0 8px 20px rgba(20,43,75,.08);background:#fff}.tfc-category-chip img{width:100%;height:100%;object-fit:cover}.tfc-category-chip b{font-size:20px;color:var(--tfc-accent)}.tfc-category-chip strong{display:block;margin-top:8px;font-size:10px;line-height:1.18}
.tfc-hero{position:relative;display:grid;grid-template-columns:minmax(0,1.02fr) minmax(400px,.98fr);min-height:430px;overflow:hidden;border:1px solid #ead9b0;border-radius:26px;background:radial-gradient(circle at 84% 6%,rgba(231,173,46,.22),transparent 28%),linear-gradient(135deg,#fffaf0 0%,#fff 50%,#f6e8e9 100%);box-shadow:0 18px 46px rgba(51,39,24,.08)}
.tfc-hero::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 0 58%,color-mix(in srgb,var(--tfc-accent) 6%,transparent) 58%);pointer-events:none}
.tfc-hero-copy{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;padding:54px 24px 80px 54px}.tfc-eyebrow{display:inline-flex;width:max-content;align-items:center;gap:8px;padding:8px 11px;border-radius:999px;background:#fff1cb;color:#9f6b00;font-size:8px;font-weight:900;letter-spacing:.11em}.tfc-hero h1{max-width:13ch;margin:16px 0 10px;color:#102b53;font-size:clamp(44px,4.7vw,74px);line-height:.94;letter-spacing:-.055em;font-family:Georgia,'Times New Roman',serif;font-weight:500}.tfc-hero-copy>p{max-width:650px;margin:0;color:#66788f;font-size:14px;line-height:1.55}.tfc-hero-cta{display:flex;align-items:center;gap:16px;margin-top:24px}.tfc-hero-cta>a{display:flex;min-height:48px;align-items:center;gap:20px;padding:0 18px;border-radius:12px;background:var(--tfc-accent);color:#fff;font-size:11px;font-weight:850;box-shadow:0 12px 24px color-mix(in srgb,var(--tfc-accent) 24%,transparent)}.tfc-hero-cta small{max-width:260px;color:#7b8795;font-size:8px;line-height:1.4}
.tfc-hero-art{position:relative;min-height:430px;overflow:hidden}.tfc-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.18}.tfc-rakhi-orbit{position:absolute;width:310px;height:310px;right:70px;top:38px;border:3px solid color-mix(in srgb,var(--tfc-accent) 58%,#eab83d);border-radius:50%;box-shadow:0 0 0 28px rgba(255,255,255,.62),0 0 0 31px color-mix(in srgb,var(--tfc-accent) 13%,transparent)}.tfc-rakhi-orbit::before,.tfc-rakhi-orbit::after{content:"";position:absolute;background:color-mix(in srgb,var(--tfc-accent) 70%,#d8a527)}.tfc-rakhi-orbit::before{width:3px;height:100%;left:50%}.tfc-rakhi-orbit::after{height:3px;width:100%;top:50%}.tfc-rakhi-orbit i{position:absolute;width:54px;height:54px;border-radius:50%;background:#fff;border:7px solid #f6c847;box-shadow:0 8px 16px rgba(79,40,14,.12)}.tfc-rakhi-orbit i:nth-child(1){left:50%;top:50%;transform:translate(-50%,-50%)}.tfc-rakhi-orbit i:nth-child(2){left:26px;top:126px}.tfc-rakhi-orbit i:nth-child(3){right:26px;top:126px}
.tfc-floating-product{position:absolute;z-index:4;display:grid;place-items:center;width:150px;height:150px;border-radius:28px;background:rgba(255,255,255,.9);box-shadow:0 16px 34px rgba(35,33,42,.12);border:1px solid rgba(255,255,255,.9);overflow:hidden}.tfc-floating-product img{width:90%;height:90%;object-fit:contain}.tfc-floating-product.p1{right:232px;top:145px}.tfc-floating-product.p2{right:38px;top:80px;width:125px;height:125px}.tfc-floating-product.p3{right:56px;bottom:42px;width:110px;height:110px}
.tfc-countdown{position:absolute;z-index:5;left:54px;right:54px;bottom:20px;display:flex;align-items:center;gap:8px;padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.91);border:1px solid rgba(223,202,154,.7);box-shadow:0 9px 24px rgba(48,37,18,.06);backdrop-filter:blur(10px)}.tfc-countdown>span{margin-right:auto;color:#815e0a;font-size:9px;font-weight:850;letter-spacing:.05em;text-transform:uppercase}.tfc-countdown>div{display:grid;min-width:50px;text-align:center}.tfc-countdown b{font-family:Georgia,serif;color:var(--tfc-accent);font-size:20px;line-height:1}.tfc-countdown small{margin-top:3px;color:#8791a0;font-size:5px;font-weight:850;text-transform:uppercase}.tfc-countdown em{font-style:normal;color:#c49b3d;font-weight:900}
.tfc-trust-row{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.tfc-trust-row article{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid #e3e9f0;border-radius:14px;background:#fff}.tfc-trust-row article>b{display:grid;width:34px;height:34px;place-items:center;border-radius:11px;background:#fff4d3;color:#a86d00}.tfc-trust-row strong,.tfc-trust-row small{display:block}.tfc-trust-row strong{font-size:10px}.tfc-trust-row small{margin-top:3px;color:#7a899c;font-size:7px}
.tfc-shop-section{padding:28px 0}.tfc-shop-section.compact{padding-top:12px}.tfc-section-head{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:15px}.tfc-section-head span{color:#bc8610;font-size:8px;font-weight:900;letter-spacing:.12em}.tfc-section-head h2{margin:5px 0 0;font-size:30px;line-height:1.02;letter-spacing:-.035em}.tfc-section-head p{margin:6px 0 0;color:#75869a;font-size:10px}.tfc-section-head>a{display:inline-flex;min-height:39px;align-items:center;gap:10px;padding:0 14px;border:1px solid #d9e3ee;border-radius:999px;color:#1266c6;font-size:8px;font-weight:850;background:#fff}
.tfc-product-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.tfc-product-card{min-width:0;border:1px solid #dce5ee;border-radius:15px;overflow:hidden;background:#fff;box-shadow:0 7px 20px rgba(14,40,74,.04)}.tfc-product-media{position:relative;display:grid;height:190px;place-items:center;padding:11px;background:linear-gradient(180deg,#fff,#fbfcfe)}.tfc-product-media img{width:100%;height:100%;object-fit:contain}.tfc-product-badge{position:absolute;z-index:2;left:9px;top:9px;padding:5px 7px;border-radius:999px;background:#fff0c7;color:#8a5c00;font-size:6px;font-weight:850}.tfc-product-body{padding:11px}.tfc-product-name{display:-webkit-box;min-height:33px;overflow:hidden;color:#152d4c;font-size:9px;line-height:1.25;font-weight:800;-webkit-box-orient:vertical;-webkit-line-clamp:2}.tfc-product-meta{display:flex;align-items:baseline;gap:4px;margin-top:8px}.tfc-product-meta strong{color:#0c3b72;font-size:12px}.tfc-product-meta strong.is-ask-price{color:#0b66cc}.tfc-product-meta span{color:#8794a4;font-size:6px}.tfc-product-actions{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:9px}.tfc-product-actions a{display:grid;min-height:31px;place-items:center;border-radius:8px;background:#0c3b72;color:#fff;font-size:6.5px;font-weight:850}.tfc-product-actions a.secondary{background:#fff6dc;color:#765100;border:1px solid #ead18f}
.tfc-story-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:8px 0 24px}.tfc-story{position:relative;display:grid;grid-template-columns:1.1fr .9fr;min-height:270px;overflow:hidden;border-radius:20px;padding:28px;background:#fff;border:1px solid #e1e7ef}.tfc-story.premium{background:linear-gradient(135deg,#fff8e8,#f6ead1)}.tfc-story.gifts{background:linear-gradient(135deg,#f8edef,#fff7f0)}.tfc-story>div{z-index:2;align-self:center}.tfc-story span{font-size:7px;font-weight:900;letter-spacing:.12em;color:#a66d00}.tfc-story h2{max-width:15ch;margin:7px 0;font-size:26px;line-height:1}.tfc-story p{max-width:45ch;color:#708096;font-size:9px;line-height:1.5}.tfc-story a{display:inline-block;margin-top:14px;color:#0b62c4;font-size:8px;font-weight:850}.tfc-story img{align-self:center;width:100%;height:210px;object-fit:contain;filter:drop-shadow(0 14px 20px rgba(32,37,48,.12))}
.tfc-seo-panel{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(320px,.8fr);gap:28px;margin-top:18px;padding:28px;border-radius:20px;background:#0b2d5d;color:#fff}.tfc-seo-panel span{color:#ffd061;font-size:7px;font-weight:900;letter-spacing:.12em}.tfc-seo-copy h2{max-width:22ch;margin:8px 0 12px;font-size:26px;line-height:1.05}.tfc-seo-copy p{color:#ccd9e8;font-size:9px;line-height:1.65}.tfc-faq details{border-top:1px solid rgba(255,255,255,.16);padding:12px 0}.tfc-faq summary{cursor:pointer;font-size:9px;font-weight:800}.tfc-faq p{color:#c8d6e6;font-size:8px;line-height:1.5}
@media(max-width:1280px){.tf-collection-page{width:calc(100% - 36px)}.tfc-product-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.tfc-hero{grid-template-columns:1fr .9fr}.tfc-hero-copy{padding-left:36px}.tfc-countdown{left:36px;right:36px}}
@media(max-width:900px){.tf-collection-page{width:calc(100% - 16px);margin-top:10px}.tfc-breadcrumb{font-size:8px}.tfc-category-strip{padding-top:4px}.tfc-category-rail{gap:11px}.tfc-category-chip{flex-basis:72px}.tfc-category-chip>span{width:66px;height:66px}.tfc-category-chip strong{font-size:7px}.tfc-hero{grid-template-columns:1fr;min-height:0;border-radius:18px}.tfc-hero-copy{padding:24px 18px 16px}.tfc-hero h1{font-size:38px;max-width:12ch}.tfc-hero-copy>p{font-size:9px}.tfc-hero-cta{margin-top:14px}.tfc-hero-cta small{display:none}.tfc-hero-art{min-height:230px}.tfc-rakhi-orbit{width:190px;height:190px;right:50%;top:15px;transform:translateX(50%)}.tfc-rakhi-orbit i{width:34px;height:34px;border-width:5px}.tfc-rakhi-orbit i:nth-child(2){left:15px;top:76px}.tfc-rakhi-orbit i:nth-child(3){right:15px;top:76px}.tfc-floating-product{width:96px;height:96px;border-radius:18px}.tfc-floating-product.p1{right:50%;top:65px;transform:translateX(50%)}.tfc-floating-product.p2{right:13px;top:42px;width:76px;height:76px}.tfc-floating-product.p3{right:auto;left:14px;bottom:29px;width:72px;height:72px}.tfc-countdown{position:relative;left:auto;right:auto;bottom:auto;margin:0 12px 12px;gap:4px;padding:9px}.tfc-countdown>span{display:none}.tfc-countdown>div{min-width:42px}.tfc-countdown b{font-size:16px}.tfc-trust-row{grid-template-columns:repeat(2,1fr);gap:6px}.tfc-trust-row article{padding:9px}.tfc-product-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:7px}.tfc-product-media{height:150px;padding:8px}.tfc-product-body{padding:9px}.tfc-product-name{min-height:29px;font-size:8px}.tfc-product-actions a{min-height:29px;font-size:6px}.tfc-section-head h2{font-size:22px}.tfc-section-head p{font-size:8px}.tfc-story-grid{grid-template-columns:1fr}.tfc-story{min-height:200px;padding:18px}.tfc-story h2{font-size:21px}.tfc-story img{height:160px}.tfc-seo-panel{grid-template-columns:1fr;padding:19px;gap:16px}.tfc-seo-copy h2{font-size:21px}}
@media(max-width:480px){.tf-collection-page{width:calc(100% - 10px)}.tfc-category-rail{margin-right:-5px}.tfc-hero-copy{padding:19px 14px 13px}.tfc-hero h1{font-size:32px}.tfc-hero-cta>a{min-height:42px;font-size:8px}.tfc-hero-art{min-height:200px}.tfc-trust-row article>b{width:28px;height:28px}.tfc-trust-row strong{font-size:8px}.tfc-trust-row small{font-size:6px}.tfc-shop-section{padding:20px 0}.tfc-section-head{margin-bottom:10px}.tfc-section-head>a{display:none}.tfc-product-media{height:132px}.tfc-product-meta strong{font-size:10px}.tfc-story{grid-template-columns:1.05fr .95fr;padding:14px;min-height:180px}.tfc-story h2{font-size:18px}.tfc-story p{font-size:7px}.tfc-story img{height:140px}.tfc-seo-panel{border-radius:16px;padding:16px}}
/* Sprint 547 — Rakhi collection direct-buy cards */
.tfc-direct-buy-card{display:flex;flex-direction:column;overflow:hidden;background:#fff;border:1px solid #dbe4ef;box-shadow:0 6px 18px rgba(14,38,72,.045);transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease}
.tfc-direct-buy-card:hover{transform:translateY(-2px);border-color:#e7bc43;box-shadow:0 12px 28px rgba(14,38,72,.085)}
.tfc-direct-buy-card .tfc-product-media{background:linear-gradient(180deg,#fff,#fbfcfe)}
.tfc-direct-buy-card .tfc-product-body{display:flex;flex-direction:column;flex:1}
.tfc-direct-buy-card .tfc-product-name{min-height:42px}
.tfc-direct-price{margin-top:auto;padding-top:12px}
.tfc-direct-price strong{font-size:20px;line-height:1.1;color:#0b2f67;font-weight:900;letter-spacing:-.02em}
.tfc-direct-price span{font-size:11px;color:#738197}
.tfc-direct-actions{display:block!important;margin-top:11px!important}
.tfc-add-to-cart{width:100%;min-height:44px;border:1px solid #dfa20b;border-radius:12px;background:linear-gradient(135deg,#ffc63d,#f4ad17);color:#08234b;font:inherit;font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:.06em;display:flex;align-items:center;justify-content:center;gap:10px;cursor:pointer;box-shadow:0 5px 12px rgba(226,166,23,.18);transition:transform .16s ease,box-shadow .16s ease,filter .16s ease}
.tfc-add-to-cart:hover{transform:translateY(-1px);filter:brightness(1.02);box-shadow:0 9px 18px rgba(226,166,23,.25)}
.tfc-add-to-cart:active{transform:translateY(0)}
.tfc-add-to-cart b{font-size:16px;line-height:1}
.tfc-add-to-cart[disabled]{opacity:.58;cursor:not-allowed;transform:none}
@media(max-width:720px){
.tfc-direct-buy-card .tfc-product-name{min-height:36px;font-size:12px}
.tfc-direct-price{padding-top:8px}
.tfc-direct-price strong{font-size:17px}
.tfc-add-to-cart{min-height:42px;border-radius:11px;font-size:11px}
}
/* Sprint 548 — unique category imagery + premium festive commerce cards */
.tfc-category-strip{padding-top:18px;padding-bottom:14px}
.tfc-category-rail{gap:14px;scrollbar-width:none}
.tfc-category-rail::-webkit-scrollbar{display:none}
.tfc-category-chip{min-width:98px;max-width:108px;padding:0 2px 4px;transition:transform .18s ease}
.tfc-category-chip:hover{transform:translateY(-2px)}
.tfc-category-chip>span{width:82px;height:82px;border-radius:50%;padding:4px;background:#fff;border:1px solid #dce4ef;box-shadow:0 6px 14px rgba(20,46,84,.08)}
.tfc-category-chip>span img{width:100%;height:100%;border-radius:50%;object-fit:cover;background:#f8fafc}
.tfc-cat-fallback{width:100%;height:100%;place-items:center;border-radius:50%;background:linear-gradient(135deg,#fff4cf,#f7c95d);color:#6f4b00;font-size:24px;font-weight:900}
.tfc-category-chip>strong{font-size:11px;line-height:1.18;min-height:28px;color:#172d4f;text-align:center;margin-top:7px}
.tfc-product-grid{gap:14px}
.tfc-direct-buy-card{border-radius:18px!important;border:1px solid #dbe4ef!important;background:#fff!important;box-shadow:0 8px 22px rgba(11,39,78,.055)!important}
.tfc-direct-buy-card .tfc-product-media{position:relative;display:block;height:245px;overflow:hidden;background:linear-gradient(180deg,#fffdf8 0%,#f8fafc 100%);border-bottom:1px solid #eef2f7}
.tfc-direct-buy-card .tfc-product-media img{width:100%;height:100%;object-fit:contain;padding:8px;box-sizing:border-box;transition:transform .25s ease}
.tfc-direct-buy-card:hover .tfc-product-media img{transform:scale(1.025)}
.tfc-product-badge{top:10px!important;left:10px!important;border-radius:999px!important;padding:6px 9px!important;font-size:9px!important;font-weight:900!important;box-shadow:0 4px 10px rgba(121,84,0,.1)}
.tfc-direct-buy-card .tfc-product-body{padding:13px 14px 14px!important}
.tfc-product-trust{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px;font-size:9px;text-transform:uppercase;letter-spacing:.055em;font-weight:800;color:#7b8798}
.tfc-product-trust b{color:#0a7a52;background:#e8f8f1;border-radius:999px;padding:4px 7px;font-size:8px}
.tfc-direct-buy-card .tfc-product-name{font-size:13px!important;line-height:1.35!important;font-weight:800!important;color:#10294d!important;min-height:36px!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.tfc-direct-price{display:flex;align-items:baseline;gap:5px;margin-top:12px!important;padding-top:0!important}
.tfc-direct-price strong{font-size:22px!important;color:#0b2e64!important}
.tfc-direct-price span{font-size:9px!important;text-transform:capitalize}
.tfc-direct-actions{margin-top:12px!important}
.tfc-add-to-cart{min-height:46px!important;border-radius:13px!important;background:linear-gradient(135deg,#ffc93e,#f5ad19)!important;border:1px solid #df9f06!important;color:#10284a!important;box-shadow:0 6px 14px rgba(229,165,18,.2)!important}
.tfc-add-to-cart span{font-size:11px;font-weight:900}
@media(max-width:900px){
.tfc-direct-buy-card .tfc-product-media{height:220px}
.tfc-category-chip{min-width:88px;max-width:94px}
.tfc-category-chip>span{width:72px;height:72px}
}
@media(max-width:640px){
.tfc-category-strip{padding-top:10px;padding-bottom:8px}
.tfc-category-rail{gap:10px}
.tfc-category-chip{min-width:76px;max-width:82px}
.tfc-category-chip>span{width:62px;height:62px}
.tfc-category-chip>strong{font-size:9px;min-height:24px;margin-top:5px}
.tfc-product-grid{gap:10px}
.tfc-direct-buy-card{border-radius:14px!important}
.tfc-direct-buy-card .tfc-product-media{height:165px}
.tfc-direct-buy-card .tfc-product-body{padding:10px!important}
.tfc-product-trust{font-size:7px;margin-bottom:6px}
.tfc-product-trust b{font-size:7px;padding:3px 5px}
.tfc-direct-buy-card .tfc-product-name{font-size:11px!important;min-height:30px!important}
.tfc-direct-price{margin-top:8px!important}
.tfc-direct-price strong{font-size:17px!important}
.tfc-add-to-cart{min-height:40px!important;border-radius:10px!important}
.tfc-add-to-cart span{font-size:10px}
}
/* Sprint 549: critical Rakhi card/category styles are embedded in active show.php to prevent stale-cache regressions. */
/* ===== storefront-discovery-18.4.240.css ===== */
.product-card-detailed .supplier-line>a{color:inherit;text-decoration:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.product-compact-chips .is-stock{color:#1d744f;background:#ecf8f1;border-color:#ccebd9}.product-compact-chips .is-out-stock{color:#9b3d38;background:#fff0ef;border-color:#f0d1ce}.tf-card-rfq-action{display:inline-flex;align-items:center;justify-content:center;text-decoration:none}.search-facet-box a{display:flex;justify-content:space-between;gap:8px;padding:6px 0;color:inherit;text-decoration:none}@media(max-width:860px){.catalog-toolbar{position:sticky;top:0;z-index:8;background:#fff;padding:7px;border-radius:8px}.product-card-detailed .product-commerce-actions{display:grid;grid-template-columns:1fr 1fr}}@media(max-width:520px){.product-card-detailed .product-description{display:none}.product-card-detailed .product-compact-chips{overflow-x:auto;flex-wrap:nowrap}}
/* ===== products-marketplace.css ===== */
/* TradesFolks Sprint 18.3.85 — enterprise /products marketplace. Scoped to .tf-products-marketplace. */
.tf-products-marketplace{--tf-page-gutter:24px;--tf-border:#e5e9ef;--tf-muted:#687386;--tf-ink:#101828;--tf-navy:#102a56;--tf-blue:#1769d2;--tf-gold:#f4b942;background:#f6f7f9;color:var(--tf-ink)}
.tf-products-marketplace .shell{width:calc(100% - (var(--tf-page-gutter) * 2))!important;max-width:none!important;margin-inline:auto!important}
.tf-products-topbar{background:#fff;border-bottom:1px solid var(--tf-border);padding:16px 0 22px}
.tf-products-breadcrumb{display:flex;align-items:center;gap:8px;font-size:12px;color:#7a8495;margin-bottom:17px}.tf-products-breadcrumb a{color:#526175;text-decoration:none}.tf-products-breadcrumb strong{color:#263449}.tf-products-breadcrumb span{color:#b3bac5}
.tf-products-intro{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:30px;align-items:end}.tf-products-intro .eyebrow{display:block;color:#8a6600;font-weight:800;font-size:11px;letter-spacing:.08em;margin-bottom:7px}.tf-products-intro h1{margin:0;max-width:860px;font:800 clamp(28px,2.7vw,46px)/1.08 "Plus Jakarta Sans",Manrope,sans-serif;letter-spacing:-.035em;color:#10213d}.tf-products-intro p{margin:10px 0 0;max-width:760px;color:#657287;font-size:14px;line-height:1.6}
.tf-products-stats{display:grid;grid-template-columns:repeat(3,minmax(120px,1fr));border:1px solid var(--tf-border);border-radius:14px;background:#fbfcfe;overflow:hidden}.tf-products-stats article{padding:14px 17px;min-width:132px;border-left:1px solid var(--tf-border)}.tf-products-stats article:first-child{border-left:0}.tf-products-stats b,.tf-products-stats span{display:block}.tf-products-stats b{font-size:15px;color:#15305d}.tf-products-stats span{margin-top:3px;font-size:10px;color:#7a8698}
.tf-products-results{padding:22px 0 42px}.tf-products-results-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:14px}.tf-products-results-head>div>span{display:block;font-size:10px;letter-spacing:.08em;color:#758198;font-weight:800}.tf-products-results-head h2{margin:3px 0 3px;font:800 23px/1.25 "Plus Jakarta Sans",Manrope,sans-serif;color:#132646}.tf-products-results-head small{color:#7b8798;font-size:12px}.tf-products-rfq-link{white-space:nowrap;text-decoration:none;border:1px solid #d9e3f0;background:#fff;color:#24558b;border-radius:10px;padding:10px 13px;font-size:12px;font-weight:800}.tf-products-rfq-link:hover{border-color:#b6cae2;background:#f8fbff}
.tf-active-filters{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin:0 0 14px;padding:10px 12px;background:#fff;border:1px solid var(--tf-border);border-radius:12px}.tf-active-filters>span{font-size:11px;font-weight:800;color:#657185;margin-right:3px}.tf-active-filters a{display:inline-flex;align-items:center;gap:6px;padding:6px 9px;border-radius:999px;background:#f5f7fa;color:#35445b;text-decoration:none;font-size:11px;border:1px solid #e2e7ed}.tf-active-filters a b{font-size:14px;line-height:1;color:#7c8796}.tf-active-filters a.clear{background:#fff8e6;color:#785800;border-color:#f4d889;font-weight:800}
.tf-products-marketplace .catalog-layout.tf-search-catalog{display:grid!important;grid-template-columns:258px minmax(0,1fr)!important;gap:16px!important;align-items:start}.tf-products-marketplace .filter-sidebar{position:sticky;top:92px;border:1px solid var(--tf-border);border-radius:14px;background:#fff;overflow:hidden;box-shadow:0 2px 8px rgba(17,32,58,.03)}
.tf-products-marketplace .catalog-filter{padding:15px}.tf-products-marketplace .filter-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:10px;border-bottom:1px solid #eef1f4}.tf-products-marketplace .filter-head>div{display:flex;align-items:center;gap:7px}.tf-products-marketplace .filter-head strong{font-size:15px;color:#182a47}.tf-products-marketplace .filter-head button{display:none;border:0;background:none;font-size:18px}.tf-products-marketplace .filter-head span{font-size:10px;font-weight:800;padding:3px 7px;border-radius:999px;background:#fff4cc;color:#765500}.tf-products-marketplace .tf-filter-field{display:grid;gap:6px;padding:12px 0;border-bottom:1px solid #eef2f7}.tf-products-marketplace .tf-facet-group{border:0;padding:12px 0;margin:0;border-bottom:1px solid #eef2f7}.tf-products-marketplace .tf-facet-group legend,.tf-products-marketplace .tf-filter-field>span{font-size:11px;font-weight:800;color:#27364c;margin-bottom:7px}.tf-products-marketplace .tf-facet-group select,.tf-products-marketplace .tf-filter-field input,.tf-products-marketplace .tf-facet-group input[type=number]{width:100%;min-height:39px;border:1px solid #d8dee8;border-radius:9px;background:#fff;padding:0 10px;font:600 11px Manrope,sans-serif;color:#34445b;outline:none}.tf-products-marketplace .tf-facet-group select:focus,.tf-products-marketplace .tf-filter-field input:focus,.tf-products-marketplace .tf-facet-group input[type=number]:focus{border-color:#5c8ed3;box-shadow:0 0 0 3px rgba(38,112,214,.08)}.tf-products-marketplace .range-row{display:grid;grid-template-columns:1fr 1fr;gap:7px}.tf-products-marketplace .check-row{display:flex;align-items:center;gap:8px;min-height:30px;font-size:11px;color:#4c5b6f;cursor:pointer}.tf-products-marketplace .check-row input{accent-color:#1d65c1}.tf-products-marketplace .tf-filter-actions{display:grid;gap:7px;margin-top:13px}.tf-products-marketplace .filter-apply{min-height:41px;border:0;border-radius:9px;background:#f4b942;color:#13213b;font-weight:800;cursor:pointer}.tf-products-marketplace .filter-clear{text-align:center;padding:7px;color:#66758a;text-decoration:none;font-size:11px;font-weight:700}
.tf-product-results-main{min-width:0}.tf-products-marketplace .catalog-toolbar{display:flex!important;justify-content:space-between;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px;border:1px solid var(--tf-border);border-radius:12px;background:#fff}.tf-toolbar-left{display:flex;align-items:center;gap:10px}.tf-toolbar-left strong{font-size:11px;color:#5b697d}.tf-products-marketplace .mobile-filter-button{display:none;min-height:37px;border:1px solid #d9e0e8;border-radius:9px;background:#fff;padding:0 11px;font-weight:800;color:#26384f}.tf-sort-form{display:flex;align-items:center;gap:8px}.tf-sort-form>span{font-size:10px;font-weight:800;color:#778396}.tf-products-marketplace .catalog-toolbar select{min-height:37px;border:1px solid #d9e0e8;border-radius:9px;background:#fff;padding:0 30px 0 10px;color:#34445c;font-size:11px;font-weight:700}
.tf-products-marketplace .product-grid.tf-products-grid{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important}.tf-products-marketplace .product-card-detailed{position:relative;display:flex!important;flex-direction:column;min-width:0;border:1px solid var(--tf-border)!important;border-radius:13px!important;background:#fff!important;overflow:hidden;box-shadow:none!important;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease}.tf-products-marketplace .product-card-detailed:hover{transform:translateY(-2px);border-color:#cad4e0!important;box-shadow:0 10px 25px rgba(29,48,75,.08)!important}.tf-products-marketplace .product-card-detailed .product-image{height:auto!important;aspect-ratio:1.18/1!important;padding:0!important;background:#f7f8fa!important;overflow:hidden}.tf-products-marketplace .product-image-link{display:block;width:100%;height:100%}.tf-products-marketplace .product-card-detailed .product-image img{width:100%;height:100%;object-fit:contain!important;padding:10px;box-sizing:border-box;transition:transform .25s ease}.tf-products-marketplace .product-card-detailed:hover .product-image img{transform:scale(1.025)}.tf-products-marketplace .wishlist{top:9px!important;right:9px!important;width:31px!important;height:31px!important;border-radius:50%!important;background:rgba(255,255,255,.94)!important;box-shadow:0 1px 4px rgba(0,0,0,.08)}.tf-products-marketplace .product-badge{left:8px!important;top:8px!important;background:#183a70!important;border-radius:6px!important;font-size:9px!important;padding:4px 7px!important}.tf-products-marketplace .product-body{display:flex;flex-direction:column;flex:1;padding:11px 11px 12px!important}.tf-product-category{display:block;width:max-content;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;margin-bottom:5px;color:#667a94;text-decoration:none;font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.03em}.tf-products-marketplace .product-body h3{min-height:36px;margin:0 0 7px!important;font:700 12.5px/1.42 Manrope,sans-serif!important}.tf-products-marketplace .product-body h3 a{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;color:#172a46!important;text-decoration:none}.tf-products-marketplace .price{margin:0 0 7px!important;color:#142e57!important;font-size:16px!important;font-weight:800!important}.tf-products-marketplace .price small{font-size:8px!important;color:#7d8998!important;font-weight:600}.tf-products-marketplace .product-primary-meta{display:flex;justify-content:space-between;gap:6px;min-height:18px;margin-bottom:7px;font-size:9px;color:#69778b}.tf-products-marketplace .product-primary-meta b{color:#384960}.tf-card-rating{color:#9a6d00!important;font-weight:800}.tf-card-rating small{font-size:8px;color:#8c96a4}.tf-products-marketplace .product-description{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:32px;margin:0 0 8px!important;color:#788596!important;font-size:9px!important;line-height:1.55!important}.tf-products-marketplace .product-compact-chips{display:flex!important;gap:4px!important;flex-wrap:wrap;margin:0 0 8px!important}.tf-products-marketplace .product-compact-chips span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border:1px solid #e8ecf1;border-radius:999px;background:#f8fafc;padding:3px 6px!important;font-size:8px!important;color:#5d6c7e}.tf-products-marketplace .product-compact-chips .is-verified{background:#eff8f1;color:#2d7541;border-color:#d7eadc}.tf-products-marketplace .supplier-line{display:flex!important;justify-content:space-between;gap:7px;margin-top:auto;padding-top:8px;border-top:1px solid #f0f2f5;color:#596a7f;font-size:9px}.tf-products-marketplace .supplier-line>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.tf-products-marketplace .card-actions{display:grid!important;grid-template-columns:1fr 1fr;gap:6px;margin-top:9px!important}.tf-products-marketplace .card-actions a,.tf-products-marketplace .card-actions button{display:flex;align-items:center;justify-content:center;min-height:34px;border-radius:8px!important;font-size:9px!important;font-weight:800!important}.tf-products-marketplace .card-actions a{border:1px solid #d8e0e9!important;background:#fff!important;color:#274767!important;text-decoration:none}.tf-products-marketplace .card-actions button{border:1px solid #f1c557!important;background:#f4b942!important;color:#17233b!important}.tf-products-marketplace .product-commerce-actions{display:flex!important;gap:12px!important;justify-content:center;margin-top:8px!important}.tf-products-marketplace .product-commerce-actions button{border:0!important;background:none!important;padding:0!important;color:#58708d!important;font-size:8px!important;font-weight:700!important}.tf-products-marketplace .product-quick-view{position:absolute!important;top:8px!important;left:50%!important;transform:translate(-50%,-8px)!important;opacity:0;pointer-events:none;border:1px solid #d7dee8!important;border-radius:8px!important;background:rgba(255,255,255,.96)!important;color:#244b78!important;padding:6px 9px!important;font-size:9px!important;font-weight:800!important;transition:.18s}.tf-products-marketplace .product-card-detailed:hover .product-quick-view{opacity:1;pointer-events:auto;transform:translate(-50%,0)!important}
.tf-products-empty{grid-column:1/-1!important;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:360px;border:1px dashed #ced7e2!important;border-radius:14px;background:#fff!important;text-align:center;padding:35px}.tf-products-empty>div{font-size:40px;color:#9eabbc}.tf-products-empty h3{margin:7px 0 4px;color:#263c59}.tf-products-empty p{margin:0;max-width:460px;color:#7b8797;font-size:12px}.tf-products-empty a{margin-top:14px;padding:9px 12px;border-radius:8px;background:#f4b942;color:#17233b;text-decoration:none;font-size:11px;font-weight:800}
.tf-products-pagination{display:flex!important;justify-content:center;align-items:center;gap:6px;margin:22px 0 0}.tf-products-pagination a{display:flex;align-items:center;justify-content:center;min-width:35px;height:35px;padding:0 10px;border:1px solid #dbe2ea;border-radius:8px;background:#fff;color:#4f6075;text-decoration:none;font-size:11px;font-weight:700}.tf-products-pagination a.active{border-color:#173d71;background:#173d71;color:#fff}.tf-products-pagination a.nav{padding-inline:13px}
@media(min-width:1600px){.tf-products-marketplace{--tf-page-gutter:28px}.tf-products-marketplace .product-grid.tf-products-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}}
@media(max-width:1250px){.tf-products-marketplace .product-grid.tf-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.tf-products-stats article{min-width:112px;padding:12px}.tf-products-marketplace .catalog-layout.tf-search-catalog{grid-template-columns:240px minmax(0,1fr)!important}}
@media(max-width:960px){.tf-products-marketplace{--tf-page-gutter:16px}.tf-products-intro{grid-template-columns:1fr}.tf-products-stats{width:100%}.tf-products-marketplace .catalog-layout.tf-search-catalog{display:block!important}.tf-products-marketplace .filter-sidebar{position:fixed!important;z-index:1500;left:0;top:0;bottom:0;width:min(340px,88vw);border-radius:0!important;transform:translateX(-105%);transition:transform .22s ease;overflow:auto;box-shadow:0 20px 60px rgba(0,0,0,.22)}.tf-products-marketplace .filter-sidebar.open,.tf-products-marketplace .filter-sidebar.is-open,.tf-products-marketplace .filter-sidebar[data-open="true"]{transform:translateX(0)}.tf-products-marketplace .filter-head button{display:block}.tf-products-marketplace .mobile-filter-button{display:inline-flex!important;align-items:center;gap:6px}.tf-products-marketplace .product-grid.tf-products-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.tf-products-marketplace .filter-backdrop{display:none;position:fixed;inset:0;z-index:1490;background:rgba(9,20,38,.42)}.tf-products-marketplace .filter-backdrop.open,.tf-products-marketplace .filter-backdrop.is-open,.tf-products-marketplace .filter-backdrop[data-open="true"]{display:block}}
@media(max-width:720px){.tf-products-marketplace{--tf-page-gutter:12px}.tf-products-topbar{padding:11px 0 16px}.tf-products-breadcrumb{margin-bottom:12px}.tf-products-intro h1{font-size:27px}.tf-products-intro p{font-size:12px}.tf-products-stats{grid-template-columns:repeat(3,1fr)}.tf-products-stats article{min-width:0;padding:9px 7px;text-align:center}.tf-products-stats b{font-size:12px}.tf-products-stats span{font-size:8px}.tf-products-results{padding-top:14px}.tf-products-results-head{align-items:flex-start}.tf-products-results-head h2{font-size:18px}.tf-products-rfq-link{display:none}.tf-active-filters{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}.tf-active-filters::-webkit-scrollbar{display:none}.tf-active-filters a{flex:0 0 auto}.tf-products-marketplace .catalog-toolbar{position:sticky;top:58px;z-index:20;padding:8px;background:rgba(255,255,255,.97);backdrop-filter:blur(9px)}.tf-sort-form>span{display:none}.tf-products-marketplace .catalog-toolbar select{max-width:150px}.tf-products-marketplace .product-grid.tf-products-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:8px!important}.tf-products-marketplace .product-card-detailed{border-radius:10px!important}.tf-products-marketplace .product-body{padding:9px!important}.tf-products-marketplace .product-body h3{font-size:11px!important;min-height:32px}.tf-products-marketplace .price{font-size:14px!important}.tf-products-marketplace .product-description{display:none!important}.tf-products-marketplace .product-compact-chips span:nth-child(n+3){display:none}.tf-products-marketplace .supplier-line{font-size:8px}.tf-products-marketplace .card-actions a,.tf-products-marketplace .card-actions button{font-size:8px!important;min-height:32px}.tf-products-marketplace .product-commerce-actions,.tf-products-marketplace .product-quick-view{display:none!important}.tf-products-pagination{overflow-x:auto;justify-content:flex-start!important;padding-bottom:4px}}
@media(max-width:390px){.tf-products-marketplace .product-grid.tf-products-grid{gap:7px!important}.tf-products-marketplace .product-card-detailed .product-image{aspect-ratio:1/1!important}.tf-products-marketplace .product-primary-meta{display:block}.tf-products-marketplace .tf-card-rating{display:block;margin-top:2px}.tf-products-marketplace .product-compact-chips span{font-size:7px!important}.tf-products-marketplace .card-actions{grid-template-columns:1fr!important}.tf-products-marketplace .card-actions a{display:none!important}}
/* Sprint 617 UI completion — /products */
.tf-products-marketplace{background:#f5f7fa!important}
.tf-products-topbar{padding:14px 0 18px!important;background:#fff!important}
.tf-products-breadcrumb{margin:0 0 12px!important;font-size:11px!important}
.tf-products-intro{align-items:center!important;gap:20px!important}
.tf-products-intro h1{font-size:clamp(28px,2.15vw,39px)!important;max-width:720px!important}
.tf-products-intro p{margin-top:8px!important;font-size:13px!important}
.tf-products-stats{min-width:420px!important;box-shadow:0 4px 18px rgba(17,42,72,.04)}
.tf-products-stats article{padding:12px 14px!important}
.tf-products-results{padding:16px 0 28px!important}
.tf-products-results-head{margin-bottom:12px!important}
.tf-products-results-head>div{display:flex!important;align-items:baseline!important;gap:10px!important;flex-wrap:wrap}
.tf-products-results-head>div>span{width:100%;font-size:9px!important;letter-spacing:.1em!important}
.tf-products-results-head h2{font-size:21px!important;margin:0!important}
.tf-products-results-head small{font-size:10px!important}
.tf-products-rfq-link{font-size:11px!important;font-weight:800!important}
.tf-products-marketplace .catalog-layout.tf-search-catalog{grid-template-columns:250px minmax(0,1fr)!important;gap:14px!important}
.tf-products-marketplace .filter-sidebar{top:86px!important;border-radius:12px!important}
.tf-products-marketplace .catalog-filter{padding:13px!important}
.tf-products-marketplace .tf-facet-group,.tf-products-marketplace .tf-filter-field{padding:10px 0!important}
.tf-products-marketplace .tf-facet-group select,.tf-products-marketplace .tf-filter-field input,.tf-products-marketplace .tf-facet-group input[type=number]{min-height:36px!important}
.tf-products-seo-intro{display:flex!important;align-items:center!important;justify-content:space-between!important;gap:18px!important;margin:0 0 10px!important;padding:12px 14px!important;border:1px solid #e2e7ee!important;border-radius:12px!important;background:#fff!important}
.tf-products-seo-intro>div{min-width:0}
.tf-products-seo-intro span{display:block;margin-bottom:3px;color:#1b68c9;font-size:8px;font-weight:900;letter-spacing:.09em}
.tf-products-seo-intro strong{display:block;color:#142947;font-size:15px;line-height:1.3}
.tf-products-seo-intro p{margin:0!important;max-width:430px!important;color:#6b788b!important;font-size:10px!important;line-height:1.45!important;text-align:right}
.tf-products-marketplace .catalog-toolbar{margin-bottom:10px!important;padding:8px 10px!important}
.tf-products-marketplace .product-grid.tf-products-grid{gap:10px!important}
.tf-products-marketplace .product-card-detailed .product-image{aspect-ratio:1.28/1!important}
.tf-products-marketplace .product-body{padding:10px!important}
.tf-products-marketplace .product-body h3{font-size:11.5px!important;min-height:33px!important}
.tf-products-marketplace .price{font-size:15px!important}
.tf-products-marketplace .card-actions{margin-top:7px!important}
.tf-products-marketplace .card-actions a,.tf-products-marketplace .card-actions button{min-height:32px!important}
@media(min-width:1500px){
.tf-products-marketplace .shell{width:calc(100% - 40px)!important}
.tf-products-marketplace .product-grid.tf-products-grid{grid-template-columns:repeat(4,minmax(0,1fr))!important}
}
@media(min-width:1900px){
.tf-products-marketplace .product-grid.tf-products-grid{grid-template-columns:repeat(5,minmax(0,1fr))!important}
}
@media(max-width:1100px){
.tf-products-stats{min-width:0!important}
.tf-products-marketplace .catalog-layout.tf-search-catalog{grid-template-columns:225px minmax(0,1fr)!important}
}
@media(max-width:960px){
.tf-products-intro{grid-template-columns:1fr!important}
.tf-products-stats{width:100%!important}
.tf-products-seo-intro{align-items:flex-start!important}
}
@media(max-width:720px){
.tf-products-topbar{padding:10px 0 13px!important}
.tf-products-intro h1{font-size:24px!important}
.tf-products-results-head>div{gap:5px!important}
.tf-products-results-head h2{font-size:17px!important}
.tf-products-seo-intro{display:block!important;padding:10px!important}
.tf-products-seo-intro strong{font-size:13px!important}
.tf-products-seo-intro p{margin-top:4px!important;text-align:left!important;font-size:9px!important}
.tf-products-marketplace .product-card-detailed .product-image{aspect-ratio:1/1!important}
}
/* Sprint 618 — Premium B2C/D2C commerce treatment. Solid colors; no gradients. */
.tf-products-premium-hero{position:relative;overflow:hidden;background:#071d43!important;border-bottom:0!important;padding:14px 0 24px!important;color:#fff}
.tf-products-premium-hero:after{content:"";position:absolute;right:-90px;bottom:-170px;width:520px;height:520px;border:1px solid rgba(255,255,255,.10);border-radius:50%;box-shadow:0 0 0 55px rgba(255,255,255,.025),0 0 0 110px rgba(255,255,255,.02);pointer-events:none}
.tf-products-premium-hero .tf-products-breadcrumb{position:relative;z-index:1;margin-bottom:15px!important;color:#9eb0cc!important}
.tf-products-premium-hero .tf-products-breadcrumb a{color:#c5d2e5!important}.tf-products-premium-hero .tf-products-breadcrumb strong{color:#fff!important}
.tf-products-hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.55fr) minmax(280px,.45fr);gap:34px;align-items:center}
.tf-products-hero-copy{max-width:900px}.tf-products-hero-copy .eyebrow{display:block;margin-bottom:8px;color:#ffc33f;font-size:10px;font-weight:900;letter-spacing:.11em}
.tf-products-hero-copy h1{max-width:820px;margin:0;color:#fff;font:800 clamp(32px,3vw,52px)/1.06 "Plus Jakarta Sans",Manrope,sans-serif;letter-spacing:-.04em}
.tf-products-hero-copy p{max-width:720px;margin:11px 0 16px;color:#c4d0e1;font-size:13px;line-height:1.65}
.tf-products-hero-search{display:grid;grid-template-columns:36px minmax(0,1fr) auto;align-items:center;max-width:720px;min-height:48px;border:1px solid #d7e0ec;border-radius:10px;background:#fff;overflow:hidden;box-shadow:0 10px 28px rgba(0,0,0,.16)}
.tf-products-hero-search>span{color:#55708f;text-align:center;font-size:20px}.tf-products-hero-search input{height:46px;border:0;outline:0;background:#fff;color:#142947;font:600 12px Manrope,sans-serif}.tf-products-hero-search button{align-self:stretch;min-width:105px;border:0;background:#ffc33f;color:#0d2244;font-weight:900;cursor:pointer}
.tf-products-hero-metrics{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-top:15px;color:#c7d3e4;font-size:9px}.tf-products-hero-metrics span{display:flex;align-items:center;gap:5px}.tf-products-hero-metrics b{color:#ffc33f;font-size:10px}
.tf-products-trust-card{padding:20px;border:1px solid rgba(255,255,255,.16);border-radius:15px;background:#fff;color:#152a49;box-shadow:0 16px 36px rgba(0,0,0,.18)}
.tf-products-trust-card>span{color:#1d67c7;font-size:8px;font-weight:900;letter-spacing:.1em}.tf-products-trust-card h2{margin:5px 0 13px;font-size:17px;line-height:1.25}.tf-products-trust-card ul{display:grid;gap:10px;margin:0;padding:0;list-style:none}.tf-products-trust-card li{display:flex;align-items:center;gap:9px;color:#4d5f76;font-size:10px}.tf-products-trust-card li b{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:#eef8f1;color:#21824a}.tf-products-trust-card a{display:inline-block;margin-top:15px;color:#135fbd;text-decoration:none;font-size:10px;font-weight:900}
.tf-products-results{background:#f4f6f9!important}
.tf-products-marketplace .product-card-detailed{border-color:#e1e6ed!important;box-shadow:0 3px 12px rgba(21,42,73,.045)!important}.tf-products-marketplace .product-card-detailed:hover{transform:translateY(-3px)!important;box-shadow:0 13px 30px rgba(21,42,73,.11)!important}
.tf-products-marketplace .product-card-detailed .product-image{background:#fff!important}.tf-products-marketplace .product-card-detailed .product-image img{padding:8px!important}
.tf-products-marketplace .tf-shop-actions{grid-template-columns:1fr 1fr!important;gap:7px!important}
.tf-products-marketplace .tf-shop-actions form{display:block;margin:0}.tf-products-marketplace .tf-shop-actions button{width:100%;min-height:36px!important;cursor:pointer}
.tf-products-marketplace .tf-shop-actions .tf-add-cart{border:1px solid #1768cf!important;background:#fff!important;color:#145db8!important}
.tf-products-marketplace .tf-shop-actions .tf-add-cart:hover{background:#f4f8ff!important}
.tf-products-marketplace .tf-shop-actions .tf-buy-now{border:1px solid #f0b62d!important;background:#ffc33f!important;color:#102341!important}
.tf-products-marketplace .tf-shop-actions .tf-buy-now:hover{background:#f6b91f!important}
.tf-products-marketplace .tf-rfq-actions button{background:#ffc33f!important;border-color:#f0b62d!important}
.tf-products-marketplace .product-commerce-actions{justify-content:flex-start!important;gap:16px!important}
@media(max-width:960px){.tf-products-hero-grid{grid-template-columns:1fr}.tf-products-trust-card{display:none}.tf-products-hero-copy{max-width:none}.tf-products-premium-hero:after{right:-260px}}
@media(max-width:720px){.tf-products-premium-hero{padding:10px 0 16px!important}.tf-products-hero-copy h1{font-size:27px!important}.tf-products-hero-copy p{font-size:11px!important;margin:8px 0 12px}.tf-products-hero-search{min-height:43px;grid-template-columns:30px minmax(0,1fr) 76px}.tf-products-hero-search input{height:41px;font-size:10px}.tf-products-hero-search button{min-width:76px;font-size:10px}.tf-products-hero-metrics{gap:10px;margin-top:11px}.tf-products-hero-metrics span:nth-child(4){display:none}.tf-products-marketplace .tf-shop-actions{grid-template-columns:1fr 1fr!important}.tf-products-marketplace .tf-shop-actions button{font-size:8px!important;min-height:33px!important}.tf-products-marketplace .tf-rfq-actions{grid-template-columns:1fr!important}.tf-products-marketplace .tf-rfq-actions a{display:none!important}}
@media(max-width:390px){.tf-products-marketplace .tf-shop-actions{grid-template-columns:1fr!important}.tf-products-marketplace .tf-shop-actions .tf-add-cart{display:none!important}}
/* ===== search-results-premium-18.4.243.css ===== */
/* Sprint 619 — Premium search result cards */
.search-page,
.search-results-page,
.tf-search-page{background:#f5f7fa}
.search-results-page .product-grid,
.search-page .product-grid,
.tf-search-page .product-grid{
gap:12px!important;
align-items:stretch;
}
.search-results-page .product-card-detailed,
.search-page .product-card-detailed,
.tf-search-page .product-card-detailed{
display:flex!important;
flex-direction:column!important;
height:100%!important;
min-width:0!important;
border:1px solid #dfe6ee!important;
border-radius:13px!important;
background:#fff!important;
overflow:hidden!important;
box-shadow:0 3px 12px rgba(17,42,72,.045)!important;
transition:transform .18s ease,box-shadow .18s ease!important;
}
.search-results-page .product-card-detailed:hover,
.search-page .product-card-detailed:hover,
.tf-search-page .product-card-detailed:hover{
transform:translateY(-2px)!important;
box-shadow:0 12px 28px rgba(17,42,72,.10)!important;
}
.search-results-page .product-card-detailed .product-image,
.search-page .product-card-detailed .product-image,
.tf-search-page .product-card-detailed .product-image{
position:relative!important;
aspect-ratio:1.28/1!important;
min-height:0!important;
padding:8px!important;
background:#fafbfd!important;
overflow:hidden!important;
}
.search-results-page .product-card-detailed .product-image img,
.search-page .product-card-detailed .product-image img,
.tf-search-page .product-card-detailed .product-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
border-radius:9px!important;
}
.search-results-page .product-card-detailed .product-body,
.search-page .product-card-detailed .product-body,
.tf-search-page .product-card-detailed .product-body{
display:flex!important;
flex:1 1 auto!important;
flex-direction:column!important;
padding:12px!important;
}
.search-results-page .product-card-detailed h3,
.search-page .product-card-detailed h3,
.tf-search-page .product-card-detailed h3{
min-height:34px!important;
margin:0 0 7px!important;
color:#132844!important;
font-size:12px!important;
line-height:1.42!important;
font-weight:800!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
.search-results-page .product-card-detailed .price,
.search-page .product-card-detailed .price,
.tf-search-page .product-card-detailed .price{
margin:2px 0 4px!important;
color:#102b4e!important;
font-size:18px!important;
line-height:1.2!important;
font-weight:900!important;
}
.search-results-page .product-card-detailed .price small,
.search-page .product-card-detailed .price small,
.tf-search-page .product-card-detailed .price small{
color:#6f8197!important;
font-size:8px!important;
font-weight:700!important;
}
.search-results-page .product-card-detailed .product-description,
.search-page .product-card-detailed .product-description,
.tf-search-page .product-card-detailed .product-description{
min-height:32px!important;
margin:4px 0 7px!important;
color:#718196!important;
font-size:8px!important;
line-height:1.5!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
.search-results-page .product-card-detailed .product-compact-chips,
.search-page .product-card-detailed .product-compact-chips,
.tf-search-page .product-card-detailed .product-compact-chips{
display:flex!important;
gap:5px!important;
flex-wrap:wrap!important;
margin:5px 0 8px!important;
}
.search-results-page .product-card-detailed .product-compact-chips>span,
.search-page .product-card-detailed .product-compact-chips>span,
.tf-search-page .product-card-detailed .product-compact-chips>span{
min-height:23px!important;
padding:0 7px!important;
border-radius:999px!important;
font-size:7px!important;
line-height:21px!important;
}
.search-results-page .product-card-detailed .supplier-line,
.search-page .product-card-detailed .supplier-line,
.tf-search-page .product-card-detailed .supplier-line{
margin-top:auto!important;
min-height:30px!important;
padding-top:8px!important;
border-top:1px solid #e6ebf1!important;
color:#52677f!important;
font-size:8px!important;
}
.search-results-page .product-card-detailed .card-actions,
.search-page .product-card-detailed .card-actions,
.tf-search-page .product-card-detailed .card-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
margin-top:8px!important;
}
.search-results-page .product-card-detailed .card-actions>*,
.search-page .product-card-detailed .card-actions>*,
.tf-search-page .product-card-detailed .card-actions>*{
width:100%!important;
min-width:0!important;
margin:0!important;
}
.search-results-page .product-card-detailed .card-actions form,
.search-page .product-card-detailed .card-actions form,
.tf-search-page .product-card-detailed .card-actions form{
display:block!important;
}
.search-results-page .product-card-detailed .card-actions button,
.search-results-page .product-card-detailed .card-actions a,
.search-page .product-card-detailed .card-actions button,
.search-page .product-card-detailed .card-actions a,
.tf-search-page .product-card-detailed .card-actions button,
.tf-search-page .product-card-detailed .card-actions a{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:37px!important;
padding:0 8px!important;
border-radius:8px!important;
font-size:8px!important;
font-weight:900!important;
white-space:nowrap!important;
}
.search-results-page .product-card-detailed .tf-add-cart,
.search-page .product-card-detailed .tf-add-cart,
.tf-search-page .product-card-detailed .tf-add-cart{
border:1px solid #1768cf!important;
background:#fff!important;
color:#145db8!important;
}
.search-results-page .product-card-detailed .tf-buy-now,
.search-page .product-card-detailed .tf-buy-now,
.tf-search-page .product-card-detailed .tf-buy-now{
border:1px solid #efb62f!important;
background:#ffc33f!important;
color:#102341!important;
}
.search-results-page .product-card-detailed .tf-rfq-actions button,
.search-page .product-card-detailed .tf-rfq-actions button,
.tf-search-page .product-card-detailed .tf-rfq-actions button{
border-color:#efb62f!important;
background:#ffc33f!important;
color:#102341!important;
}
.search-results-page .product-card-detailed .product-commerce-actions,
.search-page .product-card-detailed .product-commerce-actions,
.tf-search-page .product-card-detailed .product-commerce-actions{
display:flex!important;
justify-content:flex-start!important;
align-items:center!important;
gap:14px!important;
min-height:28px!important;
margin-top:3px!important;
}
.search-results-page .product-card-detailed .product-commerce-actions button,
.search-page .product-card-detailed .product-commerce-actions button,
.tf-search-page .product-card-detailed .product-commerce-actions button{
width:auto!important;
min-height:0!important;
padding:3px 0!important;
border:0!important;
background:transparent!important;
color:#526b86!important;
font-size:7px!important;
font-weight:800!important;
}
@media(min-width:1500px){
.search-results-page .product-grid,
.search-page .product-grid,
.tf-search-page .product-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
}
@media(max-width:980px){
.search-results-page .product-grid,
.search-page .product-grid,
.tf-search-page .product-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
}
}
@media(max-width:620px){
.search-results-page .product-grid,
.search-page .product-grid,
.tf-search-page .product-grid{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
}
.search-results-page .product-card-detailed .product-body,
.search-page .product-card-detailed .product-body,
.tf-search-page .product-card-detailed .product-body{
padding:8px!important;
}
.search-results-page .product-card-detailed .product-image,
.search-page .product-card-detailed .product-image,
.tf-search-page .product-card-detailed .product-image{
aspect-ratio:1/1!important;
padding:5px!important;
}
.search-results-page .product-card-detailed .product-description,
.search-page .product-card-detailed .product-description,
.tf-search-page .product-card-detailed .product-description{
display:none!important;
}
.search-results-page .product-card-detailed .card-actions,
.search-page .product-card-detailed .card-actions,
.tf-search-page .product-card-detailed .card-actions{
grid-template-columns:1fr!important;
}
.search-results-page .product-card-detailed .tf-add-cart,
.search-page .product-card-detailed .tf-add-cart,
.tf-search-page .product-card-detailed .tf-add-cart{
display:none!important;
}
.search-results-page .product-card-detailed .product-commerce-actions,
.search-page .product-card-detailed .product-commerce-actions,
.tf-search-page .product-card-detailed .product-commerce-actions{
display:none!important;
}
}
@media(max-width:380px){
.search-results-page .product-grid,
.search-page .product-grid,
.tf-search-page .product-grid{
grid-template-columns:1fr!important;
}
}
/* ===== search-results-premium-18.4.244.css ===== */
/* Sprint 620 — Generated-design match for search cards */
.tf-search-page .product-card-detailed,
.search-page .product-card-detailed,
.search-results-page .product-card-detailed{
border-radius:15px!important;
overflow:hidden!important;
}
.tf-search-page .product-card-detailed .product-image,
.search-page .product-card-detailed .product-image,
.search-results-page .product-card-detailed .product-image{
position:relative!important;
background:#fff!important;
}
.tf-search-page .tf-compare-icon,
.search-page .tf-compare-icon,
.search-results-page .tf-compare-icon{
position:absolute!important;
top:54px!important;
right:12px!important;
z-index:4!important;
display:grid!important;
place-items:center!important;
width:34px!important;
height:34px!important;
min-height:34px!important;
padding:0!important;
border:1px solid #d9e3ef!important;
border-radius:50%!important;
background:#fff!important;
color:#173250!important;
box-shadow:0 4px 12px rgba(17,42,72,.08)!important;
cursor:pointer!important;
}
.tf-search-page .tf-compare-icon:hover,
.search-page .tf-compare-icon:hover,
.search-results-page .tf-compare-icon:hover{
border-color:#1768cf!important;
color:#1768cf!important;
background:#f5f9ff!important;
}
.tf-search-page .tf-storefront-row,
.search-page .tf-storefront-row,
.search-results-page .tf-storefront-row{
display:grid!important;
grid-template-columns:28px minmax(0,1fr) auto!important;
align-items:center!important;
gap:7px!important;
min-height:47px!important;
margin-top:auto!important;
padding:9px 0 7px!important;
border-top:1px solid #e6ebf1!important;
}
.tf-search-page .tf-store-icon,
.search-page .tf-store-icon,
.search-results-page .tf-store-icon{
display:grid!important;
place-items:center!important;
width:28px!important;
height:28px!important;
border-radius:7px!important;
background:#f3f7fc!important;
color:#173250!important;
}
.tf-search-page .tf-storefront-copy,
.search-page .tf-storefront-copy,
.search-results-page .tf-storefront-copy{
min-width:0!important;
}
.tf-search-page .tf-seller-link,
.search-page .tf-seller-link,
.search-results-page .tf-seller-link{
display:block!important;
overflow:hidden!important;
color:#135fbd!important;
font-size:8px!important;
font-weight:900!important;
line-height:1.25!important;
text-decoration:none!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.tf-search-page .tf-seller-link:hover,
.search-page .tf-seller-link:hover,
.search-results-page .tf-seller-link:hover{
text-decoration:underline!important;
}
.tf-search-page .tf-seller-link.is-static,
.search-page .tf-seller-link.is-static,
.search-results-page .tf-seller-link.is-static{
color:#536980!important;
}
.tf-search-page .tf-storefront-link,
.search-page .tf-storefront-link,
.search-results-page .tf-storefront-link{
display:inline-block!important;
margin-top:3px!important;
color:#4d6785!important;
font-size:7px!important;
font-weight:800!important;
line-height:1.2!important;
text-decoration:none!important;
}
.tf-search-page .tf-storefront-link:hover,
.search-page .tf-storefront-link:hover,
.search-results-page .tf-storefront-link:hover{
color:#1768cf!important;
}
.tf-search-page .tf-storefront-row .supplier-badges,
.search-page .tf-storefront-row .supplier-badges,
.search-results-page .tf-storefront-row .supplier-badges{
align-self:center!important;
margin:0!important;
}
.tf-search-page .product-card-detailed .card-actions,
.search-page .product-card-detailed .card-actions,
.search-results-page .product-card-detailed .card-actions{
margin-top:8px!important;
gap:8px!important;
}
.tf-search-page .product-card-detailed .tf-shop-actions .tf-add-cart,
.search-page .product-card-detailed .tf-shop-actions .tf-add-cart,
.search-results-page .product-card-detailed .tf-shop-actions .tf-add-cart{
min-height:39px!important;
border:1px solid #1a6bd3!important;
background:#fff!important;
color:#145db8!important;
}
.tf-search-page .product-card-detailed .tf-shop-actions .tf-buy-now,
.search-page .product-card-detailed .tf-shop-actions .tf-buy-now,
.search-results-page .product-card-detailed .tf-shop-actions .tf-buy-now{
min-height:39px!important;
border:1px solid #eeb32a!important;
background:#ffc33f!important;
color:#112542!important;
}
.tf-search-page .product-card-detailed .tf-rfq-actions a,
.search-page .product-card-detailed .tf-rfq-actions a,
.search-results-page .product-card-detailed .tf-rfq-actions a{
min-height:39px!important;
border:1px solid #0d2c58!important;
background:#0d2c58!important;
color:#fff!important;
}
.tf-search-page .product-card-detailed .tf-rfq-actions button,
.search-page .product-card-detailed .tf-rfq-actions button,
.search-results-page .product-card-detailed .tf-rfq-actions button{
min-height:39px!important;
border:1px solid #eeb32a!important;
background:#ffc33f!important;
color:#112542!important;
}
.tf-search-page .product-card-detailed .product-commerce-actions,
.search-page .product-card-detailed .product-commerce-actions,
.search-results-page .product-card-detailed .product-commerce-actions{
display:none!important;
}
@media(max-width:620px){
.tf-search-page .tf-compare-icon,
.search-page .tf-compare-icon,
.search-results-page .tf-compare-icon{
top:46px!important;
right:8px!important;
width:29px!important;
height:29px!important;
min-height:29px!important;
}
.tf-search-page .tf-storefront-row,
.search-page .tf-storefront-row,
.search-results-page .tf-storefront-row{
grid-template-columns:24px minmax(0,1fr) auto!important;
min-height:40px!important;
gap:5px!important;
padding:6px 0!important;
}
.tf-search-page .tf-store-icon,
.search-page .tf-store-icon,
.search-results-page .tf-store-icon{
width:24px!important;
height:24px!important;
}
.tf-search-page .tf-storefront-link,
.search-page .tf-storefront-link,
.search-results-page .tf-storefront-link{
display:none!important;
}
}
/* ===== product-cards-compact-tradesecure-18.4.247.css ===== */
/* Sprint 623 — compact cards + Trade Secure seller badge */
.product-card-detailed{
min-height:0!important;
}
.product-card-detailed .product-image{
position:relative!important;
aspect-ratio:1.45/1!important;
min-height:0!important;
padding:6px!important;
}
.product-card-detailed .product-image img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
}
.product-card-detailed .product-body{
padding:9px 10px 10px!important;
}
.product-card-detailed h3{
min-height:30px!important;
margin-bottom:5px!important;
font-size:11px!important;
line-height:1.35!important;
}
.product-card-detailed .price{
margin:1px 0 3px!important;
font-size:16px!important;
}
.product-card-detailed .product-primary-meta{
margin-top:2px!important;
}
.product-card-detailed .product-description{
min-height:0!important;
margin:3px 0 5px!important;
font-size:7.5px!important;
line-height:1.4!important;
-webkit-line-clamp:1!important;
}
.product-card-detailed .product-compact-chips{
gap:4px!important;
margin:4px 0 5px!important;
}
.product-card-detailed .product-compact-chips>span{
min-height:21px!important;
padding:0 6px!important;
font-size:6.8px!important;
line-height:19px!important;
}
.product-card-detailed .tf-storefront-row,
.product-card-detailed .supplier-line{
min-height:38px!important;
padding:6px 0 5px!important;
}
.product-card-detailed .tf-store-icon{
width:24px!important;
height:24px!important;
}
.product-card-detailed .tf-seller-link{
font-size:7.5px!important;
}
.product-card-detailed .tf-storefront-link{
margin-top:1px!important;
font-size:6.5px!important;
}
.product-card-detailed .card-actions{
gap:6px!important;
margin-top:6px!important;
}
.product-card-detailed .card-actions button,
.product-card-detailed .card-actions a{
min-height:34px!important;
border-radius:7px!important;
font-size:7.5px!important;
}
.product-card-detailed .product-commerce-actions{
min-height:0!important;
margin-top:2px!important;
}
/* Trade Secure badge: only rendered for non-free / trade-assurance sellers */
.product-card-detailed .tf-tradesecure-card-badge{
position:absolute!important;
top:53px!important;
right:9px!important;
z-index:5!important;
display:grid!important;
place-items:center!important;
width:38px!important;
min-height:45px!important;
padding:4px 2px!important;
border:1px solid #d8e5f3!important;
border-radius:9px!important;
background:#fff!important;
color:#123d79!important;
box-shadow:0 4px 12px rgba(17,42,72,.08)!important;
text-align:center!important;
pointer-events:none!important;
}
.product-card-detailed .tf-tradesecure-card-badge svg{
display:block!important;
width:16px!important;
height:16px!important;
}
.product-card-detailed .tf-tradesecure-card-badge small{
display:block!important;
margin-top:1px!important;
color:#123d79!important;
font-size:5.5px!important;
font-weight:900!important;
line-height:1.02!important;
letter-spacing:-.01em!important;
}
/* Keep wishlist and compare controls vertically aligned above Trade Secure */
.product-card-detailed .wishlist-button,
.product-card-detailed [data-wishlist-product]{
top:9px!important;
right:9px!important;
}
.product-card-detailed .tf-compare-icon{
top:53px!important;
right:52px!important;
width:31px!important;
height:31px!important;
min-height:31px!important;
}
/* When Trade Secure exists, compare stays left of it. */
.product-card-detailed:has(.tf-tradesecure-card-badge) .tf-compare-icon{
right:52px!important;
}
/* Large desktop: more content visible without tall cards */
@media(min-width:1200px){
.product-grid .product-card-detailed .product-image{
aspect-ratio:1.5/1!important;
}
}
/* Mobile keeps cards compact and readable */
@media(max-width:620px){
.product-card-detailed .product-image{
aspect-ratio:1.1/1!important;
padding:4px!important;
}
.product-card-detailed .product-body{
padding:7px!important;
}
.product-card-detailed h3{
min-height:28px!important;
font-size:9.5px!important;
}
.product-card-detailed .price{
font-size:14px!important;
}
.product-card-detailed .product-description{
display:none!important;
}
.product-card-detailed .tf-tradesecure-card-badge{
top:43px!important;
right:6px!important;
width:32px!important;
min-height:38px!important;
}
.product-card-detailed .tf-tradesecure-card-badge small{
font-size:4.8px!important;
}
.product-card-detailed .tf-compare-icon{
top:43px!important;
right:43px!important;
width:27px!important;
height:27px!important;
min-height:27px!important;
}
}
/* ===== product-cards-premium-dense-18.4.248.css ===== */
/* Sprint 624 — Premium dense product cards / image fit */
/* Card shell */
.product-grid .product-card-detailed{
display:flex!important;
flex-direction:column!important;
height:auto!important;
min-height:0!important;
border:1px solid #dce4ee!important;
border-radius:14px!important;
background:#fff!important;
overflow:hidden!important;
box-shadow:0 5px 16px rgba(17,42,72,.055)!important;
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease!important;
}
.product-grid .product-card-detailed:hover{
transform:translateY(-2px)!important;
border-color:#cbd8e7!important;
box-shadow:0 14px 30px rgba(17,42,72,.105)!important;
}
/* Image: use more of the card width, remove excessive side gutters */
.product-grid .product-card-detailed .product-image{
position:relative!important;
width:100%!important;
aspect-ratio:1.34/1!important;
min-height:0!important;
margin:0!important;
padding:0!important;
border:0!important;
border-bottom:1px solid #e8edf3!important;
border-radius:0!important;
background:#f8fafc!important;
overflow:hidden!important;
}
.product-grid .product-card-detailed .product-image-link{
display:block!important;
width:100%!important;
height:100%!important;
}
.product-grid .product-card-detailed .product-image img{
display:block!important;
width:100%!important;
height:100%!important;
max-width:none!important;
max-height:none!important;
margin:0!important;
padding:0!important;
object-fit:contain!important;
object-position:center!important;
border-radius:0!important;
background:#fff!important;
}
/* Body: natural flow — no pushed-down seller row / dead vertical space */
.product-grid .product-card-detailed .product-body{
display:block!important;
flex:0 0 auto!important;
min-height:0!important;
padding:11px 12px 12px!important;
}
.product-grid .product-card-detailed h3{
min-height:0!important;
margin:0 0 7px!important;
color:#132844!important;
font-size:12px!important;
line-height:1.35!important;
font-weight:850!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
.product-grid .product-card-detailed h3 a{
color:inherit!important;
text-decoration:none!important;
}
.product-grid .product-card-detailed h3 a:hover{
color:#1263c5!important;
}
/* Price / primary metadata */
.product-grid .product-card-detailed .price{
display:flex!important;
align-items:baseline!important;
gap:4px!important;
min-height:0!important;
margin:0 0 4px!important;
color:#102b4e!important;
font-size:17px!important;
line-height:1.15!important;
font-weight:900!important;
}
.product-grid .product-card-detailed .price small,
.product-grid .product-card-detailed .price span{
color:#7a899d!important;
font-size:7.5px!important;
font-weight:700!important;
}
.product-grid .product-card-detailed .product-primary-meta{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:7px!important;
min-height:20px!important;
margin:0 0 4px!important;
color:#66788e!important;
font-size:7.5px!important;
}
/* One concise description row instead of large text block */
.product-grid .product-card-detailed .product-description{
min-height:0!important;
max-height:30px!important;
margin:4px 0 7px!important;
color:#718196!important;
font-size:7.6px!important;
line-height:1.42!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
}
/* Chips */
.product-grid .product-card-detailed .product-compact-chips{
display:flex!important;
align-items:center!important;
gap:4px!important;
flex-wrap:wrap!important;
min-height:0!important;
margin:0 0 7px!important;
}
.product-grid .product-card-detailed .product-compact-chips>span{
min-height:20px!important;
padding:0 6px!important;
border-radius:999px!important;
font-size:6.5px!important;
line-height:18px!important;
}
/* Seller row: no margin-top:auto — this was creating the large empty space */
.product-grid .product-card-detailed .tf-storefront-row,
.product-grid .product-card-detailed .supplier-line{
display:grid!important;
grid-template-columns:25px minmax(0,1fr) auto!important;
align-items:center!important;
gap:7px!important;
width:100%!important;
min-height:39px!important;
margin:0!important;
padding:7px 0 6px!important;
border-top:1px solid #e8edf3!important;
}
.product-grid .product-card-detailed .tf-store-icon{
width:25px!important;
height:25px!important;
border-radius:7px!important;
}
.product-grid .product-card-detailed .tf-storefront-copy{
min-width:0!important;
}
.product-grid .product-card-detailed .tf-seller-link{
display:block!important;
overflow:hidden!important;
color:#155fb8!important;
font-size:7.7px!important;
font-weight:900!important;
line-height:1.2!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.product-grid .product-card-detailed .tf-storefront-link{
display:inline-block!important;
margin-top:2px!important;
color:#60738b!important;
font-size:6.4px!important;
font-weight:800!important;
}
/* CTA: premium but compact */
.product-grid .product-card-detailed .card-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
margin:7px 0 0!important;
}
.product-grid .product-card-detailed .card-actions>*{
width:100%!important;
margin:0!important;
}
.product-grid .product-card-detailed .card-actions form{
display:block!important;
}
.product-grid .product-card-detailed .card-actions button,
.product-grid .product-card-detailed .card-actions a{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:36px!important;
padding:0 8px!important;
border-radius:8px!important;
font-size:7.7px!important;
font-weight:900!important;
white-space:nowrap!important;
}
.product-grid .product-card-detailed .tf-add-cart{
border:1px solid #1768cf!important;
background:#fff!important;
color:#145db8!important;
}
.product-grid .product-card-detailed .tf-buy-now,
.product-grid .product-card-detailed .tf-rfq-actions button{
border:1px solid #eeb42a!important;
background:#ffc33f!important;
color:#102341!important;
}
.product-grid .product-card-detailed .tf-rfq-actions a{
border:1px solid #d6e0ec!important;
background:#fff!important;
color:#183451!important;
}
/* Keep card-level helper actions unobtrusive */
.product-grid .product-card-detailed .product-commerce-actions{
display:none!important;
}
/* Floating controls */
.product-grid .product-card-detailed [data-wishlist-product],
.product-grid .product-card-detailed .wishlist-button{
top:9px!important;
right:9px!important;
}
.product-grid .product-card-detailed .tf-compare-icon{
top:49px!important;
right:9px!important;
width:30px!important;
height:30px!important;
min-height:30px!important;
}
.product-grid .product-card-detailed .tf-tradesecure-card-badge{
top:86px!important;
right:8px!important;
width:38px!important;
min-height:44px!important;
}
/* Desktop density */
@media(min-width:1280px){
.product-grid .product-card-detailed .product-image{
aspect-ratio:1.4/1!important;
}
}
/* Mobile: maintain visual product prominence while staying compact */
@media(max-width:620px){
.product-grid .product-card-detailed .product-image{
aspect-ratio:1.08/1!important;
}
.product-grid .product-card-detailed .product-body{
padding:8px!important;
}
.product-grid .product-card-detailed h3{
font-size:9.8px!important;
margin-bottom:5px!important;
}
.product-grid .product-card-detailed .price{
font-size:14px!important;
}
.product-grid .product-card-detailed .product-description{
display:none!important;
}
.product-grid .product-card-detailed .product-compact-chips{
overflow-x:auto!important;
flex-wrap:nowrap!important;
scrollbar-width:none!important;
}
.product-grid .product-card-detailed .product-compact-chips::-webkit-scrollbar{
display:none!important;
}
.product-grid .product-card-detailed .product-compact-chips>span{
flex:0 0 auto!important;
}
.product-grid .product-card-detailed .tf-storefront-row{
grid-template-columns:22px minmax(0,1fr) auto!important;
min-height:34px!important;
padding:5px 0!important;
}
.product-grid .product-card-detailed .tf-store-icon{
width:22px!important;
height:22px!important;
}
.product-grid .product-card-detailed .tf-storefront-link{
display:none!important;
}
.product-grid .product-card-detailed .card-actions{
gap:5px!important;
margin-top:5px!important;
}
.product-grid .product-card-detailed .card-actions button,
.product-grid .product-card-detailed .card-actions a{
min-height:33px!important;
padding:0 5px!important;
font-size:7px!important;
}
.product-grid .product-card-detailed .tf-compare-icon{
top:43px!important;
right:6px!important;
width:27px!important;
height:27px!important;
min-height:27px!important;
}
.product-grid .product-card-detailed .tf-tradesecure-card-badge{
top:75px!important;
right:5px!important;
width:32px!important;
min-height:38px!important;
}
}
/* ===== search-product-square-gallery-1.0.402.css ===== */
/*
TradesFolks Sprint 998 — Search Product Square Gallery Refinement
Scope: /search list-view supplier cards only.
Goal: slightly taller cards + square, clean image presentation inspired by
premium B2B supplier-search layouts while preserving TradesFolks branding.
*/
@media (min-width: 901px){
.tf-search-marketplace .tf-supplier-product-list{
gap:16px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{
min-height:352px!important;
padding:15px 16px 13px!important;
border-radius:16px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-head{
min-height:52px!important;
align-items:start!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-badges{
margin:10px 0 12px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{
grid-template-columns:minmax(300px,34%) minmax(0,66%)!important;
gap:20px!important;
align-items:stretch!important;
min-height:258px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics{
min-height:258px!important;
justify-content:space-between!important;
padding:3px 0 2px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics dl{
gap:12px 22px!important;
}
/* Gallery geometry: primary visual and all 4 supporting visuals read as square tiles. */
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{
width:100%!important;
max-width:none!important;
height:258px!important;
min-height:258px!important;
grid-template-columns:minmax(250px,1.08fr) repeat(2,minmax(112px,.50fr))!important;
grid-template-rows:125px 125px!important;
gap:8px!important;
align-self:stretch!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery > a{
height:125px!important;
min-height:125px!important;
border-radius:12px!important;
border:1px solid #d8e2ee!important;
background:#fff!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery > a.is-primary{
grid-row:1 / 3!important;
height:258px!important;
min-height:258px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery img{
display:block!important;
width:100%!important;
height:100%!important;
min-height:0!important;
padding:10px!important;
object-fit:contain!important;
object-position:center center!important;
background:#fff!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery > a.is-primary img{
padding:18px!important;
object-fit:contain!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery > a:not(.is-primary) img{
padding:8px!important;
object-fit:contain!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single{
display:block!important;
width:min(100%,320px)!important;
height:258px!important;
min-height:258px!important;
justify-self:end!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single > a.is-primary{
width:258px!important;
height:258px!important;
min-height:258px!important;
margin-left:auto!important;
aspect-ratio:1 / 1!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-gallery-count{
top:10px!important;
left:10px!important;
padding:5px 7px!important;
border-radius:7px!important;
font-size:8px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery small{
top:10px!important;
right:10px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery strong{
min-height:31px!important;
display:flex!important;
align-items:center!important;
padding:7px 10px!important;
font-size:11px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-thumb-price{
left:7px!important;
right:7px!important;
bottom:6px!important;
padding:4px 7px!important;
border-radius:6px!important;
font-size:8px!important;
background:rgba(255,255,255,.94)!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-foot{
min-height:34px!important;
margin-top:8px!important;
align-items:center!important;
}
}
/* Medium desktop/tablet: retain square-look without forcing overflow. */
@media (min-width: 901px) and (max-width: 1180px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{
min-height:330px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{
grid-template-columns:minmax(250px,34%) minmax(0,66%)!important;
gap:14px!important;
min-height:230px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-metrics{
min-height:230px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{
height:230px!important;
min-height:230px!important;
grid-template-columns:minmax(220px,1.08fr) repeat(2,minmax(96px,.50fr))!important;
grid-template-rows:111px 111px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery > a{
height:111px!important;
min-height:111px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery > a.is-primary{
height:230px!important;
min-height:230px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single > a.is-primary{
height:230px!important;
min-height:230px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single > a.is-primary{
width:230px!important;
}
}
/* Tablet: image section moves below product facts; tiles stay balanced and clean. */
@media (max-width: 900px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{
min-height:0!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{
grid-template-columns:1fr!important;
gap:14px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{
height:auto!important;
min-height:0!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
grid-template-rows:auto!important;
gap:8px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi > a{
display:block!important;
width:100%!important;
height:auto!important;
min-height:0!important;
aspect-ratio:1 / 1!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi > a.is-primary{
grid-row:auto!important;
grid-column:1 / -1!important;
width:min(100%,420px)!important;
justify-self:center!important;
height:auto!important;
min-height:0!important;
aspect-ratio:1 / 1!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi img,
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single img{
width:100%!important;
height:100%!important;
min-height:0!important;
object-fit:contain!important;
padding:10px!important;
background:#fff!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single{
width:min(100%,420px)!important;
height:auto!important;
min-height:0!important;
justify-self:center!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-single > a.is-primary{
display:block!important;
width:100%!important;
height:auto!important;
min-height:0!important;
aspect-ratio:1 / 1!important;
}
}
/* Mobile: primary image remains large; supporting images become clean square thumbnails. */
@media (max-width: 620px){
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-card-v3{
padding:11px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-main{
gap:11px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi{
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery.is-multi > a.is-primary{
width:min(100%,340px)!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery img{
padding:8px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-supplier-list-gallery > a.is-primary img{
padding:12px!important;
}
.tf-search-marketplace .tf-supplier-product-list .tf-thumb-price{
font-size:7px!important;
}
}
/* ===== home-hero-no-search-18.4.250.css ===== */
/* Sprint 626 — homepage hero search removed */
.tf-home-v3 .tf-home-v3-search{display:none!important}
.tf-home-v3 .tf-home-v3-copy{
max-width:660px!important;
}
.tf-home-v3 .tf-home-v3-popular{
margin-top:16px!important;
}
.tf-home-v3 .tf-home-v3-actions{
margin-top:15px!important;
}
.tf-home-v3 .tf-home-v3-stats{
margin-top:16px!important;
}
@media(max-width:767px){
.tf-home-v3 .tf-home-v3-popular{
margin-top:12px!important;
}
.tf-home-v3 .tf-home-v3-actions{
margin-top:12px!important;
}
}
/* ===== home-hero-inhouse-premium-18.4.251.css ===== */
/* Sprint 627 — stable premium hero + in-house product carousel */
.tf-home-v3 .tf-home-v3-hero{
min-height:590px!important;
height:clamp(590px,37vw,680px)!important;
}
.tf-home-v3 .tf-home-v3-premium-inner{
position:relative!important;
z-index:3!important;
display:grid!important;
grid-template-columns:minmax(0,1.12fr) minmax(330px,.58fr)!important;
align-items:center!important;
gap:34px!important;
height:100%!important;
padding-top:42px!important;
padding-bottom:42px!important;
}
.tf-home-v3 .tf-home-v3-copy{
width:100%!important;
max-width:690px!important;
min-width:0!important;
min-height:390px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
}
.tf-home-v3 .tf-home-v3-copy h1{
max-width:660px!important;
min-height:118px!important;
max-height:118px!important;
margin:12px 0 7px!important;
overflow:hidden!important;
font-size:clamp(39px,3.35vw,62px)!important;
line-height:.98!important;
letter-spacing:-.045em!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-home-v3 .tf-home-v3-copy>p{
max-width:640px!important;
min-height:42px!important;
max-height:42px!important;
margin:0!important;
overflow:hidden!important;
font-size:11px!important;
line-height:1.55!important;
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
}
.tf-home-v3 .tf-home-v3-popular{margin-top:15px!important}
.tf-home-v3 .tf-home-v3-actions{margin-top:14px!important}
.tf-home-v3 .tf-home-v3-stats{margin-top:16px!important;max-width:630px!important}
/* Right-side product carousel */
.tf-hero-inhouse{
width:100%!important;
max-width:430px!important;
justify-self:end!important;
overflow:hidden!important;
border:1px solid rgba(255,255,255,.26)!important;
border-radius:20px!important;
background:rgba(255,255,255,.96)!important;
color:#142b4c!important;
box-shadow:0 24px 60px rgba(4,18,42,.27)!important;
backdrop-filter:blur(14px)!important;
}
.tf-hero-inhouse-head{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:12px!important;
min-height:62px!important;
padding:12px 14px!important;
border-bottom:1px solid #e7edf4!important;
}
.tf-hero-inhouse-head span{
display:block!important;
margin-bottom:2px!important;
color:#1768cf!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.1em!important;
}
.tf-hero-inhouse-head strong{
display:block!important;
color:#152d4d!important;
font-size:13px!important;
line-height:1.2!important;
}
.tf-hero-inhouse-nav{display:flex!important;gap:5px!important}
.tf-hero-inhouse-nav button{
display:grid!important;
place-items:center!important;
width:30px!important;
height:30px!important;
border:1px solid #d9e2ed!important;
border-radius:50%!important;
background:#fff!important;
color:#173250!important;
font-size:18px!important;
cursor:pointer!important;
}
.tf-hero-inhouse-stage{
position:relative!important;
height:392px!important;
overflow:hidden!important;
background:#fff!important;
}
.tf-hero-inhouse-card{
position:absolute!important;
inset:0!important;
display:grid!important;
grid-template-rows:226px minmax(0,1fr)!important;
opacity:0!important;
visibility:hidden!important;
transform:translateX(18px)!important;
transition:opacity .28s ease,transform .28s ease,visibility .28s!important;
pointer-events:none!important;
}
.tf-hero-inhouse-card.is-active{
opacity:1!important;
visibility:visible!important;
transform:none!important;
pointer-events:auto!important;
}
.tf-hero-inhouse-media{
position:relative!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
padding:10px 12px 5px!important;
background:#f7f9fc!important;
}
.tf-hero-inhouse-media>a{
display:grid!important;
place-items:center!important;
width:100%!important;
height:100%!important;
}
.tf-hero-inhouse-media img{
display:block!important;
width:100%!important;
height:100%!important;
object-fit:contain!important;
object-position:center!important;
}
.tf-hero-inhouse-badge{
position:absolute!important;
z-index:2!important;
left:13px!important;
top:13px!important;
padding:6px 9px!important;
border-radius:999px!important;
background:#102f5f!important;
color:#fff!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.03em!important;
}
.tf-hero-inhouse-body{
display:flex!important;
flex-direction:column!important;
min-height:0!important;
padding:10px 13px 12px!important;
}
.tf-hero-inhouse-meta{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:8px!important;
min-height:17px!important;
color:#31845f!important;
font-size:6.8px!important;
font-weight:800!important;
}
.tf-hero-inhouse-meta b{color:#a76f00!important}
.tf-hero-inhouse-name{
display:-webkit-box!important;
-webkit-line-clamp:2!important;
-webkit-box-orient:vertical!important;
overflow:hidden!important;
min-height:35px!important;
margin-top:4px!important;
color:#142d4f!important;
font-size:12px!important;
line-height:1.35!important;
font-weight:900!important;
text-decoration:none!important;
}
.tf-hero-inhouse-commerce{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:9px!important;
min-height:38px!important;
margin-top:6px!important;
}
.tf-hero-inhouse-commerce>div{min-width:0!important}
.tf-hero-inhouse-commerce strong{
display:block!important;
overflow:hidden!important;
color:#102b4e!important;
font-size:15px!important;
line-height:1.1!important;
font-weight:900!important;
text-overflow:ellipsis!important;
white-space:nowrap!important;
}
.tf-hero-inhouse-commerce>div>span{
display:block!important;
margin-top:3px!important;
color:#77889c!important;
font-size:6.5px!important;
}
.tf-hero-inhouse-commerce>span{
flex:0 0 auto!important;
padding:5px 7px!important;
border-radius:999px!important;
font-size:6px!important;
font-weight:900!important;
}
.tf-hero-inhouse-commerce .is-stock{background:#eaf8f0!important;color:#16724a!important}
.tf-hero-inhouse-commerce .is-rfq{background:#fff5df!important;color:#8f6811!important}
.tf-hero-inhouse-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
margin-top:auto!important;
}
.tf-hero-inhouse-actions form{display:block!important;margin:0!important}
.tf-hero-inhouse-actions a,
.tf-hero-inhouse-actions button{
display:flex!important;
align-items:center!important;
justify-content:center!important;
width:100%!important;
min-height:34px!important;
margin:0!important;
padding:0 8px!important;
border:1px solid #d8e1ec!important;
border-radius:8px!important;
background:#fff!important;
color:#153557!important;
font-size:7.2px!important;
font-weight:900!important;
text-decoration:none!important;
cursor:pointer!important;
}
.tf-hero-inhouse-actions button,
.tf-hero-inhouse-actions .is-primary{
border-color:#edb32e!important;
background:#ffc33f!important;
color:#10284a!important;
}
.tf-hero-inhouse-footer{
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:10px!important;
min-height:42px!important;
padding:8px 13px!important;
border-top:1px solid #e8edf3!important;
background:#fbfcfe!important;
}
.tf-hero-inhouse-footer>span{
display:flex!important;
align-items:center!important;
gap:6px!important;
color:#64788f!important;
font-size:6.7px!important;
font-weight:800!important;
}
.tf-hero-inhouse-footer>span i{
width:7px!important;
height:7px!important;
border-radius:50%!important;
background:#20b876!important;
}
.tf-hero-inhouse-dots{display:flex!important;align-items:center!important;gap:4px!important}
.tf-hero-inhouse-dots button{
width:5px!important;
height:5px!important;
padding:0!important;
border:0!important;
border-radius:999px!important;
background:#c8d1dd!important;
cursor:pointer!important;
}
.tf-hero-inhouse-dots button.is-active{
width:17px!important;
background:#ffc33f!important;
}
/* Keep festival slider controls away from product card */
.tf-home-v3 .tf-home-v3-slider-ui{
right:22px!important;
bottom:17px!important;
}
/* Tablet */
@media(max-width:1100px){
.tf-home-v3 .tf-home-v3-premium-inner{
grid-template-columns:minmax(0,1fr) 330px!important;
gap:18px!important;
}
.tf-home-v3 .tf-home-v3-copy h1{
font-size:42px!important;
}
.tf-hero-inhouse{
max-width:330px!important;
}
}
/* Mobile: stable stacked carousel, horizontally compact */
@media(max-width:760px){
.tf-home-v3 .tf-home-v3-hero{
height:auto!important;
min-height:0!important;
padding-bottom:52px!important;
}
.tf-home-v3 .tf-home-v3-premium-inner{
display:block!important;
height:auto!important;
padding-top:25px!important;
padding-bottom:18px!important;
}
.tf-home-v3 .tf-home-v3-copy{
min-height:0!important;
max-width:none!important;
}
.tf-home-v3 .tf-home-v3-copy h1{
min-height:0!important;
max-height:none!important;
font-size:34px!important;
-webkit-line-clamp:3!important;
}
.tf-home-v3 .tf-home-v3-copy>p{
min-height:0!important;
max-height:48px!important;
}
.tf-home-v3 .tf-home-v3-stats{
margin-bottom:15px!important;
}
.tf-hero-inhouse{
width:100%!important;
max-width:none!important;
margin-top:14px!important;
border-radius:15px!important;
}
.tf-hero-inhouse-head{
min-height:48px!important;
padding:9px 10px!important;
}
.tf-hero-inhouse-stage{
height:285px!important;
}
.tf-hero-inhouse-card{
grid-template-columns:42% 58%!important;
grid-template-rows:1fr!important;
}
.tf-hero-inhouse-media{
padding:8px!important;
}
.tf-hero-inhouse-body{
padding:10px!important;
}
.tf-hero-inhouse-name{
min-height:32px!important;
font-size:10px!important;
}
.tf-hero-inhouse-commerce strong{
font-size:13px!important;
}
.tf-hero-inhouse-actions{
grid-template-columns:1fr!important;
gap:5px!important;
}
.tf-hero-inhouse-actions a,
.tf-hero-inhouse-actions button{
min-height:31px!important;
font-size:6.7px!important;
}
.tf-hero-inhouse-actions>a:first-child{
display:none!important;
}
.tf-hero-inhouse-footer{
min-height:34px!important;
padding:6px 10px!important;
}
}
/* ===== home-hero-stats-remove-nav-18.4.256.css ===== */
/* Sprint 632R — remove hero KPI stats + compact slider controls */
/* Defensive hide in case cached/legacy markup still exists. */
.tf-home-v3 .tf-home-v3-stats{display:none!important}
/* Reclaim the space that the removed KPI block occupied. */
.tf-home-v3 .tf-home-v3-copy{padding-bottom:0!important}
.tf-home-v3 .tf-home-v3-actions{margin-bottom:0!important}
/* Remove full-width blurred/dark slider band. */
.tf-home-v3 .tf-home-v3-slider-ui{
position:absolute!important;
z-index:20!important;
right:16px!important;
bottom:14px!important;
left:auto!important;
top:auto!important;
width:auto!important;
max-width:max-content!important;
min-width:0!important;
height:auto!important;
min-height:0!important;
margin:0!important;
padding:4px 5px!important;
display:flex!important;
align-items:center!important;
justify-content:flex-end!important;
gap:7px!important;
border:1px solid rgba(255,255,255,.24)!important;
border-radius:999px!important;
background:rgba(7,28,55,.62)!important;
box-shadow:0 8px 22px rgba(0,0,0,.15)!important;
backdrop-filter:blur(8px)!important;
overflow:visible!important;
}
.tf-home-v3 .tf-home-v3-slider-ui::before,
.tf-home-v3 .tf-home-v3-slider-ui::after{
display:none!important;
content:none!important;
}
.tf-home-v3 .tf-home-v3-slider-ui>button{
flex:0 0 auto!important;
display:grid!important;
place-items:center!important;
width:34px!important;
height:34px!important;
min-width:34px!important;
min-height:34px!important;
padding:0!important;
margin:0!important;
border:1px solid rgba(255,255,255,.34)!important;
border-radius:50%!important;
background:#102e52!important;
color:#fff!important;
box-shadow:none!important;
}
.tf-home-v3 .tf-home-v3-dots{
flex:0 0 auto!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
width:auto!important;
min-width:0!important;
max-width:none!important;
margin:0!important;
padding:0!important;
border:0!important;
background:transparent!important;
}
.tf-home-v3 .tf-home-v3-dots button{
flex:0 0 auto!important;
width:6px!important;
height:6px!important;
min-width:6px!important;
min-height:6px!important;
padding:0!important;
margin:0!important;
border:0!important;
border-radius:999px!important;
background:rgba(255,255,255,.58)!important;
box-shadow:none!important;
}
.tf-home-v3 .tf-home-v3-dots button.is-active{
width:22px!important;
background:#ffc23a!important;
}
/* Desktop/tablet: content can sit naturally after KPI removal. */
@media(min-width:768px){
.tf-home-v3 .tf-home-v3-inner{padding-bottom:38px!important}
.tf-home-v3 .tf-home-v3-copy{align-self:center!important}
}
/* Mobile: keep controls below content and compact. */
@media(max-width:767px){
.tf-home-v3 .tf-home-v3-inner{padding-bottom:68px!important}
.tf-home-v3 .tf-home-v3-slider-ui{
right:10px!important;
bottom:10px!important;
padding:4px!important;
gap:6px!important;
}
.tf-home-v3 .tf-home-v3-slider-ui>button{
width:36px!important;
height:36px!important;
min-width:36px!important;
min-height:36px!important;
}
}
/* ===== home-hero-polish-18.4.257.css ===== */
/* Sprint 633 — Desktop scale-up, premium trust rail, compact mobile hero */
/* Keep removed KPI block gone even if stale/cached markup survives. */
.tf-home-v3 .tf-home-v3-stats{display:none!important}
/* ---------- DESKTOP: larger content only ---------- */
@media(min-width:1024px){
.tf-home-v3 .tf-home-v3-inner{
align-items:center!important;
padding-top:24px!important;
padding-bottom:36px!important;
}
.tf-home-v3 .tf-home-v3-copy{
width:min(820px,58%)!important;
max-width:820px!important;
min-height:0!important;
}
.tf-home-v3 .tf-home-v3-eyebrow{
min-height:34px!important;
padding:0 16px!important;
margin-bottom:18px!important;
font-size:10px!important;
letter-spacing:.035em!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-title],
.tf-home-v3 .tf-home-v3-copy h1{
display:block!important;
max-width:14ch!important;
min-height:0!important;
max-height:none!important;
margin:0 0 13px!important;
overflow:visible!important;
font-size:clamp(58px,4.25vw,78px)!important;
line-height:.98!important;
letter-spacing:-.047em!important;
text-wrap:balance!important;
-webkit-line-clamp:unset!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-description],
.tf-home-v3 .tf-home-v3-copy>p{
display:block!important;
max-width:72ch!important;
min-height:0!important;
max-height:none!important;
margin:0 0 20px!important;
overflow:visible!important;
font-size:14px!important;
line-height:1.5!important;
-webkit-line-clamp:unset!important;
}
.tf-home-v3 .tf-home-v3-popular{
gap:7px!important;
margin:0 0 19px!important;
font-size:9px!important;
}
.tf-home-v3 .tf-home-v3-popular a{
min-height:31px!important;
padding:0 12px!important;
font-size:9px!important;
border-width:1px!important;
}
.tf-home-v3 .tf-home-v3-actions{
display:flex!important;
gap:10px!important;
margin:0!important;
}
.tf-home-v3 .tf-home-v3-actions a{
width:auto!important;
min-height:48px!important;
padding:0 20px!important;
border-radius:10px!important;
font-size:10px!important;
font-weight:900!important;
}
}
/* ---------- PREMIUM TRUST / VALUE RAIL ---------- */
.tf-home-v3 .tf-home-v3-trust{
position:relative!important;
overflow:hidden!important;
margin-top:10px!important;
border:1px solid #dbe4ee!important;
border-radius:14px!important;
background:#fff!important;
box-shadow:0 10px 28px rgba(15,43,78,.055)!important;
}
.tf-home-v3 .tf-home-v3-trust::before{
content:""!important;
position:absolute!important;
inset:0 auto 0 0!important;
width:4px!important;
background:#ffc23a!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
min-height:52px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
padding:7px 18px 7px 22px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
}
.tf-home-v3 .tf-home-v3-trust .shell::-webkit-scrollbar{display:none!important}
.tf-home-v3 .tf-home-v3-trust span{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
min-height:29px!important;
padding:0 10px!important;
border:1px solid #e3e9f0!important;
border-radius:999px!important;
background:#f8fafc!important;
color:#415b77!important;
font-size:7.5px!important;
font-weight:850!important;
white-space:nowrap!important;
}
.tf-home-v3 .tf-home-v3-trust i{
flex:0 0 auto!important;
width:5px!important;
height:5px!important;
margin:0!important;
border-radius:50%!important;
background:#f2b520!important;
box-shadow:0 0 0 3px rgba(242,181,32,.10)!important;
}
/* ---------- MOBILE: compact, no overlap/clipping ---------- */
@media(max-width:767px){
.tf-home-v3 .tf-home-v3-hero{
height:auto!important;
min-height:0!important;
max-height:none!important;
}
.tf-home-v3 .tf-home-v3-inner{
height:auto!important;
min-height:0!important;
padding:22px 18px 74px!important;
align-items:flex-start!important;
}
.tf-home-v3 .tf-home-v3-copy{
display:block!important;
width:100%!important;
max-width:none!important;
min-height:0!important;
padding:0!important;
}
.tf-home-v3 .tf-home-v3-eyebrow{
width:max-content!important;
max-width:100%!important;
min-height:29px!important;
padding:0 11px!important;
margin:0 0 12px!important;
font-size:7.5px!important;
line-height:1.1!important;
}
/* Explicitly remove all previous title clamps/heights. */
.tf-home-v3 .tf-home-v3-copy [data-v3-title],
.tf-home-v3 .tf-home-v3-copy h1{
display:block!important;
width:auto!important;
max-width:12.5ch!important;
min-height:0!important;
max-height:none!important;
height:auto!important;
margin:0 0 8px!important;
padding:0!important;
overflow:visible!important;
font-size:clamp(29px,8.8vw,37px)!important;
line-height:1.01!important;
letter-spacing:-.038em!important;
text-wrap:balance!important;
-webkit-line-clamp:unset!important;
-webkit-box-orient:unset!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-description],
.tf-home-v3 .tf-home-v3-copy>p{
display:block!important;
width:auto!important;
max-width:43ch!important;
min-height:0!important;
max-height:none!important;
height:auto!important;
margin:0 0 13px!important;
overflow:visible!important;
font-size:10px!important;
line-height:1.38!important;
-webkit-line-clamp:unset!important;
-webkit-box-orient:unset!important;
}
.tf-home-v3 .tf-home-v3-popular{
display:flex!important;
align-items:center!important;
flex-wrap:nowrap!important;
gap:5px!important;
width:100%!important;
margin:0 0 13px!important;
padding:0 0 2px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-home-v3 .tf-home-v3-popular::-webkit-scrollbar{display:none!important}
.tf-home-v3 .tf-home-v3-popular>span{
flex:0 0 auto!important;
font-size:8px!important;
}
.tf-home-v3 .tf-home-v3-popular a{
flex:0 0 auto!important;
min-height:28px!important;
padding:0 9px!important;
font-size:6.5px!important;
white-space:nowrap!important;
}
.tf-home-v3 .tf-home-v3-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
margin:0!important;
}
.tf-home-v3 .tf-home-v3-actions a{
width:100%!important;
min-height:42px!important;
padding:0 8px!important;
border-radius:9px!important;
font-size:7.5px!important;
line-height:1.15!important;
text-align:center!important;
}
/* Smaller navigation: no CTA/content overlap. */
.tf-home-v3 .tf-home-v3-slider-ui{
right:9px!important;
bottom:9px!important;
gap:5px!important;
padding:3px 4px!important;
min-height:0!important;
border-radius:999px!important;
}
.tf-home-v3 .tf-home-v3-slider-ui>button{
width:31px!important;
height:31px!important;
min-width:31px!important;
min-height:31px!important;
font-size:17px!important;
}
.tf-home-v3 .tf-home-v3-dots{
gap:4px!important;
}
.tf-home-v3 .tf-home-v3-dots button{
width:5px!important;
height:5px!important;
min-width:5px!important;
min-height:5px!important;
}
.tf-home-v3 .tf-home-v3-dots button.is-active{
width:18px!important;
}
.tf-home-v3 .tf-home-v3-trust{
margin:8px 8px 0!important;
border-radius:11px!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
min-height:44px!important;
justify-content:flex-start!important;
gap:6px!important;
padding:6px 10px 6px 14px!important;
}
.tf-home-v3 .tf-home-v3-trust span{
min-height:25px!important;
padding:0 8px!important;
font-size:6.5px!important;
}
.tf-home-v3 .tf-home-v3-trust i{
width:4px!important;
height:4px!important;
}
}
/* Very small phones */
@media(max-width:390px){
.tf-home-v3 .tf-home-v3-inner{
padding:18px 15px 68px!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-title],
.tf-home-v3 .tf-home-v3-copy h1{
max-width:12ch!important;
font-size:clamp(27px,8.7vw,33px)!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-description],
.tf-home-v3 .tf-home-v3-copy>p{
font-size:9px!important;
}
.tf-home-v3 .tf-home-v3-actions a{
min-height:39px!important;
font-size:7px!important;
}
.tf-home-v3 .tf-home-v3-slider-ui>button{
width:29px!important;
height:29px!important;
min-width:29px!important;
min-height:29px!important;
}
}
/* Tiny phones: stack only here to preserve readable tap targets. */
@media(max-width:340px){
.tf-home-v3 .tf-home-v3-actions{
grid-template-columns:1fr!important;
}
}
/* ===== home-hero-refine-18.4.258.css ===== */
/* Sprint 634 — Premium trust rail + balanced desktop heading + compact mobile hero */
/* Defensive: removed KPI block remains gone */
.tf-home-v3 .tf-home-v3-stats{display:none!important}
/* =========================
TRUST / VALUE RAIL
========================= */
.tf-home-v3 .tf-home-v3-trust{
position:relative!important;
width:min(1480px,calc(100% - 28px))!important;
margin:9px auto 0!important;
overflow:hidden!important;
border:1px solid #d8e2ed!important;
border-radius:14px!important;
background:#fff!important;
box-shadow:0 10px 30px rgba(15,43,78,.07)!important;
}
.tf-home-v3 .tf-home-v3-trust::before{
content:""!important;
position:absolute!important;
left:0!important;
top:0!important;
bottom:0!important;
width:4px!important;
background:#ffbf2f!important;
}
.tf-home-v3 .tf-home-v3-trust::after{
content:""!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:linear-gradient(90deg,rgba(255,191,47,.045),transparent 18%,transparent)!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
position:relative!important;
z-index:1!important;
min-height:52px!important;
width:100%!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:7px!important;
padding:7px 18px 7px 22px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
}
.tf-home-v3 .tf-home-v3-trust .shell::-webkit-scrollbar{display:none!important}
.tf-home-v3 .tf-home-v3-trust span{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:30px!important;
padding:0 11px!important;
border:1px solid #dfe7f0!important;
border-radius:999px!important;
background:#f8fafc!important;
color:#405976!important;
font-size:7.6px!important;
font-weight:900!important;
line-height:1!important;
white-space:nowrap!important;
box-shadow:0 2px 5px rgba(16,42,76,.025)!important;
}
.tf-home-v3 .tf-home-v3-trust span::before{
content:"✓"!important;
display:grid!important;
place-items:center!important;
width:14px!important;
height:14px!important;
margin-right:6px!important;
border-radius:50%!important;
background:#e9f7f0!important;
color:#18764e!important;
font-size:7px!important;
font-weight:950!important;
}
.tf-home-v3 .tf-home-v3-trust i{
flex:0 0 auto!important;
width:5px!important;
height:5px!important;
margin:0 1px!important;
border-radius:50%!important;
background:#f1b420!important;
box-shadow:0 0 0 3px rgba(241,180,32,.11)!important;
}
/* =========================
DESKTOP — BALANCE TITLE
========================= */
@media(min-width:1024px){
.tf-home-v3 .tf-home-v3-copy{
width:min(760px,55%)!important;
max-width:760px!important;
}
.tf-home-v3 .tf-home-v3-eyebrow{
min-height:32px!important;
padding:0 14px!important;
margin-bottom:15px!important;
font-size:9px!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-title],
.tf-home-v3 .tf-home-v3-copy h1{
max-width:13.5ch!important;
margin:0 0 11px!important;
font-size:clamp(50px,3.72vw,68px)!important;
line-height:.99!important;
letter-spacing:-.044em!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-description],
.tf-home-v3 .tf-home-v3-copy>p{
max-width:68ch!important;
margin-bottom:17px!important;
font-size:12px!important;
line-height:1.5!important;
}
.tf-home-v3 .tf-home-v3-popular{
margin-bottom:16px!important;
gap:6px!important;
font-size:8px!important;
}
.tf-home-v3 .tf-home-v3-popular a{
min-height:29px!important;
padding:0 11px!important;
font-size:8px!important;
}
.tf-home-v3 .tf-home-v3-actions{
gap:9px!important;
}
.tf-home-v3 .tf-home-v3-actions a{
min-height:45px!important;
padding:0 18px!important;
font-size:9px!important;
}
}
/* =========================
MOBILE — COMPACT EVERYTHING
========================= */
@media(max-width:767px){
.tf-home-v3 .tf-home-v3-hero{
min-height:0!important;
height:auto!important;
max-height:none!important;
}
.tf-home-v3 .tf-home-v3-inner{
min-height:0!important;
height:auto!important;
padding:17px 16px 64px!important;
}
.tf-home-v3 .tf-home-v3-copy{
width:100%!important;
max-width:none!important;
min-height:0!important;
}
.tf-home-v3 .tf-home-v3-eyebrow{
min-height:27px!important;
padding:0 10px!important;
margin:0 0 10px!important;
font-size:7px!important;
line-height:1!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-title],
.tf-home-v3 .tf-home-v3-copy h1{
display:block!important;
max-width:12.2ch!important;
min-height:0!important;
max-height:none!important;
height:auto!important;
margin:0 0 7px!important;
overflow:visible!important;
font-size:clamp(26px,7.8vw,33px)!important;
line-height:1.01!important;
letter-spacing:-.036em!important;
text-wrap:balance!important;
-webkit-line-clamp:unset!important;
-webkit-box-orient:unset!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-description],
.tf-home-v3 .tf-home-v3-copy>p{
display:block!important;
max-width:40ch!important;
min-height:0!important;
max-height:none!important;
height:auto!important;
margin:0 0 11px!important;
overflow:visible!important;
font-size:8.8px!important;
line-height:1.36!important;
-webkit-line-clamp:unset!important;
-webkit-box-orient:unset!important;
}
.tf-home-v3 .tf-home-v3-popular{
display:flex!important;
flex-wrap:nowrap!important;
align-items:center!important;
gap:4px!important;
width:100%!important;
margin:0 0 11px!important;
padding:0 0 2px!important;
overflow-x:auto!important;
scrollbar-width:none!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-home-v3 .tf-home-v3-popular::-webkit-scrollbar{display:none!important}
.tf-home-v3 .tf-home-v3-popular>span{
flex:0 0 auto!important;
font-size:7px!important;
}
.tf-home-v3 .tf-home-v3-popular a{
flex:0 0 auto!important;
min-height:25px!important;
padding:0 8px!important;
font-size:5.8px!important;
white-space:nowrap!important;
}
.tf-home-v3 .tf-home-v3-actions{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:6px!important;
margin:0!important;
}
.tf-home-v3 .tf-home-v3-actions a{
width:100%!important;
min-height:38px!important;
padding:0 7px!important;
border-radius:8px!important;
font-size:6.8px!important;
line-height:1.12!important;
text-align:center!important;
}
/* More compact slider navigation */
.tf-home-v3 .tf-home-v3-slider-ui{
right:8px!important;
bottom:8px!important;
min-height:0!important;
padding:3px!important;
gap:4px!important;
}
.tf-home-v3 .tf-home-v3-slider-ui>button{
width:28px!important;
height:28px!important;
min-width:28px!important;
min-height:28px!important;
font-size:15px!important;
}
.tf-home-v3 .tf-home-v3-dots{
gap:3px!important;
}
.tf-home-v3 .tf-home-v3-dots button{
width:4px!important;
height:4px!important;
min-width:4px!important;
min-height:4px!important;
}
.tf-home-v3 .tf-home-v3-dots button.is-active{
width:16px!important;
}
/* Compact mobile trust/value rail */
.tf-home-v3 .tf-home-v3-trust{
width:calc(100% - 16px)!important;
margin:7px auto 0!important;
border-radius:10px!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
min-height:40px!important;
justify-content:flex-start!important;
gap:5px!important;
padding:5px 8px 5px 12px!important;
}
.tf-home-v3 .tf-home-v3-trust span{
min-height:23px!important;
padding:0 7px!important;
font-size:5.8px!important;
}
.tf-home-v3 .tf-home-v3-trust span::before{
width:11px!important;
height:11px!important;
margin-right:4px!important;
font-size:5.5px!important;
}
.tf-home-v3 .tf-home-v3-trust i{
width:4px!important;
height:4px!important;
box-shadow:none!important;
}
}
@media(max-width:390px){
.tf-home-v3 .tf-home-v3-inner{
padding:14px 14px 60px!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-title],
.tf-home-v3 .tf-home-v3-copy h1{
max-width:11.8ch!important;
font-size:clamp(24px,7.7vw,30px)!important;
}
.tf-home-v3 .tf-home-v3-copy [data-v3-description],
.tf-home-v3 .tf-home-v3-copy>p{
font-size:8px!important;
}
.tf-home-v3 .tf-home-v3-popular{
margin-bottom:9px!important;
}
.tf-home-v3 .tf-home-v3-actions a{
min-height:36px!important;
font-size:6.3px!important;
}
.tf-home-v3 .tf-home-v3-slider-ui>button{
width:26px!important;
height:26px!important;
min-width:26px!important;
min-height:26px!important;
}
}
@media(max-width:340px){
.tf-home-v3 .tf-home-v3-actions{
grid-template-columns:1fr!important;
}
}
/* Sprint 811 — Hero image clarity / artwork fidelity
Keep the existing hero composition, but stop the full-canvas dark wash from
muting uploaded artwork. Darkness is concentrated behind the copy only. */
.tf-homepage .tf-home-v3 .tf-home-v3-media,
.tf-homepage .tf-home-v3 .tf-home-v3-slide {
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
.tf-homepage .tf-home-v3 .tf-home-v3-slide {
background-size: cover !important;
background-repeat: no-repeat !important;
background-position: center center !important;
image-rendering: auto !important;
opacity: 0 !important;
}
.tf-homepage .tf-home-v3 .tf-home-v3-slide.is-active {
opacity: 1 !important;
}
/* Preserve strong text contrast on the left while allowing the artwork on the
right to retain its original contrast, colour and fine detail. */
.tf-homepage .tf-home-v3 .tf-home-v3-overlay {
background: linear-gradient(90deg,
rgba(5, 24, 50, .76) 0%,
rgba(5, 24, 50, .64) 24%,
rgba(5, 24, 50, .46) 38%,
rgba(5, 24, 50, .18) 54%,
rgba(5, 24, 50, .05) 68%,
rgba(5, 24, 50, 0) 82%) !important;
filter: none !important;
-webkit-filter: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
@media (max-width: 767px) {
.tf-homepage .tf-home-v3 .tf-home-v3-slide {
background-position: center center !important;
}
/* Mobile needs a little more uniform contrast because copy occupies more of
the artwork, but no blur/filter is applied to the source image. */
.tf-homepage .tf-home-v3 .tf-home-v3-overlay {
background: linear-gradient(90deg,
rgba(5, 24, 50, .72) 0%,
rgba(5, 24, 50, .55) 45%,
rgba(5, 24, 50, .22) 78%,
rgba(5, 24, 50, .08) 100%) !important;
}
}
/* ===== home-trust-rail-premium-18.4.259.css ===== */
/* Sprint 635 — Premium trust rail + mobile spacing normalization */
.tf-home-v3 .tf-home-v3-trust{
position:relative!important;
width:min(1480px,calc(100% - 28px))!important;
margin:12px auto 14px!important;
overflow:hidden!important;
border:1px solid #d7e1ec!important;
border-radius:15px!important;
background:#fff!important;
box-shadow:0 12px 32px rgba(12,36,70,.07)!important;
}
.tf-home-v3 .tf-home-v3-trust::before{
content:""!important;
position:absolute!important;
left:0!important;
top:0!important;
bottom:0!important;
width:4px!important;
background:#ffbf2f!important;
}
.tf-home-v3 .tf-home-v3-trust::after{
content:""!important;
position:absolute!important;
inset:0!important;
pointer-events:none!important;
background:linear-gradient(90deg,rgba(255,191,47,.055),transparent 15%)!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
position:relative!important;
z-index:1!important;
width:100%!important;
min-height:58px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:8px!important;
padding:9px 18px 9px 22px!important;
overflow-x:auto!important;
overflow-y:hidden!important;
scrollbar-width:none!important;
}
.tf-home-v3 .tf-home-v3-trust .shell::-webkit-scrollbar{display:none!important}
.tf-home-v3 .tf-home-v3-trust span{
flex:0 0 auto!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
min-height:34px!important;
padding:0 13px!important;
border:1px solid #dce5ef!important;
border-radius:999px!important;
background:#f9fbfd!important;
color:#334f6d!important;
font-size:7.9px!important;
font-weight:900!important;
line-height:1!important;
white-space:nowrap!important;
box-shadow:0 3px 8px rgba(15,43,78,.035)!important;
}
.tf-home-v3 .tf-home-v3-trust span::before{
content:"✓"!important;
display:grid!important;
place-items:center!important;
width:17px!important;
height:17px!important;
margin-right:7px!important;
border-radius:50%!important;
background:#e8f7ef!important;
color:#17734b!important;
font-size:8px!important;
font-weight:950!important;
box-shadow:inset 0 0 0 1px rgba(23,115,75,.08)!important;
}
.tf-home-v3 .tf-home-v3-trust i{
flex:0 0 auto!important;
width:5px!important;
height:5px!important;
margin:0 2px!important;
border-radius:50%!important;
background:#efb21b!important;
box-shadow:0 0 0 4px rgba(239,178,27,.09)!important;
}
/* Tablet */
@media(max-width:1023px){
.tf-home-v3 .tf-home-v3-trust{
width:calc(100% - 20px)!important;
margin:10px auto 12px!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
justify-content:flex-start!important;
padding-inline:16px!important;
}
}
/* Mobile: compact premium rail + fixed top/bottom margins */
@media(max-width:767px){
.tf-home-v3 .tf-home-v3-trust{
width:calc(100% - 16px)!important;
margin:8px auto 10px!important;
border-radius:12px!important;
box-shadow:0 8px 22px rgba(12,36,70,.055)!important;
}
.tf-home-v3 .tf-home-v3-trust::before{
width:3px!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
min-height:46px!important;
justify-content:flex-start!important;
gap:6px!important;
padding:6px 9px 6px 13px!important;
scroll-padding-inline:13px!important;
-webkit-overflow-scrolling:touch!important;
}
.tf-home-v3 .tf-home-v3-trust span{
min-height:28px!important;
padding:0 9px!important;
font-size:6.4px!important;
box-shadow:none!important;
}
.tf-home-v3 .tf-home-v3-trust span::before{
width:13px!important;
height:13px!important;
margin-right:5px!important;
font-size:6px!important;
}
.tf-home-v3 .tf-home-v3-trust i{
width:4px!important;
height:4px!important;
margin:0 1px!important;
box-shadow:none!important;
}
/* normalize next section spacing after trust rail */
.tf-home-v3 .tf-home-v3-trust + section,
.tf-home-v3 .tf-home-v3-trust + .section,
.tf-home-v3 .tf-home-v3-trust + [class*="section"]{
margin-top:0!important;
}
}
/* Very small phones */
@media(max-width:390px){
.tf-home-v3 .tf-home-v3-trust{
width:calc(100% - 12px)!important;
margin:7px auto 8px!important;
}
.tf-home-v3 .tf-home-v3-trust .shell{
min-height:42px!important;
gap:5px!important;
padding:5px 7px 5px 11px!important;
}
.tf-home-v3 .tf-home-v3-trust span{
min-height:26px!important;
padding:0 8px!important;
font-size:5.9px!important;
}
.tf-home-v3 .tf-home-v3-trust span::before{
width:12px!important;
height:12px!important;
margin-right:4px!important;
}
}
/* ===== mobile-commerce-overlay-18.4.266.css ===== */
/* Sprint 642 — Mobile Commerce Overlay System
Coordinates cart, AI, bottom nav, RFQ and safe content area.
Mobile-only. Desktop behavior remains untouched. */
@media(max-width:767px){
:root{
--tf-mobile-safe:env(safe-area-inset-bottom,0px);
--tf-mobile-nav-h:70px;
--tf-mobile-edge:12px;
--tf-mobile-gap:10px;
--tf-mobile-ai:56px;
--tf-mobile-rfq-w:72px;
--tf-mobile-cart-h:84px;
}
html,body{
max-width:100%!important;
overflow-x:hidden!important;
}
/*
* Reserve one coordinated bottom zone.
* Prevents page content and category cards from hiding beneath fixed UI.
*/
body{
padding-bottom:calc(var(--tf-mobile-nav-h) + var(--tf-mobile-cart-h) + 34px + var(--tf-mobile-safe))!important;
}
/* ---------------------------------------------------------
Bottom navigation shell
--------------------------------------------------------- */
:is(
.mobile-bottom-nav,.tf-mobile-bottom-nav,.app-bottom-nav,.bottom-nav,
.mobile-nav,.mobile-tabbar,.mobile-tab-bar,[data-mobile-bottom-nav]
){
position:fixed!important;
z-index:1160!important;
left:var(--tf-mobile-edge)!important;
right:calc(var(--tf-mobile-edge) + var(--tf-mobile-rfq-w) + 8px)!important;
bottom:calc(10px + var(--tf-mobile-safe))!important;
width:auto!important;
height:var(--tf-mobile-nav-h)!important;
min-height:var(--tf-mobile-nav-h)!important;
max-height:var(--tf-mobile-nav-h)!important;
margin:0!important;
padding:6px 8px!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
align-items:stretch!important;
gap:2px!important;
overflow:hidden!important;
border:1px solid #d8e2ed!important;
border-radius:22px!important;
background:rgba(255,255,255,.98)!important;
box-shadow:0 14px 38px rgba(11,36,69,.15)!important;
backdrop-filter:blur(14px)!important;
}
:is(
.mobile-bottom-nav,.tf-mobile-bottom-nav,.app-bottom-nav,.bottom-nav,
.mobile-nav,.mobile-tabbar,.mobile-tab-bar,[data-mobile-bottom-nav]
) :is(a,button){
min-width:0!important;
min-height:0!important;
height:100%!important;
padding:5px 4px!important;
margin:0!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:3px!important;
border:0!important;
border-radius:16px!important;
background:transparent!important;
color:#102e52!important;
box-shadow:none!important;
font-size:10px!important;
font-weight:850!important;
line-height:1.05!important;
text-align:center!important;
}
:is(
.mobile-bottom-nav,.tf-mobile-bottom-nav,.app-bottom-nav,.bottom-nav,
.mobile-nav,.mobile-tabbar,.mobile-tab-bar,[data-mobile-bottom-nav]
) :is(a,button).active,
:is(
.mobile-bottom-nav,.tf-mobile-bottom-nav,.app-bottom-nav,.bottom-nav,
.mobile-nav,.mobile-tabbar,.mobile-tab-bar,[data-mobile-bottom-nav]
) :is(a,button)[aria-current="page"]{
background:#fff4ce!important;
color:#0d3974!important;
}
:is(
.mobile-bottom-nav,.tf-mobile-bottom-nav,.app-bottom-nav,.bottom-nav,
.mobile-nav,.mobile-tabbar,.mobile-tab-bar,[data-mobile-bottom-nav]
) :is(svg,.icon){
width:24px!important;
height:24px!important;
flex:0 0 auto!important;
}
/* ---------------------------------------------------------
RFQ fixed action — dedicated right-side slot
--------------------------------------------------------- */
:is(.mobile-rfq,.rfq-fab,.mobile-rfq-fab,[data-mobile-rfq]){
position:fixed!important;
z-index:1170!important;
right:var(--tf-mobile-edge)!important;
bottom:calc(10px + var(--tf-mobile-safe))!important;
width:var(--tf-mobile-rfq-w)!important;
height:var(--tf-mobile-nav-h)!important;
min-width:var(--tf-mobile-rfq-w)!important;
min-height:var(--tf-mobile-nav-h)!important;
margin:0!important;
padding:5px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
gap:3px!important;
border:2px solid #f3bd36!important;
border-radius:22px!important;
background:#ffbf2f!important;
color:#0b2c54!important;
box-shadow:0 14px 34px rgba(11,36,69,.16)!important;
font-size:10px!important;
font-weight:900!important;
}
:is(.mobile-rfq,.rfq-fab,.mobile-rfq-fab,[data-mobile-rfq]) :is(svg,.icon){
width:25px!important;
height:25px!important;
}
/* ---------------------------------------------------------
Compact floating cart bar
--------------------------------------------------------- */
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
){
position:fixed!important;
z-index:1140!important;
left:var(--tf-mobile-edge)!important;
right:var(--tf-mobile-edge)!important;
bottom:calc(var(--tf-mobile-nav-h) + 22px + var(--tf-mobile-safe))!important;
width:auto!important;
min-width:0!important;
height:var(--tf-mobile-cart-h)!important;
min-height:var(--tf-mobile-cart-h)!important;
max-height:var(--tf-mobile-cart-h)!important;
margin:0!important;
padding:10px 76px 10px 12px!important;
display:grid!important;
grid-template-columns:48px minmax(0,1fr) auto!important;
align-items:center!important;
gap:10px!important;
overflow:hidden!important;
border:1px solid #d9e3ed!important;
border-radius:20px!important;
background:rgba(255,255,255,.985)!important;
box-shadow:0 16px 40px rgba(11,36,69,.15)!important;
backdrop-filter:blur(12px)!important;
color:#162e4c!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(.cart-icon,.icon-cart,.cart-badge-icon){
width:48px!important;
height:48px!important;
min-width:48px!important;
min-height:48px!important;
display:grid!important;
place-items:center!important;
border-radius:50%!important;
background:#fff4ce!important;
color:#10335e!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(.cart-icon,.icon-cart,.cart-badge-icon) svg{
width:24px!important;
height:24px!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(h2,h3,strong,.title,.cart-title){
margin:0!important;
color:#172f4f!important;
font-size:16px!important;
line-height:1.1!important;
font-weight:900!important;
white-space:nowrap!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(p,small,.subtitle,.cart-subtitle){
margin:3px 0 0!important;
color:#70839a!important;
font-size:11px!important;
line-height:1.2!important;
white-space:nowrap!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(.view-cart,.cart-cta,a[href*="/cart"],button[data-view-cart]){
min-width:104px!important;
min-height:48px!important;
padding:0 14px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border:0!important;
border-radius:15px!important;
background:#0e3979!important;
color:#fff!important;
font-size:12px!important;
font-weight:900!important;
text-decoration:none!important;
white-space:nowrap!important;
}
/* Kill legacy giant cart artwork/panel dimensions */
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(.cart-illustration,.cart-hero,.large-cart-icon){
display:none!important;
}
/* ---------------------------------------------------------
AI assistant — small circular/rounded fab above cart
--------------------------------------------------------- */
:is(
.ai-fab,.tf-ai-fab,.ai-chat-fab,.floating-ai,.ai-assistant-fab,
.mobile-ai-fab,[data-ai-fab],[data-ai-chat-toggle]
){
position:fixed!important;
z-index:1180!important;
right:calc(var(--tf-mobile-edge) + 8px)!important;
bottom:calc(var(--tf-mobile-nav-h) + var(--tf-mobile-cart-h) + 32px + var(--tf-mobile-safe))!important;
width:var(--tf-mobile-ai)!important;
height:var(--tf-mobile-ai)!important;
min-width:var(--tf-mobile-ai)!important;
min-height:var(--tf-mobile-ai)!important;
max-width:var(--tf-mobile-ai)!important;
max-height:var(--tf-mobile-ai)!important;
padding:0!important;
margin:0!important;
display:grid!important;
place-items:center!important;
border:2px solid #fff!important;
border-radius:18px!important;
background:#0f57b8!important;
color:#fff!important;
box-shadow:0 12px 30px rgba(7,54,117,.25)!important;
overflow:visible!important;
font-size:0!important;
}
:is(
.ai-fab,.tf-ai-fab,.ai-chat-fab,.floating-ai,.ai-assistant-fab,
.mobile-ai-fab,[data-ai-fab],[data-ai-chat-toggle]
) :is(svg,.icon){
width:25px!important;
height:25px!important;
}
:is(
.ai-fab,.tf-ai-fab,.ai-chat-fab,.floating-ai,.ai-assistant-fab,
.mobile-ai-fab,[data-ai-fab],[data-ai-chat-toggle]
)::after{
content:"AI"!important;
position:absolute!important;
right:6px!important;
bottom:5px!important;
color:#fff!important;
font-size:9px!important;
font-weight:900!important;
line-height:1!important;
}
/* online dot */
:is(
.ai-fab,.tf-ai-fab,.ai-chat-fab,.floating-ai,.ai-assistant-fab,
.mobile-ai-fab,[data-ai-fab],[data-ai-chat-toggle]
)::before{
content:""!important;
position:absolute!important;
right:-1px!important;
top:-1px!important;
width:10px!important;
height:10px!important;
border:2px solid #fff!important;
border-radius:50%!important;
background:#22c77a!important;
}
/* ---------------------------------------------------------
AI chat drawer/panel
--------------------------------------------------------- */
:is(.ai-chat-panel,.ai-chat-drawer,.tf-ai-chat-panel,.mobile-ai-chat,[data-ai-chat-panel]){
position:fixed!important;
z-index:1300!important;
left:var(--tf-mobile-edge)!important;
right:var(--tf-mobile-edge)!important;
bottom:calc(var(--tf-mobile-nav-h) + 18px + var(--tf-mobile-safe))!important;
width:auto!important;
max-width:none!important;
max-height:min(68vh,560px)!important;
border:1px solid #d6e1ec!important;
border-radius:20px!important;
background:#fff!important;
box-shadow:0 22px 58px rgba(8,32,62,.22)!important;
overflow:hidden!important;
}
/* ---------------------------------------------------------
Product/category content must never sit behind overlays
--------------------------------------------------------- */
main,
.site-main,
.page-content,
.category-page,
.subcategory-page,
.products-page,
.tf-home-v3{
min-width:0!important;
}
}
/* Small phones */
@media(max-width:390px){
:root{
--tf-mobile-nav-h:66px;
--tf-mobile-edge:8px;
--tf-mobile-ai:52px;
--tf-mobile-rfq-w:68px;
--tf-mobile-cart-h:78px;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
){
padding:8px 64px 8px 10px!important;
grid-template-columns:42px minmax(0,1fr) auto!important;
gap:8px!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(.cart-icon,.icon-cart,.cart-badge-icon){
width:42px!important;
height:42px!important;
min-width:42px!important;
min-height:42px!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(h2,h3,strong,.title,.cart-title){
font-size:14px!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(p,small,.subtitle,.cart-subtitle){
font-size:10px!important;
}
:is(
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
) :is(.view-cart,.cart-cta,a[href*="/cart"],button[data-view-cart]){
min-width:86px!important;
min-height:44px!important;
padding:0 10px!important;
font-size:11px!important;
}
}
/* ===== cart-page-premium-18.4.267.css ===== */
/* Sprint 643 — Premium Cart Page Redesign */
body.tf-cart-route :is(
.mobile-bottom-nav,.tf-mobile-bottom-nav,.app-bottom-nav,.bottom-nav,
.mobile-nav,.mobile-tabbar,.mobile-tab-bar,[data-mobile-bottom-nav],
.mobile-rfq,.rfq-fab,.mobile-rfq-fab,[data-mobile-rfq],
.ai-fab,.tf-ai-fab,.ai-chat-fab,.floating-ai,.ai-assistant-fab,
.mobile-ai-fab,[data-ai-fab],[data-ai-chat-toggle],
.mobile-cart-bar,.mobile-cart-summary,.floating-cart,.floating-cart-bar,
.quick-cart-bar,.cart-ready-bar,.mobile-cart-dock,[data-mobile-cart-bar]
){display:none!important}
@media(max-width:767px){
body.tf-cart-route{padding-bottom:22px!important}
}
.tf-cart-page-643{
min-width:0!important;
padding:22px 0 44px!important;
color:#163252!important;
}
.tf-cart-page-643 :is(.cart-page,.cart-shell,.cart-container,.buyer-cart,.shopping-cart){
width:min(1240px,calc(100% - 32px))!important;
margin:0 auto!important;
}
.tf-cart-page-643 :is(.cart-hero,.cart-header,.page-hero){
display:flex!important;align-items:flex-end!important;justify-content:space-between!important;
gap:18px!important;padding:18px 20px!important;margin-bottom:14px!important;
border:1px solid #dbe5ef!important;border-radius:16px!important;
background:linear-gradient(180deg,#fff,#f8fbff)!important;
box-shadow:0 8px 24px rgba(13,41,73,.05)!important;
}
.tf-cart-page-643 :is(.cart-hero,.cart-header,.page-hero) h1{
margin:4px 0 6px!important;color:#12335f!important;font-size:34px!important;line-height:1.05!important;
letter-spacing:-.035em!important;
}
.tf-cart-page-643 :is(.cart-hero,.cart-header,.page-hero) p{
margin:0!important;color:#71849a!important;font-size:13px!important;line-height:1.45!important;
}
.tf-cart-page-643 :is(.cart-kicker,.eyebrow,.page-kicker){
color:#1768cf!important;font-size:10px!important;font-weight:900!important;letter-spacing:.1em!important;text-transform:uppercase!important;
}
.tf-cart-page-643 :is(.clear-cart,.clear-cart-btn,button[name*="clear"]){
min-height:40px!important;padding:0 15px!important;border:1px solid #d5dfeb!important;border-radius:10px!important;
background:#fff!important;color:#173250!important;font-size:12px!important;font-weight:850!important;
}
.tf-cart-page-643 :is(.cart-layout,.cart-grid,.cart-content-grid){
display:grid!important;grid-template-columns:minmax(0,1.65fr) minmax(320px,.8fr)!important;
gap:16px!important;align-items:start!important;
}
.tf-cart-page-643 :is(.cart-items,.cart-list,.cart-products){display:grid!important;gap:12px!important}
.tf-cart-page-643 :is(.cart-group,.seller-cart-group,.cart-card,.cart-item-card){
overflow:hidden!important;border:1px solid #dbe5ef!important;border-radius:14px!important;background:#fff!important;
box-shadow:0 7px 20px rgba(13,41,73,.04)!important;
}
.tf-cart-page-643 :is(.cart-group-head,.seller-head,.cart-seller-head){
display:flex!important;align-items:center!important;justify-content:space-between!important;gap:10px!important;
min-height:48px!important;padding:10px 13px!important;border-bottom:1px solid #e8eef4!important;background:#f8fafc!important;
}
.tf-cart-page-643 :is(.verified,.verified-badge,.seller-verified){
display:inline-flex!important;align-items:center!important;gap:5px!important;min-height:24px!important;padding:0 8px!important;
border-radius:999px!important;background:#eaf8f1!important;color:#17744c!important;font-size:10px!important;font-weight:900!important;
}
.tf-cart-page-643 :is(.cart-item,.product-row,.cart-product-row){
display:grid!important;grid-template-columns:104px minmax(0,1fr) auto!important;gap:14px!important;align-items:center!important;
padding:14px!important;border-bottom:1px solid #edf2f6!important;
}
.tf-cart-page-643 :is(.cart-item,.product-row,.cart-product-row):last-child{border-bottom:0!important}
.tf-cart-page-643 :is(.cart-item-image,.product-image,.cart-product-image) img{
width:104px!important;height:104px!important;object-fit:contain!important;border:1px solid #e0e7ef!important;
border-radius:11px!important;background:#f8fafc!important;
}
.tf-cart-page-643 :is(.cart-item h2,.cart-item h3,.product-title,.cart-product-title){
margin:0 0 6px!important;color:#173250!important;font-size:16px!important;line-height:1.25!important;
}
.tf-cart-page-643 :is(.cart-meta,.product-meta,.item-meta){
display:flex!important;flex-wrap:wrap!important;gap:6px!important;margin-top:7px!important;
}
.tf-cart-page-643 :is(.cart-meta,.product-meta,.item-meta)>*{
display:inline-flex!important;align-items:center!important;min-height:24px!important;padding:0 8px!important;
border:1px solid #e0e7ef!important;border-radius:999px!important;background:#f8fafc!important;
color:#687b91!important;font-size:10px!important;
}
.tf-cart-page-643 :is(.cart-item-actions,.item-actions,.qty-price){
display:flex!important;flex-direction:column!important;align-items:flex-end!important;gap:10px!important;min-width:160px!important;
}
.tf-cart-page-643 :is(.qty-control,.quantity-control,.quantity-picker){
display:inline-grid!important;grid-template-columns:34px 48px 34px!important;align-items:center!important;
overflow:hidden!important;border:1px solid #d6e0eb!important;border-radius:9px!important;background:#fff!important;
}
.tf-cart-page-643 :is(.qty-control,.quantity-control,.quantity-picker) :is(button,input){
width:100%!important;height:34px!important;min-height:34px!important;border:0!important;background:#fff!important;text-align:center!important;
}
.tf-cart-page-643 :is(.cart-price,.item-price,.product-price){
color:#102f57!important;font-size:18px!important;font-weight:900!important;
}
.tf-cart-page-643 :is(.remove-item,.remove-btn,.cart-remove){
color:#a64641!important;font-size:11px!important;font-weight:850!important;background:transparent!important;border:0!important;
}
.tf-cart-page-643 :is(.cart-summary,.order-summary,.checkout-summary){
position:sticky!important;top:84px!important;padding:16px!important;border:1px solid #dbe5ef!important;
border-radius:14px!important;background:#fff!important;box-shadow:0 10px 28px rgba(13,41,73,.06)!important;
}
.tf-cart-page-643 :is(.cart-summary,.order-summary,.checkout-summary) h2{
margin:0 0 13px!important;color:#153351!important;font-size:18px!important;
}
.tf-cart-page-643 :is(.summary-row,.total-row){
display:flex!important;align-items:center!important;justify-content:space-between!important;gap:12px!important;
min-height:38px!important;border-bottom:1px solid #edf2f6!important;color:#677b92!important;font-size:12px!important;
}
.tf-cart-page-643 :is(.grand-total,.summary-total){
min-height:50px!important;margin-top:6px!important;border-bottom:0!important;color:#173250!important;font-size:15px!important;font-weight:900!important;
}
.tf-cart-page-643 :is(.grand-total,.summary-total) strong{font-size:20px!important}
.tf-cart-page-643 :is(.checkout-btn,.proceed-checkout,.buy-checkout,button[name*="checkout"],a[href*="/checkout"]){
width:100%!important;min-height:48px!important;margin-top:14px!important;display:inline-flex!important;align-items:center!important;
justify-content:center!important;border:0!important;border-radius:10px!important;background:#ffbf2f!important;color:#092b54!important;
font-size:13px!important;font-weight:950!important;text-decoration:none!important;
box-shadow:0 8px 18px rgba(255,191,47,.20)!important;
}
.tf-cart-page-643 :is(.secure-note,.checkout-note,.buyer-protection){
margin-top:10px!important;color:#73859a!important;font-size:10px!important;line-height:1.4!important;
}
.tf-cart-page-643 :is(.empty-cart,.cart-empty){
padding:44px 20px!important;text-align:center!important;border:1px dashed #cfdae7!important;
border-radius:14px!important;background:#fff!important;
}
@media(max-width:767px){
.tf-cart-page-643{padding:12px 0 24px!important}
.tf-cart-page-643 :is(.cart-page,.cart-shell,.cart-container,.buyer-cart,.shopping-cart){width:calc(100% - 16px)!important}
.tf-cart-page-643 :is(.cart-hero,.cart-header,.page-hero){
display:block!important;padding:13px!important;margin-bottom:10px!important;border-radius:12px!important;
}
.tf-cart-page-643 :is(.cart-hero,.cart-header,.page-hero) h1{font-size:27px!important;margin-bottom:5px!important}
.tf-cart-page-643 :is(.cart-hero,.cart-header,.page-hero) p{font-size:11px!important}
.tf-cart-page-643 :is(.clear-cart,.clear-cart-btn,button[name*="clear"]){width:100%!important;margin-top:11px!important}
.tf-cart-page-643 :is(.cart-layout,.cart-grid,.cart-content-grid){grid-template-columns:1fr!important;gap:10px!important}
.tf-cart-page-643 :is(.cart-item,.product-row,.cart-product-row){
grid-template-columns:78px minmax(0,1fr)!important;gap:10px!important;padding:11px!important;
}
.tf-cart-page-643 :is(.cart-item-image,.product-image,.cart-product-image) img{width:78px!important;height:78px!important}
.tf-cart-page-643 :is(.cart-item h2,.cart-item h3,.product-title,.cart-product-title){font-size:13px!important}
.tf-cart-page-643 :is(.cart-item-actions,.item-actions,.qty-price){
grid-column:1/-1!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
min-width:0!important;width:100%!important;padding-top:8px!important;border-top:1px solid #edf2f6!important;
}
.tf-cart-page-643 :is(.qty-control,.quantity-control,.quantity-picker){grid-template-columns:32px 42px 32px!important}
.tf-cart-page-643 :is(.cart-price,.item-price,.product-price){font-size:16px!important}
.tf-cart-page-643 :is(.cart-summary,.order-summary,.checkout-summary){
position:static!important;top:auto!important;padding:14px!important;margin-top:2px!important;border-radius:12px!important;
}
.tf-cart-page-643 :is(.checkout-btn,.proceed-checkout,.buy-checkout,button[name*="checkout"],a[href*="/checkout"]){min-height:46px!important}
}
/* ===== cart-desktop-premium-18.4.268.css ===== */
/* Sprint 646 — Desktop Cart Full Width Premium Content
Desktop only. Mobile and global header remain unchanged. */
@media(min-width:1024px){
/* Wider full-width desktop canvas */
.cart-page-premium{
padding:34px 0 48px!important;
background:
radial-gradient(circle at 15% 0%,rgba(31,108,205,.045),transparent 28%),
linear-gradient(180deg,#f8fafc 0%,#f4f7fb 100%)!important;
}
.cart-page-premium>.shell{
width:calc(100% - 56px)!important;
max-width:1560px!important;
margin:0 auto!important;
}
/* Header/intro uses the available width better */
.cart-heading{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:24px!important;
padding:22px 24px!important;
margin:0 0 16px!important;
border:1px solid #dce5ef!important;
border-radius:16px!important;
background:#fff!important;
box-shadow:0 8px 24px rgba(14,44,78,.045)!important;
}
.cart-heading .eyebrow{
display:block!important;
margin-bottom:8px!important;
color:#1768cf!important;
font-size:9px!important;
font-weight:900!important;
letter-spacing:.12em!important;
}
.cart-heading h1{
margin:0 0 7px!important;
color:#11335e!important;
font-size:42px!important;
line-height:1!important;
letter-spacing:-.045em!important;
}
.cart-heading p{
max-width:760px!important;
margin:0!important;
color:#71849a!important;
font-size:13px!important;
line-height:1.5!important;
}
.compare-clear{
min-width:118px!important;
min-height:42px!important;
padding:0 16px!important;
border:1px solid #d6e0eb!important;
border-radius:10px!important;
background:#fff!important;
color:#153657!important;
font-size:11px!important;
font-weight:900!important;
box-shadow:0 4px 12px rgba(14,44,78,.025)!important;
}
/* Main cart uses almost full viewport */
.cart-layout{
display:grid!important;
grid-template-columns:minmax(0,2.45fr) minmax(360px,.78fr)!important;
gap:16px!important;
align-items:start!important;
}
.cart-list{
display:grid!important;
gap:12px!important;
}
/* Larger, denser product card */
.cart-item{
display:grid!important;
grid-template-columns:132px minmax(0,1fr) 210px!important;
align-items:center!important;
gap:20px!important;
min-height:190px!important;
padding:18px!important;
border:1px solid #dce6ef!important;
border-radius:15px!important;
background:#fff!important;
box-shadow:0 8px 22px rgba(14,44,78,.045)!important;
}
.cart-item-image{
display:grid!important;
place-items:center!important;
width:132px!important;
height:132px!important;
overflow:hidden!important;
border:1px solid #e1e8f0!important;
border-radius:12px!important;
background:#f8fafc!important;
}
.cart-item-image img{
width:100%!important;
height:100%!important;
padding:6px!important;
object-fit:contain!important;
}
.cart-item-copy{
min-width:0!important;
}
.cart-item-copy>span{
display:inline-flex!important;
align-items:center!important;
min-height:24px!important;
padding:0 8px!important;
margin-bottom:6px!important;
border-radius:999px!important;
background:#eaf8f1!important;
color:#17734c!important;
font-size:9px!important;
font-weight:900!important;
}
.cart-item-copy h2{
margin:0 0 7px!important;
color:#153759!important;
font-size:20px!important;
line-height:1.2!important;
}
.cart-item-copy h2 a{
color:inherit!important;
text-decoration:none!important;
}
.cart-item-copy>p{
margin:0!important;
color:#74879c!important;
font-size:11px!important;
line-height:1.45!important;
}
.cart-item-actions{
display:flex!important;
align-items:end!important;
gap:8px!important;
flex-wrap:wrap!important;
margin-top:16px!important;
}
.cart-item-actions form{
display:flex!important;
align-items:end!important;
gap:7px!important;
}
.cart-item-actions label{
display:grid!important;
gap:5px!important;
color:#526b84!important;
font-size:8px!important;
font-weight:900!important;
}
.cart-item-actions input[type=number]{
width:86px!important;
height:38px!important;
padding:0 10px!important;
border:1px solid #d6e0eb!important;
border-radius:9px!important;
background:#fff!important;
color:#173657!important;
font-size:11px!important;
}
.cart-item-actions button,
.cart-item-actions>a{
min-height:38px!important;
padding:0 13px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border:1px solid #d5e1ee!important;
border-radius:9px!important;
background:#f1f7fe!important;
color:#1762ba!important;
text-decoration:none!important;
font-size:9px!important;
font-weight:900!important;
}
.cart-item-actions>a{
border-color:#efd68b!important;
background:#fff8e2!important;
color:#775411!important;
}
.cart-item-price{
text-align:right!important;
padding-left:10px!important;
border-left:1px solid #edf1f5!important;
}
.cart-item-price strong{
display:block!important;
color:#12375f!important;
font-size:23px!important;
line-height:1.12!important;
}
.cart-item-price small{
display:block!important;
margin-top:6px!important;
color:#8191a3!important;
font-size:9px!important;
}
/* Richer order summary instead of empty white card */
.cart-summary{
position:sticky!important;
top:18px!important;
min-height:0!important;
padding:18px!important;
border:1px solid #dce6ef!important;
border-radius:15px!important;
background:#fff!important;
box-shadow:0 10px 28px rgba(14,44,78,.055)!important;
}
.cart-summary>span{
display:block!important;
margin-bottom:4px!important;
color:#1768cf!important;
font-size:8px!important;
font-weight:900!important;
letter-spacing:.11em!important;
text-transform:uppercase!important;
}
.cart-summary h2{
margin:0 0 12px!important;
color:#153555!important;
font-size:22px!important;
}
.cart-summary dl{
margin:0!important;
padding:8px 0!important;
border-top:1px solid #edf2f6!important;
border-bottom:1px solid #edf2f6!important;
}
.cart-summary dl>div{
display:flex!important;
align-items:flex-start!important;
justify-content:space-between!important;
gap:14px!important;
min-height:38px!important;
padding:9px 0!important;
}
.cart-summary dt{
color:#74869a!important;
font-size:10px!important;
}
.cart-summary dd{
margin:0!important;
color:#173656!important;
font-size:10px!important;
font-weight:900!important;
text-align:right!important;
}
.cart-summary>p{
margin:14px 0!important;
padding:12px!important;
border-radius:9px!important;
background:#f8fafc!important;
color:#71849a!important;
font-size:9px!important;
line-height:1.5!important;
}
.cart-summary .button{
width:100%!important;
min-height:46px!important;
margin-top:8px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
border-radius:10px!important;
text-decoration:none!important;
font-size:11px!important;
font-weight:900!important;
}
.cart-summary .button-gold{
border:0!important;
background:#ffbf2f!important;
color:#092b54!important;
box-shadow:0 8px 18px rgba(255,191,47,.20)!important;
}
.cart-summary .button-outline{
border:1px solid #cfdbe7!important;
background:#fff!important;
color:#173657!important;
}
.cart-summary .cart-continue{
display:block!important;
margin-top:11px!important;
color:#1768cf!important;
text-align:center!important;
text-decoration:none!important;
font-size:10px!important;
font-weight:850!important;
}
.cart-coupon{
margin:12px 0!important;
padding:12px!important;
border:1px solid #e0e8f0!important;
border-radius:10px!important;
background:#f8fafc!important;
}
.cart-coupon strong{
display:block!important;
margin-bottom:7px!important;
color:#173657!important;
font-size:10px!important;
}
.cart-coupon form{
display:flex!important;
gap:7px!important;
}
.cart-coupon input{
min-width:0!important;
flex:1!important;
height:38px!important;
padding:0 10px!important;
border:1px solid #d6e0eb!important;
border-radius:9px!important;
background:#fff!important;
}
.cart-coupon button{
min-height:38px!important;
padding:0 11px!important;
border:0!important;
border-radius:9px!important;
background:#1768cf!important;
color:#fff!important;
font-size:9px!important;
font-weight:900!important;
}
/* New useful content below cart */
.tf-cart-desktop-insights-646{
width:calc(100% - 56px)!important;
max-width:1560px!important;
margin:16px auto 0!important;
display:grid!important;
grid-template-columns:repeat(4,minmax(0,1fr))!important;
gap:10px!important;
}
.tf-cart-desktop-insights-646 article{
min-height:112px!important;
padding:15px!important;
display:grid!important;
grid-template-columns:34px minmax(0,1fr)!important;
align-items:start!important;
gap:11px!important;
border:1px solid #dce6ef!important;
border-radius:12px!important;
background:#fff!important;
box-shadow:0 6px 18px rgba(14,44,78,.035)!important;
}
.tf-cart-desktop-insights-646 article>span{
display:grid!important;
place-items:center!important;
width:34px!important;
height:34px!important;
border-radius:9px!important;
background:#eef5ff!important;
color:#1768cf!important;
font-size:10px!important;
font-weight:900!important;
}
.tf-cart-desktop-insights-646 strong{
display:block!important;
margin-bottom:5px!important;
color:#173656!important;
font-size:11px!important;
}
.tf-cart-desktop-insights-646 small{
display:block!important;
color:#74869a!important;
font-size:9px!important;
line-height:1.45!important;
}
}
/* Hide desktop-only supplemental content on mobile/tablet. */
@media(max-width:1023px){
.tf-cart-desktop-insights-646{display:none!important}
}
/* ===== cart-offers-sponsored-18.4.269.css ===== */
/* Sprint 647 — Cart Offers + Sponsored Premium Layer */
/* Desktop premium enhancements */
@media(min-width:1024px){
/* Dark offer cards create stronger visual hierarchy */
.tf-cart-offers-647{
display:grid!important;
grid-template-columns:1.15fr 1fr 1fr!important;
gap:10px!important;
margin:0 0 14px!important;
}
.tf-cart-offers-647 article{
position:relative!important;
overflow:hidden!important;
min-height:154px!important;
padding:18px!important;
border:1px solid rgba(255,255,255,.08)!important;
border-radius:14px!important;
background:
radial-gradient(circle at 88% 16%,rgba(255,194,58,.15),transparent 24%),
linear-gradient(145deg,#0b284b 0%,#123862 100%)!important;
color:#fff!important;
box-shadow:0 10px 28px rgba(10,37,71,.14)!important;
}
.tf-cart-offers-647 article.is-primary{
background:
radial-gradient(circle at 86% 18%,rgba(255,194,58,.23),transparent 26%),
linear-gradient(145deg,#08264a 0%,#0f3a70 100%)!important;
}
.tf-cart-offers-647 article::after{
content:""!important;
position:absolute!important;
width:120px!important;
height:120px!important;
right:-32px!important;
bottom:-44px!important;
border-radius:50%!important;
border:1px solid rgba(255,255,255,.08)!important;
}
.tf-cart-offers-647 span{
display:block!important;
margin-bottom:11px!important;
color:#ffc23a!important;
font-size:8px!important;
font-weight:900!important;
letter-spacing:.13em!important;
}
.tf-cart-offers-647 strong{
display:block!important;
max-width:24ch!important;
margin-bottom:7px!important;
color:#fff!important;
font-size:16px!important;
line-height:1.2!important;
}
.tf-cart-offers-647 small{
display:block!important;
max-width:46ch!important;
color:#b9c9dc!important;
font-size:9px!important;
line-height:1.45!important;
}
.tf-cart-offers-647 b{
position:absolute!important;
left:18px!important;
bottom:15px!important;
display:inline-flex!important;
align-items:center!important;
min-height:26px!important;
padding:0 9px!important;
border:1px solid rgba(255,194,58,.32)!important;
border-radius:999px!important;
background:rgba(255,194,58,.10)!important;
color:#ffd56f!important;
font-size:8px!important;
font-weight:900!important;
}
/* Make summary feel more commercial */
.cart-summary{
overflow:hidden!important;
}
.cart-summary::before{
content:"Secure sourcing summary"!important;
display:block!important;
margin:-18px -18px 16px!important;
padding:13px 18px!important;
background:linear-gradient(135deg,#0b2b53,#113c70)!important;
color:#fff!important;
font-size:10px!important;
font-weight:900!important;
letter-spacing:.03em!important;
}
.cart-summary .button-outline{
border-color:#e7be51!important;
background:#fff9e9!important;
color:#6c4a08!important;
}
/* Sponsored banner */
.tf-cart-sponsored-647{
width:calc(100% - 56px)!important;
max-width:1560px!important;
margin:16px auto 0!important;
display:grid!important;
grid-template-columns:minmax(0,1.55fr) minmax(360px,.75fr)!important;
gap:18px!important;
align-items:center!important;
min-height:210px!important;
padding:24px 26px!important;
overflow:hidden!important;
border:1px solid #0f3158!important;
border-radius:16px!important;
background:
radial-gradient(circle at 82% 8%,rgba(255,194,58,.20),transparent 22%),
radial-gradient(circle at 55% 120%,rgba(41,111,202,.22),transparent 34%),
linear-gradient(135deg,#071f3e 0%,#0b2e58 55%,#113d70 100%)!important;
box-shadow:0 14px 36px rgba(7,31,62,.18)!important;
}
.tf-cart-sponsored-copy span{
display:block!important;
margin-bottom:8px!important;
color:#ffc23a!important;
font-size:8px!important;
font-weight:900!important;
letter-spacing:.13em!important;
}
.tf-cart-sponsored-copy h2{
max-width:18ch!important;
margin:0 0 9px!important;
color:#fff!important;
font-size:27px!important;
line-height:1.08!important;
letter-spacing:-.03em!important;
}
.tf-cart-sponsored-copy p{
max-width:64ch!important;
margin:0 0 16px!important;
color:#b9c9dc!important;
font-size:10px!important;
line-height:1.5!important;
}
.tf-cart-sponsored-copy>div{
display:flex!important;
gap:8px!important;
}
.tf-cart-sponsored-copy a{
min-height:38px!important;
padding:0 13px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border:1px solid #ffc23a!important;
border-radius:9px!important;
background:#ffc23a!important;
color:#092b54!important;
text-decoration:none!important;
font-size:9px!important;
font-weight:900!important;
}
.tf-cart-sponsored-copy a.secondary{
border-color:rgba(255,255,255,.22)!important;
background:rgba(255,255,255,.06)!important;
color:#fff!important;
}
.tf-cart-sponsored-stats{
display:grid!important;
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-cart-sponsored-stats article{
min-height:100px!important;
padding:14px!important;
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
border:1px solid rgba(255,255,255,.12)!important;
border-radius:12px!important;
background:rgba(255,255,255,.06)!important;
backdrop-filter:blur(8px)!important;
}
.tf-cart-sponsored-stats strong{
color:#fff!important;
font-size:21px!important;
line-height:1!important;
}
.tf-cart-sponsored-stats small{
display:block!important;
margin-top:6px!important;
color:#b9c9dc!important;
font-size:8px!important;
line-height:1.3!important;
}
/* Existing four cards become tighter and more premium */
.tf-cart-desktop-insights-646{
gap:9px!important;
}
.tf-cart-desktop-insights-646 article{
min-height:104px!important;
background:linear-gradient(180deg,#fff,#f8fbff)!important;
}
.tf-cart-desktop-insights-646 article:hover{
border-color:#c4d6e8!important;
box-shadow:0 8px 22px rgba(14,44,78,.055)!important;
}
}
/* Tablet/mobile: preserve current cart, only make new promo content responsive if it appears */
@media(max-width:1023px){
.tf-cart-offers-647{
display:none!important;
}
.tf-cart-sponsored-647{
display:none!important;
}
}
/* ===== cart-solid-promos-18.4.270.css ===== */
/* Sprint 648 — compact cart flow + solid promotional cards
Desktop-only visual override. No gradients. */
@media (min-width:1024px){
/* Remove the oversized vertical/dead area between cart and promotions. */
body.tf-cart-route .tf-cart-page-643,
body.tf-cart-route main,
body.tf-cart-route .main-content{
min-height:0!important;
}
body.tf-cart-route .cart-layout{
align-items:start!important;
margin-bottom:14px!important;
}
body.tf-cart-route .cart-items,
body.tf-cart-route .cart-items-list,
body.tf-cart-route .cart-list{
min-height:0!important;
height:auto!important;
}
/* Solid promotional offer cards: warm yellow / coral / navy. */
.tf-cart-offers-647{
gap:12px!important;
margin:0 0 14px!important;
}
.tf-cart-offers-647 article,
.tf-cart-offers-647 article.is-primary{
min-height:148px!important;
padding:18px 20px!important;
border-radius:16px!important;
box-shadow:0 10px 24px rgba(12,38,70,.10)!important;
background-image:none!important;
}
.tf-cart-offers-647 article:nth-child(1){
background:#fff0b8!important;
border:1px solid #f0d36d!important;
color:#102b4f!important;
}
.tf-cart-offers-647 article:nth-child(2){
background:#d95757!important;
border:1px solid #c84b4b!important;
color:#fff!important;
}
.tf-cart-offers-647 article:nth-child(3){
background:#10365f!important;
border:1px solid #10365f!important;
color:#fff!important;
}
.tf-cart-offers-647 article::after{display:none!important;}
.tf-cart-offers-647 article:nth-child(1) span{color:#7b5600!important;}
.tf-cart-offers-647 article:nth-child(1) strong{color:#102b4f!important;}
.tf-cart-offers-647 article:nth-child(1) small{color:#52647b!important;}
.tf-cart-offers-647 article:nth-child(1) b{
color:#102b4f!important;
border-color:#d2aa2e!important;
background:#fff8df!important;
}
.tf-cart-offers-647 article:nth-child(2) span,
.tf-cart-offers-647 article:nth-child(3) span{color:#ffe58a!important;}
.tf-cart-offers-647 article:nth-child(2) strong,
.tf-cart-offers-647 article:nth-child(3) strong{color:#fff!important;}
.tf-cart-offers-647 article:nth-child(2) small,
.tf-cart-offers-647 article:nth-child(3) small{color:rgba(255,255,255,.82)!important;}
.tf-cart-offers-647 article:nth-child(2) b,
.tf-cart-offers-647 article:nth-child(3) b{
color:#fff!important;
border-color:rgba(255,255,255,.50)!important;
background:rgba(255,255,255,.10)!important;
}
/* Sponsored area follows immediately after cart, with solid card styling. */
.tf-cart-sponsored-647{
width:calc(100% - 56px)!important;
max-width:none!important;
min-height:190px!important;
margin:14px auto 14px!important;
padding:24px 28px!important;
border:1px solid #efcf6a!important;
border-radius:18px!important;
background:#fff0b8!important;
background-image:none!important;
box-shadow:0 12px 28px rgba(30,46,70,.09)!important;
}
.tf-cart-sponsored-copy span{color:#8a5b00!important;}
.tf-cart-sponsored-copy h2{
color:#172b46!important;
font-size:28px!important;
}
.tf-cart-sponsored-copy p{color:#53647a!important;}
.tf-cart-sponsored-copy a{
border-color:#10365f!important;
background:#10365f!important;
color:#fff!important;
}
.tf-cart-sponsored-copy a.secondary{
border-color:#b9942d!important;
background:#fff8df!important;
color:#17304f!important;
}
.tf-cart-sponsored-stats article{
min-height:100px!important;
border:1px solid #e2c45f!important;
background:#fff8df!important;
backdrop-filter:none!important;
}
.tf-cart-sponsored-stats strong{color:#17304f!important;}
.tf-cart-sponsored-stats small{color:#66758a!important;}
/* Compact lower information cards; no artificial bottom gap. */
.tf-cart-desktop-insights-646{
margin-top:12px!important;
margin-bottom:22px!important;
}
.tf-cart-desktop-insights-646 article{
min-height:96px!important;
background:#fff!important;
background-image:none!important;
}
}
/* New desktop promos remain hidden on tablet/mobile as in previous sprint. */
@media (max-width:1023px){
.tf-cart-offers-647,
.tf-cart-sponsored-647{display:none!important;}
}
/* ===== cart-promo-mobile-dock-fix-18.4.271.css ===== */
/* Sprint 649
1) Fix cart promo text/button overlap.
2) Make sponsored section more visually premium using solid colors only.
3) Fix ACTUAL mobile cart dock classes from app.php:
.tf-mobile-market-dock / .tf-mobile-cart-float
*/
/* ============================================================
DESKTOP CART PROMOS
============================================================ */
@media(min-width:1024px){
/* The previous CTA was absolute-positioned and could collide with copy.
Make every card a real vertical layout instead. */
.tf-cart-offers-647 article,
.tf-cart-offers-647 article.is-primary{
min-height:172px!important;
height:auto!important;
display:flex!important;
flex-direction:column!important;
align-items:flex-start!important;
justify-content:flex-start!important;
padding:18px 20px!important;
overflow:hidden!important;
}
.tf-cart-offers-647 article strong{
max-width:27ch!important;
margin:0 0 7px!important;
font-size:16px!important;
line-height:1.2!important;
}
.tf-cart-offers-647 article small{
max-width:52ch!important;
margin:0!important;
padding:0!important;
font-size:9px!important;
line-height:1.48!important;
}
.tf-cart-offers-647 article b{
position:static!important;
left:auto!important;
right:auto!important;
top:auto!important;
bottom:auto!important;
flex:0 0 auto!important;
margin-top:auto!important;
transform:none!important;
}
/* Attractive sponsored block, still solid-color only. */
.tf-cart-sponsored-647{
position:relative!important;
grid-template-columns:minmax(0,1.38fr) minmax(410px,.86fr)!important;
gap:20px!important;
min-height:210px!important;
padding:26px 28px!important;
border:1px solid #efcf6a!important;
border-radius:18px!important;
background:#fff0b8!important;
background-image:none!important;
overflow:hidden!important;
}
/* solid decorative panel, not gradient */
.tf-cart-sponsored-647::after{
content:"SPONSORED"!important;
position:absolute!important;
right:20px!important;
top:18px!important;
display:inline-flex!important;
align-items:center!important;
min-height:25px!important;
padding:0 9px!important;
border:1px solid #143c68!important;
border-radius:999px!important;
background:#143c68!important;
color:#fff!important;
font-size:7px!important;
font-weight:900!important;
letter-spacing:.11em!important;
}
.tf-cart-sponsored-copy{
max-width:720px!important;
padding-right:18px!important;
}
.tf-cart-sponsored-copy h2{
max-width:22ch!important;
margin-bottom:10px!important;
font-size:30px!important;
line-height:1.05!important;
}
.tf-cart-sponsored-copy p{
max-width:70ch!important;
margin-bottom:18px!important;
font-size:10px!important;
line-height:1.55!important;
}
.tf-cart-sponsored-copy>div{
gap:9px!important;
}
.tf-cart-sponsored-copy a{
min-height:41px!important;
padding:0 15px!important;
border-radius:10px!important;
}
/* Stats become three distinct solid marketplace cards */
.tf-cart-sponsored-stats{
align-self:stretch!important;
grid-template-columns:1fr!important;
grid-template-rows:repeat(3,1fr)!important;
gap:8px!important;
padding-top:34px!important;
}
.tf-cart-sponsored-stats article{
min-height:0!important;
padding:12px 15px!important;
display:grid!important;
grid-template-columns:86px minmax(0,1fr)!important;
align-items:center!important;
gap:10px!important;
border-radius:11px!important;
box-shadow:none!important;
}
.tf-cart-sponsored-stats article:nth-child(1){
border:1px solid #123b68!important;
background:#123b68!important;
}
.tf-cart-sponsored-stats article:nth-child(2){
border:1px solid #d95757!important;
background:#d95757!important;
}
.tf-cart-sponsored-stats article:nth-child(3){
border:1px solid #efc64e!important;
background:#fff8df!important;
}
.tf-cart-sponsored-stats article:nth-child(1) strong,
.tf-cart-sponsored-stats article:nth-child(2) strong{
color:#fff!important;
}
.tf-cart-sponsored-stats article:nth-child(1) small,
.tf-cart-sponsored-stats article:nth-child(2) small{
color:rgba(255,255,255,.82)!important;
}
.tf-cart-sponsored-stats article:nth-child(3) strong{
color:#17304f!important;
}
.tf-cart-sponsored-stats article:nth-child(3) small{
color:#66758a!important;
}
.tf-cart-sponsored-stats strong{
font-size:20px!important;
line-height:1!important;
}
.tf-cart-sponsored-stats small{
margin:0!important;
font-size:8px!important;
}
/* lower benefit row a little richer */
.tf-cart-desktop-insights-646 article{
position:relative!important;
overflow:hidden!important;
border-top:3px solid #1768cf!important;
}
.tf-cart-desktop-insights-646 article:nth-child(2){
border-top-color:#d95757!important;
}
.tf-cart-desktop-insights-646 article:nth-child(3){
border-top-color:#e7b128!important;
}
.tf-cart-desktop-insights-646 article:nth-child(4){
border-top-color:#143c68!important;
}
}
/* ============================================================
MOBILE: ACTUAL MARKET DOCK / CART FLOAT
============================================================ */
@media(max-width:767px){
/*
* Important: child elements are explicitly isolated from generic
* cart/product SVG and anchor rules. This fixes the giant black cart.
*/
.tf-mobile-market-dock{
left:8px!important;
right:8px!important;
bottom:8px!important;
gap:7px!important;
width:auto!important;
height:auto!important;
min-height:0!important;
max-height:none!important;
}
.tf-mobile-cart-float{
width:100%!important;
min-width:0!important;
height:58px!important;
min-height:58px!important;
max-height:58px!important;
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:center!important;
gap:8px!important;
margin:0!important;
padding:7px 8px 7px 10px!important;
overflow:hidden!important;
border:1px solid #d9e3ed!important;
border-radius:17px!important;
background:#fff!important;
box-shadow:0 12px 30px rgba(11,31,58,.15)!important;
}
.tf-mobile-cart-float-copy{
min-width:0!important;
display:grid!important;
grid-template-columns:38px minmax(0,1fr)!important;
align-items:center!important;
gap:8px!important;
margin:0!important;
padding:0!important;
}
.tf-mobile-cart-float-copy>span{
display:grid!important;
place-items:center!important;
width:38px!important;
min-width:38px!important;
max-width:38px!important;
height:38px!important;
min-height:38px!important;
max-height:38px!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
border-radius:11px!important;
background:#fff4cf!important;
color:#10355f!important;
}
.tf-mobile-cart-float-copy>span>svg{
display:block!important;
width:21px!important;
min-width:21px!important;
max-width:21px!important;
height:21px!important;
min-height:21px!important;
max-height:21px!important;
margin:0!important;
padding:0!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.9!important;
stroke-linecap:round!important;
stroke-linejoin:round!important;
transform:none!important;
}
.tf-mobile-cart-float-copy>div{
min-width:0!important;
margin:0!important;
padding:0!important;
}
.tf-mobile-cart-float-copy strong{
display:block!important;
max-width:100%!important;
margin:0!important;
padding:0!important;
overflow:hidden!important;
color:#173250!important;
font-size:12px!important;
font-weight:900!important;
line-height:1.05!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-mobile-cart-float-copy small{
display:block!important;
max-width:100%!important;
margin:3px 0 0!important;
padding:0!important;
overflow:hidden!important;
color:#71849a!important;
font-size:8px!important;
font-weight:650!important;
line-height:1!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-mobile-cart-float>a{
position:static!important;
width:auto!important;
min-width:88px!important;
max-width:110px!important;
height:40px!important;
min-height:40px!important;
max-height:40px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:4px!important;
margin:0!important;
padding:0 10px!important;
overflow:hidden!important;
border:1px solid #123f79!important;
border-radius:11px!important;
background:#123f79!important;
color:#fff!important;
box-shadow:none!important;
text-decoration:none!important;
font-size:9px!important;
font-weight:900!important;
line-height:1!important;
white-space:nowrap!important;
transform:none!important;
}
.tf-mobile-cart-float>a b{
display:grid!important;
place-items:center!important;
width:18px!important;
min-width:18px!important;
max-width:18px!important;
height:18px!important;
min-height:18px!important;
max-height:18px!important;
margin:0!important;
padding:0!important;
border-radius:50%!important;
background:#ffbf2f!important;
color:#0b2b52!important;
font-size:8px!important;
line-height:1!important;
}
/* Keep dock navigation stable underneath compact cart rail */
.tf-mobile-market-dock-row{
width:100%!important;
min-width:0!important;
grid-template-columns:minmax(0,1fr) 68px!important;
gap:7px!important;
}
.tf-mobile-market-pill{
min-height:64px!important;
max-height:64px!important;
border-radius:19px!important;
}
.tf-mobile-rfq-side{
width:68px!important;
min-width:68px!important;
max-width:68px!important;
height:68px!important;
min-height:68px!important;
max-height:68px!important;
border-radius:19px!important;
}
}
@media(max-width:390px){
.tf-mobile-cart-float{
height:54px!important;
min-height:54px!important;
max-height:54px!important;
}
.tf-mobile-cart-float-copy{
grid-template-columns:34px minmax(0,1fr)!important;
gap:7px!important;
}
.tf-mobile-cart-float-copy>span{
width:34px!important;
min-width:34px!important;
max-width:34px!important;
height:34px!important;
min-height:34px!important;
max-height:34px!important;
}
.tf-mobile-cart-float-copy>span>svg{
width:19px!important;
min-width:19px!important;
max-width:19px!important;
height:19px!important;
min-height:19px!important;
max-height:19px!important;
}
.tf-mobile-cart-float-copy strong{font-size:11px!important}
.tf-mobile-cart-float-copy small{font-size:7px!important}
.tf-mobile-cart-float>a{
min-width:78px!important;
height:36px!important;
min-height:36px!important;
max-height:36px!important;
padding:0 8px!important;
font-size:8px!important;
}
}
/* ===== inhouse-arrivals-compact-18.4.274.css ===== */
/* Sprint 653 — In-house arrivals compact + fully responsive
Exact component: .tf-inhouse-arrivals-v2
No markup/business-logic changes. */
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2{
overflow:hidden!important;
}
/* ============================================================
DESKTOP
============================================================ */
@media(min-width:1181px){
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2{
padding:24px 0!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2>.shell{
width:min(1520px,calc(100% - 40px))!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:18px!important;
margin-bottom:12px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head .eyebrow{
margin-bottom:5px!important;
font-size:8px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head h2{
margin:0 0 4px!important;
font-size:27px!important;
line-height:1.05!important;
letter-spacing:-.035em!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head .section-copy{
margin:0!important;
font-size:9px!important;
line-height:1.4!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-viewall{
flex:0 0 auto!important;
min-height:36px!important;
padding:0 13px!important;
display:inline-flex!important;
align-items:center!important;
gap:8px!important;
border:1px solid #d5e1ed!important;
border-radius:9px!important;
background:#fff!important;
color:#1768cf!important;
font-size:9px!important;
font-weight:900!important;
text-decoration:none!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-viewall span{
display:grid!important;
place-items:center!important;
width:24px!important;
height:24px!important;
border-radius:7px!important;
background:#eef5ff!important;
}
/* 6 compact cards on large desktop */
body:has(.tf-home-v3) .tf-inhouse-arrivals-grid-v2{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:9px!important;
width:100%!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-card-v2{
min-width:0!important;
min-height:0!important;
height:auto!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
border:1px solid #dce5ef!important;
border-radius:12px!important;
background:#fff!important;
box-shadow:0 5px 15px rgba(12,39,72,.035)!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-media{
height:148px!important;
min-height:148px!important;
max-height:148px!important;
padding:7px!important;
background:#f5f7fa!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-media img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
background:#f5f7fa!important;
}
body:has(.tf-home-v3) .tf-inhouse-badge{
left:8px!important;
top:8px!important;
min-height:21px!important;
padding:0 7px!important;
font-size:6.5px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-body{
flex:1 1 auto!important;
min-height:142px!important;
height:auto!important;
padding:9px!important;
}
body:has(.tf-home-v3) .tf-inhouse-commerce-meta{
min-height:18px!important;
margin-bottom:5px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:5px!important;
}
body:has(.tf-home-v3) .tf-inhouse-commerce-meta span,
body:has(.tf-home-v3) .tf-inhouse-commerce-meta b{
font-size:6px!important;
line-height:1!important;
white-space:nowrap!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-body h3{
min-height:31px!important;
max-height:31px!important;
margin:0 0 7px!important;
font-size:10px!important;
line-height:1.3!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-body h3 a{
-webkit-line-clamp:2!important;
}
body:has(.tf-home-v3) .tf-inhouse-price{
margin-top:6px!important;
margin-bottom:8px!important;
font-size:14px!important;
line-height:1!important;
}
body:has(.tf-home-v3) .tf-inhouse-price strong{
font-size:14px!important;
}
body:has(.tf-home-v3) .tf-inhouse-price small{
font-size:7px!important;
}
body:has(.tf-home-v3) .tf-inhouse-add-cart{
width:100%!important;
min-height:34px!important;
height:34px!important;
margin-top:auto!important;
padding:0 9px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:6px!important;
border:1px solid #efa900!important;
border-radius:8px!important;
background:#ffc23a!important;
color:#0b2b52!important;
font-size:8px!important;
font-weight:900!important;
}
body:has(.tf-home-v3) .tf-inhouse-add-cart svg{
width:15px!important;
height:15px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.8!important;
}
}
/* 5 cards on common laptop/desktop widths */
@media(min-width:901px) and (max-width:1380px){
body:has(.tf-home-v3) .tf-inhouse-arrivals-grid-v2{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
}
/* ============================================================
TABLET
============================================================ */
@media(min-width:521px) and (max-width:900px){
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2{
padding:18px 0!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2>.shell{
width:calc(100% - 24px)!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head{
align-items:flex-end!important;
gap:10px!important;
margin-bottom:10px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head h2{
font-size:22px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-viewall{
min-height:34px!important;
padding:0 10px!important;
font-size:8px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-grid-v2{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:8px!important;
width:100%!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-card-v2{
width:auto!important;
max-width:none!important;
min-height:0!important;
flex:none!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-media{
height:155px!important;
min-height:155px!important;
max-height:155px!important;
padding:7px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-body{
min-height:140px!important;
padding:9px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-body h3{
min-height:31px!important;
margin-bottom:7px!important;
font-size:10px!important;
}
body:has(.tf-home-v3) .tf-inhouse-price{
margin-top:5px!important;
margin-bottom:8px!important;
font-size:14px!important;
}
body:has(.tf-home-v3) .tf-inhouse-add-cart{
min-height:34px!important;
height:34px!important;
border-radius:8px!important;
font-size:8px!important;
}
}
/* ============================================================
MOBILE <= 520px
One compact card per row. This removes the squeezed two-card issue
visible in the supplied screenshot.
============================================================ */
@media(max-width:520px){
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2{
padding:14px 0!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2>.shell{
width:calc(100% - 14px)!important;
margin-inline:auto!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:8px!important;
margin-bottom:9px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head>div{
min-width:0!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head .eyebrow{
margin-bottom:4px!important;
font-size:7px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head h2{
margin:0 0 3px!important;
font-size:20px!important;
line-height:1.08!important;
letter-spacing:-.025em!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head .section-copy{
max-width:290px!important;
margin:0!important;
font-size:8px!important;
line-height:1.35!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-viewall{
min-width:64px!important;
min-height:32px!important;
padding:0 8px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
border:1px solid #d5e1ed!important;
border-radius:8px!important;
background:#fff!important;
color:#1768cf!important;
font-size:7px!important;
font-weight:900!important;
text-decoration:none!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-viewall span{
font-size:11px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-grid-v2{
display:grid!important;
grid-template-columns:1fr!important;
gap:8px!important;
width:100%!important;
margin:0!important;
padding:0!important;
overflow:visible!important;
scroll-snap-type:none!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-card-v2{
display:grid!important;
grid-template-columns:112px minmax(0,1fr)!important;
grid-template-rows:auto!important;
width:100%!important;
max-width:100%!important;
min-width:0!important;
min-height:148px!important;
height:auto!important;
overflow:hidden!important;
border:1px solid #dce5ef!important;
border-radius:11px!important;
background:#fff!important;
box-shadow:0 5px 15px rgba(12,39,72,.035)!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-media{
width:112px!important;
min-width:112px!important;
max-width:112px!important;
height:100%!important;
min-height:148px!important;
max-height:none!important;
padding:6px!important;
border-right:1px solid #e4eaf1!important;
background:#f5f7fa!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-media img{
width:100%!important;
height:100%!important;
object-fit:contain!important;
background:#f5f7fa!important;
}
body:has(.tf-home-v3) .tf-inhouse-badge{
left:6px!important;
top:6px!important;
min-height:20px!important;
padding:0 6px!important;
font-size:6px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-body{
min-width:0!important;
min-height:148px!important;
height:auto!important;
padding:9px!important;
display:flex!important;
flex-direction:column!important;
}
body:has(.tf-home-v3) .tf-inhouse-commerce-meta{
min-height:15px!important;
margin-bottom:5px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:4px!important;
overflow:hidden!important;
}
body:has(.tf-home-v3) .tf-inhouse-commerce-meta span{
max-width:120px!important;
overflow:hidden!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
font-size:5.7px!important;
}
body:has(.tf-home-v3) .tf-inhouse-commerce-meta b{
display:none!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-body h3{
min-height:32px!important;
max-height:32px!important;
margin:0 0 6px!important;
font-size:10px!important;
line-height:1.3!important;
}
body:has(.tf-home-v3) .tf-inhouse-price{
margin-top:auto!important;
margin-bottom:7px!important;
font-size:14px!important;
line-height:1!important;
}
body:has(.tf-home-v3) .tf-inhouse-price strong{
font-size:14px!important;
}
body:has(.tf-home-v3) .tf-inhouse-price small{
font-size:6.5px!important;
}
body:has(.tf-home-v3) .tf-inhouse-add-cart{
width:100%!important;
min-height:32px!important;
height:32px!important;
margin:0!important;
padding:0 8px!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
gap:5px!important;
border:1px solid #efa900!important;
border-radius:7px!important;
background:#ffc23a!important;
color:#0b2b52!important;
font-size:7px!important;
font-weight:900!important;
}
body:has(.tf-home-v3) .tf-inhouse-add-cart svg{
width:14px!important;
height:14px!important;
fill:none!important;
stroke:currentColor!important;
stroke-width:1.8!important;
}
/* Give floating AI room without covering the CTA of the final visible card. */
body:has(.tf-home-v3) .tf-inhouse-arrivals-v2{
padding-bottom:72px!important;
}
}
/* Very small devices */
@media(max-width:360px){
body:has(.tf-home-v3) .tf-inhouse-arrival-card-v2{
grid-template-columns:98px minmax(0,1fr)!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrival-media{
width:98px!important;
min-width:98px!important;
max-width:98px!important;
}
body:has(.tf-home-v3) .tf-inhouse-arrivals-head h2{
font-size:18px!important;
}
}
/* ===== featured-marketplace-premium-18.4.275.css ===== */
/* Sprint 654 — Featured Marketplace Premium Product Cards
Exact scope: homepage .marketplace-products only.
Trending section remains unchanged.
Solid colors only; no gradients. */
.tf-homepage .marketplace-products{
background:#f6f8fb!important;
}
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 32px)!important;
max-width:1580px!important;
margin-inline:auto!important;
}
/* Section heading */
.tf-homepage .marketplace-products .curated-products-head{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:18px!important;
margin-bottom:12px!important;
}
.tf-homepage .marketplace-products .curated-products-head .eyebrow{
margin-bottom:4px!important;
color:#1768cf!important;
font-size:7px!important;
letter-spacing:.10em!important;
}
.tf-homepage .marketplace-products .curated-products-head h2{
margin:0 0 3px!important;
color:#123354!important;
font-size:24px!important;
line-height:1.05!important;
letter-spacing:-.035em!important;
}
.tf-homepage .marketplace-products .curated-products-head .section-copy{
margin:0!important;
color:#73859a!important;
font-size:8px!important;
line-height:1.4!important;
}
.tf-homepage .marketplace-products .curated-products-head>a{
flex:0 0 auto!important;
min-height:34px!important;
padding:0 9px 0 11px!important;
display:inline-flex!important;
align-items:center!important;
gap:7px!important;
border:1px solid #d6e1ec!important;
border-radius:9px!important;
background:#fff!important;
color:#1768cf!important;
font-size:7.5px!important;
font-weight:900!important;
text-decoration:none!important;
}
.tf-homepage .marketplace-products .curated-products-head>a span{
display:grid!important;
place-items:center!important;
width:22px!important;
height:22px!important;
border-radius:7px!important;
background:#eef5ff!important;
}
/* Grid */
.tf-homepage .marketplace-products .featured-twelve-grid{
display:grid!important;
grid-template-columns:repeat(6,minmax(0,1fr))!important;
gap:9px!important;
width:100%!important;
}
/* Premium card */
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
min-width:0!important;
min-height:0!important;
height:auto!important;
display:flex!important;
flex-direction:column!important;
overflow:hidden!important;
border:1px solid #dce5ee!important;
border-radius:12px!important;
background:#fff!important;
box-shadow:0 5px 15px rgba(13,42,76,.035)!important;
transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-card:hover{
transform:translateY(-2px)!important;
border-color:#c7d7e7!important;
box-shadow:0 10px 24px rgba(13,42,76,.07)!important;
}
/* Image */
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
position:relative!important;
flex:0 0 158px!important;
width:100%!important;
height:158px!important;
min-height:158px!important;
max-height:158px!important;
padding:7px!important;
overflow:hidden!important;
border-bottom:1px solid #e6ebf1!important;
background:#f8fafc!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-image-link{
width:100%!important;
height:100%!important;
display:grid!important;
place-items:center!important;
overflow:hidden!important;
border-radius:8px!important;
background:#fff!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media img{
width:100%!important;
height:100%!important;
max-width:100%!important;
max-height:100%!important;
padding:2px!important;
object-fit:contain!important;
object-position:center!important;
}
/* Compact overlay tools */
.tf-homepage .marketplace-products .tf-featured-card-tools{
position:absolute!important;
top:8px!important;
right:8px!important;
z-index:4!important;
display:grid!important;
gap:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool{
width:28px!important;
height:28px!important;
min-width:28px!important;
min-height:28px!important;
display:grid!important;
place-items:center!important;
margin:0!important;
padding:0!important;
border:1px solid #d9e3ed!important;
border-radius:50%!important;
background:rgba(255,255,255,.97)!important;
color:#173657!important;
box-shadow:0 4px 12px rgba(12,40,73,.08)!important;
text-decoration:none!important;
}
.tf-homepage .marketplace-products .tf-featured-tool svg{
width:14px!important;
height:14px!important;
}
/* Replace yellow band with proper white commerce body */
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
flex:1 1 auto!important;
min-height:132px!important;
height:auto!important;
max-height:none!important;
padding:10px!important;
display:flex!important;
flex-direction:column!important;
align-items:stretch!important;
justify-content:flex-start!important;
background:#fff!important;
color:#173657!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body::after{
display:none!important;
}
.tf-homepage .marketplace-products .tf-featured-card-kicker{
min-height:18px!important;
margin-bottom:5px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-card-kicker span{
color:#6e8094!important;
font-size:5.8px!important;
font-weight:850!important;
letter-spacing:.06em!important;
text-transform:uppercase!important;
}
.tf-homepage .marketplace-products .tf-featured-card-kicker b{
min-height:18px!important;
padding:0 6px!important;
display:inline-flex!important;
align-items:center!important;
border-radius:999px!important;
background:#eaf8f1!important;
color:#17734c!important;
font-size:5.8px!important;
font-weight:900!important;
white-space:nowrap!important;
}
/* Product title */
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
width:100%!important;
min-height:30px!important;
max-height:30px!important;
margin:0 0 7px!important;
overflow:hidden!important;
color:#143657!important;
font-size:9px!important;
font-weight:900!important;
line-height:1.3!important;
text-align:left!important;
white-space:normal!important;
text-overflow:clip!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3 a{
display:-webkit-box!important;
-webkit-box-orient:vertical!important;
-webkit-line-clamp:2!important;
overflow:hidden!important;
color:inherit!important;
text-decoration:none!important;
}
/* Price + MOQ */
.tf-homepage .marketplace-products .tf-featured-commerce-row{
display:flex!important;
align-items:flex-end!important;
justify-content:space-between!important;
gap:7px!important;
margin-top:auto!important;
padding-top:7px!important;
border-top:1px solid #edf1f5!important;
}
.tf-homepage .marketplace-products .tf-featured-commerce-row .price{
margin:0!important;
color:#123a69!important;
font-size:12px!important;
font-weight:950!important;
line-height:1!important;
white-space:nowrap!important;
}
.tf-homepage .marketplace-products .tf-featured-commerce-row .price small{
color:#7c8da0!important;
font-size:5.5px!important;
font-weight:700!important;
}
.tf-homepage .marketplace-products .tf-featured-moq{
margin:0!important;
color:#78899c!important;
font-size:5.8px!important;
font-weight:750!important;
line-height:1.1!important;
text-align:right!important;
white-space:nowrap!important;
}
/* Supplier footer */
.tf-homepage .marketplace-products .tf-featured-supplier{
min-height:29px!important;
margin-top:7px!important;
padding-top:7px!important;
display:flex!important;
align-items:center!important;
justify-content:space-between!important;
gap:6px!important;
border-top:1px solid #edf1f5!important;
}
.tf-homepage .marketplace-products .tf-featured-supplier>span{
min-width:0!important;
max-width:58%!important;
overflow:hidden!important;
color:#63778d!important;
font-size:5.8px!important;
font-weight:800!important;
white-space:nowrap!important;
text-overflow:ellipsis!important;
}
.tf-homepage .marketplace-products .tf-featured-supplier>a{
flex:0 0 auto!important;
min-height:24px!important;
padding:0 7px!important;
display:inline-flex!important;
align-items:center!important;
justify-content:center!important;
border:1px solid #e4bb4d!important;
border-radius:7px!important;
background:#fff8df!important;
color:#684900!important;
font-size:5.8px!important;
font-weight:900!important;
text-decoration:none!important;
white-space:nowrap!important;
}
/* Large desktop: still six cards, balanced width */
@media(min-width:1600px){
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
height:172px!important;
min-height:172px!important;
max-height:172px!important;
flex-basis:172px!important;
}
}
/* Laptop: five columns */
@media(min-width:1181px) and (max-width:1420px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(5,minmax(0,1fr))!important;
}
}
/* Small desktop/tablet landscape: four columns */
@media(min-width:901px) and (max-width:1180px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(4,minmax(0,1fr))!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
height:150px!important;
min-height:150px!important;
max-height:150px!important;
flex-basis:150px!important;
}
}
/* Tablet: 3 columns */
@media(min-width:641px) and (max-width:900px){
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 20px)!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:repeat(3,minmax(0,1fr))!important;
gap:8px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
height:145px!important;
min-height:145px!important;
max-height:145px!important;
flex-basis:145px!important;
}
}
/* Mobile: clean 2-column card grid */
@media(max-width:640px){
.tf-homepage .marketplace-products{
padding-top:12px!important;
padding-bottom:14px!important;
}
.tf-homepage .marketplace-products>.shell{
width:calc(100% - 14px)!important;
}
.tf-homepage .marketplace-products .curated-products-head{
display:grid!important;
grid-template-columns:minmax(0,1fr) auto!important;
align-items:end!important;
gap:7px!important;
margin-bottom:9px!important;
}
.tf-homepage .marketplace-products .curated-products-head h2{
font-size:18px!important;
}
.tf-homepage .marketplace-products .curated-products-head .section-copy{
max-width:250px!important;
font-size:7px!important;
}
.tf-homepage .marketplace-products .curated-products-head>a{
min-height:31px!important;
padding:0 7px!important;
font-size:6.5px!important;
}
.tf-homepage .marketplace-products .curated-products-head>a span{
width:19px!important;
height:19px!important;
}
.tf-homepage .marketplace-products .featured-twelve-grid{
display:grid!important;
grid-template-columns:repeat(2,minmax(0,1fr))!important;
gap:7px!important;
width:100%!important;
overflow:visible!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
width:auto!important;
min-width:0!important;
max-width:none!important;
border-radius:10px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
height:124px!important;
min-height:124px!important;
max-height:124px!important;
flex-basis:124px!important;
padding:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-card-tools{
top:5px!important;
right:5px!important;
gap:4px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool{
width:25px!important;
height:25px!important;
min-width:25px!important;
min-height:25px!important;
}
.tf-homepage .marketplace-products .tf-featured-tool svg{
width:12px!important;
height:12px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body{
min-height:118px!important;
padding:8px!important;
}
.tf-homepage .marketplace-products .tf-featured-card-kicker{
min-height:15px!important;
margin-bottom:4px!important;
}
.tf-homepage .marketplace-products .tf-featured-card-kicker span{
font-size:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-card-kicker b{
min-height:15px!important;
padding:0 4px!important;
font-size:4.8px!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-body h3{
min-height:27px!important;
max-height:27px!important;
margin-bottom:5px!important;
font-size:8px!important;
}
.tf-homepage .marketplace-products .tf-featured-commerce-row{
display:block!important;
padding-top:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-commerce-row .price{
font-size:11px!important;
}
.tf-homepage .marketplace-products .tf-featured-moq{
margin-top:4px!important;
text-align:left!important;
font-size:5.2px!important;
}
.tf-homepage .marketplace-products .tf-featured-supplier{
min-height:26px!important;
margin-top:5px!important;
padding-top:5px!important;
}
.tf-homepage .marketplace-products .tf-featured-supplier>span{
display:none!important;
}
.tf-homepage .marketplace-products .tf-featured-supplier>a{
width:100%!important;
min-height:25px!important;
font-size:5.5px!important;
}
}
/* Very small mobile: 1 column for readability */
@media(max-width:360px){
.tf-homepage .marketplace-products .featured-twelve-grid{
grid-template-columns:1fr!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-card{
display:grid!important;
grid-template-columns:112px minmax(0,1fr)!important;
}
.tf-homepage .marketplace-products .tf-featured-opportunity-media{
width:112px!important;
height:100%!important;
min-height:144px!important;
max-height:none!important;
border-right:1px solid #e6ebf1!important;
border-bottom:0!important;
}
}
/* ===== about-us-premium-18.4.355.css ===== */
/* Sprint 735 — Premium Compact About Us */
.tf-about{--navy:#071f49;--blue:#1266d4;--gold:#ffbf2f;--ink:#10233f;--muted:#66758c;--line:#dbe5f1;--soft:#f5f8fc;max-width:1440px;margin:0 auto;color:var(--ink);font-family:inherit}
.tf-about *{box-sizing:border-box}.tf-about svg{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.tf-about-hero{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(280px,.65fr);gap:14px;padding:18px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 18px 50px rgba(8,31,73,.08)}
.tf-about-hero__copy{padding:28px 30px;border-radius:17px;background:var(--navy);color:#fff;position:relative;overflow:hidden}
.tf-about-hero__copy:after{content:"";position:absolute;width:210px;height:210px;border:38px solid rgba(255,191,47,.12);border-radius:50%;right:-80px;top:-90px}
.tf-about-eyebrow,.tf-about-section-head>span,.tf-about-purpose article>span,.tf-about-ecosystem article>span,.tf-about-trust>div>span,.tf-about-cta span{display:block;font-size:11px;font-weight:800;letter-spacing:.15em;color:var(--blue);margin-bottom:9px}
.tf-about-hero .tf-about-eyebrow{color:var(--gold)}.tf-about-hero h1{font-size:clamp(30px,3vw,48px);line-height:1.05;letter-spacing:-.035em;max-width:760px;margin:0 0 14px;color:#fff}
.tf-about-hero__copy p{font-size:15px;line-height:1.7;max-width:760px;color:#d9e4f4;margin:0}
.tf-about-actions{display:flex;gap:9px;margin-top:22px;flex-wrap:wrap}.tf-about-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:10px;font-size:13px;font-weight:800;text-decoration:none;transition:.2s}
.tf-about-btn--gold{background:var(--gold);color:#071f49;border:1px solid var(--gold)}.tf-about-btn--ghost{border:1px solid rgba(255,255,255,.3);color:#fff}.tf-about-btn--light{background:#fff;color:var(--navy);border:1px solid rgba(255,255,255,.55)}
.tf-about-milestone{padding:24px;border-radius:17px;background:#fff8e7;border:1px solid #f4d780;display:flex;flex-direction:column;justify-content:center}.tf-about-milestone__label{font-size:10px;font-weight:900;letter-spacing:.18em;color:#8a5a00}
.tf-about-milestone strong{font-size:78px;line-height:.9;letter-spacing:-.07em;color:var(--navy);margin:10px 0 4px}.tf-about-milestone h2{font-size:22px;margin:0 0 8px}.tf-about-milestone p{font-size:13px;line-height:1.55;color:#6b5a39;margin:0}
.tf-about-milestone__line{border-top:1px solid #ecd492;margin-top:17px;padding-top:12px;font-size:11px;line-height:1.4;color:#67593e}.tf-about-milestone__line span{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--gold);margin-right:7px}
.tf-about-statbar{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.tf-about-statbar article{display:flex;align-items:center;gap:10px;padding:13px 14px;border:1px solid var(--line);border-radius:13px;background:#fff}.tf-about-statbar svg{width:26px;height:26px;color:var(--blue);padding:4px;background:#edf5ff;border-radius:8px}.tf-about-statbar strong{display:block;font-size:14px}.tf-about-statbar span{font-size:11px;color:var(--muted)}
.tf-about-grid--story{display:grid;grid-template-columns:.8fr 1.2fr;gap:28px;padding:30px 4px;border-bottom:1px solid var(--line)}.tf-about-section-head h2{font-size:clamp(23px,2.2vw,34px);line-height:1.12;letter-spacing:-.025em;margin:0;max-width:620px}.tf-about-section-head p{font-size:13px;color:var(--muted);margin:9px 0 0}
.tf-about-story p{font-size:14px;line-height:1.72;color:#4f6077;margin:0 0 12px}.tf-about-pills{display:flex;gap:6px;flex-wrap:wrap;margin-top:15px}.tf-about-pills span{font-size:11px;font-weight:750;padding:7px 10px;border-radius:999px;background:var(--soft);border:1px solid var(--line)}
.tf-about-purpose{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;padding:28px 0}.tf-about-purpose article{padding:19px;border:1px solid var(--line);border-radius:15px;background:#fff}.tf-about-icon{width:38px;height:38px;display:grid;place-items:center;border-radius:10px;background:#edf5ff;color:var(--blue);margin-bottom:14px}.tf-about-icon svg{width:22px;height:22px}.tf-about-purpose article>span{font-size:9px;margin-bottom:7px}.tf-about-purpose h3{font-size:17px;line-height:1.25;margin:0 0 8px}.tf-about-purpose p{font-size:12.5px;line-height:1.6;color:var(--muted);margin:0}
.tf-about-journey{padding:26px 22px;border-radius:19px;background:var(--soft);border:1px solid var(--line)}.tf-about-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}.tf-about-timeline article{display:flex;gap:10px;padding:14px;background:#fff;border:1px solid var(--line);border-radius:12px}.tf-about-timeline b{font-size:11px;color:var(--blue);padding-top:2px}.tf-about-timeline span{font-size:9px;letter-spacing:.12em;font-weight:850;color:#76869c}.tf-about-timeline h3{font-size:14px;margin:3px 0 6px}.tf-about-timeline p{font-size:11.5px;line-height:1.55;color:var(--muted);margin:0}
.tf-about-ecosystem{padding:30px 0}.tf-about-ecosystem__cards{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:18px}.tf-about-ecosystem article{padding:20px;border:1px solid var(--line);border-radius:15px}.tf-about-ecosystem article:first-child{border-top:3px solid var(--blue)}.tf-about-ecosystem article:last-child{border-top:3px solid var(--gold)}.tf-about-ecosystem h3{font-size:19px;margin:0 0 7px}.tf-about-ecosystem p{font-size:12.5px;line-height:1.62;color:var(--muted);margin:0 0 12px}.tf-about-ecosystem a{font-size:12px;font-weight:800;color:var(--blue);text-decoration:none}
.tf-about-trust{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center;padding:24px;border-radius:17px;background:var(--navy);color:#fff}.tf-about-trust>div>span{color:var(--gold)}.tf-about-trust h2{font-size:25px;margin:0 0 8px;color:#fff}.tf-about-trust p{font-size:12.5px;line-height:1.65;color:#cbd9ed;margin:0}.tf-about-trust ul{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:1fr 1fr;gap:8px}.tf-about-trust li{display:flex;align-items:center;gap:8px;font-size:11.5px;padding:10px;border:1px solid rgba(255,255,255,.15);border-radius:9px;background:rgba(255,255,255,.05)}.tf-about-trust li svg{width:17px;height:17px;color:var(--gold);flex:none}
.tf-about-cta{margin:12px 0 2px;padding:22px 24px;border-radius:16px;background:#fff8e7;border:1px solid #f2d98d;display:flex;align-items:center;justify-content:space-between;gap:20px}.tf-about-cta span{color:#8a5a00;font-size:9px;margin-bottom:5px}.tf-about-cta h2{font-size:24px;margin:0 0 4px}.tf-about-cta p{font-size:12px;color:#74654a;margin:0}.tf-about-cta>div:last-child{display:flex;gap:8px;flex:none}.tf-about-cta .tf-about-btn--light{border-color:#d7c69a}
.footer-source-card[data-page="about-us"]{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.footer-document-shell:has(.footer-source-card[data-page="about-us"]){display:block!important}.footer-document-shell:has(.footer-source-card[data-page="about-us"])>.footer-document-aside{display:none!important}
@media(max-width:900px){.tf-about-hero{grid-template-columns:1fr}.tf-about-milestone{display:grid;grid-template-columns:auto 1fr;column-gap:16px;align-items:center}.tf-about-milestone__label,.tf-about-milestone p,.tf-about-milestone__line{grid-column:2}.tf-about-milestone strong{grid-row:1/5;font-size:66px}.tf-about-statbar{grid-template-columns:1fr 1fr}.tf-about-grid--story,.tf-about-trust{grid-template-columns:1fr}.tf-about-timeline{grid-template-columns:1fr 1fr}.tf-about-purpose{grid-template-columns:1fr}.tf-about-purpose article{display:grid;grid-template-columns:42px 1fr;column-gap:12px}.tf-about-purpose .tf-about-icon{grid-row:1/4}.tf-about-purpose article>span,.tf-about-purpose h3,.tf-about-purpose p{grid-column:2}.tf-about-trust ul{grid-template-columns:1fr 1fr}}
@media(max-width:640px){.tf-about{margin:0 -8px}.tf-about-hero{padding:8px;border-radius:15px;gap:8px}.tf-about-hero__copy{padding:20px 17px;border-radius:12px}.tf-about-hero h1{font-size:29px}.tf-about-hero__copy p{font-size:13px;line-height:1.6}.tf-about-actions{margin-top:16px}.tf-about-btn{min-height:39px;padding:0 14px;font-size:12px}.tf-about-milestone{padding:16px;border-radius:12px}.tf-about-milestone strong{font-size:58px}.tf-about-milestone h2{font-size:18px}.tf-about-milestone p{font-size:11.5px}.tf-about-statbar{gap:6px;margin:8px 0}.tf-about-statbar article{padding:10px;gap:7px}.tf-about-statbar svg{width:24px;height:24px}.tf-about-statbar strong{font-size:12px}.tf-about-statbar span{font-size:9.5px}.tf-about-grid--story{grid-template-columns:1fr;padding:22px 6px;gap:13px}.tf-about-section-head h2{font-size:24px}.tf-about-story p{font-size:12.5px}.tf-about-purpose{padding:18px 0;gap:7px}.tf-about-purpose article{padding:14px}.tf-about-purpose h3{font-size:15px}.tf-about-purpose p{font-size:11.5px}.tf-about-journey{padding:18px 12px;border-radius:14px}.tf-about-timeline{grid-template-columns:1fr;gap:6px;margin-top:14px}.tf-about-timeline article{padding:11px}.tf-about-ecosystem{padding:20px 0}.tf-about-ecosystem__cards{grid-template-columns:1fr;gap:7px}.tf-about-ecosystem article{padding:15px}.tf-about-trust{padding:17px 14px;gap:14px;border-radius:13px}.tf-about-trust h2{font-size:21px}.tf-about-trust ul{grid-template-columns:1fr;gap:5px}.tf-about-trust li{padding:8px}.tf-about-cta{padding:16px 14px;align-items:flex-start;flex-direction:column;gap:13px}.tf-about-cta h2{font-size:21px}.tf-about-cta>div:last-child{width:100%}.tf-about-cta .tf-about-btn{flex:1}.footer-page-hero{padding-top:18px!important;padding-bottom:18px!important}.footer-page-hero h1{font-size:26px!important}.footer-page-hero p{font-size:12px!important}}
@media(prefers-reduced-motion:reduce){.tf-about *{scroll-behavior:auto!important;transition:none!important}}
/* ===== about-us-premium-18.4.356.css ===== */
/* Sprint 736 — premium visual About Us */
.tf-about-v2{--navy:#071f49;--blue:#0f66d6;--gold:#ffbf2f;--ink:#10233f;--muted:#64758d;--line:#dbe5f0;max-width:1440px;margin:0 auto;color:var(--ink);font-family:inherit}
.tf-about-v2 *{box-sizing:border-box}.tf-about-v2 img{display:block;max-width:100%}
.tf-about-v2-kicker{display:block;color:var(--blue);font-size:10px;font-weight:900;letter-spacing:.15em;margin-bottom:8px}
.tf-about-v2 h2{font-size:clamp(25px,2.3vw,36px);line-height:1.12;letter-spacing:-.03em;margin:0 0 11px}
.tf-about-v2 p{color:var(--muted);line-height:1.68}
.tf-about-v2-hero{display:grid;grid-template-columns:1.12fr .88fr;min-height:430px;border-radius:22px;overflow:hidden;background:linear-gradient(110deg,#071f49 0%,#0b3971 58%,#14599e 100%);position:relative}
.tf-about-v2-hero:before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:46px 46px}
.tf-about-v2-hero__copy{padding:54px 44px;position:relative;z-index:2;color:#fff}.tf-about-v2-hero .tf-about-v2-kicker{color:var(--gold)}
.tf-about-v2-hero h1{font-size:clamp(36px,4vw,58px);line-height:1.02;letter-spacing:-.045em;margin:0 0 16px;max-width:740px}
.tf-about-v2-hero p{font-size:15px;color:#d5e0ef;max-width:700px;margin:0}
.tf-about-v2-actions{display:flex;gap:9px;flex-wrap:wrap;margin-top:22px}.tf-about-v2-btn{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 18px;border-radius:10px;text-decoration:none;font-weight:850;font-size:13px}
.tf-about-v2-btn--gold{background:var(--gold);color:var(--navy)}.tf-about-v2-btn--line{border:1px solid rgba(255,255,255,.35);color:#fff}.tf-about-v2-btn--dark{background:var(--navy);color:#fff}
.tf-about-v2-hero__visual{position:relative;z-index:2;display:flex;align-items:center;justify-content:center;padding:34px}.tf-about-v2-visual-card{width:min(470px,100%);border-radius:22px;padding:12px;background:rgba(255,255,255,.95);box-shadow:0 25px 60px rgba(0,0,0,.28)}.tf-about-v2-visual-card img{border-radius:15px}
.tf-about-v2-milestone{position:absolute;left:18px;bottom:32px;width:150px;padding:15px;border-radius:16px;background:#fff;color:var(--navy);box-shadow:0 16px 38px rgba(0,0,0,.18)}.tf-about-v2-milestone span{font-size:8px;font-weight:900;letter-spacing:.12em;color:#8a6500}.tf-about-v2-milestone strong{display:inline-block;font-size:52px;line-height:.9;margin:7px 4px 5px 0}.tf-about-v2-milestone b{font-size:18px}.tf-about-v2-milestone small{display:block;font-size:9px;line-height:1.35;color:#68768a}
.tf-about-v2-proof{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:12px 0}.tf-about-v2-proof article{padding:15px 16px;border:1px solid var(--line);border-radius:13px;background:#fff;box-shadow:0 8px 20px rgba(9,33,72,.04)}.tf-about-v2-proof strong{display:block;font-size:16px}.tf-about-v2-proof span{font-size:10.5px;color:var(--muted)}
.tf-about-v2-story,.tf-about-v2-split{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center;padding:40px 10px}.tf-about-v2-story__media{position:relative}.tf-about-v2-story__media img{width:100%;max-height:390px;object-fit:cover;border-radius:20px;background:#f5f8fc}.tf-about-v2-image-chip{position:absolute;left:18px;bottom:18px;padding:9px 11px;border-radius:9px;background:rgba(7,31,73,.9);color:#fff;font-size:10px;font-weight:800}
.tf-about-v2-story__copy p{font-size:13.5px;margin:0 0 10px}.tf-about-v2-mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:16px}.tf-about-v2-mini-grid div{padding:12px;border:1px solid var(--line);border-radius:11px}.tf-about-v2-mini-grid b{display:block;font-size:12px;margin-bottom:4px}.tf-about-v2-mini-grid span{font-size:10.5px;color:var(--muted)}
.tf-about-v2-band{padding:30px 24px;border-radius:20px;background:#f4f7fb;border:1px solid var(--line)}.tf-about-v2-band>div:first-child{max-width:760px}.tf-about-v2-band>div:first-child p{font-size:12.5px}
.tf-about-v2-timeline{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:20px}.tf-about-v2-timeline article{padding:15px;border-radius:12px;background:#fff;border:1px solid var(--line);position:relative;overflow:hidden}.tf-about-v2-timeline article:before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--gold)}.tf-about-v2-timeline b{font-size:10px;color:var(--blue)}.tf-about-v2-timeline span{display:block;font-size:8px;font-weight:900;letter-spacing:.12em;color:#73839a;margin:6px 0 3px}.tf-about-v2-timeline h3{font-size:14px;margin:0 0 5px}.tf-about-v2-timeline p{font-size:10.5px;margin:0}
.tf-about-v2-split__copy ul{list-style:none;padding:0;margin:16px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:7px}.tf-about-v2-split__copy li{padding:9px 10px;border:1px solid var(--line);border-radius:9px;font-size:10.5px;background:#fff}.tf-about-v2-split__copy li:before{content:"✓";color:#118b55;font-weight:900;margin-right:7px}
.tf-about-v2-split__visual{display:flex;justify-content:center}.tf-about-v2-trust-card{width:min(470px,100%);padding:24px;border-radius:20px;background:linear-gradient(150deg,#071f49,#0f4d8f);color:#fff;box-shadow:0 20px 45px rgba(8,31,73,.2)}.tf-about-v2-trust-card img{width:185px;max-height:78px;object-fit:contain;margin:0 auto 22px;background:#fff;border-radius:12px;padding:8px}.tf-about-v2-trust-card strong{display:block;font-size:25px;text-align:center}.tf-about-v2-trust-card span{display:block;text-align:center;font-size:11px;color:#d5e1f0;margin-top:4px}
.tf-about-v2-purpose{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;padding:10px 0 32px}.tf-about-v2-purpose article{padding:20px;border:1px solid var(--line);border-radius:14px;background:#fff}.tf-about-v2-purpose article>span{display:block;font-size:9px;font-weight:900;letter-spacing:.13em;color:var(--blue);margin-bottom:7px}.tf-about-v2-purpose h3{font-size:17px;line-height:1.28;margin:0 0 7px}.tf-about-v2-purpose p{font-size:11.5px;margin:0}
.tf-about-v2-cta{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:25px 28px;border-radius:17px;background:#fff5d6;border:1px solid #eed17a}.tf-about-v2-cta h2{font-size:27px;margin-bottom:5px}.tf-about-v2-cta p{font-size:12px;margin:0;max-width:680px}.tf-about-v2-cta .tf-about-v2-actions{margin-top:0;flex:none}
.tf-reveal{opacity:0;transform:translateY(22px);transition:opacity .65s ease,transform .65s ease}.tf-reveal.is-visible{opacity:1;transform:none}.tf-float{animation:tfAboutFloat 5.5s ease-in-out infinite}@keyframes tfAboutFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@media(prefers-reduced-motion:reduce){.tf-reveal{opacity:1!important;transform:none!important;transition:none!important}.tf-float{animation:none!important}}
.footer-source-card[data-page="about-us"]{padding:0!important;border:0!important;background:transparent!important;box-shadow:none!important}.footer-document-shell:has(.footer-source-card[data-page="about-us"]){display:block!important}.footer-document-shell:has(.footer-source-card[data-page="about-us"])>.footer-document-aside{display:none!important}
@media(max-width:900px){.tf-about-v2-hero{grid-template-columns:1fr}.tf-about-v2-hero__copy{padding:38px 28px}.tf-about-v2-hero__visual{padding-top:0}.tf-about-v2-proof{grid-template-columns:1fr 1fr}.tf-about-v2-story,.tf-about-v2-split{grid-template-columns:1fr;gap:20px;padding:30px 6px}.tf-about-v2-timeline{grid-template-columns:1fr 1fr}.tf-about-v2-purpose{grid-template-columns:1fr}.tf-about-v2-cta{align-items:flex-start;flex-direction:column}.tf-about-v2-cta .tf-about-v2-actions{width:100%}}
@media(max-width:640px){.tf-about-v2{margin:0 -8px}.tf-about-v2-hero{border-radius:15px;min-height:auto}.tf-about-v2-hero__copy{padding:24px 17px}.tf-about-v2-hero h1{font-size:31px}.tf-about-v2-hero p{font-size:12.5px}.tf-about-v2-hero__visual{padding:12px 16px 20px}.tf-about-v2-visual-card{border-radius:15px}.tf-about-v2-milestone{left:24px;bottom:27px;width:126px;padding:11px}.tf-about-v2-milestone strong{font-size:42px}.tf-about-v2-proof{gap:5px;margin:7px 0}.tf-about-v2-proof article{padding:10px}.tf-about-v2-proof strong{font-size:12px}.tf-about-v2-proof span{font-size:8.5px}.tf-about-v2-story,.tf-about-v2-split{padding:20px 4px}.tf-about-v2-story__media img{border-radius:13px}.tf-about-v2-story__copy p{font-size:12px}.tf-about-v2-mini-grid{grid-template-columns:1fr}.tf-about-v2-band{padding:18px 12px;border-radius:14px}.tf-about-v2-timeline{grid-template-columns:1fr;gap:5px}.tf-about-v2-split__copy ul{grid-template-columns:1fr}.tf-about-v2-purpose{padding-bottom:18px}.tf-about-v2-purpose article{padding:14px}.tf-about-v2-cta{padding:17px 14px}.tf-about-v2-cta h2{font-size:22px}.tf-about-v2-cta .tf-about-v2-btn{flex:1}.tf-float{animation:none}}
/* Sprint 737 — extended About story */
.tf-about-v2-origin{padding:34px 24px;margin:4px 0 12px;border-radius:20px;background:#fff;border:1px solid var(--line)}
.tf-about-v2-origin__head{max-width:800px;margin-bottom:20px}.tf-about-v2-origin__head p{font-size:12.5px}
.tf-about-v2-origin__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.tf-about-v2-origin__grid article{padding:17px;border-radius:13px;background:#f7f9fc;border:1px solid #e5ebf3}
.tf-about-v2-origin__grid b{display:inline-flex;padding:5px 7px;border-radius:7px;background:#fff1bd;color:#745300;font-size:9px;letter-spacing:.08em}
.tf-about-v2-origin__grid h3{font-size:14px;margin:10px 0 6px}.tf-about-v2-origin__grid p{font-size:10.5px;margin:0}
.tf-about-v2-opportunities{padding:38px 24px;margin:12px 0;border-radius:20px;background:linear-gradient(135deg,#071f49,#0b3d78);color:#fff;overflow:hidden;position:relative}
.tf-about-v2-opportunities:after{content:"";position:absolute;width:340px;height:340px;border:1px solid rgba(255,191,47,.22);border-radius:50%;right:-160px;top:-180px}
.tf-about-v2-opportunities .tf-about-v2-kicker{color:var(--gold)}.tf-about-v2-opportunities__intro{max-width:820px;position:relative;z-index:1}.tf-about-v2-opportunities__intro p{color:#d6e0ee;font-size:12.5px}
.tf-about-v2-opportunities__grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:20px;position:relative;z-index:1}
.tf-about-v2-opportunity{display:grid;grid-template-columns:42px 1fr;gap:13px;padding:20px;border:1px solid rgba(255,255,255,.17);border-radius:15px;background:rgba(255,255,255,.075);backdrop-filter:blur(5px)}
.tf-about-v2-opportunity--primary{border-color:rgba(255,191,47,.5)}
.tf-about-v2-opportunity__icon{width:42px;height:42px;border-radius:11px;background:var(--gold);color:var(--navy);display:grid;place-items:center;font-size:21px;font-weight:900}
.tf-about-v2-opportunity small{font-size:8px;font-weight:900;letter-spacing:.12em;color:#a9c8ec}.tf-about-v2-opportunity h3{font-size:20px;margin:4px 0 7px}.tf-about-v2-opportunity p{font-size:11.5px;color:#d6e0ee;margin:0 0 10px}
.tf-about-v2-opportunity ul{list-style:none;padding:0;margin:0;display:grid;gap:4px}.tf-about-v2-opportunity li{font-size:10px;color:#eef4fb}.tf-about-v2-opportunity li:before{content:"✓";color:var(--gold);font-weight:900;margin-right:6px}
.tf-about-v2-opportunities__note{position:relative;z-index:1;font-size:9px!important;color:#a9bad0!important;margin:14px 0 0!important}
.tf-about-v2-journey{display:grid;grid-template-columns:.7fr 1.3fr;gap:24px;align-items:start;padding:34px 10px}
.tf-about-v2-journey__grid{display:grid;grid-template-columns:1fr 1fr;gap:8px}.tf-about-v2-journey__grid article{padding:15px;border-radius:12px;border:1px solid var(--line);background:#fff}
.tf-about-v2-journey__grid strong{font-size:10px;color:var(--blue)}.tf-about-v2-journey__grid h3{font-size:15px;margin:5px 0}.tf-about-v2-journey__grid p{font-size:10.5px;margin:0}
@media(max-width:900px){.tf-about-v2-origin__grid{grid-template-columns:1fr 1fr}.tf-about-v2-opportunities__grid{grid-template-columns:1fr}.tf-about-v2-journey{grid-template-columns:1fr}}
@media(max-width:640px){.tf-about-v2-origin,.tf-about-v2-opportunities{padding:18px 13px;border-radius:14px}.tf-about-v2-origin__grid{grid-template-columns:1fr;gap:5px}.tf-about-v2-origin__grid article{padding:13px}.tf-about-v2-opportunity{grid-template-columns:34px 1fr;padding:14px;gap:9px}.tf-about-v2-opportunity__icon{width:34px;height:34px;border-radius:9px;font-size:17px}.tf-about-v2-opportunity h3{font-size:17px}.tf-about-v2-journey{padding:20px 4px}.tf-about-v2-journey__grid{grid-template-columns:1fr 1fr;gap:5px}.tf-about-v2-journey__grid article{padding:11px}}
/* Sprint 738 — full-width corporate About layout + Buyer/Seller section */
body:has(.tf-about-v2) .footer-page-shell,
body:has(.tf-about-v2) .footer-document-shell,
body:has(.tf-about-v2) .footer-source-card[data-page="about-us"]{
max-width:none!important;
width:100%!important;
}
body:has(.tf-about-v2) .footer-page-shell{
padding-left:clamp(16px,2.2vw,36px)!important;
padding-right:clamp(16px,2.2vw,36px)!important;
}
body:has(.tf-about-v2) .footer-document-shell{
grid-template-columns:1fr!important;
gap:0!important;
}
body:has(.tf-about-v2) .footer-document-aside{
display:none!important;
}
body:has(.tf-about-v2) .footer-document-main,
body:has(.tf-about-v2) .footer-source-card[data-page="about-us"]{
min-width:0!important;
}
.tf-about-v2{
width:100%!important;
max-width:none!important;
}
.tf-about-v2 > section{
width:100%!important;
}
.tf-about-v2-story,
.tf-about-v2-split,
.tf-about-v2-journey{
padding-left:clamp(8px,1.2vw,20px)!important;
padding-right:clamp(8px,1.2vw,20px)!important;
}
.tf-about-v2-story__copy,
.tf-about-v2-split__copy{
max-width:760px;
}
.tf-about-v2-story__media img{
min-height:360px;
object-fit:cover;
}
.tf-about-v2-opportunities,
.tf-about-v2-origin,
.tf-about-v2-band,
.tf-about-v2-cta{
width:100%!important;
}
.tf-about-v2-market-sides{
padding:38px 0;
}
.tf-about-v2-market-sides__head{
max-width:920px;
margin:0 auto 20px;
text-align:center;
padding:0 18px;
}
.tf-about-v2-market-sides__head p{
font-size:13px;
margin:0 auto;
max-width:820px;
}
.tf-about-v2-market-sides__grid{
display:grid;
grid-template-columns:1fr 1fr;
gap:12px;
}
.tf-about-v2-market-card{
position:relative;
overflow:hidden;
min-height:360px;
padding:28px;
border-radius:20px;
border:1px solid var(--line);
background:#fff;
box-shadow:0 16px 38px rgba(8,31,73,.07);
}
.tf-about-v2-market-card:after{
content:"";
position:absolute;
right:-70px;
bottom:-90px;
width:220px;
height:220px;
border-radius:50%;
pointer-events:none;
}
.tf-about-v2-market-card--buyer{
border-top:4px solid var(--blue);
}
.tf-about-v2-market-card--buyer:after{
background:rgba(15,102,214,.07);
}
.tf-about-v2-market-card--seller{
border-top:4px solid var(--gold);
}
.tf-about-v2-market-card--seller:after{
background:rgba(255,191,47,.13);
}
.tf-about-v2-market-card__icon{
display:grid;
place-items:center;
width:48px;
height:48px;
margin-bottom:15px;
border-radius:13px;
background:#eef5ff;
color:var(--blue);
}
.tf-about-v2-market-card--seller .tf-about-v2-market-card__icon{
background:#fff4cf;
color:#8a6100;
}
.tf-about-v2-market-card__icon svg{
width:26px;
height:26px;
fill:none;
stroke:currentColor;
stroke-width:1.8;
stroke-linecap:round;
stroke-linejoin:round;
}
.tf-about-v2-market-card>span{
display:block;
margin-bottom:7px;
font-size:9px;
font-weight:900;
letter-spacing:.13em;
color:var(--blue);
}
.tf-about-v2-market-card--seller>span{
color:#8a6100;
}
.tf-about-v2-market-card h3{
max-width:590px;
margin:0 0 9px;
font-size:24px;
line-height:1.16;
}
.tf-about-v2-market-card p{
max-width:680px;
margin:0 0 15px;
font-size:12.5px;
}
.tf-about-v2-market-card ul{
position:relative;
z-index:1;
list-style:none;
display:grid;
grid-template-columns:1fr 1fr;
gap:7px;
padding:0;
margin:0 0 18px;
}
.tf-about-v2-market-card li{
padding:9px 10px;
border:1px solid #e1e8f0;
border-radius:9px;
background:#fafcff;
font-size:10.5px;
}
.tf-about-v2-market-card li:before{
content:"✓";
margin-right:7px;
color:#168353;
font-weight:900;
}
.tf-about-v2-market-card a{
position:relative;
z-index:1;
display:inline-flex;
align-items:center;
min-height:40px;
padding:0 14px;
border-radius:9px;
background:var(--navy);
color:#fff;
text-decoration:none;
font-size:11px;
font-weight:850;
}
.tf-about-v2-market-card--seller a{
background:var(--gold);
color:var(--navy);
}
@media(max-width:900px){
.tf-about-v2-market-sides__grid{grid-template-columns:1fr}
.tf-about-v2-market-card{min-height:auto}
}
@media(max-width:640px){
body:has(.tf-about-v2) .footer-page-shell{
padding-left:8px!important;
padding-right:8px!important;
}
.tf-about-v2-market-sides{padding:20px 0}
.tf-about-v2-market-sides__head{padding:0 8px;margin-bottom:12px;text-align:left}
.tf-about-v2-market-card{padding:16px;border-radius:14px}
.tf-about-v2-market-card h3{font-size:18px}
.tf-about-v2-market-card p{font-size:11.5px}
.tf-about-v2-market-card ul{grid-template-columns:1fr;gap:5px}
.tf-about-v2-market-card li{font-size:10px;padding:8px}
}
/* Sprint 739 — legacy About content rebuilt as a premium SEO section */
.tf-about-v2-why{
padding:34px 0;
border-top:1px solid var(--line);
}
.tf-about-v2-why__head{
max-width:1180px;
margin:0 auto 18px;
}
.tf-about-v2-why__head h2{
max-width:920px;
margin:7px 0 10px;
font-size:clamp(26px,2.7vw,42px);
line-height:1.08;
}
.tf-about-v2-why__head p{
max-width:1180px;
font-size:13px;
line-height:1.75;
}
.tf-about-v2-why__grid{
display:grid;
grid-template-columns:1.15fr 1fr 1fr;
gap:10px;
margin-top:18px;
}
.tf-about-v2-why__grid article{
padding:22px;
border:1px solid var(--line);
border-radius:16px;
background:#fff;
box-shadow:0 12px 30px rgba(8,31,73,.05);
}
.tf-about-v2-why__grid article:first-child{
border-top:4px solid var(--gold);
}
.tf-about-v2-why__grid article:nth-child(2){
border-top:4px solid var(--blue);
}
.tf-about-v2-why__grid article:nth-child(3){
border-top:4px solid var(--navy);
}
.tf-about-v2-why__grid span{
display:block;
margin-bottom:8px;
font-size:9px;
font-weight:900;
letter-spacing:.12em;
color:var(--blue);
}
.tf-about-v2-why__grid h3{
margin:0 0 8px;
font-size:18px;
line-height:1.25;
}
.tf-about-v2-why__grid p{
margin:0;
font-size:11.5px;
line-height:1.65;
}
.tf-about-v2-why__industries{
margin-top:10px;
padding:16px 18px;
border:1px solid var(--line);
border-radius:14px;
background:#f8fafc;
}
.tf-about-v2-why__industries strong{
display:block;
margin-bottom:10px;
font-size:11px;
}
.tf-about-v2-why__industries div{
display:grid;
grid-template-columns:repeat(6,1fr);
gap:7px;
}
.tf-about-v2-why__industries span{
padding:9px 7px;
border:1px solid #e2e8f0;
border-radius:9px;
background:#fff;
text-align:center;
font-size:10px;
font-weight:750;
}
@media(max-width:900px){
.tf-about-v2-why__grid{grid-template-columns:1fr}
.tf-about-v2-why__industries div{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:640px){
.tf-about-v2-why{padding:22px 0}
.tf-about-v2-why__head h2{font-size:24px}
.tf-about-v2-why__head p{font-size:11.5px}
.tf-about-v2-why__grid article{padding:15px;border-radius:13px}
.tf-about-v2-why__industries div{grid-template-columns:repeat(2,1fr)}
}
/* Sprint 740 — compact professional responsive About Us polish */
/* Remove the duplicate generic footer-page hero on About Us.
The custom corporate hero below already carries the H1 and SEO copy. */
body:has(.tf-about-v2) .footer-page-hero{
display:none!important;
}
/* Reduce excess whitespace around the About page */
body:has(.tf-about-v2) .footer-page-shell{
padding-top:14px!important;
padding-bottom:22px!important;
}
body:has(.tf-about-v2) .footer-document-main{
padding-top:0!important;
}
body:has(.tf-about-v2) .footer-source-card[data-page="about-us"]{
margin:0!important;
}
/* Global compact scale */
.tf-about-v2{
--section-gap:12px;
font-size:14px;
}
.tf-about-v2 > section{
margin-top:0!important;
margin-bottom:var(--section-gap)!important;
}
.tf-about-v2 h2{
font-size:clamp(22px,2vw,31px)!important;
}
.tf-about-v2 p{
line-height:1.58!important;
}
/* Hero: smaller, more corporate, less banner-like */
.tf-about-v2-hero{
min-height:350px!important;
border-radius:18px!important;
grid-template-columns:1.08fr .92fr!important;
}
.tf-about-v2-hero__copy{
padding:38px 34px!important;
}
.tf-about-v2-hero h1{
max-width:700px!important;
font-size:clamp(34px,3.45vw,50px)!important;
line-height:1.01!important;
}
.tf-about-v2-hero p{
max-width:660px!important;
font-size:13px!important;
}
.tf-about-v2-hero__visual{
padding:26px!important;
}
.tf-about-v2-visual-card{
max-width:420px!important;
border-radius:17px!important;
}
.tf-about-v2-milestone{
width:132px!important;
padding:12px!important;
left:14px!important;
bottom:20px!important;
border-radius:13px!important;
}
.tf-about-v2-milestone strong{
font-size:44px!important;
}
.tf-about-v2-milestone b{
font-size:15px!important;
}
/* Proof cards: smaller and tighter */
.tf-about-v2-proof{
gap:7px!important;
margin:8px 0 12px!important;
}
.tf-about-v2-proof article{
padding:11px 13px!important;
border-radius:11px!important;
}
.tf-about-v2-proof strong{
font-size:13px!important;
}
.tf-about-v2-proof span{
font-size:9.5px!important;
}
/* Story image + copy */
.tf-about-v2-story,
.tf-about-v2-split,
.tf-about-v2-journey{
gap:24px!important;
padding-top:24px!important;
padding-bottom:24px!important;
}
.tf-about-v2-story__media img{
min-height:0!important;
height:330px!important;
object-fit:cover!important;
border-radius:16px!important;
}
.tf-about-v2-story__copy p{
font-size:12.2px!important;
}
.tf-about-v2-mini-grid div{
padding:10px!important;
}
/* Why choose section */
.tf-about-v2-why{
padding:24px 0!important;
}
.tf-about-v2-why__head{
margin-bottom:13px!important;
}
.tf-about-v2-why__head h2{
font-size:clamp(24px,2.35vw,35px)!important;
}
.tf-about-v2-why__head p{
font-size:12px!important;
line-height:1.6!important;
}
.tf-about-v2-why__grid{
gap:8px!important;
margin-top:12px!important;
}
.tf-about-v2-why__grid article{
padding:16px!important;
border-radius:13px!important;
box-shadow:0 8px 22px rgba(8,31,73,.045)!important;
}
.tf-about-v2-why__grid h3{
font-size:15px!important;
}
.tf-about-v2-why__grid p{
font-size:10.7px!important;
}
.tf-about-v2-why__industries{
padding:12px!important;
}
.tf-about-v2-why__industries span{
padding:7px 6px!important;
font-size:9.5px!important;
}
/* Timeline and beginning */
.tf-about-v2-band{
padding:22px 20px!important;
border-radius:16px!important;
}
.tf-about-v2-timeline{
margin-top:14px!important;
}
.tf-about-v2-timeline article{
padding:12px!important;
}
.tf-about-v2-origin{
padding:24px 20px!important;
border-radius:16px!important;
}
.tf-about-v2-origin__head{
margin-bottom:14px!important;
}
.tf-about-v2-origin__grid article{
padding:13px!important;
}
.tf-about-v2-origin__grid h3{
font-size:13px!important;
}
.tf-about-v2-origin__grid p{
font-size:10px!important;
}
/* Work and earning opportunities */
.tf-about-v2-opportunities{
padding:26px 20px!important;
border-radius:17px!important;
}
.tf-about-v2-opportunities__grid{
margin-top:14px!important;
gap:8px!important;
}
.tf-about-v2-opportunity{
padding:16px!important;
border-radius:12px!important;
}
.tf-about-v2-opportunity h3{
font-size:17px!important;
}
.tf-about-v2-opportunity p{
font-size:10.8px!important;
}
.tf-about-v2-opportunity li{
font-size:9.5px!important;
}
/* Journey cards */
.tf-about-v2-journey{
grid-template-columns:.72fr 1.28fr!important;
}
.tf-about-v2-journey__grid article{
padding:12px!important;
}
.tf-about-v2-journey__grid h3{
font-size:13px!important;
}
/* Buyer/Seller section: reduce oversized cards */
.tf-about-v2-market-sides{
padding:24px 0!important;
}
.tf-about-v2-market-sides__head{
margin-bottom:14px!important;
}
.tf-about-v2-market-sides__head h2{
max-width:900px!important;
margin-left:auto!important;
margin-right:auto!important;
}
.tf-about-v2-market-sides__head p{
font-size:11.5px!important;
}
.tf-about-v2-market-card{
min-height:0!important;
padding:20px!important;
border-radius:16px!important;
box-shadow:0 10px 28px rgba(8,31,73,.055)!important;
}
.tf-about-v2-market-card__icon{
width:40px!important;
height:40px!important;
margin-bottom:11px!important;
}
.tf-about-v2-market-card__icon svg{
width:22px!important;
height:22px!important;
}
.tf-about-v2-market-card h3{
font-size:19px!important;
margin-bottom:7px!important;
}
.tf-about-v2-market-card p{
font-size:11px!important;
margin-bottom:11px!important;
}
.tf-about-v2-market-card ul{
gap:5px!important;
margin-bottom:12px!important;
}
.tf-about-v2-market-card li{
padding:7px 8px!important;
font-size:9.5px!important;
}
.tf-about-v2-market-card a{
min-height:36px!important;
padding:0 12px!important;
font-size:10px!important;
}
/* Trust area */
.tf-about-v2-split__copy p{
font-size:12px!important;
}
.tf-about-v2-split__copy li{
padding:7px 8px!important;
font-size:9.5px!important;
}
.tf-about-v2-trust-card{
max-width:390px!important;
padding:19px!important;
border-radius:16px!important;
}
.tf-about-v2-trust-card img{
width:160px!important;
margin-bottom:14px!important;
}
.tf-about-v2-trust-card strong{
font-size:21px!important;
}
/* Mission/Vision/Approach */
.tf-about-v2-purpose{
gap:7px!important;
padding-bottom:18px!important;
}
.tf-about-v2-purpose article{
padding:15px!important;
}
.tf-about-v2-purpose h3{
font-size:15px!important;
}
.tf-about-v2-purpose p{
font-size:10.5px!important;
}
/* CTA and support: compact */
.tf-about-v2-cta{
padding:17px 20px!important;
border-radius:14px!important;
}
.tf-about-v2-cta h2{
font-size:22px!important;
}
.tf-about-v2-cta p{
font-size:10.5px!important;
}
.tf-about-v2-btn{
min-height:37px!important;
padding:0 14px!important;
font-size:11px!important;
}
/* Reduce oversized page-end whitespace */
body:has(.tf-about-v2) .footer-document-main + *{
margin-top:0!important;
}
/* Professional responsive behavior */
@media(max-width:1100px){
.tf-about-v2-hero{grid-template-columns:1fr 1fr!important}
.tf-about-v2-market-card ul{grid-template-columns:1fr!important}
.tf-about-v2-why__industries div{grid-template-columns:repeat(3,1fr)!important}
}
@media(max-width:900px){
.tf-about-v2-hero{
grid-template-columns:1fr!important;
min-height:0!important;
}
.tf-about-v2-hero__copy{
padding:30px 24px!important;
}
.tf-about-v2-hero__visual{
padding:0 24px 24px!important;
}
.tf-about-v2-visual-card{
margin:0 auto!important;
}
.tf-about-v2-story,
.tf-about-v2-split,
.tf-about-v2-journey{
grid-template-columns:1fr!important;
}
.tf-about-v2-story__media img{
height:300px!important;
}
.tf-about-v2-timeline,
.tf-about-v2-origin__grid{
grid-template-columns:1fr 1fr!important;
}
}
@media(max-width:640px){
body:has(.tf-about-v2) .footer-page-shell{
padding-top:8px!important;
padding-bottom:14px!important;
}
.tf-about-v2{
margin:0!important;
--section-gap:8px;
}
.tf-about-v2-hero{
border-radius:13px!important;
}
.tf-about-v2-hero__copy{
padding:21px 15px!important;
}
.tf-about-v2-hero h1{
font-size:29px!important;
}
.tf-about-v2-hero p{
font-size:11.5px!important;
}
.tf-about-v2-hero__visual{
padding:0 14px 16px!important;
}
.tf-about-v2-milestone{
width:112px!important;
left:20px!important;
bottom:20px!important;
}
.tf-about-v2-proof{
grid-template-columns:1fr 1fr!important;
}
.tf-about-v2-story,
.tf-about-v2-split,
.tf-about-v2-journey{
padding:16px 0!important;
}
.tf-about-v2-story__media img{
height:auto!important;
max-height:260px!important;
}
.tf-about-v2-why,
.tf-about-v2-market-sides{
padding:16px 0!important;
}
.tf-about-v2-band,
.tf-about-v2-origin,
.tf-about-v2-opportunities{
padding:16px 12px!important;
}
.tf-about-v2-timeline,
.tf-about-v2-origin__grid,
.tf-about-v2-journey__grid{
grid-template-columns:1fr!important;
}
.tf-about-v2-market-card{
padding:14px!important;
}
.tf-about-v2-market-card h3{
font-size:17px!important;
}
.tf-about-v2-purpose article{
padding:12px!important;
}
.tf-about-v2-cta{
padding:14px!important;
}
}
/* Prevent long text/links from breaking narrow layouts */
.tf-about-v2,
.tf-about-v2 *{
min-width:0;
}
.tf-about-v2 p,
.tf-about-v2 li,
.tf-about-v2 a,
.tf-about-v2 h1,
.tf-about-v2 h2,
.tf-about-v2 h3{
overflow-wrap:anywhere;
}
/* Sprint 741 — About section UI polish from production screenshots */
/* 1) WHY TRADESFOLKS — convert loose text block into a tighter premium editorial section */
.tf-about-v2-why{
padding:22px 24px!important;
border:1px solid var(--line)!important;
border-radius:16px!important;
background:#fff!important;
box-shadow:0 10px 28px rgba(8,31,73,.045)!important;
}
.tf-about-v2-why__head{
max-width:none!important;
margin:0 0 14px!important;
padding:0!important;
}
.tf-about-v2-why__head .tf-about-v2-kicker{
margin-bottom:6px!important;
}
.tf-about-v2-why__head h2{
max-width:960px!important;
margin:0 0 10px!important;
font-size:clamp(23px,2.15vw,33px)!important;
line-height:1.08!important;
}
.tf-about-v2-why__head p{
max-width:1180px!important;
margin:0 0 7px!important;
font-size:11.7px!important;
line-height:1.58!important;
color:#5e6f86!important;
}
.tf-about-v2-why__grid{
margin-top:14px!important;
}
.tf-about-v2-why__industries{
margin-top:8px!important;
background:#f7f9fc!important;
}
/* 2) THE JOURNEY AHEAD — turn into one premium horizontal section instead of floating text + plain cards */
.tf-about-v2-journey{
display:grid!important;
grid-template-columns:.7fr 1.3fr!important;
gap:18px!important;
align-items:stretch!important;
padding:18px!important;
margin:0 0 12px!important;
border:1px solid var(--line)!important;
border-radius:16px!important;
background:linear-gradient(180deg,#ffffff 0%,#f8fbff 100%)!important;
box-shadow:0 10px 28px rgba(8,31,73,.04)!important;
}
.tf-about-v2-journey > div:first-child{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
padding:8px 12px!important;
border-right:1px solid #e4ebf3!important;
}
.tf-about-v2-journey > div:first-child h2{
margin:0!important;
max-width:500px!important;
font-size:clamp(22px,2vw,31px)!important;
line-height:1.08!important;
}
.tf-about-v2-journey__grid{
display:grid!important;
grid-template-columns:1fr 1fr!important;
gap:7px!important;
}
.tf-about-v2-journey__grid article{
min-height:92px!important;
padding:13px 14px!important;
border:1px solid #dce5f0!important;
border-radius:11px!important;
background:#fff!important;
box-shadow:none!important;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease!important;
}
.tf-about-v2-journey__grid article:hover{
transform:translateY(-2px)!important;
border-color:#b8d0ee!important;
box-shadow:0 8px 18px rgba(8,31,73,.06)!important;
}
.tf-about-v2-journey__grid strong{
display:inline-flex!important;
min-width:28px!important;
height:23px!important;
align-items:center!important;
justify-content:center!important;
margin-bottom:4px!important;
border-radius:7px!important;
background:#edf5ff!important;
color:var(--blue)!important;
font-size:9px!important;
}
.tf-about-v2-journey__grid h3{
margin:0 0 3px!important;
font-size:13px!important;
}
.tf-about-v2-journey__grid p{
margin:0!important;
font-size:9.8px!important;
line-height:1.45!important;
}
/* 3) TRADE SECURE — remove inner white image card and increase outer card width */
.tf-about-v2-split{
grid-template-columns:1fr 1.08fr!important;
}
.tf-about-v2-split__visual{
width:100%!important;
justify-content:stretch!important;
}
.tf-about-v2-trust-card{
width:100%!important;
max-width:none!important;
min-height:245px!important;
padding:22px 28px!important;
display:flex!important;
flex-direction:column!important;
align-items:center!important;
justify-content:center!important;
border-radius:18px!important;
background:linear-gradient(135deg,#071f49 0%,#0a3f7d 68%,#1261aa 100%)!important;
box-shadow:0 18px 42px rgba(8,31,73,.17)!important;
}
.tf-about-v2-trust-card img{
width:220px!important;
max-width:60%!important;
max-height:86px!important;
object-fit:contain!important;
margin:0 auto 16px!important;
padding:0!important;
background:transparent!important;
border-radius:0!important;
box-shadow:none!important;
}
.tf-about-v2-trust-card strong{
font-size:23px!important;
line-height:1.15!important;
}
.tf-about-v2-trust-card span{
font-size:10.5px!important;
color:#dce8f7!important;
}
/* Tablet/mobile refinements for these three sections */
@media(max-width:900px){
.tf-about-v2-why{
padding:18px!important;
}
.tf-about-v2-journey{
grid-template-columns:1fr!important;
gap:12px!important;
}
.tf-about-v2-journey > div:first-child{
padding:2px 2px 10px!important;
border-right:0!important;
border-bottom:1px solid #e4ebf3!important;
}
.tf-about-v2-split{
grid-template-columns:1fr!important;
}
.tf-about-v2-trust-card{
min-height:220px!important;
}
}
@media(max-width:640px){
.tf-about-v2-why{
padding:14px 12px!important;
border-radius:13px!important;
}
.tf-about-v2-why__head h2{
font-size:22px!important;
}
.tf-about-v2-journey{
padding:12px!important;
border-radius:13px!important;
}
.tf-about-v2-journey__grid{
grid-template-columns:1fr!important;
}
.tf-about-v2-journey__grid article{
min-height:0!important;
padding:11px!important;
}
.tf-about-v2-trust-card{
min-height:190px!important;
padding:18px!important;
border-radius:14px!important;
}
.tf-about-v2-trust-card img{
width:175px!important;
max-width:72%!important;
margin-bottom:12px!important;
}
.tf-about-v2-trust-card strong{
font-size:20px!important;
}
}
/* Sprint 742 — Trade Secure left-content / right-icon premium card */
.tf-about-v2-trust-card{
display:grid!important;
grid-template-columns:minmax(0,1.25fr) minmax(220px,.75fr)!important;
align-items:center!important;
gap:28px!important;
width:100%!important;
max-width:none!important;
min-height:245px!important;
padding:26px 30px!important;
text-align:left!important;
}
.tf-about-v2-trust-card__content{
min-width:0!important;
}
.tf-about-v2-trust-card__eyebrow{
display:block!important;
margin:0 0 7px!important;
color:#ffbf2f!important;
font-size:9px!important;
font-weight:900!important;
letter-spacing:.14em!important;
text-transform:uppercase!important;
}
.tf-about-v2-trust-card__content strong{
display:block!important;
margin:0 0 7px!important;
text-align:left!important;
font-size:27px!important;
line-height:1.08!important;
}
.tf-about-v2-trust-card__content p{
max-width:620px!important;
margin:0 0 13px!important;
color:#dce8f7!important;
font-size:11px!important;
line-height:1.55!important;
}
.tf-about-v2-trust-card__points{
display:flex!important;
flex-wrap:wrap!important;
gap:6px!important;
}
.tf-about-v2-trust-card__points span{
display:inline-flex!important;
align-items:center!important;
min-height:30px!important;
padding:0 9px!important;
border:1px solid rgba(255,255,255,.16)!important;
border-radius:999px!important;
background:rgba(255,255,255,.07)!important;
color:#edf4fb!important;
font-size:9px!important;
text-align:left!important;
}
.tf-about-v2-trust-card__points span:before{
content:"✓";
margin-right:5px;
color:#ffbf2f;
font-weight:900;
}
.tf-about-v2-trust-card__media{
display:flex!important;
align-items:center!important;
justify-content:center!important;
min-height:150px!important;
}
.tf-about-v2-trust-card__media img{
width:min(100%,270px)!important;
max-width:270px!important;
max-height:130px!important;
object-fit:contain!important;
margin:0!important;
padding:0!important;
background:transparent!important;
border:0!important;
border-radius:0!important;
box-shadow:none!important;
}
@media(max-width:900px){
.tf-about-v2-trust-card{
grid-template-columns:1fr!important;
gap:18px!important;
padding:22px!important;
}
.tf-about-v2-trust-card__media{
justify-content:flex-start!important;
min-height:0!important;
}
.tf-about-v2-trust-card__media img{
width:220px!important;
max-width:65%!important;
}
}
@media(max-width:640px){
.tf-about-v2-trust-card{
padding:16px!important;
gap:14px!important;
}
.tf-about-v2-trust-card__content strong{
font-size:21px!important;
}
.tf-about-v2-trust-card__content p{
font-size:10.5px!important;
}
.tf-about-v2-trust-card__points{
gap:5px!important;
}
.tf-about-v2-trust-card__points span{
min-height:28px!important;
font-size:8.5px!important;
}
.tf-about-v2-trust-card__media img{
width:190px!important;
max-width:72%!important;
}
}
/* Sprint 743 — premium "More than product discovery" story section */
.tf-about-v2-story{
display:grid!important;
grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr)!important;
gap:24px!important;
align-items:stretch!important;
padding:18px!important;
border:1px solid var(--line)!important;
border-radius:18px!important;
background:linear-gradient(180deg,#fff 0%,#fbfdff 100%)!important;
box-shadow:0 12px 32px rgba(8,31,73,.045)!important;
}
.tf-about-v2-story__media{
position:relative!important;
min-height:360px!important;
border-radius:15px!important;
overflow:hidden!important;
background:#f6f8fb!important;
border:1px solid #e4eaf1!important;
display:flex!important;
align-items:center!important;
justify-content:center!important;
}
.tf-about-v2-story__media img{
width:100%!important;
height:100%!important;
max-height:none!important;
min-height:0!important;
object-fit:contain!important;
object-position:center!important;
border-radius:0!important;
background:#fff!important;
}
.tf-about-v2-image-chip{
left:14px!important;
bottom:14px!important;
padding:8px 10px!important;
border-radius:8px!important;
background:rgba(7,31,73,.94)!important;
box-shadow:0 6px 18px rgba(7,31,73,.18)!important;
font-size:9px!important;
}
.tf-about-v2-story__copy{
display:flex!important;
flex-direction:column!important;
justify-content:center!important;
max-width:none!important;
padding:10px 8px 10px 4px!important;
}
.tf-about-v2-story__copy .tf-about-v2-kicker{
margin-bottom:7px!important;
}
.tf-about-v2-story__copy h2{
max-width:620px!important;
margin:0 0 10px!important;
font-size:clamp(25px,2.25vw,35px)!important;
line-height:1.08!important;
}
.tf-about-v2-story__copy p{
max-width:720px!important;
margin:0 0 8px!important;
font-size:11.8px!important;
line-height:1.58!important;
}
.tf-about-v2-mini-grid{
gap:7px!important;
margin-top:11px!important;
}
.tf-about-v2-mini-grid div{
padding:11px 12px!important;
border-radius:10px!important;
background:#f8fafc!important;
border:1px solid #dfe7f0!important;
}
.tf-about-v2-mini-grid b{
font-size:11px!important;
}
.tf-about-v2-mini-grid span{
font-size:9.5px!important;
line-height:1.45!important;
}
@media(max-width:900px){
.tf-about-v2-story{
grid-template-columns:1fr!important;
gap:14px!important;
padding:14px!important;
}
.tf-about-v2-story__media{
min-height:0!important;
aspect-ratio:16/9!important;
}
.tf-about-v2-story__copy{
padding:4px 2px 2px!important;
}
}
@media(max-width:640px){
.tf-about-v2-story{
padding:10px!important;
border-radius:13px!important;
}
.tf-about-v2-story__media{
aspect-ratio:4/3!important;
border-radius:11px!important;
}
.tf-about-v2-story__copy h2{
font-size:22px!important;
}
.tf-about-v2-story__copy p{
font-size:10.8px!important;
}
.tf-about-v2-mini-grid{
grid-template-columns:1fr!important;
}
}
/* Sprint 744 — 2021-to-Today premium stair timeline on story section */
.tf-about-v2-story__copy{
justify-content:center!important;
}
.tf-about-v2-story-stairs{
display:grid;
gap:5px;
margin:13px 0 12px;
}
.tf-about-v2-story-step{
display:grid;
grid-template-columns:54px minmax(0,1fr);
gap:9px;
align-items:center;
min-height:47px;
padding:7px 10px;
border:1px solid #dfe7f0;
border-radius:10px;
background:#fff;
box-shadow:0 5px 14px rgba(8,31,73,.035);
position:relative;
transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease;
}
.tf-about-v2-story-step:hover{
transform:translateX(3px);
border-color:#bdd3ee;
box-shadow:0 8px 18px rgba(8,31,73,.06);
}
.tf-about-v2-story-step>span{
display:inline-flex;
align-items:center;
justify-content:center;
min-height:29px;
padding:0 6px;
border-radius:8px;
background:#edf5ff;
color:var(--blue);
font-size:9px;
font-weight:900;
letter-spacing:.05em;
}
.tf-about-v2-story-step b{
display:block;
margin-bottom:2px;
font-size:10.5px;
line-height:1.2;
}
.tf-about-v2-story-step small{
display:block;
color:#687a91;
font-size:8.8px;
line-height:1.35;
}
/* Create the stair effect without sacrificing content width */
.tf-about-v2-story-step--1{margin-left:0}
.tf-about-v2-story-step--2{margin-left:14px}
.tf-about-v2-story-step--3{margin-left:28px}
.tf-about-v2-story-step--4{margin-left:42px}
.tf-about-v2-story-step--5{margin-left:56px}
.tf-about-v2-story-step--6{
margin-left:70px;
border-color:#edc95d;
background:#fffaf0;
}
.tf-about-v2-story-step--6>span{
background:#ffbf2f;
color:#071f49;
}
/* connector spine */
.tf-about-v2-story-stairs{
position:relative;
}
.tf-about-v2-story-stairs:before{
content:"";
position:absolute;
left:26px;
top:16px;
bottom:16px;
width:1px;
background:linear-gradient(#b9cee8,#edc95d);
opacity:.75;
}
.tf-about-v2-story-step{
z-index:1;
}
/* Keep the image fully visible in the current image panel */
.tf-about-v2-story__media{
min-height:390px!important;
}
.tf-about-v2-story__media img{
object-fit:contain!important;
object-position:center!important;
}
/* Tablet/mobile: remove stair offset so text never squeezes */
@media(max-width:1100px){
.tf-about-v2-story-step--2,
.tf-about-v2-story-step--3,
.tf-about-v2-story-step--4,
.tf-about-v2-story-step--5,
.tf-about-v2-story-step--6{
margin-left:0!important;
}
.tf-about-v2-story-stairs:before{
left:26px!important;
}
}
@media(max-width:900px){
.tf-about-v2-story__media{
min-height:0!important;
}
.tf-about-v2-story-step{
min-height:44px;
}
}
@media(max-width:640px){
.tf-about-v2-story-stairs{
gap:4px;
margin:10px 0;
}
.tf-about-v2-story-stairs:before{
display:none;
}
.tf-about-v2-story-step{
grid-template-columns:47px minmax(0,1fr);
padding:7px 8px;
border-radius:9px;
}
.tf-about-v2-story-step b{
font-size:10px;
}
.tf-about-v2-story-step small{
font-size:8.3px;
}
}
/* Sprint 745 — Correct stair direction: journey climbs upward toward Today */
@media(min-width:1101px){
.tf-about-v2-story-stairs{
display:flex!important;
flex-direction:column!important;
gap:6px!important;
align-items:flex-start!important;
padding:4px 0!important;
}
/* Old downward staircase offsets removed.
New geometry: each newer milestone moves RIGHT and UP visually,
while card width reduces to preserve the staircase silhouette. */
.tf-about-v2-story-step{
margin-left:0!important;
width:100%!important;
}
.tf-about-v2-story-step--1{
width:82%!important;
margin-left:0!important;
}
.tf-about-v2-story-step--2{
width:85.5%!important;
margin-left:3.5%!important;
}
.tf-about-v2-story-step--3{
width:89%!important;
margin-left:7%!important;
}
.tf-about-v2-story-step--4{
width:92.5%!important;
margin-left:10.5%!important;
}
.tf-about-v2-story-step--5{
width:96%!important;
margin-left:14%!important;
}
.tf-about-v2-story-step--6{
width:82.5%!important;
margin-left:17.5%!important;
}
/* Remove misleading vertical line from the old orientation. */
.tf-about-v2-story-stairs:before{
display:none!important;
}
/* Add short riser/step connectors on the left edge. */
.tf-about-v2-story-step:not(:first-child):before{
content:""!important;
position:absolute!important;
left:-18px!important;
top:-8px!important;
width:18px!important;
height:14px!important;
border-left:1px solid #c7d8ec!important;
border-top:1px solid #c7d8ec!important;
border-radius:4px 0 0 0!important;
opacity:.95!important;
}
.tf-about-v2-story-step--6:before{
border-color:#e5b735!important;
}
}
/* On narrower screens timeline becomes a clean vertical journey. */
@media(max-width:1100px){
.tf-about-v2-story-step{
width:100%!important;
margin-left:0!important;
}
}
/* Sprint 746 — staircase rises from bottom-left to top-right */
@media(min-width:1101px){
.tf-about-v2-story-stairs{
display:flex!important;
flex-direction:column-reverse!important;
align-items:flex-start!important;
gap:6px!important;
padding:4px 0!important;
}
.tf-about-v2-story-step{
position:relative!important;
width:82%!important;
margin-left:0!important;
}
.tf-about-v2-story-step--1{margin-left:0!important;}
.tf-about-v2-story-step--2{margin-left:3.5%!important;}
.tf-about-v2-story-step--3{margin-left:7%!important;}
.tf-about-v2-story-step--4{margin-left:10.5%!important;}
.tf-about-v2-story-step--5{margin-left:14%!important;}
.tf-about-v2-story-step--6{margin-left:17.5%!important;}
.tf-about-v2-story-stairs:before,
.tf-about-v2-story-step:before{
display:none!important;
}
.tf-about-v2-story-step:not(.tf-about-v2-story-step--1):after{
content:""!important;
position:absolute!important;
left:-18px!important;
bottom:-8px!important;
width:18px!important;
height:14px!important;
border-left:1px solid #c7d8ec!important;
border-bottom:1px solid #c7d8ec!important;
border-radius:0 0 0 4px!important;
opacity:.95!important;
pointer-events:none!important;
}
.tf-about-v2-story-step--6{
border-color:#e5b735!important;
background:#fffaf0!important;
}
.tf-about-v2-story-step--6:after{
border-color:#e5b735!important;
}
}
@media(max-width:1100px){
.tf-about-v2-story-stairs{
display:grid!important;
}
.tf-about-v2-story-step{
width:100%!important;
margin-left:0!important;
}
.tf-about-v2-story-step:after{
display:none!important;
}
}