@charset "UTF-8"; /* msl-site.css — Med Supply Lab site-wide CSS, moved out of config 87 (design/head/includes) on 26 Sep 2026 (RESULT-config87-staticfile-migration-20260925.md). Blocks are in the SAME ORDER they had in config 87. Edit here, then bump ?v= in config 87 (MSL-SITE-CSS) and cache:flush. */ /* ===== (unmarked) PDP title / tab spacing START (moved from config 87, 26 Sep 2026) ===== */ /* hide the duplicate product-name title above the short description */ .product.info.detailed .product-info-item:first-child .product-info-title { display: none; } /* main product title: nice and bold */ .product-info-main .page-title, .product-info-main .page-title .base { font-weight: 700; font-size: 24px; } /* equal, snug spacing between every section title and its body */ .product.info.detailed .product-info-title { margin-bottom: 10px; } /* ===== (unmarked) PDP title / tab spacing END ===== */ /* ===== MSL-HIDE-SOCIAL START (moved from config 87, 26 Sep 2026) ===== */ /* Hide the social share icons (facebook / X / linkedin / pinterest / share) in the product buy-box area on ALL product pages. Scoped to .product-info-main so the site footer's social links are left untouched. */ .product-info-main .product-social-links, .product-info-main .product-social-inner, .product-info-main .cdz-social-listing{display:none!important} /* ===== MSL-HIDE-SOCIAL END ===== */ /* ===== MSL-CART-ICON START (moved from config 87, 26 Sep 2026) ===== */ /* Shopping-cart icon to the LEFT of the "Add to Cart" label on every Add to Cart button, site-wide: PDP buy box (button.action.primary.tocart), the floating / sticky add-to-cart, category grid + list tiles, and sidebar widget buttons — all share the .action.tocart class. Reuses the theme's FontAwesome 4 (font-family:"FontAwesome", glyph \f07a = fa-shopping-cart), inherits the button's color (currentColor) and ~8px gap. Targets the BUTTON pseudo (not the inner , which a broad theme rule maps to CodazonFont). Does NOT touch Buy Now (.action.buy-now), wishlist, compare, or the header cart (.showcart). */ button.action.tocart::before { font-family: "FontAwesome" !important; content: "\f07a" !important; font-weight: normal !important; margin-right: 8px; display: inline-block; vertical-align: baseline; speak: none; } /* ===== MSL-CART-ICON END ===== */ /* ===== MSL-CASE START — style portion (moved from config 87, 26 Sep 2026) ===== */ /* Dosing "Sold by the case" strip (simple products). Matches dosing-PACKAGE/VISUAL-dosing-buybox-target.html — the .case block, placed right after the In-stock line, before Qty. Same buy box as the tests otherwise (the blue price / FedEx / button styling is already global in MSL-PACK-CARDS). Data comes from the per-product attributes units_per_case + unit_label, emitted by setup_case_attributes.php as a hidden marker in short_description: This JS (same mechanism as the .msl-ship injector) reads that marker, computes per-unit = live case price ÷ units (rounded 2dp), builds the strip, and inserts it after .product-info-stock-sku. No per-SKU hardcoding; recomputes if price changes. Display only. To remove: delete everything between MSL-CASE START and END. */ .product-info-main .msl-case-data{display:none!important} .product-info-main .msl-case{ background:#f4f9fc;border:1px solid #e2edf4;border-radius:10px; padding:14px 16px;display:flex;justify-content:space-between;align-items:center; margin:0 0 20px;clear:both} .product-info-main .msl-case .msl-case-l .lbl{ font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:#7a8493} .product-info-main .msl-case .msl-case-l .big{ font-size:16px;font-weight:800;color:#23262e;margin-top:3px} .product-info-main .msl-case .msl-case-r{text-align:right} .product-info-main .msl-case .per{font-size:18px;font-weight:800;color:#185fa5;line-height:1.1} .product-info-main .msl-case .perlbl{font-size:11px;color:#7a8493} .product-info-main .msl-qty-suffix{font-size:12px;color:#9aa3b0;margin-left:10px;align-self:center} /* ===== MSL-CASE END ===== */ /* ===== MSL-MENU START (moved from config 87, 26 Sep 2026) ===== */ /* Med Supply Lab — clean mega menu (Version A). Matches menu-restyle-PACKAGE/VISUAL-megamenu-target.html. CSS-only restyle of the existing Codazon menu — no structure/content changes. To remove: delete everything between MSL-MENU START and END. */ /* Dropdown panel: rounded, soft shadow, kill the old hard gray shadow + square corners + top bar */ .groupmenu .groupmenu-drop{ background:#fff !important; border:1px solid #e8ebf0 !important; border-top:1px solid #e8ebf0 !important; /* override any old colored top-bar accent */ border-radius:10px !important; box-shadow:0 4px 16px rgba(20,30,60,.06) !important; margin-top:6px !important; } .groupmenu .groupmenu-drop-content{ padding:22px 12px !important; } /* Column headings: bright cyan, sentence case, clean spacing, no divider/uppercase */ .groupmenu .groupdrop-title{ color:#20a2dc !important; font-size:13px !important; font-weight:700 !important; text-transform:none !important; letter-spacing:0 !important; border:0 !important; margin:22px 0 12px 11px !important; /* consistent breathing room above every heading */ padding:0 !important; } /* First heading in each column sits flush-top (no leading 22px gap). */ .groupmenu .groupmenu-drop-content .row > div > .groupdrop-title:first-child{ margin-top:0 !important; } /* Collapse the empty spacer

that pushes "Accessories & Labels" down. */ .groupmenu .groupmenu-drop-content p:not(.groupdrop-title){ margin:0 !important; padding:0 !important; line-height:0 !important; min-height:0 !important; } /* Three of the four headings are category links ( inside .groupdrop-title); the link color (rgb(40,40,40)) overrides the

cyan, so color the too. */ .groupmenu .groupdrop-title a{ color:#20a2dc !important; } .groupmenu .groupdrop-title a:hover{ color:#185fa5 !important; } /* Links: neutral resting, dialed-back indigo hover pill, no bullets */ .groupmenu .groupdrop-link{ list-style:none !important; margin:0 !important; padding:0 !important; } .groupmenu .groupdrop-link > li{ margin:0 !important; padding:0 !important; list-style:none !important; } .groupmenu .groupdrop-link > li:before{ content:none !important; } /* remove old #519ecb bullet if present */ .groupmenu .groupdrop-link a, .groupmenu .groupmenu-drop a.menu-link{ display:block !important; color:#5b6472 !important; font-size:13.5px !important; line-height:1.3 !important; padding:7px 11px !important; border-radius:7px !important; background:transparent !important; transition:background .12s ease, color .12s ease !important; } .groupmenu .groupdrop-link a:hover{ background:#eceaf4 !important; /* dialed-back indigo */ color:#343970 !important; } /* Contain the dropdown to a rounded CARD (not full-bleed) so the 10px radius + soft shadow actually read. Codazon forces the panel to full 24-col width via the --mn-dd-iw custom property on .groupmenu-drop-content.grmn-width; a fixed width on the panel overrides that var-driven width, and left:0 anchors the card under the trigger (beats Codazon's inline left, which it sets to a negative offset for full bleed). DESKTOP horizontal menu ONLY — min-width:1200 sits above Codazon's <=1180 tablet range, and the .cdz-horizontal-menu scope excludes the mobile/tablet drawer. */ @media (min-width:1200px){ .cdz-horizontal-menu .groupmenu-drop{ left:0 !important; right:auto !important; width:820px !important; max-width:calc(100vw - 32px) !important; } .cdz-horizontal-menu .groupmenu-drop-content.grmn-width{ width:100% !important; max-width:none !important; margin-left:0 !important; margin-right:0 !important; } } /* ===== MSL-MENU END ===== */ /* ===== MSL-PACK-CARDS START — style portion (moved from config 87, 26 Sep 2026) ===== */ /* Configurable drug-test strips: pack-size CARDS + live unit×qty total. Matches strip-buybox-PACKAGE/VISUAL-strip-buybox-target.html. Deployed via Magento admin > Content > Design > Configuration > HTML Head > "Scripts and Style Sheets" (core_config_data design/head/includes, store scope). One managed block: 1. CSS — styles the EXISTING pack_quantity text swatches as the target's size cards; brand-blue big price; hides the selected-size echo, the stray configurable-variation-qty "Availability" tooltip, and the "As low as" label. 2. JS — (a) cyan .price-box price = SELECTED variation unit price x qty, recomputed on qty change AND size selection; (b) per-card price + "$/test" readout (members); (c) DEFAULT landing: pre-select the 100-count card so the page opens at $75 / qty 1; (d) QTY floor = 1 (stepper minus and the field cannot go below 1). Guests see size only; the native "Login to see price" gate is untouched. Authoritative variation prices come from the live swatch WIDGET instance ($('[data-role=swatch-options]').data('mage-SwatchRenderer').options.jsonConfig) — on this theme the swatch renderer does NOT update price-box data-price-amount and it consumes the inline x-magento-init JSON after init. Member state via customer-data (page is FPC-cached). Display-only — cart/checkout stays server-side. To remove: delete everything between MSL-PACK-CARDS START and END. */ /* Big live total — brand blue, above the cards */ .product-info-main .price-box .price-label{display:none!important} .product-info-main .price-box .price{color:#20a2dc!important;font-size:30px!important;font-weight:800!important;line-height:1.05!important} /* Hide the selected-size echo next to the PACK QUANTITY label + the stray availability tooltip */ .swatch-attribute.pack_quantity .swatch-attribute-selected-option{display:none!important} .product-info-main .configurable-variation-qty{display:none!important} /* Kill Magento's swatch hover tooltip (body-level) that floats "100 tests" over the heading */ .swatch-option-tooltip,.swatch-option-tooltip-layered{display:none!important} /* PACK QUANTITY label */ .swatch-attribute.pack_quantity .swatch-attribute-label{ display:block;font-size:12px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:#23262e;margin:0 0 10px} /* Three equal cards */ .swatch-attribute.pack_quantity .swatch-attribute-options{ display:grid!important;grid-template-columns:repeat(3,1fr);gap:10px;margin:0;float:none} .swatch-attribute.pack_quantity .swatch-option.text{ display:flex!important;flex-direction:column;align-items:center;justify-content:center; float:none;width:auto!important;height:auto!important;min-height:84px!important;min-width:0!important;margin:0!important; border:1.5px solid #d9dee5!important;border-radius:12px!important;background:#fff!important;box-shadow:none!important; padding:16px 10px!important;text-align:center;cursor:pointer;line-height:1.2; font-size:17px;font-weight:800;color:#23262e!important;transition:border-color .15s,background .15s} .swatch-attribute.pack_quantity .swatch-option.text:hover{border-color:#20a2dc!important} .swatch-attribute.pack_quantity .swatch-option.text.selected{ border:2px solid #20a2dc!important;background:#f4f9fc!important;color:#185fa5!important;outline:none!important} .swatch-attribute.pack_quantity .msl-card-price{display:block;margin-top:5px;font-size:14px;font-weight:500;color:#5b6472} .swatch-attribute.pack_quantity .swatch-option.text.selected .msl-card-price{color:#185fa5} /* "$/test" readout removed per request (JS no longer injects it; guard in case) */ .swatch-attribute.pack_quantity .msl-pertest{display:none!important} /* "Shipping calculated at checkout · FedEx" line under the buttons */ .product-info-main .msl-ship{display:flex;width:100%;clear:both;align-items:center;gap:7px;font-size:12.5px;color:#9aa3b0;margin:12px 0 2px} .product-info-main .msl-ship svg{width:15px;height:15px;flex:none} /* --- Spacing polish to match target: drop Codazon dashed dividers + tighten rhythm --- */ .product-info-main .price-box.price-final_price, .product-info-main .product-info-stock-sku, .product-info-main .fieldset, .product-info-main .field.qty{border-bottom:0 none!important} .product-info-main .price-box{margin:0 0 8px!important;padding-bottom:0!important} .product-info-main .product-info-stock-sku{padding:2px 0 8px!important;margin:0 0 8px!important} .product-info-main .field.qty{margin:0 0 12px!important;padding-bottom:0!important} .swatch-attribute.pack_quantity{margin-top:2px} .swatch-attribute.pack_quantity .swatch-attribute-label{margin:0 0 8px!important} /* --- ROUND corners that the Codazon theme squares off (needs !important to win) --- */ .product-info-main .field.qty .control .cart-qty, .product-info-main .field.qty .control{border-radius:8px!important;overflow:hidden} .product-info-main .box-tocart .action.tocart, .product-info-main .action.primary.tocart, .product-info-main .action.primary.buy-now, .product-info-main .actions .action.buy-now{border-radius:8px!important} /* Gallery column was stretching to match the taller buy-box column, which let the inner .product.media (height:100%) fill that height and grow the framed image as the page got taller. align-self:flex-start leaves the column height indefinite, so .product.media collapses to its content size (constant). Applies to ALL product pages — simple (dosing) pages were stretching because this was configurable-only. */ .catalog-product-view .product-media-wrapper{align-self:flex-start!important} /* Drop the buy-box column's own frame so only the LEFT product image stays framed. The border lives on .product-left (1px solid #e1e1e1 + 5px radius), not .product-info-main. Applies to ALL product pages (configurable AND simple) — the dosing/simple buy boxes carried the frame because this was previously scoped to page-product-configurable only. Padding (20px) already matches the test pages, so the buy box sits in the same place. Does NOT touch the product image frame. */ .catalog-product-view .product-left{border:0 none!important;box-shadow:none!important;border-radius:0!important} /* ===== MSL-PACK-CARDS END ===== */ /* ===== (unmarked) Custom Form field fixes — merged 26 Sep (form fixes #1 folded in) START (moved from config 87, 26 Sep 2026) ===== */ /* Med Supply Lab — Custom Form field fixes (Request Samples + Contact) */ /* Dropdowns: match the text-input height (35px), no text clipping */ .mp-custom-form select { height: 35px !important; min-height: 35px !important; line-height: 31px !important; padding-top: 0 !important; padding-bottom: 0 !important; padding-left: 12px !important; padding-right: 12px !important; } /* Sample checkboxes: 2-column grid */ .mp-custom-form .control:has(input[type="checkbox"]) { display: grid !important; grid-template-columns: 1fr 1fr; gap: 4px 22px; } .mp-custom-form .control:has(input[type="checkbox"]) > div { margin: 0; } @media (max-width: 480px) { .mp-custom-form .control:has(input[type="checkbox"]) { grid-template-columns: 1fr; } } /* Hide the honeypot field from real users (bots still fill it) */ .mp-custom-form .field:has(input[name*="mp_form_check"]) { position: absolute !important; left: -9999px !important; top: auto; width: 1px; height: 1px; overflow: hidden; } /* ===== (unmarked) Custom Form field fixes — merged 26 Sep (form fixes #1 folded in) END ===== */ /* ===== (unmarked) MSL-blog-restyle v3 START (moved from config 87, 26 Sep 2026) ===== */ /* ===== MSL-blog-restyle v3 — small cards, custom LIST thumbnails (left) ===== */ ol.post-list.modern { list-style:none; padding-left:0; } .post-list.modern > li.post-item { display:flex; background:#fff; border:1px solid #e6ebf1; border-radius:12px; overflow:hidden; box-shadow:0 2px 10px rgba(52,57,112,.08); transition:box-shadow .2s ease, transform .2s ease; margin-bottom:20px; list-style:none; } .post-list.modern > li.post-item:hover { box-shadow:0 6px 20px rgba(52,57,112,.15); transform:translateY(-2px); } .post-list.modern .post-item .post-container { display:flex; width:100%; align-items:stretch; } .post-list.modern .post-item .post-image { width:250px; min-width:250px; margin:0; background:#343970; } .post-list.modern .post-item .post-image .image-container { position:relative; width:100%; height:100%; min-height:165px; } .post-list.modern .post-item .post-image .image-wrap { display:block; width:100%; height:100%; } .post-list.modern .post-item .post-image .bg-img { width:100%; height:100%; min-height:165px; background-size:contain; background-position:center; background-repeat:no-repeat; } .post-list.modern .post-item .post-category .category-name { display:none !important; } .post-list.modern .post-item .post-info { padding:16px 20px; flex:1; min-width:0; } .post-list.modern .post-item .post-title { margin:0 0 6px; } .post-list.modern .post-item .post-title a { color:#343970 !important; font-weight:bold; font-size:18px; line-height:1.3; text-decoration:none; } .post-list.modern .post-item .post-title a:hover { color:#20a2dc !important; } .post-list.modern .post-item .post-data-wrap { color:#8a8f99; font-size:12px; margin-bottom:8px; } .post-list.modern .post-item .post-data-wrap a { color:#8a8f99; text-decoration:none; } .post-list.modern .post-item .post-description { font-size:13px; color:#4a4f57; line-height:1.55; } .post-list.modern .post-item .post-read-more { margin-top:12px; } .post-list.modern .post-item .post-read-more a, .post-list.modern .post-item .post-read-more a.action.primary { display:inline-block; background:#343970 !important; color:#fff !important; border:none; border-radius:5px; padding:9px 18px; font-weight:bold; letter-spacing:.5px; font-size:12px; text-transform:uppercase; text-decoration:none; } .post-list.modern .post-item .post-read-more a:hover, .post-list.modern .post-item .post-read-more a.action.primary:hover { background:#20a2dc !important; } @media (max-width:768px){ .post-list.modern .post-item .post-container { flex-direction:column; } .post-list.modern .post-item .post-image { width:100%; min-width:0; } .post-list.modern .post-item .post-image .image-container, .post-list.modern .post-item .post-image .bg-img { aspect-ratio:3/2; min-height:0; height:auto; } } /* sidebar .block-title bars intentionally blue #20a2dc — not restyled */ /* ===== (unmarked) MSL-blog-restyle v3 END ===== */ /* ===== MSL-HOVER START (moved from config 87, 26 Sep 2026) ===== */ /* MSL-HOVER — the theme's action colour #25A0D4 replaced with navy #1A3A6B on hover. Deliberately NOT scoped to one product: this applies to the Add to Cart button on every product page, so it matches the navy Request samples button beside it. Scope note: the selector only exists inside .product-info-main .box-tocart, so it reaches product pages only — navigation, footer, category tiles and the header's sticky minicart keep their cyan hover. !important is required: the theme rule that currently wins is ".product-view-style-04 .product-info-main .box-tocart .actions > button:not(.buy-now):hover", which carries one more class than this selector. */ .product-info-main .box-tocart .actions > button:not(.buy-now):hover, .product-info-main .box-tocart .actions > button:not(.buy-now):focus, .product-info-main .box-tocart .actions > button:not(.buy-now):active { color: #fff !important; background: #1A3A6B !important; border-color: #1A3A6B !important; } /* ===== MSL-HOVER END ===== */