/* ============================================================ Made-in-World - "All Categories" panel Click to open/close. Hover a category to reveal the next level. Levels 3 and 4 are fetched on demand so page weight stays small. ============================================================ */ .apus-header .vertical-wrapper .content-vertical, body.home .apus-header .vertical-wrapper .content-vertical { display: none !important; } .apus-header .vertical-wrapper.is-open .content-vertical, body.home .apus-header .vertical-wrapper.is-open .content-vertical { display: block !important; } .vertical-wrapper .title-vertical { cursor: pointer; } .apus-header .vertical-wrapper .content-vertical { z-index: 999; background: #fff; overflow: visible; } .apus-vertical-menu { background: #fff; } .apus-vertical-menu li { position: relative; } .apus-vertical-menu .sub-menu { display: none; position: absolute; /* sits beside its parent item */ top: 0; left: 100%; min-width: 260px; max-height: 78vh; overflow-y: auto; margin: 0; padding: 8px 0; list-style: none; background: #fff; border: 1px solid #ebebeb; box-shadow: 0 6px 18px rgba(0,0,0,.10); z-index: 1200; } .apus-vertical-menu li:hover > .sub-menu { display: block; } .apus-vertical-menu .sub-menu a { display: block; padding: 7px 18px; font-size: 13px; line-height: 1.4; white-space: normal; } .apus-vertical-menu .sub-menu a:hover { background: #f6f7f9; } /* arrow on anything that has (or may have) deeper levels */ .apus-vertical-menu li.menu-item-has-children > a::after { content: "\203A"; float: right; opacity: .55; font-size: 15px; line-height: 1.2; } .apus-vertical-menu li.miw-loading > a::after { content: "\22EF"; opacity: .8; } /* flyouts near the right edge open to the left instead */ /* flyout side is decided in js/functions.js when using fixed positioning */ @media (max-width: 991px) { .apus-vertical-menu .sub-menu { position: static !important; top: auto !important; left: auto !important; left: auto; border: 0; box-shadow: none; background: #fafbfc; max-height: none; padding-left: 12px; } .apus-vertical-menu li:hover > .sub-menu { display: none; } .apus-vertical-menu li.is-open > .sub-menu { display: block; } } /* flyout panels for level 3 and deeper, attached to so nothing clips them */ ul.miw-flyout { position: fixed; z-index: 100000; min-width: 250px; max-width: 320px; max-height: 78vh; overflow-y: auto; margin: 0; padding: 8px 0; list-style: none; background: #fff; border: 1px solid #ebebeb; box-shadow: 0 8px 24px rgba(0,0,0,.14); } ul.miw-flyout > li { position: relative; list-style: none; } ul.miw-flyout > li > a { display: block; padding: 7px 18px; font-size: 13px; line-height: 1.4; color: #333; white-space: normal; text-decoration: none; } ul.miw-flyout > li > a:hover { background: #f6f7f9; } .apus-vertical-menu .sub-menu > li.miw-has-children > a::after, ul.miw-flyout > li.miw-has-children > a::after { content: "\203A"; float: right; opacity: .55; } /* keep the parent levels visible while a deeper flyout is open */ .apus-vertical-menu li.miw-hold > .sub-menu { display: block !important; } .apus-vertical-menu li.miw-active > a, ul.miw-flyout > li.miw-active > a { background: #f6f7f9; } /* ---------- registration: choose buyer or supplier first ---------- */ .miw-role-choice { margin: 0 0 26px; padding: 0 0 22px; border-bottom: 1px solid #ebebeb; } .miw-role-question { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: #333; } .miw-role-options { display: flex; gap: 12px; flex-wrap: wrap; } .miw-role-option { flex: 1 1 240px; display: flex; align-items: flex-start; gap: 10px; margin: 0; padding: 14px 16px; border: 1px solid #dcdcdc; border-radius: 3px; background: #fff; cursor: pointer; font-weight: 400; transition: border-color .15s ease, background .15s ease; } .miw-role-option:hover { border-color: #bdbdbd; } .miw-role-option input { margin: 3px 0 0; flex: none; } .miw-role-body { display: flex; flex-direction: column; gap: 3px; } .miw-role-title { font-size: 15px; font-weight: 600; color: #222; line-height: 1.3; } .miw-role-desc { font-size: 12.5px; color: #888; line-height: 1.45; } .miw-role-option:has(input:checked) { border-color: #e94d1c; background: #fff8f5; } .miw-role-option:has(input:checked) .miw-role-title { color: #e94d1c; } /* supplier signup: business type radios */ .miw-btype { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 4px; } .miw-btype-opt { font-weight: 400; display: inline-flex; align-items: center; gap: 6px; margin: 0; } /* ---------- supplier company profile ---------- */ .miw-company-profile { margin: 22px 0; padding: 20px 22px; border: 1px solid #ebebeb; border-radius: 3px; background: #fff; } .miw-company-profile h3 { margin: 0 0 14px; font-size: 16px; font-weight: 650; color: #222; } .miw-company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px 26px; margin: 0; } .miw-company-row { display: flex; flex-direction: column; gap: 2px; } .miw-company-row dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: #999; font-weight: 500; } .miw-company-row dd { margin: 0; font-size: 14px; color: #333; font-weight: 500; } .miw-company-products { margin-top: 18px; padding-top: 16px; border-top: 1px solid #f0f0f0; } .miw-company-products h4 { margin: 0 0 6px; font-size: 13px; font-weight: 650; color: #444; } .miw-company-products p { margin: 0; font-size: 14px; color: #555; line-height: 1.6; } /* supplier meta in the directory */ .miw-store-meta { font-size: 12.5px; color: #888; margin-top: 2px; } /* country filter */ .miw-country-filter { display: inline-block; margin-right: 10px; } .miw-country-filter label { font-size: 13px; margin-right: 6px; }