/* AUDIOSTAFF merged body CSS */ #audiostaff-home-button { position: fixed !important; left: 16px !important; bottom: 16px !important; z-index: 2147483647 !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 7px !important; min-width: 82px !important; height: 40px !important; padding: 0 14px !important; margin: 0 !important; background: #111111 !important; color: #ffffff !important; border: 1px solid #111111 !important; border-radius: 999px !important; box-shadow: 0 6px 20px rgba(0,0,0,.2) !important; font-size: 12px !important; font-weight: 700 !important; line-height: 1 !important; text-decoration: none !important; opacity: 1 !important; visibility: visible !important; transform: none !important; cursor: pointer !important; } #audiostaff-home-button:hover { background: #222222 !important; } #audiostaff-home-button .audiostaff-home-icon { display: inline-block !important; font-size: 18px !important; line-height: 1 !important; } #audiostaff-home-button .audiostaff-home-label { display: inline-block !important; } @media (max-width: 700px) { #audiostaff-home-button { left: 10px !important; bottom: 10px !important; width: 40px !important; min-width: 40px !important; height: 40px !important; padding: 0 !important; } #audiostaff-home-button .audiostaff-home-label { display: none !important; } } /* Reuse the existing studio shell and form styles for dealer registration. */ html body #as-studio-login:has(.as-dealer-register) .asl-card{max-width:620px!important;} #as-studio-login:has(.as-dealer-register) .asl-card-head{display:none!important;} html body #as-studio-login .as-dealer-register{max-width:none!important;margin:0!important;padding:0!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;color:var(--ink)!important;} #as-studio-login .as-register-head{margin:0 0 25px!important;} #as-studio-login .as-register-head span{display:none!important;} html body #as-studio-login .as-register-head h1{font-size:24px!important;line-height:1.25!important;letter-spacing:-.8px!important;font-weight:600!important;margin:0 0 6px!important;color:var(--ink)!important;} html body #as-studio-login .as-register-head p{font-size:12px!important;line-height:1.6!important;margin:0!important;color:var(--muted)!important;} #as-studio-login .as-register-grid{gap:17px 16px!important;margin-bottom:22px!important;} #as-studio-login .as-field{min-width:0!important;} @media(max-width:600px){#as-studio-login .as-register-grid{grid-template-columns:1fr!important;}#as-studio-login .as-wide{grid-column:auto!important;}} .wp-interactivity-router-loading-bar { position: fixed; top: 0; left: 0; margin: 0; padding: 0; width: 100vw; max-width: 100vw !important; height: 4px; background-color: #000; opacity: 0 } .wp-interactivity-router-loading-bar.start-animation { animation: wp-interactivity-router-loading-bar-start-animation 30s cubic-bezier(0.03, 0.5, 0, 1) forwards } .wp-interactivity-router-loading-bar.finish-animation { animation: wp-interactivity-router-loading-bar-finish-animation 300ms ease-in } @keyframes wp-interactivity-router-loading-bar-start-animation { 0% { transform: scaleX(0); transform-origin: 0 0; opacity: 1 } 100% { transform: scaleX(1); transform-origin: 0 0; opacity: 1 } } @keyframes wp-interactivity-router-loading-bar-finish-animation { 0% { opacity: 1 } 50% { opacity: 1 } 100% { opacity: 0 } } /*# sourceURL=wp-interactivity-router-animations-inline-css */ @media screen and (max-width:782px){ /* 1) Cart + checkout block line items: keep name/price, drop the long description. */ .wc-block-components-product-metadata__description{display:none!important} /* 2) Feedback chip: compact circle; quiet on checkout; above the cart CTA bar. */ .asfb-chip{width:44px!important;height:44px!important;min-width:44px!important;min-height:44px!important;padding:0!important;border-radius:50%!important;justify-content:center!important;gap:0!important;left:12px!important} .asfb-chip .asfb-chip-label{display:none!important} body.woocommerce-cart .asfb-chip{bottom:calc(88px + env(safe-area-inset-bottom,0px) + 10px)!important} body.woocommerce-checkout .asfb-chip, body.woocommerce-checkout #as-mobile-tools{display:none!important} /* 3) Payment option radios: normal native circles, not 26x44 ovals. */ .wc-block-components-radio-control__input{appearance:auto!important;-webkit-appearance:auto!important;width:18px!important;min-width:18px!important;height:18px!important;min-height:18px!important;max-height:18px!important;transform:none!important;border-radius:50%!important;flex:0 0 18px!important;margin:3px 0 0!important;box-shadow:none!important} /* 4) Dealer benefits volume pricing block. */ .asdb-product .asdb-progress{display:block!important} .asdb-product .asdb-progress>div{display:flex!important;width:100%!important;justify-content:space-between!important;align-items:baseline!important;gap:8px!important} .asdb-product .asdb-progress>div>strong{white-space:nowrap!important;flex:0 0 auto!important} .asdb-product .asdb-progress progress{display:block!important;width:100%!important;max-width:100%!important} } /* Floating helpers must not cover the full-screen Order Workspace while it is open. */ @media screen and (max-width:782px){ body.as-b2b-panel-open #as-mobile-tools, body.as-b2b-panel-open .asfb-chip{display:none!important} } .as-shipment-media-admin{margin:14px 0 4px;padding:14px;border:1px dashed #8a8f98;border-radius:10px;background:rgba(0,0,0,.035)} .as-shipment-media-admin strong{display:block;margin-bottom:4px}.as-shipment-media-admin p{margin:0 0 10px;color:#697386;font-size:12px}.as-shipment-media-admin input{max-width:100%}.as-shipment-media-admin button{margin-left:7px}.as-shipment-media-status{margin-left:8px;font-size:12px} .as-shipment-media-gallery{--asm-card:var(--ls-soft,#f7f7f9);--asm-text:var(--ls-text,#1d2327);--asm-muted:var(--ls-muted,#646970);--asm-line:var(--ls-line,#e3e3e8);--asm-accent:var(--ls-accent,#6550a1);--asm-frame:rgba(15,20,30,.055);margin-top:16px;padding-top:15px;border-top:1px solid var(--asm-line)} html[data-as-display-mode="dark"] .as-shipment-media-gallery,html[data-as-display-mode="grey"] .as-shipment-media-gallery{--asm-frame:rgba(0,0,0,.30)} .as-shipment-media-gallery h4{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:0 0 12px;font-size:10.5px;line-height:1.4;font-weight:750;letter-spacing:.10em;text-transform:uppercase;color:var(--asm-muted)} html:root:root:root .as-shipment-media-gallery h4{font-size:10.5px!important;line-height:1.4!important} .as-shipment-media-gallery h4 em{font-style:normal;font-weight:700;letter-spacing:0;text-transform:none;font-size:11px;line-height:1.4;padding:2px 7px;border-radius:999px;background:var(--asm-card);color:var(--asm-muted)} .as-shipment-media-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(185px,1fr));gap:14px} .as-shipment-media-card{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:1px solid var(--asm-line);border-radius:14px;background:var(--asm-card);color:inherit;text-decoration:none;transition:transform .18s ease,border-color .18s ease,box-shadow .18s ease} .as-shipment-media-card:hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--asm-accent) 42%,var(--asm-line));box-shadow:0 12px 26px rgba(14,16,24,.10)} .as-shipment-media-card:focus-visible{outline:2px solid var(--asm-accent);outline-offset:2px} .as-media-frame{position:relative;display:block;width:100%;aspect-ratio:4/3;overflow:hidden;background:var(--asm-frame)} .as-media-frame img,.as-media-frame video{display:block;width:100%;height:100%;object-fit:cover} .as-shipment-media-document .as-media-frame img{object-fit:contain;padding:13px 13px 11px;filter:drop-shadow(0 3px 7px rgba(12,14,20,.20))} .as-media-kind{position:absolute;top:8px;left:8px;z-index:2;padding:3px 7px;border-radius:6px;font-style:normal;font-size:9.5px;line-height:1.2;font-weight:750;letter-spacing:.07em;color:#fff;background:rgba(17,19,26,.74);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)} .as-media-kind-pdf{background:rgba(178,44,38,.92)} .as-media-kind-xls,.as-media-kind-xlsx,.as-media-kind-csv,.as-media-kind-ods{background:rgba(24,107,68,.92)} .as-media-kind-jpg,.as-media-kind-jpeg,.as-media-kind-png,.as-media-kind-webp,.as-media-kind-gif{background:rgba(34,78,148,.90)} .as-media-kind-mp4,.as-media-kind-webm,.as-media-kind-mov{background:rgba(90,61,150,.92)} .as-media-play{position:absolute;inset:0;z-index:1;display:grid;place-items:center;pointer-events:none} .as-media-play:before{content:'';width:42px;height:42px;border-radius:50%;background:rgba(15,17,24,.66);box-shadow:0 4px 14px rgba(0,0,0,.3);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .as-media-play:after{content:'';position:absolute;left:calc(50% - 4px);top:calc(50% - 8px);border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #fff} .as-media-cta{position:absolute;right:8px;bottom:8px;z-index:2;display:inline-flex;align-items:center;gap:4px;padding:4px 8px;border-radius:999px;font-style:normal;font-size:10px;line-height:1.2;font-weight:650;color:#fff;background:rgba(17,19,26,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transform:translateY(4px);transition:opacity .16s ease,transform .16s ease;pointer-events:none} .as-shipment-media-card:hover .as-media-cta,.as-shipment-media-card:focus-visible .as-media-cta{opacity:1;transform:none} .as-media-body{display:flex;flex-direction:column;gap:3px;padding:10px 11px 11px;min-width:0} .as-media-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;overflow-wrap:anywhere;font-size:12px;line-height:1.35;font-weight:620;color:var(--asm-text)} .as-media-meta{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-style:normal;font-size:10.5px;line-height:1.3;letter-spacing:.015em;color:var(--asm-muted)} .as-media-fallback{position:absolute;inset:0;display:grid;place-items:center} .as-media-paper{display:flex;flex-direction:column;gap:5px;width:46%;aspect-ratio:3/4;padding:9px 8px;border-radius:5px;background:#fff;border:1px solid rgba(15,20,30,.07);box-shadow:0 7px 18px rgba(12,14,20,.16)} .as-media-paper i{display:block;height:3px;border-radius:2px;background:#e3e6ec} .as-media-paper i:nth-child(1){height:9px;border-radius:2px;background:#6550a1;margin-bottom:3px} .as-media-paper.is-sheet i:nth-child(1){background:#186b44} .as-media-paper i:nth-child(4){width:72%}.as-media-paper i:nth-child(5){width:84%}.as-media-paper i:nth-child(6){width:55%} @media(max-width:520px){.as-shipment-media-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}.as-media-name{font-size:11.5px}.as-media-body{padding:9px 10px 10px}} /* The portal applies global/readable typography with !important; these scoped overrides keep the gallery's own hierarchy in both the customer portal and wp-admin. */ html:root:root:root:root:root:root body .as-shipment-media-gallery.as-shipment-media-gallery h4{font-size:10.5px!important;line-height:1.4!important;font-weight:750!important;letter-spacing:.10em!important} html:root:root:root:root:root:root body .as-shipment-media-gallery.as-shipment-media-gallery h4 em{font-size:11px!important;line-height:1.4!important;letter-spacing:0!important;font-weight:700!important} html:root:root:root:root:root:root body .as-shipment-media-gallery.as-shipment-media-gallery .as-media-name{font-size:12px!important;line-height:1.35!important;font-weight:620!important;letter-spacing:normal!important} html:root:root:root:root:root:root body .as-shipment-media-gallery.as-shipment-media-gallery .as-media-meta{font-size:10.5px!important;line-height:1.3!important;font-weight:400!important;letter-spacing:.015em!important;font-style:normal!important} html:root:root:root:root:root:root body .as-shipment-media-gallery.as-shipment-media-gallery .as-media-kind{font-size:9.5px!important;line-height:1.2!important;font-weight:750!important;letter-spacing:.07em!important} html:root:root:root:root:root:root body .as-shipment-media-gallery.as-shipment-media-gallery .as-media-cta{font-size:10px!important;line-height:1.2!important;font-weight:650!important} html:root:root:root:root:root:root body .as-shipment-media-gallery.as-shipment-media-gallery .as-shipment-file-delete{font-size:10px!important;line-height:1.25!important;font-weight:700!important} .as-shipment-media-admin{display:none!important} .as-shipment-media-inline{grid-column:1/-1;margin:2px 0 4px;padding:14px;border:1px dashed rgba(173,148,231,.62);border-radius:12px;background:rgba(185,161,244,.055)} .as-shipment-media-drop{position:relative;display:flex;align-items:center;justify-content:center;min-height:108px;padding:18px;border:1px dashed rgba(198,182,244,.45);border-radius:9px;cursor:pointer;transition:.18s ease;background:rgba(255,255,255,.015);text-align:center}.as-shipment-media-drop:hover,.as-shipment-media-drop.is-dragging{border-color:#c6b5ff;background:rgba(185,161,244,.13);transform:translateY(-1px)}.as-shipment-media-drop-icon{display:block;margin:0 auto 6px;width:28px;height:28px;border-radius:9px;background:rgba(202,181,255,.2);color:#d5c6f4;line-height:28px;font-size:18px}.as-shipment-media-drop strong{display:block;font-size:13px}.as-shipment-media-drop small{display:block;margin-top:4px;font-size:11px;opacity:.68}.as-shipment-media-drop input{position:absolute!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none!important}.as-shipment-media-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}.as-shipment-media-file{position:relative;width:102px;overflow:hidden;border:1px solid rgba(198,182,244,.3);border-radius:8px;background:rgba(0,0,0,.2)}.as-shipment-media-file img,.as-shipment-media-file video{display:block;width:100%;height:65px;object-fit:cover;background:#202631}.as-shipment-media-file-name{display:block;padding:5px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:10px}.as-shipment-media-file-remove{position:absolute;right:4px;top:4px;width:20px;height:20px;border:0;border-radius:50%;background:rgba(0,0,0,.75);color:#ffffff;cursor:pointer;font-size:14px;line-height:18px}.as-shipment-media-inline-status{display:block;margin-top:8px;font-size:12px;color:#c6b5ff} .as-evidence-preview[hidden]{display:none}.as-evidence-preview{position:fixed;z-index:999999;inset:0;display:grid;place-items:center;padding:clamp(12px,3vw,36px);background:rgba(5,7,12,.76);backdrop-filter:blur(13px);-webkit-backdrop-filter:blur(13px);animation:asEvidenceIn .16s ease}.as-evidence-preview-panel{position:relative;display:flex;flex-direction:column;width:min(1120px,100%);max-height:calc(100dvh - 24px);overflow:hidden;border:1px solid rgba(255,255,255,.16);border-radius:16px;background:#111111;box-shadow:0 28px 90px rgba(0,0,0,.55)}.as-evidence-preview-stage{display:grid;place-items:center;min-height:250px;flex:1;overflow:hidden;background:radial-gradient(circle at 50% 30%,#36383d 0,#151820 58%)}.as-evidence-preview-stage img,.as-evidence-preview-stage video{display:block;max-width:100%;max-height:min(76dvh,780px);object-fit:contain}.as-evidence-preview-stage video{width:min(100%,980px);background:#000000}.as-evidence-preview-close,.as-evidence-preview-nav{position:absolute;z-index:2;display:grid;place-items:center;border:1px solid rgba(255,255,255,.17);border-radius:50%;background:rgba(15,17,24,.78);color:#ffffff;cursor:pointer;backdrop-filter:blur(8px);transition:.16s ease}.as-evidence-preview-close{top:14px;right:14px;width:40px;height:40px;font-size:26px;line-height:1}.as-evidence-preview-nav{top:50%;width:46px;height:46px;font-size:28px;transform:translateY(-50%)}.as-evidence-preview-nav.prev{left:15px}.as-evidence-preview-nav.next{right:15px}.as-evidence-preview-close:hover,.as-evidence-preview-nav:hover{border-color:#d5c6f4;background:rgba(97,76,150,.76);transform:translateY(-1px)}.as-evidence-preview-nav:hover{transform:translateY(-50%) scale(1.05)}.as-evidence-preview-nav:disabled{opacity:.25;pointer-events:none}.as-evidence-preview-meta{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:13px 18px;color:#edf4ff;background:#151820}.as-evidence-preview-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px;font-weight:600}.as-evidence-preview-count{flex:0 0 auto;font-size:12px;color:#bbb1ca}.as-evidence-preview-hint{position:absolute;left:50%;bottom:58px;z-index:1;transform:translateX(-50%);padding:6px 10px;border-radius:20px;background:rgba(0,0,0,.5);color:rgba(255,255,255,.75);font-size:11px;pointer-events:none}@keyframes asEvidenceIn{from{opacity:0}to{opacity:1}}@media(max-width:640px){.as-evidence-preview{padding:0}.as-evidence-preview-panel{width:100%;height:100dvh;max-height:none;border:0;border-radius:0}.as-evidence-preview-stage img,.as-evidence-preview-stage video{max-height:calc(100dvh - 62px)}.as-evidence-preview-nav{top:auto;bottom:72px;width:42px;height:42px}.as-evidence-preview-nav.prev{left:14px}.as-evidence-preview-nav.next{right:14px}.as-evidence-preview-hint{display:none}} /* ========================================= BRAND STRIP ========================================= */ .as-b2b-brands { display:flex; align-items:center; justify-content:center; gap:7px; flex-wrap:wrap; margin:0 0 11px 0; } .as-b2b-brands-label { margin-right:5px; color:#aaaaaa; font-size:9px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; } /* ========================================= BRAND BUTTON ========================================= */ .as-b2b-brand { appearance:none; height:30px; padding:0 13px; display:inline-flex; align-items:center; justify-content:center; border: 1px solid #dddddd; border-radius:999px; background:#ffffff; color:#777777; font-family:inherit; font-size:10px; font-weight:650; letter-spacing:.045em; line-height:1; white-space:nowrap; cursor:pointer; transition: background .15s ease, color .15s ease, border-color .15s ease, transform .15s ease; } .as-b2b-brand:hover { border-color:#999999; color:#111111; transform: translateY(-1px); } /* SELECTED BRAND */ .as-b2b-brand.active { background:#111111 !important; color:#ffffff !important; border-color:#111111 !important; } /* ========================================= MOBILE ========================================= */ @media (max-width:700px) { .as-b2b-brands { width:100%; justify-content:center; gap:5px; margin: 10px 0 14px; } .as-b2b-brands-label { flex-basis:100%; width:100%; margin: 0 0 3px; text-align:center; font-size:7px; } .as-b2b-brand { height:26px; padding: 0 9px; font-size:7px; } } .as-brand-filter-active { background:#111111 !important; color:#ffffff !important; border-color:#111111 !important; } /* ------------------------------------------------------------------------- 1) Header actions on mobile. The row was a fixed-height nowrap scroller whose items kept shrinking to ~18px, so every label spilled over its neighbour. Keep every control at its natural width and let the row scroll horizontally instead. ------------------------------------------------------------------------- */ @media (max-width: 700px) { html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) #as-home-compact-root.as-pl-v3 > .as-pl-v3-header > .as-pl-v3-header-actions, html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 > .as-pl-v3-header > .as-pl-v3-header-actions { flex-wrap: nowrap !important; justify-content: flex-start !important; align-items: flex-start !important; height: auto !important; max-height: none !important; min-height: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; padding: 0 2px !important; gap: 6px !important; scrollbar-width: none; -webkit-overflow-scrolling: touch; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) #as-home-compact-root.as-pl-v3 > .as-pl-v3-header > .as-pl-v3-header-actions::-webkit-scrollbar, html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 > .as-pl-v3-header > .as-pl-v3-header-actions::-webkit-scrollbar { display: none; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) #as-home-compact-root.as-pl-v3 > .as-pl-v3-header > .as-pl-v3-header-actions > :is(a, button, .as-nav-dropdown, .as-dash-switch), html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 > .as-pl-v3-header > .as-pl-v3-header-actions > :is(a, button, .as-nav-dropdown, .as-dash-switch) { flex: 0 0 auto !important; width: auto !important; max-width: none !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions > :is(a, button) { height: 44px !important; min-height: 44px !important; max-height: 44px !important; white-space: nowrap !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions .as-nav-dropdown { height: auto !important; min-height: 44px !important; max-height: none !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions .as-nav-dropdown > summary { height: 44px !important; min-height: 44px !important; white-space: nowrap !important; } /* Mobile priority: New Order and My Company first, then Orders, view switch and the secondary tools. */ html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions > * { order: 50 !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions > .as-nav-new { order: 10 !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions > .as-nav-company { order: 20 !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions > .as-nav-orders { order: 30 !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions > .as-dash-switch { order: 40 !important; } /* Keep the options inside the flow and inside their own control: an open menu grows the row instead of covering the neighbour buttons. */ html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions .as-nav-options { position: static !important; inset: auto !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 6px 0 0 !important; box-shadow: 0 10px 24px rgba(0, 0, 0, .12) !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-pl-v3-header-actions .as-nav-options > :is(a, button) { white-space: normal !important; text-align: left !important; min-height: 38px !important; padding: 8px 10px !important; } } /* ------------------------------------------------------------------------- 2) Collapsed Terms & Conditions. The terms strip inside the collapsible wrapper was left with opacity:0 but still ~66px tall (height:auto / max-height:none from the compact skin), so it showed up as dead space between the toggle and the tools. ------------------------------------------------------------------------- */ html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-terms-wrapper:not(.is-open) .as-b2b-terms.as-cb-terms-compact.as-terms-content { max-height: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-width: 0 !important; opacity: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } html:root:root:root:root:root:root:root:root body:is(.as-dealer-fast,.as-dealer-new):not(.as-b2b-dashboard-mode) .as-pl-v3 .as-terms-wrapper.is-open .as-b2b-terms.as-cb-terms-compact.as-terms-content { max-height: none !important; height: auto !important; min-height: 0 !important; margin: 10px 0 0 !important; opacity: 1 !important; visibility: visible !important; overflow-x: auto !important; overflow-y: hidden !important; pointer-events: auto !important; } /* Fallback for any other screen that renders the same wrapper. */ html body .as-terms-wrapper:not(.is-open) .as-terms-content { max-height: 0 !important; height: 0 !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-width: 0 !important; opacity: 0 !important; overflow: hidden !important; visibility: hidden !important; pointer-events: none !important; } /* ------------------------------------------------------------------------- 3) Catalog table width on laptop screens (~1440px). The table had a hard 1480px floor, so a maximized 1440px window always needed a small horizontal scroll to reach TOTAL. Trim the fixed columns and lower the floor to 1300px; the columns driven by --ascc-* keep their shares (snippet 21 now distributes width - 794). ------------------------------------------------------------------------- */ @media (min-width: 701px) { html body .as-pl-v3 table.as-pl-v3-table { min-width: 1300px !important; } html body .as-pl-v3 table.as-pl-v3-table .col-product { width: 380px !important; } html body .as-pl-v3 table.as-pl-v3-table .col-price { width: 180px !important; } html body .as-pl-v3 table.as-pl-v3-table .col-weight { width: 84px !important; } html body .as-pl-v3 table.as-pl-v3-table .col-dimensions { width: 150px !important; } } .as-access-login-cta{ margin:20px 0 0; padding:18px 0 0; border-top:1px solid #eeeeee; text-align:center; } .as-access-login-cta strong{ display:block; margin-bottom:5px; color:#111111; font-size:12px; font-weight:700; } .as-access-login-cta p{ margin:0 0 10px!important; color:#888!important; font-size:10px!important; line-height:1.45!important; } .as-access-request-button{ width:100%; min-height:42px; border:1px solid #111111; border-radius:999px; background:#ffffff; color:#111111; font-size:11px; font-weight:700; cursor:pointer; transition:background .15s ease,color .15s ease; } .as-access-request-button:hover{ background:#111111; color:#ffffff; } .as-access-invite-link{ display:inline-block; margin-top:11px; color:#888!important; font-size:9px; text-decoration:none!important; } .as-access-invite-link:hover{ color:#111!important; text-decoration:underline!important; } .as-access-modal{ display:none; position:fixed; inset:0; z-index:2147483647; } .as-access-modal.open{ display:flex; align-items:center; justify-content:center; padding:22px; } .as-access-backdrop{ position:absolute; inset:0; background:rgba(0,0,0,.35); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px); } .as-access-dialog{ position:relative; z-index:2; width:min(680px,100%); max-height:calc(100vh - 44px); overflow:auto; box-sizing:border-box; padding:30px; border:1px solid rgba(0,0,0,.10); border-radius:18px; background:#ffffff; box-shadow:0 30px 100px rgba(0,0,0,.25); font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } .as-access-close{ position:absolute; top:16px; right:16px; width:34px; height:34px; border:0; border-radius:50%; background:#eeeeee; color:#111111; font-size:20px; line-height:1; cursor:pointer; } .as-access-eyebrow{ margin-bottom:8px; color:#999999; font-size:9px; font-weight:750; letter-spacing:.15em; } .as-access-dialog h2{ margin:0 0 8px!important; color:#111!important; font-size:30px!important; line-height:1.05!important; letter-spacing:-.04em!important; } .as-access-lead{ max-width:510px; margin:0 0 24px!important; color:#777!important; font-size:12px!important; line-height:1.5!important; } .as-access-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; } .as-access-wide{ grid-column:1 / -1; } .as-access-field label, .as-access-brands>label{ display:block; margin:0 0 6px; color:#303030; font-size:10px; font-weight:700; } .as-access-field input, .as-access-field select, .as-access-field textarea{ width:100%!important; box-sizing:border-box!important; border:1px solid #ddd!important; border-radius:8px!important; background:#fff!important; color:#111!important; box-shadow:none!important; font-family:inherit!important; font-size:11px!important; } .as-access-field input, .as-access-field select{ min-height:42px!important; padding:0 11px!important; } .as-access-field textarea{ min-height:100px!important; padding:10px 11px!important; resize:vertical; } .as-access-field input:focus, .as-access-field select:focus, .as-access-field textarea:focus{ outline:none!important; border-color:#111!important; box-shadow:0 0 0 3px rgba(0,0,0,.05)!important; } .as-access-brands{ margin:18px 0; } .as-access-brand-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:7px; } .as-access-brand{ display:flex!important; align-items:center; gap:8px; min-height:36px; box-sizing:border-box; padding:0 10px; border:1px solid #dddddd; border-radius:7px; background:#ffffff; cursor:pointer; } .as-access-brand input{ width:auto!important; margin:0!important; } .as-access-brand span{ color:#303030; font-size:9px; font-weight:600; } .as-access-submit{ width:100%; min-height:46px; margin-top:18px; border:0; border-radius:999px; background:#111111; color:#ffffff; font-size:11px; font-weight:700; cursor:pointer; } .as-access-submit:disabled{ opacity:.5; cursor:wait; } .as-access-result{ display:none; margin-top:12px; padding:10px 12px; border-radius:7px; background:#eeeeee; color:#555555; font-size:10px; line-height:1.5; } .as-access-result.show{ display:block; } .as-access-result.success{ background:#eeeeee; color:#2f6d3d; } .as-access-result.error{ background:#fdecec; color:#98312b; } .as-access-honeypot{ position:absolute!important; left:-99999px!important; width:1px!important; height:1px!important; overflow:hidden!important; } @media(max-width:700px){ .as-access-modal.open{ padding:10px; align-items:flex-end; } .as-access-dialog{ max-height:94vh; padding:24px 18px 26px; border-radius:18px 18px 10px 10px; } .as-access-dialog h2{ font-size:25px!important; } .as-access-grid{ grid-template-columns:1fr; } .as-access-wide{ grid-column:auto; } .as-access-brand-grid{ grid-template-columns:1fr; } } /* Base: graphite glass, deliberately neutral so it belongs to any theme. */ #as-prominent-brand-filters.as-b2b-brands { --as-bf-surface:rgba(18,22,29,.30); --as-bf-line:rgba(255,255,255,.11); --as-bf-text:#eeeeee; --as-bf-muted:rgba(235,241,246,.63); --as-bf-chip:rgba(255,255,255,.055); --as-bf-chip-hover:rgba(255,255,255,.115); --as-bf-active-a:#dfe4ea; --as-bf-active-b:#93b3bd; --as-bf-active-text:#202631; width:100% !important; max-width:none !important; display:flex !important; flex-wrap:wrap !important; align-items:center !important; justify-content:flex-start !important; gap:8px !important; box-sizing:border-box !important; margin:10px 0 16px !important; padding:13px !important; border:1px solid var(--as-bf-line) !important; border-radius:18px !important; background: linear-gradient(115deg,rgba(255,255,255,.085),transparent 27%), radial-gradient(ellipse at 92% 0%,rgba(162,210,218,.11),transparent 34%), var(--as-bf-surface) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 10px 24px rgba(0,0,0,.10) !important; /* Static glass: no backdrop blur, no GPU-heavy continuous effect. */ backdrop-filter:none !important; -webkit-backdrop-filter:none !important; } /* Light: pearl glass, charcoal type, steel-blue active state. */ html:is([data-as-display-mode="light"],[data-as-appearance="light"]) #as-prominent-brand-filters.as-b2b-brands { --as-bf-surface:rgba(250,252,253,.68); --as-bf-line:rgba(35,49,59,.13); --as-bf-text:#202631; --as-bf-muted:rgba(29,39,45,.59); --as-bf-chip:rgba(255,255,255,.72); --as-bf-chip-hover:rgba(228,238,241,.88); --as-bf-active-a:#203247; --as-bf-active-b:#315d6a; --as-bf-active-text:#ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.92), 0 16px 35px rgba(29,43,50,.10) !important; } /* Grey: brushed-metal glass, not white and not black. */ html:is([data-as-display-mode="grey"],[data-as-display-mode="gray"],[data-as-appearance="grey"],[data-as-appearance="gray"]) #as-prominent-brand-filters.as-b2b-brands { --as-bf-surface:rgba(74,80,88,.24); --as-bf-line:rgba(255,255,255,.22); --as-bf-text:#202631; --as-bf-muted:rgba(31,40,48,.61); --as-bf-chip:rgba(247,250,252,.47); --as-bf-chip-hover:rgba(255,255,255,.67); --as-bf-active-a:#233f4a; --as-bf-active-b:#4f7884; --as-bf-active-text:#ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 14px 30px rgba(33,41,49,.13) !important; } #as-prominent-brand-filters .as-b2b-brands-label { flex:0 0 100% !important; width:100% !important; margin:0 0 1px !important; color:var(--as-bf-muted) !important; font-size:10px !important; font-weight:800 !important; letter-spacing:.16em !important; text-align:left !important; text-transform:uppercase !important; } #as-prominent-brand-filters button.as-b2b-brand { position:relative !important; isolation:isolate !important; overflow:hidden !important; box-sizing:border-box !important; appearance:none !important; display:inline-flex !important; align-items:center !important; justify-content:center !important; flex:0 1 auto !important; min-height:45px !important; min-width:108px !important; max-width:100% !important; padding:11px 17px !important; border:1px solid var(--as-bf-line) !important; border-radius:12px !important; background:var(--as-bf-chip) !important; color:var(--as-bf-text) !important; /* Premium local type stack: no web-font request or extra payload. */ font-family:"Avenir Next",Avenir,"SF Pro Display","Helvetica Neue",Arial,sans-serif !important; font-size:13px !important; font-weight:600 !important; line-height:1.2 !important; letter-spacing:.028em !important; text-align:center !important; font-kerning:normal !important; font-synthesis:none !important; text-shadow:0 1px 0 rgba(0,0,0,.10) !important; cursor:pointer !important; opacity:1 !important; filter:none !important; pointer-events:auto !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 6px 15px rgba(0,0,0,.07) !important; transition: background .24s ease, border-color .24s ease, box-shadow .24s ease, color .24s ease !important; } /* Static etched reflection — premium material, zero animation load. */ #as-prominent-brand-filters button.as-b2b-brand::before { content:"" !important; position:absolute !important; z-index:-1 !important; top:-90% !important; left:55% !important; width:43% !important; height:280% !important; transform:rotate(22deg) !important; background:linear-gradient(90deg,transparent,rgba(255,255,255,.12),transparent) !important; pointer-events:none !important; } #as-prominent-brand-filters button.as-b2b-brand::after { content:"" !important; position:absolute !important; z-index:-1 !important; inset:1px 1px auto 1px !important; height:42% !important; border-radius:11px 11px 42% 42% !important; background:linear-gradient(180deg,rgba(255,255,255,.10),transparent) !important; pointer-events:none !important; } #as-prominent-brand-filters button.as-b2b-brand:hover, #as-prominent-brand-filters button.as-b2b-brand:focus-visible { background:var(--as-bf-chip-hover) !important; border-color:color-mix(in srgb,var(--as-bf-active-b) 48%,var(--as-bf-line)) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.18), 0 8px 18px rgba(0,0,0,.12) !important; outline:none !important; } #as-prominent-brand-filters button.as-b2b-brand:focus-visible { box-shadow: 0 0 0 3px color-mix(in srgb,var(--as-bf-active-b) 32%,transparent), 0 12px 21px rgba(0,0,0,.14) !important; } #as-prominent-brand-filters button.as-b2b-brand.active, #as-prominent-brand-filters button.as-b2b-brand[aria-pressed="true"] { border-color:color-mix(in srgb,var(--as-bf-active-b) 72%,white) !important; background:linear-gradient(135deg,var(--as-bf-active-a),var(--as-bf-active-b)) !important; color:var(--as-bf-active-text) !important; text-shadow:0 1px 0 rgba(0,0,0,.16) !important; box-shadow: inset 0 1px 0 rgba(255,255,255,.33), 0 9px 23px color-mix(in srgb,var(--as-bf-active-b) 30%,transparent) !important; } #as-prominent-brand-filters button.as-b2b-brand.active::after, #as-prominent-brand-filters button.as-b2b-brand[aria-pressed="true"]::after { background:linear-gradient(180deg,rgba(255,255,255,.26),transparent) !important; } /* Old SOON/disabled state must not dull a released brand. */ #as-prominent-brand-filters button.as-b2b-brand:disabled, #as-prominent-brand-filters button.as-b2b-brand.as-brand-soon, #as-prominent-brand-filters button.as-b2b-brand.soon, #as-prominent-brand-filters button.as-b2b-brand.is-soon { opacity:1 !important; filter:none !important; pointer-events:auto !important; cursor:pointer !important; } /* * Grey mode must win over the older dark-mode violet selector. * The extra root specificity is intentional: it prevents purple * from leaking in when the UI keeps data-as-display-mode="dark". */ html:is([data-as-display-mode="grey"],[data-as-display-mode="gray"],[data-as-appearance="grey"],[data-as-appearance="gray"]) body #as-prominent-brand-filters button.as-b2b-brand { background:linear-gradient(145deg,rgba(255,255,255,.52),rgba(231,236,239,.42)) !important; border-color:rgba(39,54,63,.17) !important; color:#303030 !important; text-shadow:0 1px 0 rgba(255,255,255,.45) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.52),0 5px 12px rgba(27,36,43,.07) !important; } html:is([data-as-display-mode="grey"],[data-as-display-mode="gray"],[data-as-appearance="grey"],[data-as-appearance="gray"]) body #as-prominent-brand-filters button.as-b2b-brand:hover, html:is([data-as-display-mode="grey"],[data-as-display-mode="gray"],[data-as-appearance="grey"],[data-as-appearance="gray"]) body #as-prominent-brand-filters button.as-b2b-brand:focus-visible { background:linear-gradient(145deg,rgba(255,255,255,.78),rgba(220,231,234,.62)) !important; border-color:rgba(50,92,103,.43) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.78),0 7px 16px rgba(30,48,56,.10) !important; } html:is([data-as-display-mode="grey"],[data-as-display-mode="gray"],[data-as-appearance="grey"],[data-as-appearance="gray"]) body #as-prominent-brand-filters button.as-b2b-brand.active, html:is([data-as-display-mode="grey"],[data-as-display-mode="gray"],[data-as-appearance="grey"],[data-as-appearance="gray"]) body #as-prominent-brand-filters button.as-b2b-brand[aria-pressed="true"] { background:linear-gradient(135deg,#233f4a,#4f7884) !important; border-color:rgba(238,248,250,.58) !important; color:#ffffff !important; text-shadow:0 1px 0 rgba(0,0,0,.20) !important; box-shadow:inset 0 1px 0 rgba(255,255,255,.28),0 7px 17px rgba(43,79,90,.18) !important; } @media (max-width:700px) { #as-prominent-brand-filters.as-b2b-brands { gap:7px !important; padding:10px !important; border-radius:15px !important; } #as-prominent-brand-filters button.as-b2b-brand { flex:1 1 calc(50% - 7px) !important; min-width:0 !important; min-height:43px !important; padding:10px 9px !important; font-size:12px !important; } } @media (prefers-reduced-motion:reduce) { #as-prominent-brand-filters button.as-b2b-brand, #as-prominent-brand-filters button.as-b2b-brand::before { transition:none !important; } } .as-moq-help-host { cursor: help; } button.as-moq-help-trigger { all: unset !important; display: inline-block !important; box-sizing: border-box !important; font: inherit !important; color: inherit !important; line-height: inherit !important; text-transform: inherit !important; cursor: help !important; touch-action: manipulation; text-decoration: underline dotted rgba(148,163,184,.55) !important; text-underline-offset: 4px !important; } button.as-moq-help-trigger:focus-visible { outline: 2px solid #a78bfa !important; outline-offset: 5px !important; border-radius: 3px !important; } #as-moq-help-bubble { position: fixed !important; z-index: 2147483647 !important; box-sizing: border-box !important; width: 324px !important; max-width: calc(100vw - 24px) !important; margin: 0 !important; padding: 17px 19px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 15px !important; background: rgba(24,27,34,.97) !important; color: #dfe4ea !important; box-shadow: 0 15px 45px rgba(0,0,0,.28) !important; -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); font-family: inherit !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.6 !important; letter-spacing: normal !important; text-align: start !important; text-transform: none !important; white-space: normal !important; overflow-wrap: break-word; } #as-moq-help-bubble[hidden] { display: none !important; } #as-moq-help-bubble strong { display: block !important; margin: 0 0 8px !important; color: #ffffff !important; font-size: 13px !important; font-weight: 650 !important; line-height: 1.45 !important; } #as-moq-help-bubble .as-moq-help-policy { display: block !important; margin-top: 10px !important; color: #d9def7 !important; font-weight: 650 !important; } #as-moq-help-bubble::before { content: ''; position: absolute; left: var(--as-moq-arrow, 50%); top: -5px; width: 8px; height: 8px; background: #151820; border-top: 1px solid rgba(255,255,255,.14); border-left: 1px solid rgba(255,255,255,.14); transform: translateX(-50%) rotate(45deg); } #as-moq-help-bubble[data-side="above"]::before { top: auto; bottom: -5px; transform: translateX(-50%) rotate(225deg); } @media print { #as-moq-help-bubble { display: none !important; } button.as-moq-help-trigger { text-decoration: none !important; } }