/* Medlive 2.74.0 — one design system for buttons, forms, cards and page headings, site-wide. Loaded last. Colours: navy #08294D, red #E60023 (primary actions only), blue #145DA0, text #20272F. */ :root{--ml-btn-r:10px;--ml-btn-h:48px;--v74-line:#DCE4EE;--v74-field:#C5D0DE;--v74-soft:#F4F7FB} /* ------------------------------------------------------------------ Buttons Primary = red, Secondary = navy outline, Navy = solid navy, Soft = light blue. Same radius, weight, height and focus ring everywhere. */ html body.ml-v4 #page :is(.btn,.v17-btn,.v51-btn,.ml-404-btn,.v8-btn,.v7-btn,.v13-btn,.v21-btn,.v12-btn,.v3-btn,.v4-btn,.v5-btn,.woocommerce-button,.woocommerce-Button){ border-radius:var(--ml-btn-r)!important;font-weight:700!important;letter-spacing:.005em;text-decoration:none!important; transition:background-color .15s ease,border-color .15s ease,color .15s ease,box-shadow .15s ease,transform .15s ease!important; -webkit-font-smoothing:antialiased } html body.ml-v4 #page .btn:not(.btn-sm):not(.v7-btn-sm){min-height:46px;padding-left:20px;padding-right:20px;font-size:15px} html body.ml-v4 #page :is(.btn-sm){min-height:38px;padding:0 14px;font-size:14px} html body.ml-v4 #page :is(.btn-red,.v17-btn,.v51-btn,.ml-404-links .ml-404-btn:first-child,.single_add_to_cart_button){background:#E60023!important;border:1.5px solid #E60023!important;color:#fff!important;box-shadow:0 2px 6px rgba(230,0,35,.16)} html body.ml-v4 #page :is(.btn-red,.v17-btn,.v51-btn,.ml-404-links .ml-404-btn:first-child,.single_add_to_cart_button):hover{background:#C4001E!important;border-color:#C4001E!important;box-shadow:0 6px 16px rgba(196,0,29,.24);transform:translateY(-1px)} html body.ml-v4 #page .btn-navy{background:#08294D!important;border:1.5px solid #08294D!important;color:#fff!important} html body.ml-v4 #page .btn-navy:hover{background:#0B3766!important;border-color:#0B3766!important;transform:translateY(-1px)} html body.ml-v4 #page :is(.btn-line,.btn-ghost,.v7-btn-navyline,.v3-btn-outline,.ml-404-links .ml-404-btn:not(:first-child)){background:#fff!important;border:1.5px solid #08294D!important;color:#08294D!important;box-shadow:none!important} html body.ml-v4 #page :is(.btn-line,.btn-ghost,.v7-btn-navyline,.v3-btn-outline,.ml-404-links .ml-404-btn:not(:first-child)):hover{background:#EEF3F9!important} html body.ml-v4 #page .btn-soft{background:#EEF3F9!important;border:1.5px solid #D5E0EC!important;color:#08294D!important} html body.ml-v4 #page .btn-soft:hover{background:#E1EAF4!important} html body.ml-v4 #page :is(.btn,.v17-btn,.v51-btn,.ml-404-btn,.v8-btn,.v7-btn,.v13-btn,.v21-btn,.v12-btn,.v3-btn,.v4-btn,.v5-btn,.woocommerce-button):focus-visible{outline:3px solid #145DA0!important;outline-offset:2px!important} html body.ml-v4 #page :is(.btn,.v7-btn,.v17-btn,.v3-btn):is([disabled],.disabled,[aria-disabled=true]){opacity:.55;cursor:not-allowed;transform:none!important;box-shadow:none!important} @media (prefers-reduced-motion:reduce){html body.ml-v4 #page :is(.btn,.v7-btn,.v17-btn,.v13-btn,.v21-btn,.v3-btn,.v5-btn):hover{transform:none!important}} /* ------------------------------------------------------------------ Form fields One field style for every form: 46 px tall, 10 px radius, clear focus ring. Quantity steppers and the header search keep their own compact styles. */ html body.ml-v4 #content :is(input[type=text],input[type=email],input[type=tel],input[type=password],input[type=url],input[type=date],input[type=number],select,textarea):not(:is(.v7-qty,.qty,.v5-qty,.v73-buyrow,.v7-rq-qty,.v3-search,.search-wrap,.v73-country,.v7-cflag,.v67-sbar,.woocommerce-ordering) *):not(.qty){ height:auto!important;min-height:46px!important;border:1.5px solid var(--v74-field)!important;border-radius:10px!important;background-color:#fff!important; padding:10px 14px!important;font-size:15.5px!important;line-height:1.35!important;color:#20272F!important;box-shadow:none!important;transition:border-color .15s,box-shadow .15s } html body.ml-v4 #content textarea:not(:is(.v7-qty,.qty) *){min-height:112px!important;line-height:1.5!important} html body.ml-v4 #content select:not(:is(.v7-qty,.qty,.v73-country,.v7-cflag,.woocommerce-ordering) *){padding-right:36px!important} html body.ml-v4 #content :is(input,select,textarea):not([type=checkbox]):not([type=radio]):hover{border-color:#9FB0C5!important} html body.ml-v4 #content :is(input,select,textarea):not([type=checkbox]):not([type=radio]):focus{border-color:#145DA0!important;box-shadow:0 0 0 3px rgba(20,93,160,.18)!important;outline:none!important} html body.ml-v4 #content ::placeholder{color:#7A8698;opacity:1} html body.ml-v4 #content :is(.field,.v12-f,.v7-ff,.v15-f) > label,html body.ml-v4 #content .form label:not(.chk):not(.sr){font-weight:600;color:#08294D;font-size:14.5px} html body.ml-v4 #content :is(input[type=checkbox],input[type=radio]){accent-color:#08294D;width:18px;height:18px} /* ------------------------------------------------------------------ Card headings The heavy navy header bars become clean white card headings with a navy title. */ html body.ml-v4 #content :is(.v7-navyh,.v12-ph){background:#fff!important;color:#08294D!important;border-bottom:1px solid var(--v74-line)!important;font-size:19px!important;line-height:1.3!important;padding:16px 20px!important;letter-spacing:-.005em} html body.ml-v4 #content :is(.v7-navyh,.v12-ph) svg{color:#145DA0!important;stroke:#145DA0} html body.ml-v4 #content .v7-sum-navy > .v7-box-ih{background:#08294D!important;color:#fff!important;font-size:18px!important} html body.ml-v4 #content :is(.v7-box,.v12-panel,.v8-signin,.v8-new,.card){border-color:var(--v74-line)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.04)!important;overflow:hidden} /* ------------------------------------------------------------------ Page headings Utility pages (Quick Order, Track an Order, RFQ basket, My Account) share one heading style. */ html body.ml-v4 #content :is(.page-head,.v74-head,.v7-rq-head){margin:6px 0 24px!important;padding:0!important;background:none!important} html body.ml-v4 #content :is(.page-head,.v74-head) h1,html body.ml-v4 #content .v7-rq-head .v7-h1{font-size:clamp(30px,3.2vw,42px)!important;line-height:1.12!important;color:#08294D!important;letter-spacing:-.015em;margin:0 0 8px!important} html body.ml-v4 #content :is(.page-head,.v74-head) p,html body.ml-v4 #content .v7-rq-head .v7-lead{font-size:17px!important;line-height:1.55;color:#3A4656!important;max-width:68ch;margin:0!important} html body.ml-v4 #content .v74-eyebrow{display:inline-block;font-size:12.5px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:#E60023;margin-bottom:8px} /* ------------------------------------------------------------------ Track an Order */ html body.ml-v4 #content .v74-track{gap:20px;align-items:start} html body.ml-v4 #content .v74-track form h2.h3{font-size:20px;margin:0 0 14px;color:#08294D} html body.ml-v4 #content .v74-track .btn-red{width:100%;justify-content:center;min-height:50px;margin-top:4px} html body.ml-v4 #content .v74-help{margin:12px 0 0;font-size:14px;color:#55606E} html body.ml-v4 #content .v74-help a{color:#145DA0;font-weight:600} html body.ml-v4 #content .v74-ol{counter-reset:v74;display:grid;gap:14px;margin:0;padding:0;list-style:none} html body.ml-v4 #content .v74-ol li{counter-increment:v74;display:flex;gap:12px;align-items:flex-start} html body.ml-v4 #content .v74-ol li > svg{display:none} html body.ml-v4 #content .v74-ol li::before{content:counter(v74);flex:0 0 28px;width:28px;height:28px;border-radius:50%;background:#EEF3F9;color:#08294D;font-weight:800;font-size:14px;display:grid;place-items:center} html body.ml-v4 #content .v74-status{background:var(--v74-soft)!important} /* ------------------------------------------------------------------ RFQ basket */ html body.ml-v4 #content .v7-alert.v7-alert-wide,html body.ml-v4 #content .v7-alert.v7-alert-wide *{color:#08294D!important} html body.ml-v4 #content .v7-alert.v7-alert-wide{font-weight:600;justify-content:center;border-radius:12px!important} html body.ml-v4 #content .v7-nsteps li.on span{background:#08294D!important} /* ------------------------------------------------------------------ Quick Order */ html body.ml-v4 #content form.card.form textarea#ml_lines{min-height:180px;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:15px!important} html body.ml-v4 #content .page-head + form.card.form{max-width:none} /* ------------------------------------------------------------------ Help strips: no stray dividers when the items stack */ @media (max-width:760px){ html body.ml-v4 #content .v7-bar{flex-direction:column;gap:8px!important} html body.ml-v4 #content .v7-bar .v7-bar-sep{display:none!important} } /* ------------------------------------------------------------------ General rhythm */ html body.ml-v4 #content h2{text-wrap:balance} html body.ml-v4 #content a{text-underline-offset:2px} /* ------------------------------------------------------------------ My Account sign-in */ html body.ml-v4 #content .v8-lform{padding-top:20px!important} html body.ml-v4 #content .v8-f > label{font-size:15px!important;font-weight:600!important;color:#08294D;margin-bottom:6px;display:block} html body.ml-v4 #content .v8-f{margin:0 0 16px!important} html body.ml-v4 #content .v8-lcard{border:1px solid var(--v74-line)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.04)!important;overflow:hidden} html body.ml-v4 #content .v8-lcard-h{background:#fff!important;border-bottom:1px solid var(--v74-line)!important} html body.ml-v4 #content .v8-lcard-h h2{font-size:19px!important;color:#08294D!important} /* ------------------------------------------------------------------ Form rows: fields line up even when one side has a hint */ html body.ml-v4 #content .frow{align-items:start!important} /* ------------------------------------------------------------------ Quieter panels: flat tints instead of blue gradients and 2 px borders */ html body.ml-v4 #content .v21-fact{background:var(--v74-soft)!important;border-radius:10px!important} html body.ml-v4 #content :is(.v21-facts,.v21-steps > li){border:1px solid var(--v74-line)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)!important} html body.ml-v4 #content .v12-cbox > h2{background:#fff!important;border-bottom:1px solid var(--v74-line)} html body.ml-v4 #content .v21-dgrid > li > a{border:1px solid var(--v74-line)!important;border-radius:14px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)!important;transition:border-color .15s,box-shadow .15s,transform .15s} html body.ml-v4 #content .v21-dgrid > li > a:hover{border-color:#9FB0C5!important;box-shadow:0 10px 26px rgba(8,41,77,.10)!important;transform:translateY(-2px)} @media (prefers-reduced-motion:reduce){html body.ml-v4 #content .v21-dgrid > li > a:hover{transform:none}} /* ================================================================== 2.74.1 */ /* Sector pages: the 12-market strip inside the narrower main column shows 4 per row, so names are not cut. */ html body.ml-v4 #content .v15-main .v13-mk nav ul{grid-template-columns:repeat(4,minmax(0,1fr))!important} html body.ml-v4 #content .v15-main .v13-mk-h{flex-direction:column;align-items:flex-start} @media (max-width:620px){html body.ml-v4 #content .v15-main .v13-mk nav ul{grid-template-columns:repeat(2,minmax(0,1fr))!important}} html body.ml-v4 #content .v13-mk nav li a span{overflow:hidden;text-overflow:ellipsis} /* Tenders: the "Please note" line is information, not an alarm. */ html body.ml-v4 #content .v15-pink{background:var(--v74-soft)!important;border:1px solid var(--v74-line)!important;border-left:4px solid #145DA0!important;border-radius:12px!important;color:#20272F!important} html body.ml-v4 #content .v15-pink svg{stroke:#145DA0!important} /* New Arrivals and other simple listing pages: same heading as the utility pages. */ html body.ml-v4 #content .v3-head{margin:6px 0 24px!important} html body.ml-v4 #content .v3-head h1{font-size:clamp(30px,3.2vw,42px)!important;line-height:1.12!important;color:#08294D!important;letter-spacing:-.015em;margin:0 0 8px!important} html body.ml-v4 #content .v3-head p{font-size:17px!important;color:#3A4656!important;max-width:68ch} /* "Price on request" is a price, shown in navy everywhere. */ html body.ml-v4 #content .price .por{color:#08294D!important;font-weight:700} /* Shop and category cards: "Price on request" in navy. */ html body.ml-v4 #content .v17-price .por{color:#08294D!important;font-weight:700} html body.ml-v4 #content .v17-price:has(.por){color:#08294D!important} /* Quotation consent: calm by default, red only when the box needs ticking. */ html body.ml-v4 #content .v7-agreebox{background:var(--v74-soft)!important;border:1px solid var(--v74-line)!important;border-radius:12px!important;font-size:15.5px!important;line-height:1.45!important} html body.ml-v4 #content .v7-agreebox input{width:20px!important;height:20px!important;accent-color:#08294D!important} html body.ml-v4 #content :is(.v7-agreebox.is-bad,.v7-agreebox:has(.v65-err:not(:empty)),.v7-agreebox:has(input[aria-invalid=true])){background:#FFF4F5!important;border-color:#E60023!important;box-shadow:0 0 0 3px rgba(230,0,35,.15)!important} /* Product cards: show up to three lines so model numbers are not cut off. */ html body.ml-v4 ul.products li.product h2.v5-ctitle a,html body.ml-v4 ul.products li.product .woocommerce-loop-product__title a{-webkit-line-clamp:3!important;line-clamp:3} @media (max-width:620px){ html body.ml-v4 ul.products li.product h2.v5-ctitle{font-size:15px!important;line-height:1.3!important} html body.ml-v4 #content .v17-price .por,html body.ml-v4 #content .price .por{font-size:14.5px!important;white-space:nowrap} } /* ------------------------------------------------------------------ 2.74.2 Header action buttons Icon, label and count badge laid out the same on every page. The badge sits on the icon's top-right corner with a white ring, so it never covers the label. */ html body.ml-v4 .v4-acts.v3-acts .v3-ico-wrap .badge{position:absolute!important;top:-7px!important;right:-9px!important;left:auto!important;bottom:auto!important;min-width:19px;height:19px;padding:0 5px!important;border-radius:999px!important;background:#E60023!important;color:#fff!important;font-size:11.5px!important;font-weight:800!important;line-height:19px!important;text-align:center;box-shadow:0 0 0 2px #fff!important;margin:0!important;transform:none!important} html body.ml-v4 .v4-acts.v3-acts .v3-ico-wrap .badge.is-zero{display:none!important} @media (min-width:961px){ html body.ml-v4 .v4-acts.v3-acts{display:flex!important;align-items:center!important;gap:4px!important} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act{display:inline-flex!important;flex-direction:row!important;align-items:center!important;gap:16px!important;min-height:48px;padding:6px 12px!important;border-radius:10px!important;border-left:0!important;text-decoration:none!important;color:#08294D!important;transition:background-color .15s ease} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act + .v4-act{position:relative} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act + .v4-act::before{content:"";position:absolute;left:-2px;top:12px;bottom:12px;width:1px;background:#DCE4EE} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act:hover{background:#EEF3F9} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act:focus-visible{outline:3px solid #145DA0;outline-offset:1px} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act > .ico,html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v3-ico-wrap{order:-1;flex:0 0 auto} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act > .ico,html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v3-ico-wrap .ico{width:26px!important;height:26px!important} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v4-act-t{order:2!important;display:flex;flex-direction:column;line-height:1.15;text-align:left} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v4-act-t b{font-size:15px!important;font-weight:700!important;color:#08294D;white-space:nowrap} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v4-act-t small{font-size:13px;color:#55606E;white-space:nowrap;margin-top:2px} html body.ml-v4 .v4-acts.v3-acts .v3-ico-wrap{position:relative!important;display:inline-flex!important} } /* Narrow desktops (961–1239 px): icons only, so the search box keeps its full width. Each link keeps its aria-label, and the label text stays available to screen readers. */ @media (min-width:961px) and (max-width:1239px){ html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act{flex-direction:column!important;gap:3px!important;padding:6px 10px!important;min-width:56px;justify-content:center} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act::after{font-size:12px;font-weight:700;line-height:1;color:#08294D;white-space:nowrap} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act.v4-acct::after{content:"Account"} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act.v4-quote::after{content:"RFQ"} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act.v4-wish::after{content:"Wishlist"} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act.v4-cart::after{content:"Cart"} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v4-act-t{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;clip:rect(0 0 0 0)!important;white-space:nowrap!important} html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act > .ico,html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v3-ico-wrap .ico{width:27px!important;height:27px!important} } /* ------------------------------------------------------------------ 2.74.3 Product cards: SKU on every card */ html body.ml-v4 ul.products li.v17-card .v67-csku{display:block!important;margin:2px 0 6px!important;font-size:13px!important;color:#4B5A6B!important;letter-spacing:.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} /* ------------------------------------------------------------------ 2.74.3 Product page quick-buy bar: same buttons and fields as the rest of the site */ html body .v67-sbar{background:rgba(255,255,255,.97);-webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);border-top:1px solid #DCE4EE;box-shadow:0 -6px 20px rgba(8,41,77,.08)} html body .v67-sbar img{border:1px solid #DCE4EE;border-radius:8px;background:#fff} html body .v67-sb-t b{font-size:15.5px} html body .v67-sb-p{color:#08294D!important;font-weight:700} html body .v67-sb-a input{height:46px!important;border:1.5px solid #C5D0DE!important;border-radius:10px!important;font-weight:700;color:#08294D} html body .v67-sb-a input:focus{border-color:#145DA0!important;box-shadow:0 0 0 3px rgba(20,93,160,.18);outline:none} html body .v67-sb-red,html body .v67-sb-line{min-height:46px!important;border-radius:10px!important;font-size:15px!important;transition:background-color .15s,border-color .15s,box-shadow .15s} html body .v67-sb-red{border:1.5px solid #E60023!important;box-shadow:0 2px 6px rgba(230,0,35,.16)} html body .v67-sb-red:hover{background:#C4001E!important;border-color:#C4001E!important} html body .v67-sb-line:hover{background:#EEF3F9!important} html body :is(.v67-sb-red,.v67-sb-line):focus-visible{outline:3px solid #145DA0;outline-offset:2px} /* Name and SKU stay together; price and buttons line up along the bottom of each row. */ html body.ml-v4 ul.products li.v17-card{display:flex!important;flex-direction:column} html body.ml-v4 ul.products:not(.v67-list) li.product.v5-card.v17-card h2.woocommerce-loop-product__title.v5-ctitle{min-height:0!important;height:auto!important;margin-bottom:0!important} html body.ml-v4 ul.products li.v17-card .v17-price{margin-top:auto!important;padding-top:6px} html body.ml-v4 ul.products li.v17-card > :is(.v17-buy,.v67-ccmp){margin-top:10px!important} html body.ml-v4 ul.products li.v17-card > div.v17-buy{padding-top:42px} /* ------------------------------------------------------------------ 2.74.3 Department menu: procurement links along the bottom */ html body .v2-mega .v74-mfoot .wrap{display:flex!important;align-items:center;gap:18px;flex-wrap:wrap;padding-top:14px;padding-bottom:14px} html body .v2-mega .v74-mf-h{font-size:12.5px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:#E60023} html body .v2-mega .v74-mf-links{display:flex;flex-wrap:wrap;gap:6px 8px;flex:1 1 auto} html body .v2-mega .v74-mf-links a{display:inline-flex;align-items:center;gap:8px;min-height:40px;padding:0 14px;border:1px solid #DCE4EE;border-radius:10px;background:#fff;color:#08294D;font-weight:700;font-size:14.5px;text-decoration:none} html body .v2-mega .v74-mf-links a:hover{background:#EEF3F9;border-color:#C5D0DE} html body .v2-mega .v74-mf-links a:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body .v2-mega .v74-mf-links .ico{width:18px;height:18px;color:#145DA0} /* ------------------------------------------------------------------ 2.74.4 Buying routes (homepage) */ html body .v74-routes{margin-top:40px;margin-bottom:8px} html body .v74-routes h2{font-size:clamp(24px,2.4vw,30px);color:#08294D;margin:0 0 16px} html body .v74-routes ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} html body .v74-routes li a{display:flex;flex-direction:column;gap:8px;height:100%;padding:22px 22px 20px;border:1px solid #DCE4EE;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05);text-decoration:none;color:#20272F;transition:border-color .15s,box-shadow .15s,transform .15s} html body .v74-routes li a:hover{border-color:#9FB0C5;box-shadow:0 10px 26px rgba(8,41,77,.10);transform:translateY(-2px)} html body .v74-routes li a:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body .v74-rt-ico{width:48px;height:48px;border-radius:12px;background:#EEF3F9;display:grid;place-items:center;color:#08294D} html body .v74-rt-ico .ico{width:26px;height:26px} html body .v74-routes b{font-size:19px;line-height:1.25;color:#08294D} html body .v74-rt-p{font-size:15px;line-height:1.5;color:#3A4656;flex:1 1 auto} html body .v74-rt-go{font-weight:700;color:#E60023;font-size:15px} html body .v74-rt-note{margin:12px 0 0;font-size:14px;color:#55606E} @media (max-width:900px){html body .v74-routes ul{grid-template-columns:minmax(0,1fr)}html body .v74-routes li a{padding:18px}} @media (prefers-reduced-motion:reduce){html body .v74-routes li a:hover{transform:none}} /* ------------------------------------------------------------------ 2.74.4 Sourcing links and page */ html body .v74-src-link{display:flex;gap:10px;align-items:flex-start;margin:14px 0 0;padding:12px 14px;border:1px dashed #C5D0DE;border-radius:12px;background:#F8FAFD;font-size:14.5px;line-height:1.45;color:#20272F} html body .v74-src-link .ico{flex:0 0 20px;width:20px;height:20px;color:#145DA0;margin-top:1px} html body .v74-src-link a{color:#145DA0;font-weight:700} html body .v74-src-head{padding-top:8px} html body .v70-help-acts .btn.btn-red{min-height:46px} /* ------------------------------------------------------------------ 2.74.5 Account lists: date filter keeps room for its calendar icon */ html body.ml-v4 #content .v9-d select:not(#v74a):not(#v74b){padding-left:46px!important} html body.ml-v4 #content .v9-q input:not(#v74a):not(#v74b){padding-left:46px!important} /* Phone: WooCommerce notices with a button stack the button under the text instead of squeezing it. */ @media (max-width:620px){ html body.ml-v4 #content .woocommerce-MyAccount-content > .woocommerce-info{display:flex!important;flex-direction:column-reverse;align-items:flex-start;gap:10px} html body.ml-v4 #content .woocommerce-MyAccount-content > .woocommerce-info .button{float:none!important;margin:0!important} } /* ------------------------------------------------------------------ 2.74.6 */ /* Newsletter heading (was an H3 plus a hidden duplicate H2). */ .v58-news h2.v74-newsh{margin:0 0 4px;font-family:var(--f-head,inherit);font-size:20px;font-weight:800;color:#fff;line-height:1.25} .v61-news-only .v58-news h2.v74-newsh{grid-area:h;font-size:22px} html body.home .v61-news-only .v58-news h2.v74-newsh{color:#08294D!important} /* Product photos never show as an empty white box while loading. */ html body.ml-v4 ul.products li.product .v5-cimg{background:#F4F7FB} html body.ml-v4 ul.products li.product .v5-cimg img{background:#fff} /* Header: RFQ Basket shows its label with a small line under it, like My Account. */ @media (min-width:1240px){html body.ml-v4 .v4-acts.v3-acts .v4-act.v3-act .v4-act-t small{display:block}} /* ------------------------------------------------------------------ 2.74.8 Homepage polish */ /* How ordering works: solid navy (no gradient). */ html body.home .v56-how{background:#08294D!important} /* Buying routes: bolder titles, tighter spacing; icon beside the title on phones. */ html body .v74-routes{margin-top:28px!important} html body .v74-routes b{font-weight:800!important;font-size:19px} html body .v74-routes li a{gap:6px} html body .v74-rt-ico{margin-bottom:6px} @media (max-width:900px){ html body .v74-routes li a{display:grid!important;grid-template-columns:44px minmax(0,1fr);column-gap:14px;row-gap:4px;align-items:center;padding:16px!important} html body .v74-rt-ico{width:44px;height:44px;margin:0;grid-row:1} html body .v74-routes b{grid-column:2;font-size:17px} html body .v74-rt-p,html body .v74-rt-go{grid-column:1 / -1} html body .v74-rt-p{font-size:14.5px} } /* Procurement panels: copy and button stay level across the three cards. */ html body.home .v5-panel-tx{display:flex;flex-direction:column} html body.home .v5-panel-tx .v5-btn{margin-top:auto;align-self:flex-start} /* ================================================================== 2.75.0 Homepage design pass Calm rhythm: sections alternate between the light page tint and full-width white bands, one heading style with a small red label, more breathing room, quieter hero form. */ @media (min-width:761px){ html body.home #content .v5-sec{padding-top:56px!important} html body.home #content .v74-routes{margin-top:0!important;padding-top:56px!important;margin-bottom:0!important} html body.home #content .v5-panels{padding-top:56px!important} } /* Full-width white bands behind Departments, Products and Why Medlive. */ html body.home #content :is(.v5-depts,.v56-prod,.v53-why){position:relative;background:#fff;box-shadow:0 0 0 100vmax #fff;clip-path:inset(0 -100vmax);padding-bottom:56px!important} @media (max-width:760px){html body.home #content :is(.v5-depts,.v56-prod,.v53-why){padding-bottom:32px!important}} html body.home #content .v5-depts{margin-top:40px} @media (max-width:760px){html body.home #content .v5-depts{margin-top:24px}} /* One heading style, with a small label above (decorative: hidden from screen readers). */ html body.home #content :is(.v5-depts,.v74-routes,.v56-prod,.v53-why,.v5-markets) h2:not(.sr){font-size:clamp(26px,2.5vw,34px)!important;font-weight:800!important;letter-spacing:-.015em;line-height:1.15;color:#08294D} html body.home #content :is(.v5-depts,.v74-routes,.v56-prod,.v53-why,.v5-markets) h2:not(.sr)::before{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#E60023;margin-bottom:8px;line-height:1.2} html body.home #content .v5-depts h2::before{content:"Catalogue" / ""} html body.home #content .v74-routes h2::before{content:"Buying routes" / ""} html body.home #content .v56-prod h2::before{content:"Ready to order" / ""} html body.home #content .v53-why h2::before{content:"About Medlive" / ""} html body.home #content .v5-markets h2::before{content:"Where we supply" / ""} /* Countries box sits on the tint without a heavy frame. */ html body.home #content .v5-mk-box{background:#fff!important;border:1px solid var(--v74-line)!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 10px 28px rgba(8,41,77,.05)!important} /* Hero: roomier panel, quieter quick-quotation form, one primary red. */ @media (min-width:961px){ html body.home .v5-hero-copy{padding:34px 34px 30px!important;border-radius:18px!important;box-shadow:0 18px 50px rgba(8,41,77,.16)!important} html body.home .v5-hero-in{padding-top:28px!important;padding-bottom:28px!important} } html body.home .v53-pop{gap:6px 8px!important} html body.home .v53-pop a{font-size:13.5px!important;padding:5px 12px!important;border-color:#D5E0EC!important;background:#fff!important;color:#08294D!important} html body.home .v53-pop a:hover{background:#EEF3F9!important} html body.home .v56-qq{border-top:0!important;border:1px solid #DCE4EE!important;border-radius:14px!important;background:#F8FAFD!important;box-shadow:none!important} html body.home .v56-qq-h{color:#08294D} html body.home .v56-qq button[type=submit]{background:#E60023!important;border-color:#E60023!important;border-radius:10px!important;min-height:46px} html body.home .v56-qq button[type=submit]:hover{background:#C4001E!important} html body.home .v56-qq :is(input,select){border-radius:10px!important;min-height:46px!important} /* Trust strip: aligned, a little more air. */ html body.home .v5-trust{padding-top:18px!important;padding-bottom:18px!important} /* Procurement Centre cards: subtle lift on hover like the other cards. */ html body.home .v53-proc li a{transition:border-color .15s,box-shadow .15s,transform .15s} html body.home .v53-proc li a:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,41,77,.10)!important} /* Department tiles: crisper frame and hover. */ html body.home .v5-depts li a{transition:border-color .15s,box-shadow .15s,transform .15s} html body.home .v5-depts li a:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(8,41,77,.10)!important;border-color:#9FB0C5!important} @media (prefers-reduced-motion:reduce){html body.home :is(.v53-proc,.v5-depts) li a:hover{transform:none}} /* Newsletter band: same width rhythm as the sections above. */ html body.home .v56-contact{margin-top:56px!important} @media (max-width:760px){html body.home .v56-contact{margin-top:32px!important}} /* ================================================================== 2.75.1 Homepage refinements */ /* Procurement Centre: tighter gap before the Departments band. */ html body.home #content .v53-proc{padding-bottom:4px!important} /* Section sub-lines: quiet grey text instead of a red side bar. */ html body.home #content :is(.v53-head > p,.v56-note){border-left:0!important;padding-left:0!important;color:#55606E!important;font-size:15px!important} html body.home #content .v56-note b{color:#08294D} /* Procurement panels: no two-colour gradient strip; a clean card with a thin navy top line. */ html body.home .v5-panel::before{background:#08294D!important;height:3px!important} html body.home .v5-panel{background:#fff!important;border-color:#DCE4EE!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 10px 28px rgba(8,41,77,.06)!important} html body.home .v5-panel h2{letter-spacing:-.01em} /* "Solutions for" row: room before the white band below. */ html body.home #content .v62-sect{padding-bottom:48px!important} @media (max-width:760px){html body.home #content .v62-sect{padding-bottom:28px!important}} html body.home .v62-sect a{transition:background-color .15s,border-color .15s} html body.home .v62-sect a:hover{background:#EEF3F9!important;border-color:#C5D0DE!important} /* Why Medlive cards: navy-tinted icon discs instead of pink. */ html body.home .v53-why li .v53-wic{background:#EEF3F9!important;color:#145DA0!important} /* Newsletter: card on the tint, primary red button. */ html body.home .v58-news button{background:#E60023!important;border:1.5px solid #E60023!important;color:#fff!important;border-radius:10px!important;min-height:46px;font-weight:700} html body.home .v58-news button:hover{background:#C4001E!important;border-color:#C4001E!important} html body.home .v58-news input[type=email]{border-radius:10px!important;min-height:46px!important;border:1.5px solid #C5D0DE!important} /* ------------------------------------------------------------------ 2.75.2 At-a-glance number band */ html body.home .v5-trust.v75-glance.wrap{padding-top:22px!important;padding-bottom:22px!important;background:#fff!important;box-shadow:0 0 0 100vmax #fff!important;clip-path:inset(0 -100vmax)!important;border-bottom:1px solid #E3E9F1!important} html body.home .v5-trust.v75-glance.wrap ul{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr))!important;gap:0!important;margin:0!important;padding:0!important;list-style:none!important} html body.home .v5-trust.v75-glance.wrap li{position:relative!important;border:0!important;padding:0!important;min-width:0!important} html body.home .v5-trust.v75-glance.wrap li + li::before{content:""!important;position:absolute!important;left:0!important;top:10%!important;bottom:10%!important;width:1px!important;background:#E3E9F1!important} html body.home .v5-trust.v75-glance.wrap li > :is(a,div){display:flex!important;flex-direction:column!important;align-items:center!important;text-align:center!important;gap:3px!important;padding:6px 10px!important;text-decoration:none!important;border-radius:10px!important} html body.home .v5-trust.v75-glance.wrap li > a:hover{background:#F4F7FB!important} html body.home .v5-trust.v75-glance.wrap li > a:focus-visible{outline:3px solid #145DA0!important;outline-offset:2px!important} html body.home .v5-trust.v75-glance.wrap b{font-size:clamp(22px,2vw,28px)!important;line-height:1.1!important;font-weight:800!important;color:#08294D!important;letter-spacing:-.01em!important;white-space:nowrap!important} html body.home .v5-trust.v75-glance.wrap span{font-size:13.5px!important;line-height:1.35!important;color:#55606E!important} html body.home .v5-trust.v75-glance.wrap li:first-child b{color:#E60023!important} @media (max-width:1100px){ html body.home .v5-trust.v75-glance.wrap ul{grid-template-columns:repeat(3,minmax(0,1fr))!important;row-gap:14px!important} html body.home .v5-trust.v75-glance.wrap li:nth-child(3n+1)::before{display:none!important} } @media (max-width:620px){ html body.home .v5-trust.v75-glance.wrap ul{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body.home .v5-trust.v75-glance.wrap li::before{display:none!important} html body.home .v5-trust.v75-glance.wrap li:nth-child(even)::before{display:block!important} html body.home .v5-trust.v75-glance.wrap b{font-size:22px!important} } html body.home .v5-trust.v75-glance.wrap li{display:block!important;text-align:center!important} html body.home .v5-trust.v75-glance.wrap li > :is(a,div){width:100%!important;box-sizing:border-box!important} html body.home .v5-trust.v75-glance.wrap :is(b,span){display:block!important;margin:0!important;text-align:center!important;width:auto!important;max-width:none!important} html body.home .v5-trust.v75-glance.wrap span{font-weight:500!important} /* ------------------------------------------------------------------ 2.75.3 Calmer hero: quick quotation moves to its own bar under the Procurement Centre */ @media (min-width:761px){ html body.home .v5-hero .v56-qq{display:none!important} html body.home #content .v58-qqm{display:block!important;padding-top:20px!important;padding-bottom:0!important} html body.home #content .v58-qqm .v56-qq{display:grid!important;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:20px;margin:0!important;max-width:none!important;padding:18px 22px!important;background:#fff!important;border:1px solid #DCE4EE!important;border-radius:16px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 10px 28px rgba(8,41,77,.05)!important} html body.home #content .v58-qqm .v56-qq-h{margin:0!important;display:flex;flex-direction:column;gap:2px;font-size:18px!important;font-weight:800;color:#08294D;white-space:nowrap} html body.home #content .v58-qqm .v56-qq-h span{font-size:13.5px;font-weight:500;color:#55606E} html body.home #content .v58-qqm .v56-qq-f{display:grid!important;grid-template-columns:minmax(0,1fr) 110px 200px auto!important;gap:10px!important;margin:0!important} html body.home #content .v58-qqm .v56-qq-f > *{grid-column:auto!important} html body.home #content .v58-qqm .v56-qq-f :is(input,select){min-height:48px!important;border-radius:10px!important;margin:0!important;width:100%!important} html body.home #content .v58-qqm .v56-qq-f button{min-height:48px;padding:0 24px;border-radius:10px!important;background:#E60023!important;border:1.5px solid #E60023!important;color:#fff!important;font-weight:700;white-space:nowrap;cursor:pointer} html body.home #content .v58-qqm .v56-qq-f button:hover{background:#C4001E!important} /* Hero copy gets the room back. */ html body.home .v5-hero-copy .v53-pop{margin-bottom:0!important} } @media (min-width:761px) and (max-width:1100px){ html body.home #content .v58-qqm .v56-qq{grid-template-columns:minmax(0,1fr)} html body.home #content .v58-qqm .v56-qq-f{grid-template-columns:minmax(0,1fr) 100px 180px auto!important} } html body.home #content .v58-qqm .v56-qq-h{align-items:flex-start!important;text-align:left!important}html body.home #content .v58-qqm .v56-qq-h span{margin:0!important;padding:0!important} /* ------------------------------------------------------------------ 2.75.4 Homepage details */ html body.home .v75-head{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin:0 0 16px} html body.home .v75-head h2{margin:0!important} html body.home .v75-all{font-weight:700;font-size:15px;color:#145DA0!important;text-decoration:none!important;white-space:nowrap;padding-bottom:4px} html body.home .v75-all:hover{text-decoration:underline!important} html body.home .v75-all:focus-visible{outline:3px solid #145DA0;outline-offset:2px;border-radius:4px} /* Photos: a gentle zoom on hover (cards already lift). */ @media (prefers-reduced-motion:no-preference){ html body.home :is(.v5-depts li a,.v5-fcard) img{transition:transform .35s ease} html body.home :is(.v5-depts li a:hover,.v5-fcard:hover) img{transform:scale(1.04)} html body.home :is(.v5-depts li a,.v5-fcard .v5-fpic){overflow:hidden} } /* Product cards: name and SKU sit together; the divider above the price is quieter. */ html body.home .v5-fcard h3{margin-bottom:4px!important} html body.home .v5-fcard .v5-fsku{margin-top:0!important;color:#55606E!important} /* ------------------------------------------------------------------ 2.75.5 Phone homepage: shorter, swipeable */ @media (max-width:620px){ /* Buying routes: icon, title and link only (the paragraph is on the linked page). */ html body.home .v74-routes .v74-rt-p{display:none!important} html body.home .v74-routes ul{gap:10px!important} html body.home .v74-routes li a{padding:14px 16px!important;row-gap:6px!important} html body.home .v74-rt-note{display:none} /* Procurement panels: a swipe row with the next card peeking in. */ html body.home #content .v5-panels{display:grid!important;grid-auto-flow:column!important;grid-template-columns:none!important;grid-auto-columns:86%!important;gap:12px!important;overflow-x:auto!important;scroll-snap-type:x mandatory;padding-bottom:10px!important;scrollbar-width:none;-webkit-overflow-scrolling:touch} html body.home #content .v5-panels::-webkit-scrollbar{display:none} html body.home #content .v5-panels > .v5-panel{scroll-snap-align:start;min-width:0;display:flex!important;flex-direction:column!important} html body.home #content .v5-panels .v5-panel-pic{order:-1!important;position:relative!important;width:100%!important;height:130px!important;flex:0 0 auto!important;inset:auto!important} html body.home #content .v5-panels .v5-panel-pic img{position:absolute!important;inset:0!important;width:100%!important;height:100%!important;object-fit:cover!important;-webkit-mask-image:none!important;mask-image:none!important} html body.home #content .v5-panels .v5-panel-tx{width:auto!important;max-width:none!important;padding:16px 18px 18px!important;flex:1 1 auto} html body.home #content .v5-panels .v5-panel-tx p{font-size:15px!important} /* Solutions for: one swipe line of chips. */ html body.home #content .v62-sect{display:flex!important;align-items:center;gap:10px;flex-wrap:nowrap!important} html body.home #content .v62-sect ul{display:flex!important;flex-wrap:nowrap!important;overflow-x:auto;gap:8px!important;padding:2px 0 6px!important;margin:0!important;scrollbar-width:none;-webkit-overflow-scrolling:touch} html body.home #content .v62-sect ul::-webkit-scrollbar{display:none} html body.home #content .v62-sect li{flex:0 0 auto} html body.home #content .v62-sect-h{flex:0 0 auto;white-space:nowrap} } /* ------------------------------------------------------------------ 2.75.8 Tablet fixes */ html body.home .v5-panel-tx .v5-btn{white-space:nowrap!important;width:auto!important;max-width:100%!important} @media (min-width:761px) and (max-width:1100px){ html body.home .v5-panel-tx .v5-btn{font-size:14px!important;padding-left:16px!important;padding-right:14px!important;gap:6px} /* Buying routes: three columns side by side on tablets. */ html body.home .v74-routes ul{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:12px!important} html body.home .v74-routes li a{display:flex!important;flex-direction:column!important;padding:18px!important} html body.home .v74-routes b{font-size:17px!important} html body.home .v74-rt-p{font-size:14px!important} } /* ------------------------------------------------------------------ 2.76.2 Phone: procurement panels stacked (no half-visible card at the edge) */ @media (max-width:620px){ html body.home #content .v5-panels{display:grid!important;grid-auto-flow:row!important;grid-template-columns:minmax(0,1fr)!important;grid-auto-columns:auto!important;overflow:visible!important;scroll-snap-type:none!important;gap:14px!important;padding-bottom:0!important} html body.home #content .v5-panels .v5-panel-pic{height:120px!important} } /* ------------------------------------------------------------------ 2.76.3 Final homepage polish (design lock) */ /* Buying routes: breathing room between the note and the next section. */ @media (min-width:761px){html body.home #content .v74-routes{padding-bottom:52px!important}} @media (max-width:760px){html body.home #content .v74-routes{padding-bottom:28px!important}} /* Tablet: route cards left-aligned like every other card (no mixed centring). */ @media (min-width:761px) and (max-width:1100px){ html body.home .v74-routes li a{align-items:flex-start!important;text-align:left!important} html body.home .v74-routes li a>:last-child{margin-top:auto} } /* Phone: the space kept for the bottom bar now sits inside the navy footer, not as a pale strip below it. */ @media (max-width:760px){ body.ml-v4:not(.woocommerce-checkout){padding-bottom:0!important} body.ml-v4:not(.woocommerce-checkout) #colophon .v11-fbot{padding-bottom:calc(76px + env(safe-area-inset-bottom,0px))!important} } /* Phone: legal links in a tidy two-column grid instead of one orphaned link. */ @media (max-width:760px){ body.ml-v4 #colophon .v11-fbot nav{display:grid!important;grid-template-columns:repeat(2,max-content);gap:10px 28px!important} body.ml-v4 #colophon .v11-fbot nav a{margin:0!important;padding:4px 0!important;border:0!important} body.ml-v4 #colophon .v11-fbot nav a::before,body.ml-v4 #colophon .v11-fbot nav a::after{display:none!important} } /* ================================================================== 2.77.0 Shop All Products design pass Same language as the locked homepage: red eyebrow label, calm white cards, red price, quantity beside the main action, RFQ as the quiet second action, visible selected filters. */ /* Page heading */ html body.v17-shop .v17-shead h1::before{content:"Catalogue" / "";display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#E60023;margin-bottom:10px;line-height:1.2} html body.v17-shop .v17-shead h1{font-size:clamp(30px,3.2vw,42px)!important;font-weight:800!important;letter-spacing:-.02em;line-height:1.1!important;color:#08294D!important;margin:18px 0 10px!important} html body.v17-shop .v17-lead{font-size:17px!important;line-height:1.55!important;color:#4A5664!important;max-width:820px;margin:0 0 22px!important} /* Buyer-type tiles: four quiet white cards */ html body.v17-shop .v17-tiles{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:12px!important;background:none!important;border:0!important;box-shadow:none!important;padding:0!important;margin:0 0 26px!important} html body.v17-shop .v17-tiles a{display:flex!important;align-items:center!important;justify-content:flex-start!important;gap:12px!important;min-height:64px;padding:12px 16px!important;background:#fff!important;border:1px solid #DCE4EE!important;border-radius:12px!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)!important;color:#08294D!important;font-size:15.5px!important;font-weight:700!important;text-decoration:none!important;transition:border-color .15s,box-shadow .15s,transform .15s} html body.v17-shop .v17-tiles a::before,html body.v17-shop .v17-tiles a::after{display:none!important} html body.v17-shop .v17-tiles a:hover{border-color:#9FB0C5!important;box-shadow:0 10px 26px rgba(8,41,77,.10)!important;transform:translateY(-1px)} html body.v17-shop .v17-tiles a:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body.v17-shop .v17-tiles a>svg:first-child{flex:0 0 auto;width:28px!important;height:28px!important;padding:8px;box-sizing:content-box;background:#EEF3F9;border-radius:10px} html body.v17-shop .v17-tiles a>span{flex:1 1 auto;min-width:0;line-height:1.25} html body.v17-shop .v17-tiles a>svg:last-child{flex:0 0 auto;width:16px!important;height:16px!important;color:#E60023;margin-left:auto} /* Toolbar */ html body.v17-shop .v17-sbar{gap:12px!important;align-items:center!important;margin-bottom:10px!important} html body.v17-shop .v17-sbar select,html body.v17-shop .v17-sbar input[type=search]{height:46px!important;border:1px solid #CAD5E2!important;border-radius:10px!important;font-size:15px!important;background-color:#fff!important} html body.v17-shop .v17-sbar .v5-sfind{border-radius:10px!important} /* Result count + selected filters */ html body.v17-shop .v77-rbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px 16px;margin:4px 0 16px;width:100%;grid-column:1/-1} html body.v17-shop .v77-count{margin:0!important;font-size:15px;color:#4A5664} html body.v17-shop .v77-count b{color:#08294D;font-weight:700} html body.v17-shop .v77-chips{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0!important;padding:0!important} html body.v17-shop .v77-chips a{display:inline-flex;align-items:center;gap:8px;min-height:34px;padding:4px 12px 4px 14px;border:1px solid #C9D6E6;border-radius:999px;background:#EEF3F9;color:#08294D;font-size:14px;font-weight:600;text-decoration:none!important;line-height:1.2} html body.v17-shop .v77-chips a:hover{border-color:#08294D;background:#fff} html body.v17-shop .v77-chips a:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body.v17-shop .v77-chips a svg{color:#E60023} html body.v17-shop .v77-chips .v77-clear a{background:none;border-color:transparent;color:#E60023;text-decoration:underline!important;padding-left:6px} /* Product cards */ html body.v17-shop ul.products li.v17-card{display:flex!important;flex-direction:column!important;padding:14px!important;border:1px solid #DCE4EE!important;border-radius:14px!important;background:#fff!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)!important;transition:border-color .15s,box-shadow .15s} html body.v17-shop ul.products li.v17-card:hover{border-color:#B9C7D8!important;box-shadow:0 12px 28px rgba(8,41,77,.10)!important} html body.v17-shop li.v17-card .v5-cimg{border:0!important;border-radius:10px!important;background:#fff!important;padding:6px!important;margin-bottom:12px!important} html body.v17-shop li.v17-card .v5-ctitle{font-size:16px!important;line-height:1.3!important;margin:0 0 4px!important;min-height:2.6em} html body.v17-shop li.v17-card .v5-ctitle a{color:#08294D!important;font-weight:700!important;text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html body.v17-shop li.v17-card .v5-ctitle a:hover{color:#145DA0!important;text-decoration:underline!important} html body.v17-shop li.v17-card .v67-csku{font-size:13px!important;color:#5B6676!important;margin:0 0 6px!important} html body.v17-shop li.v17-card .v17-price{margin:auto 0 10px!important;padding-top:10px!important;border-top:1px solid #EEF2F7;color:#E60023!important;font-size:20px!important;font-weight:800!important;line-height:1.2!important} html body.v17-shop li.v17-card .v17-price *{color:inherit} html body.v17-shop li.v17-card .v17-price small,html body.v17-shop li.v17-card .v17-price .vat,html body.v17-shop li.v17-card .v17-price .woocommerce-price-suffix{font-size:12.5px!important;font-weight:600!important;color:#5B6676!important;margin-left:4px} html body.v17-shop li.v17-card .v17-buy{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;align-items:stretch!important;margin:0!important} html body.v17-shop li.v17-card .v17-buy .v5-qty{height:40px!important;margin:0!important;border-radius:8px!important;width:auto!important} html body.v17-shop li.v17-card .v17-buy .v5-qty input{width:34px!important} html body.v17-shop li.v17-card .v17-btn{height:40px!important;min-height:40px!important;font-size:14.5px!important;border-radius:8px!important;box-shadow:0 4px 12px rgba(230,0,35,.18)!important;white-space:nowrap} html body.v17-shop li.v17-card .v17-btn2{grid-column:1/-1;height:38px;border:1px solid #9FB0C5;border-radius:8px;background:#fff;color:#08294D;font:700 14px/1 var(--f-head,inherit);cursor:pointer;transition:border-color .15s,background .15s} html body.v17-shop li.v17-card .v17-btn2:hover{border-color:#08294D;background:#F4F7FB} html body.v17-shop li.v17-card .v17-btn2:focus-visible,html body.v17-shop li.v17-card .v17-btn:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body.v17-shop li.v17-card .v67-ccmp{margin-top:10px!important;font-size:13px!important;align-self:flex-start} /* Under the grid: the payment line repeats the sidebar and footer. */ html body.v17-shop .v17-bottom .v16-pay{display:none!important} /* Tablet */ @media (min-width:761px) and (max-width:1100px){ html body.v17-shop .v17-tiles{grid-template-columns:repeat(2,minmax(0,1fr))!important} html body.v17-shop .v17-sbar{padding-left:0!important;padding-right:0!important} } /* Phone: tiles become one swipe row; cards keep the quantity above the button. */ @media (max-width:760px){ html body.v17-shop .v17-lead{font-size:15.5px!important;margin-bottom:16px!important} html body.v17-shop .v17-tiles{display:flex!important;overflow-x:auto;scroll-snap-type:x mandatory;gap:10px!important;margin:0 -16px 18px!important;padding:2px 16px 6px!important;scrollbar-width:none} html body.v17-shop .v17-tiles::-webkit-scrollbar{display:none} html body.v17-shop .v17-tiles a{flex:0 0 auto;min-height:52px;padding:8px 14px 8px 10px!important;font-size:14.5px!important;scroll-snap-align:start;white-space:nowrap} html body.v17-shop .v17-tiles a>svg:first-child{width:22px!important;height:22px!important;padding:6px} html body.v17-shop ul.products li.v17-card{padding:10px!important} html body.v17-shop li.v17-card .v5-ctitle{font-size:14.5px!important} html body.v17-shop li.v17-card .v17-price{font-size:17px!important} html body.v17-shop li.v17-card .v17-price small,html body.v17-shop li.v17-card .v17-price .vat{display:block;margin:2px 0 0!important} html body.v17-shop li.v17-card .v17-buy{grid-template-columns:minmax(0,1fr)!important} html body.v17-shop li.v17-card .v17-buy .v5-qty{width:100%!important} html body.v17-shop li.v17-card .v17-btn2{font-size:13px} } html body.v17-shop .v77-rbar.is-empty{margin:0 0 18px} @media (max-width:760px){ html body.v17-shop .v17-tiles{grid-template-columns:none!important} html body.v17-shop .v17-tiles a{flex:0 0 auto!important;width:auto!important;max-width:none!important;min-width:0!important;flex-direction:row!important} html body.v17-shop .v17-tiles a>span{white-space:nowrap!important;width:auto!important;writing-mode:horizontal-tb!important;flex:0 0 auto!important} } html body.v17-shop li.v17-card .v17-price .amount,html body.v17-shop li.v17-card .v17-price bdi,html body.v17-shop li.v17-card .v17-price .woocommerce-Price-currencySymbol{color:#E60023!important} @media (max-width:760px){ html body.v17-shop .v17-shead .v17-tiles{display:flex!important;flex-direction:row!important;flex-wrap:nowrap!important;justify-content:flex-start!important;align-items:stretch!important} html body.v17-shop li.v17-card .v17-btn2{white-space:nowrap;font-size:12.5px!important;padding:0 6px;height:36px} } /* Phone: a tidy 2×2 grid rather than a swipe row (no half-visible tile at the screen edge). */ @media (max-width:760px){ html body.v17-shop .v17-shead .v17-tiles{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr))!important;overflow:visible!important;margin:0 0 18px!important;padding:0!important;gap:8px!important} html body.v17-shop .v17-shead .v17-tiles a{width:auto!important;min-height:56px;padding:8px 10px!important;gap:8px!important;font-size:13.5px!important;white-space:normal!important} html body.v17-shop .v17-shead .v17-tiles a>span{white-space:normal!important;flex:1 1 auto!important} html body.v17-shop .v17-shead .v17-tiles a>svg:last-child{display:none!important} } html body.v17-shop li.v17-card div.v17-buy{grid-template-columns:minmax(0,1fr)!important} html body.v17-shop li.v17-card div.v17-buy .v17-btn{display:flex;align-items:center;justify-content:center;width:100%;text-decoration:none!important} /* ------------------------------------------------------------------ 2.77.1 Shop polish: filters, pagination, bulk band */ /* Filter panel: one calm card, smaller section headings, roomier checkboxes */ html body.v17-shop #ml-filters .v2-filters{border:1px solid #DCE4EE!important;border-radius:14px!important;background:#fff!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)!important;padding:4px 18px 10px!important} html body.v17-shop #ml-filters .v2-fhead{display:flex!important;align-items:center!important;justify-content:space-between!important;padding:14px 0 12px!important;border-bottom:1px solid #EEF2F7!important;margin:0!important} html body.v17-shop #ml-filters .v2-fhead h2{font-size:18px!important;font-weight:800!important;color:#08294D!important;margin:0!important} html body.v17-shop #ml-filters .v2-fhead a{font-size:14px!important;font-weight:600!important;color:#E60023!important} html body.v17-shop #ml-filters .v2-facc{border-bottom:1px solid #EEF2F7!important;padding:4px 0 10px!important;margin:0!important} html body.v17-shop #ml-filters .v2-facc:last-of-type{border-bottom:0!important} html body.v17-shop #ml-filters .v2-facc summary{font-size:16px!important;font-weight:700!important;color:#08294D!important;padding:12px 0 8px!important;letter-spacing:0} html body.v17-shop #ml-filters .v2-chk{font-size:14.5px!important;color:#2B3540!important;padding:5px 0!important;line-height:1.35!important;cursor:pointer} html body.v17-shop #ml-filters .v2-chk:hover{color:#08294D!important} html body.v17-shop #ml-filters input[type=checkbox]{accent-color:#08294D;width:17px;height:17px} html body.v17-shop #ml-filters .v2-fsearch,html body.v17-shop #ml-filters .v67-prow input{border-radius:8px!important;border-color:#CAD5E2!important} html body.v17-shop #ml-filters .v67-papply{border-radius:8px!important;height:42px} html body.v17-shop #ml-filters .v51-card{border-radius:14px!important} html body.v17-shop #ml-filters .v51-note{border-radius:12px!important} /* Product titles: two lines at most everywhere */ html body.v17-shop li.v17-card .v5-ctitle a{display:-webkit-box!important;-webkit-line-clamp:2!important;-webkit-box-orient:vertical!important;overflow:hidden!important} html body.v17-shop li.v17-card .v67-csku{overflow-wrap:anywhere;white-space:normal!important;text-overflow:clip!important} /* Pagination: rounded number buttons, current page in navy, first/last page with ellipsis */ html body.v17-shop .woocommerce-pagination{margin:28px 0 8px!important} html body.v17-shop .woocommerce-pagination ul.page-numbers{display:flex!important;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px!important;border:0!important;margin:0!important;padding:0!important;background:none!important} html body.v17-shop .woocommerce-pagination ul.page-numbers li{border:0!important;margin:0!important;float:none!important;background:none!important} html body.v17-shop .woocommerce-pagination .page-numbers:is(a,span){display:inline-flex!important;align-items:center;justify-content:center;gap:6px;min-width:42px;height:42px;padding:0 12px!important;border:1px solid #DCE4EE!important;border-radius:10px!important;background:#fff!important;color:#08294D!important;font-size:15px!important;font-weight:700!important;text-decoration:none!important;line-height:1!important;box-shadow:0 1px 2px rgba(8,41,77,.04)} html body.v17-shop .woocommerce-pagination a.page-numbers:hover{border-color:#08294D!important;background:#F4F7FB!important} html body.v17-shop .woocommerce-pagination a.page-numbers:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body.v17-shop .woocommerce-pagination .page-numbers.current{background:#08294D!important;border-color:#08294D!important;color:#fff!important} html body.v17-shop .woocommerce-pagination .page-numbers.dots{border:0!important;background:none!important;box-shadow:none;min-width:20px;padding:0!important;color:#5B6676!important} html body.v17-shop .woocommerce-pagination .page-numbers.is-disabled{color:#9AA6B4!important;background:#F6F8FB!important;box-shadow:none} /* Bulk band: navy panel in the homepage style */ html body.v17-shop .v17-bottom{margin-top:36px!important} html body.v17-shop .v17-bulk{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;align-items:center!important;gap:22px!important;padding:26px 30px!important;border:0!important;border-radius:16px!important;background:#08294D!important;box-shadow:0 14px 34px rgba(8,41,77,.18)!important;color:#fff!important} html body.v17-shop .v17-bulk>svg{width:52px!important;height:52px!important;padding:12px;box-sizing:content-box;border-radius:14px;background:rgba(255,255,255,.08)} html body.v17-shop .v17-bulk>svg *{stroke:#fff!important} html body.v17-shop .v17-bulk .v15-vsep{display:none!important} html body.v17-shop .v17-bulk h2{font-size:clamp(20px,2vw,26px)!important;font-weight:800!important;color:#fff!important;margin:0 0 6px!important;line-height:1.2!important} html body.v17-shop .v17-bulk p{font-size:15.5px!important;color:#D5DEEA!important;margin:0!important;max-width:620px;line-height:1.5} html body.v17-shop .v17-bulk .v13-btn{white-space:nowrap;height:48px;padding:0 22px!important;border-radius:10px!important;font-size:15px!important} html body.v17-shop .v17-bottom .v16-info{justify-content:center;font-size:14px!important;color:#4A5664!important;margin:16px 0 0!important} html body.v17-shop .v17-bottom .v16-info svg{width:18px!important;height:18px!important} @media (max-width:760px){ html body.v17-shop .v17-bulk{grid-template-columns:minmax(0,1fr)!important;padding:22px 18px!important;gap:14px!important} html body.v17-shop .v17-bulk>svg{width:36px!important;height:36px!important;padding:9px} html body.v17-shop .v17-bulk .v13-btn{justify-self:stretch;justify-content:center} html body.v17-shop .v17-bottom .v16-info{text-align:left;justify-content:flex-start} html body.v17-shop .woocommerce-pagination .page-numbers:is(a,span){min-width:38px;height:38px;padding:0 9px!important;font-size:14px!important} html body.v17-shop .woocommerce-pagination .prev,html body.v17-shop .woocommerce-pagination .next{font-size:0!important;gap:0!important} } html body.v17-shop aside#ml-filters{border:0!important;background:none!important;box-shadow:none!important;padding:0!important} html body.v17-shop nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current{background:#08294D!important;border-color:#08294D!important;color:#fff!important} html body.v17-shop nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current{box-shadow:0 4px 12px rgba(8,41,77,.22)!important;outline:0!important} html body.ml-v4.ml-v2.ml-v2-shop.v17-shop nav.woocommerce-pagination ul.page-numbers li span.page-numbers.current{border-color:#08294D!important;background:#08294D!important} /* ------------------------------------------------------------------ 2.77.2 Shop list view */ @media (min-width:761px){ html body.v17-shop .rh-shop-main ul.products.v67-list{gap:12px!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product{grid-template-columns:116px minmax(0,1fr) auto 280px!important;grid-template-areas:"img title price buy" "img sku price buy" "img . price cmp"!important;gap:4px 24px!important;padding:14px 18px!important;align-items:center!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v5-cimg{width:116px!important;height:116px!important;padding:8px!important;background:#F6F8FB!important;border-radius:12px!important;margin:0!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v5-cimg img{width:100px!important;height:100px!important;mix-blend-mode:multiply} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v5-ctitle{min-height:0!important;font-size:17px!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v17-price{align-self:center!important;border-top:0!important;padding:0!important;margin:0!important;white-space:nowrap;text-align:right} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v17-price small{display:block;margin:2px 0 0!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v67-ccmp{margin:4px 0 0!important;justify-self:end;align-self:start} } @media (min-width:761px) and (max-width:1100px){ html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product{grid-template-columns:96px minmax(0,1fr) 230px!important;grid-template-areas:"img title buy" "img sku buy" "img price cmp"!important;gap:4px 16px!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v5-cimg{width:96px!important;height:96px!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v5-cimg img{width:80px!important;height:80px!important} html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v17-price{text-align:left} } @media (min-width:761px){html body.v17-shop .rh-shop-main ul.products.v67-list li.v17-card.product .v5-cimg{background:#fff!important;border:1px solid #EEF2F7!important}} /* Quotation markets: calmer "Price on Request (USD)" line */ html body.v17-shop li.v17-card .v17-price:not(.is-buy){font-size:16.5px!important;font-weight:700!important;color:#08294D!important;letter-spacing:-.005em} html body.v17-shop li.v17-card .v17-price:not(.is-buy) *{color:#08294D!important;font-size:inherit!important;font-weight:inherit!important} html body.v17-shop li.v17-card .v17-price:not(.is-buy) small,html body.v17-shop li.v17-card .v17-price:not(.is-buy) [class*=usd]{font-size:12.5px!important;font-weight:600!important;color:#5B6676!important} html body.ml-v4.v17-shop ul.products li.v17-card p.v17-price span.por{font-family:var(--f-head,inherit)!important;font-size:17px!important;font-weight:700!important;color:#08294D!important} html body.ml-v4.v17-shop ul.products li.v17-card p.v17-price span.por small{font-family:inherit!important;font-size:12.5px!important;font-weight:600!important;color:#5B6676!important;margin-left:4px} /* ------------------------------------------------------------------ 2.77.3 Shop: tablet alignment, phone toolbar, sub-category chips */ /* Tablet/phone: the hidden filter column no longer leaves a 16px indent beside the products. */ /* Sub-category chips ("Browse Wound Care"): same pill style as the filter chips, wrapping on phones (nothing cut off). */ html body.v17-shop .v65-subcats ul{gap:8px!important} html body.v17-shop .v65-subcats a{min-height:36px;padding:6px 14px!important;border:1px solid #DCE4EE!important;border-radius:999px!important;background:#fff!important;color:#08294D!important;font-size:14.5px!important;font-weight:600!important;text-decoration:none!important;box-shadow:0 1px 2px rgba(8,41,77,.04);transition:border-color .15s,background .15s} html body.v17-shop .v65-subcats a:hover{border-color:#08294D!important;background:#F4F7FB!important} html body.v17-shop .v65-subcats a:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body.v17-shop .v65-subcats .v65-n{color:#5B6676!important;font-weight:500} html body.v17-shop .v65-subcats-h{font-weight:700!important;color:#08294D!important} @media (max-width:760px){ html body.v17-shop .v65-subcats ul{flex-wrap:wrap!important;overflow:visible!important;margin-right:0!important;padding-right:0!important} html body.v17-shop .v65-subcats a{font-size:13.5px!important;padding:5px 12px!important;min-height:34px} } /* Phone toolbar: search on its own line, then Filters | Sort | Show on one tidy row. */ @media (max-width:760px){ html body.v17-shop .v17-sbar{display:grid!important;grid-template-columns:auto minmax(0,1fr) auto!important;gap:10px!important;align-items:center!important} html body.v17-shop .v17-sbar .v5-sfind{grid-column:1/-1!important;order:0!important} html body.v17-shop .v17-sbar .v5-ftoggle{grid-column:1!important;grid-row:2!important;order:0!important;height:46px!important;margin:0!important;padding:0 14px!important;border:1px solid #08294D!important;border-radius:10px!important;background:#08294D!important;color:#fff!important;font-weight:700!important;font-size:15px!important;gap:8px} html body.v17-shop .v17-sbar .v5-ftoggle .ico,html body.v17-shop .v17-sbar .v5-ftoggle svg{stroke:#fff!important;color:#fff!important} html body.v17-shop .v17-sbar .v5-ssort{grid-column:2!important;grid-row:2!important;min-width:0;margin:0!important} html body.v17-shop .v17-sbar .v5-ssort>span{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} html body.v17-shop .v17-sbar .v5-ssort form,html body.v17-shop .v17-sbar .v5-ssort select{width:100%!important;min-width:0!important} html body.v17-shop .v17-sbar .v67-per{grid-column:3!important;grid-row:2!important;margin:0!important} html body.v17-shop .v17-sbar .v67-per label{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)} html body.v17-shop .v17-sbar .v67-per select{width:78px!important} } /* Desktop: a gentle lift of the product photo on hover. */ @media (hover:hover) and (prefers-reduced-motion:no-preference){ html body.v17-shop li.v17-card .v5-cimg img{transition:transform .25s ease} html body.v17-shop li.v17-card:hover .v5-cimg img{transform:scale(1.035)} } @media (max-width:960px){html body.ml-v4.ml-v2.v17-shop div.rh-shop{grid-template-columns:minmax(0,1fr)!important;column-gap:0!important}html body.ml-v4.ml-v2.v17-shop div.rh-shop>.rh-shop-main,html body.ml-v4.ml-v2.v17-shop div.rh-shop>aside#ml-filters{grid-column:1/-1!important}} @media (max-width:960px){html body.ml-v4.ml-v2.v17-shop div.rh-shop>aside#ml-filters{grid-row:1!important}html body.ml-v4.ml-v2.v17-shop div.rh-shop>.rh-shop-main{grid-row:2!important}} @media (min-width:561px) and (max-width:960px){html body.v17-shop #ml-filters .v2-facc-b:has(>.v2-chk),html body.v17-shop #ml-filters .v2-facc-b>.v2-flist{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:24px}html body.v17-shop #ml-filters .v2-facc-b>:not(.v2-chk):not(.v2-flist){grid-column:1/-1}} /* Small laptops / landscape tablets (961–1199px): three cards per row so the buttons never clip. */ @media (min-width:961px) and (max-width:1199px){ html body.ml-v4.v17-shop .rh-shop-main ul.products:not(.v67-list){display:grid!important;grid-template-columns:repeat(3,minmax(0,1fr))!important} html body.ml-v4.v17-shop .rh-shop-main ul.products:not(.v67-list) li.v17-card{width:auto!important;margin:0!important} html body.v17-shop #ml-filters .v2-fhead h2{font-size:17px!important} } html body.v17-shop .v65-subcats .v65-n{opacity:1!important;color:#4A5664!important} /* ------------------------------------------------------------------ 2.77.5 Shop All Products: department quick links */ html body.v17-shop .v77-depts{margin:0 0 18px;padding:16px 18px 18px;border:1px solid #DCE4EE;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)} html body.v17-shop .v77-depts-h{margin:0 0 12px!important;font-size:12.5px!important;font-weight:800!important;letter-spacing:.1em;text-transform:uppercase;color:#E60023!important;line-height:1.2} html body.v17-shop .v77-depts ul{list-style:none;margin:0!important;padding:0!important;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px} html body.v17-shop .v77-depts a{display:flex;align-items:center;gap:10px;min-height:44px;padding:6px 12px 6px 8px;border:1px solid #E6ECF3;border-radius:10px;background:#F8FAFC;color:#08294D;font-size:14px;font-weight:600;line-height:1.25;text-decoration:none!important;transition:border-color .15s,background .15s} html body.v17-shop .v77-depts a:hover{border-color:#08294D;background:#fff} html body.v17-shop .v77-depts a:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body.v17-shop .v77-depts a .ico,html body.v17-shop .v77-depts a svg{flex:0 0 auto;width:20px;height:20px;padding:6px;box-sizing:content-box;border-radius:8px;background:#fff;color:#E60023;stroke:#E60023} @media (min-width:961px) and (max-width:1199px){html body.v17-shop .v77-depts ul{grid-template-columns:repeat(3,minmax(0,1fr))}} @media (max-width:760px){ html body.v17-shop .v77-depts{padding:14px 12px} html body.v17-shop .v77-depts ul{grid-template-columns:repeat(2,minmax(0,1fr));gap:6px} html body.v17-shop .v77-depts a{font-size:13px;min-height:42px;padding:5px 8px 5px 6px;gap:8px} html body.v17-shop .v77-depts a .ico,html body.v17-shop .v77-depts a svg{width:16px;height:16px;padding:5px} } @media (max-width:760px){html body.v17-shop .v77-depts{display:none!important}} html body.v17-shop .v77-depts{margin-bottom:16px} /* ------------------------------------------------------------------ 2.77.6 Shop final polish (design lock) */ /* Phone: full introduction sentence (no mid-sentence "…"). */ @media (max-width:760px){html body.v17-shop .v17-shead .v17-lead{display:block!important;-webkit-line-clamp:unset!important;overflow:visible!important;max-height:none!important;text-overflow:clip!important}} /* Tablet: department links in three columns so names fit on one line. */ @media (min-width:761px) and (max-width:960px){html body.v17-shop .v77-depts ul{grid-template-columns:repeat(3,minmax(0,1fr))}} /* Bulk band: wider text line, calmer heading on tablets. */ html body.v17-shop .v17-bulk p{max-width:700px!important} @media (min-width:761px) and (max-width:1100px){html body.v17-shop .v17-bulk h2{font-size:22px!important}} /* Pagination: no rule lines around it; on phones every button fits the screen width. */ html body.v17-shop nav.woocommerce-pagination,html body.v17-shop nav.woocommerce-pagination ul.page-numbers{border:0!important;box-shadow:none!important;padding-top:0!important;padding-bottom:0!important} @media (max-width:760px){ html body.v17-shop nav.woocommerce-pagination ul.page-numbers{gap:5px!important;max-width:100%} html body.v17-shop nav.woocommerce-pagination .page-numbers:is(a,span){min-width:34px!important;height:36px!important;padding:0 7px!important;font-size:14px!important} html body.v17-shop nav.woocommerce-pagination .page-numbers.dots{min-width:14px!important;padding:0!important} } @media (max-width:760px){ html body.v17-shop nav.woocommerce-pagination ul.page-numbers{gap:4px!important} html body.v17-shop nav.woocommerce-pagination .page-numbers:is(a,span){min-width:32px!important;padding:0 5px!important} html body.v17-shop nav.woocommerce-pagination :is(.prev,.next).page-numbers{width:34px!important;min-width:34px!important;padding:0!important;justify-content:center} } /* Narrow phones: drop the page numbers two steps away from the current page (first, last and neighbours stay). */ @media (max-width:480px){html body.v17-shop nav.woocommerce-pagination li.v77-far{display:none!important}} @media (max-width:480px){html body.ml-v4.ml-catalogue.v17-shop nav.woocommerce-pagination ul.page-numbers li.v77-far{display:none!important}} /* ------------------------------------------------------------------ 2.77.8 Shop cards: shorter, even boxes (owner request) */ /* Photo area 4:3 instead of square; titles strictly two lines; less empty space above the price. */ html body.ml-v4.v17-shop ul.products:not(.v67-list) li.product.v17-card a.v5-cimg.v5-cimg{aspect-ratio:4/3!important;height:auto!important;min-height:0!important;max-height:none!important;display:flex!important;align-items:center!important;justify-content:center!important;padding:6px!important;margin:0 0 10px!important;overflow:hidden} html body.ml-v4.v17-shop ul.products:not(.v67-list) li.product.v17-card a.v5-cimg.v5-cimg img{width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important;aspect-ratio:auto!important} html body.ml-v4.v17-shop ul.products li.product.v17-card h2.v5-ctitle{line-height:1.3!important;min-height:2.6em!important;max-height:2.6em;overflow:hidden;margin:0 0 3px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card h2.v5-ctitle a{display:-webkit-box!important;-webkit-line-clamp:2!important;line-clamp:2;-webkit-box-orient:vertical!important;overflow:hidden!important;white-space:normal!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v67-csku{margin:0 0 4px!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v17-price{padding-top:8px!important;margin:auto 0 8px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v67-ccmp{margin-top:8px!important} /* ------------------------------------------------------------------ 2.77.9 Shop sidebar: useful help column that stays in view (owner request: empty space under the sidebar) */ @media (min-width:961px){ html body.ml-v4.v17-shop div.rh-shop>aside#ml-filters{align-self:stretch!important;height:auto!important} html body.ml-v4.v17-shop aside#ml-filters .v51-side{display:flex!important;flex-direction:column;gap:12px;position:sticky;top:88px;margin-top:16px} html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-card,html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-note{display:block!important;margin:0!important} html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-note{display:flex!important} /* "Buying for an institution?" links card */ html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-card:not(.v51-quote):not(.v51-help){padding:16px 16px 10px!important;border:1px solid #DCE4EE!important;border-radius:14px!important;background:#fff!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)!important} html body.ml-v4.v17-shop aside#ml-filters .v51-side h2,html body.ml-v4.v17-shop aside#ml-filters .v51-side h3{font-size:16px!important;line-height:1.25!important;margin:0 0 8px!important} html body.ml-v4.v17-shop aside#ml-filters .v51-links{list-style:none!important;margin:0!important;padding:0!important} html body.ml-v4.v17-shop aside#ml-filters .v51-links li{margin:0!important;border-top:1px solid #EEF2F7} html body.ml-v4.v17-shop aside#ml-filters .v51-links li:first-child{border-top:0} html body.ml-v4.v17-shop aside#ml-filters .v51-links a{display:flex!important;align-items:center;justify-content:space-between;gap:8px;padding:9px 2px!important;font-size:14px!important;font-weight:600!important;color:#08294D!important;text-decoration:none!important;border-radius:6px} html body.ml-v4.v17-shop aside#ml-filters .v51-links a:hover{color:#E60023!important} html body.ml-v4.v17-shop aside#ml-filters .v51-links a:focus-visible{outline:3px solid #145DA0;outline-offset:2px} /* "Need help?" card */ html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-help{padding:16px!important;border:1px solid #DCE4EE!important;border-radius:14px!important;background:#F6F8FB!important;box-shadow:none!important} html body.ml-v4.v17-shop aside#ml-filters .v51-help p{font-size:13.5px!important;color:#4A5664!important;margin:0 0 8px!important} html body.ml-v4.v17-shop aside#ml-filters .v51-help a{display:flex;align-items:center;gap:8px;padding:5px 0;font-size:14px!important;font-weight:600;color:#08294D!important;text-decoration:none!important;overflow-wrap:anywhere} html body.ml-v4.v17-shop aside#ml-filters .v51-help a:hover{color:#E60023!important} html body.ml-v4.v17-shop aside#ml-filters .v51-note{padding:10px 12px!important;font-size:13px!important} } @media (min-width:961px){ /* Keep the follow-along column short enough to stay in view: quotation card + institution links only. */ html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-help,html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-note{display:none!important} html body.ml-v4.v17-shop aside#ml-filters .v51-links a{justify-content:flex-start!important;text-align:left!important;padding:8px 2px!important;line-height:1.3} html body.ml-v4.v17-shop aside#ml-filters .v51-links a svg,html body.ml-v4.v17-shop aside#ml-filters .v51-links a .ico{flex:0 0 auto;width:18px;height:18px;color:#E60023;stroke:#E60023} html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-quote{padding:18px!important} html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-quote h2{font-size:19px!important;margin-bottom:6px!important} html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-quote p{font-size:13.5px!important;line-height:1.45!important;margin:0 0 12px!important} html body.ml-v4.v17-shop aside#ml-filters .v51-side>.v51-quote .v51-btn{width:100%;justify-content:center;white-space:nowrap;font-size:14.5px!important;padding:10px 12px!important} } @media (min-width:961px){html body.ml-v4.v17-shop div.rh-shop>aside#ml-filters{overflow:visible!important}} /* ------------------------------------------------------------------ 2.78.0 Shop 961–1199px: four cards per row (owner request) — 12 products fill 3 full rows */ @media (min-width:961px) and (max-width:1199px){ html body.ml-v4.v17-shop .rh-shop-main ul.products:not(.v67-list){grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:10px!important} html body.ml-v4.v17-shop ul.products:not(.v67-list) li.product.v17-card{padding:10px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card h2.v5-ctitle{font-size:14.5px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v17-price{font-size:17px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v17-price small{display:block;margin:2px 0 0!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v17-buy{grid-template-columns:minmax(0,1fr)!important;gap:6px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v17-buy .v5-qty{width:100%!important;height:36px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v17-btn{height:38px!important;min-height:38px!important;font-size:14px!important} html body.ml-v4.v17-shop ul.products li.product.v17-card .v17-btn2{height:36px!important;font-size:13px!important;white-space:nowrap;padding:0 4px} } /* ------------------------------------------------------------------ 2.78.1 Shop final touches at 961–1199px */ @media (min-width:961px) and (max-width:1199px){ html body.v17-shop .v17-shead .v17-tiles{grid-template-columns:repeat(4,minmax(0,1fr))!important} html body.v17-shop .v17-shead .v17-tiles a{font-size:14.5px!important;padding:10px 12px!important;gap:10px!important} html body.v17-shop .v17-shead .v17-tiles a>svg:first-child{width:24px!important;height:24px!important;padding:7px} html body.v17-shop #ml-filters .v2-filters{padding:4px 14px 10px!important} html body.v17-shop #ml-filters .v2-fhead h2{font-size:16px!important;white-space:nowrap} html body.v17-shop #ml-filters .v2-fhead a{font-size:13px!important;white-space:nowrap} html body.v17-shop #ml-filters .v2-chk{font-size:13.5px!important;gap:8px!important} } @media (min-width:961px) and (max-width:1199px){ html body.v17-shop .v17-shead .v17-tiles a>svg:last-child{display:none!important} html body.v17-shop #ml-filters .v2-fhead{gap:8px} html body.v17-shop #ml-filters .v2-fhead h2{font-size:15px!important;flex:1 1 auto;min-width:0} html body.v17-shop #ml-filters .v2-fhead a{flex:0 0 auto;font-size:12.5px!important} } @media (min-width:961px) and (max-width:1199px){ html body.ml-v4.v17-shop #ml-filters .v2-fhead{display:flex!important;flex-wrap:wrap!important;align-items:baseline!important;justify-content:space-between!important;row-gap:2px} html body.ml-v4.v17-shop #ml-filters .v2-fhead h2{white-space:nowrap!important;flex:0 0 auto!important;width:auto!important;overflow:visible!important} html body.ml-v4.v17-shop #ml-filters .v2-fhead a{margin-left:auto!important;position:static!important} html body.v17-shop .v17-shead .v17-tiles a>span{white-space:normal!important} } /* ================================================================== 2.79.0 Product page design pass Same language as the locked Shop: red price, compact vertical product cards for accessories and related products, one action hierarchy (Add to Cart, then Add to RFQ Basket). */ html body.single-product .v73-buybox p.v73-price .amount,html body.single-product .v73-buybox p.v73-price bdi{color:#E60023!important} html body.single-product .v73-buybox p.v73-price small.vat{color:#5B6676!important;font-weight:600} /* Section headings */ html body.single-product #page #content section.v7-related{margin-top:44px!important} html body.single-product #page #content section.v7-related>h2{font-size:clamp(24px,2.4vw,30px)!important;font-weight:800!important;letter-spacing:-.015em;color:#08294D!important;margin:0 0 6px!important} html body.single-product #page #content section.v7-related>h2::before{display:block;font-size:12.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#E60023;margin-bottom:8px;line-height:1.2} html body.single-product #page #content section.v7-related.v69-acc>h2::before{content:"Works with this product" / ""} html body.single-product #page #content section.v7-related:not(.v69-acc)>h2::before{content:"You may also need" / ""} html body.single-product #page #content section.v7-related .v69-note{font-size:14.5px!important;color:#4A5664!important;margin:0 0 16px!important} html body.single-product #page #content section.v7-related:not(.v69-acc)>h2{margin-bottom:16px!important} /* Card grid */ html body.single-product #page #content section.v7-related>ul{display:grid!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:14px!important;list-style:none!important;margin:0!important;padding:0!important} html body.single-product #page #content section.v7-related li.v7-rcard{position:relative;display:flex!important;flex-direction:column!important;gap:0!important;padding:14px!important;border:1px solid #DCE4EE!important;border-radius:14px!important;background:#fff!important;box-shadow:0 1px 2px rgba(8,41,77,.04),0 6px 18px rgba(8,41,77,.05)!important;transition:border-color .15s,box-shadow .15s;width:auto!important;margin:0!important} html body.single-product #page #content section.v7-related li.v7-rcard:hover{border-color:#B9C7D8!important;box-shadow:0 12px 28px rgba(8,41,77,.10)!important} html body.single-product #page #content section.v7-related .v7-rpic{display:flex!important;align-items:center;justify-content:center;width:100%!important;height:auto!important;aspect-ratio:4/3;margin:0 0 10px!important;padding:6px;border:0!important;border-radius:10px;background:#fff;overflow:hidden} html body.single-product #page #content section.v7-related .v7-rpic img{width:100%!important;height:100%!important;max-height:none!important;object-fit:contain!important;border-radius:0!important} html body.single-product #page #content section.v7-related .v7-rbody{display:flex;flex-direction:column;flex:1 1 auto;min-width:0;padding:0!important} html body.single-product #page #content section.v7-related .v7-rbody h3{font-size:16px!important;line-height:1.3!important;font-weight:700!important;margin:0 0 3px!important;min-height:2.6em} html body.single-product #page #content section.v7-related .v7-rbody h3 a{color:#08294D!important;text-decoration:none!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} html body.single-product #page #content section.v7-related .v7-rbody h3 a:hover{color:#145DA0!important;text-decoration:underline!important} html body.single-product #page #content section.v7-related .v7-sku-sm{font-size:13px!important;color:#5B6676!important;margin:0 0 6px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} html body.single-product #page #content section.v7-related .v7-price{margin:auto 0 2px!important;padding-top:8px!important;border-top:1px solid #EEF2F7;font-size:19px!important;font-weight:800!important;color:#E60023!important} html body.single-product #page #content section.v7-related .v7-price .amount,html body.single-product #page #content section.v7-related .v7-price bdi{color:#E60023!important} html body.single-product #page #content section.v7-related .v7-price small{font-size:12.5px!important;font-weight:600!important;color:#5B6676!important} html body.single-product #page #content section.v7-related .v7-price .por,html body.single-product #page #content section.v7-related .v7-price .por *{color:#08294D!important;font-size:16px!important} html body.single-product #page #content section.v7-related .v7-avail{font-size:13px!important;margin:2px 0 10px!important} html body.single-product #page #content section.v7-related .v7-rbuy{display:flex;flex-direction:column;gap:8px;margin:0!important} html body.single-product #page #content section.v7-related .v7-rrow{display:grid!important;grid-template-columns:auto minmax(0,1fr)!important;gap:8px!important;margin:0!important} html body.single-product #page #content section.v7-related .v7-qty{height:40px!important;border-radius:8px!important} html body.single-product #page #content section.v7-related .v7-qty input{width:34px!important} html body.single-product #page #content section.v7-related .v7-btn{height:40px!important;min-height:40px!important;margin:0!important;border-radius:8px!important;font-size:14.5px!important;white-space:nowrap;padding:0 10px!important} html body.single-product #page #content section.v7-related .v7-btn .ico,html body.single-product #page #content section.v7-related .v7-btn svg{display:none!important} html body.single-product #page #content section.v7-related .v7-btn-line{height:38px!important;min-height:38px!important;border:1px solid #9FB0C5!important;color:#08294D!important;background:#fff!important;font-size:14px!important} html body.single-product #page #content section.v7-related .v7-btn-line:hover{border-color:#08294D!important;background:#F4F7FB!important} html body.single-product #page #content section.v7-related .ml-heart{position:absolute!important;top:12px;right:12px;left:auto!important;z-index:2} @media (min-width:761px) and (max-width:1199px){ html body.single-product #page #content section.v7-related>ul{grid-template-columns:repeat(3,minmax(0,1fr))!important} html body.single-product #page #content section.v7-related .v7-rrow{grid-template-columns:minmax(0,1fr)!important} html body.single-product #page #content section.v7-related .v7-qty{width:100%!important} } @media (max-width:760px){ html body.single-product #page #content section.v7-related>ul{grid-template-columns:repeat(2,minmax(0,1fr))!important;gap:10px!important} html body.single-product #page #content section.v7-related li.v7-rcard{padding:10px!important} html body.single-product #page #content section.v7-related .v7-rbody h3{font-size:14.5px!important} html body.single-product #page #content section.v7-related .v7-price{font-size:17px!important} html body.single-product #page #content section.v7-related .v7-price small{display:block} html body.single-product #page #content section.v7-related .v7-rrow{grid-template-columns:minmax(0,1fr)!important} html body.single-product #page #content section.v7-related .v7-qty{width:100%!important} html body.single-product #page #content section.v7-related .v7-btn-line{font-size:12.5px!important;padding:0 4px!important} } html body.single-product #page #content section.v7-related .v7-rbody h3 a{font-weight:700!important;font-family:var(--f-head,inherit)} html body.single-product #page #content section.v7-related .v7-rrow>.v7-btn-line{grid-column:1/-1!important} html body.single-product #page #content section.v7-related .v7-qty{display:grid!important;grid-template-columns:30px minmax(0,1fr) 30px!important;align-items:stretch} html body.single-product #page #content section.v7-related .v7-qty input{width:100%!important;min-width:28px;text-align:center} html body.single-product #page #content section.v7-related form.v7-rbuy{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:8px!important;flex-wrap:nowrap!important} html body.single-product #page #content section.v7-related form.v7-rbuy>*{width:100%!important;max-width:none!important;flex:0 0 auto!important;margin:0!important} html body.single-product #page #content section.v7-related p.v7-price.is-por{color:#08294D!important;font-size:16px!important;font-weight:700!important;font-family:var(--f-head,inherit)} @media (max-width:760px){html body.single-product #page #content section.v7-related p.v7-price.is-por{font-size:14.5px!important}} /* ------------------------------------------------------------------ 2.79.1 Product page top: calmer gallery on tablet/phone, refined title, sticky bar */ /* Gallery: 4:3 frame on tablets and phones so the buy box is reached sooner. */ @media (max-width:960px){ html body.single-product #page #content .v7-pleft{width:100%!important;max-width:none!important} html body.single-product #page #content .v73-gal{width:100%!important;max-width:none!important;height:auto!important} html body.single-product #page #content .v73-gal .v7-gmain{width:100%!important;height:auto!important;aspect-ratio:4/3!important;max-height:440px;display:flex!important;align-items:center;justify-content:center;padding:16px!important} html body.single-product #page #content .v73-gal .v7-gmain img{width:100%!important;height:100%!important;max-height:100%!important;object-fit:contain!important} } @media (max-width:760px){html body.single-product #page #content .v73-gal .v7-gmain{max-height:300px;padding:10px!important}} /* Title: confident but not oversized. */ html body.single-product #page #content h1.product_title{font-size:clamp(26px,2.5vw,36px)!important;line-height:1.15!important;letter-spacing:-.02em;margin-bottom:10px!important} /* Sticky buy bar: bold name, red price, matching buttons. */ html body.single-product .v67-sbar{box-shadow:0 -8px 24px rgba(8,41,77,.10)!important;border-top:1px solid #DCE4EE!important} html body.single-product .v67-sbar .v67-sb-t b{color:#08294D!important;font-weight:700!important;font-family:var(--f-head,inherit)} html body.single-product .v67-sbar .v67-sb-p{color:#E60023!important;font-weight:800!important} html body.single-product .v67-sbar .v67-sb-a input{height:42px!important;width:64px!important;border:1px solid #CAD5E2!important;border-radius:8px!important;text-align:center} html body.single-product .v67-sbar .v67-sb-a button{height:42px!important;border-radius:8px!important;font-weight:700!important;padding:0 18px!important} html body.single-product .v67-sbar .v67-sb-line{border:1px solid #9FB0C5!important;background:#fff!important;color:#08294D!important} html body.single-product .v67-sbar .v67-sb-line:hover{border-color:#08294D!important;background:#F4F7FB!important} @media (max-width:760px){ html body.single-product .v67-sbar .v67-sb-a{display:grid!important;grid-template-columns:56px 1fr 1fr!important;gap:6px!important;width:100%} html body.single-product .v67-sbar .v67-sb-a input{width:56px!important} html body.single-product .v67-sbar .v67-sb-a button{padding:0 6px!important;font-size:13.5px!important;white-space:nowrap} } /* Tabs on phones: hint that the row scrolls (soft fade at the right edge). */ @media (max-width:760px){html body.single-product #page #content [role=tablist]{-webkit-mask-image:linear-gradient(90deg,#000 85%,transparent);mask-image:linear-gradient(90deg,#000 85%,transparent)}} /* ------------------------------------------------------------------ 2.79.2 Products with options (size etc.): buy row matches the standard buy box */ html body.single-product #page #content form.variations_form table.variations{margin:4px 0 14px!important;border:0!important} html body.single-product #page #content form.variations_form table.variations th.label{padding:0 0 6px!important;font-size:15px!important;font-weight:700!important;color:#08294D!important;text-align:left} html body.single-product #page #content form.variations_form table.variations td.value{padding:0!important;display:flex;align-items:center;gap:12px;flex-wrap:wrap} html body.single-product #page #content form.variations_form table.variations select{min-width:240px;height:48px!important;border:1px solid #CAD5E2!important;border-radius:10px!important;font-size:15px!important;padding:0 40px 0 14px!important;background-color:#fff!important} html body.single-product #page #content form.variations_form table.variations select:focus-visible{outline:3px solid #145DA0;outline-offset:2px} html body.single-product #page #content form.variations_form .reset_variations{font-size:14px;color:#E60023!important} html body.single-product #page #content form.variations_form .single_variation:empty{display:none!important} html body.single-product #page #content form.variations_form .single_variation{margin:0 0 12px!important} html body.single-product #page #content .woocommerce-variation-add-to-cart{display:grid!important;grid-template-columns:142px minmax(0,1fr)!important;gap:10px!important;padding:0!important;align-items:stretch} html body.single-product #page #content .woocommerce-variation-add-to-cart .quantity{display:grid!important;grid-template-columns:42px minmax(0,1fr) 42px!important;width:142px!important;height:52px!important;margin:0!important;border:1px solid #B9C6D6!important;border-radius:10px!important;overflow:hidden;background:#fff!important} html body.single-product #page #content .woocommerce-variation-add-to-cart .quantity button{border:0!important;background:#F4F7FB!important;color:#08294D!important;height:100%!important} html body.single-product #page #content .woocommerce-variation-add-to-cart .quantity input{border:0!important;height:100%!important;width:100%!important;text-align:center;font-size:16px!important;font-weight:700} html body.single-product #page #content .woocommerce-variation-add-to-cart button.single_add_to_cart_button{height:52px!important;margin:0!important;border-radius:10px!important;font-size:16px!important;font-weight:700!important;width:100%!important} html body.single-product #page #content .woocommerce-variation-add-to-cart button.single_add_to_cart_button.disabled{opacity:.55!important;cursor:not-allowed} @media (max-width:760px){ html body.single-product #page #content form.variations_form table.variations select{min-width:0;width:100%!important} html body.single-product #page #content form.variations_form table.variations td.value{display:block} html body.single-product #page #content .woocommerce-variation-add-to-cart{grid-template-columns:128px minmax(0,1fr)!important} html body.single-product #page #content .woocommerce-variation-add-to-cart .quantity{width:128px!important;grid-template-columns:38px minmax(0,1fr) 38px!important} } html body.single-product #page #content .woocommerce-variation-add-to-cart::before,html body.single-product #page #content .woocommerce-variation-add-to-cart::after{content:none!important;display:none!important} html body.single-product #page #content form.variations_form .woocommerce-variation-price .price{font-size:18px!important;color:#E60023!important;font-weight:800} html body.single-product #page #content form.variations_form .woocommerce-variation-price .price .amount{color:#E60023!important}